<?php
include 'config/koneksi.php';

if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

if(isset($_SESSION['id_user']) && isset($_SESSION['role'])){
    switch($_SESSION['role']){
        case 'admin':         header("Location: admin/dashboard.php");    exit;
        case 'direktur':      header("Location: direktur/dashboard.php"); exit;
        case 'kadiv_ops':     header("Location: kadiv/dashboard.php");    exit;
        case 'Store_Manager': header("Location: sm/dashboard.php");       exit;
        case 'kadiv_cs':      header("Location: kadiv/dashboard.php");    exit;
        case 'kadiv_kasir':   header("Location: kadiv/dashboard.php");    exit;
        case 'kadiv_gudang':  header("Location: kadiv/dashboard.php");    exit;
        case 'marcom':  header("Location: kadiv/dashboard.php");    exit;
        case 'Human_capital':  header("Location: kadiv/dashboard.php");    exit;
        case 'merchandiser':  header("Location: kadiv/dashboard.php");    exit;
        case 'It':  header("Location: kadiv/dashboard.php");    exit;
        case 'accounting':  header("Location: kadiv/dashboard.php");    exit;
        case 'finance':  header("Location: kadiv/dashboard.php");    exit;
    }
}

$error = '';

if(isset($_POST['login'])){
    $username = mysqli_real_escape_string($conn, $_POST['username']);
    $password = $_POST['password'];

    $query = mysqli_query($conn,"
        SELECT * FROM users
        WHERE username='$username' AND status='aktif'
    ");

    if(mysqli_num_rows($query) > 0){
        $user = mysqli_fetch_assoc($query);
        if(password_verify($password, $user['password'])){
            $_SESSION['id_user'] = $user['id_user'];
            $_SESSION['nama']    = $user['nama'];
            $_SESSION['role']    = $user['role'];
            switch($user['role']){
                case 'admin':         header("Location: admin/dashboard.php");    break;
                case 'direktur':      header("Location: direktur/dashboard.php"); break;
                case 'kadiv_ops':     header("Location: kadiv/dashboard.php");    break;
                case 'Store_Manager': header("Location: sm/dashboard.php");       break;
                case 'kadiv_cs':      header("Location: kadiv/dashboard.php");    break;
                case 'kadiv_kasir':   header("Location: kadiv/dashboard.php");    break;
                case 'kadiv_gudang':  header("Location: kadiv/dashboard.php");    break;
                case 'Human_capital':  header("Location: kadiv/dashboard.php");    break;
                case 'merchandiser':  header("Location: kadiv/dashboard.php");    break;
                case 'It':  header("Location: kadiv/dashboard.php");    break;
                case 'marcom':  header("Location: kadiv/dashboard.php");    break;
                case 'accounting':  header("Location: kadiv/dashboard.php");    break;
                case 'finance':  header("Location: kadiv/dashboard.php");    break;
            }
            exit;
        } else {
            $error = "Password salah!";
        }
    } else {
        $error = "Username tidak ditemukan!";
    }
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login — Sistem Checklist Harita</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
        --em-400: #34d399;
        --em-500: #10b981;
        --em-600: #059669;
        --bg: #f8faf9;
        --surface: #ffffff;
        --input-bg: #f1f5f9;
        --border: #e2e8f0;
        --text: #1e293b;
        --text-sub: #64748b;
    }

    body {
        min-height: 100vh;
        font-family: 'Inter', sans-serif;
        background: var(--bg);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
    }

    #bg-canvas { position: fixed; inset: 0; z-index: 0; }

    .login-wrapper { position: relative; z-index: 2; width: 100%; max-width: 420px; }

    .login-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 40px;
        box-shadow: 0 20px 25px -5px rgba(0,0,0,0.05), 0 10px 10px -5px rgba(0,0,0,0.02);
    }

    .logo-wrap {
        width: 64px; height: 64px; margin: 0 auto 20px;
        border-radius: 16px; background: #fff;
        border: 1px solid var(--border);
        display: flex; align-items: center; justify-content: center;
        padding: 8px;
    }

    .login-title { font-size: 1.25rem; font-weight: 700; color: var(--text); text-align: center; margin-bottom: 5px; }
    .login-subtitle { font-size: 0.85rem; color: var(--text-sub); text-align: center; margin-bottom: 30px; }

    .alert-err {
        background: #fef2f2; border: 1px solid #fee2e2; color: #b91c1c;
        padding: 12px; border-radius: 8px; font-size: 0.8rem; margin-bottom: 20px;
    }

    .field { margin-bottom: 16px; }
    .field label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-sub); margin-bottom: 6px; text-transform: uppercase; }
    
    .input-wrap { position: relative; }
    .field input {
        width: 100%; height: 48px; background: var(--input-bg);
        border: 1px solid var(--border); border-radius: 10px;
        padding: 0 16px; outline: none; transition: 0.3s;
    }
    .field input:focus { border-color: var(--em-500); background: #fff; }

    .btn-login {
        width: 100%; height: 48px; background: var(--em-500);
        color: white; border: none; border-radius: 10px;
        font-weight: 600; cursor: pointer; margin-top: 10px;
        transition: 0.3s;
    }
    .btn-login:hover { background: var(--em-600); }
    </style>
</head>
<body>

<canvas id="bg-canvas"></canvas>

<div class="login-wrapper">
    <div class="login-card">
        <div class="logo-wrap">
            <img src="img/harita.png" alt="Harita" style="width:100%;height:100%;object-fit:contain;">
        </div>
        <div class="login-title">Selamat Datang</div>
        <div class="login-subtitle">Sistem Checklist Harita</div>

        <?php if($error != ''): ?>
        <div class="alert-err"><?= htmlspecialchars($error) ?></div>
        <?php endif; ?>

        <form method="POST">
            <div class="field">
                <label>Username</label>
                <div class="input-wrap"><input type="text" name="username" required placeholder="Masukkan username"></div>
            </div>
            <div class="field">
                <label>Password</label>
                <div class="input-wrap"><input type="password" name="password" required placeholder="••••••••"></div>
            </div>
            <button type="submit" name="login" class="btn-login">Masuk ke Sistem</button>
        </form>
    </div>
</div>

<script>
    // Canvas Particles (Disesuaikan agar lebih halus dengan background terang)
    const canvas = document.getElementById('bg-canvas');
    const ctx = canvas.getContext('2d');
    let W = canvas.width = window.innerWidth;
    let H = canvas.height = window.innerHeight;
    const particles = Array.from({ length: 40 }, () => ({
        x: Math.random() * W, y: Math.random() * H,
        vx: (Math.random()-0.5)*0.2, vy: (Math.random()-0.5)*0.2
    }));

    function animate() {
        ctx.clearRect(0, 0, W, H);
        ctx.fillStyle = '#10b981';
        particles.forEach(p => {
            p.x += p.vx; p.y += p.vy;
            if(p.x<0 || p.x>W) p.vx*=-1;
            if(p.y<0 || p.y>H) p.vy*=-1;
            ctx.beginPath(); ctx.arc(p.x, p.y, 1.5, 0, Math.PI*2);
            ctx.globalAlpha = 0.1; ctx.fill();
        });
        requestAnimationFrame(animate);
    }
    animate();
</script>
</body>
</html>