@extends("layouts.layout_home")
@section("contenu")
    <div class="row col-10 mx-auto">
        <div class="col-10 mt-3 mx-auto"><h1>Bienvenue sur opathèque</h1></div>
        @if ($errors->any())
            <div class="row col-10 mx-auto mt-3 alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <form name="form_login" method="POST" action="" class="col-10 mx-auto mt-3">
            @csrf
            <div class="form-group">
                <label for="Mail">Login ou email</label>
                <input type="text" class="form-control" id="Mail" name="Mail" placeholder="Login ou email *">
            </div>
            <div class="form-group">
                <label for="Mdp">Mot de passe</label>
                <input type="password" class="form-control" id="Mdp" name="Mdp" placeholder="Mot de passe *">
                <div class="password-icon">
                    <i class="fa-solid fa-eye"></i>
                    <i class="fa-solid fa-eye-slash"></i>
                </div>
            </div>
            <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="remember_me" name="remember_me">
                <label class="form-check-label" for="remember_me">Se souvenir de moi</label>
            </div>
            <div class="row col-12 mb-3"><a href="{{ url('/') }}/mdp-oublie">Mot de passe oublié ?</a></div>
            <button type="submit" class="btn btn-success col-12" id="btn-submit-login">Se connecter</button>
        </form>
    </div>
    <script>
        const eye = document.querySelector(".fa-eye");
        const eyeoff = document.querySelector(".fa-eye-slash");
        const passwordField = document.querySelector("input[name='Mdp']");

        eye.addEventListener("click", () => {
          eye.style.display = "none";
          eyeoff.style.display = "block";
          passwordField.type = "text";
        });

        eyeoff.addEventListener("click", () => {
          eyeoff.style.display = "none";
          eye.style.display = "block";
          passwordField.type = "password";
        });
    </script>
@endsection