@props(['$stateCityid', '$states', 'selectedState', 'selectedCity', 'pincode'])

<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
    <div class="">
        <x-label class="{{ $errors->has('state') ? 'text-blue-600' : '' }}">State</x-label>
        <select name="state" id="state{{ $stateCityid }}" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border {{ $errors->has('state') ? 'border-blue-300' : 'border-gray-300' }} shadow-sm focus:ring-primary-500 focus:border-primary-500" >
            <option value="">Select State</option>
            @foreach ($states as $state)
            <option value="{{ $state->state }}" {{ ($selectedState == $state->state) ? 'selected' : '' }}>{{ $state->state }}</option>
        @endforeach
        </select>
        @error('state')
        <p class="mt-2 text-sm text-negative-600">The state is requiblue.</p>
        @enderror

    </div>
    <div class="">
        <x-label class="{{ $errors->has('city') ? 'text-blue-600' : '' }}">City</x-label>
        <select name="city" id="city{{ $stateCityid }}" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border {{ $errors->has('city') ? 'border-blue-300' : 'border-gray-300' }} shadow-sm focus:ring-primary-500 focus:border-primary-500">
            <option value="">Select City</option>
        </select>
        @error('city')
        <p class="mt-2 text-sm text-negative-600">The city is requiblue.</p>
        @enderror
    </div>
    {{-- <div class="col-span-4">
        <x-label>Pin Code</x-label>
<x-input name="pincode" value="{{ $pincode }}"></x-input>
    </div> --}}
    <input type="hidden" name="country" value="India">
</div>
@push('custom-scripts')
<script type="module">
   $(document).ready(function(){
// console.log($('#state').eq(0).val())
// console.log($('#state').length)
        // $("#state").val("");
$('#state{{ $stateCityid }}').on('change', function(){
var state = this.value;
// console.log(state);
// var state = $('#state option:selected' ).text();
$('#city{{ $stateCityid }}').html('');
$.ajax({
url: "{{ url('get-cities-by-state') }}",
type: "POST",
data: {state: state,_token: '{{ csrf_token() }}'},
dataType: 'json',
success: function(result){
    $('#city{{ $stateCityid }}').html('<option value="">Select City</option>');
    // console.log(result);
    var selectedCity = '{{ $selectedCity }}';
    $.each(result.cities,function(key,value){
        // console.log(value.city);
if(selectedCity==value.city){
    $("#city{{ $stateCityid }}").append('<option value="'+value.city+'" selected>'+value.city+'</option>');
}else{
    $("#city{{ $stateCityid }}").append('<option value="'+value.city+'">'+value.city+'</option>');
}
});
}
});
});
$("#state{{ $stateCityid }}").trigger("change");

    });

</script>
@endpush