<?php include 'includes/header.php'; ?>
<?php include 'includes/db.php'; ?>

<section class="research-section">
    <h2 class="section-title">Research & Innovation</h2>

    <div class="research-container">
    <?php
    $result = $conn->query("SELECT * FROM research ORDER BY created_at DESC");

    while($row = $result->fetch_assoc()):
        $rid = $row['id'];
        $imgs = $conn->query("SELECT image_path FROM research_images WHERE research_id=$rid");
        $images = [];
        while($i = $imgs->fetch_assoc()){
            $images[] = $i['image_path'];
        }
        if(empty($images)) $images[] = 'assets/images/no-image.jpg';
    ?>
        <div class="research-card">

            <!-- Slider -->
            <div class="research-slider">
                <div class="slides-inner">
                    <?php foreach($images as $img): ?>
                    <div class="slide">
                        <img src="<?= $img ?>" alt="<?= htmlspecialchars($row['title']) ?>">
                    </div>
                    <?php endforeach; ?>
                </div>
                <?php if(count($images)>1): ?>
                    <button class="prev">‹</button>
                    <button class="next">›</button>
                <?php endif; ?>
            </div>

            <!-- Research Content -->
            <div class="research-content">
                <span class="badge"><?= htmlspecialchars($row['category']) ?></span>
                <span class="status"><?= htmlspecialchars($row['status']) ?></span>

                <h3><?= htmlspecialchars($row['title']) ?></h3>
                <p><?= substr(strip_tags($row['abstract']),0,130) ?>...</p>

                <div class="research-actions">
                    <a href="research-details.php?id=<?= $rid ?>" class="btn">Read More</a>
                    <?php if($row['external_link']): ?>
                    <a href="<?= $row['external_link'] ?>" target="_blank" class="btn outline">External Link</a>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    <?php endwhile; ?>
    </div>
</section>

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

<!-- Slider JS -->
<script>
document.querySelectorAll('.research-card').forEach(card => {
    const slidesInner = card.querySelector('.slides-inner');
    const slides = card.querySelectorAll('.slide');
    const prev = card.querySelector('.prev');
    const next = card.querySelector('.next');
    let index = 0;

    function updateSlide() {
        slidesInner.style.transform = `translateX(-${index * 100}%)`;
    }

    if(prev){
        prev.addEventListener('click', () => {
            index = (index - 1 + slides.length) % slides.length;
            updateSlide();
        });
    }

    if(next){
        next.addEventListener('click', () => {
            index = (index + 1) % slides.length;
            updateSlide();
        });
    }

    updateSlide(); // show first slide
});
</script>


<style>
    /* ===== General ===== */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f7fa;
    color: #333;
    margin: 0;
    padding: 0;
}

/* ===== Section ===== */
.research-section {
    padding: 60px 20px;
    max-width: 1200px;
    margin: auto;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 40px;
    color: #25A9C2;
}

/* ===== Research Container ===== */
.research-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* ===== Card ===== */
.research-card {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

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

/* ===== Slider ===== */
.research-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 200px;
}

.slides-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
}

.slide img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

/* Buttons */
.research-slider .prev,
.research-slider .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    padding: 8px 14px;
    font-size: 20px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
    transition: background 0.3s;
}

.research-slider .prev:hover,
.research-slider .next:hover {
    background-color: rgba(0,0,0,0.7);
}

.research-slider .prev { left: 10px; }
.research-slider .next { right: 10px; }

/* ===== Content ===== */
.research-content {
    padding: 20px;
}

.research-content .badge {
    display: inline-block;
    background-color: #25A9C2;
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-right: 10px;
}

.research-content .status {
    display: inline-block;
    font-size: 12px;
    color: #555;
    font-weight: 500;
}

.research-content h3 {
    margin: 15px 0 10px;
    font-size: 1.3rem;
    color: #2c3e50;
}

.research-content p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
}

/* ===== Actions ===== */
.research-actions {
    margin-top: 15px;
}

.research-actions .btn {
    display: inline-block;
    padding: 8px 16px;
    font-size: 0.9rem;
    text-decoration: none;
    background-color: #25A9C2;
    color: #fff;
    border-radius: 8px;
    margin-right: 8px;
    transition: background 0.3s, transform 0.2s;
}

.research-actions .btn:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
}

.research-actions .btn.outline {
    background-color: transparent;
    color: #3498db;
    border: 1px solid #3498db;
}

.research-actions .btn.outline:hover {
    background-color: #3498db;
    color: #fff;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .research-section {
        padding: 40px 15px;
    }

    .slide img {
        height: 180px;
    }
}

</style>