{% extends '@admin/layouts/commonmaster.html.twig' %}

{% block title %} | Season Stats {% endblock %}

{% block styles %}
<style>
/* Calendar Date Card */
.date-card {
width: 80px; /* Adjust width for a square appearance */
border: 1px solid #ddd; /* Optional border */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
border-radius: 8px; /* Rounded corners */
background: #f9f9f9;
}

.date-month {
font-size: 1rem;
font-weight: bold;
color: #007bff;
}

.date-day {
font-size: 2rem;
font-weight: bold;
color: #333;
line-height: 1.2;
}

.date-year {
font-size: 0.8rem;
color: #666;
}

.date-label {
font-size: 0.75rem;
color: #888;
}

/* Circles for Matches */
.circle {
width: 20px;
height: 20px;
background-color: #007bff; /* Primary color */
border-radius: 50%;
display: inline-block;
}

.gap-2 {
gap: 10px; /* Space between circles */
}

/* Image */
.season-banner {
max-width: 100%; /* Ensures the image is responsive */
height: auto;
max-height: 300px; /* Optional: Limit the height */
}

/* Responsive Adjustments */
@media (max-width: 767.98px) {
.row.align-items-center.text-center.text-lg-start {
flex-direction: column; /* Stack content vertically */
}
.date-card {
margin-bottom: 1rem; /* Add spacing */
}
.season-banner {
margin-top: 1rem; /* Add spacing for better layout */
max-height: 200px; /* Smaller image for mobile */
}
}

/* Styling for the Navbar for this page */
.button-container {
display: flex;
justify-content: center; /* Center the content */
align-items: center; /* Align items vertically */
background-color: #f5f5f5; /* Light background for contrast */
overflow: hidden; /* Ensure content doesn't overflow the rounded corners */
width: fit-content;
margin: 10px auto; /* Center horizontally on the page */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for effect */
}

/* Remove list styles */
.button-container ul {
display: flex;
margin: 0;
padding: 0;
list-style: none;
width: 100%;
}

.button-container li {
flex: 1; /* Ensure equal widths */
text-align: center;
padding: 10px 20px;
background-color: #007bff; /* Button background color */
color: white; /* Text color */
font-size: 16px;
font-weight: bold;
cursor: pointer;
}

/* Remove the border on the last item */
.button-container li:last-child {
border-right: none;
}

/* Hover effect for buttons */
.button-container li:hover {
background-color: #0056b3; /* Darker blue on hover */
}

/* Active effect for buttons */
.button-container li:active {
background-color: #003f7f; /* Even darker blue on click */
}

</style>
{% endblock %}

{% block content %}

<div class="page-body">
    <div class="container-xl">

        {% if season_has_events %}

        <div class="col-12">
            <div class="card card-md">
                <div class="card-body">
                    <div class="container my-4">
                        <!-- Start and End Date, Season Name, and Image -->
                        <div class="row align-items-center text-center text-lg-start">
                            <!-- Start Date -->
                            <div class="col-6 col-lg-2">
                                <div class="card text-center date-card mx-auto mx-lg-0">
                                    <div class="card-body p-2">
                                        <div class="date-month">{{ season.StartDate|date('M') }}</div>
                                        <div class="date-day">{{ season.StartDate|date('d') }}</div>
                                        <div class="date-year">{{ season.StartDate|date('Y') }}</div>
                                        <div class="date-label text-muted">Start Date</div>
                                    </div>
                                </div>
                            </div>
                            <!-- End Date -->
                            <div class="col-6 col-lg-2">
                                <div class="card text-center date-card mx-auto mx-lg-0">
                                    <div class="card-body p-2">
                                        <div class="date-month">{{ season.EndDate|date('M') }}</div>
                                        <div class="date-day">{{ season.EndDate|date('d') }}</div>
                                        <div class="date-year">{{ season.EndDate|date('Y') }}</div>
                                        <div class="date-label text-muted">End Date</div>
                                    </div>
                                </div>
                            </div>
                            <!-- Season Name -->
                            <div class="col-lg-4 mt-3 mt-lg-0">
                                <h1 class="h2">{{ season.Name }}</h1>
                            </div>
                            <!-- Season Image -->
                            <div class="col-lg-4 text-center mt-3 mt-lg-0">
                                <img src="{{ asset('MatchDayFiles/Season/') }}{{ season.SeasonBannerFile }}" alt="" class="img-fluid jarallax-img season-banner">
                            </div>
                        </div>

                        <!-- Text and Circles -->
                        <div class="row mt-4">
                            <!-- Text -->
                            <div class="col-12 text-center">
                                <span>
                                    The highly anticipated 2024-2025 Football Kenya Federation (FKF) National Super League promises to be a season of electrifying action
                                    and unforgettable moments.
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row row-deck row-cards mt-2">
            <div class="col-12">
                <div class="row row-cards">
                    <div class="col-sm-6 col-6 col-md-3 col-lg-3">
                        <a href="{{ path('app_show_season_events', {'slug': app.request.attributes.get('slug') }) }}" style="text-decoration: none;">
                            <div class="card card-sm" style="background-color: #C4EED0;">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-auto">
                                            <span class="bg-primary text-white avatar">
                                                <i class="ti ti-ticket"></i>
                                            </span>
                                        </div>
                                        <div class="col">
                                            <div class="font-weight-medium">
                                                <strong>View Season Events</strong>
                                            </div>
                                            <div class="text-secondary">

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-sm-6 col-6 col-md-3 col-lg-3">
                        <a href="" style="text-decoration: none;">
                            <div class="card card-sm" style="background-color: #A5DFF4;">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-auto">
                                            <span class="bg-warning text-white avatar"><!-- Download SVG icon from http://tabler-icons.io/i/brand-twitter -->
                                                <i class="ti ti-password-user"></i>
                                            </span>
                                        </div>
                                        <div class="col">
                                            <div class="font-weight-medium">
                                                <strong>Clerks</strong>
                                            </div>
                                            <div class="text-secondary">
                                                {{ clerks|length }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-sm-6 col-6 col-md-3 col-lg-3">
                        <div class="card card-sm">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col-auto">
                                        <span class="bg-green text-white avatar"><!-- Download SVG icon from http://tabler-icons.io/i/shopping-cart -->
                                            <i class="ti ti-table-shortcut"></i>
                                        </span>
                                    </div>
                                    <div class="col">
                                        <div class="font-weight-medium" id="updateSeasonStandings">
                                            <strong>Events Hosted</strong>
                                        </div>
                                        <div class="text-secondary">
                                            {{ season_events|length }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-6 col-md-3 col-lg-3">
                        <div class="card card-sm">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col-auto">
                                        <span class="bg-facebook text-white avatar"><!-- Download SVG icon from http://tabler-icons.io/i/brand-facebook -->
                                            <i class="ti ti-hierarchy"></i>
                                        </span>
                                    </div>
                                    <div class="col">
                                        <div class="font-weight-medium">
                                            <strong>Merchandise</strong>
                                        </div>
                                        <div class="text-secondary">
                                            <small>(In production)</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <span class="card-title"><strong> Attendance</strong></span>
                        <!-- <canvas id="event_attendance"></canvas> -->
                        <div id="event_attendance"></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <span class="card-title"><strong> Generated Revenue</strong></span>
                        <div id="event_finance"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card" style="height: 28rem">
                    <div class="card-header">
                        <strong><span>Clerk Stats <small>(active this season)[in production]</small></span></strong>
                    </div>
                    <div class="card-body card-body-scrollable card-body-scrollable-shadow">
                        <div class="divide-y">
                            {% for clerk in clerks %}
                            <div>
                                <a href="" style="text-decoration: none;color: black;">
                                    <div class="row">
                                        <div class="col-auto">
                                            <span class="avatar">
                                                {% set words = clerk.name|split(' ') %}
                                                {% set abbreviation = '' %}

                                                {% for word in words %}
                                                {% set abbreviation = abbreviation ~ word|first|upper %}
                                                {% endfor %}

                                                {{ abbreviation }}
                                            </span>
                                        </div>
                                        <div class="col">
                                            <div class="text-truncate">
                                                <strong>{{ clerk.name }}</strong>
                                            </div>
                                            <div class="text-secondary">{{ clerk.email }}</div>
                                        </div>
                                    </div>
                                </a>
                            </div>

                            {% endfor %} 
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header border-0">
                        <div class="card-title">Season Game Stats</div>
                    </div>
                    <div class="card-table table-responsive" style="height: 24rem;">
                        <table class="table table-hover table-vcenter">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Match</th>
                                    <th>Attendance</th>
                                    <th>Revenue</th>
                                    <th>Date</th>
                                    <th>View Stats</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% set number = 1 %}
                                {% for season_stat in season_stats %}
                                <tr>
                                    <td class="text-nowrap text-secondary">{{ number }}</td>
                                    {% set number = number + 1 %}
                                    <td class="w-1">
                                        <div style="display: flex; align-items: center; gap: 10px;">
                                            <span
                                                class="avatar avatar-sm"
                                                style="background-image: url('{{ asset('MatchDayFiles/TeamLogos/') }}{{ season_stat.team_a_logo }}')"
                                                title="{{ season_stat.team_a }}">
                                            </span>
                                            <span>vs</span>
                                            <span
                                                class="avatar avatar-sm"
                                                style="background-image: url('{{ asset('MatchDayFiles/TeamLogos/') }}{{ season_stat.team_b_logo }}')"
                                                title="{{ season_stat.team_b }}">
                                            </span>
                                        </div>
                                    </td>
                                    <td class="text-nowrap text-secondary">{{ season_stat.attended_count }}<span style="color: #E81341;">({{ season_stat.not_attended_count }})</span></td>
                                    <td class="text-nowrap text-secondary"><strong>KSH {{ season_stat.revenue_generated|number_format }}</strong></td>
                                    <td class="text-nowrap text-secondary">{{ season_stat.start_date|date('Y-m-d') }}</td>
                                    <td class="text-center text-secondary"><a href="{{ path('app_season_event_show', { 'slug': season_stat.event_slug }) }}" style="text-decoration: none;">View</a></td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        {% else %}

        <div class="col-12">
            <div class="card card-md">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col">
                            <h2 class="h3">There are no upcoming events for the season</h2>
                            <p class="m-0 text-secondary">
                                No Upcoming Events Scheduled
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-xl d-flex flex-column justify-content-center">
            <div class="empty">
                <div class="empty-img"><img src="{{ asset('images/static/illustrations/void.svg') }}" height="128" alt="">
                </div>
                <p class="empty-title">No upcoming events found</p>
                <p class="empty-subtitle text-secondary">
                    Try creating an event to populate your dashboard
                </p>
                <div class="empty-action">
                    <a href="{{ path('app_season_event_create', { 'slug': app.request.get('slug') }) }}" class="btn btn-primary">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
                        Create Event
                    </a>
                </div>
            </div>
        </div>

        {% endif %}

    </div>
</div>

{% endblock %}

{% block scripts %}

<script src="{{ asset('js/confettijs/confetti.min.js') }}" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tsparticles-confetti/2.12.0/tsparticles.confetti.bundle.min.js" integrity="sha512-3LobCjM2nQ9WclTbZY+5+IqLKwUTlBaUJTmGWdsIr7M6T5F/l25oIBNeITuef+mbD8PBvmuCF9fwXVn+PCT23Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
$(document).ready(function() {

    var event_id = JSON.parse("{{ last_event.id|default() }}");
    var season_slug = "{{ app.request.attributes.get('slug') }}";
    var season_slug = {{ season_slug|json_encode|raw }};

    $.ajax({
        url: '/matchday/get_season_line_attendance_chart_data/' + season_slug,
        method: 'GET',
        success: function(response){
            window.ApexCharts && (new ApexCharts(document.getElementById('event_attendance'), {
                chart: {
                    type: "area",
                    fontFamily: 'inherit',
                    height: 240,
                    parentHeightOffset: 0,
                    toolbar: {
                        show: false,
                    },
                    animations: {
                        enabled: false
                    },
                },
                noData: {
                    text: "Loading...",
                    align: 'center',
                    verticalAlign: 'middle',
                    offsetX: 0,
                    offsetY: 0,
                    style: {
                        color: "#000000",
                        fontSize: '14px',
                        fontFamily: "Helvetica"
                    }
                },
                dataLabels: {
                    enabled: false,
                },
                fill: {
                    opacity: .16,
                    type: 'solid'
                },
                stroke: {
                    width: 2,
                    lineCap: "round",
                    curve: "smooth",
                },
                series: [{
                    name: "Attended",
                    data: response.attended_count
                },{
                        name: "Not Attended",
                        data: response.not_attended_count
                    }],
                tooltip: {
                    theme: 'dark'
                },
                grid: {
                    padding: {
                        top: -20,
                        right: 0,
                        left: -4,
                        bottom: -4
                    },
                    strokeDashArray: 4,
                },
                xaxis: {
                    labels: {
                        padding: 0,
                    },
                    tooltip: {
                        enabled: false
                    },
                    axisBorder: {
                        show: false,
                    },
                    type: 'text',
                },
                yaxis: {
                    labels: {
                        padding: 4
                    },
                },
                labels:  response.labels,
                colors: [tabler.getColor("primary"), tabler.getColor("red")],
                legend: {
                    show: true,
                },
            })).render();
        },
        error: function(error){
        }
    })

    $.ajax({
        url: '/matchday/get_season_line_finance_chart_data/' + season_slug,
        method: 'GET',
        success: function(response){
            window.ApexCharts && (new ApexCharts(document.getElementById('event_finance'), {
                chart: {
                    type: "area",
                    fontFamily: 'inherit',
                    height: 240,
                    parentHeightOffset: 0,
                    toolbar: {
                        show: false,
                    },
                    animations: {
                        enabled: false
                    },
                },
                noData: {
                    text: "Loading...",
                    align: 'center',
                    verticalAlign: 'middle',
                    offsetX: 0,
                    offsetY: 0,
                    style: {
                        color: "#000000",
                        fontSize: '14px',
                        fontFamily: "Helvetica"
                    }
                },
                dataLabels: {
                    enabled: false,
                },
                fill: {
                    opacity: .16,
                    type: 'solid'
                },
                stroke: {
                    width: 2,
                    lineCap: "round",
                    curve: "smooth",
                },
                series: [{
                    name: "Amount Earned",
                    data: response.revenue_data,
                }],
                tooltip: {
                    theme: 'dark'
                },
                grid: {
                    padding: {
                        top: -20,
                        right: 0,
                        left: -4,
                        bottom: -4
                    },
                    strokeDashArray: 4,
                },
                xaxis: {
                    labels: {
                        padding: 0,
                    },
                    tooltip: {
                        enabled: false
                    },
                    axisBorder: {
                        show: false,
                    },
                    type: 'text',
                },
                yaxis: {
                    labels: {
                        padding: 4
                    },
                },
                labels: response.labels,
                colors: [tabler.getColor("primary")],
                legend: {
                    show: true,
                },
            })).render();
        },
        error: function(error){

        }
    })

    $('#team_a_score, #team_b_score').on('keyup', function() {
        if($('#team_a_score').val() != '' && $('#team_b_score').val() != ''){
            $('#close_event_create_new_event_btn').removeAttr('disabled')
        }else{
            $('#close_event_create_new_event_btn').prop('disabled', true)
        }
    })

    $('body').on('click', '#close_event_create_new_event_btn', function(e) {
        e.preventDefault()
        $('#modal-footer').replaceWith(`<div class="modal-footer" id="modal-replaced-footer"><span id="confirm_close_replaced" class="me-auto" style="color: red;font-size: 16px;">Are you sure you want to proceed?</span><button type="button" class="btn btn-primary" id="close_replaced_modal">No</button><button type="button" class="btn btn-danger" id="close_event_create_new_event_btn_replaced">Yes</button></div>`)
    })

    $('body').on('click', '#close_event_create_new_event_btn_replaced', function() {

        $('#confirm_close_replaced').html('<img src="{{ asset('images/svg/loader.svg') }}" height="36" alt="">')

        $('#close_replaced_modal').prop('disabled', true)
        $('#close_event_create_new_event_btn_replaced').prop('disabled', true)

        var formData = $(this).serialize();

        var teamAScore = $('#team_a_score').val()
        var teamBScore = $('#team_b_score').val()
        //var seasonId = season_id
        var eventHighlights = $('#event_highlights').val()
        var eventHighlightPic = $('#match_highlight_pic')[0].files[0]

        var formData = new FormData()
        formData.append('team_a_score', teamAScore)
        formData.append('team_b_score', teamBScore)
        formData.append('event_highlights', eventHighlights)
        //formData.append('season_id', seasonId)
        if(eventHighlightPic){
            formData.append('highlight_pic', eventHighlightPic)
        }

        console.log(formData)

        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            processData: false,
            contentType: false,
            cache: false,
            url: '/matchday/event/stat/' + event_id,
            method: 'POST',
            data: formData,
            success: function(res) {
                console.log(res)
                setTimeout(function() {
                    $('#confirm_close_replaced').html('')
                    toastr.options = {
                        'progressBar' : true,
                        "showMethod": "fadeIn",
                        "positionClass": "toast-top-right",
                        "hideMethod": "fadeOut",
                        "closeButton": true,
                        "newestOnTop": false,
                    }
                    toastr.success('Event successfully closed. All event notes have been saved.');

                    const count = 200,
                    defaults = {
                        origin: { y: 0.7 },
                    };

                    function fire(particleRatio, opts) {
                        confetti(
                            Object.assign({}, defaults, opts, {
                                particleCount: Math.floor(count * particleRatio),
                            })
                        );
                    }

                    fire(0.25, {
                        spread: 26,
                        startVelocity: 55,
                    });

                    fire(0.2, {
                        spread: 60,
                    });

                    fire(0.35, {
                        spread: 100,
                        decay: 0.91,
                        scalar: 0.8,
                    });

                    fire(0.1, {
                        spread: 120,
                        startVelocity: 25,
                        decay: 0.92,
                        scalar: 1.2,
                    });

                    fire(0.1, {
                        spread: 120,
                        startVelocity: 45,
                    });

                    window.location = '/matchday/event/create/' + season_slug

                }, 100)
            },
            error: function(error) {
                console.log(error)
            }
        })
    })

    $('body').on('click', '#close_replaced_modal', function() {
        $('#modal-replaced-footer').replaceWith(`<div class="modal-footer" id="modal-footer"><span id="confirm_close" class="me-auto" style="color: red;font-size: 16px;"></span><button type="button" class="btn btn-primary" id="close_event_create_new_event_btn">Close Event</button></div>`)
    })

    $('body').on('click', '#close_modal_btn', function() {
        $("#close_event_form").trigger("reset");
        $('#modal-replaced-footer').replaceWith(`<div class="modal-footer" id="modal-footer"><span id="confirm_close" class="me-auto" style="color: red;font-size: 16px;"></span><button type="button" class="btn btn-primary" id="close_event_create_new_event_btn" disabled>Close Event</button></div>`)
    })

    // $('#updateSeasonStandings').on('click', function() {
    //     $.ajax({
    //         method: 'GET',
    //         url: '/ticketier/get_season_standings/' + season_id,
    //         success: function(res) {
    //             console.log(res)
    //         },
    //         error: function(error, xhr) {
    //             console.log(error)
    //         },
    //     })
    // })

});

</script>


{% endblock %}