@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">
            Finalizar tu Pedido
        </h1>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Columna de Detalles de Entrega/Recogida -->
            <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">Detalles del Pedido</h2>

                <form action="{{ route('pedido.procesar') }}" method="POST" id="checkout-form">
                    @csrf

                    <!-- Tipo de Entrega -->
                    <div class="mb-6">
                        <label class="block text-gray-700 text-sm font-bold mb-2">
                            ¿Cómo quieres recibir tu pedido?
                        </label>
                        <div class="flex items-center space-x-4">
                            <label class="inline-flex items-center">
                                <input type="radio" name="tipo_entrega" value="domicilio" class="form-radio text-red-600 h-5 w-5"
                                       id="radio-domicilio" {{ old('tipo_entrega', 'domicilio') == 'domicilio' ? 'checked' : '' }}>
                                <span class="ml-2 text-gray-800 text-lg">Envío a domicilio</span>
                            </label>
                            <label class="inline-flex items-center">
                                <input type="radio" name="tipo_entrega" value="recoger_local" class="form-radio text-red-600 h-5 w-5"
                                       id="radio-recoger" {{ old('tipo_entrega', 'domicilio') == 'recoger_local' ? 'checked' : '' }}>
                                <span class="ml-2 text-gray-800 text-lg">Recoger en local</span>
                            </label>
                        </div>
                        @error('tipo_entrega')
                            <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Campos de información personal -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-6">
                        <div>
                            <label for="nombre_receptor" class="block text-gray-700 text-sm font-bold mb-2">
                                Nombre completo:
                            </label>
                            <input type="text" id="nombre_receptor" name="nombre_receptor"
                                   class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-red-500"
                                   value="{{ old('nombre_receptor', $datosCliente->nombre_cliente ?? '') }}" required>
                            @error('nombre_receptor')
                                <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="telefono_receptor" class="block text-gray-700 text-sm font-bold mb-2">
                                Teléfono de contacto:
                            </label>
                            <input type="tel" id="telefono_receptor" name="telefono_receptor"
                                   class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-red-500"
                                   value="{{ old('telefono_receptor', $datosCliente->telefono_contacto ?? '') }}" required>
                            @error('telefono_receptor')
                                <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="mb-6">
                        <label for="email_receptor" class="block text-gray-700 text-sm font-bold mb-2">
                            Correo Electrónico (Opcional):
                        </label>
                        <input type="email" id="email_receptor" name="email_receptor"
                               class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-red-500"
                               value="{{ old('email_receptor', $datosCliente->correo_electronico ?? '') }}">
                        @error('email_receptor')
                            <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Dirección de Envío (condicional) -->
                    <div id="direccion-envio-container" class="mb-6 {{ old('tipo_entrega', 'domicilio') == 'recoger_local' ? 'hidden' : '' }}">
                        <label for="direccion_envio" class="block text-gray-700 text-sm font-bold mb-2">
                            Dirección de envío:
                        </label>
                        <textarea id="direccion_envio" name="direccion_envio" rows="3"
                                  class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-red-500"
                                  placeholder="Calle, número, piso, puerta, código postal, ciudad">{{ old('direccion_envio', $datosCliente->direccion_entrega ?? '') }}</textarea>
                        @error('direccion_envio')
                            <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Notas para el Cliente -->
                    <div class="mb-6">
                        <label for="notas_cliente" class="block text-gray-700 text-sm font-bold mb-2">
                            Notas para la cocina o repartidor (Opcional):
                        </label>
                        <textarea id="notas_cliente" name="notas_cliente" rows="3"
                                  class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-red-500"
                                  placeholder="Ej: sin cebolla, alergia a los frutos secos, etc.">{{ old('notas_cliente') }}</textarea>
                        @error('notas_cliente')
                            <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Botón de Confirmar Pedido -->
                    <button type="submit"
                            class="w-full bg-red-700 text-white py-3 px-6 rounded-full text-center text-xl font-semibold hover:bg-red-800 transition-colors shadow-lg">
                        Confirmar Pedido (Pagar a la entrega/recogida)
                    </button>
                </form>
            </div>

            <!-- Columna de Resumen del Carrito -->
            <div class="bg-white p-6 rounded-lg shadow-md h-fit">
                <h2 class="text-2xl font-bold text-gray-800 mb-6">Tu Carrito</h2>
                <ul class="divide-y divide-gray-200 mb-6">
                    @foreach ($carritoActual as $itemDePizza)
                        <li class="py-3 flex items-center justify-between">
                            <div class="flex-1 mr-4">
                                <p class="text-gray-900 font-medium">{{ $itemDePizza['nombre_pizza_item'] }}</p>
                                <p class="text-gray-600 text-sm">{{ $itemDePizza['cantidad_item'] }} x {{ number_format($itemDePizza['precio_unitario'], 2) }}€</p>
                            </div>
                            <span class="text-gray-900 font-semibold">{{ number_format($itemDePizza['cantidad_item'] * $itemDePizza['precio_unitario'], 2) }}€</span>
                        </li>
                    @endforeach
                </ul>
                <div class="border-t border-gray-200 pt-4 flex justify-between items-center text-2xl font-bold text-gray-900">
                    <span>Total a Pagar:</span>
                    <span class="text-red-700">{{ number_format($totalCarrito, 2) }}€</span>
                </div>
                <p class="text-gray-600 text-sm mt-4">El pago se realizará en el momento de la entrega o recogida en el local.</p>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const radioDomicilio = document.getElementById('radio-domicilio');
        const radioRecoger = document.getElementById('radio-recoger');
        const direccionEnvioContainer = document.getElementById('direccion-envio-container');
        const direccionEnvioInput = document.getElementById('direccion_envio');

        function toggleDireccionEnvio() {
            if (radioDomicilio.checked) {
                direccionEnvioContainer.classList.remove('hidden');
                direccionEnvioInput.setAttribute('required', 'required');
            } else {
                direccionEnvioContainer.classList.add('hidden');
                direccionEnvioInput.removeAttribute('required');
            }
        }

        // Inicializar al cargar la página
        toggleDireccionEnvio();

        // Escuchar cambios en los radios
        radioDomicilio.addEventListener('change', toggleDireccionEnvio);
        radioRecoger.addEventListener('change', toggleDireccionEnvio);
    });
</script>
@endsection