<!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>
    
    <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&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest"></script>
    
    <style>
        :root {
            --bg: #f8fafc; --panel: #ffffff; --muted: #6b7280; --accent: #0b5ed7;
            --card-border: #e2e8f0; --font-main: 'Inter', system-ui, -apple-system, sans-serif;
        }
        * { box-sizing: border-box; }
        body { 
            margin: 0; font-family: var(--font-main); 
            background: var(--bg); color: #111827; 
            -webkit-font-smoothing: antialiased;
        }
        .app { display: flex; min-height: 100vh; }
        .content { flex: 1; padding: 32px; width: 100%; transition: all 0.3s ease; }
        .hidden { display: none !important; }

        /* Responsive */
        @media (max-width: 1024px) {
            .app { display: block; }
            .content { padding: 20px; padding-top: 80px; }
        }
        @media (max-width: 640px) {
            .content { padding: 16px; padding-top: 80px; }
        }
    </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="max-w-7xl mx-auto space-y-6">

            
            <div class="flex flex-col sm:flex-row gap-4 justify-between items-start sm:items-center">
                <div>
                    <h1 class="text-2xl md:text-3xl font-bold text-gray-900 tracking-tight">Manajemen Stok</h1>
                    <p class="text-sm text-gray-500 mt-1">Kelola data barang dan ketersediaannya.</p>
                </div>
                
                
                <?php if(auth()->user()->role === 'sekretariat'): ?>
                <a href="<?php echo e(route('items.create')); ?>"
                   class="inline-flex items-center justify-center px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold rounded-lg shadow-sm transition-colors w-full sm:w-auto gap-2">
                    <i data-lucide="plus" class="w-4 h-4"></i>
                    Tambah Barang
                </a>
                <?php endif; ?>
            </div>

            
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
                <div class="flex flex-col md:flex-row gap-4">
                    <div class="flex-1 relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i data-lucide="search" class="w-5 h-5 text-gray-400"></i>
                        </div>
                        <input id="searchInput" type="text" placeholder="Cari nama barang atau SKU..."
                               class="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-shadow text-sm">
                    </div>
                    <div class="w-full md:w-64 relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i data-lucide="filter" class="w-4 h-4 text-gray-400"></i>
                        </div>
                        <select id="divisiFilter"
                                class="w-full pl-9 pr-10 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white appearance-none text-sm cursor-pointer">
                            <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>
                        <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
                            <i data-lucide="chevron-down" class="w-4 h-4 text-gray-500"></i>
                        </div>
                    </div>
                </div>
            </div>

            
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden relative min-h-[200px]">
                
                
                <div class="hidden md:block overflow-x-auto" id="desktop-table-container">
                    <table class="min-w-full divide-y divide-gray-200" id="desktop-table">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider w-24">Gambar</th>
                                <th scope="col" class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Detail Barang</th>
                                <th scope="col" class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">SKU</th>
                                <th scope="col" class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Divisi</th>
                                <th scope="col" class="px-6 py-4 text-center text-xs font-bold text-gray-500 uppercase tracking-wider">Stok</th>
                                <th scope="col" class="px-6 py-4 text-center text-xs font-bold text-gray-500 uppercase tracking-wider">Status</th>
                                
                                
                                <?php if(auth()->user()->role === 'sekretariat'): ?>
                                <th scope="col" class="px-6 py-4 text-center text-xs font-bold text-gray-500 uppercase tracking-wider">Aksi</th>
                                <?php endif; ?>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <?php $__empty_1 = true; $__currentLoopData = $items; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                <?php
                                    // Helper Aman: Mengambil data baik dari Array atau Object
                                    $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 ?? '-');
                                    
                                    // Helper Divisi
                                    $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 : '-'));

                                    // Helper Stok
                                    $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);
                                    
                                    // Helper Foto/ID
                                    $foto = is_array($item) ? ($item['foto'] ?? $item['image'] ?? null) : ($item->foto ?? $item->image ?? null);
                                    $id = is_array($item) ? ($item['id'] ?? null) : ($item->id ?? null);

                                    // Logic Status
                                    if ($stok == 0) {
                                        $statusLabel = 'Habis';
                                        $statusClass = 'bg-red-100 text-red-800 border-red-200';
                                    } elseif ($stok <= $minStok) {
                                        $statusLabel = 'Hampir Habis';
                                        $statusClass = 'bg-yellow-100 text-yellow-800 border-yellow-200';
                                    } else {
                                        $statusLabel = 'Tersedia';
                                        $statusClass = 'bg-green-100 text-green-800 border-green-200';
                                    }
                                ?>

                                <tr class="item-row hover:bg-gray-50 transition-colors"
                                    data-filter-name="<?php echo e(strtolower($nama . ' ' . $sku)); ?>"
                                    data-filter-divisi="<?php echo e($divisiNama); ?>">
                                    
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <?php if($foto): ?>
                                            <img src="<?php echo e(asset('storage/' . $foto)); ?>" alt="<?php echo e($nama); ?>" class="h-14 w-14 rounded-lg object-cover border border-gray-200 shadow-sm bg-white">
                                        <?php else: ?>
                                            <div class="h-14 w-14 rounded-lg bg-gray-100 border border-gray-200 flex items-center justify-center text-gray-400">
                                                <i data-lucide="image" class="w-6 h-6"></i>
                                            </div>
                                        <?php endif; ?>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="text-sm font-bold text-gray-900"><?php echo e($nama); ?></div>
                                        <div class="text-xs text-gray-500 mt-1 line-clamp-1"><?php echo e($deskripsi); ?></div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800 font-mono border border-gray-200">
                                            <?php echo e($sku); ?>

                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                                        <?php echo e($divisiNama); ?>

                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-center">
                                        <div class="text-sm font-bold text-gray-900"><?php echo e($stok); ?></div>
                                        <div class="text-[10px] text-gray-400 font-medium mt-0.5">Min: <?php echo e($minStok); ?></div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-center">
                                        <span class="px-2.5 py-1 text-xs font-semibold rounded-full border <?php echo e($statusClass); ?>">
                                            <?php echo e($statusLabel); ?>

                                        </span>
                                    </td>

                                    <td class="px-6 py-4 whitespace-nowrap text-center">
                                        <div class="flex justify-center items-center gap-2">

                                            
                                            <a href="<?php echo e(route('items.show', $id)); ?>"
                                            class="inline-flex items-center justify-center p-2
                                                    text-gray-600 hover:text-blue-600
                                                    hover:bg-blue-50
                                                    rounded-lg transition
                                                    focus:outline-none focus:ring-2 focus:ring-blue-500"
                                            title="Lihat Detail Barang">
                                                <i data-lucide="eye" class="w-4 h-4"></i>
                                            </a>

                                        </div>
                                    </td>


                                    
                                    <?php if(auth()->user()->role === 'sekretariat'): ?>
                                    <!-- <td class="px-6 py-4 whitespace-nowrap text-center">
                                        <div class="flex justify-center items-center gap-2">
                                            <a href="<?php echo e(route('items.edit', $id)); ?>" class="p-1.5 text-blue-600 hover:bg-blue-50 rounded-md transition-colors" title="Edit">
                                                <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="p-1.5 text-red-600 hover:bg-red-50 rounded-md transition-colors" title="Hapus">
                                                    <i data-lucide="trash-2" class="w-4 h-4"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td> -->
                                    <?php endif; ?>
                                </tr>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                <tr>
                                    <td colspan="<?php echo e(auth()->user()->role === 'sekretariat' ? 7 : 6); ?>" class="px-6 py-12 text-center text-gray-500">
                                        Belum ada data barang.
                                    </td>
                                </tr>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>

                
                <div class="md:hidden space-y-4 p-4 bg-gray-50/50" id="items-container-mobile">
                    <?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 ?? '');
                            $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 = 'text-red-700 bg-red-50 border-red-100';
                            } elseif ($stok <= $minStok) {
                                $statusLabel = 'Hampir Habis';
                                $statusClass = 'text-yellow-700 bg-yellow-50 border-yellow-100';
                            } else {
                                $statusLabel = 'Tersedia';
                                $statusClass = 'text-green-700 bg-green-50 border-green-100';
                            }
                        ?>

                        <div class="item-row bg-white rounded-xl shadow-sm border border-gray-200 p-4 flex gap-4 transition-all hover:shadow-md"
                             data-filter-name="<?php echo e(strtolower($nama . ' ' . $sku)); ?>"
                             data-filter-divisi="<?php echo e($divisiNama); ?>">
                            
                            
                            <div class="flex-shrink-0">
                                <?php if($foto): ?>
                                    <img src="<?php echo e(asset('storage/' . $foto)); ?>" alt="<?php echo e($nama); ?>" class="h-20 w-20 rounded-lg object-cover border border-gray-200 bg-gray-50">
                                <?php else: ?>
                                    <div class="h-20 w-20 rounded-lg bg-gray-100 border border-gray-200 flex items-center justify-center text-gray-400">
                                        <i data-lucide="image" class="w-8 h-8"></i>
                                    </div>
                                <?php endif; ?>
                            </div>

                            
                            <div class="flex-1 min-w-0 flex flex-col justify-between h-full">
                                <div>
                                    <h3 class="text-sm font-bold text-gray-900 line-clamp-2 leading-tight"><?php echo e($nama); ?></h3>
                                    
                                    <div class="flex flex-wrap gap-2 mt-2">
                                        <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-gray-100 text-gray-600 border border-gray-200 font-mono">
                                            <?php echo e($sku); ?>

                                        </span>
                                        <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-blue-50 text-blue-700 border border-blue-100">
                                            <?php echo e($divisiNama); ?>

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

                                <div class="flex items-end justify-between mt-3">
                                    <div>
                                        <div class="text-xs text-gray-500">Stok: <span class="font-bold text-gray-900 text-sm"><?php echo e($stok); ?></span></div>
                                        <span class="inline-block mt-1 px-2 py-0.5 text-[10px] font-semibold rounded border <?php echo e($statusClass); ?>">
                                            <?php echo e($statusLabel); ?>

                                        </span>
                                    </div>

                                    
                                    <?php if(auth()->user()->role === 'sekretariat'): ?>
                                    <div class="flex gap-2">
                                        <a href="<?php echo e(route('items.edit', $id)); ?>" class="p-1.5 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 border border-blue-100">
                                            <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?');">
                                            <?php echo csrf_field(); ?> <?php echo method_field('DELETE'); ?>
                                            <button type="submit" class="p-1.5 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 border border-red-100">
                                                <i data-lucide="trash-2" class="w-4 h-4"></i>
                                            </button>
                                        </form>
                                    </div>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <div class="p-8 text-center text-gray-500 text-sm">Belum ada data barang.</div>
                    <?php endif; ?>
                </div>

                
                <div id="no-filter-results" class="hidden p-12 text-center bg-white border-t border-gray-200 w-full">
                    <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-gray-100 mb-3">
                        <i data-lucide="search-x" class="w-6 h-6 text-gray-400"></i>
                    </div>
                    <h3 class="text-lg font-medium text-gray-900">Tidak Ditemukan</h3>
                    <p class="text-gray-500 text-sm mt-1">Tidak ada barang yang cocok dengan pencarian atau filter Anda.</p>
                </div>
            </div>

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

<script>
    // Initialize Lucide Icons
    lucide.createIcons();

    document.addEventListener('DOMContentLoaded', function () {
        const searchInput = document.getElementById('searchInput');
        const divisiFilter = document.getElementById('divisiFilter');
        const noResults = document.getElementById('no-filter-results');
        
        // Ambil header tabel desktop untuk disembunyikan jika kosong
        const desktopTableContainer = document.getElementById('desktop-table-container');
        
        // Ambil semua item row (baik dari Desktop maupun 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');
                }
            });

            // Toggle No Results Message & Table Header
            if (countVisible === 0 && itemRows.length > 0) {
                noResults.classList.remove('hidden');
                if(desktopTableContainer) desktopTableContainer.classList.add('hidden');
            } else {
                noResults.classList.add('hidden');
                if(desktopTableContainer) desktopTableContainer.classList.remove('hidden');
            }
        }

        if (searchInput) searchInput.addEventListener('input', filterItems);
        if (divisiFilter) divisiFilter.addEventListener('change', filterItems);
        filterItems();
    });
</script>

</body>
</html><?php /**PATH /Users/Afifudin/Downloads/Laravel 15-04-26 3/production/resources/views/items/index.blade.php ENDPATH**/ ?>