@extends('layouts.main')

@section('title', $category->name)
@section('meta_description', $category->description)

@section('content')
    <div class="relative h-[400px] overflow-hidden">
        <img src="{{ asset('img/online_menu_banner.jpeg') }}" alt="{{ $category->name }}"
             class="w-full h-full object-cover scale-105 animate-slow-zoom brightness-[0.6]">
        <!-- Gradient Overlay -->
        <div class="absolute inset-0 bg-gradient-to-b from-black/20 via-black/20 to-black/20"></div>
        <div class="absolute inset-0 flex items-center justify-center text-center" style="padding-top: 2rem;">
            <div class="max-w-4xl px-4 transform translate-y-8" data-aos="zoom-in" data-aos-duration="1200">
                <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-6 [text-shadow:_2px_2px_8px_rgb(0_0_0_/_60%)]">
                    {{ $category->name }}
                </h1>
                <div class="text-base md:text-lg text-white [text-shadow:_1px_1px_4px_rgb(0_0_0_/_60%)] max-w-2xl mx-auto">
                    {!! $category->description !!}
                </div>
            </div>
        </div>
    </div>

    <div class="bg-[#b4bf9f] py-20">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 min-h-[calc(100vh-20rem)]">
                @forelse($products as $product)
                <div class="rounded-xl overflow-hidden">
                    <div class="relative">
                        <img src="{{ $product->coverImage ? asset('storage/' . $product->coverImage->image_path) : asset('img/logo.png') }}" alt="{{ $product->name }}" class="w-full h-64 object-cover">
                    </div>
                    <div class="px-6 pt-4 pb-4 bg-[#DBDBBC]">
                        <h3 class="text-xl font-semibold">{{ $product->name }}</h3>
                        <div class="mt-3">
                            <span class="text-brand-green font-bold text-xl block mb-2">{{ number_format($product->price, 2) }} ₺</span>
                            <div class="flex gap-3 mt-4">
                                <a href="{{ route('product.show',$product->slug) }}" class="flex-1 bg-[#2C5530] text-white px-4 py-2.5 rounded-lg font-medium transition-all duration-300 hover:bg-[#234226] hover:shadow-lg hover:-translate-y-0.5 flex items-center justify-center gap-2 group">
                                    <svg class="w-5 h-5 transition-transform duration-300 group-hover:scale-110" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                    </svg>
                                    <span class="font-medium">İncele</span>
                                </a>
                                @include('partials.add-to-cart-button', [
                                    'product' => $product,
                                    'fullWidth' => false,
                                    'iconClass' => 'h-5 w-5 transition-transform duration-300 group-hover:scale-110',
                                    'textClass' => 'font-medium',
                                    'buttonClass' => 'flex-1 bg-[#2C5530] text-white px-4 py-2.5 rounded-lg font-medium transition-all duration-300 hover:bg-[#234226] hover:shadow-lg hover:-translate-y-0.5 flex items-center justify-center gap-2 group',
                                ])
                            </div>
                        </div>
                    </div>
                </div>
                @empty
                    <div class="col-span-full flex flex-col items-center justify-center">
                        <div class="max-w-2xl w-full mx-auto p-8 bg-[#DBDBBC] rounded-xl shadow-lg">
                            <div class="mb-6 flex justify-center">
                                <svg class="w-16 h-16 text-[#105B2E] opacity-80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                            </div>
                            <h3 class="text-2xl md:text-3xl font-semibold text-gray-800 mb-2 text-center">Bu Kategoride Henüz Ürün Bulunmuyor</h3>
                            <p class="text-gray-600 text-center max-w-md mx-auto mb-6">
                                Çok yakında bu kategoride yeni lezzetlerimizle sizlerle olacağız. Diğer kategorilerimizdeki ürünlerimize göz atabilirsiniz.
                            </p>
                            <div class="flex justify-center">
                                <a href="{{ route('order') }}" class="inline-flex items-center px-6 py-3 bg-[#105B2E] text-white rounded-lg hover:bg-[#0d4a25] transition-colors duration-300">
                                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                                    </svg>
                                    Tüm Ürünleri Görüntüle
                                </a>
                            </div>
                        </div>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
@endsection