{% extends "base.html" %}
{% block content %}

<div class="camera-container">
    <div id="reader" class="camera-scanner"></div>
    <!-- Overlay for framing the QR code (visible during scanning) -->
    <div id="scan-frame-overlay" class="scan-overlay"
        style="display: none; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 30px;">
        <p class="scan-text">SCAN BARCODE SEKARANG</p>
    </div>
    <!-- Overlay for Start Button (visible when NOT scanning) -->
    <div id="scan-start-overlay" class="scan-controls">
        <button id="start-scan-btn" class="start-scan-btn">
            MULAI SCAN
        </button>
    </div>
</div>

<div class="update-section">
    <h2 class="section-title">Update Location</h2>
    <p class="section-subtitle">Update Latest Location</p>

    <!-- Feedback area for scanned code -->
    <div id="scan-feedback"
        style="display:none; margin-bottom: 15px; padding: 10px; background: #e8f5e9; color: #2e7d32; border-radius: 4px; text-align: center;">
        QR Code Terdeteksi: <span id="scanned-code-display" style="font-weight: bold;"></span>
    </div>

    <form hx-post="/update" hx-target="#update-result" hx-swap="innerHTML">
        <select name="stall" class="stall-input" required>
            <option value="">Pilih Slot / Area Parkir</option>
            {% for s in slots %}
            <option value="{{ s.slot_code.strip() }}">{{ s.slot_code.strip() }} - {{ s.location.strip() }}</option>
            {% endfor %}
        </select>
        <input type="hidden" name="qr_data" id="scanned_qr_data">

        <button class="btn-update" type="submit">
            UPDATE LOCATION
        </button>
    </form>

    <div id="update-result"></div>
</div>

<script>
    let html5QrcodeScanner = null;

    function onScanSuccess(decodedText) {
        // Set values
        document.getElementById("scanned_qr_data").value = decodedText;

        // Visual feedback
        document.getElementById("scanned-code-display").innerText = decodedText;
        document.getElementById("scan-feedback").style.display = "block";

        // Stop scanning after success
        if (html5QrcodeScanner) {
            html5QrcodeScanner.stop().then(() => {
                console.log("Scanner stopped");
                // Reset UI to initial state
                document.getElementById("scan-frame-overlay").style.display = "none";
                document.getElementById("scan-start-overlay").style.display = "flex";
                document.getElementById("start-scan-btn").innerText = "SCAN LAGI";
            }).catch(err => {
                console.error("Failed to stop scanner", err);
            });
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        const startBtn = document.getElementById("start-scan-btn");

        startBtn.addEventListener('click', function () {
            // Hide start button, show frame
            document.getElementById("scan-start-overlay").style.display = "none";
            document.getElementById("scan-frame-overlay").style.display = "flex";

            // Clear previous feedback/results when starting new scan?
            // User said: "tiap kali berbeda barcode yang di scan makan data yang ditampilkan harus sesuai yang terakhir kali di scan"
            // So we just update it on success. We can hide the old feedback while scanning if we want, or keep it.
            // Let's hide it to indicate active scanning state.
            document.getElementById("scan-feedback").style.display = "none";
            document.getElementById("update-result").innerHTML = ""; // Clear previous update result too

            if (!html5QrcodeScanner) {
                html5QrcodeScanner = new Html5Qrcode("reader");
            }

            html5QrcodeScanner.start(
                { facingMode: "environment" },
                {
                    fps: 10,
                    qrbox: { width: 250, height: 250 }
                },
                onScanSuccess,
                (errorMessage) => {
                    // Ignore errors scanning individual frames
                }
            ).catch((err) => {
                console.error("Error starting scanner:", err);
                let errorMsg = "Gagal mengakses kamera.";
                if (location.protocol !== 'https:' && location.hostname !== 'localhost' && location.hostname !== '127.0.0.1') {
                    errorMsg += " <br><b>PENTING:</b> Browser memblokir akses kamera di koneksi tidak aman (HTTP) selain localhost. Coba gunakan HTTPS.";
                } else {
                    errorMsg += " Pastikan izin kamera diberikan.";
                }

                // Show error in the reader area
                document.getElementById("reader").innerHTML = `
                    <div style="padding: 20px; text-align: center; color: red; border: 1px solid red; background: #ffe6e6;">
                        <p>${errorMsg}</p>
                        <p class="text-sm text-gray-600 mt-2">${err}</p>
                    </div>
                `;
            });
        });
    });
</script>

{% endblock %}