<?php $__env->startSection('title', 'Subcategories'); ?>
<?php $__env->startSection('page-title', 'Subcategories: ' . $category->name); ?>

<?php $__env->startSection('content'); ?>
<div class="mb-4 md:mb-6 flex flex-col gap-4">
    <div>
        <a href="<?php echo e(route('admin.categories.index')); ?>" class="text-blue-600 hover:text-blue-800 mb-2 inline-flex items-center font-medium">
            <i class="fas fa-arrow-left mr-2"></i>Back to Categories
        </a>
    </div>
    <a href="<?php echo e(route('admin.categories.subcategories.create', $category)); ?>" class="btn-primary text-white font-semibold py-2.5 md:py-3 px-4 md:px-6 rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 inline-flex items-center w-full sm:w-auto justify-center">
        <i class="fas fa-plus mr-2"></i>Add New Subcategory
    </a>
</div>

<!-- Desktop Table View -->
<div class="hidden md:block bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gradient-to-r from-gray-50 to-gray-100">
                <tr>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Subcategory</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Code</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
            <?php $__empty_1 = true; $__currentLoopData = $subcategories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $subcategory): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <tr class="table-row-hover transition-colors duration-150">
                    <td class="px-6 py-4">
                        <div class="flex items-center space-x-4">
                            <?php if($subcategory->image): ?>
                                <img src="<?php echo e($subcategory->image); ?>" alt="<?php echo e($subcategory->name); ?>" 
                                     class="h-16 w-24 rounded-lg object-cover border-2 border-gray-200 shadow-md hover:shadow-lg transition-shadow"
                                     onerror="this.onerror=null; this.src='data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'96\' height=\'64\'%3E%3Crect width=\'96\' height=\'64\' fill=\'%23e5e7eb\'/%3E%3Ctext x=\'50%25\' y=\'50%25\' text-anchor=\'middle\' dy=\'.3em\' fill=\'%239ca3af\' font-size=\'12\'%3ENo Image%3C/text%3E%3C/svg%3E';">
                            <?php else: ?>
                                <div class="h-16 w-24 bg-gradient-to-br from-purple-400 to-pink-500 rounded-lg flex items-center justify-center border-2 border-gray-200 shadow-md">
                                    <i class="fas fa-tags text-white text-xl"></i>
                                </div>
                            <?php endif; ?>
                            <div>
                                <div class="text-sm font-semibold text-gray-900"><?php echo e($subcategory->name); ?></div>
                                <?php if($subcategory->name_km): ?>
                                    <div class="text-sm text-gray-500"><?php echo e($subcategory->name_km); ?></div>
                                <?php endif; ?>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><?php echo e($subcategory->code); ?></td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center space-x-2">
                            <a href="<?php echo e(route('admin.categories.show', $subcategory)); ?>" 
                               class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" 
                               title="View">
                                <i class="fas fa-eye"></i>
                            </a>
                            <a href="<?php echo e(route('admin.categories.edit', $subcategory)); ?>" 
                               class="p-2 text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors" 
                               title="Edit">
                                <i class="fas fa-edit"></i>
                            </a>
                            <form action="<?php echo e(route('admin.categories.destroy', $subcategory)); ?>" method="POST" class="inline" onsubmit="return confirm('Are you sure?');">
                                <?php echo csrf_field(); ?>
                                <?php echo method_field('DELETE'); ?>
                                <button type="submit" 
                                        class="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors" 
                                        title="Delete">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <tr>
                    <td colspan="3" class="px-6 py-12 text-center">
                        <div class="flex flex-col items-center">
                            <i class="fas fa-folder-open text-gray-300 text-6xl mb-4"></i>
                            <p class="text-gray-500 font-medium text-lg mb-2">No subcategories found</p>
                            <p class="text-gray-400 text-sm mb-4">Get started by creating your first subcategory</p>
                            <a href="<?php echo e(route('admin.categories.subcategories.create', $category)); ?>" class="btn-primary text-white font-semibold py-2 px-6 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 inline-flex items-center">
                                <i class="fas fa-plus mr-2"></i>Create Subcategory
                            </a>
                        </div>
                    </td>
                </tr>
            <?php endif; ?>
        </tbody>
    </table>
    </div>
</div>

<!-- Mobile Card View -->
<div class="md:hidden space-y-4">
    <?php $__empty_1 = true; $__currentLoopData = $subcategories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $subcategory): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-4">
            <div class="flex items-start space-x-4 mb-4">
                <?php if($subcategory->image): ?>
                    <img src="<?php echo e($subcategory->image); ?>" alt="<?php echo e($subcategory->name); ?>" 
                         class="h-20 w-20 rounded-lg object-cover border-2 border-gray-200 shadow-md flex-shrink-0">
                <?php else: ?>
                    <div class="h-20 w-20 bg-gradient-to-br from-purple-400 to-pink-500 rounded-lg flex items-center justify-center border-2 border-gray-200 shadow-md flex-shrink-0">
                        <i class="fas fa-tags text-white text-xl"></i>
                    </div>
                <?php endif; ?>
                <div class="flex-1 min-w-0">
                    <h3 class="font-semibold text-gray-900 text-lg mb-1"><?php echo e($subcategory->name); ?></h3>
                    <?php if($subcategory->name_km): ?>
                        <p class="text-sm text-gray-600 mb-2"><?php echo e($subcategory->name_km); ?></p>
                    <?php endif; ?>
                    <p class="text-xs text-gray-500">Code: <?php echo e($subcategory->code); ?></p>
                </div>
            </div>
            
            <div class="border-t border-gray-200 pt-3 mt-3">
                <div class="flex items-center justify-end space-x-2">
                    <a href="<?php echo e(route('admin.categories.show', $subcategory)); ?>" 
                       class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" 
                       title="View">
                        <i class="fas fa-eye"></i>
                    </a>
                    <a href="<?php echo e(route('admin.categories.edit', $subcategory)); ?>" 
                       class="p-2 text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors" 
                       title="Edit">
                        <i class="fas fa-edit"></i>
                    </a>
                    <form action="<?php echo e(route('admin.categories.destroy', $subcategory)); ?>" method="POST" class="inline" onsubmit="return confirm('Are you sure?');">
                        <?php echo csrf_field(); ?>
                        <?php echo method_field('DELETE'); ?>
                        <button type="submit" 
                                class="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors" 
                                title="Delete">
                            <i class="fas fa-trash"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-8 text-center">
            <i class="fas fa-folder-open text-gray-300 text-6xl mb-4"></i>
            <p class="text-gray-500 font-medium text-lg mb-2">No subcategories found</p>
            <p class="text-gray-400 text-sm mb-4">Get started by creating your first subcategory</p>
            <a href="<?php echo e(route('admin.categories.subcategories.create', $category)); ?>" class="btn-primary text-white font-semibold py-2 px-6 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 inline-flex items-center">
                <i class="fas fa-plus mr-2"></i>Create Subcategory
            </a>
        </div>
    <?php endif; ?>
</div>

<?php if($subcategories->hasPages()): ?>
<div class="mt-4 md:mt-6 flex justify-center">
    <div class="bg-white rounded-lg shadow-md border border-gray-200 p-2">
        <?php echo e($subcategories->links()); ?>

    </div>
</div>
<?php endif; ?>
<?php $__env->stopSection(); ?>


<?php echo $__env->make('admin.layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /Users/mac/Documents/e-com/resources/views/admin/categories/subcategories.blade.php ENDPATH**/ ?>