@extends('auth.layout.app')

@section('title', config('app.name') . ' - Définir mon mot de passe')

@section('content')

<div class="kt-card max-w-md w-full">
    <div class="kt-card-content flex flex-col gap-5 p-10">

        <div class="text-center mb-2.5">
            <img class="h-[100px] mb-3 mx-auto" src="{{ asset('assets/media/app/logo.png') }}" />
        </div>

        @if ($error === 'deleted')

            {{-- Compte supprimé --}}
            <div class="text-center">
                <div class="flex justify-center pb-10">
                <img alt="image" class="max-h-[130px]" src="{{asset('assets/media/illustrations/23.svg')}}">
            </div>
                <h3 class="text-lg font-medium text-mono mb-2.5">Compte introuvable</h3>
                <p class="text-sm text-secondary-foreground">
                    Ce compte n'existe plus ou a été supprimé. <br>Veuillez contacter un administrateur.
                </p>
            </div>

        @elseif ($error === 'expired')

            {{-- Lien expiré --}}
            <div class="text-center">
                <div class="flex justify-center pb-10">
                <img alt="image" class="max-h-[130px]" src="{{asset('assets/media/illustrations/23.svg')}}">
            </div>
            <div class="text-center">
                <h3 class="text-lg font-medium text-mono mb-2.5">Lien expiré</h3>
                <p class="text-sm text-secondary-foreground">
                    Ce lien de création de mot de passe a expiré.<br> Veuillez contacter un administrateur pour en obtenir un nouveau.
                </p>
            </div>

        @elseif ($error === 'used')

            {{-- Lien déjà utilisé --}}
            <div class="text-center">
                <div class="flex justify-center pb-10">
                <img alt="image" class="max-h-[130px]" src="{{asset('assets/media/illustrations/23.svg')}}">
            </div>
            <div class="text-center">
                <h3 class="text-lg font-medium text-mono mb-2.5">Compte déjà activé</h3>
                <p class="text-sm text-secondary-foreground">
                    Votre mot de passe a déjà été défini. Vous pouvez vous connecter directement.
                </p>
            </div>
            <a href="{{ route('login') }}" class="kt-btn kt-btn-primary flex justify-center grow">
                Se connecter
            </a>

        @else

            {{-- Formulaire --}}
            <div class="text-center mb-2.5">
                <h3 class="text-lg font-medium text-mono leading-none mb-2.5">
                    Bienvenue {{ $user->firstname }} !
                </h3>
                <p class="text-sm text-secondary-foreground">
                    Choisissez un mot de passe pour activer votre compte.
                </p>
            </div>

            @if ($errors->any())
                <div class="kt-alert kt-alert-destructive kt-alert-light text-destructive">
                    <ul class="list-disc ms-5">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form method="POST" class="flex flex-col gap-5">
                @csrf
                <input type="hidden" name="email" value="{{ $user->email }}" />

                {{-- Mot de passe --}}
                <div class="flex flex-col gap-1">
                    <div class="kt-input kt-input-lg" data-kt-toggle-password="true">
                        <i class="ki-outline ki-lock-2 text-gray-500"></i>
                        <input
                            id="password"
                            name="password"
                            type="password"
                            class="kt-input"
                            placeholder="Saisissez votre mot de passe"
                            required
                            autocomplete="new-password"
                        >
                        <button class="kt-btn kt-btn-sm kt-btn-ghost kt-btn-icon bg-transparent! -me-1.5"
                            data-kt-toggle-password-trigger="true" type="button"
                            aria-label="{{ __('auth.toggle_password') }}">
                            <span class="kt-toggle-password-active:hidden"><i class="ki-outline ki-eye text-muted-foreground"></i></span>
                            <span class="hidden kt-toggle-password-active:block"><i class="ki-outline ki-eye-slash text-muted-foreground"></i></span>
                        </button>
                    </div>
                    @error('password')
                        <span class="text-xs text-red-600">{{ $message }}</span>
                    @enderror
                </div>

                {{-- Confirmation --}}
                <div class="flex flex-col gap-1">
                    <div class="kt-input kt-input-lg" data-kt-toggle-password="true">
                        <i class="ki-outline ki-lock-2 text-gray-500"></i>
                        <input
                            id="password_confirmation"
                            name="password_confirmation"
                            type="password"
                            class="kt-input"
                            placeholder="Confirmez votre mot de passe"
                            required
                            autocomplete="new-password"
                        >
                        <button class="kt-btn kt-btn-sm kt-btn-ghost kt-btn-icon bg-transparent! -me-1.5"
                            data-kt-toggle-password-trigger="true" type="button"
                            aria-label="{{ __('auth.toggle_password') }}">
                            <span class="kt-toggle-password-active:hidden"><i class="ki-outline ki-eye text-muted-foreground"></i></span>
                            <span class="hidden kt-toggle-password-active:block"><i class="ki-outline ki-eye-slash text-muted-foreground"></i></span>
                        </button>
                    </div>
                    @error('password_confirmation')
                        <span class="text-xs text-red-600">{{ $message }}</span>
                    @enderror
                </div>

                <button type="submit" class="kt-btn kt-btn-primary flex justify-center grow">
                    Enregistrer et accéder à mon compte
                </button>
            </form>

        @endif

    </div>
</div>

@endsection