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

<?php $__env->startSection('content'); ?>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">

    
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-5">
        <h3 class="font-bold text-slate-800 mb-4">➕ Tambah Kategori</h3>
        <form method="POST" action="<?php echo e(route('categories.store')); ?>" class="space-y-3">
            <?php echo csrf_field(); ?>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Nama Kategori</label>
                <input type="text" name="name" value="<?php echo e(old('name')); ?>" required
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
                    placeholder="Makanan, Minuman...">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Ikon (emoji)</label>
                <input type="text" name="icon" value="<?php echo e(old('icon')); ?>" maxlength="10"
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
                    placeholder="🍔">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Warna</label>
                <div class="flex gap-2 items-center">
                    <input type="color" name="color" value="<?php echo e(old('color', '#6366f1')); ?>" class="w-10 h-10 rounded-lg border border-slate-200 cursor-pointer">
                    <span class="text-xs text-slate-500">Warna label kategori</span>
                </div>
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Urutan</label>
                <input type="number" name="sort_order" value="<?php echo e(old('sort_order', 0)); ?>" min="0"
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <button type="submit" class="w-full py-2.5 bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-xl text-sm transition">
                Tambah Kategori
            </button>
        </form>
    </div>

    
    <div class="lg:col-span-2 bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
        <div class="px-5 py-4 border-b border-slate-200">
            <h3 class="font-bold text-slate-800">Daftar Kategori (<?php echo e($categories->total()); ?>)</h3>
        </div>
        <div class="divide-y divide-slate-100">
            <?php $__empty_1 = true; $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
            <div class="px-5 py-4 flex items-center gap-4">
                <div class="w-10 h-10 rounded-xl flex items-center justify-center text-xl font-bold flex-shrink-0"
                     style="background: <?php echo e($cat->color); ?>20;">
                    <?php echo e($cat->icon ?? '📦'); ?>

                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2">
                        <span class="font-semibold text-slate-800"><?php echo e($cat->name); ?></span>
                        <span class="px-2 py-0.5 rounded-full text-xs font-semibold text-white" style="background:<?php echo e($cat->color); ?>">
                            <?php echo e($cat->products_count); ?> produk
                        </span>
                        <?php if(!$cat->is_active): ?>
                        <span class="px-2 py-0.5 rounded-full text-xs bg-slate-100 text-slate-500">Nonaktif</span>
                        <?php endif; ?>
                    </div>
                    <div class="text-xs text-slate-400">Urutan: <?php echo e($cat->sort_order); ?></div>
                </div>
                <div class="flex gap-2">
                    <button onclick="showEditCat(<?php echo e($cat->id); ?>, '<?php echo e(addslashes($cat->name)); ?>', '<?php echo e($cat->icon); ?>', '<?php echo e($cat->color); ?>', <?php echo e($cat->sort_order); ?>)"
                        class="px-2.5 py-1.5 bg-blue-50 hover:bg-blue-100 text-blue-600 rounded-lg text-xs transition">Edit</button>
                    <form method="POST" action="<?php echo e(route('categories.destroy', $cat)); ?>" onsubmit="return confirm('Hapus kategori ini?')">
                        <?php echo csrf_field(); ?> <?php echo method_field('DELETE'); ?>
                        <button class="px-2.5 py-1.5 bg-red-50 hover:bg-red-100 text-red-500 rounded-lg text-xs transition">Hapus</button>
                    </form>
                </div>
            </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
            <div class="px-5 py-12 text-center text-slate-400">Belum ada kategori</div>
            <?php endif; ?>
        </div>
        <div class="px-4 py-3 border-t border-slate-200"><?php echo e($categories->links()); ?></div>
    </div>
</div>


<div id="editCatModal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 hidden">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-sm p-6">
        <h3 class="font-bold text-slate-800 mb-4">Edit Kategori</h3>
        <form id="editCatForm" method="POST" class="space-y-3">
            <?php echo csrf_field(); ?> <?php echo method_field('PUT'); ?>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Nama</label>
                <input type="text" name="name" id="editCatName" required class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Ikon</label>
                <input type="text" name="icon" id="editCatIcon" maxlength="10" class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Warna</label>
                <input type="color" name="color" id="editCatColor" class="w-10 h-10 rounded-lg border border-slate-200 cursor-pointer">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Urutan</label>
                <input type="number" name="sort_order" id="editCatOrder" min="0" class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <label class="flex items-center gap-2">
                <input type="checkbox" name="is_active" value="1" id="editCatActive" checked class="rounded">
                <span class="text-sm">Aktif</span>
            </label>
            <div class="flex gap-2 pt-2">
                <button type="button" onclick="document.getElementById('editCatModal').classList.add('hidden')"
                    class="flex-1 py-2 bg-slate-100 hover:bg-slate-200 rounded-xl text-sm font-semibold transition">Batal</button>
                <button type="submit" class="flex-1 py-2 bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-xl text-sm transition">Simpan</button>
            </div>
        </form>
    </div>
</div>

<?php $__env->startPush('scripts'); ?>
<script>
function showEditCat(id, name, icon, color, order) {
    document.getElementById('editCatName').value = name;
    document.getElementById('editCatIcon').value = icon;
    document.getElementById('editCatColor').value = color;
    document.getElementById('editCatOrder').value = order;
    document.getElementById('editCatForm').action = `/categories/${id}`;
    document.getElementById('editCatModal').classList.remove('hidden');
}
</script>
<?php $__env->stopPush(); ?>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\pos-umkm\resources\views/categories/index.blade.php ENDPATH**/ ?>