@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-10">
            Tu Carrito de Pizza
        </h1>

        @if (empty($carritoActual))
            <div class="bg-white p-8 rounded-lg shadow-md text-center">
                <p class="text-gray-700 text-xl mb-6">Tu carrito está vacío. ¡Es hora de añadir unas deliciosas pizzas!</p>
                <a href="{{ route('menu.ver') }}" class="inline-block bg-red-600 text-white px-6 py-3 rounded-full hover:bg-red-700 transition-colors text-lg">
                    Explorar el Menú
                </a>
            </div>
        @else
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- Columna de Ítems del Carrito -->
                <div class="lg:col-span-2 bg-white p-6 rounded-lg shadow-md">
                    <h2 class="text-2xl font-bold text-gray-800 mb-6">Pizzas en tu Pedido</h2>
                    <ul class="divide-y divide-gray-200">
                        @foreach ($carritoActual as $idItem => $itemDePizza)
                            <li class="py-4 flex flex-col sm:flex-row items-start sm:items-center justify-between">
                                <div class="flex items-center mb-4 sm:mb-0">
                                    <img src="{{ asset('storage/' . ($itemDePizza['imagen_url'] ?? 'images/placeholder-pizza.jpg')) }}"
                                         alt="{{ $itemDePizza['nombre_pizza_item'] }}"
                                         class="w-20 h-20 object-cover rounded-md mr-4 shadow-sm">
                                    <div>
                                        <h3 class="text-lg font-semibold text-gray-900">{{ $itemDePizza['nombre_pizza_item'] }}</h3>
                                        <p class="text-gray-600 text-sm">Precio: {{ number_format($itemDePizza['precio_unitario'], 2) }}€</p>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-4 w-full sm:w-auto justify-between sm:justify-start">
                                    <!-- Formulario para actualizar cantidad -->
                                    <form action="{{ route('carrito.actualizar', ['pizzaId' => $idItem]) }}" method="POST" class="flex items-center">
                                        @csrf
                                        @method('PUT')
                                        <label for="cantidad_{{ $idItem }}" class="sr-only">Cantidad</label>
                                        <input type="number" id="cantidad_{{ $idItem }}" name="cantidad_pizza"
                                               value="{{ $itemDePizza['cantidad_item'] }}" min="1"
                                               class="w-16 p-2 border border-gray-300 rounded-md text-center text-gray-800 focus:ring-red-500 focus:border-red-500">
                                        <button type="submit" class="ml-2 bg-blue-500 text-white px-3 py-2 rounded-md hover:bg-blue-600 transition-colors text-sm">
                                            Actualizar
                                        </button>
                                    </form>

                                    <!-- Botón para eliminar -->
                                    <form action="{{ route('carrito.eliminar', ['pizzaId' => $idItem]) }}" method="POST">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="text-red-600 hover:text-red-800 transition-colors focus:outline-none focus:ring-2 focus:ring-red-500 rounded-full p-2">
                                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1H9a1 1 0 00-1 1v3M4 7h16"></path></svg>
                                            <span class="sr-only">Eliminar</span>
                                        </button>
                                    </form>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>

                <!-- Columna de Resumen del Carrito -->
                <div class="bg-white p-6 rounded-lg shadow-md flex flex-col justify-between">
                    <div>
                        <h2 class="text-2xl font-bold text-gray-800 mb-6">Resumen del Pedido</h2>
                        <div class="flex justify-between items-center text-xl font-semibold text-gray-900 mb-4 border-t pt-4">
                            <span>Total del Carrito:</span>
                            <span class="text-red-700">{{ number_format($totalCarrito, 2) }}€</span>
                        </div>
                        <p class="text-gray-600 text-sm mb-6">Los gastos de envío se calcularán en el checkout.</p>
                    </div>
                    <a href="{{ route('checkout.ver') }}" class="w-full bg-green-600 text-white py-3 px-6 rounded-full text-center text-lg font-semibold hover:bg-green-700 transition-colors shadow-lg">
                        Proceder al Checkout
                    </a>
                    <a href="{{ route('menu.ver') }}" class="w-full bg-gray-200 text-gray-800 py-3 px-6 rounded-full text-center text-lg font-semibold hover:bg-gray-300 transition-colors mt-4">
                        Continuar Comprando
                    </a>
                </div>
            </div>
        @endif
    </div>
</div>
@endsection