@extends('account.layout')

@section('account_content')
<div class="space-y-8">
    <div>
        <h2 class="text-2xl font-bold text-gray-900">Address Book</h2>
        <p class="mt-2 text-base text-gray-500">Manage your shipping addresses</p>
    </div>
    <hr class="border-t border-gray-200">
    <form action="{{ route('account.address.update') }}" method="POST" class="space-y-8">
        @csrf
        <div class="grid grid-cols-1 gap-y-6 gap-x-8 sm:grid-cols-6">
            <div class="sm:col-span-6">
                <label for="street_address" class="block text-base font-medium text-gray-700">Street Address</label>
                <div class="mt-2">
                    <input type="text" name="street_address" id="street_address" value="{{ $address->street_address ?? '' }}" class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-yellow-500 focus:border-yellow-500">
                </div>
                @error('street_address')
                    <p class="mt-2 text-base text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div class="sm:col-span-2">
                <label for="city" class="block text-base font-medium text-gray-700">City</label>
                <div class="mt-2">
                    <input type="text" name="city" id="city" value="{{ $address->city ?? '' }}" class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-yellow-500 focus:border-yellow-500">
                </div>
                @error('city')
                    <p class="mt-2 text-base text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div class="sm:col-span-2">
                <label for="state" class="block text-base font-medium text-gray-700">State</label>
                <div class="mt-2">
                    <select name="state" id="state" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-yellow-500 focus:border-yellow-500">
                        <option value="">Select State</option>
                        @foreach(\App\Enums\IndianState::cases() as $state)
                            <option value="{{ $state->value }}" {{ old('state', $address->state ?? '') === $state->value ? 'selected' : '' }}>{{ $state->value }}</option>
                        @endforeach
                    </select>
                </div>
                @error('state')
                    <p class="mt-2 text-base text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div class="sm:col-span-2">
                <label for="postal_code" class="block text-base font-medium text-gray-700">ZIP / Postal code</label>
                <div class="mt-2">
                    <input type="text" name="postal_code" id="postal_code" value="{{ $address->postal_code ?? '' }}" class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-yellow-500 focus:border-yellow-500">
                </div>
                @error('postal_code')
                    <p class="mt-2 text-base text-red-600">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <div class="pt-6">
            <div class="flex justify-end">
                <button type="submit" class="px-6 py-3 font-medium bg-red-700 text-white rounded-lg hover:bg-red-800 transition-colors duration-300">
                    Save Address
                </button>
            </div>
        </div>
    </form>
</div>
@endsection