<?php 
include 'common/header.php';
if(!isset($_SESSION['user_id'])) { header("Location: login.php"); exit; }
if($_SERVER['REQUEST_METHOD'] != 'POST') { header("Location: index.php"); exit; }

// Receive Data
$total = $_POST['total_amount'];
$game_id = $_POST['game_id'];
$product_id = $_POST['product_id'];
$player_id = $_POST['player_id'];
$game_name = isset($_POST['game_name']) ? $_POST['game_name'] : '';

// Resolve Product Name
$product_name = "";
if($product_id != 0) {
    $prod = $conn->query("SELECT name FROM products WHERE id=$product_id")->fetch_assoc();
    $product_name = $prod ? $prod['name'] : 'Unknown Product';
} else {
    $product_name = "Balance Deposit";
    if(empty($game_name)) $game_name = "Wallet";
}
?>

<div class="container mx-auto px-4 py-6 mb-20 max-w-md">
    <div class="bg-white p-8 rounded-xl border border-gray-100 shadow-sm mb-8 text-center">
        <p class="text-[10px] text-gray-400 mb-1 uppercase font-bold tracking-widest">Payable Amount</p>
        <h1 class="text-4xl font-bold text-gray-800 my-2">৳<?php echo $total; ?></h1>
        <div class="inline-flex items-center gap-1.5 bg-sky-50 px-3 py-1 rounded-full text-[11px] text-sky-600 font-bold uppercase tracking-tight border border-sky-100">
            <i class="fa-solid fa-cart-shopping text-[10px]"></i> <?php echo $product_name; ?>
        </div>
    </div>

    <form action="order.php" method="POST" id="payForm">
        <input type="hidden" name="action" value="create_order">
        <input type="hidden" name="game_id" value="<?php echo $game_id; ?>">
        <input type="hidden" name="product_id" value="<?php echo $product_id; ?>">
        <input type="hidden" name="amount" value="<?php echo $total; ?>">
        <input type="hidden" name="player_id" value="<?php echo $player_id; ?>">
        
        <h3 class="font-bold text-gray-700 text-sm mb-4 flex items-center gap-2">
            <i class="fa-solid fa-wallet text-sky-500"></i> Select Payment Method
        </h3>
        
        <div class="grid grid-cols-2 gap-3 mb-8">
            <?php 
            $methods = $conn->query("SELECT * FROM payment_methods");
            while($m = $methods->fetch_assoc()): ?>
            <label class="cursor-pointer">
                <input type="radio" name="payment_method" value="<?php echo $m['name']; ?>" 
                       data-number="<?php echo $m['number']; ?>" 
                       data-qr="<?php echo $m['qr_image']; ?>" 
                       data-desc="<?php echo $m['short_desc']; ?>"
                       class="peer sr-only" required onchange="showPaymentDetails(this)">
                
                <div class="border border-gray-100 rounded-xl p-4 flex flex-col items-center gap-2 bg-white hover:border-sky-200 peer-checked:border-sky-500 peer-checked:bg-sky-50/50 transition-all relative">
                    <?php if($m['logo']): ?>
                        <img src="<?php echo $m['logo']; ?>" class="h-8 w-auto object-contain grayscale-[0.5] peer-checked:grayscale-0">
                    <?php else: ?>
                        <span class="font-bold text-xs text-gray-600 uppercase"><?php echo $m['name']; ?></span>
                    <?php endif; ?>
                    
                    <div class="absolute top-1 right-1 text-sky-500 opacity-0 peer-checked:opacity-100 transition">
                        <i class="fa-solid fa-circle-check text-xs"></i>
                    </div>
                </div>
            </label>
            <?php endwhile; ?>
        </div>

        <div id="paymentDetails" class="hidden bg-white p-6 rounded-xl border border-gray-100 shadow-sm animate-fade-in mb-6">
            <div class="text-center mb-6">
                <img id="qrImg" src="" class="w-32 h-32 mx-auto mb-4 hidden rounded-lg border border-gray-100 p-1 bg-white">
                <p class="text-[9px] text-gray-400 mb-2 font-bold uppercase tracking-widest">Send Money To</p>
                
                <div class="flex items-center justify-center gap-3 bg-gray-50 p-3 rounded-lg border border-gray-100">
                    <span id="payNumber" class="font-mono font-bold text-lg text-gray-700 tracking-wider"></span>
                    <button type="button" onclick="copyNumber()" class="text-sky-500 hover:text-sky-700 transition active:scale-90">
                        <i class="fa-regular fa-copy text-lg"></i>
                    </button>
                </div>
                <p id="payDesc" class="text-[10px] text-amber-600 mt-3 font-bold bg-amber-50 inline-block px-3 py-1 rounded-full border border-amber-100"></p>
            </div>

            <div class="space-y-4">
                <div>
                    <label class="block text-[10px] font-bold text-gray-400 uppercase mb-1.5 tracking-wide">Your Number</label>
                    <input type="text" name="wallet_number" placeholder="01XXXXXXXXX" class="w-full border border-gray-100 p-3 rounded-lg focus:outline-none focus:border-sky-500 bg-gray-50 text-sm" required>
                </div>
                <div>
                    <label class="block text-[10px] font-bold text-gray-400 uppercase mb-1.5 tracking-wide">Transaction ID</label>
                    <input type="text" name="trx_id" placeholder="Enter TrxID here" class="w-full border border-gray-100 p-3 rounded-lg focus:outline-none focus:border-sky-500 bg-gray-50 text-sm" required>
                </div>
                <button type="submit" class="w-full bg-sky-500 text-white py-3.5 rounded-lg font-bold shadow-md hover:bg-sky-600 active:scale-95 transition-all mt-4">
                    Confirm Order
                </button>
            </div>
        </div>
    </form>

    <div class="text-center py-10 mt-6">
        <p class="text-[10px] text-gray-300 font-bold uppercase tracking-widest">&copy; <?php echo date("Y"); ?> <?php echo getSetting($conn, 'site_name'); ?></p>
    </div>
</div>

<script>
    function showPaymentDetails(input) {
        const details = document.getElementById('paymentDetails');
        details.classList.remove('hidden');
        
        document.getElementById('payNumber').innerText = input.getAttribute('data-number');
        document.getElementById('payDesc').innerText = input.getAttribute('data-desc');
        
        const qr = input.getAttribute('data-qr');
        const qrImg = document.getElementById('qrImg');
        if(qr && qr !== "") {
            qrImg.src = qr;
            qrImg.classList.remove('hidden');
        } else {
            qrImg.classList.add('hidden');
        }
        
        details.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }

    function copyNumber() {
        const num = document.getElementById('payNumber').innerText;
        navigator.clipboard.writeText(num).then(() => {
            showNotif('success', 'Copied!', 'Payment number copied.');
        });
    }
</script>

<?php include 'common/bottom.php'; ?>