<?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([]); ?>
     <?php $__env->slot('header', null, []); ?> 
        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
            <div class="flex items-center">
                <div class="w-1 h-6 sm:h-8 rounded-full mr-3 gradient-primary"></div>
                <h2 class="text-xl sm:text-2xl font-bold text-slate-800 flex items-center">
                    <i class="fas fa-tags mr-2" style="color: var(--brand-text);"></i>
                    <?php echo e(__('Data Kategori')); ?>

                </h2>
            </div>
            <div class="flex gap-3 w-full sm:w-auto">
                <a href="<?php echo e(route('admin.category.create')); ?>"
                    class="flex-1 sm:flex-none inline-flex items-center justify-center px-5 py-2.5 text-white text-sm font-medium rounded-xl shadow-md hover:shadow-lg transition-all duration-200 gradient-primary">
                    <i class="fas fa-plus mr-2"></i>
                    Tambah Kategori
                </a>
            </div>
        </div>
     <?php $__env->endSlot(); ?>

    <div class="space-y-4 sm:space-y-6">

            
            <?php if(session('error')): ?>
            <div class="mb-4 p-4 bg-gradient-to-r from-rose-600 to-red-600 text-white rounded-xl shadow-lg animate-fade-in flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <i class="fas fa-exclamation-circle text-xl"></i>
                    <span class="font-medium"><?php echo e(session('error')); ?></span>
                </div>
                <button onclick="this.parentElement.remove()" class="text-white/80 hover:text-white transition">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <?php endif; ?>

            
            <?php if($categories->count() > 0): ?>
            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-200">
                        <thead class="bg-gradient-to-r from-slate-50 to-white">
                            <tr>
                                <th class="px-4 sm:px-6 py-4 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider w-16">
                                    No
                                </th>
                                <th class="px-4 sm:px-6 py-4 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">
                                    Nama Kategori
                                </th>
                                <th class="px-4 sm:px-6 py-4 text-center text-xs font-semibold text-slate-600 uppercase tracking-wider w-32">
                                    Aksi
                                </th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <tr class="hover:bg-slate-50 transition-colors duration-200">
                                <td class="px-4 sm:px-6 py-4 whitespace-nowrap text-sm text-slate-600">
                                    <?php echo e($categories->firstItem() + $index); ?>

                                </td>
                                <td class="px-4 sm:px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center gap-3">
                                        <div class="flex-shrink-0 w-10 h-10 rounded-xl flex items-center justify-center shadow-sm border" style="background: linear-gradient(135deg, #fef3c7, #fde68a); border-color: #fcd34d;">
                                            <i class="fas fa-tag text-sm" style="color: var(--brand-text);"></i>
                                        </div>
                                        <div>
                                            <div class="text-sm font-semibold text-slate-800">
                                                <?php echo e($category->category_name); ?>

                                            </div>
                                            <div class="text-xs text-slate-500 mt-0.5">
                                                <i class="fas fa-hashtag mr-1 text-[10px]"></i>CAT<?php echo e(str_pad($category->category_id, 3, '0', STR_PAD_LEFT)); ?>

                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-4 sm:px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center justify-center gap-2">
                                        <!-- Edit Button -->
                                        <a href="<?php echo e(route('admin.category.edit', $category->category_id)); ?>"
                                            class="group relative w-9 h-9 text-white rounded-xl hover:shadow-lg hover:scale-110 transition-all duration-200 flex items-center justify-center"
                                            style="background: linear-gradient(135deg, #3b82f6, #2563eb);"
                                            title="Edit Kategori">
                                            <i class="fas fa-edit text-sm"></i>
                                            <span class="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-slate-800 text-white text-xs py-1 px-2 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
                                                Edit
                                            </span>
                                        </a>

                                        <!-- Delete Button -->
                                        <button
                                            onclick="openDeleteCategoryModal('<?php echo e($category->category_id); ?>', '<?php echo e(addslashes($category->category_name)); ?>')"
                                            class="group relative w-9 h-9 text-white rounded-xl hover:shadow-lg hover:scale-110 transition-all duration-200 flex items-center justify-center"
                                            style="background: linear-gradient(135deg, #e11d48, #be123c);"
                                            title="Hapus Kategori">
                                            <i class="fas fa-trash-alt text-sm"></i>
                                            <span class="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-slate-800 text-white text-xs py-1 px-2 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
                                                Hapus
                                            </span>
                                        </button>

                                        <!-- Form untuk submit (sembunyi) -->
                                        <form id="delete-form-<?php echo e($category->category_id); ?>" action="<?php echo e(route('admin.category.destroy', $category->category_id)); ?>" method="POST" style="display: none;">
                                            <?php echo csrf_field(); ?>
                                            <?php echo method_field('DELETE'); ?>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </tbody>
                    </table>
                </div>
            </div>

            
            <?php if($categories->hasPages()): ?>
            <div class="mt-4">
                <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-4">
                    <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
                        <span class="text-xs text-slate-600">
                            Menampilkan <?php echo e($categories->firstItem()); ?> - <?php echo e($categories->lastItem()); ?>

                            dari <?php echo e($categories->total()); ?> kategori
                        </span>
                        <div class="flex items-center gap-1">
                            <?php echo e($categories->onEachSide(1)->links()); ?>

                        </div>
                    </div>
                </div>
            </div>
            <?php endif; ?>

            <?php else: ?>
            
            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
                <div class="py-12 sm:py-16 md:py-20 text-center">
                    <div class="w-24 h-24 sm:w-28 sm:h-28 md:w-32 md:h-32 mx-auto bg-gradient-to-br from-slate-100 to-slate-50 rounded-2xl flex items-center justify-center shadow-sm border border-slate-200 mb-4 sm:mb-6">
                        <i class="fas fa-tags text-4xl sm:text-5xl text-slate-400"></i>
                    </div>
                    <h3 class="text-lg sm:text-xl font-bold text-slate-800 mb-2">Belum Ada Kategori</h3>
                    <p class="text-sm text-slate-600 mb-6">
                        Mulai dengan menambahkan kategori produk baru.
                    </p>
                    <a href="<?php echo e(route('admin.category.create')); ?>"
                        class="inline-flex items-center px-6 py-3 text-white text-sm font-medium rounded-xl shadow-md hover:shadow-lg transition-all duration-200 gradient-primary">
                        <i class="fas fa-plus mr-2"></i>
                        Tambah Kategori
                    </a>
                </div>
            </div>
            <?php endif; ?>

        </div>
    </div>

    <!-- Modal Hapus Kategori -->
    <div id="deleteCategoryModal" class="fixed inset-0 z-[9999] hidden items-center justify-center bg-black/50 backdrop-blur-sm transition-all duration-300">
        <div class="bg-white rounded-2xl max-w-md w-full mx-4 transform transition-all duration-300 scale-95 opacity-0 shadow-2xl" id="deleteCategoryModalContent">
            <div class="p-6">
                <!-- Icon & Title -->
                <div class="text-center mb-4">
                    <div class="mx-auto w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-3">
                        <svg class="w-8 h-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-slate-800">Hapus Kategori</h3>
                </div>

                <!-- Pesan -->
                <p class="text-slate-500 text-center text-sm mb-2">
                    Apakah Anda yakin ingin menghapus kategori
                </p>
                <p class="text-center font-semibold text-slate-800 mb-6" id="categoryNameDisplay"></p>

                <!-- Tombol -->
                <div class="flex gap-3">
                    <button
                        onclick="closeDeleteCategoryModal()"
                        class="flex-1 px-4 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 text-sm font-semibold rounded-xl transition-all duration-200">
                        Batal
                    </button>
                    <button
                        id="confirmDeleteCategoryBtn"
                        class="flex-1 px-4 py-2.5 text-white text-sm font-semibold rounded-xl transition-all duration-200"
                        style="background: linear-gradient(135deg, #e11d48, #be123c);">
                        <i class="fas fa-trash-alt mr-1"></i> Hapus
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Form tersembunyi untuk delete -->
    <form id="delete-category-form" action="" method="POST" style="display: none;">
        <?php echo csrf_field(); ?>
        <?php echo method_field('DELETE'); ?>
    </form>

    <?php $__env->startPush('scripts'); ?>
    <script>
        let currentCategoryId = null;

        function openDeleteCategoryModal(categoryId, categoryName) {
            currentCategoryId = categoryId;
            document.getElementById('categoryNameDisplay').textContent = categoryName;
            document.getElementById('delete-category-form').action = `/admin/categories/${categoryId}`;

            const modal = document.getElementById('deleteCategoryModal');
            const modalContent = document.getElementById('deleteCategoryModalContent');

            modal.classList.remove('hidden');
            modal.classList.add('flex');

            void modal.offsetHeight;

            setTimeout(() => {
                modalContent.classList.remove('scale-95', 'opacity-0');
                modalContent.classList.add('scale-100', 'opacity-100');
            }, 10);

            document.body.style.overflow = 'hidden';
        }

        function closeDeleteCategoryModal() {
            const modal = document.getElementById('deleteCategoryModal');
            const modalContent = document.getElementById('deleteCategoryModalContent');

            modalContent.classList.remove('scale-100', 'opacity-100');
            modalContent.classList.add('scale-95', 'opacity-0');

            setTimeout(() => {
                modal.classList.remove('flex');
                modal.classList.add('hidden');
                document.body.style.overflow = '';
                currentCategoryId = null;
            }, 300);
        }

        document.getElementById('confirmDeleteCategoryBtn').addEventListener('click', function() {
            if (currentCategoryId) {
                document.getElementById('delete-category-form').submit();
            }
        });

        document.getElementById('deleteCategoryModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeDeleteCategoryModal();
            }
        });

        document.addEventListener('keydown', function(e) {
            const modal = document.getElementById('deleteCategoryModal');
            if (e.key === 'Escape' && modal && modal.classList.contains('flex')) {
                closeDeleteCategoryModal();
            }
        });
    </script>
    <?php $__env->stopPush(); ?>

    <style>
        @media (max-width: 640px) {
            table td, table th {
                padding-left: 1rem;
                padding-right: 1rem;
            }
        }

        button, a, [role="button"], .group {
            touch-action: manipulation;
            min-height: 40px;
            min-width: 40px;
        }

        input, select, textarea {
            font-size: 16px !important;
        }

        .animate-fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .overflow-x-auto::-webkit-scrollbar { height: 6px; }
        .overflow-x-auto::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
        .overflow-x-auto::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        .overflow-x-auto::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
    </style>
 <?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\interia\resources\views/category/index.blade.php ENDPATH**/ ?>