@extends('auth.layout.app')

@section('title', config('app.name') . ' - Connexion')

@section('content')

@php
    use Laravel\Fortify\Features;
@endphp

@if (session('otp_pending_user_id'))

{{-- ────────── ÉTAPE 2 : Code OTP ────────── --}}
<div class="kt-card max-w-md w-full">
    <div class="kt-card-content flex flex-col gap-5 p-10">

        <div class="flex justify-center py-4">
            <div class="flex items-center justify-center w-16 h-16 rounded-full bg-primary/10">
                <i class="ki-outline ki-shield-tick text-primary text-3xl"></i>
            </div>
        </div>

        <div class="text-center mb-2.5">
            <h3 class="text-lg font-medium text-mono leading-none mb-2.5">
                {{ __('auth.otp.title') }}
            </h3>
            <p class="text-sm text-secondary-foreground">
                {{ __('auth.otp.description') }}
            </p>
        </div>

        @if ($errors->has('otp'))
            <div class="kt-alert kt-alert-destructive kt-alert-light text-destructive">
                {{ $errors->first('otp') }}
            </div>
        @endif

        <form method="POST" action="{{ route('login.otp') }}" class="flex flex-col gap-5">
            @csrf

            <div class="flex flex-col gap-1">
                <div class="kt-input kt-input-lg">
                    <i class="ki-outline ki-key text-gray-500"></i>
                    <input
                        id="otp"
                        name="otp"
                        type="text"
                        inputmode="numeric"
                        autocomplete="one-time-code"
                        class="kt-input tracking-widest text-center text-xl font-semibold"
                        placeholder="{{ __('auth.otp.placeholder') }}"
                        maxlength="6"
                        autofocus
                    >
                </div>
            </div>

            <button type="submit" class="kt-btn kt-btn-primary flex justify-center grow">
                {{ __('auth.otp.action') }}
            </button>
        </form>

        <form method="POST" action="{{ route('login.otp.cancel') }}">
            @csrf
            <button type="submit" class="kt-btn kt-btn-ghost w-full justify-center text-sm">
                {{ __('auth.otp.cancel') }}
            </button>
        </form>

    </div>
</div>

@else

{{-- ────────── ÉTAPE 1 : Login ────────── --}}
<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-[120px] mb-3 mx-auto" src="{{asset('assets/media/app/logo.png')}}" />
            <h3 class="text-lg font-medium text-mono leading-none mb-2.5">
                {{ __('auth.login.title') }}
            </h3>

            @if (Features::enabled(Features::registration()))
                <div class="flex items-center justify-center font-medium">
                    <span class="text-sm text-secondary-foreground me-1.5">
                        {{ __('auth.login.need_account') }}
                    </span>
                    <a class="text-sm link" href="{{ route('register') }}">
                        {{ __('auth.register.title') }}
                    </a>
                </div>
            @endif
        </div>

        {{-- Validation errors --}}
        @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

        @if (session('status'))
             <div class="kt-alert kt-alert-light kt-alert-success">
                {{ session('status') }}
            </div>
        @endif

        {{-- Login form --}}
        <form method="POST"
              action="{{ route('login.store') }}"
              class="flex flex-col gap-5"
              id="sign_in_form"
              >
            @csrf

        {{-- Email --}}
        <div class="flex flex-col gap-1">
            <div class="kt-input kt-input-lg">
                <i class="ki-outline ki-sms text-gray-500 "></i>
                <input
                    id="email"
                    name="email"
                    type="email"
                    class="kt-input"
                    placeholder="{{ __('auth.placeholders.email') }}"
                    value="{{ old('email') }}"
                    required
                    autofocus
                    autocomplete="email">
            </div>
        </div>

        {{-- Password --}}
        <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="{{ __('auth.placeholders.password') }}"
                required
                autocomplete="current-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>


            {{-- Remember me --}}
             <div class="flex items-center justify-between gap-1">
            <label class="kt-label">
                <input
                    class="kt-checkbox kt-checkbox-sm"
                    name="remember"
                    type="checkbox"
                    value="1"
                    {{ old('remember') ? 'checked' : '' }}
                >
                <span class="kt-checkbox-label text-sm">
                    {{ __('auth.login.remember_me') }}
                </span>
            </label>

                @if (Route::has('password.request'))
                    <a class="text-xs font-medium text-blue-500 hover:underline" href="{{ route('password.request') }}">
                        {{ __('auth.login.forgot_password') }}
                    </a>
                @endif
            </div>

            {{-- Submit --}}
            <button
                type="submit"
                class="kt-btn kt-btn-primary flex justify-center grow"
                data-test="login-button"
            >
                {{ __('auth.login.action') }}
            </button>
        </form>

        <x-auth.social-login-buttons />
    </div>

</div>

@endif

@endsection