@extends('layouts.main')

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

@section('content')
    <div class="container mx-auto px-4 py-8">
        <!-- Category Header -->
        <div class="mb-8">
            @if($category->image_path)
                <div class="relative h-[300px] rounded-lg overflow-hidden mb-6">
                    <img src="{{ asset('storage/' . $category->image_path) }}" alt="{{ $category->name }}"
                        class="w-full h-full object-cover">
                    <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
                        <h1 class="text-4xl font-bold text-white">{{ $category->name }}</h1>
                    </div>
                </div>
            @else
                <h1 class="text-4xl font-bold mb-4">{{ $category->name }}</h1>
            @endif

            @if($category->description)
                <p class="text-lg text-gray-600">{{ $category->description }}</p>
            @endif
        </div>

        <!-- Products Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            @forelse($products as $product)
                <div class="bg-white rounded-lg shadow-lg overflow-hidden">
                    @if($product->coverImage)
                        <img src="{{ $product->coverImage->image_url }}" alt="{{ $product->name }}"
                            class="w-full h-48 object-cover">
                    @endif
                    <div class="p-6">
                        <h3 class="text-lg font-semibold mb-2">{{ $product->name }}</h3>
                        <p class="text-gray-600 mb-4">{{ Str::limit($product->description, 80) }}</p>

                        <!-- Product Price -->
                        <div class="mb-4">
                            @php
                                $currentPrice = $product->getCurrentPrice();
                                $basePrice = $product->price;
                            @endphp

                            @if($currentPrice < $basePrice)
                                <div class="flex items-center space-x-2">
                                    <span class="text-xl font-bold text-red-600">₺{{ number_format($currentPrice, 2) }}</span>
                                    <span class="text-sm text-gray-500 line-through">₺{{ number_format($basePrice, 2) }}</span>
                                </div>
                            @else
                                <span class="text-xl font-bold">₺{{ number_format($currentPrice, 2) }}</span>
                            @endif
                        </div>

                        <!-- Allergens -->
                        @if($product->allergens->count() > 0)
                            <div class="mb-4">
                                <h4 class="text-sm font-medium text-gray-600 mb-2">Allergens:</h4>
                                <div class="flex flex-wrap gap-2">
                                    @foreach($product->allergens as $allergen)
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                            {{ $allergen->name }}
                                        </span>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        <!-- Add to Cart Button -->
                        <form action="{{ route('cart.add', $product) }}" method="POST">
                            @csrf
                            <button type="submit" class="w-full bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
                                Add to Cart
                            </button>
                        </form>
                    </div>
                </div>
            @empty
                <div class="col-span-full text-center py-12">
                    <h3 class="text-xl font-medium text-gray-600">No products available in this category.</h3>
                </div>
            @endforelse
        </div>

        <!-- Pagination -->
        @if($products->hasPages())
            <div class="mt-8">
                {{ $products->links() }}
            </div>
        @endif
    </div>
@endsection