<x-app-layout>

    <x-slot name="header">
        <h1 class="mb-0 uppercase text-3xl ">
            {{ $action }}
        </h1>
    </x-slot>
    <div class="py-12">
    <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">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($customer)
                    <form action="{{ route('customers.update', $customer['id']) }}" method="POST">
                        <input value="{{$customer['id']}}" type="hidden" name="customer_id" />
                        @method('PUT')
                        @else
                        <form action="{{ route('customers.store') }}" method="POST">
                            @endif
                            @csrf
                            <div class="p-5">
                                <div class="grid grid-cols-2 gap-4">
                                    <label class="block form-label">
                                        <span class="after:content-['*'] after:ml-0.5 after:text-red-500 block uppercase">Name</span>
                                        <input value="{{$customer['name']??old('name')}}" type="text" name="name" 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 name" />
                                        @error('name')
                                        <div class=" 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 uppercase">Email</span>
                                        <input value="{{$customer['email']??old('email')}}" type="email" name="email" 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 email" />
                                        @error('email')
                                        <div class=" 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">Phone</span>
                                        <input value="{{$customer['phone']??old('phone')}}" type="text" name="phone" 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 phone no." />
                                        @error('phone')
                                        <div class=" 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.index') }}" 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>
    </div>
</x-app-layout>