<?php 
include 'common/header.php'; 

// Helper Function to convert YouTube links
function getYoutubeEmbedUrl($url) {
    $shortUrlRegex = '/youtu.be\/([a-zA-Z0-9_-]+)\??/i';
    $longUrlRegex = '/youtube.com\/((?:embed)|(?:watch))((?:\?v\=)|(?:\/))([a-zA-Z0-9_-]+)/i';

    if (preg_match($longUrlRegex, $url, $matches)) {
        $youtube_id = $matches[count($matches) - 1];
    }
    if (preg_match($shortUrlRegex, $url, $matches)) {
        $youtube_id = $matches[1];
    }
    return isset($youtube_id) ? 'https://www.youtube.com/embed/' . $youtube_id : $url;
}

$videoLink = getSetting($conn, 'add_money_video');
$embedLink = getYoutubeEmbedUrl($videoLink);
?>

<div class="container mx-auto px-4 py-6 mb-20 max-w-md">
    <h2 class="font-bold text-lg mb-6 text-gray-800 flex items-center gap-2">
        <i class="fa-solid fa-wallet text-sky-500"></i> Add Money
    </h2>
    
    <div class="bg-white p-8 rounded-xl border border-gray-100 shadow-sm text-center mb-8">
        <p class="text-xs font-bold text-gray-400 uppercase tracking-wide mb-6">Enter Amount</p>
        
        <form action="instantpay.php" method="POST"> 
            <input type="hidden" name="game_id" value="0">
            <input type="hidden" name="product_id" value="0">
            <input type="hidden" name="game_name" value="Wallet Deposit">
            <input type="hidden" name="game_type" value="deposit">
            <input type="hidden" name="player_id" value="Wallet Balance">

            <div class="relative mb-8">
                <span class="absolute left-0 bottom-3 text-xl font-bold text-gray-300">৳</span>
                <input type="number" 
                       class="text-4xl font-bold text-center w-full border-b border-gray-100 focus:border-sky-500 focus:outline-none pb-2 placeholder-gray-100 text-gray-700" 
                       placeholder="0" 
                       name="total_amount" 
                       required>
            </div>
            
            <button type="submit" class="w-full bg-sky-500 text-white py-3.5 rounded-lg font-bold shadow-sm hover:bg-sky-600 transition-all flex items-center justify-center gap-2">
                Proceed to Payment <i class="fa-solid fa-arrow-right text-xs"></i>
            </button>
        </form>
    </div>

    <div class="flex items-center gap-2 mb-4">
        <i class="fa-solid fa-circle-question text-sky-500"></i>
        <h3 class="font-bold text-sm text-gray-700">How to add money?</h3>
    </div>
    
    <?php if($videoLink): ?>
    <div class="aspect-video bg-gray-50 rounded-xl overflow-hidden border border-gray-100">
        <iframe class="w-full h-full" src="<?php echo $embedLink; ?>" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <?php else: ?>
        <div class="p-8 bg-gray-50 border border-dashed border-gray-200 rounded-xl text-center">
            <p class="text-gray-400 text-xs">Video tutorial is not available.</p>
        </div>
    <?php endif; ?>

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

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