

<?php $__env->startSection('title', 'All Categories - The Mini Port'); ?>

<?php $__env->startSection('content'); ?>
<?php $__env->startPush('styles'); ?>
<style>
    .category-card {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid #f0f0f0;
    }
    .category-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px -5px rgba(0,0,0,0.1);
        border-color: rgba(var(--bs-primary-rgb), 0.2);
    }
    
    .category-cover {
        height: 280px;
        position: relative;
        overflow: hidden;
    }
    
    .category-cover img {
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .category-card:hover .category-cover img {
        transform: scale(1.1);
    }

    .category-overlay {
        background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    }

    .subcategory-link {
        font-size: 0.9rem;
        color: #64748b;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        padding: 4px 0;
    }
    
    .subcategory-link:hover {
        color: var(--bs-primary);
        padding-left: 5px;
    }

    .az-filter-link {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        font-weight: 600;
        color: #64748b;
        transition: all 0.2s;
        border: 1px solid transparent;
    }
    
    .az-filter-link:hover {
        background: #f1f5f9;
        color: var(--bs-primary);
    }
    
    .az-filter-link.active {
        background: var(--bs-primary);
        color: white;
        box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.3);
    }
</style>
<?php $__env->stopPush(); ?>

<!-- Hero Section -->
<section class="tw-bg-white tw-border-b tw-border-gray-100 tw-py-8 lg:tw-py-12 tw-relative tw-overflow-hidden">
    <!-- Abstract Background -->
    <div class="tw-absolute tw-top-0 tw-right-0 tw-w-1/3 tw-h-full tw-bg-blue-50/50 tw-skew-x-12 tw-translate-x-32"></div>
    <div class="tw-absolute tw-bottom-0 tw-left-0 tw-w-1/4 tw-h-full tw-bg-orange-50/50 -tw-skew-x-12 -tw-translate-x-20"></div>

    <div class="container tw-relative">
        <div class="text-center tw-max-w-3xl tw-mx-auto">
            <h6 class="tw-text-orange-600 tw-font-bold tw-uppercase tw-tracking-widest tw-mb-3">Global Marketplace</h6>
            <h1 class="tw-text-3xl lg:tw-text-5xl tw-font-black tw-text-slate-900 tw-mb-4" style="font-family: 'Outfit', sans-serif;">
                Explore All Categories
            </h1>
            <p class="tw-text-slate-500 tw-text-lg tw-mb-8">
                Discover millions of products from verified suppliers across <?php echo e($categories->count()); ?>+ specialized categories.
            </p>

            <!-- Search Bar -->
            <div class="tw-bg-white tw-p-2 tw-rounded-full tw-shadow-xl tw-border tw-border-gray-100 tw-max-w-xl tw-mx-auto tw-flex">
                <div class="tw-flex-grow tw-relative">
                    <i class="bi bi-search tw-absolute tw-left-4 tw-top-1/2 -tw-translate-y-1/2 tw-text-gray-400"></i>
                    <input type="text" class="form-control tw-border-0 tw-pl-12 tw-py-3 tw-bg-transparent focus:tw-ring-0" placeholder="Find a category (e.g. Textiles, Electronics)...">
                </div>
                <button class="btn btn-primary tw-bg-orange-600 tw-border-orange-600 hover:tw-bg-orange-700 tw-rounded-full tw-px-8 tw-font-bold">Search</button>
            </div>
        </div>

        <!-- A-Z Filter -->
        <div class="tw-mt-12 tw-flex tw-flex-wrap tw-justify-center tw-gap-1">
            <a href="<?php echo e(route('public.categories.index', ['letter' => 'All'])); ?>" class="az-filter-link text-decoration-none <?php echo e($currentLetter == 'All' ? 'active' : ''); ?>">ALL</a>
            <?php $__currentLoopData = range('A', 'Z'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $char): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <a href="<?php echo e(route('public.categories.index', ['letter' => $char])); ?>" class="az-filter-link text-decoration-none <?php echo e($currentLetter == $char ? 'active' : ''); ?>"><?php echo e($char); ?></a>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>
</section>

<!-- Categories Grid -->
<section class="tw-py-12 tw-bg-slate-50 tw-min-h-screen">
    <div class="container">
        <?php if($categories->count() > 0): ?>
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="col">
                        <div class="card h-100 category-card tw-rounded-2xl tw-overflow-hidden tw-bg-white">
                            <!-- Cover Image Header -->
                            <a href="<?php echo e(route('public.categories.show', $category->slug)); ?>" class="category-cover d-block group">
                                <?php if($category->image): ?>
                                    <img src="<?php echo e(asset('storage/' . $category->image)); ?>" class="w-100 h-100 object-fit-cover" alt="<?php echo e($category->name); ?>">
                                <?php else: ?>
                                    <div class="w-100 h-100 tw-bg-slate-100 d-flex align-items-center justify-content-center">
                                        <i class="bi bi-image tw-text-4xl tw-text-slate-300"></i>
                                    </div>
                                <?php endif; ?>
                                <div class="category-overlay tw-absolute tw-inset-0 d-flex align-items-end p-4">
                                    <div class="w-100">
                                        <h3 class="tw-text-white tw-font-bold tw-text-xl tw-mb-0 tw-drop-shadow-md"><?php echo e($category->name); ?></h3>
                                        <p class="tw-text-white/80 tw-text-sm tw-mb-0"><?php echo e($category->products_count); ?> Products</p>
                                    </div>
                                </div>
                            </a>

                            <!-- Subcategories Body -->
                            <div class="card-body p-4">
                                <ul class="list-unstyled mb-0 d-flex flex-column gap-2">
                                    <?php $__currentLoopData = $category->children->take(5); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $child): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <li>
                                            <a href="<?php echo e(route('public.categories.show', $child->slug)); ?>" class="subcategory-link text-decoration-none">
                                                <i class="bi bi-arrow-right-short tw-text-orange-400 tw-text-lg me-1"></i>
                                                <?php echo e($child->name); ?>

                                            </a>
                                        </li>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </ul>

                                <?php if($category->children->count() > 5): ?>
                                    <div class="tw-mt-4 tw-pt-3 tw-border-t tw-border-dashed tw-border-slate-200">
                                        <a href="<?php echo e(route('public.categories.show', $category->slug)); ?>" class="tw-text-orange-600 tw-text-sm tw-font-bold text-decoration-none hover:tw-text-orange-700">
                                            View all <?php echo e($category->children->count()); ?> sub-categories <i class="bi bi-arrow-right"></i>
                                        </a>
                                    </div>
                                <?php elseif($category->children->count() == 0): ?>
                                    <div class="tw-mt-2 text-center py-2">
                                        <a href="<?php echo e(route('public.categories.show', $category->slug)); ?>" class="btn btn-outline-primary btn-sm tw-rounded-pill tw-px-4">Browse Products</a>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        <?php else: ?>
            <!-- Empty State -->
            <div class="text-center py-5">
                <div class="tw-bg-white tw-p-8 tw-rounded-3xl tw-shadow-xl tw-max-w-lg tw-mx-auto">
                    <div class="tw-w-20 tw-h-20 tw-bg-orange-50 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4">
                        <i class="bi bi-search tw-text-3xl tw-text-orange-500"></i>
                    </div>
                    <h3 class="tw-font-bold tw-text-slate-800 tw-mb-2">No categories found</h3>
                    <p class="tw-text-slate-500 tw-mb-6">We couldn't find any categories matching "<?php echo e($currentLetter); ?>". Try checking 'All' or search for something else.</p>
                    <a href="<?php echo e(route('public.categories.index')); ?>" class="btn btn-primary tw-bg-orange-600 tw-border-orange-600 hover:tw-bg-orange-700 tw-rounded-full tw-px-8 tw-font-bold">
                        View All Categories
                    </a>
                </div>
            </div>
        <?php endif; ?>
    </div>
</section>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/u281583269/domains/theminiport.com/public_html/resources/views/public/categories/index.blade.php ENDPATH**/ ?>