<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>GestStudent</title>
    <link rel="stylesheet" href="{{ asset('bootstrap4.5.2/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('fa5/css/all.css') }}">
</head>

<body style="background-color: #eee;">
    <div class="container mt-5 d-flex" style="min-height: 600px; font-size: 30px;">
        <div class="card col-lg-5 p-0 m-auto h-auto">
            <div class="card-header bg-secondary">
                <p class="text-light font-weight-bold" style="font-size: 80%;">GestStudent</p>
                <p class="text-light" style="font-size: 50%;">Connexion avec votre compte GestStudent</p>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('connexion_login') }}" class="col-lg-10 m-auto p-3">
                    @csrf
                    @if ($error ?? '')
                    <div class="alert alert-danger alert-dismissible fade show" style="font-size: 40%;" role="alert">
                        <strong style="font-size: 110%;">{{ $error }}</strong>
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    @endif
                    <input type="hidden" name="BD" value="{{ $BD }}">
                    <input type="hidden" name="CALLBACK_URL" value="{{ $CALLBACK_URL }}">
                    <label class="sr-only" for="username">Nom d'utilisateur</label>
                    <div class="mb-3">
                        @error('username')
                        <span class="float-right text-danger" style="font-size: 35%;">{{ $message }}</span>
                        @enderror
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <div class="input-group-text" style="font-size: 50%;">@</div>
                            </div>
                            <input type="text" class="form-control" name="username" style="font-size: 50%;" id="username" placeholder="Nom d'utilisateur" minlength="3" required>
                        </div>
                    </div>

                    <label class="sr-only" for="password">Mot de passe</label>
                    <div class="mb-3">
                        @error('password')
                        <span class="float-right text-danger" style="font-size: 35%;">{{ $message }}</span>
                        @enderror
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <div class="input-group-text" style="font-size: 50%;"><i class="fa fa-eye-slash" style="font-size: 80%" onclick="toggleShow(this)" style="cursor: pointer"></i></div>
                            </div>
                            <input type="password" class="form-control" name="password" style="font-size: 50%;" id="password" placeholder="Mot de passe" minlength="6" required>
                        </div>
                    </div>
                    <div class="d-flex align-items-center justify-content-between">
                        <span class="btn btn-outline-danger" onclick="location.href = '{{ $CALLBACK_URL }}?status=CANCELED'" style="font-size: 50%; width: 45%">Annuler</span>
                        <button type="submit" class="btn btn-secondary" style="font-size: 50%; width: 45%">Se connecter</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>
        const toggleShow = e => {
            if (e.classList.contains('fa-eye-slash')) {
                e.classList.replace('fa-eye-slash', 'fa-eye')
                document.getElementById('password').type = 'text'
            } else {
                e.classList.replace('fa-eye', 'fa-eye-slash')
                document.getElementById('password').type = 'password'
            }
        }
    </script>
    <script src="{{ asset('bootstrap4.5.2/js/jquery-3.5.1.slim.min.js') }}"></script>
    <script src="{{ asset('bootstrap4.5.2/js/bootstrap.min.js') }}"></script>
</body>

</html>
