@push('scripts')
    @vite(['resources/js/galleryImgUploader.js'])
@endpush
<div class="fixed inset-0 z-40 min-h-full overflow-y-auto overflow-x-hidden transition flex my-10" x-cloak>
    <!-- overlay -->
    <div aria-hidden="true" class="fixed inset-0 w-full h-full bg-black/50 cursor-pointer">
    </div>
    <!-- Modal -->
    <div class="relative w-full cursor-pointer pointer-events-none transition my-auto p-4">
        <div
            class="w-full py-2 cursor-default pointer-events-auto bg-ultraLight text-dark relative rounded-xl mx-auto max-w-xl">
            <button type="button" class="absolute top-2 right-2 rtl:right-auto rtl:left-2"
                @click="closeModal()">
                <svg xlinkTitle="Close"
                    class="h-4 w-4 hover:rotate-180 transition-all ease-in-out duration-500 cursor-pointer text-gray-400"
                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fillRule="evenodd"
                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                        clipRule="evenodd"></path>
                </svg>
                <span class="sr-only">
                    Close
                </span>
            </button>
            <div class="space-y-2 p-2">
                <div class="p-2 space-y-2 text-center text-dark">
                    <h2 x-show="action=='create'" class="text-2xl font-bold tracking-tight" id="page-action.heading">
                        Ajout d'un élément dans la galerie
                    </h2>
                    <h2 x-show="action=='update'" class="text-2xl font-bold tracking-tight" id="page-action.heading">
                        Modification d'un élément dans la galerie
                    </h2>
                    <p class="text-secondary text-xs hover:text-accent">
                        En cas d'erreur il est possible de modifier ou supprimer un élément créé.
                    </p>
                </div>
            </div>
            <div class="space-y-2">
                <form method="post"
                    :action="id == null ? '/admin/gallery' : '/admin/gallery/' + id"
                    enctype="multipart/form-data" class="space-y-4">
                    @csrf
                    @method('POST')
                    <div aria-hidden="true" class="border-t border-dark px-2"></div>
                    <div class="grid grid-cols-1 place-items-center px-4 py-2">
                        <div class="w-2/3">
                            <label for="name" class="mb-2 text-secondary text-lg">Nom<span
                                    class="text-red-600 inline-block p-1 text-sm">*</span></label>
                            <input id="name" name="name" x-model="name"
                                class="@error('name') is-invalid @enderror bg-transparent border p-3 shadow-md  border-dark placeholder:text-secondary focus:outline-none ease-in-out duration-300 focus:border-dark/30 hover:border-dark/30  rounded-lg w-full"
                                type="text" placeholder="Nom de l'image"
                                value="{{ old('name') }}" autocomplete="off" />
                            @error('name')
                                <div class="text-red-600"><small>{{ $message }}</small></div>
                            @enderror
                        </div>
                        <div class="w-2/3 pt-3">
                            <label for="category" class="mb-2 text-secondary text-lg">Categorie<span
                                    class="text-red-600 inline-block p-1 text-sm">*</span></label>
                            <div class="w-full max-w-sm">
                                <div class="relative">
                                    <select id="category" name="category" x-model="categoryId"
                                        class="@error('category') is-invalid @enderror tracking-widest uppercase w-full bg-transparent placeholder:text-secondary text-dark text-sm border p-3 border-dark rounded-lg transition duration-300 ease focus:outline-none focus:border-dark/30 hover:border-dark/30 shadow-sm focus:shadow-md appearance-none cursor-pointer">
                                        <option value="">Choisisser une catégorie</option>
                                        @foreach ($categories as $category)
                                            <option class="uppercase" value="{{ $category->id }}">
                                                {{ $category->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                        stroke-width="1.2" stroke="currentColor"
                                        class="h-5 w-5 ml-1 absolute top-2.5 right-2.5 text-secondary">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
                                    </svg>
                                </div>
                                @error('category')
                                    <div class="text-red-600"><small>{{ $message }}</small></div>
                                @enderror
                            </div>
                        </div>
                        <div class="w-2/3 pt-3">
                            <label for="legend" class="mb-2 text-secondary text-lg">Légende</label>
                            <textarea id="legend" name="legend" value="{{ old('legend') }}" placeholder="Légende de l'image" x-model="legend"
                                class="@error('legend') is-invalid @enderror  border p-3 shadow-md  border-dark placeholder:text-secondary focus:outline-none ease-in-out duration-300 focus:border-dark/30 hover:border-dark/30  rounded-lg w-full resize-none
                                    leading-6"></textarea>
                            @error('legend')
                                <div class="text-red-600"><small>{{ $message }}</small></div>
                            @enderror
                        </div>

                        <div class="w-2/3 pt-3">
                            <div class="flex justify-between">
                                <p id="fileName" class="text-sm tracking-wider text-accent"></p>
                                <button id="deleteFile" class="hidden cursor-pointer">
                                    <i class="fa-solid fa-xmark"></i>
                                </button>
                            </div>
                            <label for="imgfile"
                                class="flex flex-col items-center text-secondary justify-center shadow-md w-full h-64 bg-neutral-secondary-medium rounded-lg border border-dashed border-default-strong cursor-pointer hover:bg-neutral-tertiary-medium">
                                <div class="flex flex-col items-center justify-center text-body pt-5 pb-6">
                                    <svg class="w-8 h-8 mb-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                        width="24" height="24" fill="none" viewBox="0 0 24 24">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="2"
                                            d="M15 17h3a3 3 0 0 0 0-6h-.025a5.56 5.56 0 0 0 .025-.5A5.5 5.5 0 0 0 7.207 9.021C7.137 9.017 7.071 9 7 9a4 4 0 1 0 0 8h2.167M12 19v-9m0 0-2 2m2-2 2 2" />
                                    </svg>
                                    <p class="mb-2 text-sm"><span class="font-semibold">Cliquer pour
                                            charger</span>
                                        ou glisser et déposer</p>
                                    <p class="text-xs">PNG, JPG ou WEBP (MAX. 400ko)</p>
                                </div>
                                <input id="imgfile" name="imgfile" type="file"
                                    accept="image/png, image/jpeg, image/jpg, image/webp" value="{{ old('imgfile') }}"
                                    class="@error('imgfile') is-invalid @enderror hidden" />
                            </label>
                            @error('imgfile')
                                <div class="text-red-600"><small>{{ $message }}</small></div>
                            @enderror
                        </div>
                    </div>
                    <div aria-hidden="true" class="border-b border-gray-700 px-2"></div>
                    <div class="px-6 py-2">
                        <div class="grid gap-2 grid-cols-[repeat(auto-fit,minmax(0,1fr))]">
                            <button type="button" @click="closeModal()"
                                class="inline-flex items-center justify-center py-1 gap-1 font-medium rounded-lg border
                                transition-colors outline-none focus:ring-inset min-h-9 px-4
                                text-sm bg-dark hover:bg-dark/80 border-secondary hover:border-secondary/95 text-ultraLight
                                focus:text-ultraLight  focus:bg-dark/85 focus:shadow-lg">
                                Annuler
                            </button>
                            <button type="submit"
                                class="inline-flex items-center justify-center py-1 gap-1 font-medium rounded-lg border
                                transition-colors outline-none focus:ring-inset min-h-9 px-4
                                text-sm bg-accent hover:bg-accent/80 border-accent hover:border-accent/95 text-ultraLight
                                focus:text-ultraLight  focus:bg-accent/85 focus:shadow-lg">
                                <span class="flex items-center gap-1">
                                    <span x-text="action === 'update' ? 'mettre à jour' : 'créer'"></span>
                                </span>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>