<?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;
}

.form-control,.form-select{
    border-radius:10px;
}

.form-control:focus,.form-select:focus{
    box-shadow:0 0 0 .2rem rgba(13,110,253,.15);
    border-color:#0d6efd;
}

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

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

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

.badge{
    padding:6px 10px;
    border-radius:8px;
    font-weight:500;
}

.btn{
    border-radius:10px;
}

.btn-primary{
    background:linear-gradient(45deg,#0d6efd,#4e73df);
    border:none;
}

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

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

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

<!-- FORM PEMINJAMAN -->
<div class="custom-card">

<?php if($this->session->flashdata('error')){ ?>
<div class="alert alert-danger"><?= $this->session->flashdata('error') ?></div>
<?php } ?>

<?php if($this->session->flashdata('success')){ ?>
<div class="alert alert-success"><?= $this->session->flashdata('success') ?></div>
<?php } ?>

<h5 class="section-title">Form Peminjaman</h5>

<form method="post" action="<?= base_url('index.php/peminjaman/tambah') ?>" class="row g-3" id="formPinjam">

<div class="col-md-3">
<label>NIS</label>
<select id="nis" class="form-control" required>
<option value="">-- Pilih NIS --</option>
<?php foreach($anggota as $a){ ?>
<option value="<?= $a->id_anggota ?>" data-nama="<?= $a->nama ?>">
<?= $a->nis ?>
</option>
<?php } ?>
</select>
</div>

<div class="col-md-4">
<label>Nama Anggota</label>
<input type="text" id="nama_anggota" class="form-control" readonly>
<input type="hidden" name="anggota" id="id_anggota">
</div>

<div class="col-md-2">
<label>Pinjaman Aktif</label>
<input id="aktif" class="form-control" readonly>
</div>

<div class="col-md-4">
<label>Buku</label>
<select id="buku" class="form-control">
<option value="">-- Pilih Buku --</option>
<?php foreach($buku as $b){ ?>
<option value="<?= $b->id_buku ?>" data-judul="<?= $b->judul ?>" data-stok="<?= $b->stok ?>">
<?= $b->judul ?> (stok <?= $b->stok ?>)
</option>
<?php } ?>
</select>
</div>

<div class="col-md-2">
<label>Jumlah</label>
<input type="number" id="qty" class="form-control" value="1" min="1">
</div>

<div class="col-md-2 d-flex align-items-end">
<button type="button" class="btn btn-primary w-100" onclick="tambahBuku()">➕ Tambah</button>
</div>

<div class="col-12">
<table class="table table-hover align-middle mt-3 shadow-sm">
<thead>
<tr>
<th>Judul Buku</th>
<th>Qty</th>
<th width="120">Aksi</th>
</tr>
</thead>
<tbody id="listBuku"></tbody>
</table>
</div>

<input type="hidden" name="buku_data" id="buku_data">

<div class="col-12">
<button class="btn btn-success">💾 Simpan Peminjaman</button>
</div>

</form>
</div>

<!-- FILTER -->
<div class="custom-card">
<h5 class="section-title">Filter Data</h5>

<form method="get" id="formFilter" class="row g-3">

<div class="col-md-3">
<input type="text" name="q" class="form-control auto-filter"
placeholder="Cari anggota / buku"
value="<?= $this->input->get('q') ?>">
</div>

<div class="col-md-2">
<select name="status" class="form-control auto-filter">
<option value="">Semua Status</option>
<option value="dipinjam" <?= $this->input->get('status')=='dipinjam'?'selected':'' ?>>Dipinjam</option>
<option value="dikembalikan" <?= $this->input->get('status')=='dikembalikan'?'selected':'' ?>>Dikembalikan</option>
<option value="rusak" <?= $this->input->get('status')=='rusak'?'selected':'' ?>>Rusak</option>
<option value="hilang" <?= $this->input->get('status')=='hilang'?'selected':'' ?>>Hilang</option>
</select>
</div>

<div class="col-md-2">
<select name="ganti" class="form-control auto-filter">
<option value="">Penggantian</option>
<option value="belum" <?= $this->input->get('ganti')=='belum'?'selected':'' ?>>Belum</option>
<option value="sudah" <?= $this->input->get('ganti')=='sudah'?'selected':'' ?>>Sudah</option>
<option value="tidak_perlu" <?= $this->input->get('ganti')=='tidak_perlu'?'selected':'' ?>>Tidak Perlu</option>
</select>
</div>

<div class="col-md-2">
<select name="filter" class="form-control auto-filter">
<option value="">Waktu</option>
<option value="harian" <?= $this->input->get('filter')=='harian'?'selected':'' ?>>Harian</option>
<option value="mingguan" <?= $this->input->get('filter')=='mingguan'?'selected':'' ?>>Mingguan</option>
<option value="bulanan" <?= $this->input->get('filter')=='bulanan'?'selected':'' ?>>Bulanan</option>
<option value="tahunan" <?= $this->input->get('filter')=='tahunan'?'selected':'' ?>>Tahunan</option>
</select>
</div>

<div class="col-md-3">
<input type="date" name="tanggal" class="form-control auto-filter"
value="<?= $this->input->get('tanggal') ?>">
</div>

</form>
</div>

<!-- DATA -->
<div class="custom-card">
<h5 class="section-title">Data Peminjaman (Per Buku)</h5>

<table class="table table-hover align-middle shadow-sm">
<thead>
<tr>
<th>No</th>
<th>Anggota</th>
<th>Buku</th>
<th>Jumlah</th>
<th>Tgl Pinjam</th>
<th>Jatuh Tempo</th>
<th>Tgl Dikembalikan</th>
<th>Status</th>
<th>Penggantian</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>

<?php if(!empty($data)){ $no=1; foreach($data as $d){

$status=$d->status ?? 'dipinjam';

$warna=[
'dipinjam'=>'warning',
'dikembalikan'=>'success',
'rusak'=>'danger',
'hilang'=>'dark'
];
?>

<tr>
<td><?= $no++ ?></td>
<td><?= $d->nama ?></td>
<td><?= $d->judul ?></td>
<td><?= $d->jumlah ?></td>
<td><?= $d->tanggal_pinjam ?></td>
<td><?= $d->tanggal_kembali ?></td>
<td><?= $d->tanggal_dikembalikan ?: '-' ?></td>

<td><span class="badge bg-<?= $warna[$status] ?>"><?= ucfirst($status) ?></span></td>

<td>
<?php
if($status=='rusak'||$status=='hilang'){
echo ($d->status_ganti ?? 'belum')=='sudah'
? '<span class="badge bg-success">Sudah</span>'
: '<span class="badge bg-danger">Belum</span>';
}else{
echo '<span class="badge bg-secondary">Tidak Perlu</span>';
}
?>
</td>

<td>
<form method="post" action="<?= base_url('index.php/peminjaman/update_status') ?>">
<input type="hidden" name="id_detail" value="<?= $d->id_detail ?>">
<select name="status" class="form-select form-select-sm mb-1"
onchange="if(confirm('Ubah status buku?')) this.form.submit();">
<option value="dipinjam" <?= $status=='dipinjam'?'selected':'' ?>>Dipinjam</option>
<option value="dikembalikan" <?= $status=='dikembalikan'?'selected':'' ?>>Dikembalikan</option>
<option value="rusak" <?= $status=='rusak'?'selected':'' ?>>Rusak</option>
<option value="hilang" <?= $status=='hilang'?'selected':'' ?>>Hilang</option>
</select>
</form>

<?php if(($status=='rusak'||$status=='hilang') && (($d->status_ganti ?? 'belum')!='sudah')){ ?>
<a href="<?= base_url('index.php/peminjaman/form_ganti/'.$d->id_detail) ?>" class="btn btn-danger btn-sm w-100">
Konfirmasi Ganti
</a>
<?php } ?>
</td>

</tr>

<?php }}else{ ?>
<tr><td colspan="10" align="center">Belum ada data peminjaman</td></tr>
<?php } ?>

</tbody>
</table>

<div class="custom-card d-flex justify-content-between align-items-center bg-light mt-3">
<div>
📚 Buku yang belum dikembalikan :
<b class="text-danger"><?= $belum_kembali ?></b>
</div>
<a href="<?= base_url('index.php/peminjaman/monitoring_ganti') ?>" class="btn btn-dark btn-sm">
Lihat Detail
</a>
</div>

</div>

<script>
const formFilter=document.getElementById("formFilter");

document.querySelectorAll('.auto-filter').forEach(el=>{
el.addEventListener('change',()=>formFilter.submit());
});

document.querySelector("input[name=q]").addEventListener("keypress",e=>{
if(e.key==="Enter"){
e.preventDefault();
formFilter.submit();
}
});

document.getElementById('nis').addEventListener('change',function(){
const s=this.options[this.selectedIndex];
document.getElementById('nama_anggota').value=s.dataset.nama||'';
document.getElementById('id_anggota').value=s.value||'';

fetch("<?= base_url('index.php/peminjaman/cek_pinjam')?>",{
method:"POST",
headers:{'Content-Type':'application/x-www-form-urlencoded'},
body:"id="+s.value
})
.then(r=>r.json())
.then(d=>aktif.value=d.jumlah);
});

let daftarBuku=[];

function tambahBuku(){
const s=buku.options[buku.selectedIndex];
const id=buku.value;
const judul=s.dataset.judul;
const stok=parseInt(s.dataset.stok);
const qty=parseInt(document.getElementById('qty').value);

if(!id||qty<=0)return alert('Pilih buku');
if(qty>stok)return alert('Stok kurang');

const i=daftarBuku.findIndex(b=>b.id==id);
if(i!=-1) daftarBuku[i].qty+=qty;
else daftarBuku.push({id,judul,qty});

render();
}

function render(){
listBuku.innerHTML=daftarBuku.map((b,i)=>`
<tr>
<td>${b.judul}</td>
<td>${b.qty}</td>
<td><button type="button" class="btn btn-danger btn-sm w-100" onclick="hapus(${i})">Hapus</button></td>
</tr>`).join('');

buku_data.value=JSON.stringify(daftarBuku);
}

function hapus(i){ daftarBuku.splice(i,1); render(); }

formPinjam.addEventListener('submit',e=>{
if(!daftarBuku.length){
e.preventDefault();
alert('Belum ada buku');
}
});
</script>

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