<?php
include __DIR__ . '/db_connect.php';
include_once __DIR__ . '/functions.php';

// --- 1. HELPER FUNCTION (Wrapped to prevent "Cannot redeclare" error) ---
if (!function_exists('getTeledramasByCategory')) {
    function getTeledramasByCategory($conn, $category, $limit = 6) { 
        $sql = "SELECT * FROM teledramas WHERE category = :category ORDER BY sort_order ASC LIMIT :limit";
        $stmt = $conn->prepare($sql);
        $stmt->bindValue(':category', $category, PDO::PARAM_STR);
        $stmt->bindValue(':limit', $limit, PDO::PARAM_INT);
        $stmt->execute();
        return $stmt->fetchAll(PDO::FETCH_ASSOC);
    }
}

// --- 2. FETCH DATA (ONLY WEEKDAY) ---
$weekday_teledramas = getTeledramasByCategory($conn, 'weekday', 6);
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teledramas | Swarnawahini</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<base href="http://localhost/swarnawahini_web_stable/">

<style>
/* =========================================
   GLOBAL STYLES
   ========================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Poppins', sans-serif;
    background: rgb(25, 52, 134);
    padding-top: 90px;
    overflow-x: hidden;
    color: white;
}

.container.ts {
    max-width: 1200px; 
    margin: 40px auto; 
    padding: 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    min-height: 600px;
}

.top-right-btn {
    position: absolute; top: 20px; right: 20px;
    background-color: #FFC107; color: #1A237E;
    padding: 8px 15px; border-radius: 15px;
    font-weight: bold; text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
    z-index: 10;
}
.top-right-btn:hover { background-color: #ff0000; transform: scale(1.05); }

.page-title { text-align: center; margin-bottom: 30px; font-size: 2rem; color: white; }

/* =========================================
   GRID & CARD STYLES
   ========================================= */
.teledrama-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem; padding: 0 0.75rem;
}

.card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
    border-radius: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%; max-width: 350px; margin: auto;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 5px rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.25);
}

.card-img-top { width: 100%; height: 200px; object-fit: cover; }
.card-body { padding: 15px; color: white; }
.card-text { font-size: 16px; color: #ecf0f1; margin-bottom: 15px; }

.btn-watch {
    display: inline-flex; align-items: center;
    background-color: #FFC107; color: #1A237E;
    padding: 8px 15px; border-radius: 15px;
    font-weight: bold; text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease; border: none;
}
.btn-watch:hover {
    background-color: #ff0000; color: #1A237E;
    transform: scale(1.05); text-decoration: none;
}

@media (max-width: 991px) { .teledrama-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) {
    .teledrama-grid { grid-template-columns: 1fr; }
    .card-img-top { height: 150px; }
    .card-text { font-size: 14px; }
    .btn-watch { font-size: 14px; padding: 6px 12px; }
}
</style>
</head>

<body>

<div class="container ts">
    <a href="pages/teledramas.php" class="top-right-btn">More</a>
    <h1 class="page-title">Weekday Teledramas</h1>

    <div class="teledrama-grid">
        <?php if (!empty($weekday_teledramas)): ?>
            <?php foreach ($weekday_teledramas as $row): ?>
                <?php 
                    $link = !empty($row['slug']) ? "teledramas/" . $row['slug'] : "teledrama_detail.php?id=" . $row['id'];
                ?>
                <div class="card">
                    <img 
                        src="<?= htmlspecialchars($row['thumbnail']) ?>" 
                        alt="<?= htmlspecialchars($row['title']) ?>" 
                        class="card-img-top"
                    >
                    <div class="card-body">
                        <p class="card-text">
                            <?= htmlspecialchars($row['description']) ?>
                        </p>
                        <a href="<?= htmlspecialchars($link) ?>" class="btn-watch">
                            <?= htmlspecialchars($row['title']) ?>
                        </a>
                    </div>
                </div>
            <?php endforeach; ?>
        <?php else: ?>
            <div style="grid-column: 1/-1; text-align: center; padding: 30px;">
                <h3>No Weekday dramas found.</h3>
            </div>
        <?php endif; ?>
    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>