@extends('layouts.app')

@section('content')
<div class="container-xxl pt-5">
    <div class="container">
        <form method="post" action="{{ secure_url('connexion') }}" class="form form-connexion">
            @csrf
            <input type="hidden" name="paiement_type" value="{{ request()->get('paiement') }}" />

            <div class="row justify-content-center">
                <div class="col-md-6 wow fadeInUp mb-4" data-wow-delay="0s">
                    <div class="p-4 bg-grey border-radius-10 inscription_panel_left">
                        <div class="text-center wow fadeInUp" data-wow-delay="0s">
                            <div class="my-4 double-circle-gold" style="margin: auto;">
                                <span><i class="fa-regular fa-user text-gold"></i></span>
                            </div>
                            <h2 class="text-gold-or-white">Connectez-vous</h2>
                        </div>
                        <div class="row justify-content-center">
                            <div class="col-md-8 col-sm-12 wow fadeInUp" data-wow-delay="0s">

                                @if ($errors->any())
                                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                        @foreach ($errors->all() as $error)
                                            <p>{{ $error }}</p>
                                        @endforeach
                                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                    </div>
                                @endif

                                <div class="alert alert-danger alert-dismissible fade show" role="alert" style="display: none;">
                                    <p class="error_message"></p>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>

                                <div class="form-group my-4">
                                    <label class="control-label" for="email">Votre email</label>
                                    <div class="input-group">
                                        <div class="input-group-addon">
                                            <i class="fa-regular fa-envelope text-white-or-primary-color"></i>
                                        </div>
                                        <input type="text" class="form-control ps-2" id="email" name="email" placeholder="Votre email..." required autocomplete="email" />
                                    </div>
                                </div>

                                <div class="form-group my-4">
                                    <label class="control-label" for="password">Votre mot de passe</label>
                                    <div class="input-group">
                                        <div class="input-group-addon">
                                            <i class="fa-regular fa-lock-keyhole text-white-or-primary-color"></i>
                                            <div class="unmask_password"><i class="fa-solid fa-eye"></i></div>
                                        </div>
                                        <input type="password" class="form-control ps-2 password" id="password" name="password" placeholder="Votre mot de passe..." required autocomplete="current-password" />
                                    </div>
                                </div>

                                @if((env('APPLICATION_SWITCHER', false) === true || env('APPLICATION_SWITCHER') === 'true') && isset($applications) && $applications->count() > 0)
                                    <div class="form-group my-4">
                                        <label class="control-label" for="application_id">Application <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <div class="input-group-addon">
                                                <i class="fa-regular fa-th-large text-white-or-primary-color"></i>
                                            </div>
                                            <select class="form-control ps-2" id="application_id" name="application_id" required>
                                                <option value="">Sélectionner une application</option>
                                                @foreach($applications as $application)
                                                    <option value="{{ $application->id }}" {{ old('application_id') == $application->id ? 'selected' : '' }}>
                                                        {{ $application->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        @error('application_id')
                                            <span class="text-danger small">{{ $message }}</span>
                                        @enderror
                                    </div>
                                @endif

                                <div class="form-group my-4 d-grid gap-2 d-sd-block">
                                    <input type="hidden" name="url_from" value="{{ url()->current() }}" />
                                    <button type="submit" class="btn btn-primary py-2 px-4 animated slideInDown">Me connecter</button>
                                    <button type="button" onclick="location.href='{{ secure_url('mot-de-passe-oublie') }}'" class="btn text-gold py-2 px-4 animated slideInDown"><i class="fa-regular fa-lock-keyhole"></i> J'ai oublié mon mot de passe</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection