@extends('layouts.main')

@section('content')
    @if($success)
        <main class="py-10 px-6">
            <div class="flex flex-row items-center space-x-4">
                <x-svg.check-circle class="w-12 h-12 text-bridgestone-red" />
                <div class="text-xl leading-tight">
                    <span class="text-2xl font-bold uppercase">Demande enregistrée</span><br />
                    Vous recevrez vos cadeaux dans les plus bref délais.
                </div>
            </div>

        </main>
    @else
        <main x-data="form(@js(old("items")))" class="px-2 md:px-0 py-10" x-cloak>
            <div x-show="submitting" class="fixed inset-0 z-50 bg-white flex flex-col justify-center items-center space-y-8">
                <span class="loader"></span>
                <div class="text-3xl uppercase">Création de la demande</div>
            </div>
            <x-section-title>
                <x-slot:title>
                    Séléctionnez vos cadeaux <sup class="font-medium">1</sup>
                </x-slot:title>

                <x-slot:subtitle>
                    Vous avez la possibilité de choisir 16 articles maximum.
                </x-slot:subtitle>
            </x-section-title>
            @error("items")
                <div class="my-4 text-lg text-center text-bridgestone-red">{{ $message }}</div>
            @enderror
            <form action="{{ route('form.submit') }}" method="post" @submit="onSubmit">
                @csrf
                <div class="grid w-full grid-cols-2 md:grid-cols-3 gap-x-4">
                    @foreach ($items as $item)
                        <x-gift-item :item="$item" />
                    @endforeach
                </div>
                <x-section-title>
                    <x-slot:title>
                        REMPLISSEZ LE FORMULAIRE CI-DESSOUS
                    </x-slot:title>
                </x-section-title>
                <div class="grid grid-cols-1 md:grid-cols-2 md:gap-x-4 gap-y-5 mb-3">
                    <x-form-field name="firstname" placeholder="Prénom" />
                    <x-form-field name="lastname" placeholder="Nom" />
                    <x-form-field name="email" placeholder="Email Bridgestone" class="md:col-span-2" />
                    <x-form-field name="address" placeholder="Adresse personelle" class="md:col-span-2" />
                    <x-form-field name="city" placeholder="Ville" />
                    <x-form-field name="postal_code" placeholder="Code postal" />
                </div>

                <x-label>
                    <x-checkbox name="privacy_policy_accepted" class="me-0" />
                    <x-slot:text>Oui, j’accepte la <a href="https://www.bridgestone.fr/content/dam/website/bridgestone_jss/files/documents/privacy/2023/Privacy-Policy-FR.pdf" target="_blank" class="hover:underline underline-offset-2">Politique de Confidentialité</a>.<span class="text-bridgestone-red">*</span></x-slot:text>
                </x-label>

                @error("privacy_policy_accepted")
                    <div class="text-bridgestone-red text-sm pt-2">
                        {{ $message }}
                    </div>
                @enderror

                <div class="mt-5 text-[#8E8E8E]">
                    <span class="text-bridgestone-red">*</span>Champs obligatoires
                </div>

                <button type="submit" class="block transition-colors bg-bridgestone-red hover:bg-black font-bold uppercase text-white rounded-md mx-auto mt-11 px-4 py-2">
                    Valider votre demande
                </button>
            </form>
        </main>

        @once
            <script>

                document.addEventListener("alpine:init", () => {
                    window.Alpine.data("form", (items) => ({
                        submitting: false,
                        init() {
                            window.nbSelected = items ? Object.values(items).filter(i => i.selected === "on").length : 0;
                        },
                        onSubmit() {
                            this.submitting = true;
                            const $body = document.querySelector("body");
                            $body.classList.add("overflow-y-hidden");
                        }
                    }));
                });
            </script>
        @endonce
    @endif
@endsection