<?php
require 'config.php';
// require_login(); // Uncomment if your system uses this check

// Fetch services and count them
$services = [];
if(isset($pdo)) {
    $services = $pdo->query("SELECT id, name FROM services WHERE is_active=1 ORDER BY id ASC")->fetchAll();
}
$service_count = count($services);

// Define the icon set for cycling
$icons = ['fa-id-card', 'fa-file-invoice', 'fa-shield-halved', 'fa-bolt', 'fa-fingerprint', 'fa-id-badge'];

require_once 'header.php'; 
?>

<style>
    :root {
        --gov-green: #006a4e; /* বাংলাদেশ পতাকার সবুজ */
        --gov-red: #f42a41;   /* বাংলাদেশ পতাকার লাল */
        --gov-light-bg: #f8f9fa;
        --gov-border: #dee2e6;
        --text-dark: #212529;
    }

    body {
        background-color: #f4f7f6;
    }

    /* Section Headers */
    .section-title {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--gov-green);
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 12px;
        border-bottom: 2px solid var(--gov-green);
        padding-bottom: 8px;
    }

    /* Hero Cards (Gov Theme) */
    .hero-card {
        background: #ffffff;
        border: 1px solid var(--gov-border);
        border-radius: 8px;
        padding: 25px;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
        height: 100%;
        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    }

    .hero-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 5px;
        background: var(--card-color);
    }

    .hero-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 20px rgba(0,0,0,0.1);
        border-color: var(--gov-green);
    }

    .hero-icon {
        width: 55px; height: 55px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.6rem;
        background: var(--gov-light-bg);
        color: var(--card-color);
        margin-bottom: 15px;
        border: 1px solid var(--gov-border);
    }

    .status-badge {
        font-size: 0.75rem;
        font-weight: 700;
        color: #fff;
        background: var(--gov-red);
        padding: 4px 10px;
        border-radius: 50px;
        display: inline-flex; align-items: center; gap: 6px;
    }

    .blink-dot {
        width: 7px; height: 7px;
        background: #fff;
        border-radius: 50%;
        animation: pulse 1.5s infinite;
    }

    /* Service Grid Items */
    .service-item {
        background: #ffffff;
        border: 1px solid var(--gov-border);
        border-left: 4px solid var(--gov-green);
        border-radius: 6px;
        padding: 18px;
        display: flex;
        align-items: center;
        gap: 15px;
        transition: 0.2s;
    }
    .service-item:hover {
        background: #f0fdf4;
        border-color: var(--gov-green);
        transform: scale(1.02);
    }
    .service-icon-box {
        width: 45px; height: 45px;
        border-radius: 8px;
        background: rgba(0, 106, 78, 0.1);
        color: var(--gov-green);
        display: flex; align-items: center; justify-content: center;
        font-size: 1.2rem;
    }

    .service-text {
        font-weight: 600;
        color: var(--text-dark);
    }

    /* Quick Links */
    .quick-link {
        background: #ffffff;
        border: 1px solid var(--gov-border);
        border-radius: 8px;
        padding: 20px 10px;
        text-align: center;
        color: var(--text-dark);
        transition: 0.3s;
        box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    }
    .quick-link:hover {
        background: var(--gov-green);
        color: #fff !important;
    }
    .quick-link:hover i {
        color: #fff !important;
    }

    .btn-gov {
        background-color: var(--gov-green);
        color: white;
        border-radius: 4px;
        padding: 6px 15px;
        font-size: 0.85rem;
        text-transform: uppercase;
        border: none;
    }
    .btn-gov:hover {
        background-color: #00563f;
        color: white;
    }

    @keyframes pulse {
        0% { opacity: 1; }
        50% { opacity: 0.4; }
        100% { opacity: 1; }
    }
</style>

<div class="container py-4">
    <div class="row g-4">
        
        <div class="col-12">
            <div class="section-title">
                <i class="fas fa-th-large"></i> সরকারি ডিজিটাল সেবা (অটোমেটিক)
            </div>
            
            <div class="row g-3">
                <div class="col-md-6 col-lg-4">
                    <a href="server_copy.php" class="text-decoration-none">
                        <div class="hero-card" style="--card-color: var(--gov-green);">
                            <div class="d-flex justify-content-between align-items-start">
                                <div class="hero-icon">
                                    <i class="fas fa-server"></i>
                                </div>
                                <div class="status-badge">
                                    <div class="blink-dot"></div> সচল
                                </div>
                            </div>
                            <div>
                                <h5 class="fw-bold text-dark mb-1">সার্ভার কপি</h5>
                                <small class="text-muted">তাত্ক্ষণিক ডাউনলোড সিস্টেম</small>
                            </div>
                            <div class="mt-3 text-end">
                                <span class="btn btn-gov btn-sm">আবেদন করুন <i class="fas fa-chevron-right ms-1"></i></span>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-md-6 col-lg-4">
                    <a href="backup.php" class="text-decoration-none">
                        <div class="hero-card" style="--card-color: #007bff;"> <div class="d-flex justify-content-between align-items-start">
                                <div class="hero-icon">
                                    <i class="fas fa-database"></i>
                                </div>
                                <div class="status-badge" style="background: #007bff;">
                                    <div class="blink-dot"></div> ২য় সার্ভার
                                </div>
                            </div>
                            <div>
                                <h5 class="fw-bold text-dark mb-1">সার্ভার কপি ২</h5>
                                <small class="text-muted">বিকল্প ব্যাকআপ সিস্টেম</small>
                            </div>
                            <div class="mt-3 text-end">
                                <span class="btn btn-gov btn-sm" style="background: #007bff;">চেক করুন <i class="fas fa-chevron-right ms-1"></i></span>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-md-6 col-lg-4">
                    <a href="sign_old_nid.php" class="text-decoration-none">
                        <div class="hero-card" style="--card-color: var(--gov-red);">
                            <div class="d-flex justify-content-between align-items-start">
                                <div class="hero-icon">
                                    <i class="fas fa-id-card"></i>
                                </div>
                                <div class="status-badge" style="background: var(--gov-green);">
                                    <div class="blink-dot"></div> অটো
                                </div>
                            </div>
                            <div>
                                <h5 class="fw-bold text-dark mb-1">এনআইডি মেক</h5>
                                <small class="text-muted">পুরানো আইডি কার্ড তৈরি</small>
                            </div>
                            <div class="mt-3 text-end">
                                <span class="btn btn-gov btn-sm" style="background: var(--gov-red);">তৈরি করুন <i class="fas fa-chevron-right ms-1"></i></span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <div class="col-12">
            <div class="section-title">
                <i class="fas fa-list-ul"></i> অন্যান্য সকল সেবা সমূহ
                <span class="badge bg-secondary ms-2 rounded-pill"><?php echo $service_count; ?></span>
            </div>

            <?php if ($service_count > 0): ?>
                <div class="row g-3">
                    <?php foreach ($services as $index => $s): 
                        $current_icon = $icons[$index % count($icons)];
                    ?>
                    <div class="col-md-6 col-lg-4">
                        <a href="subcategories.php?service_id=<?php echo $s['id']; ?>" class="text-decoration-none">
                            <div class="service-item">
                                <div class="service-icon-box">
                                    <i class="fas <?php echo $current_icon; ?>"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="mb-0 service-text"><?php echo htmlspecialchars($s['name']); ?></h6>
                                    <small class="text-muted">বিস্তারিত দেখুন</small>
                                </div>
                                <i class="fas fa-arrow-right text-muted" style="font-size: 0.8rem;"></i>
                            </div>
                        </a>
                    </div>
                    <?php endforeach; ?>
                </div>
            <?php else: ?>
                <div class="bg-white p-5 text-center rounded-3 border">
                    <i class="fas fa-info-circle fa-3x text-muted mb-3"></i>
                    <h5 class="text-dark">বর্তমানে কোন সেবা উপলব্ধ নেই</h5>
                </div>
            <?php endif; ?>
        </div>

        <div class="col-12 mb-5">
            <div class="section-title">
                <i class="fas fa-link"></i> কুইক লিংক
            </div>
            
            <div class="row g-3">
                <div class="col-4">
                    <a href="recharge.php" class="text-decoration-none">
                        <div class="quick-link">
                            <i class="fas fa-wallet fa-lg mb-2" style="color: var(--gov-green);"></i>
                            <div class="fw-bold small">রিচার্জ</div>
                        </div>
                    </a>
                </div>
                <div class="col-4">
                    <a href="dashboard.php" class="text-decoration-none">
                        <div class="quick-link">
                            <i class="fas fa-history fa-lg mb-2" style="color: #6c757d;"></i>
                            <div class="fw-bold small">হিস্টরি</div>
                        </div>
                    </a>
                </div>
                <div class="col-4">
                    <a href="profile.php" class="text-decoration-none">
                        <div class="quick-link">
                            <i class="fas fa-user-circle fa-lg mb-2" style="color: var(--gov-red);"></i>
                            <div class="fw-bold small">প্রোফাইল</div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

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