<?php
include "koneksi.php";

$total_buku = mysqli_fetch_assoc(
mysqli_query(
$koneksi,
"SELECT COUNT(*) as total FROM buku"
)
)['total'];

$total_tersedia = mysqli_fetch_assoc(
mysqli_query(
$koneksi,
"SELECT SUM(stok_tersedia) as total FROM buku"
)
)['total'];

$total_kategori = mysqli_fetch_assoc(
mysqli_query(
$koneksi,
"SELECT COUNT(DISTINCT kategori) as total FROM buku"
)
)['total'];
?>

<!DOCTYPE html>

<html lang="id">

<head>

<meta charset="UTF-8">

<meta
name="viewport"
content="width=device-width, initial-scale=1">

<title>

Perpustakaan Digital

</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/5.15.4/css/all.min.css">

<style>

body{

background:#f4f6f9;

font-family:
'Segoe UI',
sans-serif;

}



/* NAVBAR */

.navbar-custom{

background:#001F54;

}

.navbar-brand{

color:white !important;

font-weight:bold;

}

/* HERO */

.hero{

background:

linear-gradient(

135deg,

#001F54,

#034078,

#1282A2

);

color:white;

padding:90px 0;

}

.hero h1{

font-size:50px;

font-weight:bold;

}

.hero p{

font-size:18px;

opacity:.9;

}



/* SEARCH */

.search-box{

margin-top:-30px;

position:relative;

z-index:10;

}

.search-box input{

height:60px;

border:none;

border-radius:50px;

padding-left:25px;

box-shadow:

0 5px 15px

rgba(

0,

0,

0,

.15

);

}



/* STAT */

.stat-card{

border:none;

border-radius:15px;

box-shadow:

0 3px 10px

rgba(

0,

0,

0,

.1

);

}



/* BOOK */

.book-card{

border:none;

border-radius:20px;

overflow:hidden;

transition:.3s;

box-shadow:

0 4px 15px

rgba(

0,

0,

0,

.08

);

}

.book-card:hover{

transform:

translateY(-8px);

box-shadow:

0 10px 25px

rgba(

0,

0,

0,

.2

);

}



.book-icon{

font-size:70px;

color:#034078;

}



.badge-tersedia{

background:#28a745;

color:white;

padding:8px 12px;

border-radius:20px;

}



.badge-kosong{

background:#dc3545;

color:white;

padding:8px 12px;

border-radius:20px;

}



/* FOOTER */

.footer{

margin-top:50px;

background:#001F54;

color:white;

padding:25px;

}

</style>

</head>

<body>


<!-- NAVBAR -->

<nav class="navbar navbar-expand-lg navbar-custom">

<div class="container">

<a class="navbar-brand" href="#">

<i class="fas fa-book"></i>

Perpustakaan Digital

</a>


<div class="ml-auto">

<a
href="guestbook.php"
class="btn btn-success mr-2">

<i class="fas fa-clipboard-list"></i>

Buku Tamu

</a>


<a
href="login.php"
class="btn btn-warning">

<i class="fas fa-lock"></i>

Area Petugas

</a>

</div>

</div>

</nav>

<!-- HERO -->

<section class="hero">

<div class="container text-center">

<h1>

Selamat Datang

</h1>

<p>

Temukan koleksi buku perpustakaan dengan cepat dan mudah

</p>

</div>

</section>

<div class="mt-4">

</div>

<!-- SEARCH -->

<div class="container search-box">

<input

type="text"

id="searchInput"

class="form-control"

placeholder="Cari judul buku, penulis, penerbit atau kategori...">

</div>



<!-- STATISTIK -->

<div class="container mt-5">

<div class="row">

<div class="col-md-4 mb-3">

<div class="card stat-card text-center">

<div class="card-body">

<h2>

<?= $total_buku ?>

</h2>

<p>

Judul Buku

</p>

</div>

</div>

</div>



<div class="col-md-4 mb-3">

<div class="card stat-card text-center">

<div class="card-body">

<h2>

<?= $total_tersedia ?>

</h2>

<p>

Stok Buku Tersedia

</p>

</div>

</div>

</div>



<div class="col-md-4 mb-3">

<div class="card stat-card text-center">

<div class="card-body">

<h2>

<?= $total_kategori ?>

</h2>

<p>

Kategori

</p>

</div>

</div>

</div>

</div>

</div>



<!-- DAFTAR BUKU -->

<div class="container mt-4">

<h3 class="mb-4">

<i class="fas fa-layer-group text-primary"></i>

Daftar Koleksi Buku

</h3>


<div class="row" id="bookContainer">

<?php

$query=
mysqli_query(

$koneksi,

"

SELECT *

FROM buku

ORDER BY judul ASC

"

);

while(
$data=
mysqli_fetch_assoc(
$query
)
){

?>

<div class="col-lg-4 col-md-6 mb-4 book-item">

<div class="card book-card h-100">

<div class="card-body text-center">


<?php if(!empty($data['cover'])){ ?>

<img src="upload/<?= $data['cover'] ?>"
     style="
     width:150px;
     height:220px;
     object-fit:cover;
     border-radius:15px;
     box-shadow:0 5px 15px rgba(0,0,0,.2);
     ">

<?php }else{ ?>

<i class="fas fa-book-open book-icon"></i>

<?php } ?>


<hr>

<h5>

<?= htmlspecialchars($data['judul']) ?>

</h5>


<p class="text-muted">

<?= htmlspecialchars($data['penulis']) ?>

</p>


<p>

<strong>Kategori:</strong>

<?= htmlspecialchars($data['kategori']) ?>

</p>


<p>

<strong>Tahun:</strong>

<?= htmlspecialchars($data['tahun_terbit']) ?>

</p>


<?php if($data['stok_tersedia']>0){ ?>

<span class="badge-tersedia">

Tersedia

</span>

<?php }else{ ?>

<span class="badge-kosong">

Kosong

</span>

<?php } ?>


<hr>

<p>

Stok:

<b>

<?= $data['stok_tersedia'] ?>

</b>

/

<?= $data['stok_total'] ?>

</p>

</div>

</div>

</div>

<?php } ?>

</div>

</div>



<div class="footer text-center">

<h5>

Perpustakaan Digital

</h5>

<p>

STIKOM Tunas Bangsa

</p>

© <?= date('Y') ?>

</div>


<script>

document

.getElementById(

'searchInput'

)

.addEventListener(

'keyup',

function(){

let filter=
this.value
.toLowerCase();

let items=
document.querySelectorAll(
'.book-item'
);

items.forEach(

function(item){

let text=
item.innerText
.toLowerCase();

item.style.display=

text.includes(filter)

?

''

:

'none';

}

);

}

);

</script>

</body>

</html>