@extends('Admin.layout')

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
        <div class="col-auto">
            <h5></h5>
        </div>
        <div class="col-auto">
            <a href="{{ route('add_booking') }}"><button class="btn btn-primary">Add Booking</button> </a>
        </div>
    </div>
    <div class="card p-0 m-2">
        <div class="row mb-3 align-items-center p-3 g-2">
            <div class="col-1">
                <select id="pageLength" class="form-select">
                    <option value="10"> 10</option>
                    <option value="25"> 25</option>
                    <option value="50"> 50</option>
                    <option value="100"> 100</option>
                </select>
            </div>


            {{-- <div class="col-lg-2 col-md-3">
                <select id="filterPackage" class="form-select">
                    <option value="">All Packages</option>

                </select>
            </div>

            <div class="col-lg-2 col-md-3">
                <select id="filterStatus" class="form-select">
                    <option value="">All Status</option>
                    <option value="1">Active</option>
                    <option value="0">Inactive</option>
                </select>
            </div>

            <div class="col-lg-2 col-md-3">
                <select id="filterGender" class="form-select">
                    <option value="">All Gender</option>
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                    <option value="Other">Other</option>
                </select>
            </div> --}}

            {{-- <div class="col-auto">
                <button class="btn btn-outline-secondary" id="resetFilters">
                    <i class="ti tabler-refresh me-1"></i> Reset
                </button>
            </div> --}}


            <div class="col-md-3 ms-auto">
                <input type="text" id="customSearch" class="form-control" placeholder="Search">
            </div>
        </div>
        <div class="table-responsive pt-0 pb-2">
            <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">
                <div class="justify-content-between dt-layout-table">
                    <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                        <table class="table" id="slotsTable">
                            <thead>
                                <tr>
                                    <th>Sno</th>
                                    <th>Slot ID</th>
                                    <th>Ground Name</th>
                                    <th>Slot Time</th>
                                    <th>Date</th>
                                    <th>Amount</th>
                                    <th>Action</th>
                                </tr>
                            </thead>

                            <tbody>
                                @php
                                    $slots = [
                                        [
                                            'slot_id' => 'ID123',
                                            'ground' => 'Ground 1',
                                            'time' => '6:30PM to 8:00PM',
                                            'date' => '03/06/2026',
                                            'amount' => 4000,
                                        ],
                                        [
                                            'slot_id' => 'ID124',
                                            'ground' => 'Ground 1',
                                            'time' => '8:00PM to 9:30PM',
                                            'date' => '03/06/2026',
                                            'amount' => 4000,
                                        ],
                                        [
                                            'slot_id' => 'ID125',
                                            'ground' => 'Ground 2',
                                            'time' => '5:00PM to 6:30PM',
                                            'date' => '04/06/2026',
                                            'amount' => 3500,
                                        ],
                                        [
                                            'slot_id' => 'ID126',
                                            'ground' => 'Ground 2',
                                            'time' => '6:30PM to 8:00PM',
                                            'date' => '04/06/2026',
                                            'amount' => 3500,
                                        ],
                                        [
                                            'slot_id' => 'ID127',
                                            'ground' => 'Ground 3',
                                            'time' => '5:00PM to 6:30PM',
                                            'date' => '05/06/2026',
                                            'amount' => 4500,
                                        ],
                                        [
                                            'slot_id' => 'ID128',
                                            'ground' => 'Ground 3',
                                            'time' => '8:00PM to 9:30PM',
                                            'date' => '05/06/2026',
                                            'amount' => 4500,
                                        ],
                                        [
                                            'slot_id' => 'ID129',
                                            'ground' => 'Ground 1',
                                            'time' => '5:00PM to 6:30PM',
                                            'date' => '06/06/2026',
                                            'amount' => 4000,
                                        ],
                                        [
                                            'slot_id' => 'ID130',
                                            'ground' => 'Ground 2',
                                            'time' => '8:00PM to 9:30PM',
                                            'date' => '06/06/2026',
                                            'amount' => 3500,
                                        ],
                                        [
                                            'slot_id' => 'ID131',
                                            'ground' => 'Ground 3',
                                            'time' => '6:30PM to 8:00PM',
                                            'date' => '07/06/2026',
                                            'amount' => 4500,
                                        ],
                                    ];
                                @endphp

                                @foreach ($slots as $index => $slot)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td>{{ $slot['slot_id'] }}</td>
                                        <td>{{ $slot['ground'] }}</td>
                                        <td>{{ $slot['time'] }}</td>
                                        <td>{{ $slot['date'] }}</td>
                                        <td>₹{{ number_format($slot['amount']) }}</td>
                                        <td>
                                            <a href="#"
                                                class="btn btn-sm btn-icon rounded-circle bg-primary-subtle text-primary me-1"
                                                title="Edit">
                                                <i class="ti tabler-edit"></i>
                                            </a>

                                            <a href="#" class="btn btn-sm btn-icon rounded-circle bg-danger-subtle text-danger"
                                                data-bs-toggle="modal" data-bs-target="#deleteModal" data-id="{{ $index + 1 }}"
                                                title="Delete">
                                                <i class="ti tabler-trash"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="deleteModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">

            <div class="modal-dialog modal-sm modal-dialog-centered">

                <div class="modal-content rounded-4 text-center p-4 py-5">

                    <form action="#" id="deleteForm">
                        @csrf

                        <input type="hidden" name="id" id="delete_id">

                        <h5 class="fw-bold mb-2">Delete User</h5>

                        <p class="text-muted">
                            Are you sure you want to delete this user?
                        </p>

                        <div class="d-flex justify-content-center align-items-center gap-3 mt-4">

                            <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                                Cancel
                            </button>

                            <button type="submit" class="btn btn-danger p-3 ms-2 fw-semibold" id="confirmDelete">
                                Yes, Delete
                            </button>

                        </div>

                    </form>

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

        <div class="modal fade" id="statusModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">

            <div class="modal-dialog modal-sm modal-dialog-centered">
                <form action="#" method="POST" id="statusForm">
                    @csrf
                    <div class="modal-content rounded-4 text-center p-4 py-5">
                        <h5 class="fw-bold mb-2">Change Status</h5>
                        <input type="hidden" name="id" id="status_user_id">
                        <p class="text-muted" id="statusMessage">
                            Are you sure you want to change status?
                        </p>

                        <div class="d-flex justify-content-center align-items-center gap-3 mt-4">

                            <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                                Cancel
                            </button>

                            <button type="submit" class="btn btn-success p-3 ms-2 fw-semibold" id="confirmStatus">
                                Yes, Change
                            </button>

                        </div>

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

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

                var table = $('#slotsTable').DataTable({
                    paging: true,
                    searching: true,
                    ordering: true,
                    info: true,
                    lengthChange: false
                });

                $('#customSearch').on('keyup', function () {
                    table.search(this.value).draw();
                });

                $('#pageLength').on('change', function () {
                    table.page.len($(this).val()).draw();
                });

            });
        </script>

@endsection