<?php
// Session Start
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}
require_once 'config/database.php';

// 🚀 সব অ্যাক্টিভ ক্যাটাগরি আনা (উপরে শো করানোর জন্য)
$all_categories = [];
try {
    $all_cat_stmt = $db->query("SELECT * FROM hosting_categories WHERE status = 'active' ORDER BY id ASC");
    $all_categories = $all_cat_stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {}

// ক্যাটাগরি ID চেক করা (ID না থাকলে ডিফল্টভাবে প্রথম ক্যাটাগরিটি দেখাবে)
$category_id = isset($_GET['id']) ? intval($_GET['id']) : (!empty($all_categories) ? $all_categories[0]['id'] : 0);

if ($category_id === 0) {
    header("Location: index.php");
    exit;
}

// 🚀 বর্তমান ক্যাটাগরির ডেটা আনা
$category = null;
foreach ($all_categories as $cat) {
    if ($cat['id'] == $category_id) {
        $category = $cat;
        break;
    }
}

if (!$category) {
    header("Location: index.php");
    exit;
}

$page_title = $category['name'] . " Packages";

// 🚀 ক্যাটাগরির আন্ডারে থাকা হোস্টিং প্যাকেজগুলো আনা
$packages = [];
try {
    $pkg_stmt = $db->prepare("SELECT * FROM hosting_packages WHERE category_id = ? AND status = 'active' ORDER BY actual_price ASC");
    $pkg_stmt->execute([$category_id]);
    $packages = $pkg_stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {}

require_once 'includes/user_header.php';
require_once 'includes/user_sidebar.php';
?>

<style>
    /* 🚀 Premium Grid Background */
    body {
        background-color: #f8fafc !important;
        background-image: 
            linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px) !important;
        background-size: 40px 40px !important;
        color: #1e293b;
    }

    /* 🚀 Category Switcher (Top Tabs) */
    .category-switcher {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-bottom: 50px;
        flex-wrap: wrap;
    }
    .cat-box {
        background: #ffffff;
        border: 1px solid rgba(15, 23, 42, 0.05);
        color: #64748b;
        padding: 12px 25px;
        border-radius: 12px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .cat-box:hover {
        background: #f1f5f9;
        color: #0f172a;
        transform: translateY(-2px);
    }
    .cat-box.active {
        background: #2563eb;
        color: #ffffff;
        border-color: #2563eb;
        box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
    }

    /* Header Title */
    .page-main-title {
        text-align: center;
        margin-top: 40px;
        margin-bottom: 30px;
    }
    .page-main-title h1 {
        font-weight: 800;
        color: #0f172a;
        font-size: 36px;
    }
    .page-main-title p {
        color: #64748b;
        font-size: 16px;
        max-width: 600px;
        margin: 0 auto;
    }

    /* 🚀 Clean Pricing Cards (No Cheap Strokes) */
    .pricing-card {
        background: #ffffff;
        border: none; /* Removed the stroke */
        border-radius: 24px;
        padding: 40px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03); /* Very soft shadow */
        position: relative;
        transition: all 0.3s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .pricing-card:hover {
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
        transform: translateY(-5px);
    }

    /* Popular Package Highlight (Subtle & Premium) */
    .pricing-card.popular {
        box-shadow: 0 20px 50px rgba(37, 99, 235, 0.1);
    }
    /* Elegant Top Border for Popular */
    .pricing-card.popular::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: #2563eb;
        border-radius: 24px 24px 0 0;
    }
    
    .popular-badge {
        background: rgba(37, 99, 235, 0.1);
        color: #2563eb;
        font-size: 12px;
        font-weight: 700;
        padding: 5px 12px;
        border-radius: 50px;
        display: inline-block;
        margin-bottom: 20px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .package-name { font-size: 22px; font-weight: 800; color: #0f172a; margin-bottom: 20px; }
    
    .price-box { margin-bottom: 30px; }
    .actual-price { font-size: 46px; font-weight: 900; color: #0f172a; line-height: 1; letter-spacing: -1px; }
    .currency { font-size: 20px; vertical-align: top; margin-right: 2px; font-weight: 600; color: #64748b; }
    .billing-cycle { font-size: 15px; color: #64748b; font-weight: 500; }
    
    .regular-price-box { min-height: 24px; margin-bottom: 5px; }
    .regular-price { font-size: 14px; color: #94a3b8; text-decoration: line-through; font-weight: 600; }

    /* Clean Feature List */
    .feature-list { list-style: none; padding: 0; margin: 0 0 40px 0; flex-grow: 1; border-top: 1px solid rgba(15, 23, 42, 0.05); padding-top: 30px; }
    .feature-list li {
        display: flex; align-items: flex-start; gap: 12px;
        margin-bottom: 16px; color: #475569; font-size: 15px; font-weight: 500;
    }
    .feature-list li i { color: #2563eb; font-size: 16px; margin-top: 3px; }

    /* Modern Order Button */
    .btn-order {
        background: #f8fafc; color: #0f172a; border: 1px solid rgba(15, 23, 42, 0.1);
        padding: 14px 20px; border-radius: 12px; font-weight: 700; font-size: 15px;
        width: 100%; transition: all 0.3s;
    }
    .btn-order:hover { background: #f1f5f9; border-color: rgba(15, 23, 42, 0.2); }
    
    .popular .btn-order { background: #2563eb; color: white; border: none; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25); }
    .popular .btn-order:hover { background: #1d4ed8; box-shadow: 0 10px 25px rgba(37, 99, 235, 0.35); transform: translateY(-2px); }

</style>

<div class="main-content flex-grow-1 w-100 d-flex flex-column" style="min-height: calc(100vh - 70px);">
    
    <div class="container py-5">
        
        <!-- 🚀 Header Title -->
        <div class="page-main-title">
            <h1>Choose Your Plan</h1>
            <p>Simple, transparent pricing. No hidden fees. Upgrade or cancel anytime.</p>
        </div>

        <!-- 🚀 Top Category Switcher (Boxes) -->
        <?php if(count($all_categories) > 1): ?>
            <div class="category-switcher">
                <?php foreach($all_categories as $cat): ?>
                    <a href="category.php?id=<?= $cat['id'] ?>" class="cat-box <?= ($cat['id'] == $category_id) ? 'active' : '' ?>">
                        <i class="<?= htmlspecialchars($cat['icon'] ?? 'fas fa-server') ?>"></i>
                        <?= htmlspecialchars($cat['name']) ?>
                    </a>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>

        <!-- 🚀 Pricing Section -->
        <?php if(empty($packages)): ?>
            <div class="bg-white rounded-4 p-5 text-center shadow-sm border-0 mt-4">
                <i class="fa-solid fa-box-open fs-1 text-muted opacity-50 mb-3"></i>
                <h3 class="fw-bold text-dark">No Packages Found</h3>
                <p class="text-muted">Currently, there are no active packages available in this category.</p>
            </div>
        <?php else: ?>
            <div class="row g-4 justify-content-center">
                
                <?php foreach($packages as $pkg): ?>
                    <?php 
                        $is_popular = ($pkg['is_popular'] == 1); 
                        $features = json_decode($pkg['features'], true);
                        if (!is_array($features)) $features = [];
                    ?>
                    
                    <div class="col-lg-4 col-md-6">
                        <div class="pricing-card <?= $is_popular ? 'popular' : '' ?>">
                            
                            <?php if($is_popular): ?>
                                <div><span class="popular-badge">Most Popular</span></div>
                            <?php endif; ?>

                            <h3 class="package-name"><?= htmlspecialchars($pkg['name']) ?></h3>
                            
                            <div class="price-box">
                                <div class="regular-price-box">
                                    <?php if($pkg['regular_price'] > $pkg['actual_price']): ?>
                                        <span class="regular-price">৳ <?= number_format($pkg['regular_price'], 2) ?></span>
                                    <?php endif; ?>
                                </div>
                                
                                <div class="actual-price">
                                    <span class="currency">৳</span><?= number_format($pkg['actual_price'], 0) ?>
                                    <span class="billing-cycle">/year</span>
                                </div>
                            </div>

                            <ul class="feature-list">
                                <?php if(!empty($features)): ?>
                                    <?php foreach($features as $feature): ?>
                                        <li>
                                            <i class="fa-solid fa-check"></i>
                                            <span><?= htmlspecialchars($feature['text'] ?? '') ?></span>
                                        </li>
                                    <?php endforeach; ?>
                                <?php else: ?>
                                    <li><i class="fa-solid fa-check"></i> <span>Standard Features</span></li>
                                <?php endif; ?>
                            </ul>

                            <form action="cart.php" method="GET">
                                <input type="hidden" name="add_hosting" value="<?= $pkg['id'] ?>">
                                <button type="submit" class="btn btn-order">
                                    Get Started
                                </button>
                            </form>

                        </div>
                    </div>
                <?php endforeach; ?>

            </div>
        <?php endif; ?>

    </div>
</div>

<?php require_once 'includes/user_footer.php'; ?>