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

{% block title %} | View Event {% endblock %}

{% block styles %}
<style>
.resendTicketsBtn{
margin-right: 10px;
}
</style>
{% endblock %}

{% block content %}
<div class="page-header d-print-none">
    <div class="container">
        <div class="row g-3 align-items-center">
            <div class="col-auto">
                <span class="status-indicator status-green status-indicator-animated">
                    <span class="status-indicator-circle"></span>
                    <span class="status-indicator-circle"></span>
                    <span class="status-indicator-circle"></span>
                </span>
            </div>
            <div class="col">
                <h2 class="page-title" style="color: wheat;">
                    {{ event.TeamA() }} vs {{ event.TeamB() }}
                </h2>
                <div class="text-secondary">
                    <ul class="list-inline list-inline-dots mb-0">
                        {% set now = "now"|date('Y-m-d') %}
                        {% if event.startDate|date('Y-m-d') == now %}
                        <li class="list-inline-item"><span class="text-green">Happening Today:</span></li>
                        <li class="list-inline-item" style="color: wheat;">{{ event.startDate|date('jS M Y') }}</li>
                        {% elseif event.startDate|date('Y-m-d') < now %}
                            <li class="list-inline-item"><span class="text-green">Held at:</span></li>
                            <li class="list-inline-item" style="color: wheat;">{{ event.startDate|date('jS M Y') }}</li>
                            {% elseif event.startDate|date('Y-m-d') > now %}
                            <li class="list-inline-item"><span class="text-green">Starts In:</span></li>
                            <li class="list-inline-item" style="color: wheat;">{{ event.startDate|date('jS M Y') }}</li>
                            {% endif %}
                    </ul>
                </div>
            </div>
            <div class="col-md-auto ms-auto d-print-none">
                <div class="btn-list">
                    <a href="{{ path('app_organization_create_clerk') }}" class="btn btn-success">
                        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-ticket"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 5l0 2" /><path d="M15 11l0 2" /><path d="M15 17l0 2" /><path d="M5 5h14a2 2 0 0 1 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-3a2 2 0 0 0 0 -4v-3a2 2 0 0 1 2 -2" /></svg>
                        Add Event Clerks
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

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

        <div class="row row-cards">
            <div class="col-md-4">
                <div class="card" style="background-color: #DCFFA8;">
                    <div class="card-body">
                        <div class="subheader">{{ event.getVenueName() }}</div>
                        <div class="h3 m-0">{{ event.getTeamA() }} vs {{ event.getTeamB() }}</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-6 col-md-2">

                <div class="card" style="background-color: #D3E3FD;">
                    <div class="card-body">
                        <div class="subheader">Organization Clerks</div>
                        <div class="h3 m-0">{{ clerks|length }}</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-6 col-md-2">
                <div class="card" style="background-color: #C2E7FF;">
                    <div class="card-body">
                        <div class="subheader"> Tickets Sold</div>
                        <div class="h3 m-0">{{ totalTicketsSold|number_format }}</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-6 col-md-2">
                <div class="card" style="background-color: #C4EED0;">
                    <div class="card-body">
                        <div class="subheader">Total Earned</div>
                        <div class="h3 m-0">Ksh.{{ total_transaction_amount[0]['transaction_amount']|number_format }}</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-6 col-md-2" id="sms_balance" style="cursor: pointer;">
                <div class="card" style="background-color: #C4EED0;">
                    <div class="card-body" id="loader_bonga_sms">
                        <div class="subheader">Bonga SMS Balance</div>
                        <div class="h3 m-0" id="sms_credit">Press to reload<i class="ti ti-refresh"></i></div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card">
                    <img src="{{ asset('MatchDayFiles/EventBanners/') }}{{ event.getEventMetadata().getEventBannerFile() }}" class="card-img-top" style="object-fit: cover; height: 446px;" alt="Event Banner">
                </div>
            </div>

            <div class="col-md-8" >
                <div class="card"  style="">
                    <div class="card-body">
                        <h3 class="card-title">Event Tickets sold since creation</h3>
                        <div id="chart-mentions" class=""></div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link tab-button" id="tab1-tab" data-bs-toggle="tab" data-bs-target="#tab1-content" type="button" role="tab" aria-controls="tab1-content" aria-selected="true">
                                <strong>Purchased Tickets Aggregates</strong>
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active tab-button" id="tab2-tab" data-bs-toggle="tab" data-bs-target="#tab2-content" type="button" role="tab" aria-controls="tab2-content" aria-selected="false">
                                <strong>Purchased Tickets Overview</strong>
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link tab-button" id="tab2-tab" data-bs-toggle="tab" data-bs-target="#unsentTickets" type="button" role="tab" aria-controls="unsentTickets" aria-selected="false">
                                <strong>Unsent Tickets</strong>
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link tab-button" id="tab3-tab" data-bs-toggle="tab" data-bs-target="#tab3-content" type="button" role="tab" aria-controls="tab3-content" aria-selected="false">
                                <strong>Event Seasonal Tickets</strong>
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade" id="tab1-content" role="tabpanel" aria-labelledby="tab1-tab">

                            <!-- Card for displaying data -->
                            <div id="resultCard"></div>

                            <div class="col-12">
                                <div class="card">
                                    <div class="card-table table-responsive">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>Time period</th>
                                                    {% for fund_data in event_fund_data %}
                                                    <th>{{ fund_data['name'] }}</th>
                                                    {% endfor %}
                                                    <th>Total</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>Today</td>
                                                    {% set total = 0 %}

                                                    {% for fund_data in event_fund_data %}
                                                    <td>{{ fund_data['tier_ticket_count'] }}</td>
                                                    {% set total = total + fund_data['tier_ticket_count'] %}
                                                    {% endfor %}

                                                    <td>{{ total }}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade show active" id="tab2-content" role="tabpanel" aria-labelledby="tab2-tab">

                            <div id='' style="">
                                <table id="purchasedFanTickets"
                                    class="table table-responsive"
                                    style="width:100%; height:auto; font-weight:normal; text-transform: uppercase;"
                                    toolbar="#tb">

                                    <thead>
                                        <tr>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="unsentTickets" role="tabpanel" aria-labelledby="unsentTickets">

                        </div>

                        <div class="tab-pane fade" id="tab3-content" role="tabpanel" aria-labelledby="tab3-tab">

                            <!-- Get the season and the event id to be sent to the livewire file -->

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}

<script src="{{ asset('dist/apexcharts/dist/apexcharts.min.js?1692870487') }}" defer></script>

<script>
$(document).ready(function() {
    $('#sms_balance').on('click', function() {

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

        $.ajax({
            type: 'GET',
            method: 'GET',
            url: "{{ path('app_organization_sms_balance') }}",
            success: function(res){
                console.log(res)
                // $('#sms_credit').html(res.sms_credit + '<i class="ti ti-refresh"></i>')
                $('#loader_bonga_sms').html('<div class="subheader">Bonga SMS Balance</div><div class="h3 m-0" id="sms_credit">' + res.sms_credit + '<i class="ti ti-refresh"></i></div>')
            },
            error: function(error){
            },
        })
    })
})

// Ensure that the DOM is fully loaded before running this script
document.addEventListener("DOMContentLoaded", function () {
    // Initialize the chart
    var options = {
        chart: {
            type: 'bar', // Set the chart type
            height: 350 // Set the height of the chart
        },
        series: {{ seriesData|json_encode()|raw }}, 
        xaxis: {
            categories: {{ labels|json_encode()|raw }},
        },
        title: {
            text: 'Ticket Purchases by Type', // Title of the chart
            align: 'center' // Align title to center
        },
        plotOptions: {
            bar: {
                horizontal: false, // Set to true for horizontal bars
                columnWidth: '30%', // Width of the bars
                endingShape: 'rounded' // Round the edges of the bars
            },
        },
        dataLabels: {
            enabled: true // Enable data labels on the bars
        },
        colors: ['#008FFB', '#00E396', '#182433', '#C83232'], // Set the colors for each series
    };

    var chart = new ApexCharts(document.querySelector("#chart-mentions"), options); // Create the chart
    chart.render(); // Render the chart
});

</script>

<script>
// Column thresholds for hiding/showing
const columnThresholds = {
    'm.transaction_id': 250,
    't.price': 250,
    't.name': 250,
    'ft.ticket_code': 1500,
    'm.paid_by': 1000,
    'ft.purchased_at': 250,
    'ft.attended_at': 700 ,       
};

// Adjust columns visibility based on screen width
function updateGridColumnsVisibility() {
    const width = $(window).width();
    Object.keys(columnThresholds).forEach(field => {
        if (width < columnThresholds[field]) {
            $('#purchasedFanTickets').datagrid('hideColumn', field);
        } else {
            $('#purchasedFanTickets').datagrid('showColumn', field);
        }
    });
}

$(document).ready(function() {

    const eventId = {{ event.getId() }}

    $('#purchasedFanTickets').datagrid({
        url: "/matchday/" + eventId + "/purchased_tickets",
        method: 'GET',
        singleSelect: true,
        pagination: true,
        fitColumns: true,
        collapsible: true,
        showFooter: true,
        rownumbers: true,
        pageSize: 20,
        loadMsg: 'Loading Organizations',
        detailFormatter: function(index, row) {
            return '<div class="ddv" style="padding: 5px 0"></div>';
        },
        onExpandRow: function(index, row) {
            let detailHtml = '';
            Object.keys(columnThresholds).forEach(field => {
                const col = $('#purchasedFanTickets').datagrid('getColumnOption', field);
                if (col && col.hidden) {
                    const value = row[field.split('.').pop()];
                    detailHtml += `<div><strong>${col.title}</strong>: ${value ?? 'N/A'}</div>`;
                }
            });
            $(this).datagrid('fixDetailRowHeight', index);
            $(this).datagrid('getRowDetail', index).html(detailHtml);
        },
        columns: [[
            {
                field: 'm.transaction_id', title: 'Mpesa Code', width: 30,
                formatter: (v, r) => r.transaction_id
            },
            {
                field: 't.price', title: 'Amount', width: 30,
                formatter: (v, r) => r.price
            },
            {
                field: 't.name', title: 'Ticket Name', width: 30,
                formatter: (v, r) => r.name
            },
            {
                field: 'ft.ticket_code', title: 'Ticket Code', width: 30,
                formatter: (v, r) => r.ticket_code
            },
            {
                field: 'm.paid_by', title: 'Phone Number', width: 30,
                formatter: (v, r) => r.paid_by
            },
            {
                field: 'ft.purchased_at', title: 'Purchased AT', width: 35,
                formatter: (v, r) => r.purchased_at
            },
            {
                field: 'ft.attended_at', title: 'Attended AT', width: 30,
                formatter: (v, r) => r.attended_at ? r.attended_at : '<span>NOT ATTENDED</span>'
            }
        ]]
    }).datagrid('enableFilter', [
            {
                field: 'm.transaction_amount',
                type: 'numberbox',
                options: { precision: 1 },
                op: ['less', 'greater', 'equal']
            },
            {
                field: 't.price',
                type: 'numberbox',
                options: { precision: 1 },
                // op: ['less', 'greater', 'equal']
                op: []
            }
        ]);

    // Initial column visibility check
    updateGridColumnsVisibility();

    // Re-check on window resize
    $(window).on('resize', updateGridColumnsVisibility);
});
</script>

{% endblock %}