@extends('template.desktop.app')

@section('title', 'Edit Area')

@section('content')
    <!-- Include Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest"></script>

    <div class="row" id="edit-area-page">
        <!-- Kolom Kiri: Form Utama (Data yang akan disimpan) -->
        <div class="col-md-5">
            <div class="card mb-4 border-0 shadow-sm overflow-hidden" style="border-radius: 12px;">
                <div class="card-header d-flex justify-content-between align-items-center bg-white py-3 border-bottom">
                    <div class="d-flex align-items-center">
                        <div class="bg-label-primary p-2 rounded-3 me-2">
                            <i data-lucide="map-pin" style="width: 20px;"></i>
                        </div>
                        <h5 class="mb-0 fw-bold">Detail Lokasi</h5>
                    </div>
                    <span class="badge bg-light-primary px-3 rounded-pill text-uppercase">ID #{{ $area->id }}</span>
                </div>
                <div class="card-body pt-4">
                    <form action="{{ route('areas.update', $area->id) }}" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="mb-3">
                            <label class="form-label small text-uppercase fw-bold text-muted mb-2">Provinsi</label>
                            <div class="input-group input-group-merge border rounded-3 focus-within-primary">
                                <span class="input-group-text bg-transparent border-0"><i data-lucide="globe"
                                        style="width: 16px;"></i></span>
                                <input type="text" class="form-control border-0 ps-0" id="province_name"
                                    name="province_name" value="{{ $area->province_name }}" required>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label small text-uppercase fw-bold text-muted mb-2">Kota / Kabupaten</label>
                            <div class="input-group input-group-merge border rounded-3 focus-within-primary">
                                <span class="input-group-text bg-transparent border-0"><i data-lucide="building"
                                        style="width: 16px;"></i></span>
                                <input type="text" class="form-control border-0 ps-0" id="city_name" name="city_name"
                                    value="{{ $area->city_name }}" required>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label small text-uppercase fw-bold text-muted mb-2">Kecamatan</label>
                            <div class="input-group input-group-merge border rounded-3 focus-within-primary">
                                <span class="input-group-text bg-transparent border-0"><i data-lucide="navigation"
                                        style="width: 16px;"></i></span>
                                <input type="text" class="form-control border-0 ps-0" id="district_name"
                                    name="district_name" value="{{ $area->district_name }}" required>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label small text-uppercase fw-bold text-muted mb-2">Kelurahan / Desa</label>
                            <div class="input-group input-group-merge border rounded-3 focus-within-primary">
                                <span class="input-group-text bg-transparent border-0"><i data-lucide="home"
                                        style="width: 16px;"></i></span>
                                <input type="text" class="form-control border-0 ps-0" id="sub_district_name"
                                    name="sub_district_name" value="{{ $area->sub_district_name }}" required>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label small text-uppercase fw-bold text-muted mb-2">Kode Pos (Zip
                                Code)</label>
                            <div
                                class="input-group input-group-merge border-primary-thick rounded-3 shadow-sm bg-soft-primary">
                                <span class="input-group-text bg-transparent border-0 text-primary"><i data-lucide="hash"
                                        style="width: 18px;"></i></span>
                                <input type="text" class="form-control border-0 ps-0 fw-bold text-primary bg-transparent"
                                    id="zip_code" name="zip_code" value="{{ $area->zip_code }}" required>
                            </div>
                            <small class="text-muted mt-1 d-block"><i data-lucide="info" class="me-1"
                                    style="width: 12px; vertical-align: middle;"></i> Sesuaikan manual atau ambil dari
                                discovery.</small>
                        </div>

                        <div class="d-grid gap-2 pt-2">
                            <button type="submit"
                                class="btn btn-primary btn-lg shadow-sm border-0 d-flex align-items-center justify-content-center py-3">
                                <i data-lucide="save" class="me-2" style="width: 20px;"></i> Update Data Area
                            </button>
                            <a href="{{ route('areas.index') }}"
                                class="btn btn-outline-secondary d-flex align-items-center justify-content-center">
                                <i data-lucide="arrow-left" class="me-2" style="width: 18px;"></i> Kembali
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Kolom Kanan: Discovery Tools (Hierarchical Only) -->
        <div class="col-md-7">
            <div class="card border-0 shadow-sm" style="border-radius: 12px;">
                <div class="card-header bg-white py-3 border-bottom d-flex align-items-center">
                    <div class="bg-label-primary p-2 rounded-3 me-2">
                        <i data-lucide="layers" style="width: 20px;"></i>
                    </div>
                    <h5 class="mb-0 fw-bold">Jenjang Wilayah (Everpro)</h5>
                </div>
                <div class="card-body p-4">
                    <div class="alert alert-primary-soft border-0 mb-4 d-flex align-items-start p-3 rounded-3">
                        <i data-lucide="wand-2" class="me-3" style="width: 24px; flex-shrink: 0;"></i>
                        <div class="small">
                            <strong class="d-block mb-1">Auto-Sync Everpro</strong>
                            Sistem mencocokkan data area yang sedang diedit dengan database API Everpro secara otomatis.
                            Gunakan kolom di bawah untuk memvalidasi hirarki wilayah yang benar.
                        </div>
                    </div>

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label small fw-bold text-muted">PROVINSI</label>
                            <select id="sel-prov" class="form-select border-soft-primary"></select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-bold text-muted">KOTA / KABUPATEN</label>
                            <select id="sel-city" class="form-select border-soft-primary" disabled></select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-bold text-muted">KECAMATAN</label>
                            <select id="sel-dist" class="form-select border-soft-primary" disabled></select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-bold text-muted">KELURAHAN</label>
                            <select id="sel-sub" class="form-select border-soft-primary" disabled></select>
                        </div>
                    </div>

                    <div id="hier-summary" class="mt-4 p-4 rounded-3 bg-soft-success border-dashed-success"
                        style="display: none;">
                        <div class="d-flex justify-content-between align-items-center">
                            <div id="hier-text" class="small fw-semibold text-dark"></div>
                            <button class="btn btn-success btn-sm waves-effect btn-apply-hier px-4 fw-bold">
                                <i data-lucide="check" class="me-1" style="width: 14px;"></i> Gunakan Data Ini
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        :root {
            --primary-red: #8b0000;
            --soft-red: #fff5f5;
            --hover-red: #660000;
            --border-red: #ffd6d6;
            --success-green: #28c76f;
            --soft-green: #e9fbf0;
        }

        /* Full Theme Override */
        .text-primary {
            color: var(--primary-red) !important;
        }

        .bg-primary {
            background-color: var(--primary-red) !important;
        }

        .bg-light-primary {
            background-color: var(--soft-red) !important;
            color: var(--primary-red) !important;
        }

        .bg-soft-primary {
            background-color: var(--soft-red) !important;
        }

        .bg-label-primary {
            background-color: var(--soft-red) !important;
            color: var(--primary-red) !important;
        }

        .alert-primary-soft {
            background-color: var(--soft-red) !important;
            color: var(--primary-red) !important;
        }

        .border-primary-thick {
            border: 2px solid var(--primary-red) !important;
        }

        .border-soft-primary {
            border-color: var(--border-red) !important;
        }

        .focus-within-primary:focus-within {
            border-color: var(--primary-red) !important;
            box-shadow: 0 0 0 0.2rem rgba(139, 0, 0, 0.15) !important;
        }

        .btn-primary {
            background-color: var(--primary-red) !important;
            border-color: var(--primary-red) !important;
            color: #fff !important;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background-color: var(--hover-red) !important;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(139, 0, 0, 0.3) !important;
        }

        .nav-pills .nav-link {
            color: #5d596c;
            font-weight: 600;
        }

        .nav-pills .nav-link.active {
            background-color: var(--primary-red) !important;
            color: #fff !important;
            box-shadow: 0 4px 12px rgba(139, 0, 0, 0.3) !important;
        }

        .nav-pills .nav-link:not(.active):hover {
            color: var(--primary-red);
            background-color: var(--soft-red);
        }

        .form-select:focus {
            border-color: var(--primary-red) !important;
            box-shadow: 0 0 0 0.2rem rgba(139, 0, 0, 0.1) !important;
        }

        .spinner-border.text-primary {
            color: var(--primary-red) !important;
        }

        .bg-soft-success {
            background-color: var(--soft-green) !important;
        }

        .border-dashed-success {
            border: 1px dashed var(--success-green) !important;
        }

        .list-group-item-action:hover {
            background-color: var(--soft-red);
        }
    </style>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            lucide.createIcons();

            const areaData = @json($area);
            let activeSelection = {};

            // --- HIERARCHICAL LOGIC (AUTO-GRAB) ---
            async function initHierarchical() {
                const provs = await fetchEverpro('/areas/lookup/provinces');
                if (!provs) return;
                fillSelect('#sel-prov', provs, 'province_id', 'province_name', 'Pilih Provinsi...');

                const matchProv = provs.find(p => p.province_name.toLowerCase() === areaData.province_name
                    .toLowerCase());
                if (matchProv) {
                    $('#sel-prov').val(matchProv.province_id).trigger('change');
                }
            }

            $('#sel-prov').on('change', async function() {
                const id = $(this).val();
                if (!id) return;
                const cities = await fetchEverpro('/areas/lookup/cities', {
                    province_id: id
                });
                fillSelect('#sel-city', cities, 'city_id', 'city_name', 'Pilih Kota...');
                $('#sel-city').prop('disabled', false);
                const matchCity = cities.find(c => c.city_name.toLowerCase() === areaData.city_name
                    .toLowerCase());
                if (matchCity) $('#sel-city').val(matchCity.city_id).trigger('change');
            });

            $('#sel-city').on('change', async function() {
                const id = $(this).val();
                if (!id) return;
                const dists = await fetchEverpro('/areas/lookup/districts', {
                    city_id: id
                });
                fillSelect('#sel-dist', dists, 'district_id', 'district_name', 'Pilih Kecamatan...');
                $('#sel-dist').prop('disabled', false);
                const matchDist = dists.find(d => d.district_name.toLowerCase() === areaData
                    .district_name.toLowerCase());
                if (matchDist) $('#sel-dist').val(matchDist.district_id).trigger('change');
            });

            $('#sel-dist').on('change', async function() {
                const id = $(this).val();
                if (!id) return;
                const subs = await fetchEverpro('/areas/lookup/sub-districts', {
                    district_id: id
                });
                fillSelect('#sel-sub', subs, 'sub_district_id', 'sub_district_name',
                    'Pilih Kelurahan...', true);
                $('#sel-sub').prop('disabled', false);
                const matchSub = subs.find(s => s.sub_district_name.toLowerCase() === areaData
                    .sub_district_name.toLowerCase());
                if (matchSub) $('#sel-sub').val(matchSub.sub_district_id).trigger('change');
            });

            $('#sel-sub').on('change', function() {
                const sel = $(this).find(':selected');
                if (!sel.val()) return;
                activeSelection = {
                    prov: $('#sel-prov option:selected').text(),
                    city: $('#sel-city option:selected').text(),
                    dist: $('#sel-dist option:selected').text(),
                    sub: sel.data('name'),
                    zip: sel.data('zip')
                };
                $('#hier-text').html(
                    `${activeSelection.sub}, ${activeSelection.dist}, ${activeSelection.city} <br> <span class="badge bg-success mt-1">ZIP: ${activeSelection.zip}</span>`
                    );
                $('#hier-summary').fadeIn();
            });

            $('.btn-apply-hier').on('click', function() {
                applyData(activeSelection.prov, activeSelection.city, activeSelection.dist, activeSelection
                    .sub, activeSelection.zip);
            });

            function applyData(p, c, di, s, z) {
                $('#province_name').val(p);
                $('#city_name').val(c);
                $('#district_name').val(di);
                $('#sub_district_name').val(s);
                $('#zip_code').val(z);
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil!',
                    text: 'Data wilayah telah diperbarui.',
                    timer: 1500,
                    showConfirmButton: false,
                    toast: true,
                    position: 'top-end'
                });
            }

            async function fetchEverpro(url, params = {}) {
                try {
                    const res = await $.get(url, params);
                    return res.status === 'success' ? res.data : null;
                } catch (e) {
                    return null;
                }
            }

            function fillSelect(el, data, val, text, placeholder, isSub = false) {
                let h = `<option value="">${placeholder}</option>`;
                data.forEach(i => {
                    if (isSub) h +=
                        `<option value="${i[val]}" data-name="${i[text]}" data-zip="${i.postal_code}">${i[text]} (${i.postal_code})</option>`;
                    else h += `<option value="${i[val]}">${i[text]}</option>`;
                });
                $(el).html(h);
            }

            initHierarchical();
        });
    </script>
@endpush