@extends('base_html')
@section('title', 'Connexion administration')
@section('meta_content_description', 'totati')
@section('meta_robots', 'noindex,nofollow')
@section('content')
    <section>
        @include('partial.titlebanner', [
            'firstPartTitle' => 'Administration',
        ])
        <div class="flex flex-col items-center">
            <div class="w-1/2">
                @include('partial.textWrapedBorder', [
                    'text' => 'Bonjour ' . config('mail.from.name') . ',',
                ])
            </div>
            <small class="tracking-widest text-center">Bienvenue dans l'interface de connexion à l'administration.</small>
        </div>
        <div class="flex justify-center py-10">
            <div class="w-1/2">
                <form method="post" action="{{ route('auth-secure-login-send') }}" x-data="{ loading: false, viewPassword: false }"
                    @submit="loading = true">
                    @csrf
                    <div class="relative mb-4">
                        <label for="email" class="leading-7 text-sm text-dark">Email</label>
                        <input type="email" id="email" name="email" value="{{ old('email') }}"
                            class="@error('email') is-invalid @enderror w-full bg-white rounded border border-secondary/90 focus:border-accent focus:ring-2 focus:ring-accent/50 text-base outline-none text-dark py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
                        @error('email')
                            <div class="text-red-600"><small>{{ $message }}</small></div>
                        @enderror
                    </div>
                    <div class="relative mb-4">
                        <label for="pass" class="leading-7 text-sm text-dark">Mot de passe</label>
                        <div class="relative w-full">
                            <span class="absolute inset-y-0 right-0 flex items-center p-3 cursor-pointer">
                                <!-- Icône SVG -->
                                <i x-show="!viewPassword" class="fa-regular fa-eye"
                                    @click="viewPassword = !viewPassword"></i>
                                <i x-show="viewPassword" class="fa-regular fa-eye-slash"
                                    @click="viewPassword = !viewPassword"></i>
                            </span>

                            <input :type="viewPassword ? 'text' : 'password'" id="pass" name="pass"
                                value="{{ old('pass') }}"
                                class="@error('pass') is-invalid @enderror w-full bg-white rounded border
                                    border-secondary/90 focus:border-accent focus:ring-2 focus:ring-accent/50
                                    text-base outline-none text-dark py-1 px-3 leading-8 transition-colors duration-200
                                    ease-in-out">
                        </div>
                        @error('pass')
                            <div class="text-red-600"><small>{{ $message }}</small></div>
                        @enderror
                    </div>
                    @if (session('successLogin'))
                        <div class="py-2" x-data="{ remove: false }" x-on:click="remove = !remove">
                            <div x-show="!remove"
                                class="cursor-pointer w-full p-3 bg-accent opacity-60 rounded shadow-2xl text-ultraLight tracking-widest">
                                {{ session('successLogin') }}
                            </div>
                        </div>
                    @endif
                    <button type="submit" :disabled="loading"
                        class="w-full text-ultraLight bg-dark border-0 py-2 px-6 focus:outline-none hover:bg-dark/90 rounded text-lg disabled:opacity-50 disabled:cursor-not-allowed">
                        <span x-show="!loading">
                            Ce connecter
                        </span>
                        <!-- Loader -->
                        <span x-show="loading" class="flex items-center justify-center gap-2">
                            <svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none"
                                viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                    stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
                            </svg>
                            Connexion...
                        </span>
                    </button>
                </form>
            </div>
        </div>
    </section>
@endsection