{{-- * Page d'inscription utilisateur - Interface moderne avec validation complète --}}
@extends("layouts.guest")

{{-- * Titre dynamique de la page d'inscription pour SEO et navigation --}}
@section("title", __("auth.register_title"))

{{-- * Section principale contenant le formulaire d'inscription sécurisé --}}
@section("content")
    {{-- * En-tête de bienvenue avec titre et description motivante --}}
    <div class="text-center mb-8">
        {{-- * Titre principal de la page d'inscription --}}
        <h2 class="text-2xl font-bold text-gray-900">
            {{ __("auth.register_title") }}
        </h2>
        {{-- * Description engageante pour encourager l'inscription --}}
        <p class="mt-2 text-sm text-gray-600">
            {{ __('auth.register_intro') }}
        </p>
    </div>

    {{-- * Formulaire d'inscription avec protection CSRF et validation avancée --}}
    <form method="POST" action="{{ route("register") }}" class="space-y-6">
        @csrf

        {{-- * Champ nom d'utilisateur avec icône et validation visuelle --}}
        <div class="space-y-2">
            {{-- * Label accessible pour le nom d'utilisateur --}}
            <label for="name" class="block text-sm font-semibold text-gray-700">
                {{ __("auth.name") }}
            </label>
            <div class="relative">
                {{-- * Input nom avec validation conditionnelle et états visuels --}}
                <input
                    type="text"
                    id="name"
                    name="name"
                    class="w-full px-4 py-3 pl-11 border {{ $errors->has("name") ? "border-red-300 focus:ring-red-500" : "border-gray-300 focus:ring-blue-500" }} rounded-lg focus:ring-2 focus:border-transparent transition-all duration-200 text-gray-900 placeholder-gray-500"
                    value="{{ old("name") }}"
                    placeholder="{{ __("auth.username_placeholder") }}"
                    required
                    autofocus
                    autocomplete="name"
                />
                {{-- * Icône d'utilisateur décorative dans le champ nom --}}
                <div
                    class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"
                >
                    <svg
                        class="w-5 h-5 text-gray-400"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
                        />
                    </svg>
                </div>
            </div>
            {{-- * Affichage conditionnel des erreurs de validation pour le nom --}}
            @error("name")
                <div class="flex items-center text-red-600 text-sm">
                    <svg
                        class="w-4 h-4 mr-1"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                        />
                    </svg>
                    {{ $message }}
                </div>
            @enderror
        </div>

        {{-- * Champ email avec validation et indicateurs visuels d'état --}}
        <div class="space-y-2">
            {{-- * Label accessible pour l'adresse email --}}
            <label
                for="email"
                class="block text-sm font-semibold text-gray-700"
            >
                {{ __("auth.email") }}
            </label>
            <div class="relative">
                {{-- * Input email avec validation et feedback visuel --}}
                <input
                    type="email"
                    id="email"
                    name="email"
                    class="w-full px-4 py-3 pl-11 border {{ $errors->has("email") ? "border-red-300 focus:ring-red-500" : "border-gray-300 focus:ring-blue-500" }} rounded-lg focus:ring-2 focus:border-transparent transition-all duration-200 text-gray-900 placeholder-gray-500"
                    value="{{ old("email") }}"
                    placeholder="{{ __("auth.email_placeholder") }}"
                    required
                    autocomplete="email"
                />
                {{-- * Icône d'email décorative et informative --}}
                <div
                    class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"
                >
                    <svg
                        class="w-5 h-5 text-gray-400"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"
                        />
                    </svg>
                </div>
            </div>
            {{-- * Message d'erreur contextuel pour le champ email avec icône --}}
            @error("email")
                <div class="flex items-center text-red-600 text-sm">
                    <svg
                        class="w-4 h-4 mr-1"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                        />
                    </svg>
                    {{ $message }}
                </div>
            @enderror
        </div>

        {{-- * Champ mot de passe principal avec sécurité et validation --}}
        <div class="space-y-2">
            {{-- * Label accessible pour le mot de passe --}}
            <label
                for="password"
                class="block text-sm font-semibold text-gray-700"
            >
                {{ __("auth.password") }}
            </label>
            <div class="relative">
                {{-- * Input mot de passe avec validation et masquage automatique --}}
                <input
                    type="password"
                    id="password"
                    name="password"
                    class="w-full px-4 py-3 pl-11 border {{ $errors->has("password") ? "border-red-300 focus:ring-red-500" : "border-gray-300 focus:ring-blue-500" }} rounded-lg focus:ring-2 focus:border-transparent transition-all duration-200 text-gray-900 placeholder-gray-500"
                    placeholder="{{ __("auth.password_placeholder") }}"
                    required
                    autocomplete="new-password"
                />
                {{-- * Icône de cadenas pour identifier le champ mot de passe --}}
                <div
                    class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"
                >
                    <svg
                        class="w-5 h-5 text-gray-400"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
                        />
                    </svg>
                </div>
            </div>
            {{-- * Aide contextuelle pour guider la création d'un mot de passe sécurisé --}}
            <div class="text-xs text-gray-500 mt-1">
                {{ __('auth.password_hint') }}
            </div>
            {{-- * Gestion des erreurs de validation pour le mot de passe --}}
            @error("password")
                <div class="flex items-center text-red-600 text-sm">
                    <svg
                        class="w-4 h-4 mr-1"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                        />
                    </svg>
                    {{ $message }}
                </div>
            @enderror
        </div>

        {{-- * Champ confirmation de mot de passe pour vérifier la saisie --}}
        <div class="space-y-2">
            {{-- * Label accessible pour la confirmation de mot de passe --}}
            <label
                for="password_confirmation"
                class="block text-sm font-semibold text-gray-700"
            >
                {{ __("auth.confirm_password") }}
            </label>
            <div class="relative">
                {{-- * Input confirmation avec validation de correspondance --}}
                <input
                    type="password"
                    id="password_confirmation"
                    name="password_confirmation"
                    class="w-full px-4 py-3 pl-11 border {{ $errors->has("password_confirmation") ? "border-red-300 focus:ring-red-500" : "border-gray-300 focus:ring-blue-500" }} rounded-lg focus:ring-2 focus:border-transparent transition-all duration-200 text-gray-900 placeholder-gray-500"
                    placeholder="{{ __("auth.password_confirmation_placeholder") }}"
                    required
                    autocomplete="new-password"
                />
                {{-- * Icône de vérification pour la confirmation de mot de passe --}}
                <div
                    class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"
                >
                    <svg
                        class="w-5 h-5 text-gray-400"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                        />
                    </svg>
                </div>
            </div>
            {{-- * Gestion des erreurs pour la confirmation de mot de passe --}}
            @error("password_confirmation")
                <div class="flex items-center text-red-600 text-sm">
                    <svg
                        class="w-4 h-4 mr-1"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                        />
                    </svg>
                    {{ $message }}
                </div>
            @enderror
        </div>

        {{-- * Case à cocher obligatoire pour l'acceptation des conditions légales --}}
        @php
            $termsLink = '<a href="' . route('terms', ['locale' => app()->getLocale()]) . '" target="_blank" class="text-blue-600 hover:text-blue-800 font-medium hover:underline">' . __('auth.terms_link_text') . '</a>';
            $privacyLink = '<a href="' . route('legal', ['locale' => app()->getLocale()]) . '" target="_blank" class="text-blue-600 hover:text-blue-800 font-medium hover:underline">' . __('auth.privacy_link_text') . '</a>';
        @endphp

        <div class="flex items-start">
            {{-- * Checkbox stylée pour l'acceptation des termes --}}
            <input
                type="checkbox"
                id="terms"
                name="terms"
                class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded transition-all duration-200 mt-0.5"
                required
            />
            {{-- * Label avec liens vers les documents légaux --}}
            <label
                for="terms"
                class="ml-3 text-sm text-gray-700 cursor-pointer"
            >
                {!! __('auth.accept_terms', ['terms' => $termsLink, 'privacy' => $privacyLink]) !!}
            </label>
        </div>

        {{-- * Section d'action principale avec bouton d'inscription --}}
        <div class="space-y-4">
            {{-- * Bouton de soumission principal avec gradient vert et animations --}}
            <button
                type="submit"
                class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg text-sm font-semibold text-white bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transform hover:-translate-y-0.5 transition-all duration-200"
            >
                {{-- * Icône d'inscription pour le bouton principal --}}
                <svg
                    class="w-5 h-5 mr-2"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
                    />
                </svg>
                {{ __("auth.register") }}
            </button>
        </div>
    </form>

    {{-- * Section de navigation vers la connexion avec séparateur décoratif --}}
    <div class="mt-8">
        {{-- * Séparateur horizontal avec texte informatif --}}
        <div class="relative">
            <div class="absolute inset-0 flex items-center">
                <div class="w-full border-t border-gray-300"></div>
            </div>
            <div class="relative flex justify-center text-sm">
                <span class="px-2 bg-white text-gray-500">
                    {{ __('auth.already_registered') }}
                </span>
            </div>
        </div>

        {{-- * Lien d'action secondaire vers la connexion --}}
        <div class="mt-6 text-center">
            <a
                href="{{ route("login") }}"
                class="inline-flex items-center px-4 py-2 border border-blue-600 text-blue-600 hover:bg-blue-50 rounded-lg text-sm font-medium transition-colors duration-200"
            >
                {{-- * Icône de connexion pour le lien secondaire --}}
                <svg
                    class="w-4 h-4 mr-2"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
                    />
                </svg>
                {{ __("auth.login_button") }}
            </a>
        </div>
    </div>

    {{-- * Section informative sur la sécurité et la confidentialité --}}
    <div class="mt-8 bg-blue-50 border border-blue-200 rounded-lg p-4">
        <div class="flex items-start">
            {{-- * Icône de sécurité pour rassurer l'utilisateur --}}
            <svg
                class="w-5 h-5 text-blue-600 mr-2 mt-0.5"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
            >
                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
                />
            </svg>
            {{-- * Texte informatif sur la protection des données --}}
            <div class="text-blue-800 text-xs">
                <p class="font-medium mb-1">{{ __('auth.privacy_heading') }}</p>
                <p>{{ __('auth.privacy_description') }}</p>
            </div>
        </div>
    </div>
@endsection