<?php
/**
 * customize_preview.php
 * Renders a realistic mockup of the merchant's payment page using
 * whatever values were in the Customize Page form at the moment "Preview"
 * was clicked - even if not saved yet. No DB read/write happens here.
 */
$businessName = $_POST['business_name'] ?? 'Your Business';
$primary      = preg_match('/^#[0-9a-fA-F]{6}$/', $_POST['primary_color'] ?? '') ? $_POST['primary_color'] : '#0F6B5C';
$secondary    = preg_match('/^#[0-9a-fA-F]{6}$/', $_POST['secondary_color'] ?? '') ? $_POST['secondary_color'] : '#E8A33D';
$success      = preg_match('/^#[0-9a-fA-F]{6}$/', $_POST['success_color'] ?? '') ? $_POST['success_color'] : '#1FAA59';
$bg           = preg_match('/^#[0-9a-fA-F]{6}$/', $_POST['bg_color'] ?? '') ? $_POST['bg_color'] : '#EAF3F0';
$cardBg       = preg_match('/^#[0-9a-fA-F]{6}$/', $_POST['card_bg_color'] ?? '') ? $_POST['card_bg_color'] : '#FFFFFF';
$text         = preg_match('/^#[0-9a-fA-F]{6}$/', $_POST['text_color'] ?? '') ? $_POST['text_color'] : '#0B1F1C';
$logoUrl      = filter_var($_POST['logo_url'] ?? '', FILTER_VALIDATE_URL) ? $_POST['logo_url'] : '';
$showQr       = !empty($_POST['show_qr']);
$showGpay     = !empty($_POST['show_googlepay']);
$showPhonepe  = !empty($_POST['show_phonepe']);
$showOther    = !empty($_POST['show_other_upi']);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preview - <?= htmlspecialchars($businessName) ?></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
    *{box-sizing:border-box}
    body{margin:0;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;background:<?= $bg ?>;color:<?= $text ?>;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:0}
    .preview-banner{width:100%;background:#1A1A24;color:#fff;text-align:center;padding:10px;font-size:.78rem;letter-spacing:.3px}
    .preview-banner b{color:#43e97b}
    .wrap{width:100%;max-width:420px;padding:20px}
    .header{background:<?= $primary ?>;border-radius:16px;padding:20px;display:flex;align-items:center;gap:14px;color:#fff;margin-bottom:18px}
    .header img{width:48px;height:48px;border-radius:10px;object-fit:cover;background:#fff}
    .header .biz-name{font-weight:800;font-size:1.1rem}
    .header .verified{font-size:.78rem;opacity:.85;margin-top:2px}
    .card{background:<?= $cardBg ?>;border-radius:16px;padding:22px;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,.06);margin-bottom:16px}
    .amount-label{font-size:.8rem;opacity:.6;text-transform:uppercase;letter-spacing:.5px}
    .amount{font-size:2.4rem;font-weight:800;margin:6px 0 16px}
    .amount-bar{height:4px;border-radius:4px;background:<?= $secondary ?>;margin-bottom:18px}
    .qr-box{width:200px;height:200px;margin:0 auto 14px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.05)}
    .pay-btn{background:<?= $primary ?>;color:#fff;padding:14px;border-radius:10px;font-weight:700;font-size:.95rem;margin-top:8px}
    .app-row{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
    .app-chip{background:<?= $bg ?>;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:8px 14px;font-size:.78rem;font-weight:600}
    .success-chip{display:inline-flex;align-items:center;gap:6px;background:<?= $success ?>1A;color:<?= $success ?>;padding:6px 14px;border-radius:20px;font-size:.75rem;font-weight:700;margin-top:10px}
    .success-chip i{color:<?= $success ?>}
    .close-hint{text-align:center;font-size:.75rem;opacity:.5;margin-top:6px}
</style>
</head>
<body>
    <div class="preview-banner">👁️ <b>Preview Mode</b> - yeh sirf ek mockup hai, koi payment nahi ho rahi. Change save karne ke liye is tab ko band karke "Save Changes" dabao.</div>
    <div class="wrap">
        <div class="header">
            <?php if ($logoUrl): ?><img src="<?= htmlspecialchars($logoUrl) ?>" alt="logo" onerror="this.style.display='none'"><?php endif; ?>
            <div>
                <div class="biz-name"><?= htmlspecialchars($businessName) ?></div>
                <div class="verified"><i class="fas fa-circle-check"></i> Verified business · UPI secured</div>
            </div>
        </div>

        <div class="card">
            <div class="amount-label">Pay to <?= htmlspecialchars($businessName) ?></div>
            <div class="amount">₹499.00</div>
            <div class="amount-bar"></div>

            <?php if ($showQr): ?>
                <?php
                    $sampleUpiString = 'upi://pay?pa=merchant@upi&pn=' . rawurlencode($businessName) . '&am=499.00&cu=INR';
                    $qrImgUrl = 'https://api.qrserver.com/v1/create-qr-code/?size=260x260&margin=0&data=' . urlencode($sampleUpiString);
                ?>
                <div class="qr-box"><img src="<?= $qrImgUrl ?>" alt="Sample QR" style="width:100%;height:100%;object-fit:contain;border-radius:8px"></div>
                <div style="font-size:.78rem;opacity:.6;margin-bottom:14px">Scan QR se pay karein</div>
            <?php endif; ?>

            <div class="pay-btn"><i class="fas fa-lock"></i> Pay Now</div>

            <div class="app-row">
                <?php if ($showGpay): ?><div class="app-chip"><i class="fab fa-google-pay"></i> Google Pay</div><?php endif; ?>
                <?php if ($showPhonepe): ?><div class="app-chip">PhonePe</div><?php endif; ?>
                <?php if ($showOther): ?><div class="app-chip">Other UPI / BHIM</div><?php endif; ?>
            </div>

            <div class="success-chip"><i class="fas fa-circle-check"></i> Payment Successful (sample)</div>
        </div>
        <div class="close-hint">Is tab ko band karke settings page pe wapas jao</div>
    </div>
</body>
</html>
