@extends('admin.layout.master')

@section('content')
<main>
    <div class="ecommerce-stats-area">
        <div class="row">
            <div class="col-md-6">
                <span class="sub-title">Fecha Inicio</span>
                <input type="date" id="fechaInicio">
            </div>
            <div class="col-md-6">
                <span class="sub-title">Fecha Fin</span>
                <input type="date" id="fechaFin">
            </div>
        </div>
    </div>
    <div class="row mt-6">
        <div class="col-lg-12 col-md-12">
            <div class="card mb-30">   
                <table class="table table-bordered" id="reporte-ventas">
                    <thead>
                        <tr>
                            <th>Vendedora</th>
                            <th>Meta S/</th>
                            <th>Meta Cantidad</th>
                            <th>Ventas S/</th>
                            <th>Cantidad Ventas</th>
                            <th>S/ Promedio</th>
                            <th>Cantidad Promedio</th>
                            <th>Cantidad Cursos</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</main>

<script>
    // Establecer las fechas por defecto (inicio del mes y fecha actual)
    function setDefaultDates() {
        const fecha = new Date();
        const primerDiaMes = new Date(fecha.getFullYear(), fecha.getMonth(), 1);
        const hoy = fecha.toISOString().split('T')[0];

        document.getElementById('fechaInicio').value = primerDiaMes.toISOString().split('T')[0];
        document.getElementById('fechaFin').value = hoy;
    }

    // Inicializar DataTable con configuración para exportación a Excel
    let tablaVentas = $('#reporte-ventas').DataTable({
        paging: true,
        lengthChange: false,
        searching: true,
        ordering: true,
        order: [[3, "desc"]],
        info: true,
        autoWidth: false,
        responsive: true,
        pageLength: 10,
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'excelHtml5',
                text: 'Exportar a Excel',
                title: 'Reporte de Ventas'
            }
        ]
    });

    // Cargar datos al cambiar las fechas
    document.getElementById('fechaInicio').addEventListener('change', cargarGraficos);
    document.getElementById('fechaFin').addEventListener('change', cargarGraficos);

    // Función para cargar los datos de la tabla
    function cargarGraficos() {
        const fechaInicio = document.getElementById('fechaInicio').value;
        const fechaFin = document.getElementById('fechaFin').value;

        if (fechaInicio && fechaFin) {
            $.ajax({
                url: "{{ route('reporte.indicadoresVentas') }}",
                method: 'GET',
                data: {
                    fecha_inicio: fechaInicio,
                    fecha_fin: fechaFin,
                },
                success: function(response) {
                    tablaVentas.clear(); // Limpiar la tabla antes de agregar nuevos datos
                    $.each(response, function(index, indicador) {
                        tablaVentas.row.add([
                            indicador.vendedora,
                            `${indicador.meta_soles}`,
                            indicador.meta_cantidad,
                            `${indicador.ventas_soles}`,
                            indicador.cantidad_ventas,
                            `${indicador.promedio_monto}`,
                            indicador.promedio_cantidad,
                            indicador.cantidad_cursos
                        ]).draw();
                    });
                },
                error: function() {
                    alert('Error al generar el reporte');
                }
            });
        }
    }

    // Cargar datos al iniciar la página
    document.addEventListener('DOMContentLoaded', function() {
        setDefaultDates();
        cargarGraficos(); // Cargar datos con las fechas por defecto
    });
</script>
@endsection