{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: province-city.blade.php
------------------------------------------------------
Use: A cascading province/city picker. The city list is
     filtered by the chosen province, from the local Iran
     divisions dataset -- no external service.
=====================================================
--}}

@props([
    'provinceName' => 'province',
    'cityName' => 'city',
    'province' => '',
    'city' => '',
    'accent' => 'primary',   // 'primary' | 'secondary'
    'required' => false,
])

@php
    $focus = $accent === 'secondary' ? 'focus:border-secondary-500' : 'focus:border-primary-600';
    $selectClass = 'w-full appearance-none rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-3 text-sm outline-none transition focus:bg-white '.$focus;
@endphp

<div x-data="provinceCity({ map: @js(\App\Support\IranDivisions::all()), province: @js(old($provinceName, $province)), city: @js(old($cityName, $city)) })"
     class="grid grid-cols-1 gap-4 sm:grid-cols-2">
    <div>
        <label class="mb-1.5 block text-[13px] font-bold">{{ __('front.address.province') }}@if ($required)<span class="text-secondary-500"> *</span>@endif</label>
        <div class="relative">
            <select name="{{ $provinceName }}" x-model="province" x-on:change="onProvince()" @required($required) class="{{ $selectClass }}">
                <option value="">{{ __('front.address.choose_province') }}</option>
                <template x-for="p in provinces" :key="p"><option :value="p" x-text="p" :selected="p === province"></option></template>
            </select>
            <svg class="pointer-events-none absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-ink-faint" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
        </div>
    </div>
    <div>
        <label class="mb-1.5 block text-[13px] font-bold">{{ __('front.address.city') }}@if ($required)<span class="text-secondary-500"> *</span>@endif</label>
        <div class="relative">
            <select name="{{ $cityName }}" x-model="city" x-bind:disabled="cities.length === 0" @required($required) class="{{ $selectClass }} disabled:cursor-not-allowed disabled:opacity-60">
                <option value="">{{ __('front.address.choose_city') }}</option>
                <template x-for="c in cities" :key="c"><option :value="c" x-text="c" :selected="c === city"></option></template>
            </select>
            <svg class="pointer-events-none absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-ink-faint" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
        </div>
    </div>
</div>