<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
    <style>
        body, #app, main { background-color: #FAF7F2 !important; }
        .min-h-screen { background-color: #FAF7F2 !important; }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <style>
        .swal2-popup { 
            border-radius: 1.5rem !important; 
            padding: 1.5rem !important; 
            font-family: inherit; 
        }
        .swal2-title { 
            font-weight: 800 !important; 
            color: #2c1a0e !important; 
        }
        .swal2-styled.swal2-confirm { 
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; 
            border-radius: 0.75rem !important; 
            padding: 0.7rem 1.5rem !important; 
            font-weight: 700 !important; 
            box-shadow: 0 4px 12px rgba(245,158,11,0.3) !important;
        }
        .swal2-styled.swal2-cancel { 
            border-radius: 0.75rem !important; 
            padding: 0.7rem 1.5rem !important; 
            font-weight: 700 !important; 
            background: #6b4c31 !important;
        }
    </style>

    <div class="max-w-7xl mx-auto p-4 sm:p-6 lg:p-8 min-h-screen">
        
        <div class="flex flex-col sm:flex-row sm:items-end justify-between gap-6 mb-8 lg:mb-12">
            <div class="space-y-2">
                <div class="flex items-center gap-2 text-sm text-[#8c6a4a] dark:text-[#c9b59b]">
                    <i class="fas fa-tag"></i>
                    <span>Manajemen Kategori</span>
                </div>
                <h1 class="text-3xl sm:text-4xl font-extrabold text-[#2c1a0e] dark:text-[#faf7f2] tracking-tight">
                    Product <span class="text-[#f59e0b] dark:text-[#fbbf24]">Categories</span>
                </h1>
                <p class="text-sm text-[#8c6a4a] dark:text-[#c9b59b] max-w-md leading-relaxed">
                    Organisir produk Anda ke dalam kelompok yang tepat untuk memudahkan manajemen inventaris.
                </p>
            </div>

            <div class="flex flex-wrap items-center gap-3">
                <?php if(auth()->user()->role === 'admin'): ?>
                    <a href="<?php echo e(route('categories.create')); ?>" 
                       class="px-6 py-3 bg-gradient-to-r from-[#f59e0b] to-[#d97706] text-white rounded-xl font-bold text-sm hover:from-[#d97706] hover:to-[#b45309] hover:-translate-y-0.5 transition-all shadow-md shadow-[#f59e0b]/20 flex items-center gap-2">
                        <i class="fas fa-plus text-xs"></i> Tambah Kategori
                    </a>
                <?php endif; ?>
            </div>
        </div>

        
        <div class="bg-white dark:bg-[#2c1a0e] rounded-2xl shadow-lg border border-[#e0d3c2] dark:border-[#4a321f] overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-left">
                    <thead>
                        <tr class="bg-[#fef3c7] dark:bg-[#3d2514] border-b border-[#e0d3c2] dark:border-[#4a321f]">
                            <th class="px-4 sm:px-6 lg:px-8 py-4 text-[10px] font-black uppercase text-[#8c6a4a] dark:text-[#c9b59b] tracking-widest w-16">#</th>
                            <th class="px-4 sm:px-6 py-4 text-[10px] font-black uppercase text-[#8c6a4a] dark:text-[#c9b59b] tracking-widest">Nama Kategori</th>
                            <th class="px-4 sm:px-6 py-4 text-[10px] font-black uppercase text-[#8c6a4a] dark:text-[#c9b59b] tracking-widest text-center">Total Produk</th>
                            <?php if(auth()->user()->role === 'admin'): ?>
                                <th class="px-4 sm:px-6 lg:px-8 py-4 text-[10px] font-black uppercase text-[#8c6a4a] dark:text-[#c9b59b] tracking-widest text-right">Aksi</th>
                            <?php endif; ?>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-[#e0d3c2] dark:divide-[#4a321f]">
                        <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <tr class="hover:bg-[#fef3c7] dark:hover:bg-[#3d2514] transition-colors group">
                                <td class="px-4 sm:px-6 lg:px-8 py-4">
                                    <span class="text-sm font-bold text-[#8c6a4a] dark:text-[#c9b59b]">
                                        <?php echo e(str_pad($categories->firstItem() + $index, 2, '0', STR_PAD_LEFT)); ?>

                                    </span>
                                </td>

                                <td class="px-4 sm:px-6 py-4">
                                    <div class="flex items-center gap-3">
                                        <div class="w-9 h-9 rounded-xl bg-[#fef3c7] dark:bg-[#4a321f] flex items-center justify-center text-[#f59e0b] dark:text-[#fbbf24] group-hover:bg-[#f59e0b] group-hover:text-white transition-all">
                                            <i class="fas fa-folder-open text-xs"></i>
                                        </div>
                                        <span class="font-bold text-[#2c1a0e] dark:text-[#faf7f2] text-sm sm:text-base"><?php echo e($category->name); ?></span>
                                    </div>
                                </td>

                                <td class="px-4 sm:px-6 py-4 text-center">
                                    <a href="<?php echo e(route('products.index', ['category_id' => $category->id])); ?>" 
                                       class="inline-flex items-center px-3 py-1.5 rounded-full bg-[#fef3c7] dark:bg-[#4a321f] text-[#d97706] dark:text-[#fbbf24] text-[11px] font-bold hover:bg-[#f59e0b] hover:text-white transition-all shadow-sm">
                                        <i class="fas fa-box-open mr-1.5 opacity-50"></i>
                                        <?php echo e($category->products_count ?? 0); ?> Produk
                                    </a>
                                </td>

                                <?php if(auth()->user()->role === 'admin'): ?>
                                    <td class="px-4 sm:px-6 lg:px-8 py-4 text-right">
                                        <div class="flex justify-end gap-2">
                                            <a href="<?php echo e(route('categories.edit', $category)); ?>" 
                                               class="w-9 h-9 flex items-center justify-center bg-white dark:bg-[#3d2514] border border-[#e0d3c2] dark:border-[#4a321f] text-[#8c6a4a] dark:text-[#c9b59b] rounded-xl hover:border-[#f59e0b] hover:text-[#f59e0b] transition-all shadow-sm">
                                                <i class="fas fa-pen text-xs"></i>
                                            </a>

                                            <button type="button" 
                                                    onclick="confirmDelete(<?php echo e($category->id); ?>)"
                                                    class="w-9 h-9 flex items-center justify-center bg-white dark:bg-[#3d2514] border border-[#e0d3c2] dark:border-[#4a321f] text-[#8c6a4a] dark:text-[#c9b59b] rounded-xl hover:border-red-500 hover:text-red-500 transition-all shadow-sm">
                                                <i class="fas fa-trash text-xs"></i>
                                            </button>

                                            <form id="delete-form-<?php echo e($category->id); ?>" action="<?php echo e(route('categories.destroy', $category)); ?>"
                                                  method="POST" class="hidden">
                                                <?php echo csrf_field(); ?>
                                                <?php echo method_field('DELETE'); ?>
                                            </form>
                                        </div>
                                    </td>
                                <?php endif; ?>
                            </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                        <?php if($categories->isEmpty()): ?>
                            <tr>
                                <td colspan="4" class="py-16 text-center text-[#8c6a4a] dark:text-[#c9b59b] font-medium italic">
                                    <i class="fas fa-folder-open text-3xl mb-3 opacity-30 block"></i>
                                    Belum ada kategori yang ditambahkan.
                                </td>
                            </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>

        
        <div class="mt-8 flex justify-center">
            <?php echo e($categories->links()); ?>

        </div>
    </div>

    <script>
        function confirmDelete(id) {
            Swal.fire({
                title: 'Hapus Kategori?',
                text: "Produk dengan kategori ini mungkin akan kehilangan referensinya!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#ef4444',
                cancelButtonColor: '#6b4c31',
                confirmButtonText: 'Ya, Hapus!',
                cancelButtonText: 'Batal',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('delete-form-' + id).submit();
                }
            });
        }

        <?php if(session('success')): ?>
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true
            });
            Toast.fire({
                icon: 'success',
                title: "<?php echo e(session('success')); ?>"
            });
        <?php endif; ?>
    </script>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?><?php /**PATH C:\laragon\www\LokaFurniture\resources\views/categories/index.blade.php ENDPATH**/ ?>