<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>

<style>
/* ── reuse gaya ar-page-header dari inventaris ── */
.ar-page-header { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:14px; margin-bottom:24px; }
.ar-header-left h4 { font-size:1.25rem; font-weight:800; color:#0b5a52; margin:0 0 5px; display:flex; align-items:center; gap:11px; letter-spacing:-.3px; }
.ar-header-left h4 .hi { width:40px; height:40px; border-radius:11px; background:linear-gradient(135deg,#7c3aed,#a78bfa); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.05rem; box-shadow:0 4px 12px rgba(124,58,237,.32); flex-shrink:0; }
.ar-breadcrumb { display:flex; align-items:center; gap:6px; font-size:.77rem; color:#94a3b8; padding-left:51px; }
.ar-breadcrumb a { color:#7c3aed; text-decoration:none; font-weight:600; }
.ar-breadcrumb a:hover { text-decoration:underline; }
.btn-pinjam { display:inline-flex; align-items:center; gap:7px; padding:10px 24px; border-radius:50px; border:none; background:#7c3aed; color:#fff; font-size:.85rem; font-weight:700; text-decoration:none; box-shadow:0 3px 12px rgba(124,58,237,.28); transition:all .2s; white-space:nowrap; cursor:pointer; }
.btn-pinjam:hover { background:#6d28d9; box-shadow:0 5px 16px rgba(124,58,237,.38); transform:translateY(-1px); color:#fff; }
.badge-status { font-size:.73em; padding:.35em .75em; border-radius:50px; font-weight:700; }
.status-dipinjam  { background:#7c3aed20; color:#7c3aed; border:1px solid #7c3aed40; }
.status-dikembalikan { background:#19875420; color:#198754; border:1px solid #19875440; }
.status-terlambat { background:#dc354520; color:#dc3545; border:1px solid #dc354540; }
.tbl-hover tr:hover td { background:#f9f5ff; }
.filter-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 16px; border-radius:50px; border:1.5px solid #e2e8f0; background:#fff; color:#64748b; font-size:.82rem; font-weight:600; cursor:pointer; transition:all .18s; text-decoration:none; }
.filter-pill:hover, .filter-pill.active { border-color:#7c3aed; background:#7c3aed12; color:#7c3aed; }
@media(max-width:767px){
    .ar-page-header { flex-direction:column; }
    .btn-pinjam { width:100%; justify-content:center; }
    .stats-row>.col-md-3 { flex:0 0 50%; max-width:50%; }
    .table-responsive { font-size:.82rem; }
}
</style>

<!-- Header -->
<div class="ar-page-header">
    <div class="ar-header-left">
        <h4>
            <span class="hi"><i class="bi bi-arrow-left-right"></i></span>
            Peminjaman Barang
        </h4>
        <div class="ar-breadcrumb">
            <a href="<?php echo base_url('dashboard'); ?>">Dashboard</a>
            <span>/</span>
            <a href="<?php echo base_url('inventaris'); ?>">Inventaris</a>
            <span>/</span>
            <span>Peminjaman</span>
        </div>
    </div>
    <?php if($is_admin): ?>
    <a href="<?php echo base_url('peminjaman-inventaris/tambah'); ?>" class="btn-pinjam">
        <i class="bi bi-plus-lg"></i> Catat Peminjaman
    </a>
    <?php endif; ?>
</div>

<!-- Flash Messages -->
<?php if($this->session->flashdata('success')): ?>
<div class="alert alert-success alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
    <i class="bi bi-check-circle-fill me-2"></i><?php echo $this->session->flashdata('success'); ?>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<?php endif; ?>
<?php if($this->session->flashdata('error')): ?>
<div class="alert alert-danger alert-dismissible fade show rounded-3 border-0 shadow-sm mb-3" role="alert">
    <i class="bi bi-exclamation-circle-fill me-2"></i><?php echo $this->session->flashdata('error'); ?>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<?php endif; ?>

<!-- Stats -->
<div class="row g-3 mb-4 stats-row">
    <div class="col-md-3 col-6">
        <div class="card border-0 shadow-sm" style="border-radius:12px;border-left:4px solid #7c3aed!important;">
            <div class="card-body d-flex align-items-center py-3">
                <div class="rounded-3 d-flex align-items-center justify-content-center me-3 flex-shrink-0" style="width:48px;height:48px;background:#7c3aed20;">
                    <i class="bi bi-arrow-left-right fs-4" style="color:#7c3aed;"></i>
                </div>
                <div>
                    <div class="text-muted small fw-semibold">Total Catatan</div>
                    <div class="fw-bold fs-4 text-dark lh-1"><?php echo $stats['total']; ?></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-6">
        <div class="card border-0 shadow-sm" style="border-radius:12px;border-left:4px solid #f59e0b!important;">
            <div class="card-body d-flex align-items-center py-3">
                <div class="rounded-3 d-flex align-items-center justify-content-center me-3 flex-shrink-0" style="width:48px;height:48px;background:#f59e0b20;">
                    <i class="bi bi-box-arrow-up-right fs-4" style="color:#f59e0b;"></i>
                </div>
                <div>
                    <div class="text-muted small fw-semibold">Sedang Dipinjam</div>
                    <div class="fw-bold fs-4 text-dark lh-1"><?php echo $stats['dipinjam']; ?></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-6">
        <div class="card border-0 shadow-sm" style="border-radius:12px;border-left:4px solid #198754!important;">
            <div class="card-body d-flex align-items-center py-3">
                <div class="rounded-3 d-flex align-items-center justify-content-center me-3 flex-shrink-0" style="width:48px;height:48px;background:#19875420;">
                    <i class="bi bi-check-circle fs-4 text-success"></i>
                </div>
                <div>
                    <div class="text-muted small fw-semibold">Dikembalikan</div>
                    <div class="fw-bold fs-4 text-dark lh-1"><?php echo $stats['dikembalikan']; ?></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-6">
        <div class="card border-0 shadow-sm" style="border-radius:12px;border-left:4px solid #dc3545!important;">
            <div class="card-body d-flex align-items-center py-3">
                <div class="rounded-3 d-flex align-items-center justify-content-center me-3 flex-shrink-0" style="width:48px;height:48px;background:#dc354520;">
                    <i class="bi bi-clock-history fs-4 text-danger"></i>
                </div>
                <div>
                    <div class="text-muted small fw-semibold">Terlambat</div>
                    <div class="fw-bold fs-4 text-dark lh-1"><?php echo $stats['terlambat']; ?></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Filter Pills -->
<div class="d-flex gap-2 flex-wrap mb-3">
    <a href="<?php echo base_url('peminjaman-inventaris'); ?>"
       class="filter-pill <?php echo !$status_aktif ? 'active' : ''; ?>">
        <i class="bi bi-list"></i> Semua
    </a>
    <a href="<?php echo base_url('peminjaman-inventaris?status=dipinjam'); ?>"
       class="filter-pill <?php echo $status_aktif=='dipinjam' ? 'active' : ''; ?>">
        <i class="bi bi-box-arrow-up-right"></i> Dipinjam
    </a>
    <a href="<?php echo base_url('peminjaman-inventaris?status=dikembalikan'); ?>"
       class="filter-pill <?php echo $status_aktif=='dikembalikan' ? 'active' : ''; ?>">
        <i class="bi bi-check-circle"></i> Dikembalikan
    </a>
    <a href="<?php echo base_url('peminjaman-inventaris?status=terlambat'); ?>"
       class="filter-pill <?php echo $status_aktif=='terlambat' ? 'active' : ''; ?>">
        <i class="bi bi-clock-history"></i> Terlambat
    </a>
</div>

<!-- Tabel -->
<div class="card border-0 shadow-sm" style="border-radius:14px;overflow:hidden;">
    <div class="card-body p-0">
        <?php if(!empty($peminjaman)): ?>
        <div class="table-responsive">
            <table class="table table-hover mb-0 tbl-hover" style="font-size:.87rem;">
                <thead style="background:#f8f9fa;">
                    <tr>
                        <th class="ps-4 py-3 fw-semibold text-muted" style="border:none;">Kode</th>
                        <th class="py-3 fw-semibold text-muted" style="border:none;">Barang</th>
                        <th class="py-3 fw-semibold text-muted" style="border:none;">Peminjam</th>
                        <th class="py-3 fw-semibold text-muted" style="border:none;">Jumlah</th>
                        <th class="py-3 fw-semibold text-muted" style="border:none;">Tgl Pinjam</th>
                        <th class="py-3 fw-semibold text-muted" style="border:none;">Rencana Kembali</th>
                        <th class="py-3 fw-semibold text-muted" style="border:none;">Status</th>
                        <th class="py-3 pe-4 fw-semibold text-muted text-end" style="border:none;">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                <?php foreach($peminjaman as $p):
                    $terlambat = ($p->status == 'dipinjam' && $p->tanggal_rencana_kembali < date('Y-m-d'));
                    $status_class = $terlambat ? 'status-terlambat' : 'status-' . $p->status;
                    $status_label = $terlambat ? '⏰ Terlambat' : ($p->status == 'dipinjam' ? '📦 Dipinjam' : '✅ Dikembalikan');
                ?>
                <tr>
                    <td class="ps-4 py-3">
                        <span class="fw-bold" style="color:#7c3aed;font-size:.8rem;"><?php echo $p->kode_pinjam; ?></span>
                    </td>
                    <td class="py-3">
                        <div class="fw-semibold text-dark"><?php echo htmlspecialchars($p->nama_barang ?? 'Barang Dihapus'); ?></div>
                        <div class="text-muted" style="font-size:.75rem;">#<?php echo $p->kode_barang; ?></div>
                    </td>
                    <td class="py-3">
                        <div class="fw-semibold"><?php echo htmlspecialchars($p->nama_peminjam ?? 'Tidak Diketahui'); ?></div>
                        <?php if($p->no_hp_peminjam): ?>
                        <div class="text-muted" style="font-size:.75rem;"><i class="bi bi-telephone me-1"></i><?php echo $p->no_hp_peminjam; ?></div>
                        <?php endif; ?>
                    </td>
                    <td class="py-3">
                        <span class="fw-semibold"><?php echo $p->jumlah_pinjam; ?></span>
                        <span class="text-muted"><?php echo $p->satuan; ?></span>
                    </td>
                    <td class="py-3"><?php echo date('d/m/Y', strtotime($p->tanggal_pinjam)); ?></td>
                    <td class="py-3">
                        <span class="<?php echo $terlambat ? 'text-danger fw-bold' : ''; ?>">
                            <?php echo date('d/m/Y', strtotime($p->tanggal_rencana_kembali)); ?>
                        </span>
                    </td>
                    <td class="py-3">
                        <span class="badge-status <?php echo $status_class; ?>"><?php echo $status_label; ?></span>
                    </td>
                    <td class="py-3 pe-4 text-end">
                        <div class="d-flex gap-1 justify-content-end">
                            <a href="<?php echo base_url('peminjaman-inventaris/detail/'.$p->id); ?>"
                               class="btn btn-sm btn-outline-secondary rounded-pill px-3"
                               style="font-size:.78rem;">Detail</a>
                            <?php if($is_admin && $p->status != 'dikembalikan'): ?>
                            <a href="<?php echo base_url('peminjaman-inventaris/kembali/'.$p->id); ?>"
                               class="btn btn-sm rounded-pill px-3 text-white fw-semibold"
                               style="background:#198754;border:none;font-size:.78rem;">
                                <i class="bi bi-box-arrow-in-down me-1"></i>Kembali
                            </a>
                            <?php endif; ?>
                        </div>
                    </td>
                </tr>
                <?php endforeach; ?>
                </tbody>
            </table>
        </div>
        <?php else: ?>
        <div class="text-center py-5">
            <div class="rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width:80px;height:80px;background:#f5f3ff;">
                <i class="bi bi-arrow-left-right fs-2" style="color:#7c3aed;"></i>
            </div>
            <h6 class="text-muted fw-semibold">Belum ada catatan peminjaman</h6>
            <p class="text-muted small mb-0">Klik "Catat Peminjaman" untuk mulai mencatat</p>
        </div>
        <?php endif; ?>
    </div>
</div>