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

if (isset($_SESSION['voucher_code'])) {
    $resumeStmt = $pdo->prepare("SELECT circle_count, game_over FROM game_state WHERE voucher_code = ?");
    $resumeStmt->execute([$_SESSION['voucher_code']]);
    $resumeState = $resumeStmt->fetch();

    if ($resumeState) {
        $_SESSION['selected_circles'] = (int) $resumeState['circle_count'];
        header("Location: game.php");
        exit();
    }

    header("Location: wheel.php");
    exit();
}

if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['voucher']) && isset($_POST['name'])) {
    $voucher = $_POST['voucher'];
    $name = $_POST['name'];

    try {
        $stmt = $pdo->prepare("SELECT * FROM vouchers WHERE code = ? AND is_used = 0");
        $stmt->execute([$voucher]);
        $voucherData = $stmt->fetch();

        if ($voucherData) {
            // Simpan data ke session
            $_SESSION['voucher_code'] = $voucher;
            $_SESSION['name'] = $name;

            // Tandai voucher sebagai sudah digunakan
            $updateStmt = $pdo->prepare("UPDATE vouchers SET is_used = 1, used_by = ?, used_at = NOW() WHERE code = ?");
            $updateStmt->execute([$name, $voucher]);

            // Redirect ke wheel.php, BUKAN game.php langsung
            header("Location: wheel.php");
            exit();
        } else {
            $error = "Voucher tidak valid atau sudah digunakan!";
        }
    } catch (PDOException $e) {
        $error = "Terjadi kesalahan saat memproses voucher: " . $e->getMessage();
    }
}
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Masukkan Voucher</title>
    <style>
        :root {
            --bg-dark: #10273d;
            --bg-mid: #08111d;
            --card: rgba(7, 19, 28, 0.8);
            --card-border: rgba(255, 255, 255, 0.14);
            --text: #f5fbff;
            --muted: #b9c8d3;
            --accent: #ffbf3c;
            --accent-strong: #ff8f1f;
            --input-bg: rgba(255, 255, 255, 0.08);
            --input-border: rgba(255, 255, 255, 0.18);
            --focus-glow: rgba(255, 191, 60, 0.28);
            --danger: #ff9c9c;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 24px 16px;
            min-height: 100vh;
            overflow-x: hidden;
            font-family: "Trebuchet MS", "Segoe UI", sans-serif;
            color: var(--text);
            background:
                radial-gradient(circle at top, rgba(223, 159, 54, 0.12), transparent 22%),
                radial-gradient(circle at bottom right, rgba(45, 121, 199, 0.12), transparent 26%),
                linear-gradient(180deg, var(--bg-dark), var(--bg-mid));
        }

        body::before,
        body::after {
            content: "";
            position: fixed;
            border-radius: 999px;
            filter: blur(10px);
            opacity: 0.5;
            pointer-events: none;
        }

        body::before {
            top: 8%;
            left: -60px;
            width: 240px;
            height: 240px;
            background: rgba(223, 159, 54, 0.12);
        }

        body::after {
            right: -80px;
            bottom: 4%;
            width: 280px;
            height: 280px;
            background: rgba(45, 121, 199, 0.12);
        }

        .page {
            width: 100%;
            min-height: calc(100vh - 48px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 20px;
        }

        .navbar {
            width: 100%;
            max-width: 460px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 12px 16px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 18px;
            background: rgba(7, 19, 28, 0.58);
            backdrop-filter: blur(12px);
        }

        .navbar-brand img {
            width: clamp(96px, 24vw, 138px);
            height: auto;
            display: block;
            filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.22));
        }

        .navbar-title {
            color: var(--muted);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .container {
            position: relative;
            width: 100%;
            max-width: 460px;
            padding: 34px 30px 30px;
            border: 1px solid var(--card-border);
            border-radius: 28px;
            background: var(--card);
            backdrop-filter: blur(14px);
            box-shadow: 0 28px 60px rgba(0, 0, 0, 0.35);
        }

        .container::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 1px;
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.02));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 24px;
        }

        .brand-badge {
            width: 72px;
            height: 72px;
            overflow: hidden;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 22px;
            background: linear-gradient(145deg, rgba(255, 191, 60, 0.28), rgba(255, 255, 255, 0.08));
            box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.03);
        }

        .brand-badge img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .eyebrow {
            margin: 0 0 8px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--accent);
        }

        h1 {
            margin: 0;
            font-size: 30px;
            line-height: 1.1;
        }

        .subtitle {
            margin: 0 0 24px;
            font-size: 15px;
            line-height: 1.6;
            color: var(--muted);
        }

        .field {
            margin-bottom: 16px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            font-weight: 600;
            color: #e8f2f9;
        }

        input {
            width: 100%;
            margin: 0;
            padding: 14px 16px;
            border: 1px solid var(--input-border);
            border-radius: 14px;
            outline: none;
            font-size: 15px;
            color: var(--text);
            background: var(--input-bg);
            transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
        }

        input::placeholder {
            color: rgba(245, 251, 255, 0.52);
        }

        input:focus {
            border-color: rgba(255, 191, 60, 0.82);
            box-shadow: 0 0 0 4px var(--focus-glow);
            transform: translateY(-1px);
        }

        .helper {
            margin: 10px 0 0;
            font-size: 13px;
            color: var(--muted);
        }

        button {
            width: 100%;
            margin-top: 10px;
            padding: 15px;
            border: none;
            border-radius: 16px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 800;
            letter-spacing: 0.02em;
            color: #19222d;
            background: linear-gradient(135deg, var(--accent), var(--accent-strong));
            box-shadow: 0 14px 30px rgba(255, 143, 31, 0.25);
            transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
        }

        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 20px 36px rgba(255, 143, 31, 0.3);
            filter: saturate(1.05);
        }

        button:active {
            transform: translateY(0);
        }

        .error-message {
            margin: 0 0 18px;
            padding: 12px 14px;
            border: 1px solid rgba(255, 156, 156, 0.24);
            border-radius: 14px;
            background: rgba(255, 70, 70, 0.12);
            color: var(--danger);
            font-size: 14px;
        }

        .notes {
            margin-top: 20px;
            padding-top: 18px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            font-size: 13px;
            line-height: 1.6;
            color: var(--muted);
        }

        @media (max-width: 480px) {
            .container {
                padding: 24px 18px 22px;
                border-radius: 24px;
            }

            .brand {
                gap: 12px;
            }

            .brand-badge {
                width: 58px;
                height: 58px;
                border-radius: 18px;
            }

            h1 {
                font-size: 24px;
            }
        }
    </style>
</head>
<body>
    <div class="page">
        <header class="navbar">
            <div class="navbar-brand">
                <img src="logo.png" alt="Logo">
            </div>
            <div class="navbar-title">GOSOK BOM</div>
        </header>
        <div class="container">
            <div class="brand">
                <div class="brand-badge">
                    <img src="logoo.png" alt="Logo permainan">
                </div>
                <div>
                    <p class="eyebrow">Masukkan Voucher</p>
                    <h1>Voucher di dapatkan dari livechat CICIJITU</h1>
                </div>
            </div>

            <p class="subtitle">Gunakan ID Anda Yang Terdaftar Di CICIJITU dan kode voucher yang valid untuk Mulai.</p>

            <?php if (isset($error)): ?>
                <p class="error-message"><?= htmlspecialchars($error) ?></p>
            <?php endif; ?>

            <form method="post">
                <div class="field">
                    <label for="name">User ID</label>
                    <input
                        type="text"
                        id="name"
                        name="name"
                        placeholder="Masukkan ID Anda"
                        value="<?= isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '' ?>"
                        autocomplete="username"
                        required
                    >
                </div>

                <div class="field">
                    <label for="voucher">Kode Voucher</label>
                    <input
                        type="text"
                        id="voucher"
                        name="voucher"
                        placeholder="Masukkan kode voucher"
                        value="<?= isset($_POST['voucher']) ? htmlspecialchars($_POST['voucher']) : '' ?>"
                        autocapitalize="characters"
                        spellcheck="false"
                        required
                    >
                    <p class="helper">Pastikan kode dimasukkan sesuai voucher yang di berikan oleh Admin CICIJITU.</p>
                </div>

                <button type="submit">Mulai Permainan</button>
            </form>

            <div class="notes">
                Satu voucher hanya bisa digunakan satu kali. Jika muncul pesan gagal, cek kembali kode voucher atau hubungi admin penyelenggara.
            </div>
        </div>
    </div>
</body>
</html>
