<?php
require 'config.php';
require_login();

// সার্ভিস লিস্ট আনা (সর্টিং সহ)
$services = $pdo->query("SELECT id, name FROM services WHERE is_active=1 ORDER BY sort_order ASC, id ASC")->fetchAll();

require_once 'header.php';
?>

<link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

<style>
    :root {
        --bd-green: #006a4e; /* সরকারি স্টাইল গ্রিন */
        --bd-red: #f42a41;   /* সরকারি স্টাইল রেড */
        --bg-color: #f9f9f9;
        --card-bg: #ffffff;
        --text-primary: #333333;
    }

    body {
        background-color: var(--bg-color) !important;
        font-family: 'Hind Siliguri', sans-serif;
        color: var(--text-primary);
    }

    .main-wrapper {
        max-width: 1200px;
        margin: 30px auto;
        padding: 0 15px;
    }

    /* ====== হিরো ব্যানার সেকশন ====== */
    .gov-banner {
        background: linear-gradient(135deg, var(--bd-green), #004d38);
        border-radius: 8px;
        padding: 30px;
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 4px 15px rgba(0, 106, 78, 0.2);
        margin-bottom: 30px;
        position: relative;
        overflow: hidden;
    }
    
    /* ব্যাকগ্রাউন্ডে হালকা নকশা */
    .gov-banner::before {
        content: "";
        position: absolute;
        top: -50px;
        right: -50px;
        width: 200px;
        height: 200px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
    }

    .banner-text h1 {
        font-weight: 700;
        font-size: 2rem;
        margin-bottom: 5px;
    }
    .banner-text p {
        font-size: 1rem;
        opacity: 0.9;
    }
    
    .balance-btn {
        background-color: var(--bd-red);
        color: white;
        padding: 10px 25px;
        border-radius: 5px;
        text-decoration: none;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: 0.3s;
        border: 2px solid white;
    }
    .balance-btn:hover {
        background-color: white;
        color: var(--bd-red);
    }

    /* ====== ইনফো বাটন (Quick Links) ====== */
    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: 40px;
    }

    .info-card {
        background: var(--card-bg);
        padding: 20px;
        border-radius: 8px;
        border-left: 5px solid var(--bd-green);
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        display: flex;
        align-items: center;
        gap: 15px;
        text-decoration: none;
        color: #333;
        transition: transform 0.2s;
    }

    .info-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    .info-icon {
        width: 50px;
        height: 50px;
        background: #e6f0ed;
        color: var(--bd-green);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
    }

    /* ====== সার্চ বক্স ====== */
    .search-container {
        text-align: center;
        margin-bottom: 40px;
    }
    .search-box {
        position: relative;
        max-width: 600px;
        margin: 0 auto;
    }
    .search-input {
        width: 100%;
        padding: 15px 20px;
        padding-right: 50px;
        border: 2px solid #ddd;
        border-radius: 50px;
        font-size: 1rem;
        font-family: inherit;
        transition: 0.3s;
    }
    .search-input:focus {
        outline: none;
        border-color: var(--bd-green);
        box-shadow: 0 0 0 4px rgba(0, 106, 78, 0.1);
    }
    .search-btn-icon {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--bd-green);
        font-size: 1.2rem;
    }

    /* ====== সেকশন হেডার ====== */
    .section-header {
        display: flex;
        align-items: center;
        margin-bottom: 25px;
        border-bottom: 2px solid #e0e0e0;
        padding-bottom: 10px;
    }
    .section-header h3 {
        color: var(--bd-green);
        font-weight: 700;
        margin: 0;
        font-size: 1.5rem;
    }
    .section-indicator {
        width: 10px;
        height: 10px;
        background: var(--bd-red);
        margin-right: 10px;
        transform: rotate(45deg);
    }

    /* ====== সার্ভিস গ্রিড (Gov Style Cards) ====== */
    .services-wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 20px;
    }

    .service-card {
        background: #fff;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 25px 15px;
        text-align: center;
        text-decoration: none;
        color: #333;
        transition: 0.3s;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
    }

    /* কার্ডের উপরে সবুজ বর্ডার (জাতীয় পোর্টাল স্টাইল) */
    .service-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: var(--bd-green);
        transition: 0.3s;
    }

    .service-card:hover {
        box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        border-color: var(--bd-green);
    }

    .service-card:hover::after {
        height: 6px;
        background: var(--bd-red);
    }

    .s-icon {
        font-size: 2.5rem;
        color: var(--bd-green);
        margin-bottom: 15px;
        transition: 0.3s;
    }
    
    .service-card:hover .s-icon {
        transform: scale(1.1);
    }

    .s-name {
        font-weight: 600;
        font-size: 1.1rem;
        line-height: 1.4;
        margin-bottom: 10px;
    }

    .s-arrow {
        margin-top: auto;
        font-size: 0.9rem;
        color: #666;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .service-card:hover .s-arrow {
        color: var(--bd-red);
        font-weight: 600;
    }

    /* মোবাইল রেসপন্সিভ */
    @media (max-width: 768px) {
        .gov-banner {
            flex-direction: column;
            text-align: center;
            gap: 15px;
        }
        .banner-text h1 { font-size: 1.5rem; }
        .services-wrapper {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    @media (max-width: 480px) {
        .services-wrapper {
            grid-template-columns: 1fr;
        }
    }
</style>

<div class="main-wrapper">

    <div class="gov-banner">
        <div class="banner-text">
            <h1><i class="bi bi-display me-2"></i>ডিজিটাল সেবা পোর্টাল</h1>
            <p>আপনার প্রয়োজনীয় সকল অনলাইন সেবা এখন এক ঠিকানায়</p>
        </div>
        <div>
            <a href="recharge.php" class="balance-btn">
                <i class="bi bi-plus-circle-fill"></i> ব্যালেন্স যোগ করুন
            </a>
        </div>
    </div>

    <div class="info-grid">
        <a href="server_copy.php" class="info-card">
            <div class="info-icon"><i class="bi bi-cloud-arrow-down-fill"></i></div>
            <div>
                <div style="font-weight: 700; font-size: 1.1rem;">সার্ভার কপি</div>
                <small class="text-muted">ডাউনলোড করুন</small>
            </div>
        </a>
        <a href="order_history.php" class="info-card" style="border-left-color: #0d6efd;">
            <div class="info-icon" style="color: #0d6efd; background: #eef4ff;"><i class="bi bi-clock-history"></i></div>
            <div>
                <div style="font-weight: 700; font-size: 1.1rem;">অর্ডার তালিকা</div>
                <small class="text-muted">পূর্বের অর্ডার দেখুন</small>
            </div>
        </a>
        <a href="profile.php" class="info-card" style="border-left-color: var(--bd-red);">
            <div class="info-icon" style="color: var(--bd-red); background: #fff0f0;"><i class="bi bi-person-circle"></i></div>
            <div>
                <div style="font-weight: 700; font-size: 1.1rem;">প্রোফাইল</div>
                <small class="text-muted">একাউন্ট তথ্য</small>
            </div>
        </a>
    </div>

    <div class="search-container">
        <div class="search-box">
            <input type="text" id="serviceSearch" class="search-input" placeholder="সেবার নাম লিখে খুঁজুন...">
            <i class="bi bi-search search-btn-icon"></i>
        </div>
    </div>

    <div class="section-header">
        <div class="section-indicator"></div>
        <h3>সকল সেবাসমূহ</h3>
    </div>

    <div id="servicesWrap" class="services-wrapper">
        <?php if (!empty($services)): ?>
            <?php foreach ($services as $s): 
                $sid   = (int)$s['id'];
                $sname = htmlspecialchars($s['name'] ?? 'সেবার নাম', ENT_QUOTES, 'UTF-8');
            ?>
            
            <a href="subcategories.php?service_id=<?php echo $sid; ?>" class="service-card service-item" data-name="<?php echo strtolower($sname); ?>">
                <i class="bi bi-motherboard s-icon"></i>
                <div class="s-name"><?php echo $sname; ?></div>
                <div class="s-arrow">
                    বিস্তারিত দেখুন <i class="bi bi-arrow-right"></i>
                </div>
            </a>

            <?php endforeach; ?>
        <?php else: ?>
            <div class="w-100 text-center py-5 text-muted">
                <i class="bi bi-inbox fs-1"></i>
                <p class="mt-2">কোনো সেবা পাওয়া যায়নি</p>
            </div>
        <?php endif; ?>
    </div>

</div>

<?php require_once 'footer.php'; ?>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const searchInput = document.getElementById('serviceSearch');
        const serviceItems = document.querySelectorAll('.service-item');

        if(searchInput){
            searchInput.addEventListener('keyup', function(e) {
                const term = e.target.value.toLowerCase();
                
                serviceItems.forEach(item => {
                    const name = item.getAttribute('data-name');
                    if (name.includes(term)) {
                        item.style.display = 'flex';
                    } else {
                        item.style.display = 'none';
                    }
                });
            });
        }
    });
</script>