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

@section('content')

<div class="min-h-[calc(100vh-140px)] flex items-center justify-center px-4 py-4">

```
<div class="w-full max-w-md">

    {{-- En-tête --}}
    <div class="text-center mb-5">

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

        <p class="text-sm text-gray-500 mt-1">
            Connecte-toi pour accéder à tes billets et événements
        </p>

    </div>

    {{-- Carte --}}
    <div class="bg-white rounded-3xl border border-gray-100 shadow-xl p-5 sm:p-6">

        {{-- Erreurs --}}
        @if ($errors->any())
            <div class="mb-4 rounded-xl bg-rose-50 border border-rose-200 px-4 py-3">

                <div class="flex gap-2">

                    <x-icon name="x-circle"
                            class="w-5 h-5 text-rose-500 shrink-0" />

                    <div class="text-sm text-rose-700">

                        @foreach ($errors->all() as $error)
                            <p>{{ $error }}</p>
                        @endforeach

                    </div>

                </div>

            </div>
        @endif

        {{-- Message succès --}}
        @if (session('status'))

            <div class="mb-4 rounded-xl bg-emerald-50 border border-emerald-200 px-4 py-3">

                <p class="text-sm font-medium text-emerald-700">
                    {{ session('status') }}
                </p>

            </div>

        @endif

        {{-- Google --}}
        <a
            href="{{ route('auth.google') }}"
            class="w-full h-12 rounded-xl border border-gray-200 bg-white
                   hover:bg-gray-50 hover:border-gray-300
                   text-gray-700 font-bold text-sm
                   flex items-center justify-center gap-3
                   transition-all active:scale-[0.98]"
        >

            {{-- Logo Google --}}
            <svg
                class="w-5 h-5"
                viewBox="0 0 24 24"
                aria-hidden="true"
            >
                <path
                    fill="#4285F4"
                    d="M21.35 12.23c0-.78-.07-1.53-.22-2.25H12v4.26h5.23a4.47 4.47 0 0 1-1.94 2.94v2.45h3.14c1.84-1.7 2.92-4.21 2.92-7.4Z"
                />

                <path
                    fill="#34A853"
                    d="M12 21.75c2.63 0 4.84-.87 6.45-2.36l-3.14-2.45c-.87.58-1.98.93-3.31.93-2.55 0-4.71-1.72-5.49-4.03H3.27v2.53A9.74 9.74 0 0 0 12 21.75Z"
                />

                <path
                    fill="#FBBC05"
                    d="M6.51 13.84a5.85 5.85 0 0 1 0-3.68V7.63H3.27a9.75 9.75 0 0 0 0 8.74l3.24-2.53Z"
                />

                <path
                    fill="#EA4335"
                    d="M12 6.13c1.43 0 2.71.49 3.72 1.45l2.79-2.79C16.84 3.2 14.63 2.25 12 2.25a9.74 9.74 0 0 0-8.73 5.38l3.24 2.53C7.29 7.85 9.45 6.13 12 6.13Z"
                />
            </svg>

            <span>
                Continuer avec Google
            </span>

        </a>

        {{-- Séparateur --}}
        <div class="flex items-center gap-3 my-5">

            <div class="flex-1 h-px bg-gray-100"></div>

            <span class="text-xs text-gray-400 font-semibold">
                OU
            </span>

            <div class="flex-1 h-px bg-gray-100"></div>

        </div>

        {{-- Connexion classique --}}
        <form
            method="POST"
            action="{{ route('login') }}"
            class="space-y-4"
        >

            @csrf

            {{-- Email --}}
            <div>

                <label
                    for="email"
                    class="block text-sm font-bold text-gray-700 mb-1.5"
                >
                    Adresse email
                </label>

                <div class="relative group">

                    <span class="absolute inset-y-0 left-0 flex items-center pl-3.5
                                 text-gray-400 group-focus-within:text-fuchsia-500 transition">

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

                    </span>

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

                </div>

            </div>

            {{-- Mot de passe --}}
            <div>

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

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

                    @if (Route::has('password.request'))

                        <a
                            href="{{ route('password.request') }}"
                            class="text-xs font-bold text-fuchsia-600
                                   hover:text-fuchsia-700"
                        >
                            Mot de passe oublié ?
                        </a>

                    @endif

                </div>

                <div class="relative group">

                    <span class="absolute inset-y-0 left-0 flex items-center pl-3.5
                                 text-gray-400 group-focus-within:text-fuchsia-500 transition">

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

                    </span>

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

                    <button
                        type="button"
                        onclick="togglePassword()"
                        class="absolute inset-y-0 right-0 flex items-center pr-3.5
                               text-gray-400 hover:text-fuchsia-500 transition"
                        aria-label="Afficher ou masquer le mot de passe"
                    >

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

                    </button>

                </div>

            </div>

            {{-- Se souvenir --}}
            <label class="inline-flex items-center gap-2 cursor-pointer">

                <input
                    type="checkbox"
                    name="remember"
                    class="w-4 h-4 rounded border-gray-300
                           text-fuchsia-600 focus:ring-fuchsia-300"
                >

                <span class="text-sm text-gray-600">
                    Se souvenir de moi
                </span>

            </label>

            {{-- Connexion --}}
            <button
                type="submit"
                class="w-full h-12 btn-gradient text-white rounded-xl
                       font-bold shadow-glow
                       hover:brightness-105 hover:-translate-y-0.5
                       active:translate-y-0 transition-all
                       flex items-center justify-center gap-2"
            >

                <span>
                    Se connecter
                </span>

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

            </button>

        </form>

        {{-- Inscription --}}
        <div class="mt-5 text-center">

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

                Pas encore de compte ?

                <a
                    href="{{ route('register') }}"
                    class="text-fuchsia-600 font-bold hover:text-fuchsia-700"
                >
                    Créer un compte
                </a>

            </p>

        </div>

    </div>

    {{-- Confidentialité --}}
    <p class="text-center text-[11px] text-gray-400 mt-4 leading-relaxed">

        En te connectant, tu acceptes nos
        <a href="#" class="underline hover:text-gray-600">
            conditions d'utilisation
        </a>
        et notre
        <a href="#" class="underline hover:text-gray-600">
            politique de confidentialité
        </a>.

    </p>

</div>
```

</div>

<script>

function togglePassword() {

    const password = document.getElementById('password');
    const icon = document.getElementById('eyeIcon');

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

        password.type = 'text';

        icon.setAttribute('name', 'eye-off');

    } else {

        password.type = 'password';

        icon.setAttribute('name', 'eye');

    }

}

</script>

@endsection