@extends('layouts.app')

@section('contenido_principal')
<div class="bg-gray-50 py-12">
    <div class="container mx-auto px-4">
        <h1 class="text-4xl font-extrabold text-red-800 text-center mb-12">
            Nuestro Delicioso Menú
        </h1>

        @forelse ($categoriasConPizzas as $categoria)
            @if ($categoria->pizzas->count() > 0)
                <section class="mb-12">
                    <h2 class="text-3xl font-bold text-gray-800 mb-6 border-b-2 border-red-500 pb-2">
                        {{ $categoria->nombre_categoria }}
                    </h2>
                    @if ($categoria->descripcion_categoria)
                        <p class="text-gray-600 mb-8">{{ $categoria->descripcion_categoria }}</p>
                    @endif

                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
                        @foreach ($categoria->pizzas as $pizza)
                            <div class="bg-white rounded-xl shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out flex flex-col">
                                @if ($pizza->imagen_url)
                                    <img src="{{ asset('storage/' . $pizza->imagen_url) }}" alt="Pizza {{ $pizza->nombre_pizza }}" class="w-full h-48 object-cover object-center">
                                @else
                                    <img src="{{ asset('images/placeholder-pizza.jpg') }}" alt="Imagen de Pizza por defecto" class="w-full h-48 object-cover object-center">
                                @endif
                                <div class="p-5 flex-grow flex flex-col justify-between">
                                    <div>
                                        <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ $pizza->nombre_pizza }}</h3>
                                        <p class="text-gray-600 text-sm mb-3 line-clamp-3">{{ $pizza->ingredientes_pizza }}</p>
                                    </div>
                                    <div class="flex items-center justify-between mt-4">
                                        <span class="text-red-700 text-2xl font-bold">{{ number_format($pizza->precio_base, 2) }}€</span>
                                        <form action="{{ route('carrito.agregar', $pizza) }}" method="POST">
                                            @csrf
                                            <input type="hidden" name="cantidad_pizza" value="1">
                                            <button type="submit" class="bg-red-600 text-white px-4 py-2 rounded-full hover:bg-red-700 transition-colors flex items-center text-sm">
                                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 00-1 1v12a1 1 0 001 1h14a1 1 0 001-1V2a1 1 0 00-1-1H3zm0 3h14v10H3V4zm0 0a1 1 0 001 1h12a1 1 0 001-1V4a1 1 0 00-1-1H4a1 1 0 00-1 1v0z"></path></svg>
                                                Añadir
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </section>
            @endif
        @empty
            <div class="text-center py-10">
                <p class="text-gray-700 text-xl">¡Parece que aún no tenemos pizzas en el menú! Estamos cocinando algo especial.</p>
                <a href="{{ route('inicio') }}" class="mt-6 inline-block bg-red-600 text-white px-6 py-3 rounded-full hover:bg-red-700 transition-colors">Volver al Inicio</a>
            </div>
        @endforelse

        <div class="mt-16 text-center">
            <h2 class="text-3xl font-bold text-gray-800 mb-4">¿Tienes mucha hambre?</h2>
            <p class="text-lg text-gray-700 mb-6">¡Haz tu pedido ahora y disfruta de la mejor pizza!</p>
            <a href="{{ route('carrito.ver') }}" class="inline-flex items-center justify-center px-8 py-4 border border-transparent text-lg font-medium rounded-full text-white bg-red-700 hover:bg-red-800 transition-colors shadow-lg">
                Ir al Carrito
            </a>
        </div>
    </div>
</div>
@endsection