<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <title>Manajemen Stok Barang - <?php echo e(config('app.name', 'Laravel')); ?></title>
    <link rel="icon" type="image/svg+xml" href="<?php echo e(asset('favicon.svg')); ?>">

    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest"></script>

    <?php
        $totalItems = count($items);
        $totalStock = collect($items)->sum(fn ($item) => (int) (is_array($item) ? ($item['quantity'] ?? 0) : ($item->quantity ?? 0)));
        $lowStockCount = collect($items)->filter(function ($item) {
            $stock = (int) (is_array($item) ? ($item['quantity'] ?? 0) : ($item->quantity ?? 0));
            $minStock = (int) (is_array($item) ? ($item['min_stok'] ?? 0) : ($item->min_stok ?? 0));

            return $stock > 0 && $stock <= $minStock;
        })->count();
        $outOfStockCount = collect($items)->filter(function ($item) {
            $stock = (int) (is_array($item) ? ($item['quantity'] ?? 0) : ($item->quantity ?? 0));

            return $stock <= 0;
        })->count();
    ?>

    <style>
        :root {
            --bg: #eef4ff;
            --panel: #ffffff;
            --panel-soft: #f7faff;
            --text: #172554;
            --muted: #64748b;
            --line: #dbe6f7;
            --primary: #4f46e5;
            --secondary: #2563eb;
            --cyan: #38bdf8;
            --green: #10b981;
            --amber: #f59e0b;
            --red: #ef4444;
            --shadow-soft: 0 28px 55px rgba(59, 84, 145, 0.10);
            --shadow-card: 0 18px 32px rgba(148, 163, 184, 0.12);
            --font-main: 'Inter', system-ui, -apple-system, sans-serif;
        }

        * { box-sizing: border-box; }

        body {
            margin: 0;
            font-family: var(--font-main);
            color: var(--text);
            background:
                radial-gradient(circle at top left, rgba(79, 70, 229, 0.08), transparent 20%),
                radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 22%),
                linear-gradient(180deg, #f8fbff 0%, var(--bg) 100%);
            -webkit-font-smoothing: antialiased;
        }

        .app {
            display: flex;
            min-height: 100vh;
        }

        .content {
            flex: 1;
            width: 100%;
            padding: 28px;
        }

        .shell {
            max-width: 1520px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .surface {
            background: rgba(255, 255, 255, 0.82);
            border: 1px solid rgba(255, 255, 255, 0.82);
            box-shadow: var(--shadow-soft);
            backdrop-filter: blur(16px);
        }

        .hero-card {
            position: relative;
            overflow: hidden;
            border-radius: 34px;
            padding: 24px;
            background:
                radial-gradient(circle at top right, rgba(79, 70, 229, 0.16), transparent 28%),
                linear-gradient(135deg, #ffffff 0%, #eef4ff 100%);
        }

        .hero-card::after {
            content: "";
            position: absolute;
            right: -60px;
            top: -50px;
            width: 220px;
            height: 220px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(56, 189, 248, 0.12));
            filter: blur(10px);
        }

        .pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(79, 70, 229, 0.10), rgba(37, 99, 235, 0.08));
            color: var(--primary);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            border: 1px solid rgba(99, 102, 241, 0.10);
        }

        .hero-grid {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1fr;
            gap: 18px;
            align-items: stretch;
        }

        .hero-title {
            margin: 16px 0 10px;
            font-size: clamp(30px, 4vw, 44px);
            line-height: 1;
            letter-spacing: -0.05em;
            font-weight: 900;
        }

        .hero-text {
            max-width: 760px;
            margin: 0;
            color: var(--muted);
            line-height: 1.8;
            font-size: 14px;
        }

        .hero-mini-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 14px;
            margin-top: 22px;
        }

        .hero-mini-card {
            position: relative;
            overflow: hidden;
            padding: 18px;
            border-radius: 24px;
            background: rgba(255, 255, 255, 0.80);
            border: 1px solid rgba(255, 255, 255, 0.88);
            box-shadow: var(--shadow-card);
        }

        .hero-mini-card::after {
            content: "";
            position: absolute;
            right: -18px;
            top: -18px;
            width: 74px;
            height: 74px;
            border-radius: 999px;
            background: currentColor;
            opacity: 0.08;
        }

        .hero-mini-card.primary { color: var(--primary); }
        .hero-mini-card.cyan { color: var(--secondary); }
        .hero-mini-card.amber { color: var(--amber); }
        .hero-mini-card.red { color: var(--red); }

        .hero-mini-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            position: relative;
            z-index: 1;
        }

        .hero-mini-label {
            color: var(--muted);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.10em;
            text-transform: uppercase;
        }

        .hero-mini-value {
            margin-top: 8px;
            font-size: 26px;
            line-height: 1;
            font-weight: 900;
            position: relative;
            z-index: 1;
        }

        .hero-mini-sub {
            margin-top: 8px;
            font-size: 12px;
            color: var(--muted);
            line-height: 1.6;
            position: relative;
            z-index: 1;
        }

        .control-card {
            border-radius: 28px;
            padding: 18px;
        }

        .control-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 240px auto;
            gap: 14px;
            align-items: center;
        }

        .search-shell,
        .select-shell {
            position: relative;
        }

        .field {
            width: 100%;
            border: 1px solid var(--line);
            border-radius: 18px;
            background: #ffffff;
            color: var(--text);
            padding: 14px 16px 14px 46px;
            outline: none;
            font-size: 14px;
            transition: all 0.2s ease;
        }

        .field:focus {
            border-color: rgba(79, 70, 229, 0.38);
            box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.10);
        }

        .field-icon {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: #94a3b8;
            pointer-events: none;
        }

        .select-shell .field {
            appearance: none;
            padding-right: 42px;
        }

        .select-shell .field-icon-right {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #94a3b8;
            pointer-events: none;
        }

        .action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 14px 18px;
            border-radius: 18px;
            text-decoration: none;
            font-size: 14px;
            font-weight: 800;
            letter-spacing: 0.02em;
            transition: all 0.2s ease;
        }

        .action-btn.primary {
            color: #ffffff;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            box-shadow: 0 18px 28px rgba(79, 70, 229, 0.24);
        }

        .action-btn.primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 22px 30px rgba(79, 70, 229, 0.28);
        }

        .inventory-card {
            overflow: hidden;
            border-radius: 30px;
        }

        .inventory-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 22px;
            border-bottom: 1px solid rgba(219, 230, 247, 0.92);
            background:
                radial-gradient(circle at top right, rgba(79, 70, 229, 0.08), transparent 24%),
                linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(247,250,255,0.96) 100%);
        }

        .inventory-title {
            margin: 0;
            font-size: 22px;
            font-weight: 900;
            letter-spacing: -0.03em;
        }

        .inventory-subtitle {
            margin: 6px 0 0;
            color: var(--muted);
            font-size: 13px;
        }

        .inventory-head-right {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .inventory-meta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            border-radius: 999px;
            background: #eef4ff;
            color: var(--primary);
            font-size: 12px;
            font-weight: 800;
            border: 1px solid #c7d2fe;
        }

        .inventory-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 12px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.04em;
        }

        .inventory-chip.low {
            background: #fff7ed;
            color: #c2410c;
            border: 1px solid #fed7aa;
        }

        .inventory-chip.empty {
            background: #fef2f2;
            color: #b91c1c;
            border: 1px solid #fecaca;
        }

        .status-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 8px 12px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            border: 1px solid transparent;
            letter-spacing: 0.04em;
        }

        .status-pill.available {
            background: #dcfce7;
            color: #15803d;
            border-color: #bbf7d0;
        }

        .status-pill.warning {
            background: #fef3c7;
            color: #b45309;
            border-color: #fde68a;
        }

        .status-pill.empty {
            background: #fee2e2;
            color: #b91c1c;
            border-color: #fecaca;
        }

        .product-cell {
            display: flex;
            align-items: center;
            gap: 14px;
            min-width: 0;
        }

        .thumb {
            width: 60px;
            height: 60px;
            border-radius: 18px;
            object-fit: cover;
            background: #f8fafc;
            border: 1px solid rgba(219, 230, 247, 0.92);
            flex-shrink: 0;
        }

        .thumb-placeholder {
            width: 60px;
            height: 60px;
            display: grid;
            place-items: center;
            border-radius: 18px;
            background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
            border: 1px solid rgba(219, 230, 247, 0.92);
            color: #94a3b8;
            flex-shrink: 0;
        }

        .product-name {
            margin: 0;
            font-size: 15px;
            font-weight: 800;
            line-height: 1.35;
            color: #0f172a;
        }

        .product-desc {
            margin-top: 4px;
            font-size: 12px;
            color: var(--muted);
            line-height: 1.6;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .sku-chip,
        .divisi-chip {
            display: inline-flex;
            align-items: center;
            padding: 7px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            white-space: nowrap;
        }

        .sku-chip {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            background: #f8fafc;
            color: #334155;
            border: 1px solid rgba(219, 230, 247, 0.92);
        }

        .divisi-chip {
            background: #eff6ff;
            color: #1d4ed8;
            border: 1px solid #bfdbfe;
        }

        .stock-number {
            font-size: 24px;
            line-height: 1;
            font-weight: 900;
            color: #0f172a;
        }

        .stock-caption {
            margin-top: 6px;
            font-size: 11px;
            color: var(--muted);
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .row-actions {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .icon-btn {
            width: 38px;
            height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
            transition: all 0.2s ease;
            text-decoration: none;
            border: 1px solid transparent;
        }

        .icon-btn.view {
            color: #2563eb;
            background: #eff6ff;
            border-color: #bfdbfe;
        }

        .icon-btn.view:hover {
            background: #dbeafe;
        }

        .icon-btn.edit {
            color: #4f46e5;
            background: #eef2ff;
            border-color: #c7d2fe;
        }

        .icon-btn.edit:hover {
            background: #e0e7ff;
        }

        .icon-btn.delete {
            color: #dc2626;
            background: #fef2f2;
            border-color: #fecaca;
        }

        .icon-btn.delete:hover {
            background: #fee2e2;
        }

        .desktop-table-wrap {
            display: none;
        }

        .mobile-list {
            display: block;
        }

        .mobile-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
            padding: 18px;
            background: linear-gradient(180deg, rgba(248, 251, 255, 0.72) 0%, rgba(255, 255, 255, 0.90) 100%);
        }

        .mobile-item {
            position: relative;
            overflow: hidden;
            padding: 18px;
            border-radius: 26px;
            background: #ffffff;
            border: 1px solid rgba(219, 230, 247, 0.92);
            box-shadow: var(--shadow-card);
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }

        .mobile-item::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: linear-gradient(180deg, var(--primary) 0%, var(--cyan) 100%);
        }

        .mobile-item:hover {
            transform: translateY(-2px);
            border-color: #c7d2fe;
            box-shadow: 0 22px 34px rgba(99, 102, 241, 0.10);
        }

        .mobile-top {
            display: flex;
            gap: 14px;
            align-items: flex-start;
        }

        .mobile-copy {
            min-width: 0;
            flex: 1;
        }

        .mobile-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }

        .mobile-stock-box {
            margin-top: 14px;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .mobile-stock-card {
            padding: 12px 14px;
            border-radius: 18px;
            background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
            border: 1px solid rgba(219, 230, 247, 0.92);
        }

        .mobile-stock-label {
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--muted);
        }

        .mobile-stock-value {
            margin-top: 8px;
            font-size: 20px;
            line-height: 1;
            font-weight: 900;
        }

        .mobile-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 14px;
        }

        .empty-state {
            padding: 48px 24px;
            text-align: center;
            color: var(--muted);
        }

        .empty-icon {
            width: 56px;
            height: 56px;
            margin: 0 auto 14px;
            display: grid;
            place-items: center;
            border-radius: 18px;
            background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
            border: 1px solid rgba(219, 230, 247, 0.92);
            color: #94a3b8;
        }

        .hidden { display: none !important; }

        @media (max-width: 1280px) {
            .hero-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 1024px) {
            .app {
                display: block;
            }

            .content {
                padding: 20px;
                padding-top: 84px;
            }

            .control-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 640px) {
            .content {
                padding: 16px;
                padding-top: 84px;
            }

            .hero-card,
            .control-card,
            .inventory-card {
                border-radius: 24px;
            }

            .hero-mini-grid {
                grid-template-columns: 1fr;
            }

            .inventory-head {
                padding: 18px 18px 16px;
                align-items: flex-start;
                flex-direction: column;
            }

            .inventory-head-right {
                justify-content: flex-start;
            }

            .mobile-grid {
                grid-template-columns: 1fr;
                padding: 16px;
            }
        }
    </style>
</head>
<body>
<div class="app">
    <?php echo $__env->make('partials.sidebar', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

    <main class="content">
        <div class="shell">
            <section class="hero-card surface">
                <div class="hero-grid">
                    <div>
                        <span class="pill">
                            <i data-lucide="package-search" class="w-4 h-4"></i>
                            Manajemen Stok Barang
                        </span>
                        <h1 class="hero-title">Manajemen Stok Barang</h1>
                        <p class="hero-text">Kelola stok barang dan cek ketersediaannya.</p>

                        <div class="hero-mini-grid">
                            <div class="hero-mini-card primary">
                                <div class="hero-mini-top">
                                    <div class="hero-mini-label">Total Barang</div>
                                    <i data-lucide="boxes" class="w-5 h-5"></i>
                                </div>
                                <div class="hero-mini-value"><?php echo e($totalItems); ?></div>
                                <div class="hero-mini-sub">Semua item yang sudah terdaftar.</div>
                            </div>
                            <div class="hero-mini-card cyan">
                                <div class="hero-mini-top">
                                    <div class="hero-mini-label">Total Stok</div>
                                    <i data-lucide="archive" class="w-5 h-5"></i>
                                </div>
                                <div class="hero-mini-value"><?php echo e($totalStock); ?></div>
                                <div class="hero-mini-sub">Akumulasi stok aktif saat ini.</div>
                            </div>
                            <div class="hero-mini-card amber">
                                <div class="hero-mini-top">
                                    <div class="hero-mini-label">Perlu Perhatian</div>
                                    <i data-lucide="triangle-alert" class="w-5 h-5"></i>
                                </div>
                                <div class="hero-mini-value"><?php echo e($lowStockCount); ?></div>
                                <div class="hero-mini-sub">Stok mendekati batas minimum.</div>
                            </div>
                            <div class="hero-mini-card red">
                                <div class="hero-mini-top">
                                    <div class="hero-mini-label">Stok Habis</div>
                                    <i data-lucide="package-x" class="w-5 h-5"></i>
                                </div>
                                <div class="hero-mini-value"><?php echo e($outOfStockCount); ?></div>
                                <div class="hero-mini-sub">Item yang butuh restock segera.</div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="control-card surface">
                <div class="control-grid">
                    <div class="search-shell">
                        <i data-lucide="search" class="field-icon w-5 h-5"></i>
                        <input id="searchInput" type="text" placeholder="Cari nama barang atau SKU..." class="field">
                    </div>

                    <div class="select-shell">
                        <i data-lucide="filter" class="field-icon w-4 h-4"></i>
                        <select id="divisiFilter" class="field">
                            <option value="All">Semua Divisi</option>
                            <?php $__currentLoopData = $divisis; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $divisiName): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($divisiName); ?>"><?php echo e($divisiName); ?></option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                        <i data-lucide="chevron-down" class="field-icon-right w-4 h-4"></i>
                    </div>

                    <?php if(auth()->user()->role === 'sekretariat'): ?>
                        <a href="<?php echo e(route('items.create')); ?>" class="action-btn primary">
                            <i data-lucide="plus" class="w-4 h-4"></i>
                            Tambah Barang
                        </a>
                    <?php endif; ?>
                </div>
            </section>

            <section class="inventory-card surface">
                <div class="inventory-head">
                    <div>
                        <h2 class="inventory-title">Daftar Inventaris</h2>
                        <p class="inventory-subtitle">Lihat detail barang, status stok, dan aksi pengelolaan dalam satu tampilan.</p>
                    </div>
                    <div class="inventory-head-right">
                        <div class="inventory-chip low">
                            <i data-lucide="triangle-alert" class="w-4 h-4"></i>
                            <?php echo e($lowStockCount); ?> Perlu Perhatian
                        </div>
                        <div class="inventory-chip empty">
                            <i data-lucide="package-x" class="w-4 h-4"></i>
                            <?php echo e($outOfStockCount); ?> Habis
                        </div>
                        <div class="inventory-meta">
                            <i data-lucide="boxes" class="w-4 h-4"></i>
                            <?php echo e($totalItems); ?> item
                        </div>
                    </div>
                </div>

                <div class="desktop-table-wrap" id="desktop-table-container">
                    <table class="desktop-table">
                        <thead>
                            <tr>
                                <th>Barang</th>
                                <th>SKU</th>
                                <th>Divisi</th>
                                <th style="text-align:center;">Stok</th>
                                <th style="text-align:center;">Status</th>
                                <th style="text-align:center;">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php $__empty_1 = true; $__currentLoopData = $items; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                <?php
                                    $nama = is_array($item) ? ($item['name'] ?? $item['nama'] ?? '') : ($item->name ?? $item->nama ?? '');
                                    $sku = is_array($item) ? ($item['sku'] ?? '') : ($item->sku ?? '');
                                    $deskripsi = is_array($item) ? ($item['description'] ?? $item['deskripsi'] ?? '-') : ($item->description ?? $item->deskripsi ?? '-');
                                    $divisiData = is_array($item) ? ($item['divisi'] ?? null) : ($item->divisi ?? null);
                                    $divisiNama = is_array($divisiData) ? ($divisiData['nama'] ?? '') : (is_object($divisiData) ? $divisiData->nama : (is_string($divisiData) ? $divisiData : '-'));
                                    $stok = is_array($item) ? ($item['quantity'] ?? $item['jumlah'] ?? 0) : ($item->quantity ?? $item->jumlah ?? 0);
                                    $minStok = is_array($item) ? ($item['min_stok'] ?? 0) : ($item->min_stok ?? 0);
                                    $foto = is_array($item) ? ($item['foto'] ?? $item['image'] ?? null) : ($item->foto ?? $item->image ?? null);
                                    $id = is_array($item) ? ($item['id'] ?? null) : ($item->id ?? null);

                                    if ($stok == 0) {
                                        $statusLabel = 'Habis';
                                        $statusClass = 'empty';
                                    } elseif ($stok <= $minStok) {
                                        $statusLabel = 'Hampir Habis';
                                        $statusClass = 'warning';
                                    } else {
                                        $statusLabel = 'Tersedia';
                                        $statusClass = 'available';
                                    }
                                ?>
                                <tr class="item-row" data-filter-name="<?php echo e(strtolower($nama . ' ' . $sku)); ?>" data-filter-divisi="<?php echo e($divisiNama); ?>">
                                    <td>
                                        <div class="product-cell">
                                            <?php if($foto): ?>
                                                <img src="<?php echo e(asset('storage/' . $foto)); ?>" alt="<?php echo e($nama); ?>" class="thumb">
                                            <?php else: ?>
                                                <div class="thumb-placeholder">
                                                    <i data-lucide="image" class="w-6 h-6"></i>
                                                </div>
                                            <?php endif; ?>
                                            <div class="min-w-0">
                                                <p class="product-name"><?php echo e($nama); ?></p>
                                                <p class="product-desc"><?php echo e($deskripsi ?: '-'); ?></p>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="sku-chip"><?php echo e($sku ?: '-'); ?></span>
                                    </td>
                                    <td>
                                        <span class="divisi-chip"><?php echo e($divisiNama); ?></span>
                                    </td>
                                    <td style="text-align:center;">
                                        <div class="stock-number"><?php echo e($stok); ?></div>
                                        <div class="stock-caption">Min <?php echo e($minStok); ?></div>
                                    </td>
                                    <td style="text-align:center;">
                                        <span class="status-pill <?php echo e($statusClass); ?>"><?php echo e($statusLabel); ?></span>
                                    </td>
                                    <td style="text-align:center;">
                                        <div class="row-actions">
                                            <a href="<?php echo e(route('items.show', $id)); ?>" class="icon-btn view" title="Lihat Detail Barang">
                                                <i data-lucide="eye" class="w-4 h-4"></i>
                                            </a>
                                            <?php if(auth()->user()->role === 'sekretariat'): ?>
                                                <a href="<?php echo e(route('items.edit', $id)); ?>" class="icon-btn edit" title="Edit Barang">
                                                    <i data-lucide="edit-2" class="w-4 h-4"></i>
                                                </a>
                                                <form action="<?php echo e(route('items.destroy', $id)); ?>" method="POST" onsubmit="return confirm('Hapus barang ini?');" class="inline">
                                                    <?php echo csrf_field(); ?>
                                                    <?php echo method_field('DELETE'); ?>
                                                    <button type="submit" class="icon-btn delete" title="Hapus Barang">
                                                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                                                    </button>
                                                </form>
                                            <?php endif; ?>
                                        </div>
                                    </td>
                                </tr>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                <tr>
                                    <td colspan="6">
                                        <div class="empty-state">
                                            <div class="empty-icon">
                                                <i data-lucide="package-x" class="w-6 h-6"></i>
                                            </div>
                                            Belum ada data barang.
                                        </div>
                                    </td>
                                </tr>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>

                <div class="mobile-list" id="items-container-mobile">
                    <div class="mobile-grid">
                        <?php $__empty_1 = true; $__currentLoopData = $items; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                            <?php
                                $nama = is_array($item) ? ($item['name'] ?? $item['nama'] ?? '') : ($item->name ?? $item->nama ?? '');
                                $sku = is_array($item) ? ($item['sku'] ?? '') : ($item->sku ?? '');
                                $deskripsi = is_array($item) ? ($item['description'] ?? $item['deskripsi'] ?? '-') : ($item->description ?? $item->deskripsi ?? '-');
                                $divisiData = is_array($item) ? ($item['divisi'] ?? null) : ($item->divisi ?? null);
                                $divisiNama = is_array($divisiData) ? ($divisiData['nama'] ?? '') : (is_object($divisiData) ? $divisiData->nama : (is_string($divisiData) ? $divisiData : '-'));
                                $stok = is_array($item) ? ($item['quantity'] ?? $item['jumlah'] ?? 0) : ($item->quantity ?? $item->jumlah ?? 0);
                                $minStok = is_array($item) ? ($item['min_stok'] ?? 0) : ($item->min_stok ?? 0);
                                $foto = is_array($item) ? ($item['foto'] ?? $item['image'] ?? null) : ($item->foto ?? $item->image ?? null);
                                $id = is_array($item) ? ($item['id'] ?? null) : ($item->id ?? null);

                                if ($stok == 0) {
                                    $statusLabel = 'Habis';
                                    $statusClass = 'empty';
                                } elseif ($stok <= $minStok) {
                                    $statusLabel = 'Hampir Habis';
                                    $statusClass = 'warning';
                                } else {
                                    $statusLabel = 'Tersedia';
                                    $statusClass = 'available';
                                }
                            ?>
                            <div class="item-row mobile-item" data-filter-name="<?php echo e(strtolower($nama . ' ' . $sku)); ?>" data-filter-divisi="<?php echo e($divisiNama); ?>">
                                <div class="mobile-top">
                                    <?php if($foto): ?>
                                        <img src="<?php echo e(asset('storage/' . $foto)); ?>" alt="<?php echo e($nama); ?>" class="thumb">
                                    <?php else: ?>
                                        <div class="thumb-placeholder">
                                            <i data-lucide="image" class="w-6 h-6"></i>
                                        </div>
                                    <?php endif; ?>
                                    <div class="mobile-copy">
                                        <p class="product-name"><?php echo e($nama); ?></p>
                                        <p class="product-desc"><?php echo e($deskripsi ?: '-'); ?></p>
                                        <div class="mobile-meta">
                                            <span class="sku-chip"><?php echo e($sku ?: '-'); ?></span>
                                            <span class="divisi-chip"><?php echo e($divisiNama); ?></span>
                                        </div>
                                    </div>
                                </div>

                                <div class="mobile-stock-box">
                                    <div class="mobile-stock-card">
                                        <div class="mobile-stock-label">Stok</div>
                                        <div class="mobile-stock-value"><?php echo e($stok); ?></div>
                                    </div>
                                    <div class="mobile-stock-card">
                                        <div class="mobile-stock-label">Minimum</div>
                                        <div class="mobile-stock-value"><?php echo e($minStok); ?></div>
                                    </div>
                                </div>

                                <div class="mt-3">
                                    <span class="status-pill <?php echo e($statusClass); ?>"><?php echo e($statusLabel); ?></span>
                                </div>

                                <div class="mobile-actions">
                                    <a href="<?php echo e(route('items.show', $id)); ?>" class="icon-btn view" title="Lihat Detail Barang">
                                        <i data-lucide="eye" class="w-4 h-4"></i>
                                    </a>
                                    <?php if(auth()->user()->role === 'sekretariat'): ?>
                                        <a href="<?php echo e(route('items.edit', $id)); ?>" class="icon-btn edit" title="Edit Barang">
                                            <i data-lucide="edit-2" class="w-4 h-4"></i>
                                        </a>
                                        <form action="<?php echo e(route('items.destroy', $id)); ?>" method="POST" onsubmit="return confirm('Hapus barang ini?');" class="inline">
                                            <?php echo csrf_field(); ?>
                                            <?php echo method_field('DELETE'); ?>
                                            <button type="submit" class="icon-btn delete" title="Hapus Barang">
                                                <i data-lucide="trash-2" class="w-4 h-4"></i>
                                            </button>
                                        </form>
                                    <?php endif; ?>
                                </div>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                            <div class="empty-state">
                                <div class="empty-icon">
                                    <i data-lucide="package-x" class="w-6 h-6"></i>
                                </div>
                                Belum ada data barang.
                            </div>
                        <?php endif; ?>
                    </div>
                </div>

                <div id="no-filter-results" class="hidden empty-state">
                    <div class="empty-icon">
                        <i data-lucide="search-x" class="w-6 h-6"></i>
                    </div>
                    <div class="text-lg font-bold text-slate-900">Tidak ditemukan</div>
                    <div class="mt-2 text-sm">Tidak ada barang yang cocok dengan pencarian atau filter Anda.</div>
                </div>
            </section>
        </div>
    </main>
</div>

<script>
    lucide.createIcons();

    document.addEventListener('DOMContentLoaded', function () {
        const searchInput = document.getElementById('searchInput');
        const divisiFilter = document.getElementById('divisiFilter');
        const noResults = document.getElementById('no-filter-results');
        const desktopTableContainer = document.getElementById('desktop-table-container');
        const mobileListContainer = document.getElementById('items-container-mobile');
        const itemRows = document.querySelectorAll('.item-row');

        function filterItems() {
            const searchTerm = searchInput.value.toLowerCase().trim();
            const divisiValue = divisiFilter.value;
            let countVisible = 0;

            itemRows.forEach((row) => {
                const name = row.dataset.filterName || '';
                const div = row.dataset.filterDivisi || '';
                const matchSearch = name.includes(searchTerm);
                const matchDivisi = divisiValue === 'All' || div === divisiValue;

                if (matchSearch && matchDivisi) {
                    row.classList.remove('hidden');
                    countVisible++;
                } else {
                    row.classList.add('hidden');
                }
            });

            if (countVisible === 0 && itemRows.length > 0) {
                noResults.classList.remove('hidden');
                if (desktopTableContainer) desktopTableContainer.classList.add('hidden');
                if (mobileListContainer) mobileListContainer.classList.add('hidden');
            } else {
                noResults.classList.add('hidden');
                if (desktopTableContainer) desktopTableContainer.classList.remove('hidden');
                if (mobileListContainer) mobileListContainer.classList.remove('hidden');
            }
        }

        if (searchInput) searchInput.addEventListener('input', filterItems);
        if (divisiFilter) divisiFilter.addEventListener('change', filterItems);
        filterItems();
    });
</script>
</body>
</html>
<?php /**PATH /Users/Afifudin/Downloads/Magang/SIpian_2026-05-06/resources/views/items/index.blade.php ENDPATH**/ ?>