@extends('template.desktop.app')
@section('title', 'Data Area')

@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --area-primary: #0f766e;
            --area-primary-light: #ccfbf1;
            --area-primary-dark: #0d5c56;
            --area-secondary: #0e7490;
            --area-accent: #f59e0b;
            --area-bg: #f8fafc;
            --card-radius: 16px;
            --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
            --card-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        }

        .area-page {
            background: var(--area-bg);
            min-height: 100vh;
        }

        /* ── Header ── */
        .area-header {
            background: linear-gradient(135deg, #0f766e 0%, #0e7490 50%, #0891b2 100%);
            border-radius: var(--card-radius);
            padding: 1.75rem 2rem;
            color: white;
            position: relative;
            overflow: hidden;
        }

        .area-header::before {
            content: '';
            position: absolute;
            top: -40%;
            right: -8%;
            width: 250px;
            height: 250px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.06);
        }

        /* ── Stat Cards ── */
        .area-stat {
            border: none;
            border-radius: 14px;
            box-shadow: var(--card-shadow);
            background: white;
            padding: 1rem 1.25rem;
            transition: all 0.2s ease;
        }

        .area-stat:hover {
            transform: translateY(-2px);
            box-shadow: var(--card-shadow-lg);
        }

        .area-stat .stat-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
        }

        .area-stat .stat-value {
            font-size: 1.4rem;
            font-weight: 800;
            line-height: 1;
        }

        .area-stat .stat-label {
            font-size: 0.68rem;
            color: #94a3b8;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        /* ── Table ── */
        .area-card {
            border: none;
            border-radius: var(--card-radius);
            box-shadow: var(--card-shadow);
            background: white;
            overflow: hidden;
        }

        .table-area thead th {
            border-bottom: 2px solid #f1f5f9;
            color: #475569;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.68rem;
            letter-spacing: 0.05em;
            padding: 0.9rem 1rem;
            white-space: nowrap;
        }

        .table-area tbody tr {
            transition: all 0.15s ease;
            border-bottom: 1px solid #f8fafc;
        }

        .table-area tbody tr:hover {
            background: #f0fdfa;
        }

        .table-area td {
            padding: 0.75rem 1rem;
            vertical-align: middle;
            font-size: 0.82rem;
        }

        /* ── Search ── */
        .area-search {
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 0.5rem 1rem;
            background: white;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: border-color 0.2s;
            min-width: 300px;
        }

        .area-search:focus-within {
            border-color: var(--area-primary);
            box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
        }

        .area-search input {
            border: none;
            outline: none;
            font-size: 0.82rem;
            flex: 1;
            background: transparent;
        }

        /* ── Badges ── */
        .zip-badge {
            font-size: 11px;
            padding: 3px 10px;
            border-radius: 100px;
            font-weight: 700;
            background: #ccfbf1;
            color: #0f766e;
        }

        .province-tag {
            font-size: 10px;
            padding: 3px 8px;
            border-radius: 6px;
            font-weight: 700;
            background: #f0f9ff;
            color: #0369a1;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        /* ── Action Btn ── */
        .btn-act {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e2e8f0;
            background: white;
            color: #64748b;
            font-size: 13px;
            transition: all 0.15s;
            cursor: pointer;
        }

        .btn-act.edit:hover {
            background: #ccfbf1;
            color: #0f766e;
            border-color: #99f6e4;
        }

        .btn-act.delete:hover {
            background: #fee2e2;
            color: #dc2626;
            border-color: #fca5a5;
        }

        /* ── Skeleton ── */
        @keyframes shimmer {
            0% {
                background-position: -200% 0;
            }

            100% {
                background-position: 200% 0;
            }
        }

        .sk-block {
            height: 14px;
            border-radius: 6px;
            background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }

        /* ── Pagination ── */
        .pg-wrap {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 1.25rem;
            border-top: 1px solid #f1f5f9;
        }

        .pg-wrap .pg-info {
            font-size: 0.78rem;
            color: #64748b;
        }

        .pg-wrap .pg-btn {
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 5px 12px;
            background: white;
            font-size: 0.78rem;
            font-weight: 600;
            color: #475569;
            cursor: pointer;
            transition: all 0.15s;
        }

        .pg-wrap .pg-btn:hover {
            background: #f0fdfa;
        }

        .pg-wrap .pg-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .pg-wrap .pg-btn.active {
            background: var(--area-primary);
            color: white;
            border-color: var(--area-primary);
        }

        /* ── Empty State ── */
        .empty-state {
            text-align: center;
            padding: 3rem 2rem;
        }

        .empty-state i {
            font-size: 2.5rem;
            color: #cbd5e1;
            margin-bottom: 0.75rem;
        }

        .empty-state h6 {
            color: #64748b;
            font-weight: 700;
        }

        .empty-state p {
            color: #94a3b8;
            font-size: 0.8rem;
        }

        /* ═══ Modal Wizard ═══ */
        .wizard-modal .modal-content {
            border: none;
            border-radius: 20px;
            overflow: hidden;
        }

        .wizard-modal .modal-header {
            background: linear-gradient(135deg, #0f766e 0%, #0e7490 100%);
            border: none;
            padding: 1.25rem 1.5rem;
        }

        /* Step Indicator */
        .step-bar {
            display: flex;
            align-items: center;
            gap: 0;
            padding: 0 0.5rem;
        }

        .step-node {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            min-width: 64px;
        }

        .step-dot {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: 800;
            background: #e2e8f0;
            color: #94a3b8;
            transition: all 0.3s;
        }

        .step-node.done .step-dot {
            background: #ccfbf1;
            color: #0f766e;
            border: 2px solid #0f766e;
        }

        .step-node.active .step-dot {
            background: #0f766e;
            color: white;
            border: 2px solid #0f766e;
            box-shadow: 0 2px 8px rgba(15, 118, 110, 0.3);
        }

        .step-node small {
            font-size: 0.65rem;
            font-weight: 600;
            color: #94a3b8;
        }

        .step-node.done small,
        .step-node.active small {
            color: #0f766e;
        }

        .step-line {
            flex: 1;
            height: 2px;
            background: #e2e8f0;
            margin-bottom: 18px;
        }

        .step-node.done+.step-line,
        .step-node.done~.step-line {
            background: #99f6e4;
        }

        /* Wizard List */
        .wiz-list {
            max-height: 320px;
            overflow-y: auto;
        }

        .wiz-item {
            display: flex;
            align-items: center;
            padding: 10px 14px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.15s;
            border: 1px solid transparent;
            margin-bottom: 4px;
        }

        .wiz-item:hover {
            background: #f0fdfa;
            border-color: #99f6e4;
        }

        .wiz-item .wiz-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f0fdfa;
            color: #0f766e;
            font-size: 13px;
            flex-shrink: 0;
        }

        .wiz-item .wiz-name {
            font-weight: 600;
            font-size: 0.85rem;
            color: #1e293b;
            flex: 1;
            margin: 0 12px;
        }

        .wiz-item .wiz-arrow {
            color: #cbd5e1;
            font-size: 12px;
        }

        /* Wizard Sub-district table */
        .wiz-table thead th {
            font-size: 0.68rem;
            font-weight: 700;
            text-transform: uppercase;
            color: #64748b;
            border-bottom: 2px solid #f1f5f9;
            padding: 8px 12px;
        }

        .wiz-table tbody td {
            padding: 8px 12px;
            font-size: 0.82rem;
        }

        .wiz-table tbody tr:hover {
            background: #f0fdfa;
        }

        .wiz-check:checked {
            background-color: #0f766e;
            border-color: #0f766e;
        }

        .breadcrumb-path {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.78rem;
            flex-wrap: wrap;
        }

        .breadcrumb-path .bc-item {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: #f0fdfa;
            padding: 3px 10px;
            border-radius: 6px;
            font-weight: 600;
            color: #0f766e;
            font-size: 11px;
        }

        .breadcrumb-path .bc-sep {
            color: #cbd5e1;
            font-size: 10px;
        }

        .wiz-loading {
            text-align: center;
            padding: 2rem;
        }

        .wiz-loading .spinner-border {
            width: 1.5rem;
            height: 1.5rem;
        }

        .wiz-back-btn {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e2e8f0;
            background: white;
            color: #64748b;
            cursor: pointer;
            transition: all 0.15s;
            flex-shrink: 0;
        }

        .wiz-back-btn:hover {
            background: #f0fdfa;
            color: #0f766e;
            border-color: #99f6e4;
        }

        .wiz-search {
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 8px 14px;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: border-color 0.2s;
        }

        .wiz-search:focus-within {
            border-color: #0f766e;
            box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.08);
        }

        .wiz-search input {
            border: none;
            outline: none;
            font-size: 0.82rem;
            flex: 1;
            background: transparent;
        }

        .status-badge-exist {
            font-size: 10px;
            padding: 3px 8px;
            border-radius: 100px;
            font-weight: 700;
            background: #d1fae5;
            color: #059669;
        }

        .status-badge-new {
            font-size: 10px;
            padding: 3px 8px;
            border-radius: 100px;
            font-weight: 700;
            background: #fef3c7;
            color: #d97706;
        }
    </style>
@endpush

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

            {{-- ── Header ── --}}
            <div class="area-header mb-4">
                <div class="d-flex justify-content-between align-items-center position-relative" style="z-index:1;">
                    <div>
                        <h4 class="fw-bold mb-1" style="font-size:1.2rem;color:white;">
                            <i class="fas fa-map-marked-alt me-2" style="opacity:0.8;"></i>Manajemen Area
                        </h4>
                        <p class="mb-0" style="font-size:0.8rem;opacity:0.8;">Kelola data wilayah: provinsi, kota,
                            kecamatan, dan kelurahan.</p>
                    </div>
                    <button type="button" class="btn btn-light btn-sm rounded-pill px-4 fw-bold shadow-sm"
                        style="font-size:0.8rem;" data-bs-toggle="modal" data-bs-target="#addAreaModal">
                        <i class="fas fa-plus me-2"></i>Tambah Area
                    </button>
                </div>
            </div>

            {{-- ── Stat Cards ── --}}
            <div class="row g-3 mb-4">
                <div class="col-xl-3 col-md-6">
                    <div class="area-stat">
                        <div class="d-flex align-items-center gap-3">
                            <div class="stat-icon" style="background:#ccfbf1;color:#0f766e;"><i
                                    class="fas fa-globe-asia"></i></div>
                            <div>
                                <div class="stat-value" id="stat-total" style="color:#0f766e;">0</div>
                                <div class="stat-label">Total Area</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="area-stat">
                        <div class="d-flex align-items-center gap-3">
                            <div class="stat-icon" style="background:#f0f9ff;color:#0369a1;"><i class="fas fa-map"></i>
                            </div>
                            <div>
                                <div class="stat-value" id="stat-provinces" style="color:#0369a1;">0</div>
                                <div class="stat-label">Provinsi</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="area-stat">
                        <div class="d-flex align-items-center gap-3">
                            <div class="stat-icon" style="background:#fef3c7;color:#d97706;"><i class="fas fa-city"></i>
                            </div>
                            <div>
                                <div class="stat-value" id="stat-cities" style="color:#d97706;">0</div>
                                <div class="stat-label">Kota</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="area-stat">
                        <div class="d-flex align-items-center gap-3">
                            <div class="stat-icon" style="background:#fce7f3;color:#db2777;"><i class="fas fa-map-pin"></i>
                            </div>
                            <div>
                                <div class="stat-value" id="stat-districts" style="color:#db2777;">0</div>
                                <div class="stat-label">Kecamatan</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ── Toolbar ── --}}
            <div class="d-flex flex-wrap gap-2 mb-3 align-items-center">
                <div class="area-search">
                    <i class="fas fa-search text-muted" style="font-size:13px;"></i>
                    <input type="text" id="search-input"
                        placeholder="Cari area: provinsi, kota, kecamatan, kelurahan, kode pos...">
                </div>
                <div class="ms-auto">
                    <select class="form-select form-select-sm" id="per-page"
                        style="width:auto;border-radius:10px;font-size:0.8rem;">
                        <option value="20" selected>20 / halaman</option>
                        <option value="50">50 / halaman</option>
                        <option value="100">100 / halaman</option>
                    </select>
                </div>
            </div>

            {{-- ── Data Table ── --}}
            <div class="area-card">
                <div class="table-responsive">
                    <table class="table table-area align-middle mb-0">
                        <thead>
                            <tr>
                                <th>Provinsi</th>
                                <th>Kota / Kabupaten</th>
                                <th>Kecamatan</th>
                                <th>Kelurahan</th>
                                <th>Kode Pos</th>
                                <th class="text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody id="area-table-body"></tbody>
                    </table>
                </div>
                <div class="pg-wrap">
                    <div class="pg-info" id="pg-info">Menampilkan 0 dari 0</div>
                    <div class="d-flex gap-1" id="pg-buttons"></div>
                </div>
            </div>
        </div>
    </div>

    {{-- ═══ Modal: Tambah Area ═══ --}}
    <div class="modal fade wizard-modal" id="addAreaModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="d-flex align-items-center">
                        <div style="width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;"
                            class="me-3">
                            <i class="fas fa-map-marker-alt text-white"></i>
                        </div>
                        <div>
                            <h6 class="text-white fw-bold mb-0" style="font-size:0.95rem;">Tambah Area</h6>
                            <small class="text-white text-opacity-75" style="font-size:0.72rem;">Cari dan impor data wilayah
                                dari Everpro</small>
                        </div>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <div id="modal-alert"></div>

                    {{-- Step Indicator --}}
                    <div class="step-bar mb-4">
                        <div class="step-node active" data-step="1">
                            <div class="step-dot">1</div><small>Provinsi</small>
                        </div>
                        <div class="step-line"></div>
                        <div class="step-node" data-step="2">
                            <div class="step-dot">2</div><small>Kota</small>
                        </div>
                        <div class="step-line"></div>
                        <div class="step-node" data-step="3">
                            <div class="step-dot">3</div><small>Kecamatan</small>
                        </div>
                        <div class="step-line"></div>
                        <div class="step-node" data-step="4">
                            <div class="step-dot">4</div><small>Kelurahan</small>
                        </div>
                    </div>

                    {{-- Step 1: Province --}}
                    <div id="step-1" class="step-content">
                        <div class="wiz-search mb-3">
                            <i class="fas fa-search text-muted" style="font-size:12px;"></i>
                            <input type="text" id="search-province" placeholder="Ketik nama provinsi lalu Enter...">
                            <button class="btn btn-sm px-3" id="btn-search-province"
                                style="background:#0f766e;color:white;border-radius:8px;font-size:0.75rem;">Cari</button>
                        </div>
                        <div id="province-loading" class="wiz-loading d-none">
                            <div class="spinner-border text-success"></div>
                            <div class="text-muted mt-2" style="font-size:0.8rem;">Mencari provinsi...</div>
                        </div>
                        <div id="province-list" class="wiz-list"></div>
                    </div>

                    {{-- Step 2: City --}}
                    <div id="step-2" class="step-content d-none">
                        <div class="d-flex align-items-center gap-2 mb-3">
                            <button class="wiz-back-btn" id="back-to-1"><i class="fas fa-arrow-left"
                                    style="font-size:12px;"></i></button>
                            <div class="breadcrumb-path">
                                <span class="bc-item"><i class="fas fa-map"></i> <span id="bc-province-1"></span></span>
                            </div>
                        </div>
                        <div class="wiz-search mb-3">
                            <i class="fas fa-search text-muted" style="font-size:12px;"></i>
                            <input type="text" id="search-city" placeholder="Cari kota/kabupaten (opsional)...">
                            <button class="btn btn-sm px-3" id="btn-search-city"
                                style="background:#0f766e;color:white;border-radius:8px;font-size:0.75rem;">Cari</button>
                        </div>
                        <div id="city-loading" class="wiz-loading d-none">
                            <div class="spinner-border text-success"></div>
                            <div class="text-muted mt-2" style="font-size:0.8rem;">Mencari kota...</div>
                        </div>
                        <div id="city-list" class="wiz-list"></div>
                    </div>

                    {{-- Step 3: District --}}
                    <div id="step-3" class="step-content d-none">
                        <div class="d-flex align-items-center gap-2 mb-3">
                            <button class="wiz-back-btn" id="back-to-2"><i class="fas fa-arrow-left"
                                    style="font-size:12px;"></i></button>
                            <div class="breadcrumb-path">
                                <span class="bc-item"><i class="fas fa-map"></i> <span id="bc-province-2"></span></span>
                                <span class="bc-sep"><i class="fas fa-chevron-right"></i></span>
                                <span class="bc-item"><i class="fas fa-city"></i> <span id="bc-city-1"></span></span>
                            </div>
                        </div>
                        <div class="wiz-search mb-3">
                            <i class="fas fa-search text-muted" style="font-size:12px;"></i>
                            <input type="text" id="search-district" placeholder="Cari kecamatan (opsional)...">
                            <button class="btn btn-sm px-3" id="btn-search-district"
                                style="background:#0f766e;color:white;border-radius:8px;font-size:0.75rem;">Cari</button>
                        </div>
                        <div id="district-loading" class="wiz-loading d-none">
                            <div class="spinner-border text-success"></div>
                            <div class="text-muted mt-2" style="font-size:0.8rem;">Mencari kecamatan...</div>
                        </div>
                        <div id="district-list" class="wiz-list"></div>
                    </div>

                    {{-- Step 4: Sub-district --}}
                    <div id="step-4" class="step-content d-none">
                        <div class="d-flex align-items-center gap-2 mb-3">
                            <button class="wiz-back-btn" id="back-to-3"><i class="fas fa-arrow-left"
                                    style="font-size:12px;"></i></button>
                            <div class="breadcrumb-path">
                                <span class="bc-item"><i class="fas fa-map"></i> <span id="bc-province-3"></span></span>
                                <span class="bc-sep"><i class="fas fa-chevron-right"></i></span>
                                <span class="bc-item"><i class="fas fa-city"></i> <span id="bc-city-2"></span></span>
                                <span class="bc-sep"><i class="fas fa-chevron-right"></i></span>
                                <span class="bc-item"><i class="fas fa-map-pin"></i> <span
                                        id="bc-district-1"></span></span>
                            </div>
                        </div>

                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div class="d-flex align-items-center gap-2">
                                <span style="font-size:0.85rem;font-weight:700;color:#1e293b;">Pilih Kelurahan</span>
                                <span id="subdistrict-count"
                                    style="font-size:10px;background:#ccfbf1;color:#0f766e;padding:2px 8px;border-radius:100px;font-weight:700;">0</span>
                            </div>
                            <label class="d-flex align-items-center gap-2"
                                style="cursor:pointer;font-size:0.78rem;color:#64748b;">
                                <input type="checkbox" class="form-check-input wiz-check" id="select-all-sub"
                                    style="width:16px;height:16px;">
                                Pilih Semua (baru)
                            </label>
                        </div>

                        <div id="subdistrict-loading" class="wiz-loading d-none">
                            <div class="spinner-border text-success"></div>
                            <div class="text-muted mt-2" style="font-size:0.8rem;">Memuat kelurahan...</div>
                        </div>

                        <div style="max-height:320px;overflow-y:auto;border:1px solid #f1f5f9;border-radius:12px;">
                            <table class="table wiz-table mb-0">
                                <thead class="sticky-top bg-white">
                                    <tr>
                                        <th style="width:40px;" class="text-center">#</th>
                                        <th>Kelurahan</th>
                                        <th>Kode Pos</th>
                                        <th class="text-center">Status</th>
                                    </tr>
                                </thead>
                                <tbody id="subdistrict-body"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 bg-light px-4 py-3">
                    <span class="me-auto" style="font-size:0.78rem;color:#64748b;" id="selected-count">0 area
                        dipilih</span>
                    <button type="button" class="btn btn-sm btn-light rounded-pill px-4"
                        data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-sm rounded-pill px-4" id="btn-save-areas" disabled
                        style="background:#0f766e;color:white;font-weight:600;">
                        <i class="fas fa-save me-1"></i>Simpan Area Terpilih
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '{{ csrf_token() }}';
            const tableBody = document.getElementById('area-table-body');

            let currentPage = 1;
            let debounceTimer;

            // ═══════════════════════════
            // TABLE & PAGINATION
            // ═══════════════════════════

            document.getElementById('search-input').addEventListener('input', () => {
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(() => {
                    currentPage = 1;
                    fetchAreas();
                }, 400);
            });
            document.getElementById('per-page').addEventListener('change', () => {
                currentPage = 1;
                fetchAreas();
            });

            function renderSkeleton() {
                tableBody.innerHTML = Array(6).fill().map(() => `
                <tr>
                    <td><div class="sk-block" style="width:90px;"></div></td>
                    <td><div class="sk-block" style="width:100px;"></div></td>
                    <td><div class="sk-block" style="width:85px;"></div></td>
                    <td><div class="sk-block" style="width:85px;"></div></td>
                    <td><div class="sk-block" style="width:50px;height:20px;border-radius:100px;"></div></td>
                    <td class="text-center"><div class="sk-block mx-auto" style="width:32px;height:32px;border-radius:8px;"></div></td>
                </tr>
            `).join('');
            }

            async function fetchAreas() {
                renderSkeleton();
                const search = document.getElementById('search-input').value;
                const perPage = document.getElementById('per-page').value;

                try {
                    const res = await fetch(
                        `{{ route('areas.data') }}?page=${currentPage}&search=${encodeURIComponent(search)}&length=${perPage}`
                        );
                    const data = await res.json();
                    const items = data.data || [];
                    const total = data.total || 0;
                    const lastPage = data.last_page || 1;

                    // Stats
                    document.getElementById('stat-total').textContent = total;
                    if (items.length > 0) {
                        const provinces = new Set(items.map(a => a.province_name));
                        const cities = new Set(items.map(a => a.city_name));
                        const districts = new Set(items.map(a => a.district_name));
                        document.getElementById('stat-provinces').textContent = provinces.size;
                        document.getElementById('stat-cities').textContent = cities.size;
                        document.getElementById('stat-districts').textContent = districts.size;
                    }

                    if (!items.length) {
                        tableBody.innerHTML =
                            `<tr><td colspan="6"><div class="empty-state"><i class="fas fa-map-marked-alt"></i><h6>Tidak ada area ditemukan</h6><p>Coba ubah kata kunci pencarian atau tambah area baru.</p></div></td></tr>`;
                        document.getElementById('pg-info').textContent = 'Menampilkan 0 dari 0';
                        document.getElementById('pg-buttons').innerHTML = '';
                        return;
                    }

                    tableBody.innerHTML = items.map(area => `
                    <tr>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <div style="width:28px;height:28px;border-radius:7px;background:#f0f9ff;color:#0369a1;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;">
                                    <i class="fas fa-map"></i>
                                </div>
                                <span class="fw-bold" style="font-size:0.82rem;color:#1e293b;">${area.province_name}</span>
                            </div>
                        </td>
                        <td style="font-size:0.82rem;color:#475569;">${area.city_name}</td>
                        <td style="font-size:0.82rem;color:#475569;">${area.district_name}</td>
                        <td>
                            <span class="fw-semibold" style="font-size:0.82rem;color:#1e293b;">${area.sub_district_name}</span>
                        </td>
                        <td><span class="zip-badge">${area.zip_code}</span></td>
                        <td class="text-center">
                            <a href="/areas/${area.id}/edit" class="btn-act edit" title="Edit">
                                <i class="fas fa-pen" style="font-size:11px;"></i>
                            </a>
                        </td>
                    </tr>
                `).join('');

                    // Pagination
                    const perP = parseInt(perPage);
                    const from = (currentPage - 1) * perP + 1;
                    const to = Math.min(currentPage * perP, total);
                    document.getElementById('pg-info').textContent = `Menampilkan ${from}-${to} dari ${total}`;

                    let pgHtml =
                        `<button class="pg-btn" ${currentPage <= 1 ? 'disabled' : ''} onclick="goAreaPage(${currentPage-1})"><i class="fas fa-chevron-left"></i></button>`;
                    const maxV = 5;
                    let sP = Math.max(1, currentPage - Math.floor(maxV / 2));
                    let eP = Math.min(lastPage, sP + maxV - 1);
                    if (eP - sP < maxV - 1) sP = Math.max(1, eP - maxV + 1);
                    if (sP > 1) pgHtml +=
                        `<button class="pg-btn" onclick="goAreaPage(1)">1</button><span style="padding:0 4px;color:#94a3b8;">…</span>`;
                    for (let i = sP; i <= eP; i++) pgHtml +=
                        `<button class="pg-btn ${i === currentPage ? 'active' : ''}" onclick="goAreaPage(${i})">${i}</button>`;
                    if (eP < lastPage) pgHtml +=
                        `<span style="padding:0 4px;color:#94a3b8;">…</span><button class="pg-btn" onclick="goAreaPage(${lastPage})">${lastPage}</button>`;
                    pgHtml +=
                        `<button class="pg-btn" ${currentPage >= lastPage ? 'disabled' : ''} onclick="goAreaPage(${currentPage+1})"><i class="fas fa-chevron-right"></i></button>`;
                    document.getElementById('pg-buttons').innerHTML = pgHtml;

                } catch (e) {
                    console.error(e);
                    tableBody.innerHTML =
                        `<tr><td colspan="6" class="text-center py-4 text-danger fw-bold"><i class="fas fa-exclamation-triangle me-2"></i>Gagal memuat data</td></tr>`;
                }
            }

            window.goAreaPage = function(p) {
                currentPage = p;
                fetchAreas();
            };
            fetchAreas();

            // ═══════════════════════════
            // WIZARD MODAL
            // ═══════════════════════════
            const sel = {
                province: null,
                city: null,
                district: null
            };
            let subResults = [];
            const btnSave = document.getElementById('btn-save-areas');
            const selCount = document.getElementById('selected-count');
            const selAllCheck = document.getElementById('select-all-sub');

            function showStep(n) {
                [1, 2, 3, 4].forEach(s => document.getElementById(`step-${s}`).classList.toggle('d-none', s !== n));
                document.querySelectorAll('.step-node').forEach(el => {
                    const s = parseInt(el.dataset.step);
                    el.classList.toggle('active', s === n);
                    el.classList.toggle('done', s < n);
                });
            }

            function extractItems(json) {
                const d = json.data;
                if (Array.isArray(d)) return d;
                if (d && typeof d === 'object') {
                    for (const key of Object.keys(d)) {
                        if (Array.isArray(d[key])) return d[key];
                    }
                }
                return [];
            }

            function renderWizList(containerId, items, nameKey, onClick) {
                const container = document.getElementById(containerId);
                if (!items.length) {
                    container.innerHTML =
                        `<div class="text-center py-4"><i class="fas fa-inbox" style="font-size:1.5rem;color:#cbd5e1;"></i><div style="font-size:0.8rem;color:#94a3b8;margin-top:8px;">Tidak ada hasil ditemukan</div></div>`;
                    return;
                }
                container.innerHTML = items.map((item, i) => {
                    const name = item[nameKey] || item.name || '';
                    return `<div class="wiz-item" data-idx="${i}"><div class="wiz-icon"><i class="fas fa-map-pin"></i></div><div class="wiz-name">${name}</div><div class="wiz-arrow"><i class="fas fa-chevron-right"></i></div></div>`;
                }).join('');
                container.querySelectorAll('.wiz-item').forEach(el => {
                    el.addEventListener('click', () => onClick(items[parseInt(el.dataset.idx)]));
                });
            }

            // Step 1: Province
            async function searchProvince() {
                const q = document.getElementById('search-province').value.trim();
                const loading = document.getElementById('province-loading');
                loading.classList.remove('d-none');
                document.getElementById('province-list').innerHTML = '';
                try {
                    const params = q ? `?province_name=${encodeURIComponent(q)}` : '';
                    const res = await fetch(`{{ route('areas.lookup.provinces') }}${params}`);
                    const json = await res.json();
                    renderWizList('province-list', extractItems(json), 'province_name', (item) => {
                        sel.province = {
                            id: item.province_id || item.id,
                            name: item.province_name || item.name
                        };
                        document.getElementById('bc-province-1').textContent = sel.province.name;
                        document.getElementById('bc-province-2').textContent = sel.province.name;
                        document.getElementById('bc-province-3').textContent = sel.province.name;
                        showStep(2);
                        searchCity();
                    });
                } catch (e) {
                    document.getElementById('province-list').innerHTML =
                        `<div class="text-danger text-center py-3">${e.message}</div>`;
                } finally {
                    loading.classList.add('d-none');
                }
            }

            document.getElementById('btn-search-province').addEventListener('click', searchProvince);
            document.getElementById('search-province').addEventListener('keydown', e => {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    searchProvince();
                }
            });
            document.getElementById('addAreaModal').addEventListener('shown.bs.modal', () => {
                searchProvince();
                document.getElementById('search-province').focus();
            });

            // Step 2: City
            async function searchCity() {
                const q = document.getElementById('search-city').value.trim();
                const loading = document.getElementById('city-loading');
                loading.classList.remove('d-none');
                document.getElementById('city-list').innerHTML = '';
                try {
                    let params = `?province_id=${encodeURIComponent(sel.province.id)}`;
                    if (q) params += `&city_name=${encodeURIComponent(q)}`;
                    const res = await fetch(`{{ route('areas.lookup.cities') }}${params}`);
                    const json = await res.json();
                    renderWizList('city-list', extractItems(json), 'city_name', (item) => {
                        sel.city = {
                            id: item.city_id || item.id,
                            name: item.city_name || item.name
                        };
                        document.getElementById('bc-city-1').textContent = sel.city.name;
                        document.getElementById('bc-city-2').textContent = sel.city.name;
                        showStep(3);
                        searchDistrict();
                    });
                } catch (e) {
                    document.getElementById('city-list').innerHTML =
                        `<div class="text-danger text-center py-3">${e.message}</div>`;
                } finally {
                    loading.classList.add('d-none');
                }
            }

            document.getElementById('btn-search-city').addEventListener('click', searchCity);
            document.getElementById('search-city').addEventListener('keydown', e => {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    searchCity();
                }
            });
            document.getElementById('back-to-1').addEventListener('click', () => {
                sel.province = null;
                sel.city = null;
                sel.district = null;
                document.getElementById('search-city').value = '';
                showStep(1);
            });

            // Step 3: District
            async function searchDistrict() {
                const q = document.getElementById('search-district').value.trim();
                const loading = document.getElementById('district-loading');
                loading.classList.remove('d-none');
                document.getElementById('district-list').innerHTML = '';
                try {
                    let params = `?city_id=${encodeURIComponent(sel.city.id)}`;
                    if (q) params += `&district_name=${encodeURIComponent(q)}`;
                    const res = await fetch(`{{ route('areas.lookup.districts') }}${params}`);
                    const json = await res.json();
                    renderWizList('district-list', extractItems(json), 'district_name', (item) => {
                        sel.district = {
                            id: item.district_id || item.id,
                            name: item.district_name || item.name
                        };
                        document.getElementById('bc-district-1').textContent = sel.district.name;
                        showStep(4);
                        loadSubDistricts();
                    });
                } catch (e) {
                    document.getElementById('district-list').innerHTML =
                        `<div class="text-danger text-center py-3">${e.message}</div>`;
                } finally {
                    loading.classList.add('d-none');
                }
            }

            document.getElementById('btn-search-district').addEventListener('click', searchDistrict);
            document.getElementById('search-district').addEventListener('keydown', e => {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    searchDistrict();
                }
            });
            document.getElementById('back-to-2').addEventListener('click', () => {
                sel.city = null;
                sel.district = null;
                document.getElementById('search-district').value = '';
                showStep(2);
            });

            // Step 4: Sub-districts
            async function loadSubDistricts() {
                const loading = document.getElementById('subdistrict-loading');
                const tbody = document.getElementById('subdistrict-body');
                loading.classList.remove('d-none');
                tbody.innerHTML = '';
                subResults = [];

                try {
                    const res = await fetch(
                        `{{ route('areas.lookup.sub-districts') }}?district_id=${encodeURIComponent(sel.district.id)}`
                        );
                    const json = await res.json();
                    const items = extractItems(json);
                    document.getElementById('subdistrict-count').textContent = items.length;

                    subResults = items.map(item => ({
                        sub_district: item.sub_district_name || item.name || '',
                        zip_code: item.postal_code || item.zip_code || '',
                        exists: false,
                    }));

                    try {
                        const checkRes = await fetch(
                            `{{ route('areas.data') }}?search=${encodeURIComponent(sel.district.name)}&limit=500`
                            );
                        const checkJson = await checkRes.json();
                        const existing = checkJson.data || [];
                        subResults.forEach(sd => {
                            sd.exists = existing.some(a =>
                                a.province_name === sel.province.name &&
                                a.city_name === sel.city.name &&
                                a.district_name === sel.district.name &&
                                a.sub_district_name === sd.sub_district &&
                                a.zip_code === sd.zip_code
                            );
                        });
                    } catch {}

                    renderSubDistricts();
                } catch (e) {
                    tbody.innerHTML =
                        `<tr><td colspan="4" class="text-danger text-center py-3">${e.message}</td></tr>`;
                } finally {
                    loading.classList.add('d-none');
                }
            }

            function renderSubDistricts() {
                const tbody = document.getElementById('subdistrict-body');
                if (!subResults.length) {
                    tbody.innerHTML =
                        `<tr><td colspan="4" class="text-center py-3 text-muted" style="font-size:0.82rem;">Tidak ada kelurahan ditemukan</td></tr>`;
                    return;
                }
                tbody.innerHTML = subResults.map((item, i) => `
                <tr style="${item.exists ? 'opacity:0.5;' : ''}">
                    <td class="text-center"><input type="checkbox" class="form-check-input wiz-check sub-check" data-idx="${i}" ${item.exists ? 'disabled' : ''} style="width:16px;height:16px;"></td>
                    <td class="fw-semibold" style="color:#1e293b;">${item.sub_district}</td>
                    <td><span class="zip-badge">${item.zip_code}</span></td>
                    <td class="text-center">${item.exists ? '<span class="status-badge-exist"><i class="fas fa-check me-1"></i>Sudah Ada</span>' : '<span class="status-badge-new"><i class="fas fa-plus me-1"></i>Baru</span>'}</td>
                </tr>
            `).join('');
                selAllCheck.checked = false;
                updateSelCount();
            }

            document.getElementById('back-to-3').addEventListener('click', () => {
                sel.district = null;
                subResults = [];
                showStep(3);
            });

            selAllCheck.addEventListener('change', function() {
                document.querySelectorAll('.sub-check:not(:disabled)').forEach(c => c.checked = this
                    .checked);
                updateSelCount();
            });

            document.getElementById('subdistrict-body').addEventListener('change', function(e) {
                if (e.target.classList.contains('sub-check')) {
                    updateSelCount();
                    const allNew = document.querySelectorAll('.sub-check:not(:disabled)');
                    const allChecked = document.querySelectorAll('.sub-check:not(:disabled):checked');
                    selAllCheck.checked = allNew.length > 0 && allNew.length === allChecked.length;
                }
            });

            function updateSelCount() {
                const count = document.querySelectorAll('.sub-check:checked').length;
                selCount.textContent = `${count} area dipilih`;
                btnSave.disabled = count === 0;
            }

            // Save
            btnSave.addEventListener('click', async function() {
                const checked = document.querySelectorAll('.sub-check:checked');
                if (!checked.length) return;

                const areas = [];
                checked.forEach(c => {
                    const item = subResults[parseInt(c.dataset.idx)];
                    areas.push({
                        province_name: sel.province.name,
                        city_name: sel.city.name,
                        district_name: sel.district.name,
                        sub_district_name: item.sub_district,
                        zip_code: item.zip_code,
                    });
                });

                btnSave.disabled = true;
                btnSave.innerHTML =
                    '<span class="spinner-border spinner-border-sm me-1"></span>Menyimpan...';

                try {
                    const res = await fetch(`{{ route('areas.store') }}`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken
                        },
                        body: JSON.stringify({
                            areas
                        }),
                    });
                    const json = await res.json();

                    if (json.success) {
                        document.getElementById('modal-alert').innerHTML = `
                        <div class="alert alert-success alert-dismissible fade show mb-3" role="alert" style="border-radius:10px;font-size:0.82rem;">
                            <i class="fas fa-check-circle me-2"></i><strong>${json.message}</strong>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" style="font-size:0.7rem;"></button>
                        </div>`;
                        setTimeout(() => loadSubDistricts(), 300);
                        fetchAreas();
                    } else {
                        alert('Gagal: ' + (json.message || 'Error'));
                    }
                } catch (e) {
                    alert('Error: ' + e.message);
                } finally {
                    btnSave.disabled = false;
                    btnSave.innerHTML = '<i class="fas fa-save me-1"></i>Simpan Area Terpilih';
                    updateSelCount();
                }
            });

            // Reset modal
            document.getElementById('addAreaModal').addEventListener('hidden.bs.modal', function() {
                sel.province = null;
                sel.city = null;
                sel.district = null;
                subResults = [];
                ['search-province', 'search-city', 'search-district'].forEach(id => document.getElementById(
                    id).value = '');
                ['province-list', 'city-list', 'district-list'].forEach(id => document.getElementById(id)
                    .innerHTML = '');
                document.getElementById('subdistrict-body').innerHTML = '';
                selAllCheck.checked = false;
                showStep(1);
                updateSelCount();
                document.getElementById('modal-alert').innerHTML = '';
            });
        });
    </script>
@endpush