<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - Minhajus Sunnah</title>
    
    <link rel="icon" type="image/png" href="assets/img/logo.png">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/style_login.css">
</head>
<body>

    <div class="theme-switch-wrapper">
        <label class="theme-switch" for="checkbox">
            <input type="checkbox" id="checkbox" />
            <div class="slider round">
                <i class="fas fa-sun"></i>
                <i class="fas fa-moon"></i>
            </div>
        </label>
    </div>

    <div class="login-wrapper">
        
        <div class="flip-card">
            <div class="flip-card-inner" id="cardInner">
                
                <div class="flip-card-front text-center p-4">
                    <img src="assets/img/logo.png" alt="Logo" class="logo-mb">
                    <h4 class="fw-bold mb-1">Ahlan wa Marhaban</h4>
                    <p class="small text-muted mb-4">Portal Akademik Minhajus Sunnah</p>
                    
                    <div class="greeting-icon mb-4">
                        <i class="fas fa-handshake fa-4x animated-icon"></i>
                    </div>

                    <button class="btn btn-gradient w-100 btn-lg rounded-pill shadow-sm" onclick="flipToLogin()">
                        <i class="fas fa-sign-in-alt me-2"></i> Masuk / Login
                    </button>
                </div>

                <div class="flip-card-login p-4">
                    <div class="text-center mb-4">
                        <i class="fas fa-user-circle fa-3x mb-2 login-user-icon"></i>
                        <h5 class="fw-bold">Silakan Login</h5>
                    </div>
                    <form action="auth/proses_login.php" method="POST">
                        <div class="mb-3 input-group">
                            <span class="input-group-text"><i class="fas fa-user"></i></span>
                            <input type="text" name="username" class="form-control" placeholder="Username" required>
                        </div>
                        <div class="mb-3 input-group">
                            <span class="input-group-text"><i class="fas fa-lock"></i></span>
                            <input type="password" name="password" class="form-control" placeholder="Password" required>
                        </div>
                        <button type="submit" class="btn btn-gradient w-100 rounded-pill mb-3">LOGIN</button>
                    </form>
                    
                    <div class="text-center mt-3 border-top pt-3">
                        <small class="text-muted">Belum punya akun?</small><br>
                        <a href="#" class="text-decoration-none fw-bold text-success" onclick="flipToRegister()">Daftar di sini</a>
                        <br>
                        <a href="#" class="text-decoration-none small text-muted" onclick="flipToFront()"><i class="fas fa-arrow-left"></i> Kembali</a>
                    </div>
                </div>

                <div class="flip-card-register p-4">
                    <div class="text-center mb-3">
                        <i class="fas fa-user-plus fa-2x text-success mb-2"></i>
                        <h5 class="fw-bold">Pendaftaran Baru</h5>
                    </div>
                    
                    <form id="formRegister">
                        <div class="mb-2">
                            <input type="text" id="reg_nama" class="form-control form-control-sm" placeholder="Nama Lengkap" required>
                        </div>
                        <div class="mb-2">
                            <input type="text" id="reg_username" class="form-control form-control-sm" placeholder="Buat Username" required>
                        </div>
                        <div class="mb-2">
                            <select id="reg_role" class="form-select form-select-sm" required>
                                <option value="" selected disabled>- Daftar Sebagai -</option>
                                <option value="Siswa">Siswa</option>
                                <option value="Wali Santri">Wali Santri</option>
                                <option value="Guru">Guru/Staff</option>
                            </select>
                        </div>
                        <button type="button" onclick="kirimWA()" class="btn btn-gradient w-100 btn-sm rounded-pill mb-2">
                            <i class="fab fa-whatsapp"></i> Daftar via WA
                        </button>
                    </form>

                    <div class="text-center mt-2">
                        <a href="#" class="text-decoration-none small text-muted" onclick="flipToLogin()"><i class="fas fa-arrow-left"></i> Kembali Login</a>
                    </div>
                </div>

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

    <script>
        const cardInner = document.getElementById('cardInner');
        
        function flipToLogin() { cardInner.style.transform = "rotateY(-180deg)"; }
        function flipToRegister() {
            cardInner.style.transform = "rotateY(-180deg) translateX(-100%)"; 
            cardInner.classList.add('show-register');
        }
        function flipToFront() {
            cardInner.style.transform = "rotateY(0deg)";
            cardInner.classList.remove('show-register');
        }
        
        const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
        toggleSwitch.addEventListener('change', function(e) {
            if (e.target.checked) { document.body.classList.add('dark-mode'); } 
            else { document.body.classList.remove('dark-mode'); }
        });

        function kirimWA() {
            var nama = document.getElementById('reg_nama').value;
            var user = document.getElementById('reg_username').value;
            var role = document.getElementById('reg_role').value;
            if(nama == "" || user == "" || role == ""){ alert("Mohon lengkapi semua data!"); return; }
            var text = `Bismillah%0AKang Shalah, saya baru saja mendaftar di app.minhajussunnah.ponpes.id.%0A%0ANama: *${nama}*%0AUsername: *${user}*%0ASebagai: *${role}*%0A%0AMohon diaktifkan akunnya. Syukron.`;
            var wa_link = `https://wa.me/6281229090921?text=${text}`;
            window.open(wa_link, '_blank');
        }
    </script>
</body>
</html>