<?php $__env->startSection('title', 'Daftar Kategori'); ?>

<?php $__env->startSection('content'); ?>
<div class="space-y-6">

    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h2 class="text-2xl font-bold text-gray-800">Daftar Kategori</h2>
            <p class="text-gray-500 mt-1">Kelola kategori produk toko Anda</p>
        </div>

        <a href="<?php echo e(route('kategoris.create')); ?>" 
           class="inline-flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-600 hover:to-teal-700 text-white font-medium rounded-xl shadow-lg shadow-emerald-500/25 hover:shadow-emerald-500/40 transition-all duration-200 transform hover:-translate-y-0.5">
            <i class="bi bi-plus-lg"></i>
            Tambah Kategori
        </a>
    </div>

    <!-- Alert -->
    <?php if(session('success')): ?>
        <div x-data="{ show: true }" x-show="show" x-transition 
             class="flex items-center gap-3 px-5 py-4 bg-emerald-50 border border-emerald-200 rounded-xl text-emerald-800">
            <i class="bi bi-check-circle-fill text-emerald-500"></i>
            <span class="flex-1"><?php echo e(session('success')); ?></span>
            <button @click="show = false" class="text-emerald-400 hover:text-emerald-600">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>
    <?php endif; ?>

    <!-- Table -->
    <div class="bg-white border border-gray-200 rounded-2xl shadow-sm overflow-hidden">

        <?php if($kategoris->isEmpty()): ?>
            <div class="text-center py-12 text-gray-500">
                Belum ada kategori
            </div>
        <?php else: ?>

        <div class="overflow-x-auto">
            <table class="min-w-full text-sm text-left text-gray-600">
                
                <!-- Head -->
                <thead class="bg-gray-50 text-xs uppercase text-gray-500">
                    <tr>
                        <th class="px-6 py-3">No</th>
                        <th class="px-6 py-3">Nama Kategori</th>
                        <th class="px-6 py-3 text-center">Aksi</th>
                    </tr>
                </thead>

                <!-- Body -->
                <tbody class="divide-y divide-gray-100">
                    <?php $__currentLoopData = $kategoris; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $kategori): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <tr class="hover:bg-gray-50 transition">
                            <td class="px-6 py-4 font-medium text-gray-800">
                                <?php echo e($loop->iteration); ?>

                            </td>

                            <td class="px-6 py-4 text-gray-800 font-medium">
                                <?php echo e($kategori->nama); ?>

                                </td>

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

                                    <!-- Edit -->
                                    <a href="<?php echo e(route('kategoris.edit', $kategori->id)); ?>"
                                       class="inline-flex items-center gap-1 px-3 py-1.5 text-sm border border-amber-300 text-amber-700 rounded-lg hover:bg-amber-50 transition">
                                        <i class="bi bi-pencil"></i>
                                        Edit
                                    </a>

                                    <!-- Delete -->
                                    <form action="<?php echo e(route('kategoris.destroy', $kategori->id)); ?>" 
                                          method="POST"
                                          onsubmit="return confirm('Yakin hapus?')">
                                        <?php echo csrf_field(); ?>
                                        <?php echo method_field('DELETE'); ?>
                                        <button type="submit"
                                            class="inline-flex items-center gap-1 px-3 py-1.5 text-sm border border-red-300 text-red-600 rounded-lg hover:bg-red-50 transition">
                                            <i class="bi bi-trash"></i>
                                            Hapus
                                        </button>
                                    </form>

                                </div>
                            </td>
                        </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </tbody>

            </table>
        </div>

        <?php endif; ?>
    </div>

</div>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.admin', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\Toko-miftah\resources\views/kategoris/index.blade.php ENDPATH**/ ?>