@extends('admin.layout.content')

@section('content')
    <div class="content-manager-container px-3 py-4">

        {{-- Notifikasi Flash Message Sukses / Gagal --}}
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show flash-alert" role="alert">
                <i class="material-symbols-outlined align-middle me-1">check_circle</i> {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show flash-alert" role="alert">
                <i class="material-symbols-outlined align-middle me-1">error</i> {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        {{-- Alert Menampilkan Error Validasi Input Form --}}
        @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show flash-alert" role="alert">
                <strong class="d-block mb-1">Periksa kembali isian Anda:</strong>
                <ul class="mb-0 ps-3">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div
            class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3 mb-4">
            <div>
                <h2 class="content-manager-title h3 mb-1">Manajemen Tarif Ongkir</h2>
                <p class="text-muted mb-0">Kelola standarisasi tarif pengiriman per Kg dan estimasi waktu berdasarkan
                    wilayah API.</p>
            </div>
            {{-- Trigger Modal Tambah --}}
            <button class="btn-add-content d-inline-flex align-items-center gap-2 shadow-sm" data-bs-toggle="modal"
                data-bs-target="#modalCreate">
                <span class="material-symbols-outlined">add</span>
                Tambah Tarif Ongkir
            </button>
        </div>

        @php $missingRatesCount = $rates->where('rate_in_kg', 0)->count(); @endphp
        @if($missingRatesCount > 0)
            <div class="alert d-flex align-items-start gap-3 border-0 rounded-3 mb-4 py-3 px-4"
                style="background: #fffbeb; border-left: 4px solid #f59e0b !important;">
                <span class="material-symbols-outlined flex-shrink-0 mt-1" style="color: #d97706;">warning</span>
                <div>
                    <div class="fw-bold" style="color: #92400e;">Ada {{ $missingRatesCount }} tarif ongkir yang belum diisi!</div>
                    <div class="small" style="color: #b45309;">Pembeli dari wilayah tersebut tidak dapat menyelesaikan pembayaran. Segera isi nominal tarif per Kg pada baris yang ditandai di bawah.</div>
                </div>
            </div>
        @endif

        <div class="content-manager-card">

            <div
                class="content-filter-bar d-flex flex-column flex-sm-row-reverse justify-content-between align-items-stretch align-items-sm-center gap-3">
                <div class="search-box-wrapper">
                    <span class="material-symbols-outlined">search</span>
                    <input type="text" id="search-input" class="form-control search-box-input"
                        placeholder="Cari....">
                </div>

                <div class="d-flex align-items-center gap-2">
                    <span class="text-muted small text-nowrap">Tampilkan:</span>
                    <div class="dropdown show-entries-wrapper position-relative">
                        <button
                            class="btn dropdown-toggle dropdown-toggle-select d-flex align-items-center justify-content-between"
                            type="button" id="entriesDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                            <span id="selected-entry-value">10</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-entries" aria-labelledby="entriesDropdown">
                            <li><a class="dropdown-item active" href="#" data-value="10">10</a></li>
                            <li><a class="dropdown-item" href="#" data-value="25">25</a></li>
                            <li><a class="dropdown-item" href="#" data-value="50">50</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="table-responsive">
                <table id="rate-table" class="table content-data-table mb-0 align-middle">
                    <thead>
                        <tr>
                            <th style="width: 70px;">No</th>
                            <th>Provinsi</th>
                            <th>Kota / Kabupaten</th>
                            <th>Kecamatan</th>
                            <th>Tarif (per Kg)</th>
                            <th>Estimasi Pengiriman</th>
                            <th class="text-center" style="width: 110px;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($rates as $index => $rate)
                            <tr class="rate-row" @if((int)$rate->rate_in_kg === 0) style="background: #fffbeb;" @endif>
                                <td class="row-index-number" data-origin-index="{{ $index + 1 }}">{{ $index + 1 }}
                                </td>
                                <td><span class="cell-province fw-semibold text-slate-800">{{ $rate->province }}</span></td>
                                <td><span class="cell-city">{{ $rate->city }}</span></td>
                                <td><span class="cell-district">{{ $rate->district }}</span></td>
                                <td>
                                    @if((int)$rate->rate_in_kg === 0)
                                        <span class="cell-rate">
                                            <span class="badge rounded-pill px-2 py-1 d-inline-flex align-items-center gap-1"
                                                style="background:#fef3c7; color:#b45309; border:1px solid #fde68a; font-size:0.78rem; font-weight:600;">
                                                <span class="material-symbols-outlined" style="font-size:13px;">error</span>
                                                Belum Diisi
                                            </span>
                                        </span>
                                    @else
                                        <span class="cell-rate fw-bold text-success">Rp
                                            {{ number_format($rate->rate_in_kg, 0, ',', '.') }}</span>
                                    @endif
                                </td>
                                <td><span class="cell-estimated text-muted">{{ $rate->estimated_days ?? '-' }} hari</span></td>
                                <td class="text-center">
                                    <div class="d-inline-flex gap-1">
                                        {{-- Tombol Edit --}}
                                        <button class="btn-table-action btn-action-edit" title="Edit"
                                            data-bs-toggle="modal" data-bs-target="#modalEdit"
                                            data-id="{{ $rate->rate_id }}" data-province="{{ $rate->province }}"
                                            data-city="{{ $rate->city }}" data-district="{{ $rate->district }}"
                                            data-rate="{{ $rate->rate_in_kg }}"
                                            data-estimated="{{ $rate->estimated_days }}">
                                            <span class="material-symbols-outlined">edit</span>
                                        </button>
                                        {{-- Tombol Hapus --}}
                                        <button class="btn-table-action btn-action-delete" title="Hapus"
                                            data-bs-toggle="modal" data-bs-target="#modalDelete"
                                            data-id="{{ $rate->rate_id }}"
                                            data-location="{{ $rate->district . ', ' . $rate->city }}">
                                            <span class="material-symbols-outlined">delete</span>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr class="empty-row">
                                <td colspan="7" class="text-center text-muted py-4">Belum ada data tarif ongkir yang
                                    tersedia.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div
                class="content-pagination-bar d-flex flex-column flex-sm-row justify-content-between align-items-center gap-3">
                <p class="pagination-summary"></p>
                <nav class="d-flex align-items-center">
                    {{-- Navigasi dinamis diatur oleh JS --}}
                </nav>
            </div>

        </div>
    </div>

    {{-- ==================== MODAL TAMBAH (CREATE) ==================== --}}
    <div class="modal fade modal-modern" id="modalCreate" data-bs-backdrop="static" tabindex="-1"
        aria-labelledby="modalCreateLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down mx-auto px-2" style="max-width: 500px;">
            <div class="modal-content border-0 shadow">
                <form action="{{ route('admin.rates.store') }}" method="POST">
                    @csrf
                    <div class="modal-header d-flex align-items-center justify-content-between border-0 pb-0 pt-4 px-4">
                        <div class="d-flex align-items-center gap-3">
                            <div
                                class="icon-circle-wrapper bg-emerald-light border border-emerald-light text-success-dark flex-shrink-0">
                                <span class="material-symbols-outlined"
                                    style="font-size: 22px; color: #10b981;">local_shipping</span>
                            </div>
                            <div>
                                <h5 class="modal-title fw-bold text-slate-800 mb-0" id="modalCreateLabel"
                                    style="font-size: 1.1rem; line-height: 1.2;">Tambah Tarif Ongkir</h5>
                                <small class="text-muted d-block mt-1" style="font-size: 0.78rem;">Pilih wilayah jangkauan
                                    via API</small>
                            </div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-4">
                        <!-- Hidden Inputs untuk mengirimkan teks Nama Wilayah ke Laravel Backend -->
                        <input type="hidden" name="province" id="create-province-name">
                        <input type="hidden" name="city" id="create-city-name">
                        <input type="hidden" name="district" id="create-district-name">

                        <div class="mb-3">
                            <label class="form-label fw-semibold text-secondary small">PROVINSI <span
                                    class="text-danger">*</span></label>
                            <select id="create-province-select" class="form-select form-modern-input w-100 no-tomselect" required>
                                <option value="">-- Pilih Provinsi --</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold text-secondary small">KOTA / KABUPATEN <span
                                    class="text-danger">*</span></label>
                            <select id="create-city-select" class="form-select form-modern-input w-100 no-tomselect" required disabled>
                                <option value="">-- Pilih Kota / Kabupaten --</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold text-secondary small">KECAMATAN <span
                                    class="text-danger">*</span></label>
                            <select id="create-district-select" class="form-select form-modern-input w-100 no-tomselect" required
                                disabled>
                                <option value="">-- Pilih Kecamatan --</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold text-secondary small">TARIF PER KG (RP) <span
                                    class="text-danger">*</span></label>
                            <input type="number" name="rate_in_kg" class="form-control form-modern-input w-100"
                                value="{{ old('rate_in_kg', 0) }}" min="0" required placeholder="Contoh: 12000">
                        </div>
                        <div class="mb-0">
                            <label class="form-label fw-semibold text-secondary small">ESTIMASI PENGIRIMAN</label>
                            <input type="text" name="estimated_days" class="form-control form-modern-input w-100"
                                value="{{ old('estimated_days') }}" placeholder="Contoh: 2-3 Hari">
                        </div>
                    </div>
                    <div class="modal-footer border-0 pt-0 p-4 d-flex justify-content-end gap-2">
                        <button type="button" class="btn btn-modern-secondary px-4"
                            data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-modern-primary px-4">Simpan Tarif</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- ==================== MODAL EDIT (UPDATE) ==================== --}}
    <div class="modal fade modal-modern" id="modalEdit" data-bs-backdrop="static" tabindex="-1"
        aria-labelledby="modalEditLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down mx-auto px-2" style="max-width: 500px;">
            <div class="modal-content border-0 shadow">
                <form id="form-edit" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-header d-flex align-items-center justify-content-between border-0 pb-0 pt-4 px-4">
                        <div class="d-flex align-items-center gap-3">
                            <div class="icon-circle-wrapper bg-emerald-light border border-emerald-light flex-shrink-0">
                                <span class="material-symbols-outlined"
                                    style="font-size: 22px; color: #10b981;">edit_square</span>
                            </div>
                            <div>
                                <h5 class="modal-title fw-bold text-slate-800 mb-0" id="modalEditLabel"
                                    style="font-size: 1.1rem; line-height: 1.2;">Perbarui Tarif Ongkir</h5>
                                <small class="text-muted d-block mt-1" style="font-size: 0.78rem;">Sinkronisasi wilayah
                                    via API</small>
                            </div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-4">
                        <!-- Hidden Inputs untuk mengirimkan teks Nama Wilayah hasil edit ke Laravel Backend -->
                        <input type="hidden" name="province" id="edit-province-name">
                        <input type="hidden" name="city" id="edit-city-name">
                        <input type="hidden" name="district" id="edit-district-name">

                        <div class="mb-3">
                            <label class="form-label fw-semibold text-secondary small">PROVINSI <span
                                    class="text-danger">*</span></label>
                            <select id="edit-province-select" class="form-select form-modern-input w-100 no-tomselect" required>
                                <option value="">-- Pilih Provinsi --</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold text-secondary small">KOTA / KABUPATEN <span
                                    class="text-danger">*</span></label>
                            <select id="edit-city-select" class="form-select form-modern-input w-100 no-tomselect" required disabled>
                                <option value="">-- Pilih Kota / Kabupaten --</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold text-secondary small">KECAMATAN <span
                                    class="text-danger">*</span></label>
                            <select id="edit-district-select" class="form-select form-modern-input w-100 no-tomselect" required
                                disabled>
                                <option value="">-- Pilih Kecamatan --</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold text-secondary small">TARIF PER KG (RP) <span
                                    class="text-danger">*</span></label>
                            <input type="number" name="rate_in_kg" id="edit-rate"
                                class="form-control form-modern-input w-100" min="0" required>
                        </div>
                        <div class="mb-0">
                            <label class="form-label fw-semibold text-secondary small">ESTIMASI PENGIRIMAN</label>
                            <input type="text" name="estimated_days" id="edit-estimated"
                                class="form-control form-modern-input w-100">
                        </div>
                    </div>
                    <div class="modal-footer border-0 pt-0 p-4 d-flex justify-content-end gap-2">
                        <button type="button" class="btn btn-modern-secondary px-4"
                            data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-modern-primary px-4">Simpan Perubahan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- ==================== MODAL HAPUS (DELETE) ==================== --}}
    <div class="modal fade modal-modern" id="modalDelete" tabindex="-1" aria-labelledby="modalDeleteLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered mx-auto px-3" style="max-width: 400px;">
            <div class="modal-content border-0 shadow">
                <form id="form-delete" method="POST">
                    @csrf
                    @method('DELETE')
                    <div class="modal-body text-center p-4 pt-5">
                        <div class="icon-circle-wrapper bg-danger-subtle text-danger mx-auto mb-3 flex-shrink-0"
                            style="width: 56px; height: 56px; background-color: #fef2f2;">
                            <span class="material-symbols-outlined"
                                style="font-size: 28px; color: #ef4444;">delete_forever</span>
                        </div>
                        <h5 class="fw-bold text-slate-800 mb-2" style="font-size: 1.15rem;">Hapus Tarif Wilayah?</h5>
                        <p class="text-secondary mb-0 small px-1">Tindakan ini permanen. Jalur pengiriman data wilayah
                            berikut akan dihapus:</p>
                        <div class="mt-3 p-2 rounded-3 font-monospace fw-bold text-danger bg-light style-word-break"
                            id="delete-location"
                            style="font-size: 1.05rem; background-color: #fff5f5 !important; border: 1px dashed #fca5a5;">
                        </div>
                    </div>
                    <div class="modal-footer bg-white border-0 d-flex gap-2 p-4 pt-0 justify-content-center">
                        <button type="button" class="btn btn-modern-secondary px-4 m-0 w-50" data-bs-dismiss="modal"
                            style="padding: 0.6rem;">Batal</button>
                        <button type="submit" class="btn btn-danger px-4 m-0 w-50"
                            style="background-color: #ef4444; border: none; border-radius: 10px; font-weight: 500; padding: 0.6rem;">Ya,
                            Hapus</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- JAVASCRIPT: Logic Utama & Fetching API Wilayah --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            const API_BASE = "https://emsifa.github.io/api-wilayah-indonesia/api";

            // Cache global data provinsi untuk efisiensi modal edit
            let cachedProvinces = [];

            // ================= LOGIK AUTO-DISMISS ALERT =================
            const alerts = document.querySelectorAll('.flash-alert');
            alerts.forEach(function(alertElement) {
                setTimeout(function() {
                    const bsAlert = bootstrap.Alert.getOrCreateInstance(alertElement);
                    if (bsAlert) bsAlert.close();
                }, 5000);
            });

            // ================= REUSABLE FUNCTIONS UNTUK WILAYAH API =================

            async function fetchProvinces(selectElement) {
                try {
                    if (cachedProvinces.length === 0) {
                        const response = await fetch('/api/regions?type=provinces');
                        const json = await response.json();
                        if (!json.success) throw new Error(json.message);
                        cachedProvinces = json.data; // [{id, value}]
                    }
                    selectElement.innerHTML = '<option value="">-- Pilih Provinsi --</option>';
                    cachedProvinces.forEach(prov => {
                        let opt = document.createElement('option');
                        opt.value = prov.id;
                        opt.textContent = prov.value;
                        selectElement.appendChild(opt);
                    });
                } catch (error) {
                    console.error("Gagal memuat data provinsi:", error);
                }
            }

            async function fetchCities(provinceId, selectElement) {
                if (!provinceId) return;
                try {
                    const response = await fetch(`/api/regions?type=regencies&province_id=${provinceId}`);
                    const json = await response.json();
                    if (!json.success) throw new Error(json.message);
                    const cities = json.data; // [{id, value}]
                    selectElement.innerHTML = '<option value="">-- Pilih Kota / Kabupaten --</option>';
                    selectElement.disabled = false;
                    cities.forEach(city => {
                        let opt = document.createElement('option');
                        opt.value = city.id;
                        opt.textContent = city.value;
                        selectElement.appendChild(opt);
                    });
                } catch (error) {
                    console.error("Gagal memuat data kota:", error);
                }
            }

            async function fetchDistricts(cityId, selectElement) {
                if (!cityId) return;
                try {
                    const response = await fetch(`/api/regions?type=districts&regency_id=${cityId}`);
                    const json = await response.json();
                    if (!json.success) throw new Error(json.message);
                    const districts = json.data; // [{id, value}]
                    selectElement.innerHTML = '<option value="">-- Pilih Kecamatan --</option>';
                    selectElement.disabled = false;
                    districts.forEach(dist => {
                        let opt = document.createElement('option');
                        opt.value = dist.id;
                        opt.textContent = dist.value;
                        selectElement.appendChild(opt);
                    });
                } catch (error) {
                    console.error("Gagal memuat data kecamatan:", error);
                }
            }

            // ================= SETUP WILAYAH UNTUK MODAL TAMBAH (CREATE) =================
            const createProvSel = document.getElementById('create-province-select');
            const createCitySel = document.getElementById('create-city-select');
            const createDistSel = document.getElementById('create-district-select');

            const createProvHidden = document.getElementById('create-province-name');
            const createCityHidden = document.getElementById('create-city-name');
            const createDistHidden = document.getElementById('create-district-name');

            // Load provinsi saat modal Tambah dibuka (bukan saat DOMContentLoaded)
            let provincesLoaded = false;
            document.getElementById('modalCreate').addEventListener('shown.bs.modal', async function() {
                if (!provincesLoaded) {
                    await fetchProvinces(createProvSel);
                    provincesLoaded = true;
                }
            });

            createProvSel.addEventListener('change', async function() {
                createProvHidden.value = this.options[this.selectedIndex].text;
                createCitySel.innerHTML = '<option value="">-- Pilih Kota / Kabupaten --</option>';
                createCitySel.disabled = true;
                createDistSel.innerHTML = '<option value="">-- Pilih Kecamatan --</option>';
                createDistSel.disabled = true;
                createCityHidden.value = '';
                createDistHidden.value = '';

                if (this.value) await fetchCities(this.value, createCitySel);
            });

            createCitySel.addEventListener('change', async function() {
                createCityHidden.value = this.options[this.selectedIndex].text;
                createDistSel.innerHTML = '<option value="">-- Pilih Kecamatan --</option>';
                createDistSel.disabled = true;
                createDistHidden.value = '';

                if (this.value) await fetchDistricts(this.value, createDistSel);
            });

            createDistSel.addEventListener('change', function() {
                createDistHidden.value = this.options[this.selectedIndex].text;
            });


            // ================= SETUP WILAYAH UNTUK MODAL EDIT (UPDATE) =================
            const editProvSel = document.getElementById('edit-province-select');
            const editCitySel = document.getElementById('edit-city-select');
            const editDistSel = document.getElementById('edit-district-select');

            const editProvHidden = document.getElementById('edit-province-name');
            const editCityHidden = document.getElementById('edit-city-name');
            const editDistHidden = document.getElementById('edit-district-name');

            editProvSel.addEventListener('change', async function() {
                editProvHidden.value = this.options[this.selectedIndex].text;
                editCitySel.innerHTML = '<option value="">-- Pilih Kota / Kabupaten --</option>';
                editCitySel.disabled = true;
                editDistSel.innerHTML = '<option value="">-- Pilih Kecamatan --</option>';
                editDistSel.disabled = true;
                if (this.value) await fetchCities(this.value, editCitySel);
            });

            editCitySel.addEventListener('change', async function() {
                editCityHidden.value = this.options[this.selectedIndex].text;
                editDistSel.innerHTML = '<option value="">-- Pilih Kecamatan --</option>';
                editDistSel.disabled = true;
                if (this.value) await fetchDistricts(this.value, editDistSel);
            });

            editDistSel.addEventListener('change', function() {
                editDistHidden.value = this.options[this.selectedIndex].text;
            });


            // Binder Data saat Modal Edit Terbuka
            const modalEdit = document.getElementById('modalEdit');
            if (modalEdit) {
                modalEdit.addEventListener('show.bs.modal', async function(event) {
                    const button = event.relatedTarget;
                    const id = button.getAttribute('data-id');

                    // Set nilai data non-wilayah terlebih dahulu
                    document.getElementById('edit-rate').value = button.getAttribute('data-rate');
                    document.getElementById('edit-estimated').value = button.getAttribute(
                        'data-estimated');
                    document.getElementById('form-edit').action = `/admin/rates/{{ session('admin_route_code') }}/${id}`;

                    // Ambil string nama wilayah lama dari baris tabel
                    const targetProvName = button.getAttribute('data-province');
                    const targetCityName = button.getAttribute('data-city');
                    const targetDistName = button.getAttribute('data-district');

                    // Set fallback text awal ke hidden input
                    editProvHidden.value = targetProvName;
                    editCityHidden.value = targetCityName;
                    editDistHidden.value = targetDistName;

                    // 1. Sinkronisasi Provinsi
                    await fetchProvinces(editProvSel);
                    const matchedProvOpt = Array.from(editProvSel.options).find(opt => opt.text
                        .toUpperCase() === targetProvName.toUpperCase());

                    if (matchedProvOpt) {
                        editProvSel.value = matchedProvOpt.value;

                        // 2. Sinkronisasi Kota / Kabupaten
                        await fetchCities(editProvSel.value, editCitySel);
                        const matchedCityOpt = Array.from(editCitySel.options).find(opt => opt.text
                            .toUpperCase() === targetCityName.toUpperCase());

                        if (matchedCityOpt) {
                            editCitySel.value = matchedCityOpt.value;

                            // 3. Sinkronisasi Kecamatan
                            await fetchDistricts(editCitySel.value, editDistSel);
                            const matchedDistOpt = Array.from(editDistSel.options).find(opt => opt.text
                                .toUpperCase() === targetDistName.toUpperCase());
                            if (matchedDistOpt) {
                                editDistSel.value = matchedDistOpt.value;
                            }
                        }
                    }
                });
            }

            // ================= LOGIK MODAL DELETE =================
            const modalDelete = document.getElementById('modalDelete');
            if (modalDelete) {
                modalDelete.addEventListener('show.bs.modal', function(event) {
                    const button = event.relatedTarget;
                    const id = button.getAttribute('data-id');
                    document.getElementById('delete-location').textContent = button.getAttribute(
                        'data-location');
                    document.getElementById('form-delete').action = `/admin/rates/{{ session('admin_route_code') }}/${id}`;
                });
            }

            // ================= LOGIK FILTER & PAGINATION CLIENT-SIDE =================
            const searchInput = document.getElementById('search-input');
            const dropdownItems = document.querySelectorAll('.dropdown-menu-entries .dropdown-item');
            const selectedEntryValue = document.getElementById('selected-entry-value');
            const paginationSummary = document.querySelector('.pagination-summary');
            const paginationContainer = document.querySelector('.content-pagination-bar nav');

            let currentLimit = parseInt(selectedEntryValue.textContent) || 10;
            let currentPage = 1;

            function applyFilters() {
                const rows = document.querySelectorAll('.rate-row');
                const query = searchInput.value.toLowerCase().trim();

                let matchedRows = [];
                rows.forEach(row => {
                    const provinceText = row.querySelector('.cell-province')?.textContent.toLowerCase() ||
                        '';
                    const cityText = row.querySelector('.cell-city')?.textContent.toLowerCase() || '';
                    const districtText = row.querySelector('.cell-district')?.textContent.toLowerCase() ||
                        '';

                    const isMatch = provinceText.includes(query) || cityText.includes(query) || districtText
                        .includes(query);

                    if (isMatch) {
                        matchedRows.push(row);
                    } else {
                        row.style.display = 'none';
                    }
                });

                const totalMatch = matchedRows.length;
                const totalPages = Math.ceil(totalMatch / currentLimit) || 1;

                if (currentPage > totalPages) currentPage = totalPages;

                const startIdx = (currentPage - 1) * currentLimit;
                const endIdx = startIdx + currentLimit;

                matchedRows.forEach((row, index) => {
                    if (index >= startIdx && index < endIdx) {
                        row.style.display = '';
                        const indexCell = row.querySelector('.row-index-number');
                        if (indexCell) indexCell.textContent = index + 1;
                    } else {
                        row.style.display = 'none';
                    }
                });

                if (paginationSummary) {
                    if (totalMatch === 0) {
                        paginationSummary.textContent = "Menampilkan 0 data";
                        const emptyRow = document.querySelector('.empty-row');
                        if (emptyRow) emptyRow.style.display = '';
                    } else {
                        const emptyRow = document.querySelector('.empty-row');
                        if (emptyRow) emptyRow.style.display = 'none';

                        const fromPos = startIdx + 1;
                        const toPos = Math.min(endIdx, totalMatch);
                        paginationSummary.textContent =
                            `Menampilkan ${fromPos} sampai ${toPos} dari ${totalMatch} entri`;
                    }
                }

                renderPagination(totalPages);
            }

            function renderPagination(totalPages) {
                if (!paginationContainer) return;
                paginationContainer.innerHTML = '';

                const prevLink = document.createElement('a');
                prevLink.href = '#';
                prevLink.className = `content-page-link ${currentPage === 1 ? 'disabled' : ''}`;
                prevLink.innerHTML =
                    '<span class="material-symbols-outlined" style="font-size: 18px;">chevron_left</span>';
                prevLink.addEventListener('click', function(e) {
                    e.preventDefault();
                    if (currentPage > 1) {
                        currentPage--;
                        applyFilters();
                    }
                });
                paginationContainer.appendChild(prevLink);

                for (let i = 1; i <= totalPages; i++) {
                    const pageLink = document.createElement('a');
                    pageLink.href = '#';
                    pageLink.className = `content-page-link ${currentPage === i ? 'active' : ''}`;
                    pageLink.textContent = i;
                    pageLink.addEventListener('click', function(e) {
                        e.preventDefault();
                        currentPage = i;
                        applyFilters();
                    });
                    paginationContainer.appendChild(pageLink);
                }

                const nextLink = document.createElement('a');
                nextLink.href = '#';
                nextLink.className = `content-page-link ${currentPage === totalPages ? 'disabled' : ''}`;
                nextLink.innerHTML =
                    '<span class="material-symbols-outlined" style="font-size: 18px;">chevron_right</span>';
                nextLink.addEventListener('click', function(e) {
                    e.preventDefault();
                    if (currentPage < totalPages) {
                        currentPage++;
                        applyFilters();
                    }
                });
                paginationContainer.appendChild(nextLink);
            }

            if (searchInput) {
                searchInput.addEventListener('input', function() {
                    currentPage = 1;
                    applyFilters();
                });
            }

            dropdownItems.forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    dropdownItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');

                    const value = this.getAttribute('data-value');
                    selectedEntryValue.textContent = value;
                    currentLimit = parseInt(value);
                    currentPage = 1;

                    applyFilters();
                });
            });

            applyFilters();
        });
    </script>
@endsection