{{--
    City (district) + Zone (thana/upazila) dropdown. Shudhu duita <select> dey; label/wrapper page nije banay.
    Params: cityId, zoneId, class? (select er class), city? / zone? (selected), required? (default true),
            part? ('city' | 'zone': shudhu ekta select, alada box e boshate; default duitai)
    City bodlale zone list bodlay. Form e name="area" radio thakle Dhaka shohor -> "inside", baki -> "outside" auto select.
--}}
@php
    $locs = \App\Support\BdLocations::all();
    $selCity = $city ?? '';
    $selZone = $zone ?? '';
@endphp
@if (($part ?? 'both') !== 'zone')
<select id="{{ $cityId }}" name="city" class="{{ $class ?? '' }}" data-bd-city="{{ $zoneId }}" @if ($required ?? true) required @endif>
    <option value="">— জেলা / City সিলেক্ট করুন —</option>
    @foreach ($locs as $name => $c)
        <option value="{{ $name }}" @selected($selCity === $name)>{{ $name }} ({{ $c['bn'] }})</option>
    @endforeach
</select>
@endif
@if (($part ?? 'both') !== 'city')
<select id="{{ $zoneId }}" name="zone" class="{{ $class ?? '' }}" data-bd-zone data-selected="{{ $selZone }}" @if ($required ?? true) required @endif>
    <option value="">— আগে জেলা সিলেক্ট করুন —</option>
</select>
@endif

@once
    @push('scripts')
    <script>
        (function () {
            var LOCS = @json($locs);
            // Dhaka district er ei upazila gula shohorer baire (outside charge)
            var DHAKA_OUTER = ['Dhamrai', 'Dohar', 'Keraniganj', 'Nawabganj', 'Savar'];

            function fill(zone, city, selected) {
                var zones = (LOCS[city] || {}).zones || {};
                var html = '<option value="">' + (city ? '— জোন / থানা সিলেক্ট করুন —' : '— আগে জেলা সিলেক্ট করুন —') + '</option>';
                Object.keys(zones).forEach(function (z) {
                    var o = document.createElement('option');
                    o.value = z; o.textContent = z + ' (' + zones[z] + ')';
                    if (z === selected) o.setAttribute('selected', '');   // attribute (property outerHTML e jay na)
                    html += o.outerHTML;
                });
                zone.innerHTML = html;
            }

            function syncArea(form, city, zone) {
                if (!form || !city) return;
                var want = city === 'Dhaka' && (!zone || DHAKA_OUTER.indexOf(zone) === -1) ? 'inside' : 'outside';
                var radio = form.querySelector('input[name=area][value=' + want + ']');
                var select = form.querySelector('select[name=area]');
                if (radio && !radio.checked) { radio.checked = true; radio.dispatchEvent(new Event('change', { bubbles: true })); }
                if (select && select.value !== want) { select.value = want; select.dispatchEvent(new Event('change', { bubbles: true })); }
            }

            document.querySelectorAll('[data-bd-city]').forEach(function (city) {
                var zone = document.getElementById(city.dataset.bdCity);
                fill(zone, city.value, zone.dataset.selected);
                city.addEventListener('change', function () { fill(zone, city.value, ''); syncArea(city.form, city.value, ''); });
                zone.addEventListener('change', function () { syncArea(city.form, city.value, zone.value); });
            });
        })();
    </script>
    @endpush
@endonce