<?php $__env->startSection('title', 'Categorías'); ?>
<?php $__env->startSection('header', 'Categorías de Productos'); ?>

<?php $__env->startSection('content'); ?>
<div x-data="{ open: false, edit: null }" class="space-y-5">

<div class="bg-white rounded-2xl shadow-md p-5 flex justify-between items-center">
    <h3 class="font-bold text-slate-800">Listado de Categorías</h3>
    <button @click="open = true; edit = null" class="gradient-primary text-white px-5 py-2.5 rounded-lg font-semibold flex items-center gap-2">
        <i class="fas fa-plus"></i>Nueva Categoría
    </button>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
    <?php $__empty_1 = true; $__currentLoopData = $categorias; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $c): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
        <div class="bg-white rounded-2xl shadow-md p-5 hover:shadow-lg transition" style="border-top: 4px solid <?php echo e($c->color); ?>">
            <div class="flex justify-between items-start mb-3">
                <div class="w-12 h-12 rounded-xl flex items-center justify-center" style="background:<?php echo e($c->color); ?>20">
                    <i class="fas fa-<?php echo e($c->icono); ?> text-xl" style="color:<?php echo e($c->color); ?>"></i>
                </div>
                <div class="flex gap-1">
                    <button @click="edit = <?php echo e($c->toJson()); ?>; open = true" class="p-2 hover:bg-yellow-50 text-yellow-600 rounded-lg"><i class="fas fa-edit"></i></button>
                    <form method="POST" action="<?php echo e(route('categorias.destroy', $c->id)); ?>" class="inline" onsubmit="return confirm('¿Eliminar?')">
                        <?php echo csrf_field(); ?> <?php echo method_field('DELETE'); ?>
                        <button class="p-2 hover:bg-red-50 text-red-600 rounded-lg"><i class="fas fa-trash"></i></button>
                    </form>
                </div>
            </div>
            <h3 class="font-bold text-slate-800"><?php echo e($c->nombre); ?></h3>
            <p class="text-sm text-slate-500 mb-2"><?php echo e($c->descripcion ?? 'Sin descripción'); ?></p>
            <div class="flex items-center gap-2 text-xs">
                <span class="bg-slate-100 px-2 py-1 rounded-full"><i class="fas fa-box mr-1"></i><?php echo e($c->productos_count); ?> productos</span>
                <?php if(!$c->activo): ?>
                    <span class="bg-red-100 text-red-600 px-2 py-1 rounded-full">Inactivo</span>
                <?php endif; ?>
            </div>
        </div>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
        <p class="col-span-full text-center text-slate-400 py-12">No hay categorías</p>
    <?php endif; ?>
</div>
<?php echo e($categorias->links()); ?>


<!-- Modal -->
<div x-show="open" x-cloak class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4" style="display:none;">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md p-6" @click.outside="open = false">
        <h3 class="text-xl font-bold mb-4" x-text="edit ? 'Editar Categoría' : 'Nueva Categoría'"></h3>
        <form :action="edit ? `/categorias/${edit.id}` : '<?php echo e(route('categorias.store')); ?>'" method="POST" class="space-y-3">
            <?php echo csrf_field(); ?>
            <template x-if="edit">
                <input type="hidden" name="_method" value="PUT">
            </template>
            <div>
                <label class="block text-sm font-semibold mb-1">Nombre</label>
                <input type="text" name="nombre" :value="edit?.nombre || ''" required class="w-full px-3 py-2 border border-slate-300 rounded-lg">
            </div>
            <div>
                <label class="block text-sm font-semibold mb-1">Descripción</label>
                <input type="text" name="descripcion" :value="edit?.descripcion || ''" class="w-full px-3 py-2 border border-slate-300 rounded-lg">
            </div>
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-sm font-semibold mb-1">Color</label>
                    <input type="color" name="color" :value="edit?.color || '#10b981'" class="w-full h-10 border border-slate-300 rounded-lg">
                </div>
                <div>
                    <label class="block text-sm font-semibold mb-1">Ícono</label>
                    <select name="icono" class="w-full px-3 py-2 border border-slate-300 rounded-lg">
                        <?php $__currentLoopData = ['cube','apple-alt','bread-slice','wine-bottle','candy-cane','cookie','cheese','fish','drumstick-bite','ice-cream','pizza-slice','seedling','soap','tshirt','baby','paw']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <option value="<?php echo e($i); ?>" x-bind:selected="edit?.icono === '<?php echo e($i); ?>'"><?php echo e($i); ?></option>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </select>
                </div>
            </div>
            <template x-if="edit">
                <label class="flex items-center gap-2"><input type="checkbox" name="activo" value="1" :checked="edit?.activo"> Activo</label>
            </template>
            <div class="flex gap-2 pt-3">
                <button type="button" @click="open = false" class="flex-1 py-2.5 bg-slate-200 rounded-lg">Cancelar</button>
                <button type="submit" class="flex-1 py-2.5 gradient-primary text-white rounded-lg font-semibold">Guardar</button>
            </div>
        </form>
    </div>
</div>
</div>
<?php $__env->stopSection(); ?>

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