@extends('layouts.app')

@section('title', __('addresses.add_new'))

@section('content')
    <div class="mb-6">
        <a href="{{ route('admin.addresses.index') }}"
            class="text-sm text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 hover:underline">
            &larr; {{ __('addresses.back_to_addresses') }}
        </a>
        <h1 class="text-2xl md:text-3xl font-semibold text-gray-800 dark:text-gray-200 mt-2">
            {{ __('addresses.add_new') }}
        </h1>
    </div>

    <div
        class="max-w-xl mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 md:p-8 border border-gray-200 dark:border-gray-700">
        <form method="POST" action="{{ route('admin.addresses.store') }}" class="space-y-6">
            @csrf
            <div>
                <label for="nickname" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    {{ __('addresses.address_nickname') }} ({{ __('addresses.optional') }})
                </label>
                <input type="text" name="nickname" id="nickname" value="{{ old('nickname') }}"
                    placeholder="{{ __('addresses.address_nickname_placeholder') }}"
                    class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200 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>

            <div class="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-6">
                <div class="sm:col-span-3">
                    <label for="first_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        {{ __('addresses.first_name') }} <span
                            class="text-red-500">{{ __('addresses.required_field') }}</span>
                    </label>
                    <input type="text" name="first_name" id="first_name" value="{{ old('first_name') }}" required
                        autocomplete="given-name"
                        class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('first_name') border-red-500 ring-1 ring-red-500 @enderror">
                    @error('first_name')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div class="sm:col-span-3">
                    <label for="last_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        {{ __('addresses.last_name') }} <span
                            class="text-red-500">{{ __('addresses.required_field') }}</span>
                    </label>
                    <input type="text" name="last_name" id="last_name" value="{{ old('last_name') }}" required
                        autocomplete="family-name"
                        class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('last_name') border-red-500 ring-1 ring-red-500 @enderror">
                    @error('last_name')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- NEW: Company Field -->
            <div>
                <label for="company" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Company/Organization ({{ __('addresses.optional') }})
                </label>
                <input type="text" name="company" id="company" value="{{ old('company') }}"
                    placeholder="Enter company or organization name" autocomplete="organization"
                    class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('company') border-red-500 ring-1 ring-red-500 @enderror">
                @error('company')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="address_line_1" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    {{ __('addresses.address_line_1') }} <span
                        class="text-red-500">{{ __('addresses.required_field') }}</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 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200 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>

            <div>
                <label for="address_line_2" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    {{ __('addresses.address_line_2') }} ({{ __('addresses.optional') }})
                </label>
                <input type="text" name="address_line_2" id="address_line_2" value="{{ old('address_line_2') }}"
                    autocomplete="address-line2" placeholder="{{ __('addresses.address_line_2_placeholder') }}"
                    class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200 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>

            <div>
                <label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    {{ __('addresses.city') }} <span class="text-red-500">{{ __('addresses.required_field') }}</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 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200 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>

            <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 dark:text-gray-300 mb-1">
                        {{ __('addresses.state') }} <span class="text-red-500">{{ __('addresses.required_field') }}</span>
                    </label>
                    <input type="text" name="state" id="state" value="{{ old('state') }}" required
                        autocomplete="address-level1" placeholder="{{ __('addresses.state_placeholder') }}"
                        class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200 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 dark:text-gray-300 mb-1">
                        {{ __('addresses.zip_code') }} <span
                            class="text-red-500">{{ __('addresses.required_field') }}</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 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200 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>

            <input type="hidden" name="country" value="US">

            <div class="pt-4 border-t border-gray-200 dark:border-gray-700">
                <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 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500 bg-gray-100 dark:bg-gray-900 dark:ring-offset-gray-800">
                    </div>
                    <div class="ml-3 text-sm leading-6">
                        <label for="is_default"
                            class="font-medium text-gray-900 dark:text-gray-100">{{ __('addresses.set_as_default') }}</label>
                        <p class="text-gray-500 dark:text-gray-400">{{ __('addresses.set_as_default_desc') }}</p>
                    </div>
                </div>
                @error('is_default')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <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">
                    {{ __('addresses.add_address_button') }}
                </button>
            </div>
        </form>
    </div>
@endsection