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

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

if (empty($_GET["code"])) {
    die("Invalid shop QR code.");
}

$shopCode = trim($_GET["code"]);

$stmt = $pdo->prepare("SELECT * FROM partner_shops WHERE shop_code = ? LIMIT 1");
$stmt->execute([$shopCode]);
$shop = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$shop) {
    die("Shop not found.");
}

if ($shop["status"] !== "active") {
    die("This shop is currently inactive.");
}

$logo = "../uploads/logos/default-logo.png";

if (!empty($shop["logo"])) {
    $logo = "../uploads/logos/" . $shop["logo"];
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>Pay Shop</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #eef2ff, #f8fafc);
            min-height: 100vh;
            padding: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .payment-card {
            width: 100%;
            max-width: 460px;
            background: #ffffff;
            border-radius: 26px;
            padding: 28px;
            box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
        }

        .top {
            text-align: center;
            margin-bottom: 24px;
        }

        .shop-logo {
            width: 86px;
            height: 86px;
            background: #f8fafc;
            border-radius: 22px;
            padding: 10px;
            margin: 0 auto 14px;
            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
        }

        .shop-logo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        h1 {
            margin: 0;
            color: #111827;
            font-size: 28px;
        }

        .subtitle {
            margin: 8px 0 0;
            color: #6b7280;
            font-size: 15px;
        }

        .shop-box {
            background: #f8fafc;
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            padding: 16px;
            margin-bottom: 20px;
        }

        .label {
            color: #6b7280;
            font-size: 13px;
            margin-bottom: 5px;
        }

        .shop-name {
            color: #111827;
            font-size: 20px;
            font-weight: bold;
        }

        .shop-code {
            margin-top: 8px;
            color: #2563eb;
            font-size: 14px;
            font-weight: bold;
        }

        .amount-group {
            margin-bottom: 20px;
        }

        .amount-group label {
            display: block;
            color: #111827;
            font-weight: bold;
            margin-bottom: 8px;
        }

        .amount-input {
            width: 100%;
            border: 1px solid #d1d5db;
            border-radius: 16px;
            padding: 16px;
            font-size: 24px;
            font-weight: bold;
            outline: none;
        }

        .amount-input:focus {
            border-color: #2563eb;
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
        }

        .actions {
            display: flex;
            gap: 12px;
        }

        .btn {
            flex: 1;
            border: none;
            border-radius: 14px;
            padding: 15px;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            text-decoration: none;
            cursor: pointer;
        }

        .btn-pay {
            background: #2563eb;
            color: white;
        }

        .btn-pay:hover {
            background: #1d4ed8;
        }

        .btn-cancel {
            background: #e5e7eb;
            color: #111827;
        }

        .note {
            margin-top: 18px;
            text-align: center;
            color: #6b7280;
            font-size: 13px;
            line-height: 1.5;
        }
        .amount-input::-webkit-outer-spin-button,
        .amount-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    </style>
</head>

<body>

<div class="payment-card">

    <div class="top">
        <div class="shop-logo">
            <img src="<?php echo htmlspecialchars($logo); ?>" alt="Shop Logo">
        </div>

        <h1>Pay Shop</h1>
        <p class="subtitle">Enter amount to pay this partner shop.</p>
    </div>

    <div class="shop-box">
        <div class="label">Paying to</div>
        <div class="shop-name"><?php echo htmlspecialchars($shop["shop_name"]); ?></div>
        <div class="shop-code"><?php echo htmlspecialchars($shop["shop_code"]); ?></div>
    </div>

    <form method="post" action="process_shop_payment.php">
        <input type="hidden" name="shop_id" value="<?php echo htmlspecialchars($shop["id"]); ?>">

        <div class="amount-group">
            <label>Amount</label>
            <input
                class="amount-input"
                type="text"
                id="amount"
                name="amount"
                placeholder="0"
                required
                autofocus
            >
        </div>  

        <div class="actions">
            <a href="dashboard.php" class="btn btn-cancel">Cancel</a>
            <button type="submit" class="btn btn-pay">Pay Now</button>
        </div>
    </form>

    <div class="note">
        Please confirm the shop name before making payment.
    </div>

</div>
<script>
const amountInput = document.getElementById('amount');

amountInput.addEventListener('input', function () {

    let value = this.value.replace(/,/g, '');
    value = value.replace(/[^\d]/g, '');

    if (value === '') {
        this.value = '';
        return;
    }

    this.value = Number(value).toLocaleString('en-US');
});

document.querySelector('form').addEventListener('submit', function () {
    amountInput.value = amountInput.value.replace(/,/g, '');
});
</script>
</body>
</html>