@extends('layouts.auth')

@section('title', 'Connexion - NafaPOS')

@section('content')

    <div class="nafa-auth-card">

        {{-- =====================================================
             HEADER
        ====================================================== --}}

        <div class="nafa-auth-header">

            <div class="nafa-auth-logo">
                <i class="bi bi-shop"></i>
            </div>

            <div class="nafa-auth-brand">
                Nafa<span>POS</span>
            </div>

            <p class="nafa-auth-subtitle">
                Connectez-vous à votre espace de gestion
            </p>

        </div>


        {{-- =====================================================
             FORMULAIRE
        ====================================================== --}}

        <div class="nafa-auth-body-content">

            @if (session('status'))

                <div class="nafa-auth-alert">
                    {{ session('status') }}
                </div>

            @endif


            @if ($errors->any())

                <div class="nafa-auth-alert">

                    <div class="fw-semibold mb-1">
                        Impossible de vous connecter
                    </div>

                    <div>
                        Vérifiez votre adresse e-mail et votre mot de passe.
                    </div>

                </div>

            @endif


            <form
                method="POST"
                action="{{ route('login') }}"
            >

                @csrf


                {{-- EMAIL --}}

                <div class="mb-3">

                    <label
                        for="email"
                        class="nafa-auth-label"
                    >
                        Adresse e-mail
                    </label>

                    <div class="nafa-auth-input-group">

                        <i class="bi bi-envelope nafa-auth-input-icon"></i>

                        <input
                            id="email"
                            type="email"
                            class="form-control nafa-auth-input @error('email') is-invalid @enderror"
                            name="email"
                            value="{{ old('email') }}"
                            placeholder="exemple@email.com"
                            autocomplete="email"
                            required
                            autofocus
                        >
                    </div>

                    @error('email')
                        <div class="nafa-auth-error">
                            {{ $message }}
                        </div>
                    @enderror
                </div>

                {{-- MOT DE PASSE --}}
                <div class="mb-2">
                    <label
                        for="password"
                        class="nafa-auth-label"
                    >
                        Mot de passe
                    </label>

                    <div class="nafa-auth-input-group">

                        <i class="bi bi-lock nafa-auth-input-icon"></i>

                        <input
                            id="password"
                            type="password"
                            class="form-control nafa-auth-input @error('password') is-invalid @enderror"
                            name="password"
                            placeholder="Votre mot de passe"
                            autocomplete="current-password"
                            required
                            style="padding-right: 45px;"
                        >

                        <button
                            type="button"
                            class="nafa-password-toggle"
                            data-password-toggle="password"
                            aria-label="Afficher le mot de passe"
                        >
                            <i class="bi bi-eye"></i>
                        </button>

                    </div>

                    @error('password')
                        <div class="nafa-auth-error">
                            {{ $message }}
                        </div>
                    @enderror
                </div>

                {{-- OPTIONS --}}
                <div class="nafa-auth-options">

                    <div class="form-check">

                        <input
                            class="form-check-input"
                            type="checkbox"
                            name="remember"
                            id="remember"
                            {{ old('remember') ? 'checked' : '' }}
                        >

                        <label
                            class="form-check-label"
                            for="remember"
                        >
                            Se souvenir de moi
                        </label>

                    </div>


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

                        <a
                            href="{{ route('password.request') }}"
                            class="nafa-auth-forgot"
                        >
                            Mot de passe oublié ?
                        </a>

                    @endif

                </div>

                {{-- BOUTON --}}
                <button
                    type="submit"
                    class="nafa-auth-button"
                >

                    <i class="bi bi-box-arrow-in-right"></i>

                    Se connecter

                </button>

            </form>

        </div>


        {{-- =====================================================
             FOOTER
        ====================================================== --}}

        @if (Route::has('register'))

            <div class="nafa-auth-footer">

                Vous n'avez pas encore de compte ?

                <a href="{{ route('register') }}">
                    Créer un compte
                </a>

            </div>

        @endif

    </div>

@endsection