@php
    $customizerHidden = 'customizer-hide';
    $configData = Helper::appClasses();
    $pageConfigs = ['myLayout' => 'blank'];
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Connexion')

@section('page-style')
    @vite(['resources/assets/vendor/scss/pages/page-auth.scss', 'resources/assets/vendor/scss/pages/page-auth-cover-hero.scss'])
@endsection

@section('content')
    <div class="authentication-wrapper authentication-cover auth-cover-hero">
        <div class="authentication-inner row m-0">

            {{-- Colonne gauche : photo terrain + overlay + textes superposés --}}
            <div class="col-lg-6 d-none d-lg-flex auth-hero-side p-0">
                <div class="auth-hero-overlay"></div>

                <div class="auth-hero-content d-flex flex-column justify-content-between">
                    {{-- Header : logo + tagline --}}
                    <div class="d-flex align-items-center gap-3">
                        <img src="{{ asset('assets/img/logo/rdqa-logo.png') }}" height="48" width="48" alt="RDQA"
                            class="rounded-3 bg-white p-1">
                        <div class="text-white">
                            <div class="fw-bold" style="font-size: 1.1rem;">DQA-RDQA</div>
                            <small class="opacity-75">Plateforme d'évaluation qualité</small>
                        </div>
                    </div>

                    {{-- Bloc central bas : titre + sous-titre + chips --}}
                    <div class="text-white">
                        <h2 class="fw-bold mb-3" style="line-height: 1.2;">
                            Suivi centralisé de la qualité<br>des données sanitaires.
                        </h2>
                        <p class="lead mb-5 opacity-90">
                            Collectes DQA sur le terrain, analyses consolidées,<br>restitution aux structures.
                        </p>

                        <div class="d-flex gap-3 flex-wrap">
                            <div class="auth-hero-chip">
                                <i class="ti tabler-shield-check"></i>
                                <span>Accès sécurisé</span>
                            </div>
                            <div class="auth-hero-chip">
                                <i class="ti tabler-cloud-off"></i>
                                <span>Collectes offline</span>
                            </div>
                            <div class="auth-hero-chip">
                                <i class="ti tabler-chart-donut-4"></i>
                                <span>Résultats DQA</span>
                            </div>
                        </div>
                    </div>

                    {{-- Footer : mention légale --}}
                    <small class="text-white opacity-75">
                        &copy; {{ date('Y') }} Ministère de la Santé. Tous droits réservés.
                    </small>
                </div>
            </div>

            {{-- Colonne droite : card form épurée --}}
            <div class="col-lg-6 col-12 d-flex align-items-center justify-content-center auth-form-side p-4 p-sm-6">
                <div class="card auth-form-card w-100" style="max-width: 480px;">
                    <div class="card-body p-4 p-sm-5">

                        <div class="auth-secured-chip mb-3">
                            <i class="ti tabler-lock"></i>
                            <span>ESPACE SÉCURISÉ</span>
                        </div>

                        <h1 class="h3 fw-bold mb-2">Connexion</h1>
                        <p class="text-muted mb-5">
                            Renseignez vos identifiants pour accéder à votre tableau de bord.
                        </p>

                        <form id="loginForm" action="{{ route('login') }}" method="POST" novalidate>
                            @csrf

                            <div class="mb-4">
                                <label for="email" class="form-label">Adresse email</label>
                                <div class="input-group input-group-merge">
                                    <span class="input-group-text"><i class="ti tabler-user"></i></span>
                                    <input type="email" class="form-control @error('email') is-invalid @enderror"
                                        id="email" name="email" value="{{ old('email') }}"
                                        placeholder="votre.email@exemple.com" autofocus required />
                                </div>
                                @error('email')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-4 form-password-toggle">
                                <label for="password" class="form-label">Mot de passe</label>
                                <div class="input-group input-group-merge">
                                    <span class="input-group-text"><i class="ti tabler-lock"></i></span>
                                    <input type="password" id="password" name="password"
                                        class="form-control @error('password') is-invalid @enderror"
                                        placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                                        aria-describedby="password" required />
                                    <span class="input-group-text cursor-pointer"><i class="ti tabler-eye-off"></i></span>
                                </div>
                                @error('password')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-check mb-4">
                                <input class="form-check-input" type="checkbox" id="remember-me" name="remember"
                                    value="1" {{ old('remember') ? 'checked' : '' }} />
                                <label class="form-check-label" for="remember-me">Se souvenir de moi</label>
                            </div>

                            <button type="submit"
                                class="btn btn-auth-gradient w-100 py-2 fw-semibold d-flex justify-content-center align-items-center gap-2">
                                <span>Se connecter</span>
                                <i class="ti tabler-arrow-right"></i>
                            </button>
                        </form>

                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection