<?php require_once 'includes/header.php'; ?>
<?php if (isset($_GET['pedido']) && $_GET['pedido'] === 'ok'): ?>
  <div style="background:#4CAF50; color:white; padding:16px; text-align:center; font-size:1rem;">
    ✅ ¡Pedido confirmado! Pronto nos comunicamos contigo.
  </div>
<?php endif; ?>

<section class="reservas-section" id="pedido-seccion" style="padding-top: 140px;">
    <div class="section-header light">
        <span class="section-tag">Paso Final</span>
        <h2>Completa tu Pedido</h2>
        <p>Por favor, ingresa los detalles para llevar el sabor de Canelita directamente a tu mesa.</p>
    </div>
    
    <div class="reservas-container">
        <form class="reserva-form" id="formCheckout" novalidate action="procesar_pedido.php" method="POST">
            <div class="form-row">
                <div class="form-group">
                    <label for="nombre">Nombre completo *</label>
                    <input type="text" id="nombre" name="nombre" placeholder="Ej. Juan Pérez" required />
                </div>
                <div class="form-group">
                    <label for="telefono">Teléfono *</label>
                    <input type="tel" id="telefono" name="telefono" placeholder="Ej. 987654321" required />
                </div>
            </div>

            <div class="form-group full">
                <label for="direccion">Dirección completa de envío *</label>
                <input type="text" id="direccion" name="direccion" placeholder="Calle, Número, Referencia" required />
            </div>

            <div class="form-group full">
                <label for="notas">Notas para el repartidor (opcional)</label>
                <textarea id="notas" name="notas" rows="3"></textarea>
            </div>

            <div class="form-group full" style="margin-top: 10px;">
                <label style="margin-bottom: 12px; display: block;">Método de Pago *</label>
                <div class="metodo-pago">
                    <label class="pago-option">
                        <input type="radio" name="metodo_pago" value="efectivo" checked />
                        <strong>Efectivo o Tarjeta en la entrega</strong>
                    </label>
                    <label class="pago-option" style="margin-top: 10px;">
                        <input type="radio" name="metodo_pago" value="yape_plin" />
                        <strong>Yape / Transferencia</strong>
                    </label>
                </div>
            </div>

            <input type="hidden" id="inputCartData" name="cart_data" value="" />

            <button type="submit" id="btnConfirmarPedido" class="btn btn-primary full-width">
                <i class="fas fa-check"></i> Confirmar y Realizar Pedido
            </button>
        </form>

        <div class="reserva-info">
            <h3>Tu Resumen</h3>
            <div id="listaItemsResumen" style="margin-bottom: 24px;">
                </div>

            <ul style="border-top: 1px dashed rgba(255,255,255,0.2); padding-top: 20px;">
                <li style="display: flex; justify-content: space-between;">
                    <span>Subtotal:</span>
                    <span id="resumenSubtotal" style="color: #fff; font-weight: 700;">S/0.00</span>
                </li>
                <li style="display: flex; justify-content: space-between; margin-top: 14px; font-size: 1.25rem;">
                    <strong style="color: var(--canela);">Total:</strong>
                    <strong id="resumenTotal" style="color: var(--canela);">S/0.00</strong>
                </li>
            </ul>
        </div>
    </div>
</section>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        // 1. Recuperar carrito
        const carritoGuardado = JSON.parse(localStorage.getItem('carrito')) || [];
        const listaItemsResumen = document.getElementById('listaItemsResumen');
        const inputCartData = document.getElementById('inputCartData');

        // 2. Validación de seguridad: si no hay nada, volver al menú
        if (carritoGuardado.length === 0) {
            alert("Tu carrito está vacío. Serás redirigido al menú.");
            window.location.href = 'menu.php'; 
            return;
        }

        // 3. Renderizar items y calcular
        let htmlResumen = '';
        let total = 0;

        carritoGuardado.forEach(item => {
            const subtotalItem = item.precio * item.cantidad;
            total += subtotalItem;
            htmlResumen += `
                <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                    <span>${item.cantidad}x ${item.nombre}</span>
                    <span>S/ ${subtotalItem.toFixed(2)}</span>
                </div>`;
        });

        listaItemsResumen.innerHTML = htmlResumen;
        document.getElementById('resumenSubtotal').innerText = 'S/ ' + total.toFixed(2);
        document.getElementById('resumenTotal').innerText = 'S/ ' + total.toFixed(2);
        
        // 4. Inyectar datos al form
        inputCartData.value = JSON.stringify(carritoGuardado);

        // 5. Limpiar carrito tras enviar
        document.getElementById('formCheckout').addEventListener('submit', () => {
            localStorage.removeItem('carrito');
        });
    });
</script>
<script src="js/validaciones.js?v=<?= time() ?>"></script>
<?php require_once 'includes/footer.php'; ?>