<?php
// views/miagenda.php

// Incluir el modelo para poder hacer la consulta
require_once '../models/model_agenda.php';

$mensaje_error = '';
$datos_agenda = null;

// 1. Obtener el ID de agenda de la URL
$id_agenda = isset($_GET['id_agenda']) ? intval($_GET['id_agenda']) : 0;

if ($id_agenda <= 0) {
    $mensaje_error = 'Número de agenda no válido.';
} else {
    try {
        $model = new AgendaModel();
        
        // 2. Obtener los detalles completos de la agenda
        $datos_agenda = $model->obtenerAgendaPorIdConDetalles($id_agenda);

        if (!$datos_agenda) {
            $mensaje_error = 'No se encontró la agenda con ese ID.';
        }

    } catch (Exception $e) {
        $mensaje_error = 'Error al cargar los datos: ' . $e->getMessage();
    }
}
?><!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Confirmación de Agenda</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/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../views/css/styleAgenda.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>

<!-- 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>
    <div class="main-container">
        <div class="booking-card shadow-lg">
            <?php if ($mensaje_error): ?>
                <div class="alert alert-danger m-4" role="alert">
                    <?php echo htmlspecialchars($mensaje_error); ?>
                </div>
            <?php else: ?>
                <div class="step" data-step="4">
                    <div class="header-actions">
                        <button type="button" class="btn btn-exit" data-bs-toggle="modal" data-bs-target="#exitModal">
                            <i class="bi bi-box-arrow-right me-1"></i> Salir
                        </button>
                    </div>
                    
                    <div class="confirmation-container p-4 p-md-5">
                        <div id="downloadable-content" class="rounded">
                            <div id="confirmation-header" class="confirmation-header">
                                <img src="/views/imgs/logo.png" alt="Logo de la Taquiza">
                                <h3>¡Reservación Confirmada!</h3>
                                <p>Guarda este comprobante para futuras referencias</p>
                            </div>
                            
                            <div class="details-container">
                                <div class="details-grid">
                                    <div class="detail-item">
                                        <div class="detail-icon text-primary">
                                            <i class="bi bi-file-text"></i>
                                        </div>
                                        <div class="detail-content">
                                            <strong>Número de Agenda:</strong>
                                            <p id="id-agenda-display" class="folio-number"><?php echo htmlspecialchars($datos_agenda['id_agenda']); ?></p>
                                        </div>
                                    </div>
                                    
                                    <div class="detail-item">
                                        <div class="detail-icon text-info">
                                            <i class="bi bi-card-checklist"></i>
                                        </div>
                                        <div class="detail-content">
                                            <strong>Paquete Seleccionado:</strong>
                                            <p id="menu-display"><?php echo htmlspecialchars($datos_agenda['titulo_producto']); ?></p>
                                        </div>
                                    </div>
                                    
                                    <div class="detail-item">
                                        <div class="detail-icon text-warning">
                                            <i class="bi bi-calendar-event"></i>
                                        </div>
                                        <div class="detail-content">
                                            <strong>Fecha y Hora:</strong>
                                            <p id="fecha-hora-display"><?php echo htmlspecialchars($datos_agenda['fecha_evento']) . ' a las ' . htmlspecialchars($datos_agenda['hora_evento']); ?></p>
                                        </div>
                                    </div>
                                    
                                    <div class="detail-item">
                                        <div class="detail-icon text-success">
                                            <i class="bi bi-chat-text"></i>
                                        </div>
                                        <div class="detail-content">
                                            <strong>Concepto:</strong>
                                            <p id="concepto-display"><?php echo htmlspecialchars($datos_agenda['concepto']); ?></p>
                                        </div>
                                    </div>
                                    
                                    <div class="detail-item">
                                        <div class="detail-icon text-danger">
                                            <i class="bi bi-cash-coin"></i>
                                        </div>
                                        <div class="detail-content">
                                            <strong>Anticipo:</strong>
                                            <p id="anticipo-display">
                                                $<?php echo number_format($datos_agenda['anticipo'], 2) . ' MXN'; ?>
                                                <?php if ($datos_agenda['anticipo'] > 0): ?>
                                                    <span class="badge-status badge-paid">Abonado</span>
                                                <?php else: ?>
                                                    <span class="badge-status badge-pending">Pendiente</span>
                                                <?php endif; ?>
                                            </p>
                                        </div>
                                    </div>
                                    
                                    <div class="detail-item">
                                        <div class="detail-icon text-secondary">
                                            <i class="bi bi-wallet2"></i>
                                        </div>
                                        <div class="detail-content">
                                            <strong>Método de Pago:</strong>
                                            <p id="metodo-pago-display">
                                                <?php
                                                    if ($datos_agenda['metodo_pago'] === 'mercadopago') {
                                                        echo 'Mercado Pago';
                                                    } else if ($datos_agenda['metodo_pago'] === 'cash') {
                                                        echo 'Efectivo en Sucursal';
                                                    } else {
                                                        echo 'No especificado';
                                                    }
                                                ?>
                                            </p>
                                        </div>
                                    </div>
                                    
                                    <div class="detail-item">
                                        <div class="detail-icon text-primary">
                                            <i class="bi bi-person"></i>
                                        </div>
                                        <div class="detail-content">
                                            <strong>Nombre:</strong>
                                            <p id="nombre-display"><?php echo htmlspecialchars($datos_agenda['nombre_cliente']); ?></p>
                                        </div>
                                    </div>
                                    
                                    <div class="detail-item">
                                        <div class="detail-icon text-info">
                                            <i class="bi bi-telephone"></i>
                                        </div>
                                        <div class="detail-content">
                                            <strong>Teléfono:</strong>
                                            <p id="telefono-display"><?php echo htmlspecialchars($datos_agenda['telefono']); ?></p>
                                        </div>
                                    </div>
                                    
                                    <div class="detail-item">
                                        <div class="detail-icon text-info">
                                            <i class="bi bi-geo-alt"></i>
                                        </div>
                                        <div class="detail-content">
                                            <strong>Dirección:</strong>
                                            <p id="direccion-display"><?php echo htmlspecialchars($datos_agenda['direccion_texto']); ?></p>
                                            <a href="https://www.google.com/maps/search/?api=1&query=<?php echo urlencode($datos_agenda['direccion_texto']); ?>" target="_blank" class="map-link">
                                                <i class="bi bi-map me-1"></i> Ver en Google Maps
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="important-note">
                                    <i class="bi bi-info-circle me-2"></i> Por favor conserva este comprobante, es tu garantía de reservación.
                                </div>
                            </div>
                        </div>
                        
                        <div class="action-buttons mt-4">
                            <button type="button" id="downloadBtn" class="btn btn-download">
                                <i class="bi bi-download me-2"></i> Descargar Comprobante
                            </button>
                            <button type="button" id="whatsappBtn" class="btn btn-whatsapp">
                                <i class="bi bi-whatsapp me-2"></i> Enviar a WhatsApp
                            </button>
                        </div>
                    </div>
                </div>
            <?php endif; ?>
        </div>
    </div>

    <!-- Modal de Salida -->
    <div class="modal fade" id="exitModal" tabindex="-1" aria-labelledby="exitModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exitModalLabel"><i class="bi bi-exclamation-triangle me-2"></i> Importante</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>¿Ya descargaste y enviaste tu comprobante por WhatsApp?</p>
                    <p class="mb-0">Es importante que guardes tu comprobante para garantizar tu reservación.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-back btn-modal" data-bs-dismiss="modal">Regresar</button>
                    <button type="button" class="btn btn-done btn-modal" id="confirmExit">Ya lo hice</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const downloadableContent = document.getElementById('downloadable-content');
            const downloadBtn = document.getElementById('downloadBtn');
            const whatsappBtn = document.getElementById('whatsappBtn');
            const confirmExitBtn = document.getElementById('confirmExit');
            const idAgendaDisplay = document.getElementById('id-agenda-display');
            const menuDisplay = document.getElementById('menu-display');
            const fechaHoraDisplay = document.getElementById('fecha-hora-display');
            const conceptoDisplay = document.getElementById('concepto-display');
            const anticipoDisplay = document.getElementById('anticipo-display');
            const metodoPagoDisplay = document.getElementById('metodo-pago-display');
            const nombreDisplay = document.getElementById('nombre-display');
            const telefonoDisplay = document.getElementById('telefono-display');
            const direccionDisplay = document.getElementById('direccion-display');
            
            if (downloadBtn) {
                downloadBtn.addEventListener('click', async function() {
                    this.style.display = 'none';
                    const canvas = await html2canvas(downloadableContent, { scale: 2 });
                    const image = canvas.toDataURL('image/png', 1.0);
                    const link = document.createElement('a');
                    link.download = `reservacion_${idAgendaDisplay.textContent}.png`;
                    link.href = image;
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                    this.style.display = 'block';
                });
            }

            if (whatsappBtn) {
                whatsappBtn.addEventListener('click', function() {
                    const id_agenda = idAgendaDisplay.textContent;
                    const menu = menuDisplay.textContent;
                    const fecha_hora = fechaHoraDisplay.textContent;
                    const concepto = conceptoDisplay.textContent;
                    const anticipo = anticipoDisplay.textContent;
                    const metodo_pago = metodoPagoDisplay.textContent;
                    const nombre = nombreDisplay.textContent;
                    const telefono = telefonoDisplay.textContent;
                    const direccion = direccionDisplay.textContent;

                    const message = `🎉 *¡Hola! Aquí está tu reservación de TAQUIZA* 🎉\n` +
                                    `\n` +
                                    `*Número de Agenda:* ${id_agenda}\n` +
                                    `*Paquete Seleccionado:* ${menu}\n` +
                                    `*Fecha y Hora:* ${fecha_hora}\n` +
                                    `*Concepto del Evento:* ${concepto}\n` +
                                    `*Dirección:* ${direccion}\n` +
                                    `*Anticipo Pagado:* ${anticipo}\n` +
                                    `*Método de Pago:* ${metodo_pago}\n` +
                                    `*Nombre:* ${nombre}\n` +
                                    `*Teléfono:* ${telefono}\n` +
                                    `\n` +
                                    `---` +
                                    `\n` +
                                    `¡Gracias por tu reserva! Un miembro de nuestro equipo se pondrá en contacto contigo pronto. 😊`;
                                    
                    const whatsappURL = `https://wa.me/527472603325?text=${encodeURIComponent(message)}`;
                    window.open(whatsappURL, '_blank');
                });
            }
            
            if (confirmExitBtn) {
                confirmExitBtn.addEventListener('click', function() {
                    window.location.href = 'https://taqueriaelmexicano.com.mx';
                });
            }
        });
    </script>
</body>
</html>