@extends('layouts.app')

@section('title', 'Sale - Sweet Delights Bakery')

@section('description', 'Discover amazing deals on our bakery products! Browse all items on sale with special discounts.')

@section('content')
<div class="container mx-auto px-4 py-8">
    <x-breadcrumbs :items="[
        ['label' => 'Home', 'url' => route('home')],
        ['label' => 'Products', 'url' => route('products.index')],
        ['label' => 'Sale']
    ]" />
    
    <!-- Hero Section -->
    <div class="text-center mb-12 fade-in">
        <div class="inline-block mb-6">
            <div class="relative">
                <h1 class="text-5xl md:text-6xl font-serif font-bold text-[#524438] mb-4">🎉 SALE! 🎉</h1>
                <div class="absolute -top-2 -right-2 animate-bounce">
                    <span class="text-4xl">✨</span>
                </div>
            </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">{{ $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="{{ route('products.sale') }}" class="flex flex-wrap gap-4">
                <input type="text" name="search" value="{{ 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>
                    @foreach($categories as $category)
                        <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
                            {{ $category->name }}
                        </option>
                    @endforeach
                </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>
                @if(request()->hasAny(['search', 'category']))
                    <a href="{{ route('products.sale') }}" class="bg-[#e8ddd0] text-[#524438] px-6 py-3 rounded-xl hover:bg-[#d4c4b0] transition-all font-semibold">
                        Clear
                    </a>
                @endif
            </form>
        </div>
    </div>
    
    <!-- Products Grid -->
    @if($products->count() > 0)
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="products-grid">
            @foreach($products as $index => $product)
                @php
                    $discount = round((($product->price - $product->sale_price) / $product->price) * 100);
                @endphp
                <div class="product-card fade-in-delay-{{ min($index + 2, 6) }}" style="animation-delay: {{ ($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">
                        <!-- 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">-{{ $discount }}%</span>
                            </div>
                        </div>
                        
                        <a href="{{ route('products.show', $product->id) }}" class="block overflow-hidden">
                            @if($product->primaryImage)
                                <img src="{{ $product->primaryImage->image_data_url }}" alt="{{ $product->name }}" 
                                     class="w-full h-56 object-cover hover:scale-105 transition-transform duration-300">
                            @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>
                            @endif
                        </a>
                        <div class="p-6">
                            <h3 class="text-xl font-serif font-semibold mb-2 text-[#524438]">
                                <a href="{{ route('products.show', $product->id) }}" class="hover:text-[#9d8566] transition-colors">
                                    {{ $product->name }}
                                </a>
                            </h3>
                            <p class="text-[#645443] text-sm mb-4 line-clamp-2 leading-relaxed">{{ $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{{ number_format($product->sale_price, 2) }}</span>
                                        <span class="text-sm text-[#9d8566] line-through">R{{ number_format($product->price, 2) }}</span>
                                    </div>
                                    <p class="text-xs text-[#9d8566] mt-1">Save R{{ number_format($product->price - $product->sale_price, 2) }}</p>
                                </div>
                                <a href="{{ 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>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        
        <!-- Pagination -->
        <div class="mt-8 fade-in-delay-6">
            {{ $products->links() }}
        </div>
    @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="{{ 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>
    @endif
</div>
@endsection

@push('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>
@endpush