@extends('auth.layouts.app')

@section('title', 'Connexion - ePerformance+')

@section('content')
<!-- -------------------------------------------------------------- -->
<!-- Login box.scss -->
<!-- -------------------------------------------------------------- -->



<div class="row auth-wrapper gx-0">
    <div class="col-lg-4 col-xl-3 bg-info auth-box-2 on-sidebar" style="background-color: rgb(8, 91, 93) !important">
        <div class="h-100 d-flex align-items-center justify-content-center">
            <div class="row justify-content-center text-center">
                <div class="col-md-7 col-lg-12 col-xl-9">
                    {{-- <div>
                        <span class="db"><img src="{{ asset('template/src/assets/images/logos/logo-light-icon.png') }}"
                                alt="logo" /></span>
                        <span class="db"><img src="{{ asset('template/src/assets/images/logos/logo-light-text.png') }}"
                                alt="logo" /></span>
                    </div> --}}
                        <h1 class="mb-0 fw-bold text-black">
                            <span class="text-white">U</span><span class="text-white">AC-</span><span class="text-warning fw-bolder">eServices</span>
                        </h1>
                    <h2 class="text-white mt-4 fw-light">Application Professionnelle de <span class="font-weight-medium">Gestion Administrative</span></h2>
                    <p class="op-5 text-white fs-4 mt-4">Modernisez vos processus administratifs avec notre plateforme centralisée.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-8 col-xl-9 d-flex align-items-center justify-content-center">
        <div class="row justify-content-center w-100 mt-4 mt-lg-0">
            <div class="col-lg-6 col-xl-3 col-md-8">
                <div class="card shadow-lg">
                    <div class="card-body p-4">
                        <h2>Connexion à <span class="text-black">U</span><span class="text-black">AC-</span><span class="text-warning fw-bolder">eServices</span></h2>
                        <p class="text-muted fs-4">Entrez vos identifiants pour accéder à votre compte</p>

                        @if (session('success'))
                            <div class="alert alert-success alert-dismissible fade show">
                                <i class="mdi mdi-check-circle me-2"></i>
                                <strong>{{ session('success') }}</strong>
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        @endif

                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <strong>Erreur de connexion :</strong>
                                <ul class="mb-0 mt-2">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form class="form-horizontal mt-4 pt-4 needs-validation" novalidate method="POST" action="{{ route('login') }}">
                            @csrf
                            <div class="form-floating mb-3">
                                <input type="email" class="form-control form-input-bg @error('email') is-invalid @enderror" id="tb-email"
                                    name="email" value="{{ old('email') }}" placeholder="name@example.com" required>
                                <label for="tb-email">Email</label>
                                @error('email')
                                    <div class="invalid-feedback d-block">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="form-floating mb-3">
                                <input type="password" class="form-control form-input-bg @error('password') is-invalid @enderror" id="text-password"
                                    name="password" placeholder="*****" required>
                                <label for="text-password">Mot de passe</label>
                                @error('password')
                                    <div class="invalid-feedback d-block">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="d-flex align-items-center justify-content-between mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="remember" value="" id="r-me1">
                                    <label class="form-check-label" for="r-me1">
                                        Se souvenir de moi
                                    </label>
                                </div>
                                <a href="{{ route('password.request') }}" class="text-info text-decoration-none">
                                    <small>Mot de passe oublié ?</small>
                                </a>
                            </div>
                            <div class="d-flex align-items-stretch button-group mt-4 pt-2">
                                <button type="submit" class="btn btn-info btn-lg px-4">Se connecter</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@fingerprintjs/fingerprintjs@3/dist/fp.min.js"></script>
<script>
  FingerprintJS.load().then(fp => {
    fp.get().then(result => {
      const deviceId = result.visitorId;
      console.log("Device ID:", deviceId);

      // Sauvegarder après connexion  réussie
      document.querySelector('form').addEventListener('submit', function () {
        localStorage.setItem('device_id', deviceId);
      });
    });
  });
</script>


<!-- -------------------------------------------------------------- -->
<!-- Login box.scss -->
<!-- -------------------------------------------------------------- -->
@endsection