@extends('layouts.auth')

@section('title')
    Login
@endsection

@section('content')
    <div class="auth-box">
        <div id="loginform">
            <div class="logo">
                <span class="db"><img src="{{asset('acceuil/img/logo_gest_calendar.png')}}" alt="logo" width="150" /></span><br><br>

                <h5 class="font-medium mb-3">Connexion</h5>
            </div>
            <!-- Form -->
            <div class="row">
                <div class="col-12">
                    <form class="form-horizontal mt-3" id="loginform" method="POST" action="{{ route('login') }}">
                        @csrf
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="basic-addon1"><i class="ti-user"></i></span>
                            </div>
                            <input type="text" class="form-control form-control-lg @error('email') is-invalid @enderror @error('username') is-invalid @enderror" placeholder="Email ou Nom d'utilisateur" aria-label="Email" aria-describedby="basic-addon1" name="username" value="{{ old('username') }}" required  autofocus id="username">

                            @error('email')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('email') }}</strong>
                                </span>
                            @enderror

                            @error('username')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('username') }}</strong>
                                </span>
                            @enderror
                        </div>

                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="basic-addon2"><i class="ti-pencil"></i></span>
                            </div>
                            <input id="password" type="password" class="form-control form-control-lg @error('password') is-invalid @enderror" placeholder="Mot de passe" aria-label="Password" aria-describedby="basic-addon1" name="password" required>

                            @error('password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>

                        {{-- <div class="form-group row">
                            <div class="col-md-12">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="customCheck1" {{ old('remember') ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="customCheck1">Se souvenir de moi</label>
                                    @if (Route::has('password.request'))
                                     <a href="{{ route('password.request') }}" id="to-recover" class="text-dark float-right"><i class="fa fa-lock mr-1"></i> Mot de passe oublié ?</a>
                                     @endif  
                                    </div>
                            </div>
                        </div> --}}

                        <div class="form-group text-center">
                            <div class="col-xs-12 pb-3">
                                <button class="btn btn-block btn-lg btn-info" type="submit">Se connecter</button>
                            </div>
                        </div>
                        <!-- <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12 mt-2 text-center">
                                <div class="social">
                                    <a href="javascript:void(0)" class="btn  btn-facebook" data-toggle="tooltip" title="" data-original-title="Login with Facebook"> <i aria-hidden="true" class="fab  fa-facebook"></i> </a>
                                    <a href="javascript:void(0)" class="btn btn-googleplus" data-toggle="tooltip" title="" data-original-title="Login with Google"> <i aria-hidden="true" class="fab  fa-google-plus"></i> </a>
                                </div>
                            </div>
                        </div> -->
                        <!-- <div class="form-group mb-0 mt-2">
                            <div class="col-sm-12 text-center">
                                Pas encore de compte? <a href="{{ route('register') }}" class="text-info ml-1"><b>S'inscrire</b></a>
                            </div>
                        </div> -->
                    </form>
                </div>
            </div>
        </div>
        <div id="recoverform">
            <div class="logo">
                <span class="db"><img src="{{asset('assets/images/logos/logo-icon.png')}}" alt="logo" /></span>
                <h5 class="font-medium mb-3">Recover Password</h5>
                <span>Enter your Email and instructions will be sent to you!</span>
            </div>
            <div class="row mt-3">
                <!-- Form -->
                <form class="col-12" action="{{ route('password.email') }}" method="post">
                    <!-- email -->
                    @csrf
                    <div class="form-group row">
                        <div class="col-12">
                            <input class="form-control form-control-lg" type="email" required="" placeholder="Username">
                        </div>
                    </div>
                    <!-- pwd -->
                    <div class="row mt-3">
                        <div class="col-12">
                            <button class="btn btn-block btn-lg btn-danger" type="submit" name="action">Reset</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection