<?php 
// Include Configuration
include 'common/config.php'; 
include 'common/header.php'; 

// ====================================================
// AUTOMATIC DATABASE UPDATE LOGIC
// ====================================================
if(isset($conn)) {
    // 1. Create Categories Table & Add Status
    $conn->query("CREATE TABLE IF NOT EXISTS categories (
        id INT AUTO_INCREMENT PRIMARY KEY,
        name VARCHAR(255) NOT NULL,
        priority INT DEFAULT 0,
        status ENUM('active', 'inactive') DEFAULT 'active'
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;");

    // Ensure status column exists in categories
    $chk_cat_stat = $conn->query("SHOW COLUMNS FROM categories LIKE 'status'");
    if($chk_cat_stat->num_rows == 0) {
        $conn->query("ALTER TABLE categories ADD COLUMN status ENUM('active', 'inactive') DEFAULT 'active'");
    }

    // 2. Add category_id to games table
    $chk_col = $conn->query("SHOW COLUMNS FROM games LIKE 'category_id'");
    if($chk_col->num_rows == 0) {
        $conn->query("ALTER TABLE games ADD COLUMN category_id INT DEFAULT 0");
    }

    // 3. Add Popup Settings
    $settings_to_add = [
        'popup_image' => '',
        'popup_link' => '#',
        'popup_btn_text' => 'See Offer',
        'popup_text' => ''
    ];
    
    foreach($settings_to_add as $key => $default) {
        $chk_set = $conn->query("SELECT id FROM settings WHERE name='$key'");
        if($chk_set->num_rows == 0) {
            $conn->query("INSERT INTO settings (name, value) VALUES ('$key', '$default')");
        }
    }
}

// ====================================================
// FETCH DATA
// ====================================================

// Fetch Notice
$notice_text = ""; 
if(function_exists('getSetting')) {
    $notice_text = getSetting($conn, 'home_notice');
}

// Fetch Popup Data
$popup_img = getSetting($conn, 'popup_image');
$popup_link = getSetting($conn, 'popup_link');
$popup_btn = getSetting($conn, 'popup_btn_text');
$popup_text = getSetting($conn, 'popup_text'); 

// Fetch Social/App Links
$whatsapp_num = getSetting($conn, 'whatsapp_number');
$facebook_link = getSetting($conn, 'facebook_link');
$youtube_link = getSetting($conn, 'youtube_link');
$messenger_link = getSetting($conn, 'messenger_link');
$app_link = getSetting($conn, 'app_download_link');
$telegram_link = getSetting($conn, 'telegram_link');

// Fetch Latest 5 Completed Orders
$latest_orders = [];
if(isset($conn)) {
    $order_query = $conn->query("
        SELECT o.id, u.name AS user_name, u.image AS user_image, p.name AS product_name, o.amount, o.status
        FROM orders o
        JOIN users u ON o.user_id = u.id
        JOIN products p ON o.product_id = p.id
        ORDER BY o.created_at DESC
        LIMIT 5
    ");
    if($order_query){
        while($row = $order_query->fetch_assoc()){ $latest_orders[] = $row; }
    }
}

?>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&family=Lato:wght@400;600;700;900&family=Noto+Serif+Bengali:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<style>
    /* =========================================
       COLOR CONFIGURATION
       ========================================= */
    :root {
        --primary-color: #DC2626;       
        --primary-color-dark: #b91c1c;  
        --bg-color: #f3f4f6;
    }

    body { 
        font-family: 'Bree Serif', serif; 
        background-color: var(--bg-color);
        background-image: url('res/backgrounds/bg.png');
        background-repeat: repeat;
        background-size: 100% auto; 
        background-attachment: scroll; 
        background-position: top center;
    }
    
    .sharp-edge { border-radius: 0px !important; }

    /* NOTICE STYLES */
    .notice-box {
        background-color: var(--primary-color); 
        color: white;
        border-radius: 0px; 
        padding: 10px 15px; 
        position: relative;
        margin-bottom: 10px; 
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .notice-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 4px;
    }
    .notice-title { 
        font-size: 18px; 
        font-family: 'Lato', sans-serif; 
        font-weight: 900; 
        letter-spacing: 0.5px;
    }
    .notice-close { font-size: 18px; cursor: pointer; opacity: 0.9; transition: opacity 0.2s; }
    .notice-close:hover { opacity: 1; transform: scale(1.1); }
    .notice-content { 
        font-size: 13px; 
        font-family: 'Lato', 'Noto Serif Bengali', sans-serif; 
        line-height: 1.4; 
        opacity: 1; 
        font-weight: 400; 
    }

    /* SLIDER */
    .slider-aspect {
        aspect-ratio: 2 / 1;
        width: 100%;
        overflow: hidden;
        position: relative;
    }
    #slider { display: flex; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); cursor: grab; }
    #slider:active { cursor: grabbing; }
    .dot-active { background-color: #000000 !important; }
    .dot-inactive { background-color: #d1d5db !important; }

    /* SUPPORT CARDS */
    .support-cards {
        display: flex;
        justify-content: center;
        align-items: stretch;
        gap: 12px;
        max-width: 1100px;
        margin: 18px auto 30px;
        padding: 0;
        flex-wrap: nowrap;
        box-sizing: border-box;
    }

    .support-card {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1 1 0;
        background: #fff;
        border-radius: 12px;
        padding: 10px 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        border: 1px solid #e5e7eb;
        text-decoration: none;
        color: inherit;
        transition: transform 0.18s ease, box-shadow 0.18s ease;
        min-width: 0;
    }

    .support-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    }

    .support-card .icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: #f8f9fa;
    }

    .support-card .icon img, .support-card .icon svg {
        width: 24px;
        height: 24px;
    }

    .support-card .meta {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        text-align: left;
        font-family: 'Inter', sans-serif;
    }

    .support-card .label {
        font-size: 11px;
        color: #3b82f6;
        font-weight: 600;
        line-height: 1;
    }

    .support-card .title {
        font-size: 13px;
        font-weight: 700;
        color: #1f2937;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
    }

    /* DIVIDER */
    .divider-container {
        display: flex; align-items: center; justify-content: center; margin: 30px 0 20px 0; 
    }
    .divider-line {
        width: 60px; 
        height: 3px;
        border: none; 
        border-radius: 3px;
    }
    .divider-container .divider-line:first-child {
        background: linear-gradient(to right, #eab308, var(--primary-color));
    }
    .divider-container .divider-line:last-child {
        background: linear-gradient(to left, #eab308, var(--primary-color));
    }
    .divider-text {
        font-size: 1.6rem; 
        padding: 0 1rem; 
        color: #1f2937; 
        font-weight: 400; 
        font-family: 'Bree Serif', serif;
    }

    /* PRODUCT GRID */
    .game-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-bottom: 30px;
    }
    @media (min-width: 640px) { .game-grid { grid-template-columns: repeat(4, 1fr); } }
    @media (min-width: 768px) { .game-grid { grid-template-columns: repeat(6, 1fr); gap: 20px; } }

    .game-card {
        display: block;
        text-align: center;
        text-decoration: none;
        margin-bottom: 10px;
    }
    .game-card-img-wrapper {
        width: 100%;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        background: #fff;
        transition: transform 0.3s ease;
    }
    .game-card:hover .game-card-img-wrapper {
        transform: scale(0.95);
    }
    .game-card-img { 
        width: 100%; 
        height: auto;
        aspect-ratio: 1 / 1; 
        object-fit: cover; 
        display: block;
    }
    .game-card-overlay {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.05);
        pointer-events: none;
    }
    .game-card-title {
        font-size: 12px;
        color: #6b7280;
        margin-top: 8px;
        font-weight: 400;
        text-transform: capitalize;
        font-family: 'Bree Serif', serif;
    }

    /* LATEST ORDERS */
    .latest-orders-section {
        margin: 40px 0;
    }
    .section-title {
        text-align: center;
        font-size: 1.5rem;
        color: #1f2937;
        font-weight: 400;
        margin-bottom: 15px;
        font-family: 'Inter', sans-serif;
    }
    .order-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .order-item {
        display: flex;
        align-items: center;
        background: #fff;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        font-family: 'Inter', sans-serif;
    }
    .order-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 15px;
        background: #0057D9;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 16px;
    }
    .order-info {
        flex-grow: 1;
    }
    .order-name {
        font-weight: 500;
        color: #1f2937;
        font-size: 14px;
        margin-bottom: 2px;
    }
    .order-meta {
        font-size: 12px;
        color: #6b7280;
    }
    .order-badge {
        padding: 4px 12px;
        border-radius: 50px;
        font-size: 12px;
        font-weight: 600;
        text-transform: capitalize;
    }
    /* Solid Color Badges */
    .badge-completed { background: #22c55e; color: #ffffff; }
    .badge-pending { background: #f59e0b; color: #ffffff; }
    .badge-processing { background: #f59e0b; color: #ffffff; }
    .badge-cancel { background: #ef4444; color: #ffffff; }

    /* FOLLOW US */
    .follow-us-box {
        background: #fff;
        border-radius: 12px;
        padding: 30px 20px;
        border: 1px solid #e5e7eb;
        text-align: center;
        position: relative;
    }
    .follow-us-title {
        font-size: 1.875rem;
        color: #111827;
        font-weight: 400;
        margin-bottom: 5px;
        font-family: 'Inter', sans-serif;
    }
    .follow-us-subtitle {
        color: #6b7280;
        font-size: 0.875rem;
        margin-bottom: 25px;
        font-family: 'Inter', sans-serif;
    }
    .social-links-grid {
        display: grid;
        gap: 15px;
        grid-template-columns: 1fr;
    }
    @media (min-width: 640px) { .social-links-grid { grid-template-columns: repeat(2, 1fr); } }
    
    .social-link-card {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #fff;
        text-decoration: none;
        color: #374151;
        transition: border-color 0.2s;
        text-align: left;
    }
    .social-link-card:hover { border-color: #9ca3af; }
    .social-link-card.wa:hover { border-color: #4ade80; }
    .social-link-card.tg:hover { border-color: #38bdf8; }
    .social-link-card.yt:hover { border-color: #f87171; }
    .social-link-card.fb:hover { border-color: #60a5fa; }
    .social-link-card.ms:hover { border-color: #0084FF; }
    
    .social-text {
        font-size: 0.875rem;
        line-height: 1.4;
        font-family: 'Inter', sans-serif;
    }
    .social-text b { font-weight: 600; color: #111827; }

    /* FOOTER BANNERS */
    .footer-banners {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 20px;
    }
    .footer-banner-img {
        height: 70px;
        border-radius: 8px;
    }

</style>

<div class="container mx-auto px-4 py-4 max-w-5xl">

    <?php if(!empty($notice_text)): ?>
    <div class="notice-box">
        <div class="notice-header">
            <span class="notice-title">Notice</span>
            <i class="fa-solid fa-xmark notice-close" onclick="this.closest('.notice-box').style.display='none'"></i>
        </div>
        <div class="notice-content">
            <?php echo nl2br(htmlspecialchars($notice_text)); ?>
        </div>
    </div>
    <?php endif; ?>

    <?php 
    $slides_arr = [];
    if(isset($conn)) {
        $slider_query = $conn->query("SELECT * FROM sliders");
        if($slider_query){
            while($row = $slider_query->fetch_assoc()){ $slides_arr[] = $row; }
        }
    }
    $total_slides = count($slides_arr);
    ?>

    <div class="relative w-full sharp-edge shadow-sm bg-gray-100 slider-aspect group mb-6">
        <div id="slider" class="h-full w-full">
            <?php if($total_slides > 0): ?>
                <?php foreach($slides_arr as $slide): ?>
                    <a href="<?php echo $slide['link'] ? $slide['link'] : '#'; ?>" class="min-w-full h-full block select-none">
                        <img src="<?php echo $slide['image']; ?>" class="w-full h-full object-fill pointer-events-none" alt="Slide">
                    </a>
                <?php endforeach; ?>
            <?php else: ?>
                <div class="w-full h-full flex items-center justify-center text-gray-400 font-normal">No Banners Found</div>
            <?php endif; ?>
        </div>

        <?php if($total_slides > 1): ?>
        <div class="absolute bottom-3 left-0 right-0 flex justify-center gap-2 z-10">
            <?php for($i = 0; $i < $total_slides; $i++): ?>
                <button onclick="goToSlide(<?php echo $i; ?>)" 
                        class="slider-dot h-1 w-6 sharp-edge transition-all duration-300 shadow-sm <?php echo ($i === 0) ? 'dot-active' : 'dot-inactive'; ?>" 
                        data-index="<?php echo $i; ?>">
                </button>
            <?php endfor; ?>
        </div>
        <?php endif; ?>
    </div>

    <div class="support-cards">
        <?php if(!empty($whatsapp_num)): ?>
        <a class="support-card" href="https://wa.me/<?php echo $whatsapp_num; ?>" target="_blank">
            <div class="icon">
                <svg width="28" height="28" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path fill="#25D366" d="M12 2C6.48 2 2 6.48 2 12c0 1.99.52 3.84 1.42 5.45L2 22l4.87-1.37C8.16 21.48 10 22 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2z"/>
                    <path fill="#FFF" d="M17.6 14.1c-.3-.15-1.78-.87-2.05-.97-.27-.1-.47-.15-.67.15-.2.3-.77.98-.95 1.18-.18.2-.36.22-.66.07-.3-.15-1.26-.47-2.38-1.45-1.05-.93-1.48-1.83-1.66-2.09-.18-.26-.02-.4.12-.53.13-.12.3-.32.45-.48.15-.17.2-.3.3-.5.09-.2.04-.36-.02-.5-.06-.14-.66-1.6-.9-2.21-.24-.62-.48-.54-.67-.55l-.57-.01c-.18 0-.48.07-.73.35s-1.02 1.02-1.02 2.49c0 1.47 1.05 2.88 1.2 3.09.15.2 2.09 3.17 5.06 4.48.69.31 1.28.49 1.7.63.71.23 1.36.19 1.87.12.57-.08 1.76-.72 2.01-1.41.25-.7.25-1.29.17-1.42-.08-.13-.27-.2-.56-.34z"/>
                </svg>
            </div>
            <div class="meta">
                <div class="label">WhatsApp</div>
                <div class="title">Support</div>
            </div>
        </a>
        <?php endif; ?>
        
        <?php if(!empty($telegram_link)): ?>
        <a class="support-card" href="<?php echo $telegram_link; ?>" target="_blank">
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" width="25" height="26">
                    <circle cx="120" cy="120" r="120" fill="#37AEE2"/>
                    <path d="M98 175c-3.8 0-3.2-1.4-4.5-5l-11-36 89-53" fill="#c8daea"/>
                    <path d="M98 175c3 0 4.3-1.4 6-3l16-15-20-12" fill="#a9c9dd"/>
                    <path d="M100 145l48 35c5.5 3 9.5 1.5 11-5l20-93c2-8-3-11-8-9l-117 45c-8 3-8 7-1.5 9l30 9 69-44c3.3-2 6.3-1 3 1.5l-56 53z" fill="#fff"/>
                </svg>
            </div>
            <div class="meta">
                <div class="label">Telegram</div>
                <div class="title">Channel</div>
            </div>
        </a>
        <?php endif; ?>
        
        <?php if(!empty($app_link)): ?>
        <a class="support-card" href="<?php echo $app_link; ?>" target="_blank">
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 48 48">
                    <path fill="#4CAF50" d="M10,38v4c0,1.105,0.895,2,2,2h24c1.105,0,2-0.895,2-2v-4H10z M24,34l12-12h-8V6H20v16h-8L24,34z"/>
                </svg>
            </div>
            <div class="meta">
                <div class="label">Download</div>
                <div class="title">App</div>
            </div>
        </a>
        <?php endif; ?>
    </div>

    <?php 
    if(isset($conn)) {
        $cat_query = $conn->query("SELECT * FROM categories WHERE status = 'active' ORDER BY priority ASC, id ASC");
        $has_categories = ($cat_query && $cat_query->num_rows > 0);
        
        function renderGameGrid($conn, $cat_id = null) {
            $sql = "SELECT * FROM games WHERE status = 'active'"; 
            if($cat_id !== null) {
                $sql .= " AND category_id = $cat_id";
            } else {
                $sql .= " AND category_id = 0";
            }
            
            $games = $conn->query($sql);
            
            if($games && $games->num_rows > 0): ?>
                <div class="game-grid">
                    <?php while($game = $games->fetch_assoc()): ?>
                        <a href="game_detail.php?id=<?php echo $game['id']; ?>" class="game-card">
                            <div class="game-card-img-wrapper">
                                <div class="game-card-overlay"></div>
                                <img src="<?php echo $game['image']; ?>" class="game-card-img" alt="<?php echo $game['name']; ?>">
                            </div>
                            <h1 class="game-card-title"><?php echo $game['name']; ?></h1>
                        </a>
                    <?php endwhile; ?>
                </div>
            <?php endif; 
        }

        if($has_categories) {
            while($cat = $cat_query->fetch_assoc()) {
                $check_games = $conn->query("SELECT id FROM games WHERE category_id = {$cat['id']} AND status = 'active' LIMIT 1");
                if($check_games && $check_games->num_rows > 0):
                ?>
                <div class="divider-container">
                    <hr class="divider-line">
                    <h3 class="divider-text"><?php echo htmlspecialchars($cat['name']); ?></h3>
                    <hr class="divider-line">
                </div>
                <?php renderGameGrid($conn, $cat['id']); ?>
                <?php
                endif;
            }
            
            $uncat_chk = $conn->query("SELECT id FROM games WHERE category_id = 0 AND status = 'active' LIMIT 1");
            if($uncat_chk && $uncat_chk->num_rows > 0) {
                 ?>
                 <div class="divider-container">
                    <hr class="divider-line">
                    <h3 class="divider-text">Others</h3>
                    <hr class="divider-line">
                </div>
                <?php renderGameGrid($conn, 0); 
            }

        } else {
            $all_chk = $conn->query("SELECT id FROM games WHERE status = 'active' LIMIT 1");
            if($all_chk && $all_chk->num_rows > 0):
            ?>
            <div class="divider-container">
                <hr class="divider-line">
                <h3 class="divider-text">All Games</h3>
                <hr class="divider-line">
            </div>
            <?php renderGameGrid($conn, null); 
            endif;
        }
    } 
    ?>

    <div class="latest-orders-section">
        <h3 class="section-title" style="font-family: 'Bree Serif', serif;">Latest 5 Orders</h3>
        <div class="order-list">
        <?php foreach($latest_orders as $order): ?>     
            <div class="order-item">
                <?php 
                $initial = strtoupper(substr($order['user_name'], 0, 1));
                $avatarUrl = "https://ui-avatars.com/api/?name=" . $initial . "&size=96&background=0057D9&color=fff";
                ?>
                <img src="<?php echo $avatarUrl; ?>" class="order-avatar" alt="user">
                <div class="order-info">
                    <div class="order-name"><?php echo htmlspecialchars($order['user_name'] ?: 'User'); ?></div>
                    <div class="order-meta">
                        <?php echo htmlspecialchars($order['product_name']); ?> - <?php echo $order['amount']; ?> ৳
                    </div>
                </div>
                <?php
                $statusClass = '';
                if ($order['status'] == 'completed') $statusClass = 'badge-completed';
                elseif ($order['status'] == 'pending' || $order['status'] == 'processing') $statusClass = 'badge-pending';
                elseif ($order['status'] == 'cancel') $statusClass = 'badge-cancel';
                ?>
                <span class="order-badge <?php echo $statusClass; ?>">
                    <?php echo $order['status']; ?>
                </span>
            </div>
        <?php endforeach; ?>
        </div>
    </div>

    <div class="follow-us-box">
        <h2 class="follow-us-title" style="font-family: 'Bree Serif', serif;">Follow Us</h2>
        <p class="follow-us-subtitle">নিচের যে কোনো প্ল্যাটফর্মে যুক্ত হোন</p>
        
        <div class="social-links-grid">
            <?php if(!empty($whatsapp_num)): ?>
            <a href="https://wa.me/<?php echo $whatsapp_num; ?>" class="social-link-card wa">
                <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 16 16"><circle cx="8" cy="8" r="8" fill="#25D366"/><path fill="#FFFFFF" d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232"/></svg>
                <span class="social-text">যেকোন সমস্যায় এখানে ক্লিক করে আমাদের <b>Whatsapp HelpLine</b> এ মেসেজ দিন।</span>
            </a>
            <?php endif; ?>
            
            <?php if(!empty($telegram_link)): ?>
            <a href="<?php echo $telegram_link; ?>" class="social-link-card tg">
                <svg viewBox="0 0 256 256" class="h-7 w-7 flex-none"><path fill="#229ED9" d="M228 28L16 120l60 20l12 60l40-44l64 48Z"/><path fill="#fff" d="M184 84L88 142l12 46l14-31l70-73Z" opacity=".85"/></svg>
                <span class="social-text">গিভওয়ে এবং অফারের আপডেট পেতে <b>Telegram</b> এ জয়েন করুন।</span>
            </a>
            <?php endif; ?>

            <?php if(!empty($messenger_link)): ?>
            <a href="<?php echo $messenger_link; ?>" class="social-link-card ms">
                <svg viewBox="0 0 256 256" class="h-7 w-7 flex-none"><path fill="#0084FF" d="M128 24C68.4 24 20 68.8 20 124c0 31.6 16.5 59.8 42.4 78.4v37.6l39.2-21.6c8.5 2.4 17.5 3.6 26.4 3.6 59.6 0 108-44.8 108-100S187.6 24 128 24zm11.2 134.4l-28.8-30.4-56 30.4 61.6-65.6 29.6 30.4 55.2-30.4-61.6 65.6z"/></svg>
                <span class="social-text">যেকোন প্রয়োজনে আমাদের <b>Messenger</b> এ মেসেজ দিন।</span>
            </a>
            <?php endif; ?>
            
            <?php if(!empty($youtube_link)): ?>
            <a href="<?php echo $youtube_link; ?>" class="social-link-card yt">
                <svg viewBox="0 0 256 256" class="h-7 w-7 flex-none"><path fill="#FF0000" d="M236 97s-2-15-9-22s-21-9-21-9c-25-2-62-2-62-2h-31s-37 0-62 2c0 0-14 2-21 9s-9 22-9 22s-2 18-2 35v16s0 18 2 35c0 0 2 15 9 22s21 9 21 9c25 2 62 2 62 2h31s37 0 62-2c0 0 14-2 21-9s9-22 9-22s2-18 2-35v-16c0-17-2-35-2-35Z"/><path fill="#fff" d="M111 93v70l58-35l-58-35Z"/></svg>
                <span class="social-text">কিভাবে ব্যবহার করবেন সেটি জানতে এই ভিডিওটি দেখুন।</span>
            </a>
            <?php endif; ?>
            
            <?php if(!empty($facebook_link)): ?>
            <a href="<?php echo $facebook_link; ?>" class="social-link-card fb">
                <svg viewBox="0 0 256 256" class="h-7 w-7 flex-none"><path fill="#1877F2" d="M232 128a104 104 0 1 0-120 102.7V160h-24v-32h24v-24c0-23.9 14.3-37 36.3-37c10.5 0 21.6 1.9 21.6 1.9v24h-12.2c-12 0-15.7 7.5-15.7 15.1V128h26.7l-4.3 32h-22.4v70.7A104 104 0 0 0 232 128Z"/><path fill="#fff" d="M164.3 160l4.3-32h-26.7v-18c0-7.6 3.7-15.1 15.7-15.1H170v-24s-11.1-1.9-21.6-1.9c-22 0-36.3 13.1-36.3 37v24h-24v32h24v70.7c7.9 1.3 16 1.3 24 0V160h22.4Z"/></svg>
                <span class="social-text">এখানে ক্লিক করে আমাদের ফেসবুক এ ফলো করুন।</span>
            </a>
            <?php endif; ?>
        </div>
    </div>

    <div class="footer-banners">
        <a href="<?php echo $app_link; ?>" target="_blank">
            <img src="assets/template/images/app_link.png" alt="App Link" class="footer-banner-img" onerror="this.style.display='none'">
        </a>
        <a href="<?php echo $telegram_link; ?>" target="_blank">
            <img src="assets/template/images/tg-support-img.png" alt="TG Support" class="footer-banner-img" onerror="this.style.display='none'">
        </a>
    </div>

</div>

<script>
    let currentIdx = 0;
    const slider = document.getElementById('slider');
    const dots = document.querySelectorAll('.slider-dot');
    const total = <?php echo $total_slides; ?>;
    let autoPlayInterval;

    function updateSlider() {
        if(total <= 0 || !slider) return;
        slider.style.transform = `translateX(-${currentIdx * 100}%)`;
        dots.forEach((dot, index) => {
            dot.classList.toggle('dot-active', index === currentIdx);
            dot.classList.toggle('dot-inactive', index !== currentIdx);
        });
    }

    function startTimer() {
        if(total > 1) {
            autoPlayInterval = setInterval(() => {
                currentIdx = (currentIdx + 1) % total;
                updateSlider();
            }, 5000);
        }
    }

    function resetTimer() {
        clearInterval(autoPlayInterval);
        startTimer();
    }

    function goToSlide(index) {
        currentIdx = index;
        updateSlider();
        resetTimer();
    }

    function nextSlide() {
        currentIdx = (currentIdx + 1) % total;
        updateSlider();
        resetTimer();
    }

    function prevSlide() {
        currentIdx = (currentIdx - 1 + total) % total;
        updateSlider();
        resetTimer();
    }

    let isDragging = false, startPos = 0;

    if(slider) {
        slider.addEventListener('mousedown', dragStart);
        slider.addEventListener('touchstart', dragStart, {passive: true});
        slider.addEventListener('mouseup', dragEnd);
        slider.addEventListener('mouseleave', dragEnd);
        slider.addEventListener('touchend', dragEnd);
        slider.addEventListener('mousemove', dragAction);
        slider.addEventListener('touchmove', dragAction, {passive: true});
    }

    function dragStart(e) {
        isDragging = true;
        startPos = getPositionX(e);
        clearInterval(autoPlayInterval);
    }

    function dragAction(e) {
        if (!isDragging) return;
        const currentPosition = getPositionX(e);
        const diff = currentPosition - startPos;
        if (Math.abs(diff) > 50) {
            if (diff > 0) prevSlide(); else nextSlide();
            isDragging = false; 
            resetTimer(); 
        }
    }

    function dragEnd() {
        if(isDragging) {
            isDragging = false;
            startTimer();
        }
    }

    function getPositionX(e) { return e.type.includes('mouse') ? e.pageX : e.touches[0].clientX; }

    startTimer();
</script>

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