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

<style>
.list-group-item { background: transparent; }
.btn:focus { box-shadow: none; }
.modal-content { border: none; }

/* ===== Info row ===== */
.detail-row {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f3f5;
}
.detail-row:last-child { border-bottom: none; }
.detail-row.alt { background: #f8fffe; }
.detail-label {
    width: 160px; flex-shrink: 0;
    font-size: 0.8rem; color: #6c757d;
    display: flex; align-items: center;
}
.detail-value { font-size: 0.85rem; font-weight: 600; color: #212529; flex: 1; }

/* ===== MOBILE ===== */
@media (max-width: 991.98px) {
    .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }
    .inv-breadcrumb { display: none !important; }
    .detail-header h4 { font-size: 1rem; }
    .inv-foto img { max-height: 200px !important; }
    .inv-foto .no-foto { padding: 28px 0 !important; }
    .inv-ringkasan, .inv-actions-card { display: none !important; }
    .inv-left-col { padding-bottom: 0 !important; }
    .detail-row { flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 14px; }
    .detail-label { width: 100%; font-size: 0.72rem; }
    .detail-value { font-size: 0.85rem; padding-left: 20px; }
    .detail-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        background: #f1f3f5;
        border: 1px solid #f1f3f5;
        border-radius: 10px;
        overflow: hidden;
    }
    .detail-grid .detail-row { background: #fff; border-bottom: none; }
    .detail-grid .detail-row.alt { background: #f8fffe; }
    .detail-grid .detail-row.span2 { grid-column: 1 / -1; }
    .inv-actions-mobile { display: flex !important; }
    .gallery-col { flex: 0 0 50%; max-width: 50%; }
    .gallery-img { height: 100px !important; }
    .inv-detail-card .card-body { padding: 16px !important; }
    .inv-detail-card h5 { font-size: 1rem; }
    .riwayat-table { font-size: .78rem; }
}

/* Sembunyikan mobile actions di desktop */
.inv-actions-mobile { display: none; }

/* ===== Riwayat Peminjaman ===== */
.riwayat-section { border-radius: 14px; overflow: hidden; }
.badge-status-pinjam { font-size: .72em; 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-riwayat tr:hover td { background: #f9f5ff; }
</style>

<div class="container-fluid px-4 py-3">

    <!-- Header -->
    <div class="d-flex align-items-center justify-content-between mb-4 detail-header">
        <div>
            <h4 class="mb-0 fw-bold text-dark">
                <i class="bi bi-box-seam me-2" style="color:#20c997;"></i>Detail Inventaris
            </h4>
            <nav aria-label="breadcrumb" class="inv-breadcrumb">
                <ol class="breadcrumb mb-0 small">
                    <li class="breadcrumb-item"><a href="<?= base_url('dashboard') ?>" class="text-decoration-none" style="color:#20c997;">Home</a></li>
                    <li class="breadcrumb-item"><a href="<?= base_url('inventaris') ?>" class="text-decoration-none" style="color:#20c997;">Inventaris</a></li>
                    <li class="breadcrumb-item active text-muted">Detail</li>
                </ol>
            </nav>
        </div>
        <a href="<?= base_url('inventaris') ?>" class="btn btn-sm btn-outline-secondary fw-semibold" style="border-radius:8px;">
            <i class="bi bi-arrow-left me-1"></i>Kembali
        </a>
    </div>

    <!-- Alerts -->
    <?php if($this->session->flashdata('success')): ?>
    <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm" style="border-radius:10px;" role="alert">
        <i class="bi bi-check-circle-fill me-2"></i><?= $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 border-0 shadow-sm" style="border-radius:10px;" role="alert">
        <i class="bi bi-x-circle-fill me-2"></i><?= $this->session->flashdata('error') ?>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    <?php endif; ?>

    <?php
    $kondisi_map = [
        'baik'         => ['#20c997', 'Baik'],
        'rusak_ringan' => ['#ffc107', 'Rusak Ringan'],
        'rusak_berat'  => ['#dc3545', 'Rusak Berat'],
    ];
    $k = $kondisi_map[$item->kondisi] ?? ['#6c757d', ucfirst($item->kondisi)];
    $rows = [
        ['bi-upc',        'Kode Barang',   $item->kode_barang,                                                                          false],
        ['bi-tag',        'Kategori',      ucfirst($item->kategori),                                                                     false],
        ['bi-box',        'Jumlah',        $item->jumlah.' '.$item->satuan,                                                              false],
        ['bi-geo-alt',    'Lokasi',        !empty($item->lokasi) ? $item->lokasi : '-',                                                  false],
        ['bi-calendar3',  'Tgl Pembelian', !empty($item->tanggal_pembelian) ? date('d F Y', strtotime($item->tanggal_pembelian)) : '-',   false],
        ['bi-cash-stack', 'Harga Beli',    'Rp '.number_format($item->harga_pembelian, 0, ',', '.'),                                     true],
        ['bi-wallet2',    'Sumber Dana',   !empty($item->sumber_dana) ? $item->sumber_dana : '-',                                        true],
    ];

    $stok_tersedia = $item->jumlah - ($jumlah_dipinjam ?? 0);
    ?>

    <div class="row g-4">

        <!-- LEFT COLUMN -->
        <div class="col-lg-4 inv-left-col">

            <!-- Foto -->
            <div class="card border-0 shadow-sm mb-4 inv-foto" style="border-radius:14px; overflow:hidden;">
                <?php if(!empty($item->foto) && file_exists('./uploads/inventaris/'.$item->foto)): ?>
                    <img src="<?= base_url('uploads/inventaris/'.$item->foto) ?>"
                         alt="<?= htmlspecialchars($item->nama_barang) ?>"
                         style="width:100%; max-height:280px; object-fit:cover;">
                <?php else: ?>
                    <div class="d-flex flex-column align-items-center justify-content-center py-5 bg-light no-foto">
                        <i class="bi bi-image text-muted" style="font-size:3rem;"></i>
                        <p class="text-muted small mt-2 mb-0">Tidak ada foto tersedia</p>
                    </div>
                <?php endif; ?>
                <div class="card-body text-center py-3">
                    <span class="badge rounded-pill px-4 py-2 fw-semibold" style="background:<?= $k[0] ?>20; color:<?= $k[0] ?>; border:1px solid <?= $k[0] ?>40; font-size:0.85em;">
                        <?= $k[1] ?>
                    </span>
                </div>
            </div>

            <!-- Ringkasan (desktop only) -->
            <div class="card border-0 shadow-sm mb-4 inv-ringkasan" style="border-radius:14px; overflow:hidden;">
                <div class="card-body p-0">
                    <div class="px-4 py-3" style="border-bottom:1px solid #f1f3f5;">
                        <span class="fw-semibold text-muted small text-uppercase" style="letter-spacing:.05em;">Ringkasan</span>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between align-items-center px-4 py-3 border-0" style="border-bottom:1px solid #f1f3f5 !important;">
                            <span class="text-muted small"><i class="bi bi-upc me-2" style="color:#20c997;"></i>Kode</span>
                            <strong class="small"><?= $item->kode_barang ?></strong>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center px-4 py-3 border-0" style="border-bottom:1px solid #f1f3f5 !important;">
                            <span class="text-muted small"><i class="bi bi-tag me-2" style="color:#20c997;"></i>Kategori</span>
                            <span class="badge rounded-pill px-3 small fw-semibold" style="background:#20c99720; color:#20c997; border:1px solid #20c99740;"><?= ucfirst($item->kategori) ?></span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center px-4 py-3 border-0" style="border-bottom:1px solid #f1f3f5 !important;">
                            <span class="text-muted small"><i class="bi bi-box me-2" style="color:#20c997;"></i>Stok Total</span>
                            <strong class="small"><?= $item->jumlah ?> <?= $item->satuan ?></strong>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center px-4 py-3 border-0" style="border-bottom:1px solid #f1f3f5 !important;">
                            <span class="text-muted small"><i class="bi bi-arrow-left-right me-2" style="color:#7c3aed;"></i>Dipinjam</span>
                            <strong class="small" style="color:<?= ($jumlah_dipinjam ?? 0) > 0 ? '#7c3aed' : '#6c757d'; ?>">
                                <?= $jumlah_dipinjam ?? 0 ?> <?= $item->satuan ?>
                            </strong>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center px-4 py-3 border-0" style="border-bottom:1px solid #f1f3f5 !important;">
                            <span class="text-muted small"><i class="bi bi-check-circle me-2" style="color:#198754;"></i>Tersedia</span>
                            <strong class="small" style="color:<?= $stok_tersedia > 0 ? '#198754' : '#dc3545'; ?>">
                                <?= $stok_tersedia ?> <?= $item->satuan ?>
                            </strong>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center px-4 py-3 border-0">
                            <span class="text-muted small"><i class="bi bi-cash-stack me-2" style="color:#20c997;"></i>Nilai</span>
                            <strong class="small">Rp <?= number_format($item->harga_pembelian, 0, ',', '.') ?></strong>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Admin Actions Desktop -->
            <?php if($is_admin): ?>
            <div class="card border-0 shadow-sm mb-4 inv-actions-card" style="border-radius:14px;">
                <div class="card-body d-flex flex-column gap-2 p-3">
                    <a href="<?= base_url('peminjaman-inventaris/tambah?inventaris_id='.$item->id) ?>"
                       class="btn fw-semibold text-white w-100"
                       style="background:#7c3aed; border:none; border-radius:8px;">
                        <i class="bi bi-plus-lg me-2"></i>Catat Peminjaman
                    </a>
                    <a href="<?= base_url('inventaris/edit/'.$item->id) ?>" class="btn fw-semibold text-dark w-100" style="background:#ffc10720; border:1px solid #ffc10740; border-radius:8px;">
                        <i class="bi bi-pencil me-2 text-warning"></i>Edit Data
                    </a>
                    <button type="button" class="btn fw-semibold w-100" style="background:#dc354520; border:1px solid #dc354540; color:#dc3545; border-radius:8px;" onclick="confirmDelete(<?= $item->id ?>)">
                        <i class="bi bi-trash me-2"></i>Hapus Data
                    </button>
                </div>
            </div>
            <?php endif; ?>

        </div>

        <!-- RIGHT COLUMN -->
        <div class="col-lg-8">

            <div class="card border-0 shadow-sm mb-4 inv-detail-card" style="border-radius:14px; border-top:4px solid #20c997 !important;">
                <div class="card-body p-4">
                    <h5 class="fw-bold text-dark mb-1"><?= htmlspecialchars($item->nama_barang) ?></h5>
                    <p class="text-muted small mb-4">#<?= $item->id ?> · Terdaftar <?= date('d F Y H:i', strtotime($item->created_at)) ?></p>

                    <!-- Info Grid -->
                    <div style="border:1px solid #f1f3f5; border-radius:10px; overflow:hidden;" class="detail-grid">
                        <?php foreach($rows as $idx => $r):
                            $bg    = $idx % 2 == 0 ? '#ffffff' : '#f8fffe';
                            $span2 = $r[3] ? 'span2' : '';
                        ?>
                        <div class="detail-row <?= ($idx % 2 == 0) ? '' : 'alt' ?> <?= $span2 ?>" style="background:<?= $bg ?>;">
                            <div class="detail-label">
                                <i class="bi <?= $r[0] ?> me-2" style="color:#20c997;"></i><?= $r[1] ?>
                            </div>
                            <div class="detail-value"><?= $r[2] ?></div>
                        </div>
                        <?php endforeach; ?>

                        <!-- Kondisi -->
                        <div class="detail-row span2" style="background:#f8fffe;">
                            <div class="detail-label">
                                <i class="bi bi-heart-pulse me-2" style="color:#20c997;"></i>Kondisi
                            </div>
                            <div class="detail-value">
                                <span class="badge rounded-pill px-3 py-1 fw-semibold small" style="background:<?= $k[0] ?>20; color:<?= $k[0] ?>; border:1px solid <?= $k[0] ?>40;">
                                    <?= $k[1] ?>
                                </span>
                            </div>
                        </div>

                        <!-- Stok tersedia -->
                        <div class="detail-row span2">
                            <div class="detail-label">
                                <i class="bi bi-arrow-left-right me-2" style="color:#7c3aed;"></i>Stok Tersedia
                            </div>
                            <div class="detail-value">
                                <span class="fw-bold" style="color:<?= $stok_tersedia > 0 ? '#198754' : '#dc3545'; ?>">
                                    <?= $stok_tersedia ?> <?= $item->satuan ?>
                                </span>
                                <?php if(($jumlah_dipinjam ?? 0) > 0): ?>
                                <span class="text-muted ms-2" style="font-size:.8em;">(<?= $jumlah_dipinjam ?> sedang dipinjam)</span>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>

                    <!-- Keterangan -->
                    <?php if(!empty($item->keterangan)): ?>
                    <div class="mt-4 p-3" style="background:#f8fffe; border-radius:10px; border-left:4px solid #20c997;">
                        <p class="text-muted small fw-semibold mb-1"><i class="bi bi-sticky me-1" style="color:#20c997;"></i>Keterangan</p>
                        <p class="text-dark small mb-0" style="line-height:1.7;"><?= nl2br(htmlspecialchars($item->keterangan)) ?></p>
                    </div>
                    <?php endif; ?>

                    <!-- Admin Actions Mobile -->
                    <?php if($is_admin): ?>
                    <div class="inv-actions-mobile gap-2 mt-4 flex-wrap">
                        <a href="<?= base_url('peminjaman-inventaris/tambah?inventaris_id='.$item->id) ?>"
                           class="btn fw-semibold text-white flex-fill"
                           style="background:#7c3aed; border:none; border-radius:8px; font-size:0.85rem;">
                            <i class="bi bi-plus-lg me-1"></i>Catat Pinjam
                        </a>
                        <a href="<?= base_url('inventaris/edit/'.$item->id) ?>" class="btn fw-semibold text-dark flex-fill" style="background:#ffc10720; border:1px solid #ffc10740; border-radius:8px; font-size:0.85rem;">
                            <i class="bi bi-pencil me-2 text-warning"></i>Edit
                        </a>
                        <button type="button" class="btn fw-semibold flex-fill" style="background:#dc354520; border:1px solid #dc354540; color:#dc3545; border-radius:8px; font-size:0.85rem;" onclick="confirmDelete(<?= $item->id ?>)">
                            <i class="bi bi-trash me-2"></i>Hapus
                        </button>
                    </div>
                    <?php endif; ?>
                </div>
            </div>

            <!-- Gallery -->
            <?php if(!empty($gallery)): ?>
            <div class="card border-0 shadow-sm mb-4" style="border-radius:14px;">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center mb-3">
                        <span class="fw-semibold text-dark"><i class="bi bi-images me-2" style="color:#20c997;"></i>Gallery</span>
                        <span class="badge rounded-pill ms-2 px-2" style="background:#20c99720; color:#20c997; border:1px solid #20c99740; font-size:0.75em;"><?= count($gallery) ?> foto</span>
                    </div>
                    <div class="row g-2">
                        <?php foreach($gallery as $g): ?>
                        <div class="col-6 col-md-3 gallery-col">
                            <a href="<?= base_url('uploads/inventaris/gallery/'.$g->foto) ?>"
                               data-toggle="lightbox"
                               data-gallery="gallery-inventaris">
                                <img src="<?= base_url('uploads/inventaris/gallery/'.$g->foto) ?>"
                                     class="img-fluid w-100 gallery-img"
                                     alt="Gallery"
                                     style="height:120px; object-fit:cover; border-radius:10px; transition:transform .2s;"
                                     onmouseover="this.style.transform='scale(1.04)'"
                                     onmouseout="this.style.transform='scale(1)'">
                            </a>
                        </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
            <?php endif; ?>

            <!-- RIWAYAT PEMINJAMAN -->
            <div class="card border-0 shadow-sm riwayat-section">
                <div class="card-body p-0">

                    <!-- Header riwayat -->
                    <div class="d-flex align-items-center justify-content-between px-4 pt-4 pb-3"
                         style="border-bottom:1px solid #f1f3f5;">
                        <div class="d-flex align-items-center gap-2">
                            <div class="rounded-2 d-flex align-items-center justify-content-center flex-shrink-0"
                                 style="width:32px;height:32px;background:#7c3aed15;">
                                <i class="bi bi-arrow-left-right" style="color:#7c3aed;font-size:.9rem;"></i>
                            </div>
                            <span class="fw-bold text-dark" style="font-size:.95rem;">Riwayat Peminjaman</span>
                            <?php if(!empty($riwayat_pinjam)): ?>
                            <span class="badge rounded-pill ms-1 px-2"
                                  style="background:#7c3aed15;color:#7c3aed;border:1px solid #7c3aed30;font-size:.72em;">
                                <?= count($riwayat_pinjam) ?>
                            </span>
                            <?php endif; ?>
                        </div>
                        <?php if($is_admin): ?>
                        <a href="<?= base_url('peminjaman-inventaris/tambah?inventaris_id='.$item->id) ?>"
                           class="btn btn-sm rounded-pill fw-semibold text-white px-3"
                           style="background:#7c3aed;border:none;font-size:.8rem;">
                            <i class="bi bi-plus-lg me-1"></i>Catat Pinjam
                        </a>
                        <?php endif; ?>
                    </div>

                    <!-- Stok banner jika ada yang sedang dipinjam -->
                    <?php if(($jumlah_dipinjam ?? 0) > 0): ?>
                    <div class="mx-4 mt-3 px-3 py-2 rounded-3 d-flex align-items-center gap-2"
                         style="background:#fff8f0;border:1px solid #fed7aa;">
                        <i class="bi bi-exclamation-circle" style="color:#f97316;"></i>
                        <span style="font-size:.82rem;color:#c2410c;">
                            <strong><?= $jumlah_dipinjam ?> <?= $item->satuan ?></strong> sedang dipinjam &nbsp;·&nbsp;
                            Tersisa <strong><?= $stok_tersedia ?> <?= $item->satuan ?></strong>
                        </span>
                    </div>
                    <?php endif; ?>

                    <!-- Tabel riwayat -->
                    <?php if(!empty($riwayat_pinjam)): ?>
                    <div class="table-responsive mt-2">
                        <table class="table table-hover mb-0 riwayat-table tbl-riwayat">
                            <thead style="background:#fafafa;">
                                <tr>
                                    <th class="ps-4 py-3 fw-semibold text-muted" style="border:none;font-size:.78rem;">Kode</th>
                                    <th class="py-3 fw-semibold text-muted" style="border:none;font-size:.78rem;">Peminjam</th>
                                    <th class="py-3 fw-semibold text-muted" style="border:none;font-size:.78rem;">Jml</th>
                                    <th class="py-3 fw-semibold text-muted d-none d-md-table-cell" style="border:none;font-size:.78rem;">Tgl Pinjam</th>
                                    <th class="py-3 fw-semibold text-muted" style="border:none;font-size:.78rem;">Kembali</th>
                                    <th class="py-3 fw-semibold text-muted" style="border:none;font-size:.78rem;">Status</th>
                                    <th class="py-3 pe-4 fw-semibold text-muted text-end" style="border:none;font-size:.78rem;">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                            <?php foreach($riwayat_pinjam as $p):
                                // FIX: cek status 'terlambat' dari DB juga, bukan hanya dari tanggal
                                $is_terlambat = ($p->status == 'terlambat')
                                             || ($p->status == 'dipinjam' && $p->tanggal_rencana_kembali < date('Y-m-d'));

                                $status_css = $p->status == 'dikembalikan' ? 'status-dikembalikan'
                                            : ($is_terlambat              ? 'status-terlambat'
                                                                           : 'status-dipinjam');
                                $status_lbl = $p->status == 'dikembalikan' ? '✅ Kembali'
                                            : ($is_terlambat              ? '⏰ Terlambat'
                                                                           : '📦 Dipinjam');
                            ?>
                            <tr>
                                <td class="ps-4 py-3">
                                    <span class="fw-bold" style="color:#7c3aed;font-size:.78rem;"><?= $p->kode_pinjam ?></span>
                                </td>
                                <td class="py-3">
                                    <div class="fw-semibold" style="font-size:.83rem;"><?= htmlspecialchars($p->nama_peminjam) ?></div>
                                </td>
                                <td class="py-3 fw-semibold" style="font-size:.83rem;"><?= $p->jumlah_pinjam ?></td>
                                <td class="py-3 d-none d-md-table-cell" style="font-size:.82rem;"><?= date('d/m/Y', strtotime($p->tanggal_pinjam)) ?></td>
                                <td class="py-3 <?= $is_terlambat ? 'text-danger fw-bold' : '' ?>" style="font-size:.82rem;">
                                    <?= date('d/m/Y', strtotime($p->tanggal_rencana_kembali)) ?>
                                </td>
                                <td class="py-3">
                                    <span class="badge-status-pinjam <?= $status_css ?>"><?= $status_lbl ?></span>
                                </td>
                                <td class="py-3 pe-4 text-end">
                                    <div class="d-flex gap-1 justify-content-end">
                                        <a href="<?= base_url('peminjaman-inventaris/detail/'.$p->id) ?>"
                                           class="btn btn-sm btn-outline-secondary rounded-pill px-2"
                                           style="font-size:.72rem;">Detail</a>
                                        <?php if($is_admin && $p->status != 'dikembalikan'): ?>
                                        <a href="<?= base_url('peminjaman-inventaris/kembali/'.$p->id) ?>"
                                           class="btn btn-sm rounded-pill px-2 text-white fw-semibold"
                                           style="background:#198754;border:none;font-size:.72rem;">
                                            Kembali
                                        </a>
                                        <?php endif; ?>
                                    </div>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>

                    <!-- Lihat semua link -->
                    <div class="px-4 py-3" style="border-top:1px solid #f1f3f5;">
                        <a href="<?= base_url('peminjaman-inventaris') ?>"
                           class="text-decoration-none fw-semibold" style="color:#7c3aed;font-size:.82rem;">
                            <i class="bi bi-arrow-right me-1"></i>Lihat semua peminjaman
                        </a>
                    </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:64px;height:64px;background:#f5f3ff;">
                            <i class="bi bi-arrow-left-right fs-3" style="color:#c4b5fd;"></i>
                        </div>
                        <p class="text-muted small mb-0">Belum ada riwayat peminjaman untuk barang ini</p>
                        <?php if($is_admin): ?>
                        <a href="<?= base_url('peminjaman-inventaris/tambah?inventaris_id='.$item->id) ?>"
                           class="btn btn-sm rounded-pill mt-3 fw-semibold text-white px-4"
                           style="background:#7c3aed;border:none;font-size:.82rem;">
                            <i class="bi bi-plus-lg me-1"></i>Catat Peminjaman Pertama
                        </a>
                        <?php endif; ?>
                    </div>
                    <?php endif; ?>

                </div>
            </div>
            <!-- END RIWAYAT -->

        </div>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow" style="border-radius:14px; overflow:hidden;">
            <div class="modal-header border-0 pb-0 pt-4 px-4">
                <div class="d-flex align-items-center gap-3">
                    <div class="rounded-circle d-flex align-items-center justify-content-center" style="width:44px; height:44px; background:#dc354520; flex-shrink:0;">
                        <i class="bi bi-trash" style="color:#dc3545; font-size:1.1rem;"></i>
                    </div>
                    <div>
                        <h6 class="fw-bold mb-0 text-dark">Konfirmasi Hapus</h6>
                        <small class="text-muted">Tindakan ini tidak dapat dibatalkan</small>
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body px-4 py-3">
                <p class="text-muted small mb-0">Apakah Anda yakin ingin menghapus inventaris <strong class="text-dark"><?= htmlspecialchars($item->nama_barang) ?></strong>?</p>
            </div>
            <div class="modal-footer border-0 px-4 pb-4 pt-0 gap-2">
                <button type="button" class="btn btn-sm fw-semibold px-4" data-bs-dismiss="modal" style="border-radius:8px; background:#f1f3f5; border:none; color:#6c757d;">Batal</button>
                <a href="#" id="btnConfirmDelete" class="btn btn-sm fw-semibold px-4 text-white" style="background:#dc3545; border:none; border-radius:8px;">Ya, Hapus</a>
            </div>
        </div>
    </div>
</div>

<script>
function confirmDelete(id) {
    document.getElementById('btnConfirmDelete').href = '<?= base_url('inventaris/hapus/') ?>' + id;
    new bootstrap.Modal(document.getElementById('deleteModal')).show();
}
$(document).on('click', '[data-toggle="lightbox"]', function(e) {
    e.preventDefault();
    $(this).ekkoLightbox({ alwaysShowClose: true });
});
</script>