@extends('frontend.layouts.default')

@section('title', 'Connexion')

@section('content')
    <div id="auth-form" class="container-fluid position-relative d-flex p-0">
        <div class="container-fluid">
            <div class="row h-100 align-items-center justify-content-center" style="min-height: 100vh;">
                <div class="col-12 col-sm-11 col-md-9 col-lg-5 col-xl-4">
                    <div class="bg-primary rounded p-4 p-sm-5 my-4 mx-3">
                        <form action="{{ route('login.store') }}" method="post">
                            @csrf
                            <div class="d-flex align-items-center justify-content-center p-2 mb-3">
                                <a href="https://mcipme.gov.gn/" target="_blank">
                                    <img src="{{ url('assets/images/logos/logo_plaged.png') }}" width="400" alt="">
                                </a>
                            </div>
                            <div class="text-center mb-3">
                                {{-- <a href="{{ route('home') }}" class="text-decoration-none">
                                    <h3 class="text-secondary"><i class="fa fa-user-edit me-2"></i>PAI</h3>
                                </a> --}}
                                <h3 class="text-secondary"><i class="fa fa-user-edit me-2"></i>&nbsp;Connexion</h3>
                            </div>
                            <div class="form-floating mb-3">
                                <input type="email" name="email" value="{{ old('email') }}" class="form-control @error('email') is-invalid @enderror" id="floatingInput" placeholder="name@example.com">
                                <label for="floatingInput">Adresse email * :</label>
                                @error('email')
                                    <span class="invalid-feedback">
                                        {{ $message }}
                                    </span>
                                @enderror
                            </div>
                            <div class="form-floating mb-4">
                                <input type="password" name="password" class="form-control @error('password') is-invalid @enderror" id="floatingPassword" placeholder="Password">
                                <label for="floatingPassword">Mot de passe * :</label>
                                @error('password')
                                    <span class="invalid-feedback">
                                        {{ $message }}
                                    </span>
                                @enderror
                            </div>
                            <div class="d-flex align-items-center justify-content-between mb-4">
                                <div class="form-check">
                                    <input type="checkbox" name="remember" class="form-check-input" id="exampleCheck1">
                                    <label class="form-check-label text-secondary" for="exampleCheck1">Rester connecté</label>
                                </div>
                                <a href="{{ route('password.request') }}" class="text-secondary">Mot de passe oublié?</a>
                            </div>
                            <button type="submit" class="btn btn-secondary py-3 w-100 mb-4">Je me connecte</button>
                            <p class="text-center mb-0">
                                <div style="float: left">Ou
                                    <a href="{{ route('register') }}" title="Cliquer pour s'inscrire" class="text-secondary">
                                        S'inscrire
                                    </a>
                                </div>
                                <div style="float: right">
                                    <a href="{{ route('home') }}" title="Cliquer pour revenir à l'accueil" class="text-secondary text-end">
                                        Retour à l'accueil
                                    </a>
                                </div>
                            </p>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection