<?php
require_once "koneksi.php";

$q = isset($_GET['q']) ? $_GET['q'] : '';

$data = mysqli_query($koneksi, "
SELECT * FROM materi 
WHERE judul LIKE '%$q%' 
ORDER BY id DESC
");
?>

<!DOCTYPE html>
<html>
<head>
<title>Materi Pengembangan Diri</title>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">

<!-- AOS -->
<link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet">

<style>
body {
    font-family:'Poppins',sans-serif;
    background:#f4f6f9;
    transition:0.3s;
}

/* HERO */
.hero {
    background: linear-gradient(135deg,#0059ff,#f4f6f9);
    color:white;
    padding:60px 20px;
    text-align:center;
}

/* CARD */
.card-modern {
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    transition:0.3s;
    border:none;
}
.card-modern:hover {
    transform:translateY(-8px);
}

/* IMAGE */
.img-thumb {
    height:200px;
    object-fit:cover;
}

/* SEARCH */
.search-box {
    border-radius:10px;
}

/* BUTTON */
.btn {
    border-radius:10px;
    transition:0.3s;
}
.btn:hover {
    transform:scale(1.05);
}

/* DARK MODE */
body.dark {
    background:#0f172a;
    color:white;
}
body.dark .card-modern {
    background:#1e293b;
}
body.dark .hero {
    background:linear-gradient(135deg,#020617,#1e293b);
}
</style>
</head>

<body>

<!-- HERO -->
 
<div class="hero" data-aos="fade-down">
    <h2>📚 Materi Pengembangan Diri</h2>
    <p>Upgrade diri kamu dengan materi terbaik</p>
    <a href="hal_utama.php" class="btn btn-dark btn-sm">⬅ Kembali</a>
</div>

<div class="container mt-4">

<!-- SEARCH -->
<form method="get" class="mb-4" data-aos="fade-up">
<input type="text" name="q" class="form-control search-box" placeholder="🔍 Cari materi..." value="<?= $q ?>">
</form>

<div class="row">

<?php while($m = mysqli_fetch_array($data)): ?>

<div class="col-md-4 mb-4" data-aos="zoom-in">
<div class="card card-modern">

<img src="materi_img/<?= $m['gambar'] ?>" class="w-100 img-thumb">

<div class="p-3">

<h5><?= $m['judul'] ?></h5>

<p><?= substr(strip_tags($m['deskripsi']),0,80) ?>...</p>

<a href="lihat_dan_download_materi.php?id=<?= $m['id'] ?>" class="btn btn-primary btn-sm">
📖 Baca Selengkapnya
</a>

</div>

</div>
</div>

<?php endwhile; ?>

</div>

<!-- DARK MODE BUTTON -->
<div class="text-center mt-4">
<button onclick="toggleDark()" class="btn btn-dark btn-sm">🌙 Dark Mode</button>
</div>

</div>

<!-- JS -->
<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
<script>
AOS.init({duration:1000});
</script>

<script>
// DARK MODE
function toggleDark(){
    document.body.classList.toggle("dark");
    localStorage.setItem("darkmode", document.body.classList.contains("dark"));
}

if(localStorage.getItem("darkmode") === "true"){
    document.body.classList.add("dark");
}
</script>

</body>
</html>