<?php 
require_once 'includes/db.php';
require_once 'includes/header.php'; 

// Fetch all services
$services = [];
try {
    // Auto-create table if it doesn't exist
    $check_table = $conn->query("SHOW TABLES LIKE 'services'");
    if($check_table->num_rows == 0) {
        $conn->query("CREATE TABLE services (
            id INT AUTO_INCREMENT PRIMARY KEY,
            title VARCHAR(255) NOT NULL,
            title_hi VARCHAR(255) DEFAULT NULL,
            description TEXT DEFAULT NULL,
            description_hi TEXT DEFAULT NULL,
            icon VARCHAR(100) DEFAULT 'fas fa-hands-helping',
            section ENUM('Standard','Others Social Work','Shaaskt Bharat') DEFAULT 'Standard',
            sort_order INT DEFAULT 0,
            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
        )");
    }
    
    $res = $conn->query("SELECT * FROM services ORDER BY sort_order ASC, id ASC");
    while($row = $res->fetch_assoc()) {
        $section = $row['section'] ?? '';
        $services[$section][] = $row;
    }
} catch (Exception $e) {
    // Graceful fallback
}
?>

<div class="container my-5">
    <div class="row">
        <div class="col-12 text-center mb-5">
            <h1 class="fw-bold" style="color: #A20E37;"><?php echo $lang == 'hi' ? 'हमारी सेवाएँ' : 'Our Services'; ?></h1>
            <div class="mx-auto mt-2" style="width: 80px; height: 3px; background-color: #FBBC09;"></div>
            <p class="text-muted fs-5 mt-4">Working tirelessly for the betterment of society</p>
        </div>
    </div>
    
    <!-- Main Section -->
    <div class="row g-4 justify-content-center">
        <?php 
        $main_services = array_merge($services['Standard'] ?? [], $services[''] ?? []);
        foreach($main_services as $s): 
            $title = $lang == 'hi' && !empty($s['title_hi']) ? h($s['title_hi']) : h($s['title']);
            $desc = $lang == 'hi' && !empty($s['description_hi']) ? h($s['description_hi']) : h($s['description']);
        ?>
        <div class="col-md-4">
            <a href="service-details.php?id=<?php echo $s['id']; ?>" class="text-decoration-none">
                <div class="card h-100 shadow-sm border-0 py-5 px-4 text-center service-card-minimal" style="border-radius: 20px;">
                    <div class="mb-4">
                        <i class="<?php echo h($s['icon']); ?> fa-3x" style="color: #A20E37;"></i>
                    </div>
                    <h4 class="fw-bold text-dark mb-3"><?php echo $title; ?></h4>
                    <p class="text-muted small mb-0"><?php echo $desc; ?></p>
                </div>
            </a>
        </div>
        <?php endforeach; ?>
    </div>

    <!-- Others Social Work Section -->
    <?php if(isset($services['Others Social Work'])): ?>
    <div class="row mt-5 pt-4">
        <div class="col-12 text-center mb-4">
            <h2 class="fw-bold" style="color: #A20E37;"><?php echo __('others_social_work'); ?></h2>
            <div class="mx-auto mt-2" style="width: 50px; height: 2px; background-color: #FBBC09;"></div>
        </div>
    </div>
    <div class="row g-4 justify-content-center">
        <?php foreach($services['Others Social Work'] as $s): 
            $title = $lang == 'hi' && !empty($s['title_hi']) ? h($s['title_hi']) : h($s['title']);
            $desc = $lang == 'hi' && !empty($s['description_hi']) ? h($s['description_hi']) : h($s['description']);
        ?>
        <div class="col-md-4">
            <a href="service-details.php?id=<?php echo $s['id']; ?>" class="text-decoration-none">
                <div class="card h-100 shadow-sm border-0 py-5 px-4 text-center service-card-minimal" style="border-radius: 20px;">
                    <div class="mb-4">
                        <i class="<?php echo h($s['icon']); ?> fa-3x" style="color: #A20E37;"></i>
                    </div>
                    <h4 class="fw-bold text-dark mb-3"><?php echo $title; ?></h4>
                    <p class="text-muted small mb-0"><?php echo $desc; ?></p>
                </div>
            </a>
        </div>
        <?php endforeach; ?>
    </div>
    <?php endif; ?>

    <!-- Shaaskt Bharat Section -->
    <?php if(isset($services['Shaaskt Bharat'])): ?>
    <div class="row mt-5 pt-4">
        <div class="col-12 text-center mb-4">
            <h2 class="fw-bold" style="color: #A20E37;"><?php echo __('shaaskt_bharat'); ?></h2>
            <div class="mx-auto mt-2" style="width: 50px; height: 2px; background-color: #FBBC09;"></div>
        </div>
    </div>
    <div class="row g-4 justify-content-center">
        <?php foreach($services['Shaaskt Bharat'] as $s): 
            $title = $lang == 'hi' && !empty($s['title_hi']) ? h($s['title_hi']) : h($s['title']);
            $desc = $lang == 'hi' && !empty($s['description_hi']) ? h($s['description_hi']) : h($s['description']);
        ?>
        <div class="col-md-4">
            <a href="service-details.php?id=<?php echo $s['id']; ?>" class="text-decoration-none">
                <div class="card h-100 shadow-sm border-0 py-5 px-4 text-center service-card-minimal" style="border-radius: 20px;">
                    <div class="mb-4">
                        <i class="<?php echo h($s['icon']); ?> fa-3x" style="color: #A20E37;"></i>
                    </div>
                    <h4 class="fw-bold text-dark mb-3"><?php echo $title; ?></h4>
                    <p class="text-muted small mb-0"><?php echo $desc; ?></p>
                </div>
            </a>
        </div>
        <?php endforeach; ?>
    </div>
    <?php endif; ?>

    <!-- Bottom Gallery Carousel -->
    <div class="row mt-5 pt-5">
        <div class="col-12 text-center mb-4">
            <h2 class="fw-bold" style="color: #A20E37;"><?php echo __('recent_images'); ?></h2>
            <div class="mx-auto mt-2 mb-4" style="width: 60px; height: 3px; background-color: #FBBC09;"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div id="servicesMainGallery" class="carousel slide shadow-lg rounded-4 overflow-hidden" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <?php 
                    $active = true;
                    try {
                        $check_gal = $conn->query("SHOW TABLES LIKE 'service_gallery'");
                        if($check_gal->num_rows == 0) {
                            $conn->query("CREATE TABLE service_gallery (
                                id INT AUTO_INCREMENT PRIMARY KEY,
                                service_id INT NOT NULL,
                                image VARCHAR(255) NOT NULL,
                                title VARCHAR(255) DEFAULT NULL,
                                subtitle VARCHAR(255) DEFAULT NULL,
                                created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
                            )");
                        }
                        $gres = $conn->query("SELECT * FROM service_gallery ORDER BY id DESC LIMIT 8");
                    } catch(Exception $e) {
                        $gres = false;
                    }
                    if($gres && $gres->num_rows > 0):
                        while($grow = $gres->fetch_assoc()):
                    ?>
                    <div class="carousel-item <?php echo $active ? 'active' : ''; ?>">
                        <div style="height: 500px; width: 100%; position: relative;">
                            <img src="<?php echo h($grow['image']); ?>" class="d-block w-100 h-100" style="object-fit: cover;" alt="...">
                            <div class="carousel-caption d-none d-md-block" style="background: rgba(162, 14, 55, 0.7); border-radius: 10px; bottom: 40px; left: 10%; right: 10%;">
                                <h3 class="fw-bold"><?php echo h($grow['title']); ?></h3>
                                <p><?php echo h($grow['subtitle']); ?></p>
                            </div>
                        </div>
                    </div>
                    <?php 
                        $active = false;
                        endwhile; 
                    else:
                    ?>
                    <div class="carousel-item active">
                        <img src="https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?q=80&w=2070&auto=format&fit=crop" class="d-block w-100" style="height: 500px; object-fit: cover;" alt="...">
                    </div>
                    <?php endif; ?>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#servicesMainGallery" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#servicesMainGallery" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        </div>
    </div>
</div>

<style>
.service-card-minimal {
    transition: all 0.3s ease;
    border: 1px solid transparent !important;
}
.service-card-minimal:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
    border-color: #FBBC09 !important;
}
.service-card-minimal i {
    transition: transform 0.3s ease;
}
.service-card-minimal:hover i {
    transform: scale(1.1);
}
</style>

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