@extends('admin.layout.master')
@section('content')
@section('city', 'active')
@section('title', 'Edit City')

<div class="page-wrapper">
    <div class="page-content">
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Edit City</h5>
                        <hr/>
                        <form action="{{ route('admin.update.city') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="id" value="{{ $city->id ?? '' }}">

                            <!-- State Dropdown -->
                            <div class="mb-3 row">
                                <label for="state" class="col-sm-3 col-form-label">State:</label>
                                <div class="col-sm-9">
                                    <select name="state_id" id="state" class="form-control">
                                        <option value="">Select State</option>
                                        @foreach($states as $state)
                                            <option value="{{ $state->id }}" 
                                                {{ (!empty($city) && $city->state_id == $state->id) ? 'selected' : '' }}>
                                                {{ $state->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('state_id')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <!-- City Dropdown -->
                            <div class="mb-3 row">
                                <label for="city" class="col-sm-3 col-form-label">City:</label>
                                <div class="col-sm-9">
                                    <input type="text" name="name" id="name" class="form-control" value="{{ $city->name }}">

                                    @error('name')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <!-- City Icon -->
                            <div class="mb-3 row">
                                <label for="adicon" class="col-sm-3 col-form-label">City Icon:</label>
                                <div class="col-sm-9">
                                    <input type="file" name="icon" id="adicon" class="form-control">
                                    @error('icon')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                    
                                </div>
                            </div>

                            <div class="mb-3 row">
                                <div class="col-sm-9 offset-sm-3">
                                    <button type="submit" class="btn btn-primary" style="float: right">Update</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- jQuery AJAX Script -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function(){
        $('#state').change(function(){
            var stateId = $(this).val();
            $('#city').html('<option value="">Loading...</option>');

            if(stateId) {
                $.ajax({
                    url: "{{ route('admin.get.cities') }}",
                    type: "GET",
                    data: { state_id: stateId },
                    success: function(response) {
                        $('#city').html('<option value="">Select City</option>');
                        $.each(response.cities, function(key, city){
                            $('#city').append('<option value="'+ city.id +'">'+ city.name +'</option>');
                        });
                    }
                });
            } else {
                $('#city').html('<option value="">Select City</option>');
            }
        });
    });
</script>

@endsection