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

<style>
.page-title {
    font-weight: 600;
    margin-bottom: 20px;
}

.card-custom {
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    border: none;
}

.table thead {
    background: #263238;
    color: #fff;
}

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

.status-hari-ini {
    background: #f8d7da !important;
}

.status-h2 {
    background: #fff3cd !important;
}

.status-h3 {
    background: #e2e3ff !important;
}
</style>

<div class="container-fluid">

<h3 class="page-title">🔔 Notifikasi Pengembalian Buku</h3>

<div class="card card-custom">
<div class="card-body">

<div class="table-responsive">
<table class="table table-bordered align-middle text-center">

<thead>
<tr>
    <th width="60">No</th>
    <th>Anggota</th>
    <th>Buku</th>
    <th width="150">Tanggal Kembali</th>
    <th width="130">Sisa Hari</th>
    <th width="120">WhatsApp</th>
</tr>
</thead>

<tbody>

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

<tr class="<?php
    if($n->sisa_hari <= 1){
        echo 'status-hari-ini';
    }elseif($n->sisa_hari == 2){
        echo 'status-h2';
    }else{
        echo 'status-h3';
    }
?>">

<td><?= $no++ ?></td>
<td class="text-start"><?= $n->nama ?></td>
<td class="text-start"><?= $n->judul ?></td>
<td><?= date('d-m-Y', strtotime($n->tanggal_kembali)) ?></td>

<td>
<?php if($n->sisa_hari <= 0){ ?>
    <span class="badge bg-danger">Hari Ini / Terlambat</span>
<?php }elseif($n->sisa_hari == 1){ ?>
    <span class="badge bg-danger">H-1</span>
<?php }elseif($n->sisa_hari == 2){ ?>
    <span class="badge bg-warning text-dark">H-2</span>
<?php }else{ ?>
    <span class="badge bg-primary">H-3</span>
<?php } ?>
</td>

<td>
<?php if(!empty($n->no_hp)){ ?>
<a target="_blank"
class="btn btn-success btn-sm"
href="https://wa.me/62<?= ltrim($n->no_hp,'0') ?>?text=Halo%20<?= urlencode($n->nama) ?>,%20kami%20mengingatkan%20pengembalian%20buku%20<?= urlencode($n->judul) ?>.%20Mohon%20dikembalikan%20sesuai%20jadwal.%20Terima%20kasih.">
📲 WA
</a>
<?php }else{ ?>
<span class="text-muted">-</span>
<?php } ?>
</td>

</tr>

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

<tr>
<td colspan="6" class="text-center text-muted py-4">
📭 Tidak ada notifikasi pengembalian
</td>
</tr>

<?php } ?>

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

</div>
</div>

</div>

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