<?php
session_start();
require_once 'config.php';

if (isset($_SESSION['token'])) {
    header('Location: dashboard.php');
    exit;
}

$error_message   = '';
$success_message = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = $_POST['username'] ?? '';
    $password = $_POST['password'] ?? '';

    if ($username === '' || $password === '') {
        $error_message = 'Username dan password harus diisi.';
    } else {
        $result = api_login($username, $password);
        error_log('API Login Response: ' . json_encode($result));

        if ($result['success'] && isset($result['data']['token'])) {
            $_SESSION['token']      = $result['data']['token'];
            $_SESSION['user_data'] = $result['data'];
            header('Location: dashboard.php');
            exit;
        }
        if (isset($result['data']['pesan'])) {
            $error_message = (string) $result['data']['pesan'];
        } else {
            $error_message = 'Login gagal. Periksa username dan password Anda.';
        }
    }
}
?>
<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, maximum-scale=1">
    <meta name="theme-color" content="#F2F2F7">
    <meta name="color-scheme" content="light">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <title>Bank BIJ — Presensi</title>
    <link rel="icon" type="image/png" href="<?= htmlspecialchars(site_public_asset('assets/images/bij_logo.png')) ?>">
    <style>
        :root {
            --bg: #f2f2f7;
            --group: #ffffff;
            --text: #000000;
            --text-secondary: #8e8e93;
            --blue: #1a3a5c;
            --blue-press: #132d47;
            --sep: rgba(60, 60, 67, 0.36);
            --danger: #ff3b30;
            --danger-bg: rgba(255, 59, 48, 0.1);
            --ok-bg: rgba(52, 199, 89, 0.12);
            --ok: #248a3d;
            --radius-group: 12px;
            --radius-btn: 12px;
            --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        html {
            height: 100%;
            -webkit-text-size-adjust: 100%;
            color-scheme: light;
        }

        body {
            margin: 0;
            min-height: 100%;
            min-height: 100dvh;
            font-family: var(--font);
            -webkit-font-smoothing: antialiased;
            background: var(--bg);
            color: var(--text);
            -webkit-tap-highlight-color: transparent;
        }

        .wrap {
            min-height: 100dvh;
            display: flex;
            flex-direction: column;
            padding:
                calc(max(12px, env(safe-area-inset-top)) + 36px)
                max(24px, env(safe-area-inset-right))
                max(16px, env(safe-area-inset-bottom))
                max(24px, env(safe-area-inset-left));
        }

        .inner {
            width: 100%;
            max-width: 400px;
            margin: 0 auto;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .brand {
            text-align: center;
            padding: 32px 8px 28px;
        }

        .brand-logo {
            display: block;
            width: 72px;
            height: 72px;
            margin: 0 auto 20px;
            object-fit: contain;
        }

        .title {
            margin: 0;
            font-size: 34px;
            font-weight: 700;
            letter-spacing: 0.37px;
            line-height: 1.1;
        }

        .subtitle {
            margin: 10px 0 0;
            font-size: 17px;
            font-weight: 400;
            color: var(--text-secondary);
            letter-spacing: -0.41px;
        }

        .section-label {
            margin: 0 4px 8px;
            padding: 0 2px;
            font-size: 13px;
            font-weight: 400;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: -0.08px;
        }

        .banner {
            margin: 0 0 16px;
            padding: 12px 14px;
            border-radius: 10px;
            font-size: 15px;
            line-height: 1.35;
            letter-spacing: -0.24px;
        }

        .banner--err {
            background: var(--danger-bg);
            color: var(--danger);
        }

        .banner--ok {
            background: var(--ok-bg);
            color: var(--ok);
        }

        /* Inset grouped list — pola Settings iOS */
        .group {
            background: var(--group);
            border-radius: var(--radius-group);
            overflow: hidden;
            box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.04);
        }

        .row {
            padding: 14px 16px;
            min-height: 48px;
            display: flex;
            align-items: center;
        }

        .row input {
            flex: 1;
            width: 100%;
            min-width: 0;
            border: none;
            margin: 0;
            padding: 0;
            font-family: inherit;
            font-size: 17px;
            line-height: 22px;
            letter-spacing: -0.41px;
            color: var(--text);
            background: transparent;
            -webkit-appearance: none;
            appearance: none;
        }

        .row input::placeholder {
            color: #c7c7cc;
        }

        .row input:focus {
            outline: none;
        }

        .sep {
            height: 1px;
            margin-left: 16px;
            background: var(--sep);
            opacity: 0.55;
        }

        /* Ikon di luar alur flex → tinggi baris = sama seperti username */
        .row--pw {
            position: relative;
            padding-right: 16px;
        }

        .row--pw input {
            padding-right: 32px;
        }

        .icon-btn {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            width: 26px;
            height: 26px;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            border-radius: 6px;
            background: transparent;
            color: var(--text-secondary);
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        .icon-btn:active {
            opacity: 0.45;
            background: rgba(0, 0, 0, 0.05);
        }

        .icon-btn svg {
            display: block;
            pointer-events: none;
            width: 17px;
            height: 17px;
        }

        .icon-btn .icon-eye-off {
            display: none;
        }

        .icon-btn.is-revealed .icon-eye-on {
            display: none;
        }

        .icon-btn.is-revealed .icon-eye-off {
            display: block;
        }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        .btn {
            display: block;
            width: 100%;
            margin-top: 24px;
            padding: 16px 20px;
            font-family: inherit;
            font-size: 17px;
            font-weight: 600;
            letter-spacing: -0.41px;
            color: #fff;
            background: var(--blue);
            border: none;
            border-radius: var(--radius-btn);
            cursor: pointer;
            transition: background 0.15s ease, transform 0.1s ease;
        }

        .btn:hover {
            background: var(--blue-press);
        }

        .btn:active {
            transform: scale(0.985);
        }

        .btn:disabled {
            opacity: 0.45;
            cursor: not-allowed;
            transform: none;
        }

        .foot {
            margin-top: auto;
            padding-top: 32px;
            text-align: center;
            font-size: 13px;
            color: var(--text-secondary);
            letter-spacing: -0.08px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="inner">
            <header class="brand">
                <img class="brand-logo" src="<?= htmlspecialchars(asset('logo_bij3.png')) ?>" alt="Bank BIJ" width="72" height="72">
                <h1 class="title">Bank BIJ</h1>
                <p class="subtitle">Presensi</p>
            </header>

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

            <?php if ($success_message !== '') : ?>
                <div class="banner banner--ok" role="status"><?= htmlspecialchars($success_message) ?></div>
            <?php endif; ?>

            <p class="section-label">Akun</p>

            <form method="post" autocomplete="on" novalidate>
                <div class="group">
                    <label class="sr-only" for="username">Username</label>
                    <div class="row">
                        <input type="text" id="username" name="username" placeholder="Username" autocomplete="username" inputmode="text" required value="<?= htmlspecialchars($_POST['username'] ?? '') ?>">
                    </div>
                    <div class="sep" aria-hidden="true"></div>
                    <label class="sr-only" for="password">Password</label>
                    <div class="row row--pw">
                        <input type="password" id="password" name="password" placeholder="Password" autocomplete="current-password" required>
                        <button type="button" class="icon-btn" id="togglePassword" aria-label="Tampilkan password" title="Tampilkan password">
                            <!-- Gaya outline mirip SF Symbol: eye / eye.slash -->
                            <svg class="icon-eye-on" width="17" height="17" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z" stroke="currentColor" stroke-width="1.75" stroke-linejoin="round" />
                                <circle cx="12" cy="12" r="3.25" stroke="currentColor" stroke-width="1.75" />
                            </svg>
                            <svg class="icon-eye-off" width="17" height="17" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-7-11-7a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 7 11 7a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M1 1l22 22" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" />
                            </svg>
                        </button>
                    </div>
                </div>

                <button type="submit" class="btn" id="btnSubmit">Masuk</button>
            </form>

            <footer class="foot">Bank BIJ</footer>
        </div>
    </div>

    <script>
        (function() {
            var t = document.getElementById('togglePassword');
            var p = document.getElementById('password');
            if (t && p) {
                t.addEventListener('click', function() {
                    var show = p.type === 'password';
                    p.type = show ? 'text' : 'password';
                    t.classList.toggle('is-revealed', show);
                    t.setAttribute('aria-label', show ? 'Sembunyikan password' : 'Tampilkan password');
                    t.setAttribute('title', show ? 'Sembunyikan password' : 'Tampilkan password');
                });
            }
            var f = document.querySelector('form');
            var b = document.getElementById('btnSubmit');
            if (f && b) {
                f.addEventListener('submit', function() {
                    b.disabled = true;
                    b.textContent = 'Memproses…';
                });
            }
        })();
    </script>
</body>

</html>
