@extends('dashboard.Boutique.auth.login._blank')
@section('content')
    <div class="col-xs-12 col-lg-12 vertical-center" style="background: url('{{asset('images/h2.jpg')}}') center no-repeat;background-size: cover;">

        <!-- form starts here -->
        <div class="row">
            <div class="col-md-3 col-sm-12 col-xs-12"></div>
            <form class="col-md-6 col-sm-12 col-xs-12" onsubmit="return check_error(['myInput','username']);" action="{{route('login')}}" method="post" id="login_form">
                
                <div class="row">
                    <div class="col-md-1 col-sm-12 col-xs-12"></div>

                    <div class="col-md-10 col-xs-12" style="background: #fff;padding: 5%;border-left: 5px solid #88b121;padding-top: 50px;border-radius:20px">

                    <div class=" col-sm-12 text-center" style="margin-bottom: 30px;">
                        <a href="{{url('/')}}"> <img src="{{asset('images/logo.png')}}" alt="" width="300px"></a>
                    </div>
        @csrf
        <div class="form-group">
            <label> Pseudo ou Email</label>
            <input type="text" name="email" class="form-control" placeholder="Email ou nom d'utilisateur" id="username" onblur="check_error(['username'])" data-input_name="email ou nom d'utilisateur" required="required" />
            <span id="errorusername"  style="color: red;"></span>
        </div>
                        <div class="form-group">
                            <label> Mot de passe</label>

                            <div class="input-group mb-3">
                                <input type="password" name="password" data-input_name="mot de passe" placeholder="Votre mot de passe" onblur="check_error(['myInput'])" class="form-control" required="required" id="myInput" aria-label="Recipient's username" aria-describedby="basic-addon2">
                                <div class="input-group-append">
                                    <button class="btn btn-outline-secondary" type="button" id="check3"  value="show password" onclick="myFunction()"><i class="fa fa-eye"></i></button>
                                </div>
                            </div>
                            <span id="errormyInput" style="color: red;"></span>

                        </div>

                    <div class="form-group">
                        <a href="{{url('password/reset')}}">Mot de passe oublié ?</a>
                    </div>
        <!-- script for show password -->
        <script>
            function myFunction() {
                var x = document.getElementById("myInput");
                if (x.type === "password") {
                    x.type = "text";
                } else {
                    x.type = "password";
                }
            }
        </script>
        <!-- //end script -->
        <div class="form-group">
            <div class="switch-agileits">
                <label class="switch">
                    <input type="checkbox" class="js-switch" checked name="remember" value="remember">
                    <span class="slider round"></span>
                    se souvenir de moi
                </label>
            </div>
        </div>

                        <div class="form-group">
                            <button type="submit" id="connection" class="btn btn-primary btn-xs">SE CONNECTER</button>
                        </div>
                        <p class="form-group" style="padding-top: 10px;">
                            Vous n'avez pas un compte ?<a href="{{route('register')}}" target="_blank"> inscrivez vous</a>
                        </p>
                </div>
                </div>
    </form>
    </div>
    </div>
@endsection