ProyectoTicketFei/js/reporteVentas.js

document.addEventListener("DOMContentLoaded", function () {
    const calendarDays = document.getElementById("calendarDays");
    const monthYear = document.getElementById("monthYear");
    const prevMonth = document.getElementById("prevMonth");
    const nextMonth = document.getElementById("nextMonth");
    const closeModalBtn = document.querySelector(".close"); // Seleccionamos el botón de cerrar

    let date = new Date();
    let currentMonth = date.getMonth();
    let currentYear = date.getFullYear();

    function renderCalendar() {
        const firstDay = new Date(currentYear, currentMonth, 1).getDay();
        const lastDate = new Date(currentYear, currentMonth + 1, 0).getDate();
        
        let monthName = date.toLocaleString('es-ES', { month: 'long' }); 
        monthYear.innerText = `${monthName.charAt(0).toUpperCase() + monthName.slice(1)} ${currentYear}`;
    
        calendarDays.innerHTML = "";
    
        // Agregar espacios vacíos antes del primer día del mes
        for (let i = 0; i < firstDay; i++) {
            let emptyCell = document.createElement("div");
            emptyCell.classList.add("empty");
            calendarDays.appendChild(emptyCell);
        }
    
        // Agregar días del mes
        for (let i = 1; i <= lastDate; i++) {
            let dayCell = document.createElement("div");
            dayCell.innerText = i;
            dayCell.classList.add("day");
            dayCell.addEventListener("click", (event) => seleccionarFecha(event, i));
            calendarDays.appendChild(dayCell);
        }
    }    

    function seleccionarFecha(event, day) {
        document.querySelectorAll(".calendar-days div").forEach(d => d.classList.remove("selected"));
        event.target.classList.add("selected");
    
        let mes = String(currentMonth + 1).padStart(2, '0');
        let dia = String(day).padStart(2, '0');
        let fecha = `${currentYear}-${mes}-${dia}`;
    
        // Llamada a la API en PHP
        fetch(`controladores/obtener_reporte.php?fecha=${fecha}`)
            .then(response => response.json())
            .then(data => {
                let modalTexto = "";
                let impresionTexto = "";
    
                // Si no hay datos, mostrar "No se han registrado ventas este día"
                if (data.length === 0) {
                    modalTexto = `<hr><br><p>No se han registrado ventas este día.</p>`;
                } else {
                    data.forEach(concierto => {
                        // Texto del modal (SIN boletos por zona)
                        modalTexto += `
                            <hr>
                            <br>
                            <p><strong>Concierto:</strong> ${concierto.nombre_concierto}</p>
                            <p><strong>Boletos Vendidos:</strong> ${concierto.boletos_vendidos}</p>
                            <p><strong>Total Ganado:</strong> $${concierto.total_ganado}</p>
                            <br>
                            <hr>
                        `;
    
                        // Texto de impresión (CON boletos por zona)
                        let zonasTexto = "";
                        if (concierto.zonas.length > 0) {
                            zonasTexto = `<p><strong>📍 Boletos Vendidos por Zona:</strong></p><ul>`;
                            concierto.zonas.forEach(zona => {
                                zonasTexto += `<li>${zona.nombre_zona}: ${zona.boletos_vendidos} boletos</li>`;
                            });
                            zonasTexto += `</ul>`;
                        }
    
                        impresionTexto += `
                            <p><strong>🎤 Concierto:</strong> ${concierto.nombre_concierto}</p>
                            <p><strong>🎟 Boletos Vendidos:</strong> ${concierto.boletos_vendidos}</p>
                            <p><strong>💰 Total Ganado:</strong> $${concierto.total_ganado}</p>
                            ${zonasTexto}
                            <hr>
                        `;
                    });
    
                    // Agregar botón de impresión solo en el modal si hay ventas
                    modalTexto += `<button onclick="imprimirReporte('${fecha}', \`${impresionTexto}\`)" class="print-boton">🖨 Imprimir Reporte</button>`;
                }
    
                document.getElementById("modal-titulo").innerText = `Reporte de Ventas - ${day} ${monthYear.innerText}`;
                document.getElementById("modal-texto").innerHTML = modalTexto;
                document.getElementById("modal").classList.remove("hidden");
            })
            .catch(error => {
                console.error("Error obteniendo el reporte:", error);
                document.getElementById("modal-texto").innerHTML = `<hr><br><p>No se han registrado ventas este día.</p>`;
                document.getElementById("modal").classList.remove("hidden");
            });
    }    

    function cerrarModal() {
        document.getElementById("modal").classList.add("hidden");

        // Remover la clase 'selected' de todos los días seleccionados
        document.querySelectorAll(".calendar-days div").forEach(d => d.classList.remove("selected"));
    }

    prevMonth.addEventListener("click", () => {
        currentMonth--;
        if (currentMonth < 0) {
            currentMonth = 11;
            currentYear--;
        }
        date = new Date(currentYear, currentMonth, 1);
        renderCalendar();
    });

    nextMonth.addEventListener("click", () => {
        currentMonth++;
        if (currentMonth > 11) {
            currentMonth = 0;
            currentYear++;
        }
        date = new Date(currentYear, currentMonth, 1);
        renderCalendar();
    });

    renderCalendar();

    // Agregar evento para cerrar modal al hacer clic fuera del contenido
    document.getElementById("modal").addEventListener("click", function(event) {
        if (event.target === this) {
            cerrarModal();
        }
    });

    // Agregar evento para cerrar modal con tecla ESC
    document.addEventListener("keydown", function(event) {
        if (event.key === "Escape") {
            cerrarModal();
        }
    });

    // Agregar evento al botón de cerrar (X)
    closeModalBtn.addEventListener("click", cerrarModal);

});

// Función para imprimir el reporte con los boletos vendidos por zona
function imprimirReporte(fecha, contenido) {
    let ventana = window.open("", "_blank");
    ventana.document.write(`
        <html>
        <head>
            <title>Reporte de Ventas</title>
            <style>
                body { font-family: Arial, sans-serif; text-align: center; }
                .reporte-container {
                    border: 2px dashed black;
                    padding: 20px;
                    display: inline-block;
                    text-align: left;
                }
                h1 { color: green; }
                ul { list-style: none; padding: 0; }
                ul li { margin-bottom: 5px; }
            </style>
        </head>
        <body>
            <h1>🎟 TicketFei - Reporte de Ventas</h1>
            <div class="reporte-container">
                <p><strong>📅 Fecha del Reporte:</strong> ${fecha}</p>
                ${contenido}
            </div>
            <script>
                window.onload = function() {
                    window.print();
                    window.close();
                }
            </script>
        </body>
        </html>
    `);
    ventana.document.close();
}