<?php $__env->startSection('title', 'Sale - Memorycloset Media'); ?>

<?php $__env->startSection('description', 'Discover amazing deals on our bakery products! Browse all items on sale with special discounts.'); ?>

<?php $__env->startSection('content'); ?>
<div class="container mx-auto px-4 py-8">
    <?php if (isset($component)) { $__componentOriginal360d002b1b676b6f84d43220f22129e2 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal360d002b1b676b6f84d43220f22129e2 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.breadcrumbs','data' => ['items' => [
        ['label' => 'Home', 'url' => route('home')],
        ['label' => 'Products', 'url' => route('products.index')],
        ['label' => 'Sale']
    ]]] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('breadcrumbs'); ?>
<?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(['items' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute([
        ['label' => 'Home', 'url' => route('home')],
        ['label' => 'Products', 'url' => route('products.index')],
        ['label' => 'Sale']
    ])]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal360d002b1b676b6f84d43220f22129e2)): ?>
<?php $attributes = $__attributesOriginal360d002b1b676b6f84d43220f22129e2; ?>
<?php unset($__attributesOriginal360d002b1b676b6f84d43220f22129e2); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal360d002b1b676b6f84d43220f22129e2)): ?>
<?php $component = $__componentOriginal360d002b1b676b6f84d43220f22129e2; ?>
<?php unset($__componentOriginal360d002b1b676b6f84d43220f22129e2); ?>
<?php endif; ?>
    
    <!-- Hero Section -->
    <div class="text-center mb-12 fade-in">
        <div class="inline-block mb-6">
            <div class="relative">
                <div class="inline-flex items-center gap-3 mb-3 px-4 py-2 bg-black text-white rounded-full shadow-lg">
                    <span class="text-xs font-semibold tracking-[0.25em] uppercase">Sale</span>
                    <span class="w-2 h-2 rounded-full bg-[#e6d5b8]"></span>
                    <span class="text-xs font-medium text-[#e6d5b8] uppercase tracking-[0.18em]">Limited Time</span>
                </div>
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-serif font-bold text-black mb-2 md:mb-4">
                    Exclusive Sale Offers
                </h1>
            </div>
        </div>
        <p class="text-xl md:text-2xl text-[#645443] mb-6">Amazing deals on our delicious baked goods!</p>
        <div class="flex flex-wrap justify-center gap-4 text-lg text-[#524438]">
            <div class="bg-white px-6 py-3 rounded-full shadow-md border border-[#e8ddd0]">
                <span class="font-semibold"><?php echo e($products->total()); ?></span> items on sale
            </div>
        </div>
    </div>
    
    <!-- Filters -->
    <div class="mb-8 fade-in-delay-1">
        <div class="bg-white p-6 rounded-2xl shadow-md border border-[#e8ddd0]">
            <form method="GET" action="<?php echo e(route('products.sale')); ?>" class="flex flex-wrap gap-4">
                <input type="text" name="search" value="<?php echo e(request('search')); ?>" placeholder="Search sale items..." 
                       class="flex-1 min-w-[200px] px-4 py-3 border-2 border-[#e8ddd0] rounded-xl focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438]">
                <select name="category" class="px-4 py-3 border-2 border-[#e8ddd0] rounded-xl focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438] bg-white">
                    <option value="">All Categories</option>
                    <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <option value="<?php echo e($category->id); ?>" <?php echo e(request('category') == $category->id ? 'selected' : ''); ?>>
                            <?php echo e($category->name); ?>

                        </option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </select>
                <button type="submit" class="bg-[#7d6a52] text-white px-6 py-3 rounded-xl hover:bg-[#9d8566] transition-all font-semibold shadow-md hover:shadow-lg">
                    Filter
                </button>
                <?php if(request()->hasAny(['search', 'category'])): ?>
                    <a href="<?php echo e(route('products.sale')); ?>" class="bg-[#e8ddd0] text-[#524438] px-6 py-3 rounded-xl hover:bg-[#d4c4b0] transition-all font-semibold">
                        Clear
                    </a>
                <?php endif; ?>
            </form>
        </div>
    </div>
    
    <!-- Products Grid -->
    <?php if($products->count() > 0): ?>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="products-grid">
            <?php $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <?php
                    $discount = round((($product->price - $product->sale_price) / $product->price) * 100);
                ?>
                <div class="product-card fade-in-delay-<?php echo e(min($index + 2, 6)); ?>" style="animation-delay: <?php echo e(($index % 6) * 0.1); ?>s">
                    <div class="bg-white rounded-2xl shadow-md overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border border-[#e8ddd0] relative" data-product-id="<?php echo e($product->id); ?>">
                        <!-- Discount Badge -->
                        <div class="absolute top-4 right-4 z-10">
                            <div class="bg-[#c97d60] text-white px-4 py-2 rounded-full shadow-lg transform rotate-12 animate-pulse">
                                <span class="font-bold text-lg">-<?php echo e($discount); ?>%</span>
                            </div>
                        </div>
                        <!-- In Cart Badge -->
                        <?php if(($cartStatus[$product->id]['quantity'] ?? 0) > 0): ?>
                            <div class="absolute top-2 left-2 z-10 bg-green-600 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg flex items-center gap-1">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
                                </svg>
                                <?php echo e($cartStatus[$product->id]['quantity']); ?> in cart
                            </div>
                        <?php endif; ?>
                        
                        <a href="<?php echo e(route('products.show', $product->id)); ?>" class="block overflow-hidden">
                            <?php if($product->primaryImage): ?>
                                <img src="<?php echo e($product->primaryImage->image_data_url); ?>" alt="<?php echo e($product->name); ?>" 
                                     class="w-full h-56 object-cover hover:scale-105 transition-transform duration-300">
                            <?php else: ?>
                                <div class="w-full h-56 bg-gradient-to-br from-[#f5f0e8] via-[#e8ddd0] to-[#d4c4b0] flex flex-col items-center justify-center relative overflow-hidden">
                                    <div class="absolute inset-0 opacity-5">
                                        <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
                                            <circle cx="20" cy="20" r="2" fill="#7d6a52"/>
                                            <circle cx="80" cy="30" r="1.5" fill="#9d8566"/>
                                            <circle cx="40" cy="70" r="1.5" fill="#c97d60"/>
                                            <circle cx="70" cy="80" r="2" fill="#7d6a52"/>
                                        </svg>
                                    </div>
                                    <svg class="w-20 h-20 mb-2 drop-shadow-lg relative z-10" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12 18 L8 22 L16 22 Z" fill="#f5f0e8" stroke="#7d6a52" stroke-width="1.5" stroke-linejoin="round"/>
                                        <path d="M8 22 L9 24 L15 24 L16 22 Z" fill="#e8ddd0" stroke="#7d6a52" stroke-width="1.5" stroke-linejoin="round"/>
                                        <path d="M8 18 Q9 14 12 14 Q15 14 16 18" fill="#c97d60" stroke="#9d8566" stroke-width="1.5" stroke-linejoin="round"/>
                                        <path d="M9 17 Q12 15 15 17" fill="#e8b4a0"/>
                                        <circle cx="12" cy="12" r="3.5" fill="#c97d60" stroke="#9d8566" stroke-width="0.5"/>
                                        <circle cx="12.5" cy="11.5" r="1.5" fill="#ff6b6b"/>
                                        <path d="M12 8.5 L12 12" stroke="#7d6a52" stroke-width="1.5" stroke-linecap="round"/>
                                        <circle cx="10" cy="16" r="1" fill="#ffd93d"/>
                                        <circle cx="14" cy="17" r="1" fill="#6bcf7f"/>
                                        <circle cx="11" cy="15.5" r="1" fill="#4d96ff"/>
                                        <circle cx="13" cy="15.5" r="1" fill="#ff6b6b"/>
                                    </svg>
                                    <span class="text-[#7d6a52] text-sm font-medium relative z-10">No Image</span>
                                </div>
                            <?php endif; ?>
                        </a>
                        <div class="p-6">
                            <h3 class="text-xl font-serif font-semibold mb-2 text-[#524438]">
                                <a href="<?php echo e(route('products.show', $product->id)); ?>" class="hover:text-[#9d8566] transition-colors">
                                    <?php echo e($product->name); ?>

                                </a>
                            </h3>
                            <p class="text-[#645443] text-sm mb-4 line-clamp-2 leading-relaxed"><?php echo e($product->description); ?></p>
                            <div class="flex items-center justify-between pt-4 border-t border-[#e8ddd0]">
                                <div>
                                    <div class="flex items-center gap-2">
                                        <span class="text-2xl font-bold text-[#c97d60]">R<?php echo e(number_format($product->sale_price, 2)); ?></span>
                                        <span class="text-sm text-[#9d8566] line-through">R<?php echo e(number_format($product->price, 2)); ?></span>
                                    </div>
                                    <p class="text-xs text-[#9d8566] mt-1">Save R<?php echo e(number_format($product->price - $product->sale_price, 2)); ?></p>
                                </div>
                                <div class="flex gap-2">
                                    <a href="<?php echo e(route('products.show', $product->id)); ?>" class="bg-[#7d6a52] text-white px-6 py-2 rounded-full hover:bg-[#9d8566] transition-all font-medium shadow-md hover:shadow-lg">
                                        View Details
                                    </a>
                                    <?php if($product->availability): ?>
                                        <?php if(($cartStatus[$product->id]['quantity'] ?? 0) > 0): ?>
                                            <div class="flex items-center gap-1 bg-gray-100 rounded-full">
                                                <button onclick="updateCartQuantityFromCard(<?php echo e($product->id); ?>, <?php echo e(($cartStatus[$product->id]['quantity'] ?? 0) - 1); ?>)" class="bg-gray-200 text-gray-700 px-3 py-2 rounded-l-full hover:bg-gray-300 transition-all font-semibold" title="Decrease quantity" aria-label="Decrease quantity">
                                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
                                                    </svg>
                                                </button>
                                                <span class="px-2 text-sm font-semibold text-[#524438] min-w-[2rem] text-center"><?php echo e($cartStatus[$product->id]['quantity']); ?></span>
                                                <button onclick="quickAddToCart(<?php echo e($product->id); ?>)" class="bg-green-600 text-white px-3 py-2 rounded-r-full hover:bg-green-700 transition-all font-semibold" title="Add More" aria-label="Add more to cart">
                                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                                                    </svg>
                                                </button>
                                            </div>
                                        <?php else: ?>
                                            <button onclick="quickAddToCart(<?php echo e($product->id); ?>)" class="bg-[#c97d60] text-white px-4 py-2 rounded-full hover:bg-[#b86a4f] transition-all font-medium shadow-md hover:shadow-lg" title="Quick Add">
                                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                                                </svg>
                                            </button>
                                        <?php endif; ?>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
        
        <!-- Pagination -->
        <div class="mt-8 fade-in-delay-6">
            <?php echo e($products->links()); ?>

        </div>
    <?php else: ?>
        <div class="bg-white p-12 rounded-2xl shadow-md border border-[#e8ddd0] text-center fade-in">
            <svg class="w-24 h-24 mx-auto mb-6 text-[#9d8566]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <h3 class="text-2xl font-serif font-bold mb-4 text-[#524438]">No Sale Items Found</h3>
            <p class="text-[#645443] mb-6">Check back soon for amazing deals!</p>
            <a href="<?php echo e(route('products.index')); ?>" class="bg-[#7d6a52] text-white px-8 py-3 rounded-full hover:bg-[#9d8566] transition-all font-semibold shadow-lg hover:shadow-xl inline-block">
                Browse All Products
            </a>
        </div>
    <?php endif; ?>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('styles'); ?>
<style>
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .fade-in {
        animation: fadeIn 0.6s ease-out forwards;
    }
    
    .fade-in-delay-1 {
        opacity: 0;
        animation: fadeIn 0.6s ease-out 0.1s forwards;
    }
    
    .fade-in-delay-2 {
        opacity: 0;
        animation: fadeIn 0.6s ease-out 0.2s forwards;
    }
    
    .fade-in-delay-3 {
        opacity: 0;
        animation: fadeIn 0.6s ease-out 0.3s forwards;
    }
    
    .fade-in-delay-4 {
        opacity: 0;
        animation: fadeIn 0.6s ease-out 0.4s forwards;
    }
    
    .fade-in-delay-5 {
        opacity: 0;
        animation: fadeIn 0.6s ease-out 0.5s forwards;
    }
    
    .fade-in-delay-6 {
        opacity: 0;
        animation: fadeIn 0.6s ease-out 0.6s forwards;
    }
    
    .product-card {
        opacity: 0;
    }
    
    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .product-card {
        animation: slideInUp 0.6s ease-out forwards;
    }
    
    @keyframes bounce {
        0%, 100% {
            transform: translateY(0) rotate(12deg);
        }
        50% {
            transform: translateY(-10px) rotate(12deg);
        }
    }
    
    .animate-bounce {
        animation: bounce 2s infinite;
    }
</style>
<?php $__env->stopPush(); ?>







<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\catalogue-builder\resources\views/products/sale.blade.php ENDPATH**/ ?>