<?php
require_once "koneksi.php";

$id = $_GET['id'];
$data = mysqli_fetch_array(mysqli_query($koneksi, "SELECT * FROM materi WHERE id=$id"));
?>

<!DOCTYPE html>
<html>
<head>
<title><?= $data['judul'] ?></title>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
body {
    background: #f4f6f9;
    font-family: 'Segoe UI', sans-serif;
}

/* HERO */
.hero {
    position: relative;
    height: 300px;
    overflow: hidden;
    border-radius: 15px;
}

.hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.5);
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    text-align:center;
    padding:20px;
}

/* CARD */
.card-modern {
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

/* CONTENT */
.content-text {
    line-height: 1.8;
    color: #333;
}

/* BUTTON */
.btn-modern {
    border-radius: 10px;
    padding: 10px 20px;
}
</style>
</head>

<body>

<div class="container mt-4">

<!-- HERO -->
<div class="hero mb-4">
    <img src="materi_img/<?= $data['gambar'] ?>">
    <div class="hero-overlay">
        <h2><?= $data['judul'] ?></h2>
    </div>
</div>

<!-- CONTENT -->
<div class="card card-modern p-4">

<div class="content-text">
<?= nl2br($data['deskripsi']) ?>
</div>

<hr>

<!-- ACTION -->
<div class="d-flex justify-content-between align-items-center">

<a href="form_pengembangandiri.php" class="btn btn-secondary btn-modern">
<i class="fas fa-arrow-left"></i> Kembali
</a>

<a href="materi_file/<?= $data['file'] ?>" class="btn btn-success btn-modern" download>
<i class="fas fa-download"></i> Download Materi
</a>

</div>

</div>

</div>

</body>
</html>