<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ADMIN: DODAJ PUNKTY</title>
    <link
        href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@300;500;700&display=swap"
        rel="stylesheet">
    <script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
    <style>
        :root {
            --stark-blue: #00a8ff;
            --stark-cyan: #00f3ff;
            --hud-bg: rgba(0, 10, 20, 0.95);
            --gold-accent: #ffd700;
        }

        body {
            background-color: #000;
            color: var(--stark-cyan);
            font-family: 'Rajdhani', sans-serif;
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        h1 {
            font-family: 'Orbitron';
            color: var(--stark-blue);
            text-align: center;
            font-size: 1.5rem;
        }

        #admin-container {
            width: 100%;
            max-width: 500px;
            background: var(--hud-bg);
            border: 2px solid var(--stark-cyan);
            padding: 20px;
            box-sizing: border-box;
            box-shadow: 0 0 20px rgba(0, 243, 255, 0.2);
        }

        #reader {
            width: 100%;
            margin-bottom: 20px;
            border: 1px solid var(--stark-blue);
        }

        #guest-info {
            display: none;
            background: rgba(0, 243, 255, 0.1);
            padding: 15px;
            margin-bottom: 20px;
            border-left: 4px solid var(--gold-accent);
        }

        .guest-name {
            font-size: 1.4rem;
            font-weight: bold;
            color: #fff;
            text-transform: uppercase;
        }

        .current-points {
            font-size: 1.1rem;
            color: var(--gold-accent);
        }

        .points-controls {
            display: flex;
            flex-direction: column;
            /* Stacked */
            gap: 10px;
            margin-top: 15px;
        }

        input[type="number"] {
            flex-grow: 1;
            background: #000;
            border: 1px solid var(--stark-blue);
            color: #fff;
            padding: 10px;
            font-family: 'Orbitron';
            font-size: 1.2rem;
            text-align: center;
        }

        button {
            background: var(--stark-cyan);
            border: none;
            color: #000;
            padding: 10px 20px;
            font-family: 'Orbitron';
            font-weight: bold;
            cursor: pointer;
            text-transform: uppercase;
        }

        #status-msg {
            margin-top: 15px;
            text-align: center;
            font-weight: bold;
        }

        .success {
            color: #0f0;
        }

        .error {
            color: #f00;
        }
    </style>
</head>

<body>
    <h1>ADMIN: PANEL PUNKTOWY</h1>
    <div id="admin-container">
        <div id="reader"></div>
        <div id="status-msg">ZESKANUJ GOŚCIA</div>

        <div id="guest-info">
            <div class="guest-name" id="display-name">---</div>
            <div class="current-points">PUNKTY: <span id="display-points">0</span></div>

            <div id="alcohol-stats"
                style="margin-top: 15px; border-top: 1px solid rgba(0, 243, 255, 0.3); padding-top: 10px; font-size: 0.9rem;">
                <div style="color: var(--stark-blue); font-weight: bold; margin-bottom: 5px;">SPOŻYCIE ALKOHOLU:</div>
                <div style="display: flex; justify-content: space-between;">
                    <span>WÓDKA: <span id="stat-vodka" style="color: #fff;">0</span> ml</span>
                    <span>WHISKY: <span id="stat-whisky" style="color: #fff;">0</span> ml</span>
                    <span>NAL.: <span id="stat-liqueur" style="color: #fff;">0</span> ml</span>
                </div>
            </div>

            <div class="points-controls">
                <input type="number" id="points-input" value="" placeholder="WPISZ PUNKTY" min="1">
                <button onclick="submitPoints()">DODAJ PUNKTY</button>
            </div>
        </div>

        <button onclick="restartScanner()"
            style="width: 100%; margin-top: 20px; background: transparent; border: 1px solid var(--stark-blue); color: var(--stark-blue);">RESET
            SKANERA</button>
    </div>

    <script>
        let currentGuestId = null;
        const html5QrCode = new Html5Qrcode("reader");

        function onScanSuccess(decodedText) {
            html5QrCode.stop().then(() => {
                fetchGuest(decodedText);
            });
        }

        async function fetchGuest(qrCode) {
            try {
                const response = await fetch('get_guest_admin.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ qr_code: qrCode })
                });
                const data = await response.json();

                if (data.status === 'success') {
                    currentGuestId = data.guest_id;
                    document.getElementById('display-name').innerText = data.guest_name;
                    document.getElementById('display-points').innerText = data.points;

                    // Update alcohol stats
                    document.getElementById('stat-vodka').innerText = data.alcohol.vodka;
                    document.getElementById('stat-whisky').innerText = data.alcohol.whisky;
                    document.getElementById('stat-liqueur').innerText = data.alcohol.liqueur;

                    document.getElementById('guest-info').style.display = 'block';
                    document.getElementById('status-msg').innerText = "GOŚĆ ZIDENTYFIKOWANY";
                    document.getElementById('status-msg').className = 'success';
                } else {
                    document.getElementById('status-msg').innerText = data.message;
                    document.getElementById('status-msg').className = 'error';
                    setTimeout(restartScanner, 2000);
                }
            } catch (e) {
                document.getElementById('status-msg').innerText = "BŁĄD POŁĄCZENIA";
                document.getElementById('status-msg').className = 'error';
            }
        }

        async function submitPoints() {
            const pointsValue = document.getElementById('points-input').value;
            if (!currentGuestId || pointsValue <= 0) return;

            try {
                const response = await fetch('add_points.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ guest_id: currentGuestId, points: pointsValue })
                });
                const data = await response.json();

                if (data.status === 'success') {
                    document.getElementById('display-points').innerText = data.new_total;
                    document.getElementById('status-msg').innerText = data.message;
                    document.getElementById('status-msg').className = 'success';
                    document.getElementById('points-input').value = ''; // Clear after addition
                    // Keep info visible so admin can see update, but restart scan after a bit?
                    // Or let them add more? User said "dopisanie się sumuje", so let's allow another addition or restart.
                } else {
                    document.getElementById('status-msg').innerText = data.message;
                    document.getElementById('status-msg').className = 'error';
                }
            } catch (e) {
                document.getElementById('status-msg').innerText = "BŁĄD ZAPISU";
            }
        }

        function restartScanner() {
            document.getElementById('guest-info').style.display = 'none';
            document.getElementById('status-msg').innerText = "ZESKANUJ GOŚCIA";
            document.getElementById('status-msg').className = '';

            const config = { fps: 15, qrbox: { width: 250, height: 250 } };
            // backend camera for mobile using facingMode: "environment"
            html5QrCode.start({ facingMode: "environment" }, config, onScanSuccess);
        }

        // Start on load
        window.onload = restartScanner;
    </script>
</body>

</html>