<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agenda tu Reservación</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <!-- Se asume que styleAgenda.css está en la ruta correcta -->
    <link rel="stylesheet" href="../views/css/styleAgenda.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin=""/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="icon" href="/favicon.png" type="image/png">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    
<!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '2057411288352776');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=2057411288352776&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->
</head>
<body class="bg-white">

    <?php
    require_once '../models/model_agenda.php';
    
    $model = new AgendaModel();
    $productos = $model->obtenerProductosEvento();
    ?>

    <!-- ========= Botón para Volver al Inicio ========= -->
    <div class="back-button-container">
        <a href="https://taqueriaelmexicano.com.mx" class="btn btn-primary back-button" title="Volver al Inicio">
            <i class="bi bi-house-door-fill"></i>
        </a>
    </div>

    <div class="main-container">
        <!-- ========= Encabezado Rediseñado ========= -->
        <div class="booking-header">
            <h1 class="card-title text-center mb-2">¡Agenda tu <span>TAQUIZA</span>!</h1>
            <p class="text-center text-muted">
                Selecciona tu menú, elige una fecha y hora, y completa tus datos en cuatro sencillos pasos.
            </p>
        </div>

        <!-- ========= Barra de Progreso de Pasos ========= -->
        <div class="steps-progress-container mb-5">
            <div class="step-progress-item active">
                <div class="step-icon">1</div>
                <p class="step-title">Reservación</p>
            </div>
            <div class="step-progress-item">
                <div class="step-icon">2</div>
                <p class="step-title">Tus Datos</p>
            </div>
            <div class="step-progress-item">
                <div class="step-icon">3</div>
                <p class="step-title">Pago</p> </div>
            <div class="step-progress-item">
                <div class="step-icon">4</div>
                <p class="step-title">Confirmación</p>
            </div>
        </div>

        <!-- ========= Tarjeta Principal del Formulario ========= -->
        <div class="booking-card shadow-lg p-4 p-md-5">
            <?php if (isset($mensaje)): ?>
                <div class="alert alert-danger" role="alert">
                    <?php echo htmlspecialchars($mensaje); ?>
                </div>
            <?php endif; ?>

            <form id="agendaForm">
                <!-- ========= PASO 1: Menú y Horario ========= -->
                <div class="step" data-step="1">
                    <h2 class="text-center mb-4">Paso 1: Menú y Horario</h2>
                    
                    <div class="mb-5">
                        <label class="form-label text-start fw-bold d-block mb-3">Selecciona tu Paquete:</label>
                        <div class="row g-4" id="paquetes-container">
                            <?php if (isset($productos) && is_array($productos) && !empty($productos)): ?>
                                <?php foreach ($productos as $producto): ?>
                                    <div class="col-12 col-md-4">
                                        <div class="package-card" data-id="<?php echo htmlspecialchars($producto['id_producto_evento']); ?>">
                                            <div class="package-img" style="background-image: url('/<?php echo htmlspecialchars($producto['foto_url'] ?? 'views/images/default.jpg'); ?>');"></div>
                                            <div class="package-content">
                                                <h5 class="package-title"><?php echo htmlspecialchars($producto['titulo']); ?></h5>
                                                <p class="package-price">$<?php echo htmlspecialchars($producto['precio']); ?></p>
                                                <p class="package-text"><?php echo htmlspecialchars($producto['descripcion']); ?></p>
                                            </div>
                                            <div class="check-icon"><i class="bi bi-check-circle-fill"></i></div>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            <?php else: ?>
                                <p class="text-center">No se encontraron menús de eventos disponibles.</p>
                            <?php endif; ?>
                        </div>
                        <span id="error-menu" class="text-danger mt-1" style="display:none;"></span>
                    </div>
                    
                    <div class="mb-3">
                        <label for="concepto_evento" class="form-label fw-bold">Concepto del Evento:</label>
                        <input type="text" id="concepto_evento" name="concepto_evento" class="form-control" placeholder="Ej. Fiesta de cumpleaños de Juan" maxlength="60" required>
                        <span id="error-concepto" class="text-danger mt-1" style="display:none;"></span>
                    </div>
                    
                    <div class="row g-4 mb-4">
                        <div class="col-md-6">
                            <label for="fecha_evento" class="form-label fw-bold">Fecha de tu Reservación:</label>
                            <input type="text" id="fecha_evento" name="fecha_evento" class="form-control" placeholder="Selecciona una fecha" required>
                            <span id="error-fecha" class="text-danger mt-1" style="display:none;"></span>
                        </div>
                        <div class="col-md-6">
                            <label for="hora_evento" class="form-label fw-bold">Hora del Evento:</label>
                            <select id="hora_evento" name="hora_evento" class="form-select" required>
                                <option value="">Selecciona una hora</option>
                                <?php
                                $horas = [
                                    "12:00 PM", "1:00 PM", "2:00 PM", "3:00 PM", "4:00 PM", "5:00 PM",
                                    "6:00 PM", "7:00 PM", "8:00 PM", "9:00 PM", "10:00 PM"
                                ];
                                foreach ($horas as $hora):
                                    $hora24 = date('H:i', strtotime($hora));
                                ?>
                                    <option value="<?php echo $hora24; ?>"><?php echo $hora; ?></option>
                                <?php endforeach; ?>
                            </select>
                            <span id="error-hora" class="text-danger mt-1" style="display:none;"></span>
                        </div>
                    </div>
                    
                    <div class="d-grid mt-5">
                        <button type="button" id="nextStepBtn" class="btn btn-primary fw-bold">Siguiente</button>
                    </div>
                </div>

                <!-- ========= PASO 2: Tus Datos ========= -->
                <div class="step" data-step="2" style="display:none;">
                    <h2 class="text-center mb-4">Paso 2: Tus Datos</h2>

                    <div class="mb-3">
                        <label for="nombre_cliente" class="form-label fw-bold">Nombre Completo:</label>
                        <input type="text" id="nombre_cliente" name="nombre_cliente" class="form-control" placeholder="Escribe tu nombre completo" required>
                        <span id="error-nombre" class="text-danger mt-1" style="display:none;"></span>
                    </div>

                    <div class="mb-3">
                        <label for="telefono" class="form-label fw-bold">Teléfono de Contacto:</label>
                        <input type="tel" id="telefono" name="telefono" class="form-control" placeholder="Ej. 5512345678" required>
                        <span id="error-telefono" class="text-danger mt-1" style="display:none;"></span>
                    </div>
                    
                    <div class="mb-3">
                        <label for="address_search" class="form-label fw-bold">Busca tu Dirección:</label>
                        <div class="input-group">
                            <input type="text" id="address_search" class="form-control" placeholder="Ej. Calle 123, Colonia, Ciudad">
                            <button class="btn btn-outline-secondary" type="button" id="searchAddressBtn"><i class="bi bi-search"></i></button>
                            <button class="btn btn-primary" type="button" id="locateButton"><i class="bi bi-geo-alt"></i></button>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="direccion_texto" class="form-label fw-bold">Dirección Completa (Selecciona en el mapa):</label>
                        <textarea id="direccion_texto" name="direccion_texto" class="form-control" rows="3" placeholder="Usa el mapa o el buscador para encontrar tu dirección" readonly required></textarea>
                        <span id="error-direccion" class="text-danger mt-1" style="display:none;"></span>
                    </div>
                    
                    <div id="map" class="mb-3" style="height: 300px;"></div>

                    <div class="mb-3">
                        <label for="referencia" class="form-label fw-bold">Referencia (Opcional):</label>
                        <input type="text" id="referencia" name="referencia" class="form-control" placeholder="Ej. A un lado de la farmacia del ahorro">
                        <span id="error-referencia" class="text-danger mt-1" style="display:none;"></span>
                    </div>

                    <div class="mb-3">
                        <label for="anticipo" class="form-label fw-bold">Anticipo:</label>
                        <div class="input-group">
                            <span class="input-group-text">$</span>
                            <input type="number" id="anticipo" name="anticipo" class="form-control" min="0" value="0" step="100">
                            <span class="input-group-text">MXN</span>
                        </div>
                        <span id="mensaje-anticipo" class="form-text mt-1" style="display:none;"></span>
                    </div>

                    <div class="mb-3">
                        <label for="notas" class="form-label fw-bold">Notas Adicionales (Opcional):</label>
                        <textarea id="notas" name="notas" class="form-control" rows="3" placeholder="Cualquier información extra que desees agregar"></textarea>
                        <span id="error-notas" class="text-danger mt-1" style="display:none;"></span>
                    </div>

                    <div class="d-flex justify-content-between mt-5">
                        <button type="button" id="prevStepBtn" class="btn btn-secondary fw-bold">Anterior</button>
                        <button type="button" id="nextStepBtn2" class="btn btn-primary fw-bold">Siguiente</button>
                    </div>
                </div>

                <!-- ========= PASO 3: Pago ========= -->
                <div class="step" data-step="3" style="display:none;">
                    <h2 class="text-center mb-4">Paso 3: Pago</h2>
                    <p class="text-center text-muted mb-4">
                        Revisa los detalles de tu reservación y procede a pagar el anticipo.
                    </p>
                    <div class="card mb-4 summary-card">
                        <div class="card-body">
                            <h5 class="card-title fw-bold">Resumen de la Reservación</h5>
                            <ul class="list-unstyled">
                                <li><strong>Paquete:</strong> <span id="summary-menu"></span></li>
                                <li><strong>Fecha y Hora:</strong> <span id="summary-datetime"></span></li>
                                <li><strong>Concepto:</strong> <span id="summary-concept"></span></li>
                                <li><strong>Dirección:</strong> <span id="summary-address"></span></li>
                                <li><strong>Anticipo Requerido:</strong> <span id="summary-deposit"></span></li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-center gap-3 mt-5">
                        <button type="button" id="nextStepBtn3" class="btn btn-primary fw-bold">Pagar con Mercado Pago</button>
                        <button type="button" id="cashBtn" class="btn btn-secondary fw-bold">Reservar y Pagar en Sucursal</button>
                    </div>
                </div>

                <!-- ========= PASO 4: Confirmación ========= -->
                <div class="step" data-step="4" style="display:none;">
                    <div class="confirmation-container">
                        <div id="downloadable-content">
                            <div id="confirmation-header" class="text-center mb-4">
                                <img src="/views/imgs/logo.png" alt="Logo de la Taquiza" style="max-width: 150px; height: auto; margin-bottom: 15px;">
                                <h3 class="text-primary mb-2">¡Aquí está tu Reservación!</h3>
                                <p class="text-muted">Guarda este comprobante para futuras referencias.</p>
                            </div>
                            
                            <div id="confirmation-details">
                                <div class="detail-item">
                                    <div class="detail-icon bg-primary"><i class="bi bi-file-text-fill"></i></div>
                                    <div class="detail-content">
                                        <strong>Número de Agenda:</strong>
                                        <p id="id-agenda-display"></p>
                                    </div>
                                </div>
                                <div class="detail-item">
                                    <div class="detail-icon bg-info"><i class="bi bi-card-checklist"></i></div>
                                    <div class="detail-content">
                                        <strong>Menú Seleccionado:</strong>
                                        <p id="menu-display"></p>
                                    </div>
                                </div>
                                <div class="detail-item">
                                    <div class="detail-icon bg-warning"><i class="bi bi-calendar-event-fill"></i></div>
                                    <div class="detail-content">
                                        <strong>Fecha y Hora:</strong>
                                        <p id="fecha-hora-display"></p>
                                    </div>
                                </div>
                                <div class="detail-item">
                                    <div class="detail-icon bg-success"><i class="bi bi-card-text"></i></div>
                                    <div class="detail-content">
                                        <strong>Concepto:</strong>
                                        <p id="concepto-display"></p>
                                    </div>
                                </div>
                                <div class="detail-item">
                                    <div class="detail-icon bg-danger"><i class="bi bi-cash-stack"></i></div>
                                    <div class="detail-content">
                                        <strong>Anticipo pagado:</strong>
                                        <p id="anticipo-display"></p>
                                    </div>
                                </div>
                                <div class="detail-item">
                                    <div class="detail-icon bg-secondary"><i class="bi bi-wallet2"></i></div>
                                    <div class="detail-content">
                                        <strong>Método de Pago:</strong>
                                        <p id="metodo-pago-display"></p>
                                    </div>
                                </div>
                                <div class="detail-item">
                                    <div class="detail-icon bg-primary"><i class="bi bi-person-fill"></i></div>
                                    <div class="detail-content">
                                        <strong>Nombre:</strong>
                                        <p id="nombre-display"></p>
                                    </div>
                                </div>
                                <div class="detail-item">
                                    <div class="detail-icon bg-info"><i class="bi bi-telephone-fill"></i></div>
                                    <div class="detail-content">
                                        <strong>Teléfono:</strong>
                                        <p id="telefono-display"></p>
                                    </div>
                                </div>
                                <div class="detail-item">
                                    <div class="detail-icon bg-info"><i class="bi bi-geo-alt-fill"></i></div>
                                    <div class="detail-content">
                                        <strong>Dirección:</strong>
                                        <p id="direccion-display"></p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-center mt-4 gap-3">
                            <button type="button" id="downloadBtn" class="btn btn-success fw-bold">
                                <i class="bi bi-download me-2"></i> Descargar Comprobante
                            </button>
                            <button type="button" id="whatsappBtn" class="btn btn-info fw-bold text-white">
                                <i class="bi bi-whatsapp me-2"></i> Enviar a WhatsApp
                            </button>
                        </div>
                    </div>
                </div>
                
                <input type="hidden" id="id_producto_evento" name="id_producto_evento" required>
                <input type="hidden" id="precio_producto_evento" name="precio_producto_evento">
                <input type="hidden" id="latitud_evento" name="latitud_evento">
                <input type="hidden" id="longitud_evento" name="longitud_evento">
            </form>
        </div>
    </div>

    <!-- ========= Modal de Conflicto ========= -->
    <div class="modal fade" id="conflictoModal" tabindex="-1" aria-labelledby="conflictoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title" id="conflictoModalLabel">
                        <i class="bi bi-exclamation-triangle-fill me-2"></i> ¡Horario Ocupado!
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center p-4">
                    <div class="mb-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" fill="#dc3545" class="bi bi-calendar-x" viewBox="0 0 16 16">
                            <path d="M6.146 7.146a.5.5 0 0 1 .708 0L8 8.293l1.146-1.147a.5.5 0 1 1 .708.708L8.707 9l1.147 1.146a.5.5 0 0 1-.708.708L8 9.707l-1.146 1.147a.5.5 0 0 1-.708-.708L7.293 9 6.146 7.854a.5.5 0 0 1 0-.708z"/>
                            <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
                        </svg>
                    </div>
                    <p class="lead">Lo sentimos, esta fecha y hora ya están reservadas.</p>
                    <p class="text-muted">Por favor, selecciona otro horario o día para tu evento y vuelve a intentarlo.</p>
                </div>
                <div class="modal-footer justify-content-center border-0">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Entendido</button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
    <script src="https://sdk.mercadopago.com/js/v2"></script>  
    <script src="../views/js/agenda.js"></script>

</body>
</html>

