<?php
// packages.php - Dynamic Packages Page
require_once 'includes/config.php';
require_once 'includes/site-data.php';

$packages = $pdo->query("
    SELECT p.*, c.name_bn as category_name,
           (SELECT COUNT(*) FROM package_individual_courses WHERE package_id = p.id) as individual_course_count
    FROM packages p 
    LEFT JOIN categories c ON p.category_id = c.id 
    WHERE p.is_active = 1 
    ORDER BY p.price ASC
")->fetchAll();
?>
<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>প্যাকেজসমূহ - <?= htmlspecialchars($S['site_title'] ?? 'বাংলা LMS') ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <style>
        :root { --primary: <?= $S['primary_color'] ?? '#6C5CE7' ?>; --g1: linear-gradient(135deg, <?= $S['primary_color'] ?? '#667eea' ?>, <?= $S['primary_color'] ?? '#764ba2' ?>dd); --g2: linear-gradient(135deg, #f093fb, #f5576c); --g3: linear-gradient(135deg, #4facfe, #00f2fe); --g4: linear-gradient(135deg, #43e97b, #38f9d7); --dark: #1a1a2e; --shadow: 0 5px 25px rgba(0,0,0,0.08); --shadow-lg: 0 25px 60px rgba(0,0,0,0.15); }
        * { margin:0; padding:0; box-sizing:border-box; }
        body { background:#f0f2f8; font-family:'Segoe UI','Hind Siliguri',Arial,sans-serif; }
        
        .navbar { background:rgba(255,255,255,0.9); backdrop-filter:blur(15px); box-shadow:0 2px 20px rgba(0,0,0,0.06); padding:14px 0; position:sticky; top:0; z-index:1000; }
        .navbar-brand { font-weight:800; font-size:1.3rem; background:var(--g1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-decoration:none; display:flex; align-items:center; gap:8px; }
        .navbar-brand img { height:36px; }
        .nav-link { color:#555; text-decoration:none; font-weight:500; margin:0 12px; transition:0.3s; }
        .nav-link:hover, .nav-link.active { color:var(--primary); }
        
        .hero { background:var(--g1); color:white; padding:60px 0 80px; text-align:center; position:relative; overflow:hidden; }
        .hero::after { content:''; position:absolute; bottom:-28px; left:50%; transform:translateX(-50%); width:56px; height:56px; background:#f0f2f8; border-radius:50%; }
        .hero h1 { font-size:2.5rem; font-weight:800; }
        
        .container { max-width:1100px; margin:0 auto; padding:40px 20px; }
        .pricing-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:25px; align-items:start; }
        
        .package-card { background:white; border-radius:24px; padding:35px 25px; text-align:center; position:relative; overflow:hidden; transition:all 0.5s; box-shadow:0 5px 25px rgba(0,0,0,0.06); border:2px solid transparent; }
        .package-card:hover { transform:translateY(-15px); box-shadow:var(--shadow-lg); border-color:rgba(108,92,231,0.15); }
        .package-card.popular { border:2px solid var(--primary); transform:scale(1.03); }
        .package-card.popular:hover { transform:scale(1.03) translateY(-15px); }
        .popular-ribbon { position:absolute; top:18px; right:-30px; background:#ff4757; color:white; padding:6px 35px; transform:rotate(45deg); font-weight:700; font-size:0.8rem; }
        
        .pkg-icon { width:65px; height:65px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:1.6rem; color:white; margin-bottom:15px; transition:0.4s; }
        .package-card:hover .pkg-icon { transform:rotate(10deg)scale(1.1); }
        .pkg-name { font-size:1.2rem; font-weight:700; color:var(--dark); margin-bottom:3px; }
        .pkg-name-en { font-size:0.8rem; color:#888; }
        .pkg-type { font-size:0.75rem; padding:3px 10px; border-radius:20px; display:inline-block; margin:10px 0; }
        .type-all { background:#e8f0fe; color:#1967d2; } .type-category { background:#fff3e0; color:#e67e22; } .type-individual { background:#d4f5e9; color:#11998e; }
        
        .price-wrap { margin:15px 0; }
        .price { font-size:2.5rem; font-weight:800; color:var(--primary); }
        .price small { font-size:0.9rem; color:#888; }
        
        .features { text-align:left; margin:18px 0; }
        .features li { padding:6px 0; list-style:none; font-size:0.9rem; color:#555; display:flex; align-items:center; gap:8px; }
        .features li i { color:#11998e; }
        
        .btn-pkg { display:block; width:100%; padding:12px; border-radius:50px; font-weight:700; font-size:0.95rem; text-decoration:none; transition:0.3s; color:white; }
        .btn-pkg:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,0,0,0.2); color:white; }
        
        footer { background:var(--dark); color:white; text-align:center; padding:25px; margin-top:50px; }
        
        @media (max-width:768px) { .hero h1 { font-size:1.8rem; } .pricing-grid { grid-template-columns:1fr; } .package-card.popular { transform:none; } }
    </style>
</head>
<body>

<nav class="navbar">
    <div class="container" style="display:flex;justify-content:space-between;align-items:center;">
        <a href="index.php" class="navbar-brand">
            <?php if(($S['use_image_logo']??'0')=='1' && !empty($S['logo_image']) && file_exists('uploads/logo/'.$S['logo_image'])): ?>
                <img src="uploads/logo/<?=$S['logo_image']?>" alt="<?=htmlspecialchars($S['site_title']??'LMS')?>">
            <?php else: ?>
                <i class="fas <?=$S['logo_icon']??'fa-graduation-cap'?> me-2"></i><?=htmlspecialchars($S['logo_text']??'বাংলা LMS')?>
            <?php endif; ?>
        </a>
        <div style="display:flex;gap:15px;flex-wrap:wrap;">
            <a href="index.php" class="nav-link">হোম</a>
            <a href="courses.php" class="nav-link">কোর্স</a>
            <a href="packages.php" class="nav-link active">প্যাকেজ</a>
            <a href="instructors.php" class="nav-link">ইন্সট্রাক্টর</a>
            <a href="about.php" class="nav-link">আমাদের সম্পর্কে</a>
            <a href="contact.php" class="nav-link">যোগাযোগ</a>
        </div>
    </div>
</nav>

<section class="hero">
    <h1>💎 আমাদের প্যাকেজসমূহ</h1>
    <p>আপনার প্রয়োজন অনুযায়ী সঠিক প্যাকেজটি বেছে নিন</p>
</section>

<div class="container">
    <div class="pricing-grid">
        <?php if(count($packages) > 0): 
            $icons = ['fa-star','fa-crown','fa-gem'];
            $iconBgs = ['var(--g3)','var(--g1)','var(--g2)'];
            $btnBgs = ['var(--g3)','var(--g1)','var(--g2)'];
            foreach($packages as $i => $pkg): 
                $features = !empty($pkg['features']) ? explode(',', $pkg['features']) : [];
        ?>
            <div class="package-card <?=$pkg['is_popular']?'popular':''?>" data-aos="fade-up" data-aos-delay="<?=$i*150?>">
                <?php if($pkg['is_popular']): ?><div class="popular-ribbon">জনপ্রিয়</div><?php endif; ?>
                <?php if($pkg['badge_text']): ?><span class="badge" style="background:<?=$pkg['badge_color']?>;color:white;padding:5px 12px;border-radius:20px;font-size:0.75rem;"><?=$pkg['badge_text']?></span><?php endif; ?>
                
                <div class="pkg-icon" style="background:<?=$iconBgs[$i%3]?>;"><i class="fas <?=$icons[$i%3]?>"></i></div>
                <h3 class="pkg-name"><?=htmlspecialchars($pkg['name_bn'])?></h3>
                <p class="pkg-name-en"><?=htmlspecialchars($pkg['name_en'])?></p>
                <span class="pkg-type type-<?=$pkg['package_type']?>"><?=$pkg['package_type']=='all'?'🌐 সকল কোর্স':($pkg['package_type']=='category'?'📂 '.htmlspecialchars($pkg['category_name']):'📚 নির্দিষ্ট কোর্স')?></span>
                
                <div class="price-wrap"><div class="price">৳<?=number_format($pkg['price'])?> <small>/মাস</small></div></div>
                
                <ul class="features">
                    <?php foreach($features as $f): ?><li><i class="fas fa-check-circle"></i> <?=htmlspecialchars(trim($f))?></li><?php endforeach; ?>
                    <li><i class="fas fa-check-circle"></i> ২৪/৭ সাপোর্ট</li>
                    <li><i class="fas fa-check-circle"></i> সার্টিফিকেট</li>
                </ul>
                
                <a href="enroll.php?package=<?=$pkg['id']?>" class="btn-pkg" style="background:<?=$btnBgs[$i%3]?>;">
                    <?=$pkg['is_popular']?'এখনই কিনুন':'শুরু করুন'?> <i class="fas fa-arrow-right ms-1"></i>
                </a>
            </div>
        <?php endforeach; else: ?>
            <div style="text-align:center;padding:60px;color:#888;"><p>কোন প্যাকেজ নেই</p></div>
        <?php endif; ?>
    </div>
</div>

<footer>
    <p>&copy; <?=date('Y')?> <?=htmlspecialchars($S['footer_text']??'বাংলা LMS | সর্বস্বত্ব সংরক্ষিত')?></p>
</footer>

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>AOS.init({duration:700,once:true});</script>
</body>
</html>