@extends('layout.base')

@section('content')
    <link rel="stylesheet" href="{{ asset('css/dashboard/style.css') }}">
<meta name="csrf-token" content="{{ csrf_token() }}">

<div class="container-fluid">
    <div class="card card-flush">
        <!-- Header -->
        <div class="card-header">
            <div class="card-title flex-column">
                <h3 class="fw-bold mb-1">Dashboard</h3>
            </div>
        </div>

        <!-- Body -->
        <div class="card-body">

            <!-- Top Stats -->
            <div class="row mb-1">
                <!-- Registered Countries -->
                <div class="col-md-6 mb-3">
                    <div class="stats-card card-red">
                        <div class="card-content">
                            <div class="stat-number" id="registered-countries-count">0</div>
                            <div class="stat-label">Registered Countries</div>
                        </div>
                        <div class="decorative-line"></div>
                    </div>
                </div>

                <!-- Hotel Reservation -->
                <div class="col-md-6 mb-3">
                    <div class="stats-card card-blue">
                        <div class="card-content d-flex flex-column align-items-start" style="gap: 0.5rem;">
                            <div class="stat-label mb-2" style="font-size: 1.1rem; font-weight: 700;">Hotel Reservation</div>
                            <div class="d-flex align-items-center justify-content-between w-100" style="gap: 1rem;">
                                <div>
                                    <div class="stat-number" id="stat-pax">0</div>
                                    <div class="stat-sublabel">Pax</div>
                                </div>
                                <div>
                                    <div class="stat-number" id="stat-rooms">0</div>
                                    <div class="stat-label">Room</div>
                                </div>
                            </div>
                        </div>
                        <div class="decorative-line"></div>
                    </div>
                </div>

                <!-- Athlete Registered -->
                <div class="col-md-6 mb-3">
                    <div class="stats-card card-yellow">
                        <div class="card-content">
                            <div class="stat-number" id="stat-athletes">0</div>
                            <div class="stat-label">Athlete Registered</div>
                        </div>
                        <div class="decorative-line"></div>
                    </div>
                </div>

                <!-- Visa Request -->
                <div class="col-md-6 mb-3">
                    <div class="stats-card card-green">
                        <div class="card-content">
                            <div class="stat-number" id="stat-visa">0</div>
                            <div class="stat-label">Visa Request</div>
                        </div>
                        <div class="decorative-line"></div>
                    </div>
                </div>
            </div>

            <!-- Hotel Reservations Section -->
            <div class="col-12 d-flex flex-column h-100">
                <div class="dashboard-section flex-grow-1 d-flex flex-column">
                    <h4 class="section-title">
                        <i class="fas fa-hotel me-2" style="font-size: 1.2vw;"></i>Hotel Reservations
                    </h4>
                    <div class="hotels-container flex-grow-1"></div>

                    <!-- All Hotels Modal -->
                    <div class="modal fade" id="allHotelsModal" tabindex="-1" aria-labelledby="allHotelsModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-scrollable modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="allHotelsModalLabel">All Hotel Reservations</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body hotels-modal-container"></div>
                            </div>
                        </div>
                    </div>

                    <!-- Country Modal -->
                    <div class="modal fade" id="countryModal" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-scrollable modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="countryModalTitle">Country List</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body hotels-modal-container"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Invoice Status Section -->
            <div class="col-12 d-flex flex-column h-100">
                <div class="dashboard-section flex-grow-1 d-flex flex-column">
                    <h4 class="section-title">
                        <i class="fas fa-file-invoice-dollar me-2" style="font-size: 1.2vw;"></i>Invoice Status
                    </h4>

                    <div class="invoice-table flex-grow-1 d-flex flex-column">
                        <!-- Hotels Invoice -->
                        <div class="invoice-row flex-grow-1">
                            <div class="d-flex align-items-center w-100">
                                <div class="invoice-icon hotels"><i class="fas fa-dollar-sign" style="color: white"></i></div>
                                <div class="flex-grow-1">
                                    <div class="invoice-title">Hotels Invoice</div>
                                    <div class="invoice-subtitle">Accommodations</div>
                                </div>
                                <div class="amount-info">
                                    <div class="d-flex justify-content-end">
                                        <div class="me-4">
                                            <div class="amount outstanding" id="hotel-outstanding">$0</div>
                                            <div class="amount-label">Outstanding</div>
                                        </div>
                                        <div>
                                            <div class="amount paid" id="hotel-paid">$0</div>
                                            <div class="amount-label">Paid</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Visa Invoice -->
                        <div class="invoice-row flex-grow-1">
                            <div class="d-flex align-items-center w-100">
                                <div class="invoice-icon visa"><i class="fas fa-passport" style="color: white"></i></div>
                                <div class="flex-grow-1">
                                    <div class="invoice-title">Visa Invoice</div>
                                    <div class="invoice-subtitle">Arrival & Departure</div>
                                </div>
                                <div class="amount-info">
                                    <div class="d-flex justify-content-end">
                                        <div class="me-4">
                                            <div class="amount outstanding" id="visa-outstanding">$0</div>
                                            <div class="amount-label">Outstanding</div>
                                        </div>
                                        <div>
                                            <div class="amount paid" id="visa-paid">$0</div>
                                            <div class="amount-label">Paid</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Farewell Banquet -->
                        <div class="invoice-row flex-grow-1">
                            <div class="d-flex align-items-center w-100">
                                <div class="invoice-icon banquet"><i class="fas fa-utensils" style="color: white"></i></div>
                                <div class="flex-grow-1">
                                    <div class="invoice-title">Farewell Banquet</div>
                                    <div class="invoice-subtitle">Accommodations</div>
                                </div>
                                <div class="amount-info">
                                    <div class="d-flex justify-content-end">
                                        <div class="me-4">
                                            <div class="amount outstanding" id="farewell-outstanding">$0</div>
                                            <div class="amount-label">Outstanding</div>
                                        </div>
                                        <div>
                                            <div class="amount paid" id="farewell-paid">$0</div>
                                            <div class="amount-label">Paid</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Visa Order Section -->
            <div class="col-12 d-flex flex-column h-100">
                <div class="dashboard-section flex-grow-1 d-flex flex-column">
                    <h4 class="section-title">
                        <i class="fas fa-file-invoice-dollar me-2" style="font-size: 1.2vw;"></i>Visa Order
                    </h4>
                    <div class="invoice-table flex-grow-1 d-flex flex-column">
                        <!-- Country Ordered Visa -->
                        <div class="invoice-row flex-grow-1">
                            <div class="d-flex align-items-center w-100">
                                <div class="invoice-icon hotels"><i class="fas fa-dollar-sign" style="color: white"></i></div>
                                <div class="flex-grow-1">
                                    <div class="invoice-title">Country that Ordered Visa</div>
                                </div>
                                <div class="amount-info">
                                    <div class="d-flex justify-content-end gap-2">
                                        <button class="country-status-btn outstanding-btn" id="visa-orderd-country-not">
                                            <div>
                                                <div class="amount outstanding" id="accom-not-ordered-visa-yet">0</div>
                                                <div class="amount-label">Haven't Ordered Yet</div>
                                            </div>
                                        </button>
                                        <button class="country-status-btn paid-btn" id="visa-orderd-country">
                                            <div>
                                                <div class="amount paid" id="accom-have-ordered-visa">0</div>
                                                <div class="amount-label">Have Ordered</div>
                                            </div>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Country with Full Payment Visa -->
                        <div class="invoice-row flex-grow-1">
                            <div class="d-flex align-items-center w-100">
                                <div class="invoice-icon visa"><i class="fas fa-passport" style="color: white"></i></div>
                                <div class="flex-grow-1">
                                    <div class="invoice-title">Country with Full Payment Visa</div>
                                </div>
                                <div class="amount-info">
                                    <button class="country-status-btn outstanding-btn" id="show-more-country-with-full-payment-visa">
                                        <div class="d-flex flex-column align-items-center">
                                            <div class="amount paid" id="visa-full-paid">0</div>
                                            <div class="amount-label">Total</div>
                                        </div>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Country with No Payment Visa -->
                        <div class="invoice-row flex-grow-1">
                            <div class="d-flex align-items-center w-100">
                                <div class="invoice-icon visa"><i class="fas fa-passport" style="color: white"></i></div>
                                <div class="flex-grow-1">
                                    <div class="invoice-title">Country that not paid Visa yet</div>
                                </div>
                                <div class="amount-info">
                                    <button class="country-status-btn outstanding-btn" id="show-more-country-without-payment">
                                        <div class="d-flex flex-column align-items-center">
                                            <div class="amount outstanding" id="visa-not-paid">0</div>
                                            <div class="amount-label">Total</div>
                                        </div>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Nominative Section -->
            <div class="col-12 d-flex flex-column h-100">
                <div class="dashboard-section flex-grow-1 d-flex flex-column">
                    <h4 class="section-title">
                        <i class="fas fa-file-invoice-dollar me-2" style="font-size: 1.2vw;"></i>Nominative
                    </h4>
                    <div class="invoice-table flex-grow-1 d-flex flex-column">
                        <div class="invoice-row flex-grow-1">
                            <div class="d-flex align-items-center w-100">
                                <div class="invoice-icon hotels"><i class="fas fa-dollar-sign" style="color: white"></i></div>
                                <div class="flex-grow-1">
                                    <div class="invoice-title">Country that Filled Nominative</div>
                                </div>
                                <div class="amount-info">
                                    <div class="d-flex justify-content-end gap-2">
                                        <button class="country-status-btn outstanding-btn" id="show-more-country-without-nominative">
                                            <div>
                                                <div class="amount outstanding" id="no-nominative-filled">0</div>
                                                <div class="amount-label">Haven't Filled</div>
                                            </div>
                                        </button>
                                        <button class="country-status-btn paid-btn" id="show-more-country-with-nominative">
                                            <div>
                                                <div class="amount paid" id="nominative-filled">0</div>
                                                <div class="amount-label">Have Filled</div>
                                            </div>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Accommodation Section -->
            <div class="col-12 d-flex flex-column h-100">
                <div class="dashboard-section flex-grow-1 d-flex flex-column">
                    <h4 class="section-title">
                        <i class="fas fa-file-invoice-dollar me-2" style="font-size: 1.2vw;"></i>Accomodation
                    </h4>
                    <div class="invoice-table flex-grow-1 d-flex flex-column">
                        <!-- Hotels Ordered -->
                        <div class="invoice-row flex-grow-1">
                            <div class="d-flex align-items-center w-100">
                                <div class="invoice-icon hotels"><i class="fas fa-dollar-sign" style="color: white"></i></div>
                                <div class="flex-grow-1">
                                    <div class="invoice-title">Country that Booked Hotels</div>
                                </div>
                                <div class="amount-info">
                                    <div class="d-flex justify-content-end gap-2">
                                        <button class="country-status-btn outstanding-btn" id="show-more-country-without-reservation">
                                            <div>
                                                <div class="amount outstanding" id="accom-not-booked-yet">0</div>
                                                <div class="amount-label">Haven't Booked Yet</div>
                                            </div>
                                        </button>
                                        <button class="country-status-btn paid-btn" id="show-more-country-reservation">
                                            <div>
                                                <div class="amount paid" id="accom-have-booked">0</div>
                                                <div class="amount-label">Have Booked</div>
                                            </div>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Full Payment -->
                        <div class="invoice-row flex-grow-1">
                            <div class="d-flex align-items-center w-100">
                                <div class="invoice-icon visa"><i class="fas fa-passport" style="color: white"></i></div>
                                <div class="flex-grow-1">
                                    <div class="invoice-title">Country with Full Payment</div>
                                </div>
                                <div class="amount-info">
                                    <div class="d-flex justify-content-end">
                                        <button class="country-status-btn outstanding-btn" id="show-more-country-with-full-payment">
                                            <div class="d-flex flex-column align-items-center">
                                                <div class="amount paid" id="accom-full-paid">0</div>
                                                <div class="amount-label">Total</div>
                                            </div>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Half Payment -->
                        <div class="invoice-row flex-grow-1">
                            <div class="d-flex align-items-center w-100">
                                <div class="invoice-icon visa"><i class="fas fa-passport" style="color: white"></i></div>
                                <div class="flex-grow-1">
                                    <div class="invoice-title">Country with Half Payment</div>
                                </div>
                                <div class="amount-info">
                                    <div class="d-flex justify-content-end">
                                        <button class="country-status-btn outstanding-btn" id="show-more-country-with-half-payment">
                                            <div class="d-flex flex-column align-items-center">
                                                <div class="amount half-paid" id="accom-half-paid">0</div>
                                                <div class="amount-label">Total</div>
                                            </div>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Not Paid -->
                        <div class="invoice-row flex-grow-1">
                            <div class="d-flex align-items-center w-100">
                                <div class="invoice-icon visa"><i class="fas fa-passport" style="color: white"></i></div>
                                <div class="flex-grow-1">
                                    <div class="invoice-title">Country that not paid yet</div>
                                </div>
                                <div class="amount-info">
                                    <div class="d-flex justify-content-end">
                                        <button class="country-status-btn outstanding-btn" id="show-more-country-without-payment">
                                            <div class="d-flex flex-column align-items-center">
                                                <div class="amount outstanding" id="accom-not-paid">0</div>
                                                <div class="amount-label">Total</div>
                                            </div>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div> <!-- end card-body -->
    </div> <!-- end card -->
</div> <!-- end container-fluid -->

    @endsection

    @section('scripts')
        <script>
            function fetchAccommodationCountryReservations() {
                $.ajax({
                    url: "{{ route('dashboard.countryReservation') }}",
                    method: 'GET',
                    dataType: 'json',
                    success: function(res) {
                        if (res.status === 'success') {
                            $('#accom-have-booked').text(res.with_reservations);
                            $('#accom-not-booked-yet').text(res.without_reservations);
                        } else {
                            console.error('Response error:', res);
                        }
                    },
                    error: function(xhr, status, err) {
                        console.error('AJAX error:', err);
                    }
                });
            }

            function fetchVisaCountryOrder() {
                $.ajax({
                    url: "{{ route('dashboard.visaOrder') }}",
                    method: 'GET',
                    dataType: 'json',
                    success: function(res) {
                        if (res.status === 'success') {
                            $('#accom-have-ordered-visa').text(res.with_visa);
                            $('#accom-not-ordered-visa-yet').text(res.without_visa);
                        } else {
                            console.error('Response error:', res);
                        }
                    },
                    error: function(xhr, status, err) {
                        console.error('AJAX error:', err);
                    }
                });
            }

            function fetchNominativeCountry() {
                $.ajax({
                    url: "{{ route('dashboard.nominative') }}",
                    method: 'GET',
                    dataType: 'json',
                    success: function(res) {
                        if (res.status === 'success') {
                            $('#nominative-filled').text(res.with_nominative);
                            $('#no-nominative-filled').text(res.without_nominative);
                        } else {
                            console.error('Response error:', res);
                        }
                    },
                    error: function(xhr, status, err) {
                        console.error('AJAX error:', err);
                    }
                });
            }

            function showCountryModal(fetchUrl, title) {
                showHotelModalSkeletons();

                $.getJSON(fetchUrl, function(res) {
                    if (res.status !== 'success') return;

                    const modalContainer = $('.hotels-modal-container').empty();

                    res.data.forEach((country) => {
                        let html = `
            <div class="hotel-item mb-3">
                <div class="d-flex align-items-center">
                    <div class="hotel-info flex-grow-1 ms-3">
                        <div class="hotel-name">${country.name}</div>
                    </div>
                </div>
            </div>
            `;
                        modalContainer.append(html);
                    });
                });

                $('#countryModalTitle').text(title);
                $('#countryModal').modal('show');
            }
            //ACCOMODATION COUNTRY RESERVATION
            $('#show-more-country-reservation').on('click', function() {
                showCountryModal("{{ route('dashboard.countryReservationList') }}", "All Country Reservations");
            });

            $('#show-more-country-without-reservation').on('click', function() {
                showCountryModal("{{ route('dashboard.countryWithoutReservationList') }}",
                    "All Country Without Reservations");
            });

            $('#show-more-country-with-full-payment').on('click', function() {
                showCountryModal("{{ route('dashboard.countryWithComplete') }}",
                    "All Country With Completed Payment");
            });

            $('#show-more-country-with-half-payment').on('click', function() {
                showCountryModal("{{ route('dashboard.countryWithHalfPayment') }}",
                    "All Country With Half Payment");
            });

            $('#show-more-country-without-payment').on('click', function() {
                showCountryModal("{{ route('dashboard.countryWithNoPayment') }}",
                    "All Country With No Payment");
            });

            //VISA COUNTRY ORDER       
            $('#visa-orderd-country').on('click', function() {
                showCountryModal("{{ route('dashboard.visaOrderList') }}",
                    "All Country With Payment");
            });

            $('#visa-orderd-country-not').on('click', function() {
                showCountryModal("{{ route('dashboard.noVisaList') }}",
                    "All Country With No Payment");
            });

            $('#show-more-country-with-full-payment-visa').on('click', function() {
                showCountryModal("{{ route('dashboard.visaPaidList') }}",
                    "All Country With Paid Visa");
            });

            $('#show-more-country-with-no-payment-visa').on('click', function() {
                showCountryModal("{{ route('dashboard.visaEmptyList') }}",
                    "All Country With No Visa Payment");
            });

            //NOMINATIVE FILL
            $('#show-more-country-with-nominative').on('click', function() {
                showCountryModal("{{ route('dashboard.nominativeWithList') }}",
                    "All Country With No Nominative Filled");
            });

            $('#show-more-country-without-nominative').on('click', function() {
                showCountryModal("{{ route('dashboard.nominativeWithoutList') }}",
                    "All Country With No Nominative Filled");
            });

            function fetchAccommodationCountryPayment() {
                $.ajax({
                    url: "{{ route('dashboard.countryPayment') }}",
                    method: 'GET',
                    dataType: 'json',
                    success: function(res) {
                        if (res.status === 'success') {
                            $('#accom-full-paid').text(res.complete);
                            $('#accom-half-paid').text(res.half);
                            $('#accom-not-paid').text(res.empty);
                        } else {
                            console.error('Response error:', res);
                        }
                    },
                    error: function(xhr, status, err) {
                        console.error('AJAX error:', err);
                    }
                });
            }

            function fetchAccommodationCountryVisaPayment() {
                $.ajax({
                    url: "{{ route('dashboard.visaPayment') }}",
                    method: 'GET',
                    dataType: 'json',
                    success: function(res) {
                        if (res.status === 'success') {
                            $('#visa-full-paid').text(res.complete);
                            $('#visa-not-paid').text(res.empty);
                        } else {
                            console.error('Response error:', res);
                        }
                    },
                    error: function(xhr, status, err) {
                        console.error('AJAX error:', err);
                    }
                });
            }

            function fetchAdminNfDistinct() {
                $.ajax({
                    url: "{{ route('dashboard.TotalCountry') }}",
                    method: 'GET',
                    dataType: 'json',
                    success: function(res) {
                        if (res.status === 'success') {
                            $('#registered-countries-count').text(res.total_country);
                        } else {
                            console.error('Response error:', res);
                        }
                    },
                    error: function(xhr, status, err) {
                        console.error('AJAX error:', err);
                    }
                });
            }

            $(document).ready(function() {
                fetchAdminNfDistinct();
            });

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            function fetchGlobalReservationStats() {
                $.ajax({
                    url: "{{ route('dashboard.reservationStats') }}",
                    method: 'GET',
                    dataType: 'json',
                    success: function(res) {
                        if (res.status === 'success') {
                            $('#stat-rooms').text(res.total_rooms);
                            $('#stat-pax').text(res.total_pax);
                        } else {
                            console.error('Response error:', res);
                        }
                    },
                    error: function(xhr, status, err) {
                        console.error('AJAX error:', err);
                    }
                });
            }

            $(document).ready(function() {
                fetchGlobalReservationStats();
            });

            function showHotelLoadingSkeletons(count = 3) {
                const skeleton = `
            <div class="hotel-item mb-3" style="opacity:0.7;">
                <div class="d-flex align-items-center">
                <div class="hotel-image" style="background:#e9ecef;width:80px;height:60px;border-radius:10px;"></div>
                <div class="hotel-info flex-grow-1 ms-3">
                    <div class="hotel-name" style="background:#e9ecef;height:18px;width:120px;border-radius:6px;margin-bottom:8px;"></div>
                    <div class="room-info">
                    <div class="room-badge" style="background:#e9ecef;color:transparent;width:80px;height:24px;border-radius:12px;"></div>
                    <div class="room-badge" style="background:#e9ecef;color:transparent;width:80px;height:24px;border-radius:12px;"></div>
                    </div>
                </div>
                </div>
            </div>
            `;
                const container = $('.hotels-container').empty();
                for (let i = 0; i < count; i++) container.append(skeleton);
            }

            function showHotelModalSkeletons(count = 6) {
                const skeleton = `
            <div class="hotel-item mb-3" style="opacity:0.7;">
                <div class="d-flex align-items-center">
                <div class="hotel-image" style="background:#e9ecef;width:80px;height:60px;border-radius:10px;"></div>
                <div class="hotel-info flex-grow-1 ms-3">
                    <div class="hotel-name" style="background:#e9ecef;height:18px;width:120px;border-radius:6px;margin-bottom:8px;"></div>
                    <div class="room-info">
                    <div class="room-badge" style="background:#e9ecef;color:transparent;width:80px;height:24px;border-radius:12px;"></div>
                    <div class="room-badge" style="background:#e9ecef;color:transparent;width:80px;height:24px;border-radius:12px;"></div>
                    </div>
                </div>
                </div>
            </div>
            `;
                const modalContainer = $('.hotels-modal-container').empty();
                for (let i = 0; i < count; i++) modalContainer.append(skeleton);
            }

function fetchHotelList() {
    showHotelLoadingSkeletons();
    $.getJSON("{{ route('dashboard.hotelList') }}", function(res) {
        if (res.status !== 'success') return console.error(res);

        const hotels = res.data;
        const container = $('.hotels-container').empty();

        hotels.forEach((hotel) => {
            const photo = hotel.photo_url || 'https://via.placeholder.com/80x60?text=No+Image';

            let html = `
                <div class="hotel-item mb-3">
                    <div class="d-flex">
                        <img src="${photo}" alt="${hotel.hotel_name}" class="hotel-image">
                        <div class="hotel-info flex-grow-1 ms-3">
                            <div class="hotel-name">${hotel.hotel_name}</div>
                            <div class="room-info">
            `;
            hotel.types.forEach(t => {
                html += `
                    <div class="room-badge">
                        <span class="type-name">${t.type_name}</span>
                        <span class="count">${t.reserved_rooms} <small>Rooms Booked</small></span>
                        <span class="count">${t.available_rooms} <small>Rooms Available</small></span>
                    </div>
                `;
            });
            html += `
                            </div>
                        </div>
                    </div>
                </div>
            `;

            container.append(html);
        });
    }).fail((xhr, status, err) => console.error('AJAX error:', err));
}


            $(function() {
                fetchHotelList();

                // Open modal on "More" button click
                $('#show-more-hotels').on('click', function() {
                    showHotelModalSkeletons();
                    // Fetch again for modal in case data is not loaded yet (optional)
                    $.getJSON("{{ route('dashboard.hotelList') }}", function(res) {
                        if (res.status !== 'success') return;
                        const modalContainer = $('.hotels-modal-container').empty();
                        res.data.forEach((hotel) => {
                            const photo = hotel.photo_url ||
                                'https://via.placeholder.com/80x60?text=No+Image';
                            let html = `
                    <div class="hotel-item mb-3">
                    <div class="d-flex">
                        <img src="${photo}" alt="${hotel.hotel_name}" class="hotel-image">
                        <div class="hotel-info flex-grow-1 ms-3">
                        <div class="hotel-name">${hotel.hotel_name}</div>
                        <div class="room-info">
                `;
                            hotel.types.forEach(t => {
                                html += `
                    <div class="room-badge">
                        <span class="type-name">${t.type_name}</span>
                        <span class="count">${t.reserved_rooms} Rooms</span>
                    </div>
                    `;
                            });
                            html += `</div></div></div></div>`;
                            modalContainer.append(html);
                        });
                    });
                    $('#allHotelsModal').modal('show');
                });
            });


            function fetchAthleteCount() {
                $.ajax({
                    url: "{{ route('dashboard.athleteCount') }}",
                    method: 'GET',
                    dataType: 'json',
                    success: function(res) {
                        if (res.status === 'success') {
                            $('#stat-athletes').text(res.count);
                        } else {
                            console.error('Response error:', res);
                        }
                    },
                    error: function(xhr, status, err) {
                        console.error('AJAX error:', err);
                    }
                });
            }

            $(document).ready(function() {
                fetchAthleteCount();
            });

            function fetchVisaCount() {
                $.ajax({
                    url: "{{ route('dashboard.visaCount') }}",
                    method: 'GET',
                    dataType: 'json',
                    success: function(res) {
                        if (res.status === 'success') {
                            $('#stat-visa').text(res.count);
                        } else {
                            console.error('Response error:', res);
                        }
                    },
                    error: function(xhr, status, err) {
                        console.error('AJAX error:', err);
                    }
                });
            }

            $(document).ready(function() {
                fetchVisaCount();
            });

            function fetchAccommodationInvoiceStatus() {
                $.getJSON("{{ route('dashboard.accommodationInvoice') }}", function(res) {
                    if (res.status === 'success') {
                        const paid = parseFloat(res.paid || 0);
                        const outstanding = parseFloat(res.outstanding || 0);

                        $('#hotel-paid').text(`$${paid.toLocaleString()}`);
                        $('#hotel-outstanding').text(`$${outstanding.toLocaleString()}`);
                    } else {
                        console.error('Response error:', res);
                    }
                }).fail((xhr, status, err) => {
                    console.error('AJAX error:', err);
                });
            }

            $(function() {
                fetchAccommodationInvoiceStatus();
            });

            function fetchVisaInvoiceStatus() {
                $.getJSON("{{ route('dashboard.visaInvoice') }}", function(res) {
                    if (res.status === 'success') {
                        $('#visa-paid').text(`$${res.paid.toLocaleString()}`);
                        $('#visa-outstanding').text(`$${res.outstanding.toLocaleString()}`);
                    } else {
                        console.error('Failed response:', res);
                    }
                }).fail((xhr, status, err) => {
                    console.error('AJAX error:', err);
                });
            }

            $(function() {
                fetchVisaInvoiceStatus();
            });

            function fetchFarewellInvoiceStatus() {
                $.getJSON("{{ route('dashboard.farewellInvoice') }}", function(res) {
                    if (res.status === 'success') {
                        $('#farewell-paid').text(`$${res.paid.toLocaleString()}`);
                        $('#farewell-outstanding').text(`$${res.outstanding.toLocaleString()}`);
                    }
                }).fail((xhr, status, err) => {
                    console.error('AJAX error:', err);
                });
            }

            $(function() {
                fetchFarewellInvoiceStatus();
            });

            function fetchFarewellInvoiceStatus() {
                $.ajax({
                    url: "{{ route('dashboard.farewellInvoice') }}",
                    method: 'GET',
                    dataType: 'json',
                    success: function(res) {
                        if (res.status === 'success') {
                            $('#farewell-paid').text(`$${res.paid.toLocaleString()}`);
                            $('#farewell-outstanding').text(`$${res.outstanding.toLocaleString()}`);
                        } else {
                            console.warn('Response failed:', res);
                        }
                    },
                    error: function(xhr, status, err) {
                        console.error('AJAX error:', err);
                    }
                });
            }

            $(function() {
                fetchFarewellInvoiceStatus();
            });

            $(function fetchAllThisFunction() {
                fetchAccommodationCountryReservations();
                fetchAccommodationCountryPayment();
                fetchVisaCountryOrder();
                fetchAccommodationCountryVisaPayment();
                fetchNominativeCountry();
                fetchHotelList();
            });
        </script>
    @endsection