@extends('layouts.dashboard')

@section('dashboard')
    <ul class="breadcrumb m-0 p-0">
        <li><a href="/dashboard">Home</a></li>
        <li><strong>Informe de Comisiones Mensuales</strong></li>
    </ul>
    <div class="row align-items-center mb-4">
        <div class="col-md-auto">
            <h1 class="titulo-h1">Informe de Comisiones Mensuales</h1>
        </div>

        <div class="col-md">
            <form class="d-flex align-items-end justify-content-end form-registro form-enter" method="post" id="form-filtro"
                onsubmit="return cargarInforme(this)">
                <div class="form-group pr-2">
                    <label for="tipo-informe" class="d-block small mb-0">Tipo de Informe</label>
                    <select name="tipo-informe" required class="form-control form-control-sm">
                        <option value="">Seleccionar el tipo de informe</option>
                        <option value="mercadoLibre-full">Mercado Libre Full</option>
                        <option value="mercadoLibre-otros">Mercado Libre Otros</option>
                        <option value="ventas">Ventas</option>
                    </select>

                </div>
                <div class="form-group pr-2 agregar-fecha-dia">
                    <label for="tipo-fecha" class="d-block small mb-0">Mes</label>
                    <input type="month" id="fecha" required name="fecha" class="form-control form-control-sm">
                </div>


                <div class="col col-md-auto form-group pr-md-0">
                    <button type="submit" class="btn btn-primary btn-sm blq-btn" id="btn-filtrar"> Generar Informe</button>

                    <button type="button" onclick="descargarExcelReporteVentas()"
                        class="btn btn-success btn-sm blq-btn ml-2"> Descargar Excel <i class="fa fa-file-excel-o"></i></button>

                </div>
            </form>
        </div>
    </div>
    


    <div class="card mb-4 div-resumen-de-ventas">
        @include('dashboard.informe-ventas.div-resumen-de-ventas')
    </div>

@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <script>
       

        function cargarInforme(form) {
            // Crear objeto FormData con los datos del formulario
            var formData = new FormData(form);
            modalCargando()
            // Enviar la solicitud por Ajax
            fetch('/dashboard/cargar-informe', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: formData
                })
                .then(response => {
                    if (!response.ok) {
                        return response.json().then(data => {
                            throw new Error(data.error || 'Error en la solicitud.');
                        });
                    }
                    return response.json(); // Parsear la respuesta JSON
                })
                .then(data => {

                    if (data.success) {
                        // Actualizar el contenido del tbody
                        // var tbodyInforme = document.querySelector('.tbody-informe');
                        // tbodyInforme.innerHTML = data.view; // Aquí se actualiza con la vista recibida

                        var divResumenDeVentas = document.querySelector('.div-resumen-de-ventas');
                        divResumenDeVentas.innerHTML = data.viewResumenVentas; // Aquí se actualiza con la vista recibida

                        // Puedes realizar otras acciones si es necesario


                    } else {
                        alert('Error: ' + (error || 'No se pudieron cargar los datos.'));
                    }

                    cerrarCargando();
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Ocurrió un error al procesar la solicitud. Por favor, inténtelo de nuevo.');
                    cerrarCargando();
                });

            return false; // Evitar envío convencional del formulario
        }

        function descargarExcelReporteVentas(bodegaId) {
            const tipoInforme = document.querySelector('select[name="tipo-informe"]');
            const fecha = document.getElementById('fecha');

            // Validar tipo de informe
            if (!tipoInforme || !tipoInforme.value) {
                alert('Por favor selecciona un tipo de informe.');
                return;
            }

            // Validar fecha
            if (!fecha || !fecha.value) {
                alert('Por favor ingresa una fecha.');
                return;
            }

            // Crear los datos de la solicitud
            const data = new URLSearchParams();
            data.append('tipo-informe', tipoInforme.value);
            data.append('fecha', fecha.value);

            modalCargando()
            // Enviar la solicitud fetch
            fetch('/dashboard/decargar-excel-informe-ventas', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                            'content') // CSRF token
                    },
                    body: data.toString()
                })
                .then(response => {
                    cerrarCargando();
                    if (!response.ok) {
                        throw new Error('Error al generar el archivo. Por favor intenta nuevamente.');
                    }
                    return response.blob(); // Descargar el archivo como blob
                })
                .then(blob => {
                    // Crear un enlace temporal para la descarga
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = 'informe-de-ventas.xlsx'; // Nombre del archivo
                    document.body.appendChild(a);
                    a.click();
                    a.remove();
                    window.URL.revokeObjectURL(url); // Limpiar el URL blob
                    cerrarCargando();
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Ocurrió un error al descargar el archivo. Por favor, intenta nuevamente.');
                    cerrarCargando();
                });
        }

        function exportarExcelResumenVentas(){
            const table = document.querySelector('.table'); // Selecciona la tabla
            const rows = table.querySelectorAll('tr'); // Selecciona todas las filas
            
            // Verificar si hay registros (excluyendo el encabezado y el último tr)
            const hasData = Array.from(rows).slice(1, -1).some(row => {
                return Array.from(row.querySelectorAll('td')).some(cell => cell.textContent.trim() !== '');
            });

            if (!hasData) {
                alert('No hay registros disponibles para exportar.');
                return; // Detiene la ejecución de la función
            }

            // Crear un nuevo array para almacenar los datos limpios, ignorando filas vacías y el último tr
            const cleanData = Array.from(rows)
                .slice(0, -1) // Excluir el último <tr>
                .map(row => {
                    const rowData = Array.from(row.querySelectorAll('td, th')).map(cell => {
                        // Limpiar el contenido de cada celda
                        return cell.textContent
                            .replace(/\$/g, '') // Quitar el signo $
                            .replace(/\./g, '') // Quitar separadores de miles
                            .replace(/,/g, '.'); // Cambiar separador decimal (opcional si fuera necesario)
                    });

                    // Verificar si la fila está vacía (todas las celdas vacías)
                    return rowData.every(cell => cell.trim() === '') ? null : rowData;
                })
                .filter(row => row !== null); // Filtrar filas vacías

            // Crear un nuevo libro de Excel
            const wb = XLSX.utils.book_new();
            // Convertir los datos limpios en una hoja
            const ws = XLSX.utils.aoa_to_sheet(cleanData);
            // Agregar la hoja al libro
            XLSX.utils.book_append_sheet(wb, ws, 'Datos');
            // Exportar el archivo
            XLSX.writeFile(wb, 'resumen-de-ventas.xlsx');
        }

    </script>
@endsection