@extends('layouts.app')
@section('title', 'Inscription')

@section('content')

<div class="min-h-screen bg-gradient-to-br from-fuchsia-50 via-white to-indigo-50">

```
<div class="min-h-screen flex items-center justify-center p-0 sm:p-4 lg:p-8">

    <div class="w-full max-w-6xl overflow-hidden
                bg-white
                sm:rounded-[2rem]
                shadow-none sm:shadow-[0_25px_80px_rgba(15,23,42,0.12)]
                border-0 sm:border border-gray-100">

        <div class="grid grid-cols-1 lg:grid-cols-2">


            {{-- =====================================================
                 PARTIE GAUCHE : DESKTOP
            ====================================================== --}}
            <div class="hidden lg:flex relative overflow-hidden
                        bg-gradient-to-br from-fuchsia-600 via-purple-600 to-indigo-700
                        p-12 xl:p-16
                        min-h-[760px]
                        text-white">

                {{-- Cercles décoratifs --}}
                <div class="absolute -top-32 -left-32 w-96 h-96
                            rounded-full bg-white/10 blur-sm"></div>

                <div class="absolute -bottom-40 -right-40 w-[500px] h-[500px]
                            rounded-full bg-white/10"></div>

                <div class="absolute top-1/3 -right-20 w-64 h-64
                            rounded-full bg-fuchsia-400/20 blur-3xl"></div>


                <div class="relative z-10 flex flex-col justify-between w-full">

                    {{-- Logo --}}
                    <div>

                        <div class="inline-flex items-center gap-3">

                            <div class="w-12 h-12 rounded-2xl
                                        bg-white/15 backdrop-blur-md
                                        border border-white/20
                                        flex items-center justify-center">

                                <x-icon
                                    name="ticket"
                                    class="w-6 h-6 text-white"
                                />

                            </div>

                            <div>

                                <div class="font-display text-xl font-extrabold">
                                    Ticket Scan
                                </div>

                                <div class="text-xs text-white/60">
                                    Billetterie intelligente
                                </div>

                            </div>

                        </div>

                    </div>


                    {{-- Contenu principal --}}
                    <div class="max-w-lg">

                        <div class="inline-flex items-center gap-2
                                    bg-white/10
                                    border border-white/15
                                    rounded-full
                                    px-4 py-2
                                    text-xs font-bold
                                    backdrop-blur-md
                                    mb-7">

                            <span class="w-2 h-2 rounded-full bg-green-300"></span>

                            Rejoins notre communauté

                        </div>


                        <h2 class="font-display
                                   text-4xl xl:text-5xl
                                   font-extrabold
                                   leading-tight
                                   tracking-tight">

                            Crée ton compte
                            <span class="text-fuchsia-200">
                                et vis l'expérience.
                            </span>

                        </h2>


                        <p class="mt-6 text-white/75 leading-relaxed max-w-md">

                            Achète tes billets, découvre les événements
                            et profite d'une expérience simple, rapide
                            et sécurisée.

                        </p>


                        {{-- Avantages --}}
                        <div class="mt-10 space-y-5">

                            <div class="flex items-center gap-4">

                                <div class="w-11 h-11 rounded-xl
                                            bg-white/10
                                            border border-white/10
                                            flex items-center justify-center">

                                    <x-icon
                                        name="ticket"
                                        class="w-5 h-5"
                                    />

                                </div>

                                <div>

                                    <div class="font-bold text-sm">
                                        Billets numériques
                                    </div>

                                    <div class="text-xs text-white/60 mt-1">
                                        Tes billets toujours accessibles.
                                    </div>

                                </div>

                            </div>


                            <div class="flex items-center gap-4">

                                <div class="w-11 h-11 rounded-xl
                                            bg-white/10
                                            border border-white/10
                                            flex items-center justify-center">

                                    <x-icon
                                        name="calendar"
                                        class="w-5 h-5"
                                    />

                                </div>

                                <div>

                                    <div class="font-bold text-sm">
                                        Événements
                                    </div>

                                    <div class="text-xs text-white/60 mt-1">
                                        Découvre les meilleurs événements.
                                    </div>

                                </div>

                            </div>


                            <div class="flex items-center gap-4">

                                <div class="w-11 h-11 rounded-xl
                                            bg-white/10
                                            border border-white/10
                                            flex items-center justify-center">

                                    <x-icon
                                        name="shield-check"
                                        class="w-5 h-5"
                                    />

                                </div>

                                <div>

                                    <div class="font-bold text-sm">
                                        Paiement sécurisé
                                    </div>

                                    <div class="text-xs text-white/60 mt-1">
                                        Tes informations restent protégées.
                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>


                    {{-- Footer --}}
                    <div class="text-xs text-white/50">

                        © {{ date('Y') }} Ticket Scan · Tous droits réservés.

                    </div>

                </div>

            </div>


            {{-- =====================================================
                 PARTIE DROITE : FORMULAIRE
            ====================================================== --}}
            <div class="relative">

                <div class="w-full max-w-xl mx-auto
                            px-5 py-8
                            sm:px-8 sm:py-10
                            lg:px-12 xl:px-16">


                    {{-- Header mobile --}}
                    <div class="lg:hidden text-center mb-7">

                        <div class="inline-flex
                                    w-14 h-14
                                    rounded-2xl
                                    bg-gradient-to-br
                                    from-fuchsia-500
                                    to-indigo-600
                                    shadow-lg
                                    items-center
                                    justify-center
                                    mb-4">

                            <x-icon
                                name="user-plus"
                                class="w-6 h-6 text-white"
                            />

                        </div>

                        <h1 class="font-display
                                   text-2xl
                                   sm:text-3xl
                                   font-extrabold
                                   text-gray-900">

                            Rejoins l'aventure

                        </h1>

                        <p class="text-sm text-gray-500 mt-2">

                            Crée ton compte en quelques secondes.

                        </p>

                    </div>


                    {{-- Header desktop --}}
                    <div class="hidden lg:block mb-8">

                        <div class="flex items-center gap-3 mb-5">

                            <div class="w-11 h-11 rounded-xl
                                        bg-fuchsia-50
                                        flex items-center justify-center">

                                <x-icon
                                    name="user-plus"
                                    class="w-5 h-5 text-fuchsia-600"
                                />

                            </div>

                            <div>

                                <div class="text-xs
                                            uppercase
                                            tracking-wider
                                            font-bold
                                            text-fuchsia-600">

                                    Création de compte

                                </div>

                                <h1 class="font-display
                                           text-3xl
                                           font-extrabold
                                           text-gray-900">

                                    Rejoins l'aventure

                                </h1>

                            </div>

                        </div>

                        <p class="text-sm text-gray-500">

                            Crée ton compte pour accéder à toutes les fonctionnalités.

                        </p>

                    </div>


                    {{-- FORMULAIRE --}}
                    <form
                        method="POST"
                        action="{{ route('register') }}"
                        class="space-y-5"
                    >

                        @csrf


                        {{-- NOM --}}
                        <div>

                            <label class="block text-sm font-bold text-gray-700 mb-2">
                                Nom complet
                            </label>

                            <div class="relative">

                                <x-icon
                                    name="user"
                                    class="absolute left-4 top-1/2
                                           -translate-y-1/2
                                           w-4 h-4
                                           text-gray-400"
                                />

                                <input
                                    type="text"
                                    name="name"
                                    value="{{ old('name') }}"
                                    required
                                    autocomplete="name"
                                    placeholder="Ex. Modou Seck"
                                    class="w-full
                                           bg-gray-50
                                           border border-gray-200
                                           rounded-2xl
                                           pl-11 pr-4
                                           py-3.5
                                           text-sm
                                           focus:bg-white
                                           focus:outline-none
                                           focus:ring-4
                                           focus:ring-fuchsia-500/10
                                           focus:border-fuchsia-400
                                           transition"
                                >

                            </div>

                        </div>


                        {{-- EMAIL --}}
                        <div>

                            <label class="block text-sm font-bold text-gray-700 mb-2">
                                Email
                            </label>

                            <div class="relative">

                                <x-icon
                                    name="mail"
                                    class="absolute left-4 top-1/2
                                           -translate-y-1/2
                                           w-4 h-4
                                           text-gray-400"
                                />

                                <input
                                    type="email"
                                    name="email"
                                    value="{{ old('email') }}"
                                    required
                                    autocomplete="email"
                                    placeholder="exemple@email.com"
                                    class="w-full
                                           bg-gray-50
                                           border border-gray-200
                                           rounded-2xl
                                           pl-11 pr-4
                                           py-3.5
                                           text-sm
                                           focus:bg-white
                                           focus:outline-none
                                           focus:ring-4
                                           focus:ring-fuchsia-500/10
                                           focus:border-fuchsia-400
                                           transition"
                                >

                            </div>

                        </div>


                        {{-- TELEPHONE --}}
                        <div>

                            <label class="block text-sm font-bold text-gray-700 mb-2">
                                Téléphone
                            </label>

                            <div class="relative">

                                <x-icon
                                    name="phone"
                                    class="absolute left-4 top-1/2
                                           -translate-y-1/2
                                           w-4 h-4
                                           text-gray-400"
                                />

                                <input
                                    type="tel"
                                    name="phone"
                                    value="{{ old('phone') }}"
                                    autocomplete="tel"
                                    placeholder="77 000 00 00"
                                    class="w-full
                                           bg-gray-50
                                           border border-gray-200
                                           rounded-2xl
                                           pl-11 pr-4
                                           py-3.5
                                           text-sm
                                           focus:bg-white
                                           focus:outline-none
                                           focus:ring-4
                                           focus:ring-fuchsia-500/10
                                           focus:border-fuchsia-400
                                           transition"
                                >

                            </div>

                        </div>


                        {{-- TYPE DE COMPTE --}}
                        <div>

                            <div class="flex items-center justify-between mb-2">

                                <label class="text-sm font-bold text-gray-700">
                                    Type de compte
                                </label>

                                <span class="text-[10px] text-gray-400">
                                    Choisis ton profil
                                </span>

                            </div>


                            <div class="grid grid-cols-2 gap-3">


                                {{-- ACHETEUR --}}
                                <label class="cursor-pointer">

                                    <input
                                        type="radio"
                                        name="role"
                                        value="buyer"
                                        {{ old('role', 'buyer') === 'buyer' ? 'checked' : '' }}
                                        onchange="toggleCompanyField()"
                                        class="peer sr-only"
                                    >

                                    <div class="border-2
                                                border-gray-200
                                                bg-gray-50
                                                rounded-2xl
                                                p-3.5
                                                text-center
                                                peer-checked:border-fuchsia-500
                                                peer-checked:bg-fuchsia-50
                                                transition">

                                        <div class="mx-auto
                                                    w-10 h-10
                                                    rounded-xl
                                                    bg-white
                                                    shadow-sm
                                                    flex items-center
                                                    justify-center
                                                    mb-2">

                                            <x-icon
                                                name="ticket"
                                                class="w-5 h-5 text-fuchsia-500"
                                            />

                                        </div>

                                        <div class="text-sm font-extrabold text-gray-800">
                                            Acheteur
                                        </div>

                                        <div class="text-[10px] text-gray-400 mt-1">
                                            Acheter des billets
                                        </div>

                                    </div>

                                </label>


                                {{-- ORGANISATEUR --}}
                                <label class="cursor-pointer">

                                    <input
                                        type="radio"
                                        name="role"
                                        value="organizer"
                                        {{ old('role') === 'organizer' ? 'checked' : '' }}
                                        onchange="toggleCompanyField()"
                                        class="peer sr-only"
                                    >

                                    <div class="border-2
                                                border-gray-200
                                                bg-gray-50
                                                rounded-2xl
                                                p-3.5
                                                text-center
                                                peer-checked:border-fuchsia-500
                                                peer-checked:bg-fuchsia-50
                                                transition">

                                        <div class="mx-auto
                                                    w-10 h-10
                                                    rounded-xl
                                                    bg-white
                                                    shadow-sm
                                                    flex items-center
                                                    justify-center
                                                    mb-2">

                                            <x-icon
                                                name="building"
                                                class="w-5 h-5 text-fuchsia-500"
                                            />

                                        </div>

                                        <div class="text-sm font-extrabold text-gray-800">
                                            Organisateur
                                        </div>

                                        <div class="text-[10px] text-gray-400 mt-1">
                                            Vendre des billets
                                        </div>

                                    </div>

                                </label>

                            </div>

                        </div>


                        {{-- ENTREPRISE --}}
                        <div
                            id="company_field"
                            class="{{ old('role') === 'organizer' ? '' : 'hidden' }}"
                        >

                            <label class="block text-sm font-bold text-gray-700 mb-2">
                                Entreprise / structure
                            </label>

                            <div class="relative">

                                <x-icon
                                    name="building"
                                    class="absolute left-4 top-1/2
                                           -translate-y-1/2
                                           w-4 h-4
                                           text-gray-400"
                                />

                                <input
                                    type="text"
                                    name="company_name"
                                    value="{{ old('company_name') }}"
                                    placeholder="Nom de ton entreprise"
                                    class="w-full
                                           bg-gray-50
                                           border border-gray-200
                                           rounded-2xl
                                           pl-11 pr-4
                                           py-3.5
                                           text-sm
                                           focus:bg-white
                                           focus:outline-none
                                           focus:ring-4
                                           focus:ring-fuchsia-500/10
                                           focus:border-fuchsia-400
                                           transition"
                                >

                            </div>

                        </div>


                        {{-- MOT DE PASSE --}}
                        <div>

                            <label class="block text-sm font-bold text-gray-700 mb-2">
                                Mot de passe
                            </label>

                            <div class="relative">

                                <x-icon
                                    name="lock"
                                    class="absolute left-4 top-1/2
                                           -translate-y-1/2
                                           w-4 h-4
                                           text-gray-400"
                                />

                                <input
                                    type="password"
                                    name="password"
                                    id="password"
                                    required
                                    autocomplete="new-password"
                                    placeholder="••••••••"
                                    class="w-full
                                           bg-gray-50
                                           border border-gray-200
                                           rounded-2xl
                                           pl-11 pr-12
                                           py-3.5
                                           text-sm
                                           focus:bg-white
                                           focus:outline-none
                                           focus:ring-4
                                           focus:ring-fuchsia-500/10
                                           focus:border-fuchsia-400
                                           transition"
                                >

                                <button
                                    type="button"
                                    onclick="togglePassword('password', this)"
                                    class="absolute
                                           right-3
                                           top-1/2
                                           -translate-y-1/2
                                           w-9 h-9
                                           rounded-xl
                                           text-gray-400
                                           hover:text-fuchsia-600
                                           hover:bg-fuchsia-50
                                           flex items-center justify-center"
                                >

                                    <x-icon
                                        name="eye"
                                        class="w-5 h-5"
                                    />

                                </button>

                            </div>

                        </div>


                        {{-- CONFIRMATION --}}
                        <div>

                            <label class="block text-sm font-bold text-gray-700 mb-2">
                                Confirmer le mot de passe
                            </label>

                            <div class="relative">

                                <x-icon
                                    name="shield-check"
                                    class="absolute left-4 top-1/2
                                           -translate-y-1/2
                                           w-4 h-4
                                           text-gray-400"
                                />

                                <input
                                    type="password"
                                    name="password_confirmation"
                                    id="password_confirmation"
                                    required
                                    autocomplete="new-password"
                                    placeholder="••••••••"
                                    class="w-full
                                           bg-gray-50
                                           border border-gray-200
                                           rounded-2xl
                                           pl-11 pr-12
                                           py-3.5
                                           text-sm
                                           focus:bg-white
                                           focus:outline-none
                                           focus:ring-4
                                           focus:ring-fuchsia-500/10
                                           focus:border-fuchsia-400
                                           transition"
                                >

                                <button
                                    type="button"
                                    onclick="togglePassword('password_confirmation', this)"
                                    class="absolute
                                           right-3
                                           top-1/2
                                           -translate-y-1/2
                                           w-9 h-9
                                           rounded-xl
                                           text-gray-400
                                           hover:text-fuchsia-600
                                           hover:bg-fuchsia-50
                                           flex items-center justify-center"
                                >

                                    <x-icon
                                        name="eye"
                                        class="w-5 h-5"
                                    />

                                </button>

                            </div>

                        </div>


                        {{-- CONDITIONS --}}
                        <div class="flex items-start gap-3">

                            <div class="w-5 h-5
                                        rounded-md
                                        bg-fuchsia-50
                                        flex-shrink-0
                                        flex items-center
                                        justify-center">

                                <x-icon
                                    name="check"
                                    class="w-3.5 h-3.5 text-fuchsia-600"
                                />

                            </div>

                            <p class="text-[11px]
                                      leading-relaxed
                                      text-gray-400">

                                En créant ton compte, tu acceptes nos

                                <a
                                    href="#"
                                    class="font-bold text-fuchsia-600 hover:underline"
                                >
                                    conditions d'utilisation
                                </a>

                                et notre

                                <a
                                    href="#"
                                    class="font-bold text-fuchsia-600 hover:underline"
                                >
                                    politique de confidentialité
                                </a>.

                            </p>

                        </div>


                        {{-- BOUTON --}}
                        <button
                            type="submit"
                            class="group
                                   relative
                                   w-full
                                   overflow-hidden
                                   rounded-2xl
                                   py-4
                                   font-extrabold
                                   text-white
                                   bg-gradient-to-r
                                   from-fuchsia-600
                                   via-purple-600
                                   to-indigo-600
                                   shadow-lg
                                   shadow-fuchsia-500/20
                                   hover:shadow-xl
                                   hover:-translate-y-0.5
                                   active:translate-y-0
                                   transition-all"
                        >

                            <span class="relative z-10
                                         flex items-center
                                         justify-center
                                         gap-2">

                                Créer mon compte

                                <x-icon
                                    name="arrow-right"
                                    class="w-5 h-5
                                           group-hover:translate-x-1
                                           transition-transform"
                                />

                            </span>

                        </button>

                    </form>


                    {{-- CONNEXION --}}
                    <div class="text-center mt-7">

                        <p class="text-sm text-gray-500">

                            Tu as déjà un compte ?

                            <a
                                href="{{ route('login') }}"
                                class="ml-1
                                       font-extrabold
                                       text-fuchsia-600
                                       hover:text-fuchsia-700
                                       hover:underline"
                            >
                                Connecte-toi
                            </a>

                        </p>

                    </div>


                    {{-- SECURITE --}}
                    <div class="flex
                                justify-center
                                items-center
                                gap-2
                                mt-5
                                text-[11px]
                                text-gray-400">

                        <x-icon
                            name="shield-check"
                            class="w-4 h-4"
                        />

                        Inscription sécurisée

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>
```

</div>

<script>

function toggleCompanyField() {

    const field = document.getElementById('company_field');

    const organizer = document.querySelector(
        'input[name="role"][value="organizer"]:checked'
    );

    if (organizer) {

        field.classList.remove('hidden');

    } else {

        field.classList.add('hidden');

    }

}


function togglePassword(inputId, button) {

    const input = document.getElementById(inputId);

    if (input.type === 'password') {

        input.type = 'text';

        button.innerHTML = `
            <svg xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke-width="2"
                 stroke="currentColor"
                 class="w-5 h-5">

                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M2.458 12C3.732 7.943 7.523 5
                       12 5c4.477 0 8.268 2.943
                       9.542 7-1.274 4.057-5.065
                       7-9.542 7-4.477 0-8.268-2.943
                       -9.542-7Z" />

                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M15 12a3 3 0 1 1-6 0
                       3 3 0 0 1 6 0Z" />

            </svg>
        `;

    } else {

        input.type = 'password';

        button.innerHTML = `
            <svg xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke-width="2"
                 stroke="currentColor"
                 class="w-5 h-5">

                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M2.458 12C3.732 7.943 7.523 5
                       12 5c4.477 0 8.268 2.943
                       9.542 7-1.274 4.057-5.065
                       7-9.542 7-4.477 0-8.268-2.943
                       -9.542-7Z" />

                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M15 12a3 3 0 1 1-6 0
                       3 3 0 0 1 6 0Z" />

            </svg>
        `;

    }

}


document.addEventListener(
    'DOMContentLoaded',
    function () {

        toggleCompanyField();

    }
);

</script>

@endsection