<?php
session_start();

if (!isset($_SESSION["user_id"]) || $_SESSION["role"] !== "customer") {
    header("Location: ../auth/login.php");
    exit;
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>Transfer to Customer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/html5-qrcode"></script>

    <style>
        body { font-family: Arial, sans-serif; background:#f4f6f8; margin:0; padding:30px; }
        .container { max-width:850px; margin:auto; }
        .card { background:white; border-radius:16px; padding:28px; box-shadow:0 4px 14px rgba(0,0,0,0.08); }
        h1 { margin-top:0; color:#111827; }
        .subtitle { color:#6b7280; margin-bottom:24px; }

        .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; }
        .option { background:white; border:1px solid #e5e7eb; border-radius:14px; padding:24px; cursor:pointer; color:#111827; box-shadow:0 4px 12px rgba(0,0,0,0.06); text-decoration:none; }
        .option:hover { transform:translateY(-3px); }
        .option h3 { margin:0 0 8px; }
        .option p { color:#6b7280; margin:0; font-size:14px; }
        .icon { font-size:32px; margin-bottom:12px; }

        #scannerBox { display:none; margin-top:25px; }
        #reader { width:100%; max-width:420px; margin:20px auto; border-radius:12px; overflow:hidden; }

        .success { display:none; background:#dcfce7; color:#166534; padding:12px; border-radius:8px; margin-top:15px; text-align:center; }

        .btn { margin-top:24px; display:inline-block; padding:11px 16px; border-radius:8px; background:#6b7280; color:white; text-decoration:none; border:none; cursor:pointer; }
        .btn-blue { background:#2563eb; }
    </style>
</head>
<body>

<div class="container">
    <div class="card">
        <h1>Transfer to Customer</h1>
        <p class="subtitle">Choose how you want to send credit.</p>

        <div class="grid">
            <div class="option" onclick="startScanner()">
                <div class="icon">▣</div>
                <h3>Scan QR Code</h3>
                <p>Open camera and scan receiver customer QR code.</p>
            </div>

            <a class="option" href="transfer.php">
                <div class="icon">#</div>
                <h3>Enter Customer Code</h3>
                <p>Manually enter the receiver customer code.</p>
            </a>
        </div>

        <div id="scannerBox">
            <h3>Scan Customer QR</h3>
            <p>Point your camera at the receiver QR code.</p>

            <div id="successMessage" class="success">
                QR detected. Redirecting...
            </div>

            <div id="reader"></div>

            <button class="btn" onclick="stopScanner()">Close Scanner</button>
        </div>

        <br>
        <a class="btn" href="dashboard.php">Back to Dashboard</a>
    </div>
</div>

<script>
let html5QrCode;
let scannerRunning = false;

function startScanner() {
    document.getElementById("scannerBox").style.display = "block";

    if (scannerRunning) {
        return;
    }

    html5QrCode = new Html5Qrcode("reader");

    html5QrCode.start(
        { facingMode: "environment" },
        {
            fps: 10,
            qrbox: { width: 250, height: 250 }
        },
        function(decodedText) {
            let receiverCode = "";

            try {
                const url = new URL(decodedText);
                receiverCode = url.searchParams.get("to");
            } catch (e) {
                receiverCode = decodedText;
            }

            if (receiverCode) {
                document.getElementById("successMessage").style.display = "block";

                html5QrCode.stop().then(function() {
                    window.location.href = "transfer.php?to=" + encodeURIComponent(receiverCode);
                });
            } else {
                alert("Invalid customer QR code.");
            }
        },
        function(errorMessage) {
            // ignore scan errors
        }
    ).then(function() {
        scannerRunning = true;
    }).catch(function(err) {
        alert("Camera could not open. Please allow camera permission.");
    });
}

function stopScanner() {
    if (html5QrCode && scannerRunning) {
        html5QrCode.stop().then(function() {
            scannerRunning = false;
            document.getElementById("scannerBox").style.display = "none";
        });
    } else {
        document.getElementById("scannerBox").style.display = "none";
    }
}
</script>

</body>
</html>