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

<style>
.inv-card { transition: transform .2s, box-shadow .2s; }
.inv-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.1) !important; }
.btn:focus { box-shadow: none; }

/* Admin overlay — hover on desktop, always visible on touch/mobile */
.admin-actions { opacity: 0; transition: opacity .2s; }
.inv-card:hover .admin-actions { opacity: 1; }

/* ─── PAGE HEADER (samakan dengan arisan) ─────────────────── */
.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, #0d9488, #14b8a6);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.05rem;
  box-shadow: 0 4px 12px rgba(13,148,136,0.32);
  flex-shrink: 0;
}
.ar-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.77rem;
  color: #94a3b8;
  padding-left: 51px;
}
.ar-breadcrumb a { color: #0d9488; text-decoration: none; font-weight: 600; }
.ar-breadcrumb a:hover { text-decoration: underline; }
.ar-breadcrumb .sep { color: #e2e8f0; }

.btn-tambah {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 24px;
  border-radius: 50px;
  border: none;
  background: #0d9488;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(13,148,136,0.28);
  transition: all .2s;
  white-space: nowrap;
  cursor: pointer;
}
.btn-tambah:hover {
  background: #0b7a6e;
  box-shadow: 0 5px 16px rgba(13,148,136,0.38);
  transform: translateY(-1px);
  color: #fff;
}
.btn-tambah-outline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 24px;
  border-radius: 50px;
  border: 2px solid #0d9488;
  background: transparent;
  color: #0d9488;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: all .2s;
  white-space: nowrap;
  cursor: pointer;
}
.btn-tambah-outline:hover {
  background: #0d9488;
  color: #fff;
  transform: translateY(-1px);
}

@media (max-width: 767.98px) {
    .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }

    /* Header */
    .ar-page-header { flex-direction: column; align-items: flex-start; }
    .inv-header-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }
    .btn-tambah, .btn-tambah-outline { width: 100%; justify-content: center; }

    /* Stats: 2x2 grid */
    .stats-row > .col-md-3 { flex: 0 0 50%; max-width: 50%; }
    .stats-row > .col-md-3:last-child { flex: 0 0 100%; max-width: 100%; }
    .stat-card .card-body { padding: 10px 12px !important; }
    .stat-card .stat-icon { width: 38px !important; height: 38px !important; }
    .stat-card .stat-icon i { font-size: 1rem !important; }
    .stat-card .fw-bold.fs-4 { font-size: 1.3rem !important; }
    .stat-card .total-nilai { font-size: 0.88rem !important; }

    /* Filter: full width dropdowns */
    .filter-row > .col-md-3 { flex: 0 0 50%; max-width: 50%; }

    /* Gallery: 1 kolom di hp kecil */
    #inventarisGrid > .col-md-6 { flex: 0 0 100%; max-width: 100%; }

    /* Card image height lebih pendek */
    .inv-img-wrap { height: 160px !important; }

    /* Admin actions selalu muncul di mobile */
    .admin-actions { opacity: 1 !important; }

    /* Card body padding */
    .inv-card .card-body { padding: 12px !important; }
}

@media (min-width: 480px) and (max-width: 767.98px) {
    #inventarisGrid > .col-md-6 { flex: 0 0 50%; max-width: 50%; }
}

@media (max-width: 400px) {
    .filter-row > .col-md-3 { flex: 0 0 100%; max-width: 100%; }
}
</style>
<!-- Header -->
<div class="ar-page-header">
    <div class="ar-header-left">
        <h4>
            <span class="hi"><i class="bi bi-box-seam"></i></span>
            Inventaris RT
        </h4>
        <div class="ar-breadcrumb">
            <a href="<?php echo base_url('dashboard'); ?>">Dashboard</a>
            <span class="sep">/</span>
            <span>Inventaris</span>
        </div>
    </div>
    <?php if($is_admin): ?>
    <div class="inv-header-buttons" style="display:flex; gap:8px; flex-wrap:wrap;">
        <a href="<?php echo base_url('rencana-pembelian'); ?>" class="btn-tambah-outline">
            <i class="bi bi-cart-plus"></i> Rencana Beli
        </a>
        <a href="<?php echo base_url('inventaris/tambah'); ?>" class="btn-tambah">
            <i class="bi bi-plus-lg"></i> Tambah Barang
        </a>
    </div>
    <?php endif; ?>
</div>
    <!-- Stats Cards -->
    <div class="row g-3 mb-4 stats-row">
        <div class="col-md-3 col-6">
            <div class="card border-0 shadow-sm stat-card" style="border-radius:12px; border-left:4px solid #20c997 !important;">
                <div class="card-body d-flex align-items-center py-3">
                    <div class="stat-icon rounded-3 d-flex align-items-center justify-content-center me-3 flex-shrink-0" style="width:48px;height:48px;background:#20c99720;">
                        <i class="bi bi-box-seam fs-4" style="color:#20c997;"></i>
                    </div>
                    <div>
                        <div class="text-muted small fw-semibold">Total Aset</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 stat-card" style="border-radius:12px; border-left:4px solid #198754 !important;">
                <div class="card-body d-flex align-items-center py-3">
                    <div class="stat-icon 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">Kondisi Baik</div>
                        <div class="fw-bold fs-4 text-dark lh-1"><?php echo $stats['baik']; ?></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-6">
            <div class="card border-0 shadow-sm stat-card" style="border-radius:12px; border-left:4px solid #ffc107 !important;">
                <div class="card-body d-flex align-items-center py-3">
                    <div class="stat-icon rounded-3 d-flex align-items-center justify-content-center me-3 flex-shrink-0" style="width:48px;height:48px;background:#ffc10720;">
                        <i class="bi bi-exclamation-triangle fs-4 text-warning"></i>
                    </div>
                    <div>
                        <div class="text-muted small fw-semibold">Perlu Perbaikan</div>
                        <div class="fw-bold fs-4 text-dark lh-1"><?php echo $stats['rusak']; ?></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Total Nilai: full-width di mobile -->
        <div class="col-md-3 col-6">
            <div class="card border-0 shadow-sm stat-card" style="border-radius:12px; border-left:4px solid #0dcaf0 !important;">
                <div class="card-body d-flex align-items-center py-3">
                    <div class="stat-icon rounded-3 d-flex align-items-center justify-content-center me-3 flex-shrink-0" style="width:48px;height:48px;background:#0dcaf020;">
                        <i class="bi bi-cash-stack fs-4 text-info"></i>
                    </div>
                    <div>
                        <div class="text-muted small fw-semibold">Total Nilai</div>
                        <div class="fw-bold text-dark lh-1 total-nilai" style="font-size:1rem;">
                            <!-- Rp <?php echo number_format($stats['total_nilai'], 0, ',', '.'); ?> -->
                             Rp <?php echo number_format($stats['total_nilai'] ?? 0, 0, ',', '.'); ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter -->
    <div class="card border-0 shadow-sm mb-4" style="border-radius:12px;">
        <div class="card-body py-3">
            <div class="row g-2 align-items-end filter-row">
                <div class="col-md-3 col-6">
                    <label class="form-label small fw-semibold text-muted mb-1">Kategori</label>
                    <select class="form-select form-select-sm" id="filterKategori" style="border-radius:8px;">
                        <option value="">Semua Kategori</option>
                        <option value="elektronik">💻 Elektronik</option>
                        <option value="furniture">🪑 Furniture</option>
                        <option value="kendaraan">🚗 Kendaraan</option>
                        <option value="perlengkapan">🔧 Perlengkapan</option>
                    </select>
                </div>
                <div class="col-md-3 col-6">
                    <label class="form-label small fw-semibold text-muted mb-1">Kondisi</label>
                    <select class="form-select form-select-sm" id="filterKondisi" style="border-radius:8px;">
                        <option value="">Semua Kondisi</option>
                        <option value="baik">✅ Baik</option>
                        <option value="rusak_ringan">⚠️ Rusak Ringan</option>
                        <option value="rusak_berat">❌ Rusak Berat</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <!-- Gallery Grid -->
    <?php if(!empty($inventaris)):
        $badge_kondisi = [
            'baik'         => ['#198754', '✅'],
            'rusak_ringan' => ['#ffc107', '⚠️'],
            'rusak_berat'  => ['#dc3545', '❌'],
            'hilang'       => ['#6c757d', '🚫'],
        ];
        $icon_kategori = [
            'elektronik'   => 'bi-laptop',
            'furniture'    => 'bi-chair',
            'kendaraan'    => 'bi-car-front',
            'perlengkapan' => 'bi-tools',
        ];
    ?>
    <div class="row g-3" id="inventarisGrid">
        <?php foreach($inventaris as $item):
            $bk       = $badge_kondisi[$item->kondisi] ?? ['#6c757d','·'];
            $cat_icon = $icon_kategori[$item->kategori] ?? 'bi-box';
        ?>
        <div class="col-md-6 col-lg-4 col-xl-3 inventaris-item"
             data-kategori="<?php echo $item->kategori; ?>"
             data-kondisi="<?php echo $item->kondisi; ?>">
            <div class="card border-0 shadow-sm h-100 inv-card" style="border-radius:14px; overflow:hidden;">

                <!-- Image -->
                <div class="position-relative inv-img-wrap" style="height:190px; overflow:hidden; background:#f8f9fa;">
                    <?php if($item->foto): ?>
                        <img src="<?php echo base_url('uploads/inventaris/'.$item->foto); ?>"
                             class="w-100 h-100" style="object-fit:cover;"
                             alt="<?php echo htmlspecialchars($item->nama_barang); ?>">
                    <?php else: ?>
                        <div class="w-100 h-100 d-flex flex-column align-items-center justify-content-center" style="background:#f0fdf9;">
                            <i class="bi <?php echo $cat_icon; ?> fs-1" style="color:#20c99760;"></i>
                        </div>
                    <?php endif; ?>

                    <!-- Kondisi Badge -->
                    <div class="position-absolute top-0 end-0 m-2">
                        <span class="badge rounded-pill px-2 py-1 fw-semibold"
                              style="background:<?php echo $bk[0]; ?>20; color:<?php echo $bk[0]; ?>; border:1px solid <?php echo $bk[0]; ?>50; backdrop-filter:blur(4px); font-size:0.75em;">
                            <?php echo $bk[1].' '.ucfirst(str_replace('_',' ',$item->kondisi)); ?>
                        </span>
                    </div>

                    <!-- Admin Actions -->
                    <?php if($is_admin): ?>
                    <div class="position-absolute top-0 start-0 m-2 d-flex gap-1 admin-actions">
                        <a href="<?php echo base_url('inventaris/edit/'.$item->id); ?>"
                           class="btn btn-sm btn-warning rounded-circle d-flex align-items-center justify-content-center"
                           style="width:30px;height:30px;padding:0;" title="Edit">
                            <i class="bi bi-pencil" style="font-size:.75rem;"></i>
                        </a>
                        <button type="button"
                                class="btn btn-sm btn-danger rounded-circle d-flex align-items-center justify-content-center"
                                style="width:30px;height:30px;padding:0;"
                                onclick="confirmDelete(<?php echo $item->id; ?>, '<?php echo htmlspecialchars($item->nama_barang, ENT_QUOTES); ?>')"
                                title="Hapus">
                            <i class="bi bi-trash" style="font-size:.75rem;"></i>
                        </button>
                    </div>
                    <?php endif; ?>
                </div>

                <!-- Card Body -->
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <span class="badge rounded-pill px-2 py-1" style="background:#20c99715; color:#20c997; border:1px solid #20c99730; font-size:0.75em;">
                            <i class="bi <?php echo $cat_icon; ?> me-1"></i><?php echo ucfirst($item->kategori); ?>
                        </span>
                        <small class="text-muted" style="font-size:.75em;">#<?php echo $item->kode_barang; ?></small>
                    </div>

                    <h6 class="fw-bold text-dark mb-1"><?php echo htmlspecialchars($item->nama_barang); ?></h6>
                    <p class="text-muted mb-2" style="font-size:.8em;">
                        <i class="bi bi-geo-alt me-1"></i><?php echo $item->lokasi; ?>
                    </p>

                    <div class="d-flex align-items-center justify-content-between pt-2" style="border-top:1px solid #f1f3f5;">
                        <span class="fw-semibold small" style="color:#20c997;">
                            <?php echo $item->jumlah.' '.$item->satuan; ?>
                        </span>
                        <a href="<?php echo base_url('inventaris/detail/'.$item->id); ?>"
                           class="btn btn-sm px-3 fw-semibold text-white"
                           style="background:#20c997; border:none; border-radius:7px; font-size:.8em;">
                            Detail <i class="bi bi-arrow-right ms-1"></i>
                        </a>
                    </div>
                </div>

            </div>
        </div>
        <?php endforeach; ?>
    </div>

    <?php else: ?>
    <div class="card border-0 shadow-sm text-center py-5" style="border-radius:12px;">
        <div class="card-body">
            <div class="rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width:80px;height:80px;background:#f0fdf9;">
                <i class="bi bi-box-seam fs-2" style="color:#20c997;"></i>
            </div>
            <h6 class="text-muted fw-semibold">Belum ada data inventaris</h6>
            <p class="text-muted small mb-0">Tambah barang pertama milik RT</p>
        </div>
    </div>
    <?php endif; ?>

</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <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-2">
                    <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0" style="width:36px;height:36px;background:#dc354520;">
                        <i class="bi bi-trash text-danger"></i>
                    </div>
                    <h6 class="mb-0 fw-bold">Hapus Inventaris?</h6>
                </div>
            </div>
            <div class="modal-body px-4 py-3">
                <p class="text-muted small mb-1">Yakin ingin menghapus <strong id="deleteItemName"></strong>?</p>
                <p class="text-danger mb-0" style="font-size:.78em;"><i class="bi bi-info-circle me-1"></i>Data tidak dapat dikembalikan.</p>
            </div>
            <div class="modal-footer border-0 pt-0 px-4 pb-4 gap-2">
                <button type="button" class="btn btn-sm btn-outline-secondary flex-fill fw-semibold" style="border-radius:8px;" data-bs-dismiss="modal">Batal</button>
                <a href="#" id="btnConfirmDelete" class="btn btn-sm btn-danger flex-fill fw-semibold text-white" style="border-radius:8px;">Ya, Hapus</a>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('filterKategori').addEventListener('change', filterItems);
document.getElementById('filterKondisi').addEventListener('change', filterItems);

function filterItems() {
    const kategori = document.getElementById('filterKategori').value;
    const kondisi  = document.getElementById('filterKondisi').value;
    document.querySelectorAll('.inventaris-item').forEach(el => {
        const ok = (!kategori || el.dataset.kategori === kategori)
                && (!kondisi  || el.dataset.kondisi  === kondisi);
        el.style.display = ok ? '' : 'none';
    });
}

function confirmDelete(id, nama) {
    document.getElementById('deleteItemName').textContent = nama;
    document.getElementById('btnConfirmDelete').href = '<?php echo base_url('inventaris/hapus/'); ?>' + id;
    new bootstrap.Modal(document.getElementById('deleteModal')).show();
}
</script>