@extends('layouts.admin')

@section('title', 'Create City - Admin Panel')
@section('page-title', 'Create City')

@section('content')
    <div class="pt-[14px] pb-8">
        <div class="mb-6">
            <a href="{{ route('admin.cities.index') }}" class="text-[#717182] hover:text-[#FF8FA3] flex items-center gap-2">
                <i class="ri-arrow-left-line"></i>
                <span>Back to Cities</span>
            </a>
        </div>

        <h2 class="text-[#0A0A0A] text-[24px] font-medium font-['poppins'] mb-2">Create New City</h2>
        <p class="text-[#717182] font-['poppins'] mb-6">Add a new city to the system</p>

        @if($errors->any())
            <div class="mb-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-xl">
                <ul class="list-disc space-y-1 pl-5">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="bg-white rounded-xl shadow-sm border border-[#0000001A] p-6 md:p-8">
            <form method="POST" action="{{ route('admin.cities.store') }}" class="space-y-6">
                @csrf

                <div>
                    <label for="country_id" class="block text-sm font-medium text-gray-700 mb-2">
                        Country <span class="text-red-500">*</span>
                    </label>
                    <select
                        id="country_id"
                        name="country_id"
                        class="w-full px-4 py-2 border border-[#0000001A] rounded-xl focus:outline-none focus:ring-2 focus:ring-[#FF8FA3]"
                    >
                        <option value="">Select Country</option>
                        @foreach($countries as $country)
                            <option value="{{ $country->id }}">{{ $country->name }}</option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-gray-500">Select country to filter states</p>
                </div>

                <div>
                    <label for="state_id" class="block text-sm font-medium text-gray-700 mb-2">
                        State/Province <span class="text-red-500">*</span>
                    </label>
                    <select
                        id="state_id"
                        name="state_id"
                        required
                        class="w-full px-4 py-2 border border-[#0000001A] rounded-xl focus:outline-none focus:ring-2 focus:ring-[#FF8FA3]"
                    >
                        <option value="">Select State</option>
                        @foreach($states as $state)
                            <option value="{{ $state->id }}" {{ old('state_id', $stateId ?? request('state_id')) == $state->id ? 'selected' : '' }}>{{ $state->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-2">
                        City Name <span class="text-red-500">*</span>
                    </label>
                    <input
                        type="text"
                        id="name"
                        name="name"
                        value="{{ old('name') }}"
                        required
                        class="w-full px-4 py-2 border border-[#0000001A] rounded-xl focus:outline-none focus:ring-2 focus:ring-[#FF8FA3]"
                        placeholder="e.g., Los Angeles"
                    >
                </div>

                <div class="flex items-center">
                    <input
                        type="checkbox"
                        id="is_active"
                        name="is_active"
                        value="1"
                        {{ old('is_active', true) ? 'checked' : '' }}
                        class="w-4 h-4 text-[#FF8FA3] border-gray-300 rounded focus:ring-[#FF8FA3]"
                    >
                    <label for="is_active" class="ml-2 text-sm font-medium text-gray-700">
                        Active (City will be available for selection)
                    </label>
                </div>

                <div class="flex gap-4 pt-4">
                    <button type="submit" class="px-6 py-2.5 bg-[#FF8FA3] text-white rounded-xl hover:bg-[#FF6F61] transition font-semibold">
                        Create City
                    </button>
                    <a href="{{ route('admin.cities.index') }}" class="px-6 py-2.5 bg-gray-200 text-gray-700 rounded-xl hover:bg-gray-300 transition font-semibold">
                        Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>

    <script>
        // Update states dropdown when country changes
        document.getElementById('country_id')?.addEventListener('change', function() {
            const countryId = this.value;
            const stateSelect = document.getElementById('state_id');
            
            if (countryId) {
                // Fetch states for selected country
                fetch(`/admin/states-by-country/${countryId}`)
                    .then(response => response.json())
                    .then(states => {
                        stateSelect.innerHTML = '<option value="">Select State</option>';
                        states.forEach(state => {
                            stateSelect.innerHTML += `<option value="${state.id}">${state.name}</option>`;
                        });
                    })
                    .catch(error => console.error('Error:', error));
            } else {
                stateSelect.innerHTML = '<option value="">Select State</option>';
            }
        });
    </script>
@endsection