<?php $this->load->view('template/header'); ?>
<?php $this->load->view('template/sidebar'); ?>

<style>
body{
    background:#f4f6f9;
}

.custom-card{
    background:#fff;
    border-radius:15px;
    box-shadow:0 8px 25px rgba(0,0,0,0.06);
    padding:25px;
    margin-bottom:25px;
    animation:fadeIn .4s ease-in-out;
}

@keyframes fadeIn{
    from{opacity:0; transform:translateY(10px);}
    to{opacity:1; transform:translateY(0);}
}

.section-title{
    font-weight:600;
    margin-bottom:20px;
    border-left:5px solid #0d6efd;
    padding-left:10px;
}

.card-buku{
    border-radius:15px;
    transition:.3s;
}

.card-buku:hover{
    transform:translateY(-6px);
    box-shadow:0 10px 25px rgba(0,0,0,.1);
}

.img-buku{
    height:200px;
    object-fit:contain;
    padding:15px;
}

.table{
    border-radius:12px;
    overflow:hidden;
}

.table thead{
    background:linear-gradient(90deg,#0d6efd,#4e73df);
    color:white;
}

.table tbody tr:hover{
    background:#f1f5ff;
}

.btn{
    border-radius:10px;
}

.btn-success{
    background:linear-gradient(45deg,#28a745,#20c997);
    border:none;
}

.btn-warning{
    background:linear-gradient(45deg,#ffc107,#ffb300);
    border:none;
    color:#000;
}

.btn-danger{
    background:linear-gradient(45deg,#dc3545,#c82333);
    border:none;
}
</style>

<h3 class="mb-4 fw-bold">📚 Data Buku</h3>

<!-- FORM TAMBAH (SUPERADMIN) -->
<?php if($this->session->userdata('level')=='superadmin'){ ?>

<div class="custom-card">
<h5 class="section-title">Tambah Buku</h5>

<form method="post" enctype="multipart/form-data"
action="<?= base_url('index.php/buku/tambah')?>" class="row g-3">

<div class="col-md-3">
<input name="judul" class="form-control" placeholder="Judul Buku" required>
</div>

<div class="col-md-2">
<select name="kategori" class="form-control">
<?php foreach($kategori as $k){ ?>
<option value="<?= $k->id_kategori ?>"><?= $k->nama_kategori ?></option>
<?php } ?>
</select>
</div>

<div class="col-md-2">
<input name="penulis" class="form-control" placeholder="Penulis">
</div>

<div class="col-md-2">
<input name="penerbit" class="form-control" placeholder="Penerbit">
</div>

<div class="col-md-1">
<input name="tahun" class="form-control" placeholder="Tahun">
</div>

<div class="col-md-1">
<input name="stok" type="number" class="form-control" placeholder="Stok" required>
</div>

<div class="col-md-2">
<input type="file" name="gambar" class="form-control">
</div>

<div class="col-12">
<button class="btn btn-success w-100">💾 Simpan Buku</button>
</div>

</form>
</div>

<?php } ?>

<!-- SEARCH -->
<div class="custom-card">
<h5 class="section-title">Cari Buku</h5>

<form method="get" id="formFilter">

<div class="row g-2">

<!-- SEARCH -->
<div class="col-md-6">
<input name="q" class="form-control"
placeholder="Cari judul / penulis..."
value="<?= $this->input->get('q') ?>">
</div>

<!-- KATEGORI AUTO FILTER -->
<div class="col-md-4">
<select name="kategori" id="kategoriFilter" class="form-control">

<option value="">Semua Kategori</option>

<?php foreach($kategori as $k){ ?>
<option value="<?= $k->id_kategori ?>"
<?= $this->input->get('kategori')==$k->id_kategori?'selected':'' ?>>
<?= $k->nama_kategori ?>
</option>
<?php } ?>

</select>
</div>

<!-- BUTTON SEARCH ONLY -->
<div class="col-md-2 d-grid">
<button class="btn btn-primary">🔍 Cari</button>
</div>

</div>

</form>


<!-- KATALOG -->
<div class="custom-card">
<h5 class="section-title">Katalog Buku</h5>

<div class="row">
<?php foreach($buku as $b){ ?>
<div class="col-md-3 mb-4">
<div class="card card-buku h-100 text-center">

<img src="<?= base_url('uploads/'.(!empty($b->gambar) ? $b->gambar : 'default.png')) ?>"
class="card-img-top img-buku mx-auto">

<div class="card-body d-flex flex-column">

<h6 class="fw-bold mb-1 text-dark"><?= $b->judul ?></h6>

<small class="text-muted mb-2"><?= $b->nama_kategori ?></small>

<div class="mt-auto">
<?php if($b->stok > 0){ ?>
<span class="badge bg-success px-3 py-2">
Stok: <?= $b->stok ?>
</span>
<?php } else { ?>
<span class="badge bg-danger px-3 py-2">
Stok Habis
</span>
<?php } ?>
</div>

</div>
</div>
</div>
<?php } ?>
</div>
</div>

<!-- TABEL DATA -->
<div class="custom-card">
<h5 class="section-title">Daftar Buku</h5>

<div class="table-responsive">
<table class="table table-hover align-middle shadow-sm">

<thead>
<tr>
<th width="50">No</th>
<th width="90">Cover</th>
<th>Judul</th>
<th>Kategori</th>
<th>Penulis</th>
<th>Penerbit</th>
<th width="80">Tahun</th>
<th width="70">Stok</th>
<th width="140">Aksi</th>
</tr>
</thead>

<tbody>

<?php if (!empty($buku)) { ?>
<?php $no = 1; foreach ($buku as $b) { ?>

<tr>
<td class="text-center"><?= $no++ ?></td>

<td class="text-center">
<img src="<?= base_url('uploads/'.($b->gambar ?? 'default.png')) ?>"
class="img-thumbnail"
style="width:60px;height:80px;object-fit:cover;">
</td>

<td><strong><?= $b->judul ?></strong></td>
<td><?= $b->nama_kategori ?></td>
<td><?= $b->penulis ?></td>
<td><?= $b->penerbit ?></td>
<td class="text-center"><?= $b->tahun ?></td>

<td class="text-center">
<span class="badge bg-info text-dark px-3">
<?= $b->stok ?>
</span>
</td>

<td class="text-center">
<?php if ($this->session->userdata('level') == 'superadmin') { ?>
<div class="d-grid gap-1">
<a href="<?= base_url('index.php/buku/edit/'.$b->id_buku) ?>"
class="btn btn-warning btn-sm">✏️ Edit</a>

<a href="<?= base_url('index.php/buku/hapus/'.$b->id_buku) ?>"
onclick="return confirm('Hapus buku?')"
class="btn btn-danger btn-sm">🗑️ Hapus</a>
</div>
<?php } else { ?>
<span class="badge bg-secondary">Read Only</span>
<?php } ?>
</td>

</tr>

<?php } ?>
<?php } else { ?>

<tr>
<td colspan="9" class="text-center text-muted">
Belum ada data buku
</td>
</tr>

<?php } ?>

</tbody>
</table>
</div>
</div>
<script>

document.getElementById("kategoriFilter")
.addEventListener("change", function(){
document.getElementById("formFilter").submit();
});

</script>

<?php $this->load->view('template/footer'); ?>
