@extends('backend.app')

@section('title', 'List of Bookings')

@push('style')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <style>
        .dataTables_filter { display: none !important; }
    </style>
@endpush

@section('content')
    <div class="content fs-6 d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Toolbar-->
        <div class="toolbar" id="kt_toolbar">
            <div class="container-fluid d-flex flex-stack flex-wrap flex-sm-nowrap">
                <div class="d-flex flex-column align-items-start justify-content-center flex-wrap me-2">
                    <h1 class="text-dark fw-bold my-1 fs-2">List of Bookings</h1>
                    <ul class="breadcrumb fw-semibold fs-base my-1">
                        <li class="breadcrumb-item text-muted">
                            <a href="{{ route('dashboard') }}" class="text-muted text-hover-primary">Home</a>
                        </li>
                        <li class="breadcrumb-item text-dark">Bookings</li>
                    </ul>
                </div>
            </div>
        </div>
        <!--end::Toolbar-->

        <!--begin::Post-->
        <div class="post fs-6 d-flex flex-column-fluid" id="kt_post">
            <div class="container-xxl">
                <div class="card">
                    <!--begin::Card header-->
                    <div class="card-header border-0 pt-6">
                        <div class="card-title d-flex align-items-center gap-4">
                            <div class="d-flex align-items-center position-relative my-1">
                                <i class="ki-duotone ki-magnifier fs-3 position-absolute ms-5">
                                    <span class="path1"></span><span class="path2"></span>
                                </i>
                                <input type="text" data-kt-booking-table-filter="search"
                                    class="form-control form-control-solid w-250px ps-13" placeholder="Search bookings">
                            </div>
                            <div class="d-flex align-items-center position-relative my-1">
                                <select id="payment_status_filter" class="form-select form-select-solid w-200px">
                                    <option value="">All Payment Statuses</option>
                                    <option value="pending">Pending</option>
                                    <option value="paid">Paid</option>
                                    <option value="failed">Failed</option>
                                    <option value="expired">Expired</option>
                                    <option value="cancelled">Cancelled</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <!--end::Card header-->

                    <!--begin::Card body-->
                    <div class="card-body py-4">
                        <div class="table-responsive">
                            <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_bookings">
                                <thead>
                                    <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                        <th>Sl.</th>
                                        <th>Reference</th>
                                        <th>Event Title</th>
                                        <th>Customer</th>
                                        <th>Total Amount</th>
                                        <th>Payment Status</th>
                                        <th>Booked At</th>
                                        <th class="text-end min-w-100px">Actions</th>
                                    </tr>
                                </thead>
                                <tbody class="text-gray-600 fw-semibold">
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!--end::Card body-->
                </div>
            </div>
        </div>
        <!--end::Post-->
    </div>
@endsection

@push('script')
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

    <script>
        $(document).ready(function() {
            const table = $('#kt_table_bookings').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.bookings.index') }}",
                    type: "GET",
                    data: function (d) {
                        d.payment_status = $('#payment_status_filter').val();
                    }
                },
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                    {data: 'booking_reference', name: 'booking_reference'},
                    {data: 'event_title', name: 'event.title'},
                    {data: 'customer', name: 'customer_name'},
                    {data: 'total_amount', name: 'total_amount'},
                    {data: 'payment_status', name: 'payment_status'},
                    {data: 'booked_at', name: 'booked_at'},
                    {data: 'actions', name: 'actions', orderable: false, searchable: false}
                ]
            });

            $('input[data-kt-booking-table-filter="search"]').on('keyup', function() {
                table.search(this.value).draw();
            });

            $('#payment_status_filter').on('change', function() {
                table.draw();
            });
        });
    </script>
@endpush