@extends('layouts.app')

@section('title', 'Bookings Report')

@section('content')

    <!-- Breadcrumb -->
    <nav class="mb-4">
        <ol class="flex items-center space-x-2 text-sm text-gray-600">
            <li><a href="{{ url('dashboard') }}" class="hover:text-blue-600">Dashboard</a></li>
            <li>
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
            </li>
            <li><a href="#" class="hover:text-blue-600">Report</a></li>
            <li>
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
            </li>
            <li class="text-gray-900">Booking</li>
        </ol>
    </nav>


    <!-- Filters + Export Buttons -->
    <div class="flex justify-between items-center mb-3">

        <!-- Filter -->
        <div class="flex items-center space-x-3">

            <select id="filterEvent" class="border border-gray-300 p-2 rounded">
                <option value="">-- Select Event --</option>
                @foreach($events as $event)
                    <option value="{{ $event->event_id }}">{{ $event->title }}</option>
                @endforeach
            </select>

            <button id="findButton"
                    class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
                Find
            </button>

        </div>

        <!-- Export Buttons -->
        <div id="exportButtons"></div>
    </div>


    <!-- Data Table -->
    <div class="overflow-x-auto bg-white p-4 rounded shadow">
        <table id="bookingsTable" class="min-w-full text-sm">
            <thead class="bg-gray-50 text-xs font-medium text-gray-700"></thead>
            <tbody></tbody>
        </table>
    </div>

@endsection



@push('scripts')

    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>


    <script>
        $(document).ready(function () {
            let table = null;
            // ---------------------------------------------
            // Dynamic table header + columns based on event
            // ---------------------------------------------
            function getTableColumns(eventId) {
                // EVENT 3 LAYOUT
                /*if (eventId == 3) {
                    return {
                        header: `
                    <tr>
                        <th>SL</th>
                        <th>Full Name</th>
                        <th>Mobile</th>
                        <th>School</th>
                        <th>Event</th>
                        <th>Tickets</th>
                        <th>Total Amount</th>
                    </tr>
                `,
                        columns: [
                            { data: null },
                            { data: 'user.full_name' },
                            { data: 'member.mobile_no' },
                            { data: 'member.ssc_school_name' },
                            { data: 'event.title' },
                            {
                                data: 'booking_details',
                                render: details => details.map(d => `${d.ticket.ticket_type} x${d.quantity}`).join(', ')
                            },
                            { data: 'total_amount' },
                        ]
                    };
                }*/
                // EVENT 4 LAYOUT
                if (eventId == 4) {
                    return {
                        header: `
                            <th>SL</th>
                            <th>Group Membership Number</th>
                            <th>Full Name</th>
                            <th>Mobile No</th>
                            <th>Email</th>
                            <th>Schoole Name</th>
                            <th>Registration Point</th>
                            <th>Event</th>
                            <th>Tickets</th>
                            <th>T-Shirt Size</th>
                            <th>Total Amount</th>
                            <th>Transaction ID</th>
                            <th>Payment Status</th>
                            <th>Booking Date</th>
                            <th>Status</th>
                        `,
                        columns: [
                            { data: null },
                            { data: 'member.group_member_no' },
                            { data: 'user.full_name' },
                            { data: 'member.mobile_no' },
                            { data: 'member.email' },
                            { data: 'member.ssc_school_name' },
                            { data: 'reg_point' },
                            { data: 'event.title' },
                            {
                                data: 'booking_details',
                                render: function(details) {
                                    // Map each ticket to "Type x Quantity (Price)" and join with comma
                                    return details.map(d => {
                                        let ticketType = d.ticket.ticket_type;
                                        let qty = d.quantity;
                                        let price = parseFloat(d.ticket.price).toFixed(2);
                                        return `${ticketType} x${qty} (${price})`;
                                    }).join(', ');
                                }
                            },
                            { data: 'member.tshirt_size' },
                            { data: 'total_amount' },
                            { data: 'bank_tran_id' },
                            { data: 'payment_status', render: function(status) {
                                    return status.charAt(0).toUpperCase() + status.slice(1);
                                }},
                            { data: 'created_date'},
                            { data: 'status', render: function(status) {
                                    return status.charAt(0).toUpperCase() + status.slice(1);
                                }}
                        ]
                    };
                }
                else {
                    return {
                        header: `
                        <tr>
                            <th>SL</th>
                            <th>Member No</th>
                            <th>Name</th>
                            <th>Email</th>
                        </tr>
                    `,
                        columns: [
                            { data: null },
                            { data: 'member.group_member_no' },
                            { data: 'user.full_name' },
                            { data: 'member.email' }
                        ]
                    };
                }
                // DEFAULT
                return {
                    header: `
                        <tr>
                            <th>SL</th>
                            <th>Member No</th>
                            <th>Name</th>
                            <th>Email</th>
                        </tr>
                    `,
                    columns: [
                        { data: null },
                        { data: 'member.group_member_no' },
                        { data: 'user.full_name' },
                        { data: 'member.email' }
                    ]
                };
            }

            // ----------------------------------------------------
            // FIND BUTTON — Loads data only when clicked
            // ----------------------------------------------------
            $('#findButton').click(function () {

                let eventId = $('#filterEvent').val();

                if (!eventId) {
                    alert("Please select an event first");
                    return;
                }

                let layout = getTableColumns(eventId);

                // Inject dynamic header
                $("#bookingsTable thead").html(layout.header);

                // Destroy old table if exists
                if (table) {
                    table.clear().destroy();
                }

                // Init DataTable
                table = $('#bookingsTable').DataTable({
                    processing: true,
                    serverSide: false,
                    searching: false,
                    ajax: {
                        url: "{{ route('bookings.report') }}",
                        type: "GET",
                        data: {
                            event_id: eventId
                        },
                        dataSrc: json => json.data
                    },

                    columns: layout.columns,

                    columnDefs: [{
                        targets: 0,
                        render: (data, type, row, meta) => meta.row + 1
                    }],

                    dom: 'Bfrtip',
                    buttons: [
                        {
                            extend: 'excelHtml5',
                            text: 'Export Excel',
                            className: 'bg-green-500 text-white px-2 py-1 rounded'
                        },
                        {
                            extend: 'pdfHtml5',
                            text: 'Export PDF',
                            className: 'bg-red-500 text-white px-2 py-1 rounded'
                        }
                    ]
                });

                table.buttons().container().appendTo('#exportButtons');

            });

        });
    </script>

@endpush