

<?php $__env->startSection('title', 'Categories'); ?>

<?php
    $currentSort = $sort ?? 'sort_order';
    $currentOrder = $order ?? 'asc';
    function categorySortableHeader($label, $sortField, $currentSort, $currentOrder) {
        $url = request()->fullUrlWithQuery([
            'sort' => $sortField,
            'order' => ($currentSort == $sortField && $currentOrder == 'asc') ? 'desc' : 'asc',
            'page' => 1
        ]);
        if ($currentSort == $sortField) {
            $icon = $currentOrder == 'asc'
                ? '<i class="bi bi-arrow-up"></i>'
                : '<i class="bi bi-arrow-down"></i>';
        } else {
            $icon = '<i class="bi bi-arrow-down-up" style="opacity: 0.5;"></i>';
        }
        return ['url' => $url, 'label' => $label, 'icon' => $icon];
    }
?>
<?php $__env->startSection('content'); ?>
<div class="admin-page-header">
    <h1>Categories</h1>
    <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('categories.create')): ?>
    <a href="<?php echo e(route('admin.categories.create')); ?>" class="admin-btn-primary">
        <i class="bi bi-plus"></i> Add Category
    </a>
    <?php endif; ?>
</div>

<!-- Filters -->
<div class="admin-card mb-3">
    <div class="card-body  ">
        <form method="GET" action="<?php echo e(route('admin.categories.index')); ?>" class="row g-3 align-items-end justify-content-end">
            <div class="col-md-3">
                <label class="admin-form-label">Search</label>
                <input type="text"
                       name="search"
                       class="admin-form-control form-control"
                       placeholder="Search by category name"
                       value="<?php echo e(request('search')); ?>">
            </div>
            <div class="col-md-3">
                <label class="admin-form-label">Parent</label>
                <select name="parent_id" class="admin-form-control form-select">
                    <option value="">All</option>
                    <option value="root" <?php echo e(request('parent_id') === 'root' ? 'selected' : ''); ?>>Root categories only</option>
                    <?php $__currentLoopData = $parentCategories ?? []; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $parent): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <option value="<?php echo e($parent->id); ?>" <?php echo e(request('parent_id') == $parent->id ? 'selected' : ''); ?>>
                            <?php echo e($parent->name); ?>

                        </option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </select>
            </div>
            <div class="col-md-2">
                <label class="admin-form-label">Status</label>
                <select name="status" class="admin-form-control form-select">
                    <option value="">All Status</option>
                    <option value="active" <?php echo e(request('status') === 'active' ? 'selected' : ''); ?>>Active</option>
                    <option value="inactive" <?php echo e(request('status') === 'inactive' ? 'selected' : ''); ?>>Inactive</option>
                </select>
            </div>
            <div class="col-md-2 col-10">
                <button type="submit" class="admin-btn-primary w-100">
                    <i class="bi bi-search"></i> Filter
                </button>
            </div>
            <?php if(request()->hasAny(['search','parent_id','status','sort','order'])): ?>
            <div class="col-md-1 col-2">
                <a href="<?php echo e(route('admin.categories.index')); ?>"  title="clear filter" class="btn btn-outline-secondary" >
                                <i class="bi bi-arrow-clockwise"></i>
                    
                </a>
            </div>
            <?php endif; ?>
        </form>
    </div>
</div>

<!-- Import Section Toggle -->
<?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('categories.create')): ?>
<div class="mb-3">
    <button class="admin-btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#importSection" aria-expanded="false" aria-controls="importSection">
        <i class="bi bi-upload"></i> Import Categories from CSV
        <i class="bi bi-chevron-down ms-2"></i>
    </button>
</div>

<!-- Import Section -->
<div class="collapse mb-4" id="importSection">
    <div class="admin-card">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0" style="color: var(--admin-primary);">
                    <i class="bi bi-upload"></i> Import Categories from CSV
                </h5>
                <a href="<?php echo e(route('admin.categories.download-sample')); ?>" class="admin-btn-primary admin-action-btn-sm" style="background: #10b981;">
                    <i class="bi bi-download"></i> Download Sample CSV
                </a>
            </div>
            <div class="alert alert-info mb-3">
                <i class="bi bi-info-circle"></i> <strong>CSV Format:</strong> The file should have columns: <code>name</code>, <code>parent_category_name</code>, <code>sort_order</code>, <code>is_active</code>. 
                Leave <code>parent_category_name</code> empty for root categories. For <code>is_active</code>, use: 1, true, yes, or active for active categories.
            </div>
            <form action="<?php echo e(route('admin.categories.import')); ?>" method="POST" enctype="multipart/form-data" class="row g-3 align-items-center">
                <?php echo csrf_field(); ?>
                <div class="col-md-8">
                    <label class="admin-form-label">Select CSV File</label>
                    <input type="file" 
                           name="import_file" 
                           class="admin-form-control form-control <?php $__errorArgs = ['import_file'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>" 
                           accept=".csv,.txt"
                           required>
                    <?php $__errorArgs = ['import_file'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                        <div class="invalid-feedback"><?php echo e($message); ?></div>
                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    <small class="text-muted">Maximum file size: 5MB. Download sample file to see the correct format.</small>
                </div>
                <div class="col-md-4">
                    <button type="submit" class="admin-btn-primary w-100">
                        <i class="bi bi-upload"></i> Import Categories
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<?php endif; ?>
<div class="admin-card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="admin-table table table-hover">
                <thead>
                    <tr>
                        <?php $nameSort = categorySortableHeader('Category Name', 'name', $currentSort, $currentOrder); ?>
                        <th class="sortable-header" style="font-weight: 700; text-align: left;">
                            <a href="<?php echo e($nameSort['url']); ?>" class="sortable-link text-decoration-none text-dark">
                                <span><?php echo e($nameSort['label']); ?></span>
                                <span class="sort-icon ms-1"><?php echo $nameSort['icon']; ?></span>
                            </a>
                        </th>
                        <?php $parentSort = categorySortableHeader('Parent Category', 'parent', $currentSort, $currentOrder); ?>
                        <th class="sortable-header" style="font-weight: 700; text-align: left;">
                            <a href="<?php echo e($parentSort['url']); ?>" class="sortable-link text-decoration-none text-dark">
                                <span><?php echo e($parentSort['label']); ?></span>
                                <span class="sort-icon ms-1"><?php echo $parentSort['icon']; ?></span>
                            </a>
                        </th>
                        <?php $countSort = categorySortableHeader('Product Count', 'products_count', $currentSort, $currentOrder); ?>
                        <th class="sortable-header" style="font-weight: 700; text-align: center;">
                            <a href="<?php echo e($countSort['url']); ?>" class="sortable-link text-decoration-none text-dark d-inline-block">
                                <span><?php echo e($countSort['label']); ?></span>
                                <span class="sort-icon ms-1"><?php echo $countSort['icon']; ?></span>
                            </a>
                        </th>
                        <th style="font-weight: 700; text-align: center;">Status</th>
                        <th style="font-weight: 700; text-align: center;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php $__empty_1 = true; $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <tr class="table-row-hover">
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <?php if($category->image_path): ?>
                                        <img src="<?php echo e(asset('storage/' . $category->image_path)); ?>" 
                                             alt="<?php echo e($category->name); ?>" 
                                             class="category-thumbnail"
                                             onerror="this.onerror=null; this.style.display='none';">
                                    <?php else: ?>
                                        <div class="category-thumbnail d-flex align-items-center justify-content-center bg-light" style="background: #f3f4f6 !important;">
                                            <i class="bi bi-image text-muted" style="font-size: 1.2rem;"></i>
                                        </div>
                                    <?php endif; ?>
                                    <span style="font-weight: 500;"><?php echo e($category->name); ?></span>
                                </div>
                            </td>
                            <td>
                                <?php if($category->parent): ?>
                                    <span class="text-muted"><?php echo e($category->parent->name); ?></span>
                                <?php else: ?>
                                    <em class="text-muted">Root Category</em>
                                <?php endif; ?>
                            </td>
                            <td style="text-align: center;">
                                <span class="product-count-badge"><?php echo e($category->products_count ?? 0); ?></span>
                            </td>
                            <td style="text-align: center;">
                                <span class="admin-badge <?php echo e($category->is_active ? 'admin-badge-success' : 'admin-badge-danger'); ?>">
                                    <?php echo e($category->is_active ? 'Active' : 'Inactive'); ?>

                                </span>
                            </td>
                            <td style="text-align: center;">
                                <div class="d-flex gap-2 justify-content-center">
                                    <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('categories.update')): ?>
                                    <a href="<?php echo e(route('admin.categories.edit', $category->id)); ?>" 
                                       class="admin-action-btn admin-action-btn-sm admin-btn-primary"
                                       title="Edit Category">
                                        <i class="bi bi-pencil"></i> Edit
                                    </a>
                                    <?php endif; ?>
                                    <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('categories.delete')): ?>
                                    <form action="<?php echo e(route('admin.categories.destroy', $category->id)); ?>" 
                                          method="POST" 
                                          class="d-inline" 
                                          onsubmit="return confirm('Are you sure you want to delete this category?')">
                                        <?php echo csrf_field(); ?>
                                        <?php echo method_field('DELETE'); ?>
                                        <button type="submit" 
                                                class="admin-action-btn admin-action-btn-sm" 
                                                style="background: #ef4444; height: -webkit-fill-available; color: white;"
                                                title="Delete Category">
                                            <i class="bi bi-trash"></i> Delete
                                        </button>
                                    </form>
                                    <?php endif; ?>
                                </div>
                            </td>
                        </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <tr>
                            <td colspan="5" class="text-center py-5">
                                <div class="admin-empty-state">
                                    <i class="bi bi-folder-x"></i>
                                    <h3>No Categories Found</h3>
                                    <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('categories.create')): ?>
                                    <p>Get started by creating your first category.</p>
                                    <a href="<?php echo e(route('admin.categories.create')); ?>" class="admin-btn-primary">
                                        <i class="bi bi-plus"></i> Add Category
                                    </a>
                                    <?php endif; ?>
                                </div>
                            </td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>

        <!-- Pagination - Right Aligned -->
        <?php if($categories->hasPages()): ?>
        <div class="pagination-wrapper mt-4">
            <div class="d-flex justify-content-end align-items-center gap-3 flex-wrap">
                <div class="pagination-info-text">
                    Showing <strong><?php echo e($categories->firstItem() ?? 0); ?></strong>–<strong><?php echo e($categories->lastItem() ?? 0); ?></strong> 
                    of <strong><?php echo e($categories->total()); ?></strong> categories
                </div>
                <div class="pagination-controls">
                    <?php echo e($categories->links('vendor.pagination.admin-categories')); ?>

                </div>
            </div>
        </div>
        <?php endif; ?>
    </div>
</div>

<?php $__env->startPush('styles'); ?>
<style>
/* Sortable column headers */
.admin-table .sortable-header .sortable-link {
    white-space: nowrap;
}
.admin-table .sortable-header .sortable-link:hover {
    color: var(--admin-primary, #17a2b8) !important;
}
.admin-table .sortable-header .sort-icon {
    font-size: 0.75rem;
    vertical-align: middle;
}

/* Category Table Enhancements */
.admin-table tbody tr.table-row-hover {
    transition: all 0.2s ease;
    cursor: pointer;
}

.admin-table tbody tr.table-row-hover:hover {
    background-color: #f8f9fa !important;
    transform: scale(1.01);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.category-thumbnail {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.category-thumbnail[style*="display: none"] {
    display: none !important;
}

.product-count-badge {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    color: var(--admin-primary);
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.875rem;
    min-width: 45px;
    text-align: center;
}

.admin-table tbody td {
    vertical-align: middle;
    padding: 1rem 1.25rem;
}

/* Pagination Wrapper */
.pagination-wrapper {
    padding-top: 1.5rem;
    border-top: 2px solid #e9ecef;
    display: flex;
    justify-content: flex-end;
}

.pagination-info-text {
    font-size: 0.9rem;
    color: #4a5568;
    font-weight: 500;
    white-space: nowrap;
}

.pagination-info-text strong {
    color: var(--admin-primary);
    font-weight: 700;
}

.pagination-controls {
    display: flex;
    align-items: center;
}

/* Override global pagination centering for this page */
.pagination-wrapper .pagination-controls .pagination {
    justify-content: flex-end !important;
    margin: 0 !important;
}

/* Ensure pagination only shows once */
.pagination-wrapper .pagination {
    display: flex;
    list-style: none;
    padding: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .pagination-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .pagination-info-text {
        text-align: center;
        order: 2;
    }
    
    .pagination-controls {
        justify-content: center;
        order: 1;
    }
    
    .admin-table thead th,
    .admin-table tbody td {
        padding: 0.75rem 0.5rem;
        font-size: 0.85rem;
    }
    
    .category-thumbnail {
        width: 32px;
        height: 32px;
    }
    
    .admin-action-btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .admin-action-btn-sm i {
        font-size: 0.875rem;
    }
}

@media (max-width: 576px) {
    .admin-table {
        font-size: 0.8rem;
    }
    
    .admin-table thead th {
        font-size: 0.75rem;
        padding: 0.5rem 0.25rem;
    }
    
    .admin-action-btn-sm span,
    .admin-action-btn-sm:not(:has(i:only-child)) span {
        display: none;
    }
    
    .admin-action-btn-sm {
        /* width: 36px;
        height: 36px;
        padding: 0; */
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>
<?php $__env->stopPush(); ?>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.admin', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /var/www/html/shaa_jewels/live/resources/views/admin/categories/index.blade.php ENDPATH**/ ?>