
<?php
require('db_connection.php');
$merchantRef = htmlspecialchars($_GET['merchant_ref'], ENT_QUOTES, 'UTF-8');

$query = "SELECT * FROM transaction WHERE merchant_ref=?";
$stmt = $db->prepare($query);
$stmt->bind_param('s', $merchantRef);
$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows > 0) {
    $transaction = $result->fetch_assoc();
    $status = $transaction['status'];
    $status_text = getStatusText($status);

    // Detail transaksi
    $reference = $transaction['reference'];
    $profile = $transaction['profile'];
    $payment_method = $transaction['payment_method'];
    $amount = $transaction['amount'];
    $checkout_url = $transaction['checkout_url'];
    $mac = $transaction['mac'];
    $customer_name = $transaction['customer_name'];
    $customer_email = $transaction['customer_email'];
    $customer_phone = $transaction['customer_phone'];
} else {
    echo "Transaksi tidak ditemukan.";
    exit;
}

// Fungsi untuk mengubah nilai status menjadi teks yang diinginkan
function getStatusText($status) {
    switch ($status) {
        case 'UNPAID':
            return 'BELUM DIBAYAR';
        case 'PAID':
            return 'SUDAH DIBAYAR';
        case 'PENDING':
            return 'TERTUNDA';
        default:
            return $status;
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
	<meta name="Author" content="Acil" />
	<meta name="theme-color" content="#16ac91" />
	<meta name="msapplication-navbutton-color" content="#16ac91" />
	<meta name="apple-mobile-web-app-status-bar-style" content="#16ac91" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<link rel="icon" href="img/favicon.png" />
	<link rel="stylesheet" href="css/all.min.css" />
	<link rel="stylesheet" href="css/style.css" />
    <title>Detail Voucher</title>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>

      <style>
.notice{
background:#eee;color:red;text-align:left;padding:1rem; }

/*.activating p{padding: 1rem;}*/

        .page-content {
            margin-top: 40px;
            padding: 20px;
        }

        .card {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            background-color: white;
        }

        .card-header {
            color: white;
            text-align: center;
            padding: 20px;
        }

        .card-body {
            padding: 20px;
        }

        .qr-container {
            text-align: center;
            margin-top: 20px;
        }

        @media (min-width: 768px) {
            .card {
                max-width: 600px;
                margin: 0 auto;
            }
        }
    </style>
</head>
<body>
    
    <main class="page-content margin-top-large">
    <article class="activating margin-pages">
     <div class="container margin-bottom-big">
      <div class="background-white border-radius box-shadow">
                        <div class="card-header border-radius-style background-main">
                    <h2>Detail Voucher</h2>
                </div>
       <div class="padding-box">
           
           
                             <!--<div class="row">-->
                        <div class="col-md-6">
                            <p><strong>Referensi:</strong> <?= htmlspecialchars($reference) ?></p>
                            <p><strong>Nama:</strong> <?= htmlspecialchars($customer_name) ?></p>
                            <p><strong>Email:</strong> <?= htmlspecialchars($customer_email) ?></p>
                            <p><strong>Nomor Telepon:</strong> <?= htmlspecialchars($customer_phone) ?></p>
                            <p><strong>Paket:</strong> <?= htmlspecialchars($profile) ?></p>
                            <!--<p><strong>MAC Address:</strong> <?= htmlspecialchars($mac) ?></p>-->
                            <p><strong>Status Pembayaran:</strong> <?= htmlspecialchars($status_text) ?></p>
                            <p><strong>Harga:</strong> Rp <?= number_format($amount, 0, ',', '.') ?></p>
                        </div>
                        <div class="col-md-6">
                            <?php if ($status !== 'PAID'): ?>
                            <a href="<?= htmlspecialchars($checkout_url) ?>" target="_blank" class="details-modal-btn is-primary">Lanjutkan Pembayaran</a>
                            <?php else: ?>
                            <p><strong>Kode Voucher:</strong><b style="color: red;"> <?= urlencode($merchantRef) ?></b></p>
                            <p>Terima kasih, pembayaran Anda telah diterima. Berikut adalah detail voucher Anda.</p>
                            <button onclick="window.print()" class="details-modal-btn is-primary">Cetak Voucher</button>
                            <div class="qr-container">
                                <canvas id="qr-code"></canvas>
                                <p>Scan QR code ini untuk login:</p>
                                <div class="notice">
                                <b>PENTING:</b><br />
                                Pastikan Anda sudah terhubung ke SSID <?= htmlspecialchars($dns) ?> terlebih dahulu sebelum melakukan scaning atau klik tombol login...
                                </div>
                                <a href="http://<?= htmlspecialchars($dns) ?>/login?username=<?= urlencode($merchantRef) ?>&password=<?= urlencode($merchantRef) ?>" class="buttons buttons-center buttons-full box-shadow text-center">Login</a>
                            </div>
                            <?php endif; ?>
                        </div>
                    <!--</div>-->
       </div>
      </div>
     </div>

</article>
</main>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const qr = new QRious({
                element: document.getElementById('qr-code'),
                value: 'http://<?= htmlspecialchars($dns) ?>/login?username=<?= urlencode($merchantRef) ?>&password=<?= urlencode($merchantRef) ?>',
                size: 200
            });
        });
    </script>
    
    
	<footer class="footer">
<small> Copyright &copy; 2022 $(identity)</small>
	</footer>
</body>

</html>
