@extends('layouts.dashboard')

@section('title', 'Edit City')
@section('header-title', 'Edit City')

@section('content')
<div class="mt-8">
    <div class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
        @if(session('success'))
        <div class="mb-6 rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800">
            {{ session('success') }}
        </div>
        @endif

        <div class="rounded-xl bg-white p-6 shadow-sm border border-gray-100">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-lg font-semibold text-gray-900">Update City</h2>
                    <p class="mt-1 text-sm text-gray-500">Edit city details below.</p>
                </div>
                <a href="{{ route('cities.index') }}" class="rounded-md bg-gray-100 px-3 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-200">Back to Cities</a>
            </div>

            <form action="{{ route('cities.update', $city) }}" method="POST" class="mt-6 space-y-4">
                @csrf
                @method('PUT')

                <div>
                    <label for="district_id" class="block text-sm font-medium text-gray-700">District</label>
                    <select id="district_id" name="district_id" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-[#CF2030] focus:ring-[#CF2030]">
                        <option value="">Select district</option>
                        @foreach($districts as $district)
                        <option value="{{ $district->id }}" {{ old('district_id', $city->district_id) == $district->id ? 'selected' : '' }}>{{ $district->name }} ({{ $district->state->name ?? 'No state' }})</option>
                        @endforeach
                    </select>
                    @error('district_id')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                </div>

                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700">City Name</label>
                    <input type="text" name="name" id="name" value="{{ old('name', $city->name) }}" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-[#CF2030] focus:ring-[#CF2030]">
                    @error('name')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                </div>

                <div class="flex items-center gap-3">
                    <input id="status" name="status" type="checkbox" value="1" {{ old('status', $city->status) ? 'checked' : '' }} class="h-4 w-4 rounded border-gray-300 text-[#CF2030] focus:ring-[#CF2030]">
                    <label for="status" class="text-sm text-gray-700">Active</label>
                </div>

                <div class="flex flex-col gap-3 sm:flex-row sm:justify-between">
                    <button type="submit" class="inline-flex justify-center rounded-lg bg-[#CF2030] px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-[#a81a27] focus:outline-none">Update City</button>
                    <form action="{{ route('cities.destroy', $city) }}" method="POST" onsubmit="return confirm('Delete this city?');" class="inline-flex">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="rounded-lg bg-gray-100 px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-200">Delete City</button>
                    </form>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection