{% extends 'layout.html' %}

{% block title %}Connexion — BIOGALENIC GMAO{% endblock %}

{% block content %}
<div class="login-page-body">
    <!-- Top-Right Theme Selector for Login Page -->
    <div style="position: absolute; top: 20px; right: 20px; z-index: 1050;">
        <div class="dropdown">
            <button class="btn btn-sm shadow-sm d-flex align-items-center gap-2 px-3 py-2" id="loginThemeBtn" data-bs-toggle="dropdown" aria-expanded="false"
                    style="background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border); border-radius: 12px; font-weight: 600; font-size: 0.85rem;">
                <i class="fas fa-palette text-primary" id="theme-trigger-icon"></i>
                <span>Thème</span>
                <i class="fas fa-chevron-down small opacity-50"></i>
            </button>
            <div class="dropdown-menu dropdown-menu-end theme-switcher-menu shadow-lg" style="margin-top: 8px;">
                <div class="theme-switcher-title">Thème de couleur</div>
                <div class="theme-grid">
                    <button class="theme-pill-btn" data-set-theme="auto">
                        <span class="theme-dot auto"></span> Auto (OS)
                    </button>
                    <button class="theme-pill-btn" data-set-theme="light">
                        <span class="theme-dot light"></span> Clair
                    </button>
                    <button class="theme-pill-btn" data-set-theme="dark">
                        <span class="theme-dot dark"></span> Nuit
                    </button>
                    <button class="theme-pill-btn" data-set-theme="emerald">
                        <span class="theme-dot emerald"></span> Émeraude
                    </button>
                    <button class="theme-pill-btn" data-set-theme="purple">
                        <span class="theme-dot purple"></span> Violet
                    </button>
                    <button class="theme-pill-btn" data-set-theme="amber">
                        <span class="theme-dot amber"></span> Ambre
                    </button>
                </div>

                <div class="theme-switcher-title">Motif d'arrière-plan</div>
                <div class="bg-pattern-grid">
                    <button class="bg-pill-btn" data-set-bg="auto">
                        <i class="fas fa-wand-magic-sparkles"></i> Auto
                    </button>
                    <button class="bg-pill-btn" data-set-bg="clean">
                        <i class="fas fa-square"></i> Épuré
                    </button>
                    <button class="bg-pill-btn" data-set-bg="mesh">
                        <i class="fas fa-circle-nodes"></i> Mesh
                    </button>
                    <button class="bg-pill-btn" data-set-bg="grid">
                        <i class="fas fa-border-all"></i> Grille
                    </button>
                    <button class="bg-pill-btn" data-set-bg="glass">
                        <i class="fas fa-cubes"></i> Glass
                    </button>
                </div>

                <div class="theme-switcher-title mt-3">Couleur de l'écriture (Texte)</div>
                <div class="text-color-grid">
                    <button class="text-pill-btn" data-set-text="default">
                        <span class="text-dot slate"></span> Auto
                    </button>
                    <button class="text-pill-btn" data-set-text="slate">
                        <span class="text-dot slate"></span> Slate
                    </button>
                    <button class="text-pill-btn" data-set-text="blue">
                        <span class="text-dot blue"></span> Bleu
                    </button>
                    <button class="text-pill-btn" data-set-text="emerald">
                        <span class="text-dot emerald"></span> Vert
                    </button>
                    <button class="text-pill-btn" data-set-text="purple">
                        <span class="text-dot purple"></span> Violet
                    </button>
                    <button class="text-pill-btn" data-set-text="amber">
                        <span class="text-dot amber"></span> Ambre
                    </button>
                    <button class="text-pill-btn" data-set-text="white">
                        <span class="text-dot white"></span> Blanc
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Glow Background Spheres -->
    <div class="login-bg-glow glow-1"></div>
    <div class="login-bg-glow glow-2"></div>

    <div class="login-card-container">
        <div class="row g-0">
            <!-- Panneau de Gauche : Branding & Présentation -->
            <div class="col-lg-6 login-brand-panel">
                <div>
                    <div class="d-flex align-items-center gap-3 mb-4">
                        <img src="{{ url_for('static', filename='img/logo.png') }}" alt="BIOGALENIC" style="height: 48px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.2));">
                        <div>
                            <h3 class="fw-bold mb-0 text-white" style="letter-spacing: 0.5px;">BIOGALENIC</h3>
                            <span class="badge bg-white text-primary fw-bold" style="font-size: 0.72rem; letter-spacing: 1px;">GMAO PRO v2.0</span>
                        </div>
                    </div>
                    <h2 class="fw-extrabold text-white mb-3" style="font-size: 1.8rem; line-height: 1.3;">
                        Gestion de Maintenance Assistée par Ordinateur
                    </h2>
                    <p class="opacity-80" style="font-size: 0.95rem; line-height: 1.6;">
                        Plateforme centralisée de suivi des interventions, gestion des équipements, pièces détachées et maintenance préventive.
                    </p>
                </div>

                <div class="mt-4 pt-3 border-top border-white border-opacity-25 d-none d-lg-block">
                    <div class="d-flex align-items-center gap-3 mb-2 opacity-90" style="font-size: 0.85rem;">
                        <i class="fas fa-shield-alt text-warning"></i>
                        <span>Accès sécurisé & gestion multi-rôles</span>
                    </div>
                    <div class="d-flex align-items-center gap-3 mb-2 opacity-90" style="font-size: 0.85rem;">
                        <i class="fas fa-chart-line text-info"></i>
                        <span>Indicateurs de performance (KPI) en temps réel</span>
                    </div>
                    <div class="d-flex align-items-center gap-3 opacity-90" style="font-size: 0.85rem;">
                        <i class="fas fa-bell text-success"></i>
                        <span>Alertes de stock & notifications directes</span>
                    </div>
                </div>

                <div class="mt-4 text-white-50" style="font-size: 0.78rem;">
                    &copy; {{ now.year }} BIOGALENIC — Tous droits réservés
                </div>
            </div>

            <!-- Panneau de Droite : Formulaire de Connexion -->
            <div class="col-lg-6 login-form-panel d-flex flex-column justify-content-center">
                <div class="mb-4 text-center text-lg-start">
                    <h3 class="fw-bold mb-1" style="font-size: 1.5rem;">Espace Connexion</h3>
                    <p class="text-muted" style="font-size: 0.88rem;">Veuillez entrer vos identifiants pour continuer</p>
                </div>

                <form method="POST" action="{{ url_for('login') }}" class="needs-validation">
                    <div class="mb-3">
                        <label for="username" class="form-label fw-semibold" style="font-size: 0.84rem;">Nom d'utilisateur</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-user text-muted"></i></span>
                            <input type="text" class="form-control form-control-lg" id="username" name="username" 
                                   placeholder="Ex: admin" required style="font-size: 0.95rem;">
                        </div>
                    </div>

                    <div class="mb-4">
                        <label for="password" class="form-label fw-semibold" style="font-size: 0.84rem;">Mot de passe</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-lock text-muted"></i></span>
                            <input type="password" class="form-control form-control-lg" id="password" name="password" 
                                   placeholder="••••••••" required style="font-size: 0.95rem;">
                            <button class="btn btn-outline-secondary password-toggle-btn" type="button" id="togglePassword">
                                <i class="fas fa-eye" id="toggleIcon"></i>
                            </button>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between align-items-center mb-4" style="font-size: 0.82rem;">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="rememberMe">
                            <label class="form-check-label text-muted" for="rememberMe">Se souvenir de moi</label>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary btn-lg w-100 py-3 fw-bold shadow-sm" style="font-size: 1rem; border-radius: 12px;">
                        <i class="fas fa-sign-in-alt me-2"></i>Se Connecter
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var togglePasswordBtn = document.getElementById('togglePassword');
    var passwordInput = document.getElementById('password');
    var toggleIcon = document.getElementById('toggleIcon');

    if (togglePasswordBtn && passwordInput) {
        togglePasswordBtn.addEventListener('click', function() {
            var type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
            toggleIcon.className = type === 'password' ? 'fas fa-eye' : 'fas fa-eye-slash';
        });
    }
});
</script>
{% endblock %}