<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Connexion - Plateforme d'Inscription</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <!-- Google Fonts - Montserrat -->
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="../auth-style.css" rel="stylesheet">

</head>
<body>
<div class="container-custom">
    <div class="card main-card">
        <div class="logo">
            <div class="logo-icon">
                <i class="fas fa-graduation-cap"></i>
            </div>
            <h1>Plateforme d'Inscription</h1>
            <p>Concours d'Entrée</p>
        </div>



        <form id="loginForm" method="POST" action="">

            <div class="mb-3">
                <label class="form-label">Email</label>
                <div class="input-with-icon">
                    <i class="fas fa-user"></i>
                    <input type="text" class="form-control" id="email" name="email" placeholder="Entrez votre Email" required">
                </div>
                <div class="error-message" id="email-error">Veuillez entrer votre Email</div>
            </div>

            <div class="mb-3">
                <label class="form-label">Mot de passe</label>
                <div class="input-with-icon">
                    <i class="fas fa-lock"></i>
                    <input type="password" class="form-control" id="password" name="password" placeholder="Entrez votre mot de passe" required>
                </div>
                <div class="error-message" id="password-error">Veuillez entrer votre mot de passe</div>
            </div>

            <div class="forgot-password">
                <a href="/est-concours/app/cnx/student/forgot-password" >Mot de passe oublié ?</a>
            </div>

            <button type="submit" class="btn btn-custom-primary d-flex align-items-center justify-content-center gap-2 mb-3" id="loginBtn">
                <i class="fas fa-sign-in-alt"></i> Se Connecter
            </button>

            <div class="separator">
                <span>Nouveau candidat ?</span>
            </div>

            <button type="button" class="btn btn-custom-secondary d-flex align-items-center justify-content-center gap-2 mb-3" onclick="redirectToCreateAccount()">
                <i class="fas fa-user-plus"></i> Créer un compte
            </button>

           <!-- <div class="admin-link">
                <a href="admin-login.php">
                    <i class="fas fa-cog"></i> Accès Administration
                </a>
            </div>-->
        </form>
    </div>
</div>

<script src="main.js"></script>

<!-- Bootstrap JS Bundle with Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>

<script>
    // Validation function
    function validateForm() {
        const email = document.getElementById('email');
        const password = document.getElementById('password');
        let isValid = true;

        // Reset error states
        email.classList.remove('is-invalid');
        password.classList.remove('is-invalid');
        document.getElementById('email-error').classList.remove('show');
        document.getElementById('password-error').classList.remove('show');

        // Validate fields
        if (!email.value.trim()) {
            email.classList.add('is-invalid');
            document.getElementById('email-error').classList.add('show');
            isValid = false;
        }

        if (!password.value.trim()) {
            password.classList.add('is-invalid');
            document.getElementById('password-error').classList.add('show');
            isValid = false;
        }

        return isValid;
    }

    // Real-time validation
    document.querySelectorAll('input[required]').forEach(input => {
        input.addEventListener('blur', function() {
            if (!this.value.trim()) {
                this.classList.add('is-invalid');
                const errorId = this.id + '-error';
                const errorEl = document.getElementById(errorId);
                if (errorEl) errorEl.classList.add('show');
            } else {
                this.classList.remove('is-invalid');
                const errorId = this.id + '-error';
                const errorEl = document.getElementById(errorId);
                if (errorEl) errorEl.classList.remove('show');
            }
        });
    });

    // Forgot password function
    function redirectToCreateAccount() {
        window.location.href='/est-concours/app/cnx/student/create'
    }

    // Forgot password function
    function forgotPassword() {
        const email = document.getElementById('email').value;

        if (!email) {
            alert('Veuillez entrer votre email ou Email pour réinitialiser votre mot de passe.');
            document.getElementById('email').focus();
            return;
        }

        // In a real app, you would send a reset link
        alert('📧 Un email de réinitialisation a été envoyé à l\'adresse associée à ' + email + '.\n\nDans une application réelle, vous recevriez un lien pour réinitialiser votre mot de passe.');
    }

    // Focus on first input on page load
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('email').focus();
    });
</script>
</body>
</html>
