<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Daftar - Raja Futsal</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Inter', sans-serif;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .animate-float {
            animation: float 6s ease-in-out infinite;
        }

        .animate-fadeIn {
            animation: fadeIn 0.6s ease forwards;
        }

        .animate-pulse-slow {
            animation: pulse 3s ease-in-out infinite;
        }

        .login-card {
            animation: fadeIn 0.8s ease forwards;
            backdrop-filter: blur(10px);
        }

        .input-focus-effect {
            transition: all 0.3s ease;
        }

        .input-focus-effect:focus {
            border-color: #f97316;
            box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1);
        }

        .btn-orange {
            background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .btn-orange::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, #ea580c, #f97316);
            transition: left 0.3s ease;
        }

        .btn-orange:hover::before {
            left: 0;
        }

        .btn-orange:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(249, 115, 22, 0.3);
        }

        .btn-orange span {
            position: relative;
            z-index: 1;
        }

        .link-hover {
            transition: all 0.2s ease;
        }

        .link-hover:hover {
            color: #ea580c;
        }

        .hero-pattern {
            background: radial-gradient(circle at 10% 20%, rgba(249, 115, 22, 0.05) 0%, transparent 30%),
                        radial-gradient(circle at 90% 50%, rgba(249, 115, 22, 0.05) 0%, transparent 30%),
                        radial-gradient(circle at 30% 80%, rgba(249, 115, 22, 0.05) 0%, transparent 30%);
        }

        .floating-shape {
            position: absolute;
            background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.1));
            border-radius: 50%;
            filter: blur(60px);
        }

        .register-card {
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(10px);
            border-radius: 2rem;
            box-shadow: 0 20px 40px -15px rgba(0,0,0,.15);
            width: 100%;
            max-width: 900px;
            margin: 0 auto;
            overflow: hidden;
        }

        .card-header {
            background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
            padding: 1.25rem 2rem;
        }

        .input-wrapper { position: relative; width: 100%; }
        .input-field {
            width: 100%;
            border: 2px solid #e2e8f0;
            border-radius: 1rem;
            padding: 0.8rem 1rem 0.8rem 2.8rem;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            background: white;
            color: #1e293b;
        }
        .input-field:hover { border-color: #fed7aa; }
        .input-field:focus {
            border-color: #f97316;
            box-shadow: 0 0 0 4px rgba(249,115,22,.1);
            outline: none;
        }
        .input-field::placeholder { color: #94a3b8; font-size: 0.85rem; }
        .input-field[readonly] { background: #f8fafc; cursor: default; }
        .input-wrapper i:not(.toggle-password) {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: #f97316;
            font-size: 1rem;
            z-index: 10;
            opacity: 0.7;
        }
        .input-wrapper:focus-within i:not(.toggle-password) { opacity: 1; }
        select.input-field {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f97316' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
            background-position: right 0.75rem center;
            background-repeat: no-repeat;
            background-size: 1rem;
            padding-right: 2.5rem;
            background-color: white;
            cursor: pointer;
        }
        .button-container { display: flex; gap: 1rem; padding: 0 2rem 1.5rem 2rem; }
        .btn-primary {
            background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
            color: white; font-weight: 600; font-size: 0.95rem;
            padding: 0.85rem 1.5rem; border-radius: 1rem; border: none;
            cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); flex: 1;
            display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
            position: relative;
            overflow: hidden;
        }
        .btn-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, #ea580c, #f97316);
            transition: left 0.3s ease;
        }
        .btn-primary:hover::before {
            left: 0;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(249, 115, 22, 0.3);
        }
        .btn-primary span {
            position: relative;
            z-index: 1;
        }
        .btn-secondary {
            background: white; color: #f97316; font-weight: 600; font-size: 0.95rem;
            padding: 0.85rem 1.5rem; border-radius: 1rem; border: 2px solid #f97316;
            cursor: pointer; transition: all 0.2s ease; flex: 1;
            display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
        }
        .btn-secondary:hover {
            background: #fff7ed; border-color: #ea580c; color: #ea580c;
            transform: translateY(-2px); box-shadow: 0 4px 10px rgba(238,77,45,.1);
        }
        .form-container { padding: 1.5rem 2rem 1rem 2rem; }
        .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
        .full-width { grid-column: span 2; }
        .region-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1rem; }
        .password-wrapper { position: relative; }
        .toggle-password {
            position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
            cursor: pointer; color: #94a3b8; z-index: 20; font-size: 1rem;
        }
        .toggle-password:hover { color: #f97316; }
        .password-hint {
            background: #fff7ed; border-radius: 2rem; padding: 0.4rem 1rem;
            margin: 0.5rem 2rem 1rem 2rem;
            display: inline-flex; align-items: center; gap: 0.5rem;
            border: 1px solid #fed7aa;
        }
        .password-hint i { color: #f97316; font-size: 0.8rem; }
        .password-hint span { color: #475569; font-size: 0.75rem; }
        .role-container {
            grid-column: span 2; display: flex; align-items: center; gap: 1rem;
            background: #fff7ed; padding: 0.75rem 1rem; border-radius: 1rem; border: 1px solid #fed7aa;
        }
        .role-container label { color: #475569; font-weight: 500; font-size: 0.9rem; min-width: 100px; }
        .role-container select {
            flex: 1; border: 2px solid #e2e8f0; border-radius: 0.75rem; padding: 0.5rem;
            font-size: 0.9rem; background: white; cursor: pointer;
            appearance: none; -webkit-appearance: none; pointer-events: none;
        }
        .login-link {
            text-align: center; padding: 1rem 2rem 1.5rem;
            background: #fff7ed; border-top: 1px solid #fed7aa;
        }
        .login-link p { color: #475569; font-size: 0.9rem; }
        .login-link a {
            color: #f97316; font-weight: 600; text-decoration: none;
            transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 0.25rem;
        }
        .login-link a:hover { color: #ea580c; text-decoration: underline; }
        .error-alert {
            margin: 1rem 2rem 0; background: #fef2f2;
            border-left: 4px solid #ef4444; border-radius: 1rem; padding: 0.75rem 1rem;
        }
        .futsal-icon {
            background: rgba(255,255,255,.2); backdrop-filter: blur(5px);
            border-radius: 9999px; padding: 0.7rem;
            display: inline-flex; align-items: center; justify-content: center;
        }
        .futsal-icon i { font-size: 1.2rem; color: white; }
        textarea.input-field { resize: none; min-height: 80px; }
        #regionSection { grid-column: span 2; }

        /* Geocode status */
        .geocode-status {
            display: none;
            align-items: center;
            gap: 0.4rem;
            padding: 0.5rem 0.75rem;
            border-radius: 0.75rem;
            font-size: 0.75rem;
            margin-bottom: 0.75rem;
        }
        .geocode-status.loading { display: flex; background: #eff6ff; color: #2563eb; }
        .geocode-status.success { display: flex; background: #f0fdf4; color: #16a34a; }
        .geocode-status.error   { display: flex; background: #fef2f2; color: #dc2626; }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center bg-gradient-to-br from-orange-50 via-white to-orange-50 hero-pattern relative overflow-hidden">

    <!-- DECORATIVE BACKGROUND SHAPES (SAMA SEPERTI HALAMAN LOGIN) -->
    <div class="floating-shape w-96 h-96 -top-48 -left-48 animate-pulse-slow"></div>
    <div class="floating-shape w-80 h-80 -bottom-40 -right-40 animate-pulse-slow" style="animation-delay: 1s;"></div>
    <div class="floating-shape w-64 h-64 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 animate-float"></div>

    <!-- FLOATING ORNAMENTS (SAMA SEPERTI HALAMAN LOGIN) -->
    <div class="absolute top-20 left-20 text-orange-200 animate-float">
        <i class="fas fa-shopping-cart text-6xl opacity-20"></i>
    </div>
    <div class="absolute bottom-20 right-20 text-orange-200 animate-float" style="animation-delay: 2s;">
        <i class="fas fa-box text-7xl opacity-20"></i>
    </div>
    <div class="absolute top-40 right-40 text-orange-200 animate-float" style="animation-delay: 1.5s;">
        <i class="fas fa-tag text-5xl opacity-20"></i>
    </div>
    <div class="absolute bottom-40 left-40 text-orange-200 animate-float" style="animation-delay: 0.5s;">
        <i class="fas fa-truck text-6xl opacity-20"></i>
    </div>

<div class="register-card">
    {{-- Header --}}
    <div class="card-header">
        <div class="flex items-center gap-3">
            <div class="futsal-icon"><i class="fa-solid fa-futbol"></i></div>
            <div>
                <h1 class="text-xl font-bold text-white tracking-tight">Daftar Akun</h1>
                <p class="text-xs text-white/80">Raja Futsal - Lapangan Futsal Terbaik</p>
            </div>
        </div>
    </div>

    {{-- Error --}}
    @if ($errors->any())
    <div class="error-alert">
        <div class="flex items-start gap-2">
            <i class="fa-regular fa-circle-exclamation text-red-500 mt-0.5 text-sm"></i>
            <ul class="text-xs text-red-700 list-disc list-inside">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    </div>
    @endif

    {{-- Form --}}
    <form method="POST" action="{{ route('register') }}" id="registerForm">
        @csrf

        <div class="form-container">
            <div class="form-grid">

                {{-- Nama --}}
                <div class="input-wrapper full-width">
                    <i class="fa-regular fa-user"></i>
                    <input type="text" name="name" class="input-field"
                        placeholder="Nama Lengkap" value="{{ old('name') }}" required>
                </div>

                {{-- Email --}}
                <div class="input-wrapper full-width">
                    <i class="fa-regular fa-envelope"></i>
                    <input type="email" id="email" name="email" class="input-field"
                        placeholder="Email" value="{{ old('email') }}" required>
                </div>

                {{-- No HP --}}
                <div class="input-wrapper full-width">
                    <i class="fa-solid fa-phone"></i>
                    <input type="text" name="no_hp" class="input-field"
                        placeholder="No HP" value="{{ old('no_hp') }}">
                </div>

                {{-- Region Section --}}
                <div id="regionSection" class="full-width"
                     data-old-province="{{ old('province_code') }}"
                     data-old-city="{{ old('city_code') }}"
                     data-old-district="{{ old('district_code') }}"
                     data-old-village="{{ old('village_code') }}">

                    {{-- Wilayah --}}
                    <div class="region-grid">
                        <div class="input-wrapper">
                            <i class="fa-solid fa-map-pin"></i>
                            <select name="province_code" id="province" class="input-field">
                                <option value="" disabled selected>Provinsi</option>
                                @foreach($provinces as $prov)
                                <option value="{{ $prov->code }}"
                                        data-name="{{ $prov->name }}"
                                        {{ old('province_code') == $prov->code ? 'selected' : '' }}>
                                    {{ $prov->name }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="input-wrapper">
                            <i class="fa-solid fa-city"></i>
                            <select name="city_code" id="city" class="input-field">
                                <option value="" disabled selected>Kota</option>
                            </select>
                        </div>
                        <div class="input-wrapper">
                            <i class="fa-solid fa-map"></i>
                            <select name="district_code" id="district" class="input-field">
                                <option value="" disabled selected>Kecamatan</option>
                            </select>
                        </div>
                        <div class="input-wrapper">
                            <i class="fa-solid fa-location-dot"></i>
                            <select name="village_code" id="village" class="input-field">
                                <option value="" disabled selected>Desa/Kelurahan</option>
                            </select>
                        </div>
                    </div>

                    {{-- Alamat & Kode Pos --}}
                    <div class="region-grid">
                        <div class="input-wrapper">
                            <i class="fa-regular fa-address-card"></i>
                            <textarea name="alamat_lengkap" rows="2" class="input-field"
                                placeholder="Alamat Lengkap">{{ old('alamat_lengkap') }}</textarea>
                        </div>
                        <div class="input-wrapper">
                            <i class="fa-regular fa-note-sticky"></i>
                            <input type="text" name="kode_pos" class="input-field"
                                placeholder="Kode Pos" value="{{ old('kode_pos') }}"
                                inputmode="numeric" pattern="[0-9]*"
                                oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                        </div>
                    </div>

                    {{-- Koordinat (readonly, otomatis dari geocoding) --}}
                    <div id="geocodeStatus" class="geocode-status"></div>

                    <div class="region-grid" style="margin-bottom:0.5rem;">
                        <div class="input-wrapper">
                            <i class="fa-solid fa-crosshairs"></i>
                            <input type="text" name="latitude" id="latitude"
                                   class="input-field" placeholder="Latitude (otomatis)"
                                   value="{{ old('latitude') }}" readonly>
                        </div>
                        <div class="input-wrapper">
                            <i class="fa-solid fa-crosshairs"></i>
                            <input type="text" name="longitude" id="longitude"
                                   class="input-field" placeholder="Longitude (otomatis)"
                                   value="{{ old('longitude') }}" readonly>
                        </div>
                    </div>

                    <p style="font-size:0.72rem; color:#94a3b8; text-align:center; margin-bottom:1rem;">
                        <i class="fa-solid fa-circle-info" style="color:#f97316;"></i>
                        Koordinat diisi otomatis saat memilih desa/kelurahan
                    </p>

                </div>{{-- end regionSection --}}

                {{-- Password --}}
                <div class="input-wrapper password-wrapper">
                    <i class="fa-solid fa-lock"></i>
                    <input type="password" id="password" name="password" class="input-field"
                        placeholder="Password" required>
                    <i class="fa-regular fa-eye toggle-password" onclick="togglePassword('password', this)"></i>
                </div>

                {{-- Konfirmasi Password --}}
                <div class="input-wrapper password-wrapper">
                    <i class="fa-solid fa-lock"></i>
                    <input type="password" id="password_confirmation" name="password_confirmation"
                        class="input-field" placeholder="Konfirmasi Password" required>
                    <i class="fa-regular fa-eye toggle-password" onclick="togglePassword('password_confirmation', this)"></i>
                </div>

                {{-- Role --}}
                <div class="role-container">
                    <label>Daftar Sebagai</label>
                    <select name="role" required>
                        <option value="user" {{ old('role') == 'user' ? 'selected' : '' }}>Pembeli</option>
                    </select>
                </div>

            </div>
        </div>

        <div class="password-hint">
            <i class="fa-regular fa-lightbulb"></i>
            <span>Minimal 8 karakter</span>
        </div>

        <div class="button-container">
            <a href="{{ route('login') }}" class="btn-secondary">Kembali</a>
            <button type="submit" class="btn-primary"><span>Daftar</span></button>
        </div>
    </form>

    <div class="login-link">
        <p>Sudah punya akun? <a href="{{ route('login') }}">Masuk</a></p>
    </div>
</div>

<script>
// ============================================================
// STATE NAMA WILAYAH UNTUK GEOCODING
// ============================================================
const wilayah = { province: '', city: '', district: '', village: '' };

// ============================================================
// TOGGLE PASSWORD
// ============================================================
function togglePassword(inputId, icon) {
    const input = document.getElementById(inputId);
    input.type = input.type === 'password' ? 'text' : 'password';
    icon.classList.toggle('fa-eye');
    icon.classList.toggle('fa-eye-slash');
}

// ============================================================
// GEOCODE OTOMATIS via Nominatim (OpenStreetMap)
// ============================================================
function geocode() {
    const parts = [
        wilayah.village,
        wilayah.district,
        wilayah.city,
        wilayah.province,
        'Indonesia'
    ].filter(Boolean);

    if (parts.length < 3) return; // tunggu minimal kecamatan + kota + provinsi

    const query = parts.join(', ');
    setGeoStatus('loading', '<i class="fa-solid fa-circle-notch fa-spin"></i> Mencari koordinat...');

    fetch(`https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(query)}&format=json&limit=1&countrycodes=id`, {
        headers: { 'Accept-Language': 'id,en' }
    })
    .then(r => r.json())
    .then(data => {
        if (data && data.length > 0) {
            setKoordinat(data[0].lat, data[0].lon);
            setGeoStatus('success', '<i class="fa-solid fa-check-circle"></i> Koordinat berhasil ditemukan');
        } else {
            // Fallback: coba kota + provinsi saja
            const fallback = [wilayah.city, wilayah.province, 'Indonesia'].filter(Boolean).join(', ');
            fetch(`https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(fallback)}&format=json&limit=1&countrycodes=id`)
                .then(r => r.json())
                .then(d => {
                    if (d && d.length > 0) {
                        setKoordinat(d[0].lat, d[0].lon);
                        setGeoStatus('success', '<i class="fa-solid fa-check-circle"></i> Koordinat perkiraan (' + wilayah.city + ')');
                    } else {
                        setGeoStatus('error', '<i class="fa-solid fa-triangle-exclamation"></i> Koordinat tidak ditemukan');
                    }
                });
        }
    })
    .catch(() => setGeoStatus('error', '<i class="fa-solid fa-triangle-exclamation"></i> Gagal koneksi ke layanan peta'));
}

function setKoordinat(lat, lng) {
    document.getElementById('latitude').value  = parseFloat(lat).toFixed(7);
    document.getElementById('longitude').value = parseFloat(lng).toFixed(7);
}

function clearKoordinat() {
    document.getElementById('latitude').value  = '';
    document.getElementById('longitude').value = '';
    document.getElementById('geocodeStatus').className = 'geocode-status';
}

function setGeoStatus(type, html) {
    const el = document.getElementById('geocodeStatus');
    el.className = 'geocode-status ' + type;
    el.innerHTML = html;
}

// ============================================================
// DOM READY
// ============================================================
document.addEventListener('DOMContentLoaded', function () {

    const provinceSelect = document.getElementById('province');
    const citySelect     = document.getElementById('city');
    const districtSelect = document.getElementById('district');
    const villageSelect  = document.getElementById('village');
    const emailInput     = document.getElementById('email');
    const regionSection  = document.getElementById('regionSection');
    const password       = document.getElementById('password');
    const confirmPassword = document.getElementById('password_confirmation');
    const form           = document.getElementById('registerForm');

    // ──────────────────────────────
    // Fetch helper
    // ──────────────────────────────
    async function fetchData(url, targetSelect, placeholder) {
        try {
            const res  = await fetch(url);
            const data = await res.json();
            let options = `<option value="" disabled selected>${placeholder}</option>`;
            data.forEach(item => {
                options += `<option value="${item.code}" data-name="${item.name}">${item.name}</option>`;
            });
            targetSelect.innerHTML = options;
        } catch (e) { console.error('Fetch error:', e); }
    }

    // ──────────────────────────────
    // Sembunyikan region jika email admin/penjual
    // ──────────────────────────────
    function checkEmail() {
        if (!emailInput || !regionSection) return;
        const em = emailInput.value.toLowerCase().trim();
        regionSection.style.display = (em === 'admin@gmail.com' || em === 'penjual@gmail.com') ? 'none' : 'block';
    }
    emailInput?.addEventListener('input', checkEmail);
    checkEmail();

    // ──────────────────────────────
    // Chain select + geocoding
    // ──────────────────────────────
    provinceSelect?.addEventListener('change', function () {
        if (!this.value) return;
        wilayah.province = this.options[this.selectedIndex].dataset.name || this.options[this.selectedIndex].text;
        wilayah.city = wilayah.district = wilayah.village = '';
        clearKoordinat();
        fetchData('/get-cities/' + this.value, citySelect, 'Kota');
        districtSelect.innerHTML = '<option value="" disabled selected>Kecamatan</option>';
        villageSelect.innerHTML  = '<option value="" disabled selected>Desa/Kelurahan</option>';
    });

    citySelect?.addEventListener('change', function () {
        if (!this.value) return;
        wilayah.city = this.options[this.selectedIndex].dataset.name || this.options[this.selectedIndex].text;
        wilayah.district = wilayah.village = '';
        clearKoordinat();
        fetchData('/get-districts/' + this.value, districtSelect, 'Kecamatan');
        villageSelect.innerHTML = '<option value="" disabled selected>Desa/Kelurahan</option>';
    });

    districtSelect?.addEventListener('change', function () {
        if (!this.value) return;
        wilayah.district = this.options[this.selectedIndex].dataset.name || this.options[this.selectedIndex].text;
        wilayah.village = '';
        clearKoordinat();
        fetchData('/get-villages/' + this.value, villageSelect, 'Desa/Kelurahan');
        // Geocode sudah dari kecamatan ke atas
        geocode();
    });

    villageSelect?.addEventListener('change', function () {
        if (!this.value) return;
        wilayah.village = this.options[this.selectedIndex].dataset.name || this.options[this.selectedIndex].text;
        // Geocode dengan semua data wilayah (paling akurat)
        geocode();
    });

    // ──────────────────────────────
    // Password validation
    // ──────────────────────────────
    form?.addEventListener('submit', function (e) {
        if (password && confirmPassword && password.value !== confirmPassword.value) {
            e.preventDefault();
            const msg = document.createElement('div');
            msg.className = 'fixed top-4 right-4 bg-red-500 text-white px-4 py-2 rounded-lg shadow-lg z-50 text-sm flex items-center gap-2';
            msg.innerHTML = '<i class="fa-solid fa-circle-exclamation"></i>Password tidak cocok!';
            document.body.appendChild(msg);
            password.style.borderColor = confirmPassword.style.borderColor = '#ef4444';
            setTimeout(() => {
                msg.remove();
                password.style.borderColor = confirmPassword.style.borderColor = '';
            }, 2500);
        }
    });

    // ──────────────────────────────
    // Restore old values (Laravel validation fail)
    // ──────────────────────────────
    const rs = document.getElementById('regionSection');
    const oldProvince = rs?.dataset.oldProvince;
    const oldCity     = rs?.dataset.oldCity;
    const oldDistrict = rs?.dataset.oldDistrict;
    const oldVillage  = rs?.dataset.oldVillage;

    if (oldProvince) {
        setTimeout(() => {
            provinceSelect.value = oldProvince;
            provinceSelect.dispatchEvent(new Event('change'));
            setTimeout(() => {
                citySelect.value = oldCity;
                citySelect.dispatchEvent(new Event('change'));
                setTimeout(() => {
                    districtSelect.value = oldDistrict;
                    districtSelect.dispatchEvent(new Event('change'));
                    setTimeout(() => {
                        villageSelect.value = oldVillage;
                        villageSelect.dispatchEvent(new Event('change'));
                    }, 400);
                }, 400);
            }, 400);
        }, 200);
    }

}); // end DOMContentLoaded
</script>
</body>
</html>