@extends('layouts.auth')

@section('metaTitle', __('Login'). ' - BankKeys')

@section('content')
<div class="nk-block nk-block-middle nk-auth-body wide-xs" x-data="{ submit: false, email: '', password: '' }">
    <div class="brand-logo pb-4 text-center">
        <a href="{{ route('home') }}" class="logo-link">
            <img  src="{{ asset('img/logo.png') }}" class="logo-dark logo-img logo-img-lg" 
                :class="{'spin': submit}" alt="logo-dark">
        </a>
    </div>
    <div class="card card-bordered">
        <div class="card-inner card-inner-lg">
            <div class="nk-block-head">
                <div class="nk-block-head-content">
                    <h4 class="nk-block-title">Connexion</h4>
                    <div class="nk-block-des">
                        <p>Accédez à votre espace pro BankKeys.</p>
                    </div>
                </div>
            </div>
            <form method="POST" action="{{ route('login') }}">
                @csrf
                <div class="form-group">
                    <div class="form-label-group">
                        <label class="form-label">Email</label>
                    </div>
                    <div class="form-control-wrap">
                        <input id="email" name="email" type="text" x-model="email" class="form-control  form-control-lg @error('email') is-invalid @enderror" placeholder="Email" value="{{ old('email') }}" required>
                        @error('email')
                        <span class="invalid" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-label-group">
                        <label class="form-label" for="password">Mot de passe</label>
                        @if (Route::has('password.request'))
                            <a href="{{ route('password.request') }}" class="link link-primary link-sm">Mot de passe oublié?</a>
                        @endif
                    </div>
                    <div class="form-control-wrap" x-data="{showPassword: false, type: 'password'}">
                        <span class="form-icon form-icon-right passcode-switch lg cursor-pointer">
                            <em class="passcode-icon icon icon-show ni ni-eye" 
                                x-on:click="showPassword = true; type = 'text'" 
                                x-show="! showPassword">
                            </em>
                            <em class="passcode-icon icon icon-show ni ni-eye-off" 
                                x-on:click="showPassword = false; type = 'password'" 
                                x-show="showPassword">
                            </em>
                        </span>
                        <input id="password" 
                            name="password" 
                            x-bind:type="type"
                            x-model="password" 
                            class="form-control form-control-lg  
                            @error('password') is-invalid @enderror" 
                            placeholder="Mot de passe" 
                            autocomplete="current-password"
                            required
                        >
                        @error('password')
                        <span class="invalid" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                </div>
                @if (session('status'))
                <div class="alert alert-info" role="alert">
                    {{ session('status') }}
                </div>
                @endif
                @if (session('error'))
                <div class="alert alert-danger" role="alert">
                    {{ session('error') }}
                </div>
                @endif
                @if (session('success'))
                <div class="alert alert-success" role="alert">
                    {{ session('success') }}
                </div>
                @endif
                <div class="form-group">
                    <button type="submit" class="btn btn-lg btn-primary btn-block"
                        x-on:click="submit = (email && password)"
                        :class="{'spinner spinner-light spinner-right disabled': submit}"
                    >Connexion</button>
                </div>
            </form>
            {{-- @if ($errors->any())
            <div class="alert alert-danger" role="alert">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif --}}
            {{-- <div class="form-note-s2 text-center pt-4"> 
                Pas encore inscrit ? <a href="{{ route('register') }}">Créer un compte</a>
            </div> --}}
        </div>
    </div>
</div>
<div class="nk-footer nk-auth-footer-full">
    <div class="container wide-lg">
        <div class="row g-3">
            <div class="col-lg-6 order-lg-last">
                <ul class="nav nav-sm justify-content-center justify-content-lg-end">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('terms') }}">Conditions Générales</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('legal') }}">Mentions Légales</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('privacy') }}">Politique de Confidentialité</a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-6">
                <div class="nk-block-content text-center text-lg-left">
                    <p class="text-soft">&copy; {{ date('Y') }}  BankKeys. {{ __('All Rights Reserved') }}.</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection