<?php
// ================= SESSION AMAN =================
if (session_status() === PHP_SESSION_NONE) {
    ini_set('session.cookie_httponly', 1);

    if (
        (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ||
        (isset($_SERVER['SERVER_PORT']) && $_SERVER['SERVER_PORT'] == 443)
    ) {
        ini_set('session.cookie_secure', 1);
    }

    ini_set('session.use_only_cookies', 1);
    session_start();
}

// ================= INCLUDE =================
require_once '../config/koneksi.php';
require_once '../helpers/functions.php';

// ================= DEFAULT USER =================
createDefaultUsers($conn);

// ================= REDIRECT JIKA SUDAH LOGIN =================
if (isLogin()) {
    if (isAdmin()) {
        header("Location: /admin/dashboard.php");
        exit;
    } else {
        header("Location: /client/dashboard.php");
        exit;
    }
}

// ================= PROSES LOGIN =================
if (isset($_POST['login'])) {
    $username = trim($_POST['username'] ?? '');
    $password = $_POST['password'] ?? '';

    if (!empty($username) && !empty($password)) {

        $stmt = mysqli_prepare($conn, "SELECT * FROM users WHERE username=? LIMIT 1");
        mysqli_stmt_bind_param($stmt, "s", $username);
        mysqli_stmt_execute($stmt);
        $result = mysqli_stmt_get_result($stmt);
        $user = mysqli_fetch_assoc($result);

        if ($user && password_verify($password, $user['password'])) {

            session_regenerate_id(true);

            $_SESSION['login'] = true;
            $_SESSION['id'] = $user['id'];
            $_SESSION['nama'] = $user['nama'];
            $_SESSION['role'] = $user['role'];

            setFlash('success', 'Login berhasil');

            if ($user['role'] === 'admin') {
                header("Location: /admin/dashboard.php");
            } else {
                header("Location: /client/dashboard.php");
            }
            exit;

        } else {
            setFlash('danger', 'Username atau password salah');
        }

    } else {
        setFlash('danger', 'Username dan password wajib diisi');
    }
}

$title = "Login";
include '../layouts/header.php';
?>

<style>
    body {
        min-height: 100vh;
        background: linear-gradient(160deg, #0f172a 0%, #1d4ed8 45%, #38bdf8 100%);
        overflow-x: hidden;
        position: relative;
        font-family: 'Segoe UI', sans-serif;
    }

    .bg-shape {
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        opacity: 0.35;
        z-index: 0;
    }

    .bg-shape.one {
        width: 240px;
        height: 240px;
        background: #60a5fa;
        top: -60px;
        left: -60px;
    }

    .bg-shape.two {
        width: 280px;
        height: 280px;
        background: #22d3ee;
        bottom: -80px;
        right: -80px;
    }

    .login-wrapper {
        position: relative;
        z-index: 2;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px 12px;
    }

    .login-card {
        width: 100%;
        max-width: 430px;
        background: rgba(255, 255, 255, 0.14);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 30px;
        padding: 34px 28px;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.22);
        color: #fff;
    }

    .brand-logo {
        width: 78px;
        height: 78px;
        margin: 0 auto 18px;
        border-radius: 24px;
        background: linear-gradient(135deg, #2563eb, #06b6d4);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 16px 35px rgba(37, 99, 235, 0.35);
    }

    .login-title {
        font-size: 28px;
        font-weight: 800;
        margin-bottom: 6px;
        text-align: center;
        color: #fff;
    }

    .login-subtitle {
        text-align: center;
        color: rgba(255,255,255,0.8);
        margin-bottom: 28px;
        font-size: 15px;
    }

    .form-label {
        color: #fff;
        font-weight: 600;
        margin-bottom: 10px;
        display: block;
    }

    .input-modern {
        background: rgba(255,255,255,0.16);
        border: 1px solid rgba(255,255,255,0.22);
        border-radius: 18px;
        padding: 14px 16px;
        color: #fff;
        width: 100%;
        outline: none;
        transition: all 0.25s ease;
    }

    .input-modern::placeholder {
        color: rgba(255,255,255,0.65);
    }

    .input-modern:focus {
        border-color: rgba(255,255,255,0.55);
        box-shadow: 0 0 0 4px rgba(255,255,255,0.10);
        background: rgba(255,255,255,0.18);
    }

    .input-group-modern {
        display: flex;
        align-items: center;
        background: rgba(255,255,255,0.16);
        border: 1px solid rgba(255,255,255,0.22);
        border-radius: 18px;
        padding: 0 14px;
        transition: all 0.25s ease;
    }

    .input-group-modern:focus-within {
        border-color: rgba(255,255,255,0.55);
        box-shadow: 0 0 0 4px rgba(255,255,255,0.10);
        background: rgba(255,255,255,0.18);
    }

    .input-group-modern input {
        border: none;
        background: transparent;
        box-shadow: none;
        color: #fff;
        padding: 14px 10px;
        flex: 1;
        outline: none;
    }

    .input-group-modern input::placeholder {
        color: rgba(255,255,255,0.65);
    }

    .input-icon,
    .toggle-password {
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255,255,255,0.9);
    }

    .toggle-password {
        border: none;
        background: transparent;
        cursor: pointer;
        padding: 0;
    }

    .btn-login-modern {
        width: 100%;
        border: none;
        border-radius: 18px;
        padding: 14px;
        font-weight: 700;
        font-size: 16px;
        color: #0f172a;
        background: linear-gradient(135deg, #ffffff, #dbeafe);
        box-shadow: 0 12px 24px rgba(255,255,255,0.18);
        transition: all 0.25s ease;
    }

    .btn-login-modern:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 30px rgba(255,255,255,0.22);
    }

    .login-footer {
        text-align: center;
        margin-top: 24px;
        color: rgba(255,255,255,0.78);
        font-size: 13px;
    }

    .alert {
        border-radius: 16px !important;
        font-size: 14px;
    }

    @media (max-width: 576px) {
        .login-card {
            padding: 28px 20px;
            border-radius: 26px;
        }

        .login-title {
            font-size: 24px;
        }

        .brand-logo {
            width: 70px;
            height: 70px;
        }
    }
</style>

<div class="bg-shape one"></div>
<div class="bg-shape two"></div>

<div class="login-wrapper">
    <div class="login-card">

        <!-- LOGO -->
        <div class="brand-logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-2.5 0-4 1.2-4 2.5S9.5 13 12 13s4 1.2 4 2.5S14.5 18 12 18m0-10V6m0 12v-2"/>
            </svg>
        </div>

        <!-- TITLE -->
        <h2 class="login-title">Yuk Nabung</h2>
        <p class="login-subtitle">Masuk ke akun Anda untuk mengelola tabungan dengan aman</p>

        <!-- FLASH -->
        <?php showFlash(); ?>

        <!-- FORM -->
        <form method="POST" autocomplete="off">

            <!-- USERNAME -->
            <div class="mb-3">
                <label class="form-label">Username</label>
                <div class="input-group-modern">
                    <span class="input-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5.121 17.804A9 9 0 1118.88 17.8M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                        </svg>
                    </span>
                    <input type="text" name="username" placeholder="Masukkan username" required>
                </div>
            </div>

            <!-- PASSWORD -->
            <div class="mb-4">
                <label class="form-label">Password</label>
                <div class="input-group-modern">
                    <span class="input-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <rect x="5" y="11" width="14" height="9" rx="2"/>
                            <path stroke-linecap="round" stroke-linejoin="round" d="M8 11V8a4 4 0 118 0v3"/>
                        </svg>
                    </span>

                    <input type="password" name="password" id="password" placeholder="Masukkan password" required>

                    <button type="button" class="toggle-password" id="togglePassword">
                        <!-- MATA TERBUKA -->
                        <svg id="eyeOpen" xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                            <circle cx="12" cy="12" r="3"/>
                        </svg>

                        <!-- MATA TERTUTUP -->
                        <svg id="eyeClosed" xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" style="display:none;">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3 3l18 18"/>
                            <path stroke-linecap="round" stroke-linejoin="round" d="M10.584 10.587A2 2 0 0012 14a2 2 0 001.414-.586"/>
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9.363 5.365A9.466 9.466 0 0112 5c4.478 0 8.268 2.943 9.542 7a9.97 9.97 0 01-4.132 5.411M6.228 6.228A9.965 9.965 0 002.458 12c1.274 4.057 5.064 7 9.542 7a9.97 9.97 0 005.411-1.589"/>
                        </svg>
                    </button>
                </div>
            </div>

            <!-- BUTTON -->
            <button type="submit" name="login" class="btn-login-modern">
                Masuk Sekarang
            </button>
        </form>

        <!-- FOOTER -->
        <div class="login-footer">
            &copy; <?= date('Y'); ?> Developed by <b>sydhaf_</b>
        </div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const passwordInput = document.getElementById("password");
    const togglePassword = document.getElementById("togglePassword");
    const eyeOpen = document.getElementById("eyeOpen");
    const eyeClosed = document.getElementById("eyeClosed");

    togglePassword.addEventListener("click", function () {
        const isPassword = passwordInput.getAttribute("type") === "password";
        passwordInput.setAttribute("type", isPassword ? "text" : "password");

        eyeOpen.style.display = isPassword ? "none" : "block";
        eyeClosed.style.display = isPassword ? "block" : "none";
    });
});
</script>

<?php include '../layouts/footer.php'; ?>