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

<?php $__env->startSection('breadcrumbs'); ?>
    <li class="breadcrumb-item active" aria-current="page">Products</li>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('page-actions'); ?>
    <button type="button" id="filterBtn" 
            class="inline-flex items-center px-3 py-2 border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-300 text-xs font-semibold rounded-lg shadow-soft hover:bg-slate-50 dark:hover:bg-slate-800 transition">
        <i class="bi bi-funnel mr-1.5 text-slate-500"></i>Filter
    </button>
    <?php if (isset($component)) { $__componentOriginal60a020e5340f3f52bbc4501dc9f93102 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal60a020e5340f3f52bbc4501dc9f93102 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.admin.button','data' => ['href' => route('admin.products.create'),'icon' => 'bi-plus']] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('admin.button'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['href' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute(route('admin.products.create')),'icon' => 'bi-plus']); ?>New Product <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal60a020e5340f3f52bbc4501dc9f93102)): ?>
<?php $attributes = $__attributesOriginal60a020e5340f3f52bbc4501dc9f93102; ?>
<?php unset($__attributesOriginal60a020e5340f3f52bbc4501dc9f93102); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal60a020e5340f3f52bbc4501dc9f93102)): ?>
<?php $component = $__componentOriginal60a020e5340f3f52bbc4501dc9f93102; ?>
<?php unset($__componentOriginal60a020e5340f3f52bbc4501dc9f93102); ?>
<?php endif; ?>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<!-- Search Box Container -->
<div class="mb-6 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 shadow-soft">
    <div class="max-w-md">
        <?php if (isset($component)) { $__componentOriginal5cb383ddee3a6dc44b6e82e90e14b261 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal5cb383ddee3a6dc44b6e82e90e14b261 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.admin.search-input','data' => ['id' => 'productsSearch','placeholder' => 'Search here']] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('admin.search-input'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['id' => 'productsSearch','placeholder' => 'Search here']); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal5cb383ddee3a6dc44b6e82e90e14b261)): ?>
<?php $attributes = $__attributesOriginal5cb383ddee3a6dc44b6e82e90e14b261; ?>
<?php unset($__attributesOriginal5cb383ddee3a6dc44b6e82e90e14b261); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal5cb383ddee3a6dc44b6e82e90e14b261)): ?>
<?php $component = $__componentOriginal5cb383ddee3a6dc44b6e82e90e14b261; ?>
<?php unset($__componentOriginal5cb383ddee3a6dc44b6e82e90e14b261); ?>
<?php endif; ?>
    </div>
</div>

<!-- Filter Panel (Hidden by default) -->
<div id="filterPanel" class="mb-6 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-2xl p-5 shadow-soft hidden">
    <form id="filterForm" class="space-y-4">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div>
                <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Category</label>
                <select name="category_id" 
                        class="w-full py-2 px-3 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-emerald-500">
                    <option value="">All Categories</option>
                    <?php $__currentLoopData = $allCategories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <?php if($category->parent_id === null): ?>
                            <option value="<?php echo e($category->id); ?>" <?php echo e(request('category_id') == $category->id ? 'selected' : ''); ?>>
                                <?php echo e($category->name); ?>

                            </option>
                        <?php else: ?>
                            <option value="<?php echo e($category->id); ?>" <?php echo e(request('category_id') == $category->id ? 'selected' : ''); ?>>
                                &nbsp;&nbsp;└ <?php echo e($category->name); ?>

                            </option>
                        <?php endif; ?>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </select>
            </div>
            
            <div>
                <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Stock Status</label>
                <select name="in_stock" 
                        class="w-full py-2 px-3 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-emerald-500">
                    <option value="">All Stock Status</option>
                    <option value="1" <?php echo e(request('in_stock') === '1' ? 'selected' : ''); ?>>In Stock</option>
                    <option value="0" <?php echo e(request('in_stock') === '0' ? 'selected' : ''); ?>>Out of Stock</option>
                </select>
            </div>
            
            <div>
                <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Sale Status</label>
                <select name="on_sale" 
                        class="w-full py-2 px-3 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-emerald-500">
                    <option value="">All Sale Status</option>
                    <option value="1" <?php echo e(request('on_sale') === '1' ? 'selected' : ''); ?>>On Sale</option>
                    <option value="0" <?php echo e(request('on_sale') === '0' ? 'selected' : ''); ?>>Not on Sale</option>
                </select>
            </div>
            
            <div>
                <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Price Range</label>
                <div class="flex gap-2">
                    <input type="number" name="price_min" value="<?php echo e(request('price_min')); ?>" 
                           placeholder="Min Price" step="0.01" min="0"
                           class="flex-1 py-2 px-3 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-emerald-500">
                    <input type="number" name="price_max" value="<?php echo e(request('price_max')); ?>" 
                           placeholder="Max Price" step="0.01" min="0"
                           class="flex-1 py-2 px-3 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-emerald-500">
                </div>
            </div>
        </div>
        
        <div class="flex items-center gap-3 pt-2">
            <button type="button" id="clearFilters"
                    class="px-4 py-2 bg-slate-100 dark:bg-slate-900 text-slate-700 dark:text-slate-300 text-xs font-semibold rounded-lg hover:bg-slate-200 dark:hover:bg-slate-800 transition">
                Clear Filters
            </button>
        </div>
    </form>
</div>

<!-- DataTable -->
<?php if (isset($component)) { $__componentOriginal8aaf9779783cdf64609094123653a0b9 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal8aaf9779783cdf64609094123653a0b9 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.datatable','data' => ['id' => 'productsTable','ajaxUrl' => route('admin.products.index'),'columns' => [
        ['data' => 'image', 'orderable' => false, 'searchable' => false],
        ['data' => 'product', 'orderable' => true],
        ['data' => 'category', 'orderable' => true],
        ['data' => 'price', 'orderable' => true],
        ['data' => 'status', 'orderable' => true, 'searchable' => false],
        ['data' => 'actions', 'orderable' => false, 'searchable' => false]
    ],'order' => [[1, 'asc']],'columnDefs' => [
        ['orderable' => false, 'targets' => [0, 5]],
        ['className' => 'text-left align-middle', 'targets' => [0, 1, 2, 3, 4]],
        ['className' => 'text-right align-middle', 'targets' => [5]]
    ],'searchId' => 'productsSearch','filterFormId' => 'filterForm','clearFiltersId' => 'clearFilters','padding' => false]] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('datatable'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['id' => 'productsTable','ajax-url' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute(route('admin.products.index')),'columns' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute([
        ['data' => 'image', 'orderable' => false, 'searchable' => false],
        ['data' => 'product', 'orderable' => true],
        ['data' => 'category', 'orderable' => true],
        ['data' => 'price', 'orderable' => true],
        ['data' => 'status', 'orderable' => true, 'searchable' => false],
        ['data' => 'actions', 'orderable' => false, 'searchable' => false]
    ]),'order' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute([[1, 'asc']]),'column-defs' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute([
        ['orderable' => false, 'targets' => [0, 5]],
        ['className' => 'text-left align-middle', 'targets' => [0, 1, 2, 3, 4]],
        ['className' => 'text-right align-middle', 'targets' => [5]]
    ]),'search-id' => 'productsSearch','filter-form-id' => 'filterForm','clear-filters-id' => 'clearFilters','padding' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute(false)]); ?>
     <?php $__env->slot('thead', null, []); ?> 
        <th class="no-export">Image</th>
        <th>Product name</th>
        <th>Category</th>
        <th>Price</th>
        <th>Status</th>
        <th class="no-export text-right">Actions</th>
     <?php $__env->endSlot(); ?>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal8aaf9779783cdf64609094123653a0b9)): ?>
<?php $attributes = $__attributesOriginal8aaf9779783cdf64609094123653a0b9; ?>
<?php unset($__attributesOriginal8aaf9779783cdf64609094123653a0b9); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal8aaf9779783cdf64609094123653a0b9)): ?>
<?php $component = $__componentOriginal8aaf9779783cdf64609094123653a0b9; ?>
<?php unset($__componentOriginal8aaf9779783cdf64609094123653a0b9); ?>
<?php endif; ?>

<script>
$(document).ready(function() {
    // Filter button toggle
    $('#filterBtn').on('click', function() {
        $('#filterPanel').toggleClass('hidden');
    });
});

function toggleDropdown(id) {
    const dropdown = document.getElementById('dropdown-' + id);
    const isHidden = dropdown.classList.contains('hidden');
    
    // Close all other dropdowns
    document.querySelectorAll('[id^="dropdown-"]').forEach(el => {
        if (el.id !== 'dropdown-' + id) {
            el.classList.add('hidden');
        }
    });
    
    // Toggle current dropdown
    if (isHidden) {
        dropdown.classList.remove('hidden');
    } else {
        dropdown.classList.add('hidden');
    }
}

// Close dropdowns when clicking outside
document.addEventListener('click', function(event) {
    if (!event.target.closest('[onclick*="toggleDropdown"]') && !event.target.closest('[id^="dropdown-"]')) {
        document.querySelectorAll('[id^="dropdown-"]').forEach(el => {
            el.classList.add('hidden');
        });
    }
});
</script>
<?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/products/index.blade.php ENDPATH**/ ?>