<?php
// confirmacion_pedido.php
require_once '../models/model_pedido.php';
require_once '../models/model_detalle_pedido.php';
require_once '../models/model_config_envio.php';

session_start();

$pedidoModel = new Pedido();
$detalleModel = new DetallePedido();

$idPedido = $_GET['id'] ?? null;
$pedido = $pedidoModel->getPedidoById($idPedido);

// Obtener detalles del pedido de la base de datos
$detalles = $detalleModel->getDetallesByPedidoId($idPedido);

// Si no hay detalles en BD pero hay en sesión (para visualización temporal)
if (empty($detalles) && !empty($_SESSION['cartItems'])) {
    $sessionCart = json_decode($_SESSION['cartItems'], true);
    $detalles = array_map(function ($item) {
        return [
            'titulo_producto' => $item['title'] ?? $item['name'] ?? '',
            'cantidad' => $item['quantity'] ?? $item['qty'] ?? 1,
            'precio_unitario' => $item['price'] ?? $item['precio'] ?? 0.00
        ];
    }, $sessionCart);
}

if (!$pedido) {
    header("Location: error_pedido.php");
    exit();
}

// Obtener coordenadas
$latitude = $pedido['latitud'] ?? null;
$longitude = $pedido['longitud'] ?? null;
$isDelivery = $pedido['envio_dom'] ?? false;

$metodo_pago = strtolower($pedido['metodo_pago'] ?? 'cash');
$estado_pago = strtoupper($pedido['estado_pago'] ?? $pedido['estado'] ?? 'PENDIENTE');
$estado_entrega = strtoupper($pedido['estado_entrega'] ?? 'PENDIENTE');
$whatsapp_enviado = (int)($pedido['whatsapp_enviado'] ?? 0);
$costo_envio = (float)($pedido['costo_envio_aplicado'] ?? 0);
$subtotal = (float)($pedido['subtotal_productos'] ?? $pedido['monto_total']);
$envioCfg = (new ModelConfigEnvio())->getConfig();
$whatsappNumero = preg_replace('/\D+/', '', $envioCfg['telefono_whatsapp'] ?? '527472603325');
?>

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pedido Confirmado - Taquería El Mexicano</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="css/confirmacion.css">

    <style>
        /* CSS CORREGIDO */
        :root {
            --dominant-color: #B92117;
            --dominant-text: #FFFFFF;
            --yellow: #D4AC0D;
            --orange: #D35400;
            --white: #FFFFFF;
            --light-gray: #F5F5F5;
            --dark-gray: #333333;
            --success-green: #28a745;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--light-gray);
            color: var(--dark-gray);
            margin: 0;
            padding: 0;
        }

        .confirmation-container {
            max-width: 900px;
            /* Aumentado para ordenadores */
            margin: 50px auto;
            padding: 30px;
            background: var(--white);
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        /* Estilo para pantalla completa en PC */
        @media (min-width: 769px) {
            .confirmation-container {
                max-width: 80%;
                width: 90%;
            }
        }

        .success-animation {
            font-size: 80px;
            color: var(--success-green);
            margin-bottom: 20px;
            animation: bounce 1s infinite alternate;
        }

        @keyframes bounce {
            from {
                transform: translateY(0);
            }

            to {
                transform: translateY(-15px);
            }
        }

        h1 {
            color: var(--dominant-color);
            margin-bottom: 20px;
            font-size: 2.5em;
            /* Aumentado para PC, se ajustará en móviles */
        }

        p {
            font-size: 1.1em;
            /* Mayor legibilidad */
        }

        .order-summary {
            background: var(--light-gray);
            border-radius: 10px;
            padding: 25px;
            /* Más padding para espacio */
            margin: 25px 0;
            text-align: left;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            /* Espacio entre columnas */
        }

        .order-detail {
            margin-bottom: 0;
            padding-bottom: 15px;
            border-bottom: 1px solid #ddd;
        }

        .order-detail:last-child {
            border-bottom: none;
        }

        .order-summary .items-list {
            grid-column: 1 / -1;
            /* Ocupa todo el ancho */
        }

        .detail-label {
            font-weight: 600;
            color: var(--dark-gray);
            font-size: 1.1em;
            /* Aumentado */
            display: block;
            /* Para que ocupe toda la línea */
            margin-bottom: 5px;
        }

        .detail-value {
            color: #555;
            font-size: 1em;
            /* Aumentado */
        }

        .delivery-method {
            display: inline-block;
            padding: 5px 15px;
            border-radius: 20px;
            font-weight: 600;
            margin: 10px 0;
        }

        .delivery {
            background-color: #d4edda;
            color: #155724;
        }

        .pickup {
            background-color: #fff3cd;
            color: #856404;
        }

        .payment-method {
            font-weight: 600;
            margin: 15px 0;
        }

        .cash-payment {
            color: var(--dominant-color);
        }

        .mp-payment {
            color: var(--yellow);
        }

        .pending {
            color: #ffc107;
        }
        
        .paid {
            color: var(--success-green);
        }

        .whatsapp-alert {
            display: flex;
            gap: 16px;
            align-items: flex-start;
            background: #e8f5e9;
            border: 2px solid #25D366;
            border-radius: 12px;
            padding: 16px 20px;
            margin: 20px 0;
            text-align: left;
        }

        .whatsapp-alert i {
            font-size: 36px;
            color: #25D366;
        }

        .whatsapp-alert strong {
            color: #1b5e20;
            display: block;
            margin-bottom: 6px;
        }

        .whatsapp-alert p {
            margin: 0;
            font-size: 0.95em;
        }

        #whatsappBtn.pulse {
            animation: pulseWa 1.2s ease-in-out infinite;
        }

        @keyframes pulseWa {
            0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
            50% { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); }
        }

        .action-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
            margin-top: 30px;
        }

        .btn {
            padding: 15px 30px;
            /* Aumentado para móviles */
            border-radius: 30px;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            font-size: 1em;
            /* Aumentado */
            white-space: nowrap;
            /* Evita que el texto se parta */
        }

        .btn i {
            margin-right: 8px;
            font-size: 1.2em;
            /* Iconos más grandes */
        }

        .btn-primary {
            background-color: var(--dominant-color);
            color: var(--white);
            border: none;
        }

        .btn-primary:hover {
            background-color: var(--orange);
        }

        .btn-secondary {
            background-color: var(--white);
            color: var(--dominant-color);
            border: 2px solid var(--dominant-color);
        }

        .btn-secondary:hover {
            background-color: var(--light-gray);
        }

        /* Estilos para los mapas */
        #delivery-map,
        #store-map {
            z-index: 1;
            background-color: #f8f9fa;
        }

        /* Estilo para los enlaces de mapas */
        .map-options {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }

        .map-link {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 10px 15px;
            background-color: #B92117;
            color: white;
            border-radius: 5px;
            text-decoration: none;
            font-size: 1em;
            transition: background-color 0.3s;
        }

        .map-link:hover {
            background-color: #9a1b14;
        }

        .map-link i {
            font-size: 1.2em;
        }

        .item-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 1em;
            /* Tamaño de fuente para productos */
        }

        .order-detail .item-row span:last-child {
            font-weight: 600;
        }

        /* Layout de 2 columnas en PC y una sola en móviles */
        @media (min-width: 769px) {
            .order-summary {
                grid-template-columns: 1fr 1fr;
            }

            .order-summary .order-detail:nth-child(4) {
                grid-column: 1 / 2;
            }

            .order-summary .order-detail:nth-child(5) {
                grid-column: 2 / 3;
            }
        }

        @media (max-width: 768px) {
            .confirmation-container {
                margin: 20px 10px;
                padding: 20px;
            }

            h1 {
                font-size: 2em;
            }

            .order-summary {
                padding: 15px;
            }

            .action-buttons {
                flex-direction: column;
                gap: 10px;
            }

            .btn {
                width: 100%;
                font-size: 1em;
            }

            .map-options .map-link {
                width: 100%;
                text-align: center;
            }
        }
    </style>
    
<!-- 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>
    <!-- Botón Salir -->
    <button class="exit-button" onclick="mostrarModal()">
        <i class="fas fa-sign-out-alt"></i> Salir
    </button>

    <!-- Modal -->
    <div id="exitModal" class="modal">
        <div class="modal-content">
            <h2>¡Atención!</h2>
            <p id="exitModalText">Para que la taquería reciba tu pedido debes enviarlo por WhatsApp. ¿Ya lo enviaste?</p>
            <div class="modal-buttons">
                <button class="modal-btn modal-btn-cancel" onclick="cerrarModal()">Volver al pedido</button>
                <button class="modal-btn modal-btn-whatsapp" onclick="document.getElementById('whatsappBtn').click(); cerrarModal();">Enviar WhatsApp ahora</button>
                <button class="modal-btn modal-btn-confirm" onclick="redirigirAlInicio()">Sí, ya lo envié</button>
            </div>
        </div>
    </div>
    
    <div class="confirmation-container">
        <div class="success-animation">
            <i class="fas fa-check-circle"></i>
        </div>

        <h1>¡Pedido Confirmado!</h1>
        <p>Tu pedido ha sido recibido con éxito. A continuación los detalles:</p>

        <?php if (!$whatsapp_enviado): ?>
        <div class="whatsapp-alert" id="whatsappAlert" role="alert">
            <i class="fab fa-whatsapp"></i>
            <div>
                <strong>Paso obligatorio para despachar tu pedido</strong>
                <p>Debes enviar este pedido por WhatsApp para que la taquería lo reciba. Sin este paso, no verán tu orden.</p>
            </div>
        </div>
        <?php endif; ?>

        <div class="order-summary">
            <div class="order-detail">
                <span class="detail-label">Número de Pedido:</span>
                <span class="detail-value">#<?= str_pad($pedido['id_pedido'], 6, '0', STR_PAD_LEFT) ?></span>
            </div>

            <div class="order-detail">
                <span class="detail-label">Fecha:</span>
                <span class="detail-value"><?= date('d/m/Y H:i', strtotime($pedido['fecha_pedido'])) ?></span>
            </div>

            <div class="order-detail">
                <span class="detail-label">Método de Entrega:</span>
                <div class="delivery-method <?= $pedido['envio_dom'] ? 'delivery' : 'pickup' ?>">
                    <?= $pedido['envio_dom'] ? 'Envío a Domicilio' : 'Recoger en Sucursal' ?>
                </div>
            </div>
            
            <?php if ($pedido['envio_dom']): ?>
                <div class="order-detail">
                    <span class="detail-label">Dirección:</span>
                    <span class="detail-value"><?= htmlspecialchars($pedido['direccion_texto']) ?></span>
                    <?php if (!empty($pedido['referencia'])): ?>
                        <br><span class="detail-label">Referencias:</span>
                        <span class="detail-value"><?= htmlspecialchars($pedido['referencia']) ?></span>
                    <?php endif; ?>

                    <?php if ($latitude && $longitude): ?>
                        <!-- Contenedor del mapa con tamaño definido -->
                        <div id="delivery-map" style="height: 300px; width: 100%; margin: 15px 0; border-radius: 8px; border: 1px solid #ddd;"></div>
                        <div class="map-options">
                            <a href="https://www.openstreetmap.org/?mlat=<?= $latitude ?>&mlon=<?= $longitude ?>#map=17/<?= $latitude ?>/<?= $longitude ?>"
                                class="map-link" target="_blank">
                                <i class="fas fa-map-marker-alt"></i> Ver en OpenStreetMap
                            </a>
                            <a href="https://maps.google.com/?q=<?= $latitude ?>,<?= $longitude ?>"
                                class="map-link" target="_blank">
                                <i class="fab fa-google"></i> Ver en Google Maps
                            </a>
                        </div>
                    <?php endif; ?>
                </div>
            <?php else: ?>
                <div class="order-detail">
                    <span class="detail-label">Dirección del local:</span>
                    <span class="detail-value">Llano Grande 39001, Col zona industrial, 39016 Chilpancingo de los Bravo, Gro.</span>
                    <div id="store-map" style="height: 300px; width: 100%; margin: 15px 0; border-radius: 8px; border: 1px solid #ddd;"></div>
                </div>
            <?php endif; ?>

            <div class="order-detail">
                <span class="detail-label">Estado del pedido:</span>
                <span class="detail-value"><?= htmlspecialchars($estado_entrega) ?> · Pago: <?= htmlspecialchars($estado_pago) ?></span>
            </div>

            <div class="order-detail">
                <span class="detail-label">Método de Pago:</span>
                <?php if ($metodo_pago === 'cash'): ?>
                    <div class="payment-method cash-payment">
                        <i class="fas fa-money-bill-wave"></i> Efectivo
                    </div>
                    <p style="color: var(--dominant-color); font-weight: 600;">
                        <i class="fas fa-exclamation-circle"></i> PAGAR EN LA SUCURSAL: $<?= number_format($pedido['monto_total'], 2) ?> MXN
                    </p>
                <?php elseif ($estado_pago === 'PAGADO'): ?>
                    <div class="payment-method mp-payment">
                        <i class="fas fa-credit-card"></i> Mercado Pago
                    </div>
                    <div class="payment-method paid">
                        <i class="fas fa-check-circle"></i> Pago Realizado
                    </div>
                <?php else: ?>
                    <div class="payment-method mp-payment">
                        <i class="fas fa-credit-card"></i> Mercado Pago
                    </div>
                    <div class="payment-method pending">
                        <i class="fas fa-clock"></i> Pendiente de pago
                    </div>
                <?php endif; ?>
            </div>

            <div class="order-detail">
                <span class="detail-label">Productos:</span>
                <div class="items-list">
                    <?php foreach ($detalles as $item): ?>
                        <div class="item-row">
                            <span><?= htmlspecialchars($item['titulo_producto']) ?> x<?= $item['cantidad'] ?></span>
                            <span>$<?= number_format($item['precio_unitario'] * $item['cantidad'], 2) ?></span>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>

            <?php if ($costo_envio > 0 || $subtotal != $pedido['monto_total']): ?>
            <div class="order-detail">
                <span class="detail-label">Subtotal productos:</span>
                <span class="detail-value">$<?= number_format($subtotal, 2) ?> MXN</span>
            </div>
            <?php if ($costo_envio > 0): ?>
            <div class="order-detail">
                <span class="detail-label">Envío a domicilio:</span>
                <span class="detail-value">$<?= number_format($costo_envio, 2) ?> MXN</span>
            </div>
            <?php endif; ?>
            <?php endif; ?>

            <div class="order-detail" style="text-align: right;">
                <span class="detail-label">Total:</span>
                <span class="detail-value" style="font-weight: 600; font-size: 18px;">
                    $<?= number_format($pedido['monto_total'], 2) ?> MXN
                </span>
            </div>
        </div>

        <div class="action-buttons">
            <button id="downloadBtn" class="btn btn-secondary">
                <i class="fas fa-download"></i> Descargar Comprobante
            </button>
            <button id="whatsappBtn" class="btn btn-primary">
                <i class="fab fa-whatsapp"></i> Enviar por WhatsApp
            </button>
        </div>
    </div>

    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Inicialización de mapa de entrega
            if (document.getElementById('delivery-map')) {
                const map = L.map('delivery-map').setView([<?= $latitude ?>, <?= $longitude ?>], 17);
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                }).addTo(map);

                const deliveryIcon = L.icon({
                    iconUrl: 'https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/images/marker-icon.png',
                    iconSize: [25, 41],
                    iconAnchor: [12, 41],
                    popupAnchor: [1, -34]
                });

                L.marker([<?= $latitude ?>, <?= $longitude ?>], {
                        icon: deliveryIcon
                    })
                    .addTo(map)
                    .bindPopup("Ubicación de entrega")
                    .openPopup();
                
                setTimeout(() => { map.invalidateSize(); }, 100);
            }

            // Inicialización de mapa de sucursal
            if (document.getElementById('store-map')) {
                const storeMap = L.map('store-map').setView([17.573598, -99.515635], 17);
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '&copy; OpenStreetMap'
                }).addTo(storeMap);

                const storeIcon = L.icon({
                    iconUrl: 'https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/images/marker-icon.png',
                    iconSize: [25, 41],
                    iconAnchor: [12, 41],
                    popupAnchor: [1, -34]
                });

                L.marker([17.573598, -99.515635], {
                        icon: storeIcon
                    })
                    .addTo(storeMap)
                    .bindPopup("Taquería El Mexicano")
                    .openPopup();

                setTimeout(() => { storeMap.invalidateSize(); }, 100);
            }
        });

        document.getElementById('downloadBtn').addEventListener('click', function() {
            html2canvas(document.querySelector('.confirmation-container'), {
                scale: 2,
                useCORS: true,
                allowTaint: true
            }).then(canvas => {
                const link = document.createElement('a');
                link.download = `pedido-<?= $pedido['id_pedido'] ?>-<?= date('YmdHis') ?>.png`;
                link.href = canvas.toDataURL('image/png');
                link.click();
            }).catch(err => {
                console.error('Error al generar imagen:', err);
                alert('Error al generar el comprobante');
            });
        });

        const WHATSAPP_NUMERO = '<?= $whatsappNumero ?>';
        const ID_PEDIDO = <?= (int)$pedido['id_pedido'] ?>;
        let whatsappMarcado = <?= $whatsapp_enviado ? 'true' : 'false' ?>;

        function buildWhatsappMessage() {
            const itemsList = <?= json_encode(array_map(function ($item) {
                                return [
                                    'name' => $item['titulo_producto'],
                                    'qty' => $item['cantidad'],
                                    'price' => $item['precio_unitario']
                                ];
                            }, $detalles)) ?>;

            const totalFormatted = new Intl.NumberFormat('es-MX', {
                style: 'currency',
                currency: 'MXN'
            }).format(<?= $pedido['monto_total'] ?>);

            let message = `🍴 *Pedido #<?= $pedido['id_pedido'] ?> - Taquería El Mexicano* 🚀\n\n`;
            message += `📅 *Fecha:* <?= date('d/m/Y H:i', strtotime($pedido['fecha_pedido'])) ?>\n`;
            message += `👤 *Cliente:* <?= addslashes($pedido['nombre_cliente']) ?>\n`;
            message += `📞 *Teléfono:* <?= $pedido['telefono'] ?>\n`;
            message += `🚚 *Método:* <?= $pedido['envio_dom'] ? 'Envío a domicilio 🏠' : 'Recoger en sucursal 🏪' ?>\n\n`;

            <?php if ($pedido['envio_dom']) { ?>
                message += `📍 *Dirección:*\n<?= addslashes($pedido['direccion_texto']) ?>\n`;
                <?php if (!empty($pedido['referencia'])) { ?>
                    message += `🔍 *Referencias:*\n<?= addslashes($pedido['referencia']) ?>\n`;
                <?php } ?>
                <?php if ($latitude && $longitude) { ?>
                    message += `🗺️ *Ubicación:*\nhttps://maps.google.com/?q=<?= $latitude ?>,<?= $longitude ?>\n`;
                <?php } ?>
            <?php } ?>

            <?php if ($costo_envio > 0): ?>
            message += `🛵 *Envío a domicilio:* $<?= number_format($costo_envio, 2) ?> MXN\n`;
            <?php endif; ?>
            message += `\n💵 *Total:* ${totalFormatted}\n\n`;
            message += `🍽️ *Productos:*\n${itemsList.map(item =>
                `➡️ ${item.name} x${item.qty} - ${new Intl.NumberFormat('es-MX', {
                    style: 'currency',
                    currency: 'MXN'
                }).format(item.price * item.qty)}`
            ).join('\n')}\n\n`;

            message += `¡Gracias por tu pedido! 🎉\nPronto nos pondremos en contacto contigo. 📲`;
            return message;
        }

        async function registrarWhatsappEnviado() {
            if (whatsappMarcado) return;
            try {
                const fd = new FormData();
                fd.append('id_pedido', ID_PEDIDO);
                await fetch('api/marcar_whatsapp.php', { method: 'POST', body: fd });
                whatsappMarcado = true;
                const alert = document.getElementById('whatsappAlert');
                if (alert) alert.style.display = 'none';
                document.getElementById('whatsappBtn')?.classList.remove('pulse');
            } catch (e) {
                console.warn('No se pudo registrar WhatsApp', e);
            }
        }

        function abrirWhatsapp() {
            const message = buildWhatsappMessage();
            window.open(`https://wa.me/${WHATSAPP_NUMERO}?text=${encodeURIComponent(message)}`, '_blank');
            registrarWhatsappEnviado();
        }

        document.getElementById('whatsappBtn').addEventListener('click', abrirWhatsapp);

        <?php if (!$whatsapp_enviado): ?>
        document.getElementById('whatsappBtn').classList.add('pulse');
        setTimeout(function() {
            if (!whatsappMarcado && confirm('¿Enviar tu pedido a la taquería por WhatsApp ahora? Es necesario para que preparen tu orden.')) {
                abrirWhatsapp();
            }
        }, 1800);
        <?php endif; ?>
    </script>
    <!-- Script para el modal -->
    <script>
        // Función para mostrar el modal
        function mostrarModal() {
            document.getElementById('exitModal').style.display = 'flex';
        }

        // Función para cerrar el modal
        function cerrarModal() {
            document.getElementById('exitModal').style.display = 'none';
        }

        // Función para redirigir al inicio
        function redirigirAlInicio() {
            window.location.href = 'https://taqueriaelmexicano.com.mx';
        }

        // Cerrar modal al hacer clic fuera del contenido
        window.onclick = function(event) {
            const modal = document.getElementById('exitModal');
            if (event.target === modal) {
                cerrarModal();
            }
        }

        // Cerrar modal con la tecla ESC
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                cerrarModal();
            }
        });

        // [Mantener todos los scripts existentes aquí]
    </script>
</body>

</html>
