@props([
    'country' => 'India',
    'state' => '',
    'countryName' => 'country',
    'stateName' => 'state',
    'inputClass' => 'block w-full rounded-xl border border-gray-200 px-3.5 py-2.5 text-sm placeholder-gray-400 focus:border-orange-500 focus:outline-none focus:ring-1 focus:ring-orange-500 bg-white',
    'labelClass' => 'block text-xs font-semibold text-gray-600 mb-1.5',
    'inputStyle' => null,
    'labelStyle' => null,
    // Raw Alpine JS expressions (e.g. "branch.country") for forms that seed
    // values from a client-side object rather than a server-rendered PHP
    // value. When given, these take precedence over $country / $state.
    'countryExpr' => null,
    'stateExpr' => null,
])

{{-- Country + State pair. Country drives the state field: India gets a full
     state/UT dropdown, any other country falls back to free-text (no state
     list is maintained for non-Indian countries). "contents" keeps this
     wrapper from breaking the caller's grid layout. --}}
<div class="contents" x-data="{
        selectedCountry: {{ $countryExpr ?? \Illuminate\Support\Js::from($country ?: 'India') }},
        selectedState: {{ $stateExpr ?? \Illuminate\Support\Js::from($state ?: '') }},
    }">
    <div>
        <label @if($labelStyle) style="{{ $labelStyle }}" @else class="{{ $labelClass }}" @endif>Country</label>
        <select name="{{ $countryName }}" x-model="selectedCountry"
                @if($inputStyle) style="{{ $inputStyle }}" @else class="{{ $inputClass }}" @endif>
            @foreach(config('countries.list') as $c)
                <option value="{{ $c }}">{{ $c }}</option>
            @endforeach
        </select>
    </div>
    <div>
        <label @if($labelStyle) style="{{ $labelStyle }}" @else class="{{ $labelClass }}" @endif>State</label>
        <select name="{{ $stateName }}" x-model="selectedState" x-show="selectedCountry === 'India'" :disabled="selectedCountry !== 'India'"
                @if($inputStyle) style="{{ $inputStyle }}" @else class="{{ $inputClass }}" @endif>
            <option value="">Select state</option>
            @foreach(config('countries.india_states') as $s)
                <option value="{{ $s }}">{{ $s }}</option>
            @endforeach
        </select>
        <input type="text" name="{{ $stateName }}" x-model="selectedState" placeholder="State / Province"
               x-show="selectedCountry !== 'India'" :disabled="selectedCountry === 'India'"
               @if($inputStyle) style="{{ $inputStyle }}" @else class="{{ $inputClass }}" @endif>
    </div>
</div>