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

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

                <!-- Top Stats (pindah ke sini) -->
                <div class="row mb-4">
                    <!-- 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>
                <!-- END Top Stats -->

                <!-- Tabs -->
                <ul class="nav nav-tabs mb-4" id="sectionTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="accom-tab" data-bs-toggle="tab"
                            data-bs-target="#accommodationSection" type="button" role="tab"
                            aria-controls="accommodationSection" aria-selected="true">
                            Accommodation
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="visa-tab" data-bs-toggle="tab" data-bs-target="#visaSection"
                            type="button" role="tab" aria-controls="visaSection" aria-selected="false">
                            Visa
                        </button>
                    </li>
                </ul>

                <!-- Tab Content -->
                <div class="tab-content">
                    <!-- Accommodation Section -->
                    <div id="accommodationSection" class="tab-pane fade show active" role="tabpanel"
                        aria-labelledby="accom-tab">
                        <h4 class="fw-bold mb-3">Accommodation</h4>

                        <div class="border rounded p-4">
                            <!-- Reservation by Country -->
                            <div class="mb-5 border rounded p-3">
                                <h5 class="fw-semibold mb-3">Reservation by Country</h5>
                                <div class="border rounded p-3 bg-light">
                                    <p class="mb-0"><strong>Total Countries:</strong> 12</p>
                                </div>
                            </div>

                            <!-- Country by Hotel -->
                            <div class="mb-5 border rounded p-3">
                                <h5 class="fw-semibold mb-3">Country by Hotel</h5>
                                <div class="table-responsive">
                                    <table class="table table-bordered align-middle border-dark">
                                        <thead class="table-primary text-left fw-bold">
                                            <tr>
                                                <th>Hotel Name</th>
                                                <th>Total Country</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Hotel A</td>
                                                <td>5</td>
                                            </tr>
                                            <tr>
                                                <td>Hotel B</td>
                                                <td>3</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <!-- Hotel Reservation -->
                            <div class="mb-5 border rounded p-3">
                                <h5 class="fw-semibold mb-3">Hotel Reservation</h5>
                                <div class="table-responsive">
                                    <table class="table table-bordered align-middle border-dark">
                                        <thead class="table-primary text-left fw-bold">
                                            <tr>
                                                <th>Hotel Name</th>
                                                <th>Total Pax</th>
                                                <th>Room</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Hotel A</td>
                                                <td>120</td>
                                                <td>60</td>
                                            </tr>
                                            <tr>
                                                <td>Hotel B</td>
                                                <td>75</td>
                                                <td>40</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <!-- Reservation by Room (Meals) -->
                            <div class="mb-5 border rounded p-3">
                                <h5 class="fw-semibold mb-3">Reservation by Room (Meals)</h5>
                                <div class="table-responsive">
                                    <table class="table table-bordered align-middle border-dark">
                                        <thead class="table-primary text-left fw-bold">
                                            <tr>
                                                <th>Room Type</th>
                                                <th>Total Pax</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Double/Twin Room with breakfast</td>
                                                <td>25</td>
                                            </tr>
                                            <tr>
                                                <td>Double/Twin Room with breakfast / Lunch or Dinner (half board)</td>
                                                <td>30</td>
                                            </tr>
                                            <tr>
                                                <td>Double/Twin Room with breakfast, Lunch, Dinner (full board)</td>
                                                <td>15</td>
                                            </tr>
                                        </tbody>
                                        <tfoot class="table-secondary fw-bold">
                                            <tr>
                                                <th>Total Pax Gabungan</th>
                                                <th>70</th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>

                            <!-- Reservation by Status -->
                            <div class="border rounded p-3">
                                <h5 class="fw-semibold mb-3">Reservation by Status</h5>
                                <div class="table-responsive">
                                    <table class="table table-bordered align-middle border-dark">
                                        <thead class="table-primary text-left fw-bold">
                                            <tr>
                                                <th>Status</th>
                                                <th>Total Countries</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>Done</td>
                                                <td>7</td>
                                            </tr>
                                            <tr>
                                                <td>Pending</td>
                                                <td>3</td>
                                            </tr>
                                            <tr>
                                                <td>Waiting Approval</td>
                                                <td>2</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div> <!-- End Accommodation Section -->

                    <!-- Visa Section -->
                    <div id="visaSection" class="tab-pane fade" role="tabpanel" aria-labelledby="visa-tab">
                        <h4 class="fw-bold mb-3">Visa</h4>
                        <div class="border rounded p-4">
                            <!-- contoh konten visa -->
                            <div class="mb-5 border rounded p-3">
                                <h5 class="fw-semibold mb-3">Visa Applications</h5>
                                <table class="table table-bordered">
                                    <thead class="table-primary text-left fw-bold">
                                        <tr>
                                            <th>Country</th>
                                            <th>Total Applicants</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Indonesia</td>
                                            <td>20</td>
                                            <td>Approved</td>
                                        </tr>
                                        <tr>
                                            <td>Japan</td>
                                            <td>10</td>
                                            <td>Pending</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div> <!-- End Visa Section -->
                </div>
            </div> <!-- End Card Body -->
        </div>
    </div> <!-- end container-fluid -->

    <!-- Script -->
    <script>
        document.getElementById('sectionSelect').addEventListener('change', function() {
            let selected = this.value;
            let accom = document.getElementById('accommodationSection');
            let visa = document.getElementById('visaSection');

            if (selected === 'accommodation') {
                accom.classList.remove('d-none');
                visa.classList.add('d-none');
            } else {
                visa.classList.remove('d-none');
                accom.classList.add('d-none');
            }
        });
    </script>
@endsection