<?php
session_start();
include 'koneksi.php';

// Cek jika user sudah login, arahkan ke dashboard
if(isset($_SESSION['user_id'])){
    header("Location:index.php");
    exit;
}

$error = "";

if(isset($_POST['login'])){
    $email = trim($_POST['email']); 
    $password = $_POST['password'];

    if(empty($email) || empty($password)){
        $error = "Mohon isi semua kolom!";
    } else {
        $stmt = $conn->prepare("SELECT id, name, email, password FROM users WHERE email = ?");
        $stmt->bind_param("s", $email);
        $stmt->execute();
        $result = $stmt->get_result();

        if($result && $result->num_rows > 0){
            $row = $result->fetch_assoc();

            if(password_verify($password, $row['password'])){
                // 1. Set Session
                $_SESSION['user_id'] = $row['id'];
                $_SESSION['email'] = $row['email'];
                $_SESSION['name'] = $row['name'];

                // 2. TAMPILKAN HALAMAN LOADING (BUKAN LANGSUNG REDIRECT)
                // Kita tampilkan HTML loading di sini
                ?>
                <!DOCTYPE html>
                <html lang="id">
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>Memproses Login...</title>
                    <style>
                        /* CSS untuk Loading Overlay */
                        body, html {
                           margin: 0;
                           padding: 0;
                           height: 100%;
                           width: 100%;
                           background: url('SILAKU.png') center/cover no-repeat;

                           display: flex;
                           justify-content: center;
                           align-items: center;
                           overflow: hidden;
                         font-family: 'Plus Jakarta Sans', sans-serif;
                        }

                        .loader-container {
                            text-align: center;
                            background: rgba(255, 255, 255, 0.05);
                            padding: 40px;
                            border-radius: 20px;
                            backdrop-filter: blur(10px);
                            border: 1px solid rgba(0, 0, 0, 0.1);
                            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
                        }

                        .spinner {
                            width: 50px;
                            height: 50px;
                            border: 5px solid rgba(255, 255, 255, 0.1);
                            border-top: 5px solid #4f46e5; /* Warna primary */
                            border-radius: 50%;
                            animation: spin 1s linear infinite;
                            margin: 0 auto 20px;
                        }

                        .loading-text {
                            color: white;
                            font-size: 18px;
                            font-weight: 600;
                            letter-spacing: 1px;
                        }

                        @keyframes spin {
                            0% { transform: rotate(0deg); }
                            100% { transform: rotate(360deg); }
                        }
                    </style>
                </head>
                <body>
                    <div class="loader-container">
                        <div class="spinner"></div>
                        <div class="loading-text">Memasuki Dashboard...</div>
                    </div>

                    <script>
                        // Redirect setelah 1.5 detik (1500 milidetik)
                        setTimeout(function() {
                            window.location.href = 'index.php';
                        }, 1500);
                    </script>
                </body>
                </html>
                <?php
                exit; // Berhenti di sini agar tidak memproses kode PHP di bawahnya
            }else{
                $error = "Email atau password salah!";
            }
        }else{
            $error = "Email tidak terdaftar!";
        }
        $stmt->close();
    }
}
?>

<!DOCTYPE html>
<html lang="id">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login - Silaku</title>

<!-- Font Modern -->
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<!-- Icons -->
<script src="https://unpkg.com/@phosphor-icons/web"></script>

<style>
    :root {
        --primary: #4f46e5;
        --primary-dark: #3730a3;
        --accent: #818cf8;
        --bg-dark: #0f172a;
        --text-white: #000000;
        --text-gray: #000000;
        --glass-bg: rgba(0, 0, 0, 0.08);
        --glass-border: rgba(0, 0, 0, 0.15);
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    background: url('') center/cover no-repeat;

    overflow: hidden;
    position: relative;
}

    /* Animated Background Blobs */
    .blob {
        position: absolute;
        filter: blur(80px);
        z-index: -1;
        opacity: 0.6;
        animation: floatBlob 10s infinite alternate;
    }

    .blob-1 {
        top: -10%;
        left: -10%;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
        border-radius: 50%;
    }

    .blob-2 {
        bottom: -10%;
        right: -10%;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
        border-radius: 50%;
        animation-delay: -5s;
    }

    @keyframes floatBlob {
        0% { transform: translate(0, 0) scale(1); }
        100% { transform: translate(30px, 50px) scale(1.1); }
    }

    /* LOGIN CARD */
    .login-card {
        width: 100%;
        max-width: 400px;
        background: var(--glass-bg);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        border: 1px solid var(--glass-border);
        border-radius: 30px;
        padding: 40px 30px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        position: relative;
        overflow: hidden;
    }

    /* Shine effect on card */
    .login-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
        transition: 0.5s;
    }

    .login-card:hover::before {
        left: 100%;
    }

    @keyframes slideUp {
        from { opacity: 0; transform: translateY(40px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* HEADER */
    .header {
        text-align: center;
        margin-bottom: 35px;
    }

    .logo-container img{
    width:60px;
    height:60px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid rgb(255, 254, 254);
}
    .logo-container i {
        font-size: 32px;
        color: white;
    }

    @keyframes floatLogo {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }

    .header h1 {
        color: var(--text-white);
        font-size: 26px;
        font-weight: 800;
        margin-bottom: 8px;
        letter-spacing: -0.5px;
    }

    .header p {
        color: var(--text-gray);
        font-size: 14px;
    }

    /* FORM ELEMENTS */
    .input-group {
        margin-bottom: 20px;
        position: relative;
    }

    .input-label {
        display: block;
        color: var(--text-gray);
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 8px;
        margin-left: 5px;
    }

    .input-wrapper {
        position: relative;
    }

    .input-icon-left {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-gray);
        font-size: 18px;
        transition: color 0.3s;
    }

    input {
        width: 100%;
        padding: 16px 16px 16px 45px;
        background: rgb(255, 255, 255);
        border: 1px solid rgb(255, 255, 255);
        border-radius: 14px;
        color: white;
        font-size: 15px;
        outline: none;
        transition: all 0.3s ease;
    }

    input::placeholder {
        color: rgba(0, 0, 0, 0.3);
    }

    input:focus {
        background: rgba(0, 0, 0, 0.1);
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15);
    }

    input:focus + .input-icon-left {
        color: var(--primary);
    }

    /* Password Toggle */
    .toggle-password {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-gray);
        cursor: pointer;
        font-size: 18px;
        transition: color 0.3s;
    }

    .toggle-password:hover {
        color: white;
    }

    /* BUTTON */
   
.btn-login {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;

    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(79,70,229,0.3);
}

/* Hover Effect */
.btn-login:hover{
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(79,70,229,0.5);
}

/* Click Effect */
.btn-login:active{
    transform: scale(0.97);
}

/* Icon Animation */
.btn-login .btn-icon{
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.btn-login:hover .btn-icon{
    transform: translateX(5px);
}

/* Glow Animation */
.btn-login::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(0, 0, 0, 0.3),
        transparent
    );
    transition:0.6s;
}

.btn-login:hover::before{
    left:100%;
}
    .btn-login:hover {
        transform: translateY(-2px);
        box-shadow: 0 15px 30px rgba(79, 70, 229, 0.4);
    }

    .btn-login:active {
        transform: translateY(0);
    }

    /* SPINNER */
    .loading {
        display: none;
        text-align: center;
        margin-top: 15px;
        font-size: 13px;
        color: var(--text-gray);
    }

    .spinner {
        width: 20px;
        height: 20px;
        border: 3px solid rgb(255, 255, 255);
        border-top: 3px solid white;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin: 0 auto 10px;
    }

    @keyframes spin {
        100% { transform: rotate(360deg); }
    }

    /* ERROR */
    .error {
        background: rgba(239, 68, 68, 0.15);
        border: 1px solid rgba(239, 68, 68, 0.3);
        color: #fca5a5;
        padding: 12px;
        border-radius: 12px;
        font-size: 13px;
        margin-bottom: 20px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        animation: shake 0.4s ease-in-out;
    }

    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-5px); }
        75% { transform: translateX(5px); }
    }

    /* FOOTER */
    .footer {
        margin-top: 25px;
        text-align: center;
        font-size: 14px;
        color: var(--text-gray);
    }

    .footer a {
        color: var(--primary);
        font-weight: 700;
        text-decoration: none;
        transition: color 0.2s;
    }

    .footer a:hover {
        color: white;
    }
    
</style>
</head>

<body>

    <!-- Background Elements -->
    <div class="blob blob-1"></div>
    <div class="blob blob-2"></div>

    <div class="login-card">
        <div class="header">
        <div class="logo-container">
    <img src="silakumanagefinance .png" alt="Foto Saya">
</div>
            <h1>Selamat Datang</h1>
            <p>Di Laporan Keuangan Digital</p>
        </div>

        <form method="POST" onsubmit="showLoading()">
            
            <?php if(isset($error)): ?>
            <div class="error">
                <i class="ph ph-warning-circle"></i>
                <?php echo $error; ?>
            </div>
            <?php endif; ?>

            <div class="input-group">
                <label class="input-label">Email</label>
                <div class="input-wrapper">
                    <input type="email" name="email" placeholder="nama@email.com" required>
                    <i class="ph ph-envelope input-icon-left"></i>
                </div>
            </div>

            <div class="input-group">
                <label class="input-label">Password</label>
                <div class="input-wrapper">
                    <input type="password" id="password" name="password" placeholder="••••••••" required>
                    <i class="ph ph-eye toggle-password" onclick="togglePassword()"></i>
                </div>
            </div>

         <button type="submit" name="login" id="btnLogin" class="btn-login">
    <span class="btn-text">Masuk</span>
    <span class="btn-icon">
        <i class="ph ph-arrow-right"></i>
    </span>
</button>

            <div class="loading" id="loading">
                <div class="spinner"></div>
                <p>Memproses...</p>
            </div>

        </form>
<div class="forgot-password">
    <a href="lupa_password.php">Lupa Password?</a>
</div>
        <div class="footer">
            Belum punya akun? <a href="register.php">Daftar disini</a>
        </div>
    </div>

    <script>
        function togglePassword(){
            let pass = document.getElementById("password");
            pass.type = pass.type === "password" ? "text" : "password";
        }

        function showLoading(){
            document.getElementById("btnLogin").style.display = "none";
            document.getElementById("loading").style.display = "block";
        }
    </script>

</body>
</html>