@extends('layouts.login')

@section('content')
<div class="login-wrapper">
    <!-- Version mobile et tablette -->
    <div class="mobile-tablet-view">
        <div class="image-container">
            <img src="{{ asset('storage/assets/charte/'.env('IMAGELOGIN').'') }}" alt="Background" class="background-image">
        </div>
        <div class="login-form-container">
            <div class="logo-container">
                <img src="{{ asset('storage/assets/charte/'.env('LOGOCLIENT').'') }}" alt="Logo" class="logo">
            </div>
            <form method="POST" action="{{ route('login') }}">
                @csrf
                <div class="form-group">
                    <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus placeholder="Email">
                    @error('email')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
                <div class="form-group">
                    <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password" placeholder="Mot de passe">
                    @error('password')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary btn-block">
                        Connexion
                    </button>
                </div>
                @if (env('ACTIVE_GOOGLE_CONNECT') == 1)
                <a href="{{ route('auth.google') }}" class="btn btn-light btn-lg btn-block text-left" style="border: 1px solid #d6d9dc; border-radius: 4px;">
                    <img src="{{url('/images/icons/google-icon.svg')}}" alt="Google Icon" style="width: 20px; vertical-align: middle; margin-right: 10px; margin-bottom: 2px;">
                    Connexion avec Google
                </a>
                @endif
                <div class="form-group text-center">
                    @if (Route::has('password.request'))
                        <a class="btn btn-link" href="{{ route('password.request') }}">
                            Mot de passe oublié ?
                        </a>
                    @endif
                </div>
            </form>
        </div>
    </div>

    <!-- Version desktop -->
    <div class="desktop-view vh-100">
        <div class="container-fluid h-100">
            <div class="row h-100">
                <div class="col-12 col-md-6 col-lg-7 p-0" style="background-image: url('{{ asset('storage/assets/charte/'.env('IMAGELOGIN').'') }}'); background-size: cover; background-position: center;"></div>
                <div class="col-12 col-md-6 col-lg-5 d-flex flex-column" id="blocLogin">
                    <div class="flex-grow-1 d-flex flex-column justify-content-center">
                        <div class="text-center mb-4">
                            <img src="{{ asset('storage/assets/charte/'.env('LOGOCLIENT').'') }}" class="img-fluid" alt="Logo client" />
                        </div>
                        <form class="form-center" method="post" action="{{ route('login') }}">
                            <div class="panel">
                                <h3 class="panel-header text-center">{{ __('Connexion') }}</h3>
                                <div class="panel-body">
                                    @csrf
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fa fa-user"></i></span>
                                        </div>
                                        <input id="email" type="text" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
                                        @error('email')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fa fa-key"></i></span>
                                        </div>
                                        <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
                                        @error('password')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                    <div class="custom-control custom-checkbox d-flex justify-content-between mb-3">
                                        <input type="checkbox" id="remember" name="remember" class="custom-control-input">
                                        <label class="custom-control-label" for="remember">
                                            <small>{{ __('Rester connecté') }}</small>
                                        </label>
                                        <small><a href="{{ route('mdpperdu') }}">{{ __('Mot de passe oublié') }}</a></small>
                                    </div>
                                    <button class="btn btn-lg btn-primary btn-block mb-3 cnx-btn" type="submit">{{ __('Connexion') }}</button>
                                    @if (env('ACTIVE_GOOGLE_CONNECT') == 1)
                                    <a href="{{ route('auth.google') }}" class="btn btn-light btn-lg btn-block text-left" style="border: 1px solid #d6d9dc; border-radius: 4px;">
                                        <img src="{{url('/images/icons/google-icon.svg')}}" alt="Google Icon" style="width: 20px; vertical-align: middle; margin-right: 10px; margin-bottom: 2px;">
                                        Connexion avec Google
                                    </a>
                                    @endif
                                </div>
                            </div>
                        </form>
                    </div>
                    @if(env('LOGOREVENDEUR'))
                    <div class="text-center mb-3">
                        <img src="{{ asset('storage/assets/charte/'.env('LOGOREVENDEUR').'') }}" class="img-fluid" alt="Logo revendeur" />
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
</div>
{{-- <div class="col-12 col-md-6 col-lg-5 d-flex flex-column position-relative" id="blocLogin" style="height: 100vh; overflow: hidden;">
    <div class="my-auto">
        <div class="text-center"><img src="{{ asset('storage/assets/charte/'.env('LOGOCLIENT').'') }}" class="img-fluid" /></div>
        <div class="h-20"></div>
        <form class="form-center" method="post" action="{{ route('login') }}">
            <div class="panel">
                <h3 class="panel-header">{{ __('Connexion') }}</h3>
                <div class="panel-body">

                    @csrf

                    <div class="input-group mb-3">
                        <div class="input-group-append">
                            <span class="input-group-text"><i class="fa fa-user"></i></span>
                        </div>
                        <input id="email" type="text" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>

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


                    <div class="input-group mb-2">
                        <div class="input-group-append">
                            <span class="input-group-text"><i class="fa fa-key"></i></span>
                        </div>
                        <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">

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


                    <div class="custom-control custom-checkbox d-flex justify-content-between">
                        <input type="checkbox" id="rememberMe" name="remember-me" value="1" class="custom-control-input">
                        <label class="custom-control-label" for="rememberMe"><small>{{ __('Rester connecté') }}</small></label>

                        <small><a href="{{ route('mdpperdu') }}">{{ __('Mot de passe oublié') }}</a></small>
                    </div>

                    <button class="btn btn-lg btn-warning btn-block mt-2" type="submit">{{ __('Connexion') }}</button>

                    @if (env('ACTIVE_GOOGLE_CONNECT') == 1)
                    <a href="{{ route('auth.google') }}" class="btn btn-light btn-lg btn-block text-left mt-2" style="border: 1px solid #d6d9dc; border-radius: 4px;">
                        <img src="{{url('/images/icons/google-icon.svg')}}" alt="Google Icon" style="width: 20px; vertical-align: middle; margin-right: 10px; margin-bottom: 2px;">
                        Connexion avec Google
                    </a>
                    @endif

                </div>
            </div>

        </form>
    </div>
    @if(env('LOGOREVENDEUR'))
    <div class="text-center position-absolute w-100" style="bottom: 0;"><img src="{{ asset('storage/assets/charte/'.env('LOGOREVENDEUR').'') }}" class="img-fluid" /></div>
    @endif
</div> --}}
@if(session()->get('error'))
<script type="text/javascript">
  $.growl.error({ size: 'large', location: 'tc', title: "Erreur", message: "{{ session()->get('error') }}" });
</script>
@endif

@endsection