@extends('admin.layout')

@section('title', 'Wilayah Layanan')

@section('content')
<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .select2-container--default .select2-selection--single {
        height: 44px !important;
        background-color: #f1f5f9 !important;
        border: 1px solid rgba(196, 196, 207, 0.4) !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 12px !important;
        transition: all 0.2s ease !important;
    }

    .select2-container--default.select2-container--open .select2-selection--single,
    .select2-container--default .select2-selection--single:focus {
        border-color: #6750a4 !important;
        box-shadow: 0 0 0 2px rgba(103, 80, 164, 0.2) !important;
        outline: none !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #1a1a20 !important;
        line-height: 44px !important;
        padding-left: 4px !important;
        font-weight: 600 !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: #94a3b8 !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 42px !important;
        right: 10px !important;
    }

    .select2-dropdown {
        border-radius: 14px !important;
        border: 1px solid rgba(196, 196, 207, 0.3) !important;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15) !important;
        overflow: hidden !important;
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 12px !important;
        z-index: 99999 !important;
        background: #ffffff !important;
        margin-top: 4px !important;
    }

    .select2-container--default .select2-search--dropdown {
        padding: 8px !important;
    }

    .select2-container--default .select2-search--dropdown .select2-search__field {
        border-radius: 8px !important;
        border: 1px solid rgba(196, 196, 207, 0.5) !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
        outline: none !important;
    }

    .select2-container--default .select2-results__group {
        font-size: 10px !important;
        font-weight: 800 !important;
        color: #6750a4 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        padding: 6px 12px 3px !important;
        background: #f8fafc !important;
    }

    .select2-container--default .select2-results__option {
        padding: 7px 12px !important;
        font-size: 12px !important;
    }

    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
        background-color: #6750a4 !important;
        color: #ffffff !important;
    }

    .select2-container--default .select2-results__option--selected {
        background-color: rgba(103, 80, 164, 0.1) !important;
        color: #6750a4 !important;
        font-weight: 700 !important;
    }
</style>

<div class="space-y-6">
    <!-- Header Section -->
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
            <h2 class="font-headline-lg text-3xl font-bold text-on-surface">Wilayah Layanan</h2>
            <p class="text-sm text-on-surface-variant mt-1">Kelola kota operasional layanan Terapisku. Aktifkan atau nonaktifkan jangkauan kota secara fleksibel.</p>
        </div>
        <button type="button" id="btn-open-add-modal" class="flex items-center gap-2 px-5 py-2.5 bg-primary text-white rounded-xl font-semibold hover:bg-primary/90 transition-all shadow-sm active:scale-95">
            <span class="material-symbols-outlined text-[20px]">add_location_alt</span>
            <span>Tambah Kota Baru</span>
        </button>
    </div>

    <!-- Stats Overview Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <!-- Total Kota -->
        <div class="bg-surface-container-lowest p-5 rounded-2xl border border-outline-variant/30 shadow-sm flex items-center gap-4">
            <div class="w-12 h-12 rounded-xl bg-purple-100 text-primary flex items-center justify-center">
                <span class="material-symbols-outlined text-2xl">location_city</span>
            </div>
            <div>
                <p class="text-xs text-on-surface-variant font-medium">Total Kota Terdaftar</p>
                <p class="text-2xl font-extrabold text-on-surface">{{ $totalCities }}</p>
            </div>
        </div>

        <!-- Kota Aktif -->
        <div class="bg-surface-container-lowest p-5 rounded-2xl border border-outline-variant/30 shadow-sm flex items-center gap-4">
            <div class="w-12 h-12 rounded-xl bg-emerald-100 text-emerald-700 flex items-center justify-center">
                <span class="material-symbols-outlined text-2xl">check_circle</span>
            </div>
            <div>
                <p class="text-xs text-on-surface-variant font-medium">Layanan Aktif (ON)</p>
                <p class="text-2xl font-extrabold text-emerald-600">{{ $activeCitiesCount }}</p>
            </div>
        </div>

        <!-- Kota Nonaktif -->
        <div class="bg-surface-container-lowest p-5 rounded-2xl border border-outline-variant/30 shadow-sm flex items-center gap-4">
            <div class="w-12 h-12 rounded-xl bg-slate-100 text-slate-700 flex items-center justify-center">
                <span class="material-symbols-outlined text-2xl">pause_circle</span>
            </div>
            <div>
                <p class="text-xs text-on-surface-variant font-medium">Nonaktif / Ekspansi (OFF)</p>
                <p class="text-2xl font-extrabold text-slate-700">{{ $inactiveCitiesCount }}</p>
            </div>
        </div>
    </div>

    <!-- Filter & Search Toolbar -->
    <div class="bg-surface-container-lowest p-4 rounded-2xl border border-outline-variant/30 shadow-sm flex flex-col md:flex-row justify-between gap-4">
        <form method="GET" action="{{ route('admin.wilayah-layanan') }}" class="flex flex-1 flex-col sm:flex-row gap-3">
            <div class="relative flex-1">
                <span class="material-symbols-outlined absolute left-3.5 top-1/2 -translate-y-1/2 text-on-surface-variant text-[20px]">search</span>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari nama kota, provinsi, atau catatan..." class="w-full pl-10 pr-4 py-2 bg-surface-container-low border border-outline-variant rounded-xl text-xs focus:ring-2 focus:ring-primary/20 focus:outline-none">
            </div>

            <select name="status" onchange="this.form.submit()" class="bg-surface-container-low border border-outline-variant rounded-xl px-4 py-2 text-xs font-semibold focus:ring-2 focus:ring-primary/20 focus:outline-none">
                <option value="semua" {{ request('status') === 'semua' ? 'selected' : '' }}>Semua Status</option>
                <option value="aktif" {{ request('status') === 'aktif' ? 'selected' : '' }}>AKTIF (ON)</option>
                <option value="nonaktif" {{ request('status') === 'nonaktif' ? 'selected' : '' }}>NON AKTIF (OFF)</option>
            </select>

            <button type="submit" class="px-4 py-2 bg-surface-container text-on-surface-variant hover:bg-surface-container-high rounded-xl text-xs font-bold transition-all">
                Filter
            </button>
            @if(request()->hasAny(['search', 'status']))
            <a href="{{ route('admin.wilayah-layanan') }}" class="px-3 py-2 text-xs text-error hover:underline flex items-center justify-center">
                Reset
            </a>
            @endif
        </form>
    </div>

    <!-- Table of Cities -->
    <div class="bg-surface-container-lowest rounded-2xl border border-outline-variant/30 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs">
                <thead class="bg-surface-container-low border-b border-outline-variant/30 text-on-surface-variant uppercase tracking-wider font-bold">
                    <tr>
                        <th class="py-3.5 px-4 w-12 text-center">No</th>
                        <th class="py-3.5 px-4">Nama Kota / Wilayah</th>
                        <th class="py-3.5 px-4">Provinsi</th>
                        <th class="py-3.5 px-4">Catatan Operasional</th>
                        <th class="py-3.5 px-4 text-center">Status Layanan</th>
                        <th class="py-3.5 px-4 text-center w-24">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-outline-variant/20">
                    @forelse($cities as $index => $city)
                    <tr class="hover:bg-surface-container-low/50 transition-colors">
                        <td class="py-4 px-4 text-center text-on-surface-variant font-medium">
                            {{ $cities->firstItem() + $index }}
                        </td>
                        <td class="py-4 px-4 font-bold text-on-surface text-sm flex items-center gap-2">
                            <span class="material-symbols-outlined text-primary text-[18px]">location_on</span>
                            <span>{{ $city->name }}</span>
                        </td>
                        <td class="py-4 px-4 text-on-surface-variant font-medium">
                            {{ $city->province }}
                        </td>
                        <td class="py-4 px-4 text-on-surface-variant">
                            {{ $city->notes ?: '-' }}
                        </td>
                        <td class="py-4 px-4 text-center">
                            <div class="flex items-center justify-center gap-3">
                                <span id="badge-city-{{ $city->id }}" class="px-2.5 py-0.5 rounded-full text-[10px] font-bold {{ $city->is_active ? 'bg-green-100 text-green-700' : 'bg-slate-200 text-slate-700' }}">
                                    {{ $city->is_active ? 'AKTIF (ON)' : 'NONAKTIF (OFF)' }}
                                </span>

                                <!-- Toggle Switch -->
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox"
                                        class="sr-only peer city-toggle"
                                        data-id="{{ $city->id }}"
                                        data-name="{{ $city->name }}"
                                        {{ $city->is_active ? 'checked' : '' }}>
                                    <div class="w-9 h-5 bg-slate-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-emerald-600"></div>
                                </label>
                            </div>
                        </td>
                        <td class="py-4 px-4 text-center">
                            <form id="delete-form-{{ $city->id }}" action="{{ route('admin.wilayah-layanan.delete', $city->id) }}" method="POST" class="inline-block">
                                @csrf
                                @method('DELETE')
                                <button type="button" onclick="confirmDeleteCity('{{ $city->id }}', '{{ addslashes($city->name) }}')" class="p-1.5 text-on-surface-variant hover:text-error hover:bg-error/10 rounded-lg transition-all" title="Hapus Kota">
                                    <span class="material-symbols-outlined text-[18px]">delete</span>
                                </button>
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="py-12 text-center text-on-surface-variant">
                            <span class="material-symbols-outlined text-4xl text-on-surface-variant/40 block mb-2">location_off</span>
                            <p class="font-bold text-sm">Tidak ada wilayah kota yang ditemukan.</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($cities->hasPages())
        <div class="p-4 border-t border-outline-variant/30">
            {{ $cities->links() }}
        </div>
        @endif
    </div>
</div>

<!-- Modal Tambah Kota Baru -->
<div id="modal-add-city" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm hidden">
    <div class="bg-surface-container-lowest rounded-2xl p-6 max-w-lg w-full mx-4 shadow-2xl border border-outline-variant/30 space-y-4 animate-scale-up">
        <div class="flex items-center justify-between pb-3 border-b border-outline-variant/30">
            <div class="flex items-center gap-2.5">
                <div class="w-10 h-10 rounded-xl bg-primary/10 text-primary flex items-center justify-center">
                    <span class="material-symbols-outlined text-xl">add_location_alt</span>
                </div>
                <div>
                    <h3 class="font-headline-md text-base font-bold text-on-surface">Tambah Kota Layanan</h3>
                    <p class="text-xs text-on-surface-variant">Pilih kota/kabupaten jangkauan baru dari seluruh Indonesia.</p>
                </div>
            </div>
            <button type="button" id="btn-close-add-modal" class="p-1 text-on-surface-variant hover:text-on-surface rounded-lg">
                <span class="material-symbols-outlined text-xl">close</span>
            </button>
        </div>

        <form id="form-add-city" action="{{ route('admin.wilayah-layanan.store') }}" method="POST" class="space-y-4">
            @csrf

            <!-- Pilih Kota Indonesia (Select2) -->
            <div>
                <label class="block text-xs font-bold text-on-surface mb-1">Pilih Kota / Kabupaten <span class="text-error">*</span></label>
                <select id="select-city-indonesia" name="name" required class="w-full">
                    <option value="">-- Ketik atau cari nama kota/kabupaten --</option>

                    <optgroup label="BANTEN">
                        <option value="Kota Tangerang Selatan" data-province="Banten">Kota Tangerang Selatan</option>
                        <option value="Kota Tangerang" data-province="Banten">Kota Tangerang</option>
                        <option value="Kota Serang" data-province="Banten">Kota Serang</option>
                        <option value="Kota Cilegon" data-province="Banten">Kota Cilegon</option>
                        <option value="Kabupaten Tangerang" data-province="Banten">Kabupaten Tangerang</option>
                        <option value="Kabupaten Serang" data-province="Banten">Kabupaten Serang</option>
                        <option value="Kabupaten Lebak" data-province="Banten">Kabupaten Lebak</option>
                        <option value="Kabupaten Pandeglang" data-province="Banten">Kabupaten Pandeglang</option>
                    </optgroup>

                    <optgroup label="DKI JAKARTA">
                        <option value="Kota Jakarta Selatan" data-province="DKI Jakarta">Kota Jakarta Selatan</option>
                        <option value="Kota Jakarta Pusat" data-province="DKI Jakarta">Kota Jakarta Pusat</option>
                        <option value="Kota Jakarta Barat" data-province="DKI Jakarta">Kota Jakarta Barat</option>
                        <option value="Kota Jakarta Timur" data-province="DKI Jakarta">Kota Jakarta Timur</option>
                        <option value="Kota Jakarta Utara" data-province="DKI Jakarta">Kota Jakarta Utara</option>
                        <option value="Kabupaten Kepulauan Seribu" data-province="DKI Jakarta">Kabupaten Kepulauan Seribu</option>
                    </optgroup>

                    <optgroup label="JAWA BARAT">
                        <option value="Kota Bandung" data-province="Jawa Barat">Kota Bandung</option>
                        <option value="Kota Bogor" data-province="Jawa Barat">Kota Bogor</option>
                        <option value="Kota Depok" data-province="Jawa Barat">Kota Depok</option>
                        <option value="Kota Bekasi" data-province="Jawa Barat">Kota Bekasi</option>
                        <option value="Kota Cimahi" data-province="Jawa Barat">Kota Cimahi</option>
                        <option value="Kota Tasikmalaya" data-province="Jawa Barat">Kota Tasikmalaya</option>
                        <option value="Kota Sukabumi" data-province="Jawa Barat">Kota Sukabumi</option>
                        <option value="Kota Cirebon" data-province="Jawa Barat">Kota Cirebon</option>
                        <option value="Kota Banjar" data-province="Jawa Barat">Kota Banjar</option>
                        <option value="Kabupaten Bandung" data-province="Jawa Barat">Kabupaten Bandung</option>
                        <option value="Kabupaten Bandung Barat" data-province="Jawa Barat">Kabupaten Bandung Barat</option>
                        <option value="Kabupaten Bogor" data-province="Jawa Barat">Kabupaten Bogor</option>
                        <option value="Kabupaten Bekasi" data-province="Jawa Barat">Kabupaten Bekasi</option>
                        <option value="Kabupaten Karawang" data-province="Jawa Barat">Kabupaten Karawang</option>
                        <option value="Kabupaten Sukabumi" data-province="Jawa Barat">Kabupaten Sukabumi</option>
                        <option value="Kabupaten Cianjur" data-province="Jawa Barat">Kabupaten Cianjur</option>
                        <option value="Kabupaten Garut" data-province="Jawa Barat">Kabupaten Garut</option>
                        <option value="Kabupaten Tasikmalaya" data-province="Jawa Barat">Kabupaten Tasikmalaya</option>
                        <option value="Kabupaten Ciamis" data-province="Jawa Barat">Kabupaten Ciamis</option>
                        <option value="Kabupaten Kuningan" data-province="Jawa Barat">Kabupaten Kuningan</option>
                        <option value="Kabupaten Cirebon" data-province="Jawa Barat">Kabupaten Cirebon</option>
                        <option value="Kabupaten Majalengka" data-province="Jawa Barat">Kabupaten Majalengka</option>
                        <option value="Kabupaten Sumedang" data-province="Jawa Barat">Kabupaten Sumedang</option>
                        <option value="Kabupaten Indramayu" data-province="Jawa Barat">Kabupaten Indramayu</option>
                        <option value="Kabupaten Subang" data-province="Jawa Barat">Kabupaten Subang</option>
                        <option value="Kabupaten Purwakarta" data-province="Jawa Barat">Kabupaten Purwakarta</option>
                        <option value="Kabupaten Pangandaran" data-province="Jawa Barat">Kabupaten Pangandaran</option>
                    </optgroup>

                    <optgroup label="JAWA TENGAH">
                        <option value="Kota Semarang" data-province="Jawa Tengah">Kota Semarang</option>
                        <option value="Kota Surakarta (Solo)" data-province="Jawa Tengah">Kota Surakarta (Solo)</option>
                        <option value="Kota Salatiga" data-province="Jawa Tengah">Kota Salatiga</option>
                        <option value="Kota Magelang" data-province="Jawa Tengah">Kota Magelang</option>
                        <option value="Kota Pekalongan" data-province="Jawa Tengah">Kota Pekalongan</option>
                        <option value="Kota Tegal" data-province="Jawa Tengah">Kota Tegal</option>
                        <option value="Kabupaten Banyumas" data-province="Jawa Tengah">Kabupaten Banyumas</option>
                        <option value="Kabupaten Boyolali" data-province="Jawa Tengah">Kabupaten Boyolali</option>
                        <option value="Kabupaten Brebes" data-province="Jawa Tengah">Kabupaten Brebes</option>
                        <option value="Kabupaten Cilacap" data-province="Jawa Tengah">Kabupaten Cilacap</option>
                        <option value="Kabupaten Demak" data-province="Jawa Tengah">Kabupaten Demak</option>
                        <option value="Kabupaten Jepara" data-province="Jawa Tengah">Kabupaten Jepara</option>
                        <option value="Kabupaten Karanganyar" data-province="Jawa Tengah">Kabupaten Karanganyar</option>
                        <option value="Kabupaten Kebumen" data-province="Jawa Tengah">Kabupaten Kebumen</option>
                        <option value="Kabupaten Kendal" data-province="Jawa Tengah">Kabupaten Kendal</option>
                        <option value="Kabupaten Klaten" data-province="Jawa Tengah">Kabupaten Klaten</option>
                        <option value="Kabupaten Kudus" data-province="Jawa Tengah">Kabupaten Kudus</option>
                        <option value="Kabupaten Magelang" data-province="Jawa Tengah">Kabupaten Magelang</option>
                        <option value="Kabupaten Pati" data-province="Jawa Tengah">Kabupaten Pati</option>
                        <option value="Kabupaten Pekalongan" data-province="Jawa Tengah">Kabupaten Pekalongan</option>
                        <option value="Kabupaten Pemalang" data-province="Jawa Tengah">Kabupaten Pemalang</option>
                        <option value="Kabupaten Purbalingga" data-province="Jawa Tengah">Kabupaten Purbalingga</option>
                        <option value="Kabupaten Purworejo" data-province="Jawa Tengah">Kabupaten Purworejo</option>
                        <option value="Kabupaten Rembang" data-province="Jawa Tengah">Kabupaten Rembang</option>
                        <option value="Kabupaten Semarang" data-province="Jawa Tengah">Kabupaten Semarang</option>
                        <option value="Kabupaten Sragen" data-province="Jawa Tengah">Kabupaten Sragen</option>
                        <option value="Kabupaten Sukoharjo" data-province="Jawa Tengah">Kabupaten Sukoharjo</option>
                        <option value="Kabupaten Tegal" data-province="Jawa Tengah">Kabupaten Tegal</option>
                        <option value="Kabupaten Temanggung" data-province="Jawa Tengah">Kabupaten Temanggung</option>
                        <option value="Kabupaten Wonogiri" data-province="Jawa Tengah">Kabupaten Wonogiri</option>
                        <option value="Kabupaten Wonosobo" data-province="Jawa Tengah">Kabupaten Wonosobo</option>
                    </optgroup>

                    <optgroup label="DI YOGYAKARTA">
                        <option value="Kota Yogyakarta" data-province="DI Yogyakarta">Kota Yogyakarta</option>
                        <option value="Kabupaten Sleman" data-province="DI Yogyakarta">Kabupaten Sleman</option>
                        <option value="Kabupaten Bantul" data-province="DI Yogyakarta">Kabupaten Bantul</option>
                        <option value="Kabupaten Gunungkidul" data-province="DI Yogyakarta">Kabupaten Gunungkidul</option>
                        <option value="Kabupaten Kulon Progo" data-province="DI Yogyakarta">Kabupaten Kulon Progo</option>
                    </optgroup>

                    <optgroup label="JAWA TIMUR">
                        <option value="Kota Surabaya" data-province="Jawa Timur">Kota Surabaya</option>
                        <option value="Kota Malang" data-province="Jawa Timur">Kota Malang</option>
                        <option value="Kota Batu" data-province="Jawa Timur">Kota Batu</option>
                        <option value="Kota Kediri" data-province="Jawa Timur">Kota Kediri</option>
                        <option value="Kota Blitar" data-province="Jawa Timur">Kota Blitar</option>
                        <option value="Kota Madiun" data-province="Jawa Timur">Kota Madiun</option>
                        <option value="Kota Probolinggo" data-province="Jawa Timur">Kota Probolinggo</option>
                        <option value="Kota Pasuruan" data-province="Jawa Timur">Kota Pasuruan</option>
                        <option value="Kota Mojokerto" data-province="Jawa Timur">Kota Mojokerto</option>
                        <option value="Kabupaten Sidoarjo" data-province="Jawa Timur">Kabupaten Sidoarjo</option>
                        <option value="Kabupaten Gresik" data-province="Jawa Timur">Kabupaten Gresik</option>
                        <option value="Kabupaten Malang" data-province="Jawa Timur">Kabupaten Malang</option>
                        <option value="Kabupaten Pasuruan" data-province="Jawa Timur">Kabupaten Pasuruan</option>
                        <option value="Kabupaten Mojokerto" data-province="Jawa Timur">Kabupaten Mojokerto</option>
                        <option value="Kabupaten Jombang" data-province="Jawa Timur">Kabupaten Jombang</option>
                        <option value="Kabupaten Bojonegoro" data-province="Jawa Timur">Kabupaten Bojonegoro</option>
                        <option value="Kabupaten Tuban" data-province="Jawa Timur">Kabupaten Tuban</option>
                        <option value="Kabupaten Lamongan" data-province="Jawa Timur">Kabupaten Lamongan</option>
                        <option value="Kabupaten Madiun" data-province="Jawa Timur">Kabupaten Madiun</option>
                        <option value="Kabupaten Ngawi" data-province="Jawa Timur">Kabupaten Ngawi</option>
                        <option value="Kabupaten Magetan" data-province="Jawa Timur">Kabupaten Magetan</option>
                        <option value="Kabupaten Ponorogo" data-province="Jawa Timur">Kabupaten Ponorogo</option>
                        <option value="Kabupaten Pacitan" data-province="Jawa Timur">Kabupaten Pacitan</option>
                        <option value="Kabupaten Kediri" data-province="Jawa Timur">Kabupaten Kediri</option>
                        <option value="Kabupaten Nganjuk" data-province="Jawa Timur">Kabupaten Nganjuk</option>
                        <option value="Kabupaten Blitar" data-province="Jawa Timur">Kabupaten Blitar</option>
                        <option value="Kabupaten Tulungagung" data-province="Jawa Timur">Kabupaten Tulungagung</option>
                        <option value="Kabupaten Trenggalek" data-province="Jawa Timur">Kabupaten Trenggalek</option>
                        <option value="Kabupaten Probolinggo" data-province="Jawa Timur">Kabupaten Probolinggo</option>
                        <option value="Kabupaten Lumajang" data-province="Jawa Timur">Kabupaten Lumajang</option>
                        <option value="Kabupaten Bondowoso" data-province="Jawa Timur">Kabupaten Bondowoso</option>
                        <option value="Kabupaten Situbondo" data-province="Jawa Timur">Kabupaten Situbondo</option>
                        <option value="Kabupaten Jember" data-province="Jawa Timur">Kabupaten Jember</option>
                        <option value="Kabupaten Banyuwangi" data-province="Jawa Timur">Kabupaten Banyuwangi</option>
                        <option value="Kabupaten Bangkalan" data-province="Jawa Timur">Kabupaten Bangkalan</option>
                        <option value="Kabupaten Sampang" data-province="Jawa Timur">Kabupaten Sampang</option>
                        <option value="Kabupaten Pamekasan" data-province="Jawa Timur">Kabupaten Pamekasan</option>
                        <option value="Kabupaten Sumenep" data-province="Jawa Timur">Kabupaten Sumenep</option>
                    </optgroup>

                    <optgroup label="BALI & NUSA TENGGARA">
                        <option value="Kota Denpasar" data-province="Bali">Kota Denpasar</option>
                        <option value="Kabupaten Badung" data-province="Bali">Kabupaten Badung</option>
                        <option value="Kabupaten Gianyar" data-province="Bali">Kabupaten Gianyar</option>
                        <option value="Kabupaten Tabanan" data-province="Bali">Kabupaten Tabanan</option>
                        <option value="Kabupaten Buleleng" data-province="Bali">Kabupaten Buleleng</option>
                        <option value="Kabupaten Karangasem" data-province="Bali">Kabupaten Karangasem</option>
                        <option value="Kabupaten Klungkung" data-province="Bali">Kabupaten Klungkung</option>
                        <option value="Kabupaten Bangli" data-province="Bali">Kabupaten Bangli</option>
                        <option value="Kabupaten Jembrana" data-province="Bali">Kabupaten Jembrana</option>
                        <option value="Kota Mataram" data-province="Nusa Tenggara Barat">Kota Mataram</option>
                        <option value="Kota Bima" data-province="Nusa Tenggara Barat">Kota Bima</option>
                        <option value="Kabupaten Lombok Barat" data-province="Nusa Tenggara Barat">Kabupaten Lombok Barat</option>
                        <option value="Kabupaten Lombok Tengah" data-province="Nusa Tenggara Barat">Kabupaten Lombok Tengah</option>
                        <option value="Kabupaten Lombok Timur" data-province="Nusa Tenggara Barat">Kabupaten Lombok Timur</option>
                        <option value="Kabupaten Lombok Utara" data-province="Nusa Tenggara Barat">Kabupaten Lombok Utara</option>
                        <option value="Kota Kupang" data-province="Nusa Tenggara Timur">Kota Kupang</option>
                        <option value="Kabupaten Manggarai Barat (Labuan Bajo)" data-province="Nusa Tenggara Timur">Kabupaten Manggarai Barat (Labuan Bajo)</option>
                    </optgroup>

                    <optgroup label="SUMATERA">
                        <option value="Kota Medan" data-province="Sumatera Utara">Kota Medan</option>
                        <option value="Kota Binjai" data-province="Sumatera Utara">Kota Binjai</option>
                        <option value="Kota Pematangsiantar" data-province="Sumatera Utara">Kota Pematangsiantar</option>
                        <option value="Kabupaten Deli Serdang" data-province="Sumatera Utara">Kabupaten Deli Serdang</option>
                        <option value="Kota Banda Aceh" data-province="Aceh">Kota Banda Aceh</option>
                        <option value="Kota Padang" data-province="Sumatera Barat">Kota Padang</option>
                        <option value="Kota Bukittinggi" data-province="Sumatera Barat">Kota Bukittinggi</option>
                        <option value="Kota Pekanbaru" data-province="Riau">Kota Pekanbaru</option>
                        <option value="Kota Batam" data-province="Kepulauan Riau">Kota Batam</option>
                        <option value="Kota Tanjungpinang" data-province="Kepulauan Riau">Kota Tanjungpinang</option>
                        <option value="Kota Jambi" data-province="Jambi">Kota Jambi</option>
                        <option value="Kota Palembang" data-province="Sumatera Selatan">Kota Palembang</option>
                        <option value="Kota Pangkalpinang" data-province="Kepulauan Bangka Belitung">Kota Pangkalpinang</option>
                        <option value="Kota Bengkulu" data-province="Bengkulu">Kota Bengkulu</option>
                        <option value="Kota Bandar Lampung" data-province="Lampung">Kota Bandar Lampung</option>
                    </optgroup>

                    <optgroup label="KALIMANTAN">
                        <option value="Kota Pontianak" data-province="Kalimantan Barat">Kota Pontianak</option>
                        <option value="Kota Palangka Raya" data-province="Kalimantan Tengah">Kota Palangka Raya</option>
                        <option value="Kota Banjarmasin" data-province="Kalimantan Selatan">Kota Banjarmasin</option>
                        <option value="Kota Banjarbaru" data-province="Kalimantan Selatan">Kota Banjarbaru</option>
                        <option value="Kota Samarinda" data-province="Kalimantan Timur">Kota Samarinda</option>
                        <option value="Kota Balikpapan" data-province="Kalimantan Timur">Kota Balikpapan</option>
                        <option value="Kota Tarakan" data-province="Kalimantan Utara">Kota Tarakan</option>
                    </optgroup>

                    <optgroup label="SULAWESI & INDONESIA TIMUR">
                        <option value="Kota Makassar" data-province="Sulawesi Selatan">Kota Makassar</option>
                        <option value="Kota Manado" data-province="Sulawesi Utara">Kota Manado</option>
                        <option value="Kota Palu" data-province="Sulawesi Tengah">Kota Palu</option>
                        <option value="Kota Kendari" data-province="Sulawesi Tenggara">Kota Kendari</option>
                        <option value="Kota Gorontalo" data-province="Gorontalo">Kota Gorontalo</option>
                        <option value="Kota Ambon" data-province="Maluku">Kota Ambon</option>
                        <option value="Kota Ternate" data-province="Maluku Utara">Kota Ternate</option>
                        <option value="Kota Jayapura" data-province="Papua">Kota Jayapura</option>
                        <option value="Kota Sorong" data-province="Papua Barat Daya">Kota Sorong</option>
                    </optgroup>
                </select>
            </div>

            <!-- Provinsi Otomatis -->
            <div>
                <label class="block text-xs font-bold text-on-surface mb-1">Provinsi (Terisi Otomatis)</label>
                <input type="text" id="input-province-display" readonly placeholder="Pilih kota di atas..." class="w-full bg-slate-200/70 border border-outline-variant/60 rounded-xl p-3 text-xs font-semibold text-on-surface cursor-not-allowed focus:outline-none">
                <input type="hidden" name="province" id="input-province-hidden" required>
            </div>

            <div>
                <label class="block text-xs font-bold text-on-surface mb-1">Catatan Operasional (Opsional)</label>
                <input type="text" name="notes" placeholder="Cth: Area ekspansi fase 2" class="w-full bg-surface-container-low border border-outline-variant rounded-xl p-3 text-xs focus:ring-2 focus:ring-primary/20 focus:outline-none">
            </div>

            <div class="flex items-center justify-between p-3 bg-surface-container-low rounded-xl border border-outline-variant/30">
                <div>
                    <p class="text-xs font-bold text-on-surface">Langsung Aktifkan Layanan</p>
                    <p class="text-[11px] text-on-surface-variant">Layanan di kota ini langsung dibuka untuk pemesanan konsumen.</p>
                </div>
                <input type="checkbox" name="is_active" value="1" checked class="w-4 h-4 rounded text-primary focus:ring-primary">
            </div>

            <div class="flex gap-3 justify-end pt-2">
                <button type="button" id="btn-cancel-add-modal" class="px-4 py-2.5 bg-surface-container text-on-surface-variant rounded-xl text-xs font-bold hover:bg-surface-container-high transition-all">
                    Batal
                </button>
                <button type="submit" class="px-5 py-2.5 bg-primary text-white rounded-xl text-xs font-bold hover:bg-primary/90 transition-all shadow-sm flex items-center gap-1.5">
                    <span class="material-symbols-outlined text-[16px]">save</span>
                    <span>Simpan Kota</span>
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Modal Konfirmasi Toggle Status Kota -->
<div id="modal-confirm-toggle" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm hidden">
    <div class="bg-surface-container-lowest rounded-2xl p-6 max-w-sm w-full mx-4 shadow-2xl border border-outline-variant/30 space-y-4 animate-scale-up">
        <div class="flex items-center gap-3">
            <div id="toggle-icon-bg" class="w-12 h-12 rounded-xl bg-purple-100 text-primary flex items-center justify-center flex-shrink-0">
                <span id="toggle-icon" class="material-symbols-outlined text-2xl">location_city</span>
            </div>
            <div>
                <h3 class="font-headline-md text-base font-bold text-on-surface">Ubah Status Wilayah</h3>
                <p id="toggle-city-name" class="text-xs text-primary font-bold"></p>
            </div>
        </div>

        <div class="p-3 bg-surface-container-low rounded-xl border border-outline-variant/20">
            <p id="toggle-desc" class="text-xs text-on-surface leading-relaxed"></p>
        </div>

        <div class="flex gap-3 justify-end pt-2">
            <button type="button" id="btn-cancel-toggle" class="px-4 py-2.5 bg-surface-container text-on-surface-variant rounded-xl text-xs font-bold hover:bg-surface-container-high transition-all">
                Batal
            </button>
            <button type="button" id="btn-confirm-toggle" class="px-5 py-2.5 bg-primary text-white rounded-xl text-xs font-bold hover:bg-primary/90 transition-all shadow-sm flex items-center gap-1.5">
                <span class="material-symbols-outlined text-[16px]">check</span>
                <span>Ya, Ubah Status</span>
            </button>
        </div>
    </div>
</div>

<!-- jQuery and Select2 JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
    // SweetAlert2 Delete Confirmation
    function confirmDeleteCity(cityId, cityName) {
        if (typeof Swal !== 'undefined') {
            Swal.fire({
                title: 'Hapus Wilayah Layanan?',
                html: `Hapus kota <strong>${cityName}</strong> dari daftar jangkauan layanan?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Hapus',
                cancelButtonText: 'Batal',
                reverseButtons: true,
                buttonsStyling: false,
                customClass: {
                    popup: '!rounded-2xl !p-5 !max-w-xs !w-full !shadow-xl !border !border-outline-variant/30',
                    title: '!text-sm !font-bold !text-on-surface !mt-1',
                    htmlContainer: '!text-xs !text-on-surface-variant !mt-1.5 !mb-4',
                    actions: '!gap-2.5 !w-full !mt-0 !px-1',
                    confirmButton: '!flex-1 !bg-error hover:!bg-error/90 !text-white !py-2 !rounded-xl !text-xs !font-bold transition-all shadow-xs',
                    cancelButton: '!flex-1 !bg-surface-variant hover:!bg-outline-variant/30 !text-on-surface-variant !py-2 !rounded-xl !text-xs !font-bold transition-all'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('delete-form-' + cityId).submit();
                }
            });
        } else {
            if (confirm('Apakah Anda yakin ingin menghapus kota ' + cityName + '?')) {
                document.getElementById('delete-form-' + cityId).submit();
            }
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        // Initialize Select2
        const $citySelect = $('#select-city-indonesia');
        const provinceDisplay = document.getElementById('input-province-display');
        const provinceHidden = document.getElementById('input-province-hidden');

        $citySelect.select2({
            dropdownParent: $('#modal-add-city'),
            placeholder: '-- Ketik atau cari nama kota/kabupaten --',
            allowClear: true,
            width: '100%'
        });

        $citySelect.on('change', function() {
            const selectedOption = $(this).find(':selected');
            const province = selectedOption.data('province') || '';

            if (provinceDisplay && provinceHidden) {
                provinceDisplay.value = province;
                provinceHidden.value = province;
            }
        });

        // Add Modal
        const addModal = document.getElementById('modal-add-city');
        const btnOpenAdd = document.getElementById('btn-open-add-modal');
        const btnCloseAdd = document.getElementById('btn-close-add-modal');
        const btnCancelAdd = document.getElementById('btn-cancel-add-modal');

        btnOpenAdd.addEventListener('click', function() {
            addModal.classList.remove('hidden');
            $citySelect.val(null).trigger('change');
            if (provinceDisplay) provinceDisplay.value = '';
            if (provinceHidden) provinceHidden.value = '';
        });

        btnCloseAdd.addEventListener('click', () => addModal.classList.add('hidden'));
        btnCancelAdd.addEventListener('click', () => addModal.classList.add('hidden'));

        // SweetAlert2 Confirmation for Adding City
        const formAddCity = document.getElementById('form-add-city');
        if (formAddCity) {
            formAddCity.addEventListener('submit', function(e) {
                e.preventDefault();
                const cityName = $citySelect.val();
                const province = provinceDisplay ? provinceDisplay.value : '';

                if (!cityName) {
                    if (window.Toast) {
                        window.Toast.fire({
                            icon: 'warning',
                            title: 'Pilih Kota',
                            text: 'Silakan pilih atau cari nama kota/kabupaten terlebih dahulu.'
                        });
                    } else if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            title: 'Pilih Kota Terlebih Dahulu',
                            text: 'Silakan pilih atau cari nama kota/kabupaten yang ingin ditambahkan.',
                            icon: 'warning',
                            confirmButtonText: 'Mengerti',
                            buttonsStyling: false,
                            customClass: {
                                popup: '!rounded-2xl !p-5 !max-w-xs !w-full',
                                title: '!text-sm !font-bold !text-on-surface !mt-1',
                                htmlContainer: '!text-xs !text-on-surface-variant !mt-1 !mb-3',
                                confirmButton: '!bg-primary !text-white !py-2 !px-5 !rounded-xl !text-xs !font-bold hover:!bg-primary/90 transition-all'
                            }
                        });
                    } else {
                        alert('Silakan pilih nama kota/kabupaten terlebih dahulu.');
                    }
                    return;
                }

                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        title: 'Simpan Kota Layanan?',
                        html: `Tambahkan <strong>${cityName} (${province})</strong> ke daftar wilayah layanan?`,
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonText: 'Ya, Simpan',
                        cancelButtonText: 'Batal',
                        reverseButtons: true,
                        buttonsStyling: false,
                        customClass: {
                            popup: '!rounded-2xl !p-5 !max-w-xs !w-full !shadow-xl !border !border-outline-variant/30',
                            title: '!text-sm !font-bold !text-on-surface !mt-1',
                            htmlContainer: '!text-xs !text-on-surface-variant !mt-1.5 !mb-4',
                            actions: '!gap-2.5 !w-full !mt-0 !px-1',
                            confirmButton: '!flex-1 !bg-primary hover:!bg-primary/90 !text-white !py-2 !rounded-xl !text-xs !font-bold transition-all shadow-xs',
                            cancelButton: '!flex-1 !bg-surface-variant hover:!bg-outline-variant/30 !text-on-surface-variant !py-2 !rounded-xl !text-xs !font-bold transition-all'
                        }
                    }).then((result) => {
                        if (result.isConfirmed) {
                            formAddCity.submit();
                        }
                    });
                } else {
                    if (confirm(`Apakah Anda yakin ingin menambahkan ${cityName} (${province})?`)) {
                        formAddCity.submit();
                    }
                }
            });
        }

        // Toggle Modal Logic
        const toggleModal = document.getElementById('modal-confirm-toggle');
        const toggleCityName = document.getElementById('toggle-city-name');
        const toggleDesc = document.getElementById('toggle-desc');
        const toggleIconBg = document.getElementById('toggle-icon-bg');
        const btnCancelToggle = document.getElementById('btn-cancel-toggle');
        const btnConfirmToggle = document.getElementById('btn-confirm-toggle');

        let pendingToggle = null;
        let intendedChecked = false;

        document.querySelectorAll('.city-toggle').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                pendingToggle = this;
                intendedChecked = this.checked;
                const cityName = this.getAttribute('data-name');

                toggleCityName.textContent = cityName;
                if (intendedChecked) {
                    toggleIconBg.className = 'w-12 h-12 rounded-xl bg-emerald-100 text-emerald-700 flex items-center justify-center flex-shrink-0';
                    toggleDesc.textContent = `Apakah Anda yakin ingin MEMBUKA layanan Terapisku di wilayah ${cityName}? Konsumen di area ini akan dapat memesan terapis.`;
                    btnConfirmToggle.className = 'px-5 py-2.5 bg-primary text-white rounded-xl text-xs font-bold hover:bg-primary/90 transition-all shadow-sm flex items-center gap-1.5';
                } else {
                    toggleIconBg.className = 'w-12 h-12 rounded-xl bg-red-100 text-red-700 flex items-center justify-center flex-shrink-0';
                    toggleDesc.textContent = `Apakah Anda yakin ingin MENONAKTIFKAN layanan Terapisku di wilayah ${cityName}? Konsumen di area ini sementara tidak dapat melakukan pemesanan.`;
                    btnConfirmToggle.className = 'px-5 py-2.5 bg-error text-white rounded-xl text-xs font-bold hover:opacity-90 transition-all shadow-sm flex items-center gap-1.5';
                }

                toggleModal.classList.remove('hidden');
            });
        });

        btnCancelToggle.addEventListener('click', () => {
            if (pendingToggle) {
                pendingToggle.checked = !intendedChecked;
            }
            toggleModal.classList.add('hidden');
        });

        btnConfirmToggle.addEventListener('click', () => {
            if (!pendingToggle) return;
            const cityId = pendingToggle.getAttribute('data-id');

            btnConfirmToggle.disabled = true;
            btnConfirmToggle.innerHTML = '<span class="material-symbols-outlined text-[16px] animate-spin">progress_activity</span> Menyimpan...';

            fetch(`/admin/wilayah-layanan/${cityId}/toggle`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        const badge = document.getElementById(`badge-city-${cityId}`);
                        if (badge) {
                            badge.className = data.is_active ?
                                'px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-green-100 text-green-700' :
                                'px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-slate-200 text-slate-700';
                            badge.textContent = data.is_active ? 'AKTIF (ON)' : 'NONAKTIF (OFF)';
                        }
                    } else {
                        pendingToggle.checked = !intendedChecked;
                    }
                    toggleModal.classList.add('hidden');
                    btnConfirmToggle.disabled = false;
                    btnConfirmToggle.innerHTML = '<span class="material-symbols-outlined text-[16px]">check</span><span>Ya, Ubah Status</span>';
                })
                .catch(err => {
                    pendingToggle.checked = !intendedChecked;
                    toggleModal.classList.add('hidden');
                    btnConfirmToggle.disabled = false;
                    btnConfirmToggle.innerHTML = '<span class="material-symbols-outlined text-[16px]">check</span><span>Ya, Ubah Status</span>';
                });
        });
    });
</script>
@endsection