@extends('layouts.app') {{-- Use your main layout file --}}

@section('title', 'Add New Address')

@section('content')
    {{-- Back Navigation & Title --}}
    <div class="mb-6">
        <a href="{{ route('admin.addresses.index') }}" {{-- Assuming admin prefix --}}
            class="text-sm text-indigo-600 hover:text-indigo-800 hover:underline">
            &larr; Back to Addresses
        </a>
        <h1 class="text-2xl md:text-3xl font-semibold text-gray-800 mt-2">
            Add New Shipping Address
        </h1>
    </div>

    {{-- Form Container --}}
    <div class="max-w-xl mx-auto bg-white shadow-md rounded-lg p-6 md:p-8 border border-gray-200">

        {{-- Form points to addresses.store route --}}
        <form method="POST" action="{{ route('admin.addresses.store') }}" {{-- Assuming admin prefix --}} class="space-y-6">
            @csrf {{-- CSRF Protection --}}

            {{-- Nickname (Optional) --}}
            <div>
                <label for="nickname" class="block text-sm font-medium text-gray-700 mb-1">
                    Address Nickname (Optional)
                </label>
                <input type="text" name="nickname" id="nickname" value="{{ old('nickname') }}"
                    placeholder="e.g., Home, Work Office"
                    class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400
                              focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm
                              @error('nickname') border-red-500 ring-1 ring-red-500 @enderror">
                @error('nickname')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </div>

            {{-- Address Line 1 --}}
            <div>
                <label for="address_line_1" class="block text-sm font-medium text-gray-700 mb-1">
                    Address Line 1 <span class="text-red-500">*</span>
                </label>
                <input type="text" name="address_line_1" id="address_line_1" value="{{ old('address_line_1') }}" required
                    autocomplete="address-line1"
                    class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400
                              focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm
                              @error('address_line_1') border-red-500 ring-1 ring-red-500 @enderror">
                @error('address_line_1')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </div>

            {{-- Address Line 2 --}}
            <div>
                <label for="address_line_2" class="block text-sm font-medium text-gray-700 mb-1">
                    Address Line 2 (Optional)
                </label>
                <input type="text" name="address_line_2" id="address_line_2" value="{{ old('address_line_2') }}"
                    autocomplete="address-line2" placeholder="Apartment, suite, unit, building, floor, etc."
                    class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400
                              focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm
                              @error('address_line_2') border-red-500 ring-1 ring-red-500 @enderror">
                @error('address_line_2')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </div>

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

            {{-- State & Zip Code (Inline) --}}
            <div class="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-6">
                <div class="sm:col-span-3">
                    <label for="state" class="block text-sm font-medium text-gray-700 mb-1">
                        State <span class="text-red-500">*</span>
                    </label>
                    {{-- Consider using a <select> dropdown for states --}}
                    <input type="text" name="state" id="state" value="{{ old('state') }}" required
                        autocomplete="address-level1" placeholder="e.g., CA, NY"
                        class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400
                                  focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm
                                  @error('state') border-red-500 ring-1 ring-red-500 @enderror">
                    @error('state')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div class="sm:col-span-3">
                    <label for="zip_code" class="block text-sm font-medium text-gray-700 mb-1">
                        ZIP / Postal Code <span class="text-red-500">*</span>
                    </label>
                    <input type="text" name="zip_code" id="zip_code" value="{{ old('zip_code') }}" required
                        autocomplete="postal-code"
                        class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400
                                  focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm
                                  @error('zip_code') border-red-500 ring-1 ring-red-500 @enderror">
                    @error('zip_code')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            {{-- Country (Hidden - Defaulting to US) --}}
            {{-- You could make this a dropdown if needed --}}
            <input type="hidden" name="country" value="US">

            {{-- Set as Default Checkbox --}}
            <div class="pt-4 border-t border-gray-200">
                <div class="relative flex items-start">
                    <div class="flex h-6 items-center">
                        <input id="is_default" name="is_default" type="checkbox" value="1" @checked(old('is_default'))
                            class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                    </div>
                    <div class="ml-3 text-sm leading-6">
                        <label for="is_default" class="font-medium text-gray-900">Set as default address</label>
                        <p class="text-gray-500">Make this the primary shipping address for future use.</p>
                    </div>
                </div>
                @error('is_default')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </div>


            {{-- Submit Button --}}
            <div class="flex justify-end pt-4">
                <button type="submit"
                    class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out">
                    Add Address
                </button>
            </div>
        </form>
    </div> {{-- End Form Container --}}

@endsection