@extends('layouts.app')
@section('title', 'Connexion - LabConnect')
@section('content')
<div class="row justify-content-center align-items-stretch mt-4 g-0" style="min-height:70vh;">

    <div class="col-lg-6 d-none d-lg-flex flex-column justify-content-center p-5 text-white"
         style="background: linear-gradient(140deg, var(--brand-darker), var(--brand)); border-radius: 1rem 0 0 1rem;">
        <div style="max-width:420px;">
            <div class="fs-1 mb-3"><i class="bi bi-clipboard2-pulse"></i></div>
            <h2 class="fw-bold mb-3">LabConnect</h2>
            <p class="fs-5 opacity-75 mb-4">La plateforme du Laboratoire Bouaicha pour un suivi fiable et sans effort de vos prélèvements.</p>
            <ul class="list-unstyled fs-6">
                <li class="mb-3 d-flex align-items-start gap-2">
                    <i class="bi bi-check-circle-fill mt-1"></i>
                    <span>Zéro prélèvement perdu — chaque étape est tracée, du ramassage au dépôt au labo.</span>
                </li>
                <li class="mb-3 d-flex align-items-start gap-2">
                    <i class="bi bi-check-circle-fill mt-1"></i>
                    <span>Suivi en temps réel de vos demandes, où que vous soyez.</span>
                </li>
                <li class="mb-3 d-flex align-items-start gap-2">
                    <i class="bi bi-check-circle-fill mt-1"></i>
                    <span>Une demande en moins d'une minute, depuis votre téléphone.</span>
                </li>
            </ul>
        </div>
    </div>

    <div class="col-lg-6 col-md-8">
        <div class="card p-4 p-lg-5 h-100 d-flex justify-content-center" style="border-radius:0 1rem 1rem 0;">
            <div class="d-lg-none text-center mb-4">
                <div class="fs-1 text-primary"><i class="bi bi-clipboard2-pulse"></i></div>
                <h4 class="fw-bold">LabConnect</h4>
                <p class="text-muted small">Laboratoire Bouaicha</p>
            </div>
            <h4 class="mb-1 d-none d-lg-block">Connexion</h4>
            <p class="text-muted small mb-4 d-none d-lg-block">Accédez à votre espace partenaire, agent de collecte ou administration.</p>
            <form method="POST" action="{{ route('login') }}">
                @csrf
                <div class="mb-3">
                    <label class="form-label">Adresse e-mail</label>
                    <input type="email" name="email" class="form-control form-control-lg" value="{{ old('email') }}" required autofocus>
                </div>
                <div class="mb-3">
                    <label class="form-label">Mot de passe</label>
                    <input type="password" name="password" class="form-control form-control-lg" required>
                </div>
                <div class="form-check mb-4">
                    <input type="checkbox" name="remember" class="form-check-input" id="remember">
                    <label class="form-check-label" for="remember">Se souvenir de moi</label>
                </div>
                <button type="submit" class="btn btn-primary btn-lg w-100">Se connecter</button>
            </form>
        </div>
    </div>
</div>
@endsection