<x-app-layout>
    <x-slot name="header">
        <h1 class="mb-0 uppercase text-3xl ">
            {{ $action }}
        </h1>
    </x-slot>
    @if(session()->has('message'))
    <div class="alert alert-success">
        {{ session()->get('message') }}
    </div>
    @endif

    <div class="grid grid-cols-1">
        <div class="card">
            <div class="card-header flex justify-between">
                <h3 class="card-title uppercase ">
                    <i class="fas fa-plus"></i>
                    {{ $action }}
                </h3>
                <a href="{{ route('customers.index') }}" class="btn btn-primary w-max uppercase">Back to list</a>
            </div>

            @if(session()->has('message'))
            <div class="alert alert-success">
                {{ session()->get('message') }}
            </div>
            @endif

            <div class="card-body">

                <div class="shadow-sm overflow-hidden mb-8  ">
                    @if($address)
                    <form action="{{ route('address.update', [$customer->id, $address['id']]) }}" method="POST">
                        <input value="{{$address['id']}}" type="hidden" name="address_id" />
                        @method('PUT')
                        @else
                        <form action="{{ route('address.store', $customer->id) }}" method="POST">
                            @endif
                            @csrf
                            <input value="{{$customer['id']}}" type="hidden" name="customer_id" />
                            <div class="p-5">
                                <div class="grid grid-cols-1 mb-4">
                                    <label class="block form-label">
                                        <span class="after:content-['*'] after:ml-0.5 after:text-red-500 block">Name</span>
                                        <textarea name="address" id="address" class="form-input mt-1 px-3 py-2 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1">{{$address['address']??old('address')}}</textarea>
                                        @error('address')
                                        <div class="alert alert-danger mt-3 text-red-900">{{ $message }}</div>
                                        @enderror
                                    </label>
                                </div>
                                <div class="grid grid-cols-3 gap-4">
                                    <label class="block form-label">
                                        <span class="after:content-['*'] after:ml-0.5 after:text-red-500 block">City</span>
                                        <input value="{{$address['city']??old('city')}}" type="text" name="city" class="form-input mt-1 px-3 py-2 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="Please enter city" />
                                        @error('city')
                                        <div class="alert alert-danger mt-3 text-red-900">{{ $message }}</div>
                                        @enderror
                                    </label>
                                    <label class="block form-label">
                                        <span class="after:content-['*'] after:ml-0.5 after:text-red-500 block">State</span>
                                        <input value="{{$address['state']??old('state')}}" type="text" name="state" class="form-input mt-1 px-3 py-2 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="Please enter state" />
                                        @error('email')
                                        <div class="alert alert-danger mt-3 text-red-900">{{ $message }}</div>
                                        @enderror
                                    </label>
                                    <label class="block form-label">
                                        <span class="after:content-['*'] after:ml-0.5 after:text-red-500 block">ZIP</span>
                                        <input value="{{$address['zip']??old('zip')}}" type="text" name="zip" class="form-input mt-1 px-3 py-2 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="Please enter ZIP Code." />
                                        @error('zip')
                                        <div class="alert alert-danger mt-3 text-red-900">{{ $message }}</div>
                                        @enderror
                                    </label>
                                </div>
                                <div class="mt-10">
                                    <input type="submit" value="Save" class="btn-primary inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">
                                    <a href="{{ route('customers.show', $customer->id) }}" class="ml-5 inline-flex items-center px-4 py-2 bg-red-800 dark:bg-red-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-red-800 uppercase tracking-widest hover:bg-red-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-red-800 transition ease-in-out duration-150">Cancel</a>
                                </div>
                            </div>
                        </form>

                </div>
            </div>

        </div>
    </div>
</x-app-layout>