<!-- Llamamos el sidebar principal y el menu nav -->
<?php include('../elementos/sidebar.php'); ?>

<!-- CDN de Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- Contenido propio de la pagina -->
<span id="module_active" dt="dashboard"></span>

<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="container-fluid">
        <div class="content-wrapper">


            <div class="card">
                <div class="card-header">
                    <!-- <a class="btn btn-primary">Registrar Ventas</a> -->
                    <button type="button" class="btn btn-default">
                        Estadisticas
                    </button>

                    <span id="title_fecha" style="margin-left:10px;white-space:nowrap">--------</span>

                    <spam id="title_fecha"> </spam>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                        <div class="btn-group">
                            <button type="button" class="btn btn-tool" id='btn-fecha-change'>
                                <i class="fas fa-calendar-week"></i>
                            </button>
                        </div>
                    </div>

                </div>

                <div class="card-body">
                    <!-- 4 BOXES -->
                    <div class="row" style="align-items: center !important;">
                        <div class="col-lg-3 col-6">
                            <!-- small box -->
                            <div class="small-box bg-info">
                                <div class="inner">
                                    <h3 id="sms">
                                        <span class="badge" style="font-size: 14px;width:85px">
                                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                        </span>
                                    </h3>

                                    <p>Surtido</p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-bag"></i>
                                </div>
                            </div>
                        </div>
                        <!-- ./col -->
                        <div class="col-lg-3 col-6">
                            <!-- small box -->
                            <div class="small-box bg-info">
                                <div class="inner">
                                    <h3 id="smv">
                                        <span class="badge" style="font-size: 14px;width:85px">
                                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                        </span>
                                    </h3>

                                    <p>Ventas</p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-stats-bars"></i>
                                </div>
                            </div>
                        </div>
                        <!-- ./col -->
                        <div class="col-lg-3 col-6">
                            <!-- small box -->
                            <div id="c-gmv" class="small-box bg-info">
                                <div class="inner">
                                    <h3 id="gmv">
                                        <span class="badge" style="font-size: 14px;width:85px">
                                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                        </span>
                                    </h3>

                                    <p>Ganancias</p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-person-add"></i>
                                </div>
                            </div>
                        </div>
                        <!-- ./col -->
                        <div class="col-lg-3 col-6">
                            <!-- small box -->
                            <div class="small-box bg-info">
                                <div class="inner">
                                    <h3 id="vtc">
                                        <span class="badge" style="font-size: 14px;width:85px">
                                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                        </span>
                                    </h3>

                                    <p id="ntc"></p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-pie-graph"></i>
                                </div>
                            </div>
                        </div>
                        <!-- ./col -->
                    </div>

                    <!-- GRAFICAS -->
                    <div class="row">
                        <!-- GRAFICA 1 -->
                        <section class="col-lg-6 connectedSortable">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">
                                        <i class="fas fa-chart-pie mr-1"></i>
                                        Ganancias
                                    </h3>

                                    <div class="card-tools">
                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                            <i class="fas fa-minus"></i>
                                        </button>
                                    </div>

                                </div>
                                <div class="card-body">
                                    <div class="tab-content p-0">
                                        <!-- Morris chart - Sales -->
                                        <div class="chart tab-pane active" id="revenue-chart">
                                            <canvas id="revenue-chart-canvas" style="height: 300px !important"></canvas>
                                        </div>


                                    </div>
                                </div><!-- /.card-body -->
                            </div>
                        </section>

                        <!-- GRAFICA 2 -->
                        <section class="col-lg-6 connectedSortable">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">
                                        <i class="fas fa-chart-pie mr-1"></i>
                                        Top Clientes
                                    </h3>

                                    <div class="card-tools">
                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                            <i class="fas fa-minus"></i>
                                        </button>
                                    </div>

                                </div>
                                <div class="card-body">
                                    <div class="tab-content p-0">
                                        <!-- Morris chart - Sales -->
                                        <div class="chart tab-pane active" id="revenue-chart2">
                                            <canvas id="revenue-chart2-canvas"></canvas>
                                        </div>


                                    </div>
                                </div><!-- /.card-body -->
                            </div>
                        </section>
                    </div>

                </div>
            </div>



        </div>

    </div>

</section>

<input type="week" name="" id="week">


<script>
    data_arrayS = []
    data_arrayV = []
    data_arrayP = []
    data_arrayC = []



    f = new Date()

    function diasEnElMes(mes, anio = new Date().getFullYear()) {
        if (mes < 1 || mes > 12) {
            return 'Por favor, ingresa un número de mes válido (1-12)';
        }
        // El mes en Date es de 0 a 11, por eso restamos 1.
        return new Date(anio, mes, 0).getDate();
    }

    function agregarCero(numero) {
        // Convierte el número a string y verifica su longitud
        return numero.toString().length === 1 ? '0' + numero : numero.toString();
    }

    function getMondayFromWeek(weekString) {
        const [year, week] = weekString.split('-W');
        const firstDayOfYear = new Date(year, 0, 1);
        const firstDayOfWeek = firstDayOfYear.getDay();
        const daysToAdd = (parseInt(week) - 1) * 7 - (firstDayOfWeek - 1);
        firstDayOfYear.setDate(firstDayOfYear.getDate() + daysToAdd);

        return firstDayOfYear;
    }



    function convMesANombre(numeroMes) {
        const nombresMeses = [
            'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
            'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
        ];
        return nombresMeses[numeroMes - 1] || 'Mes inválido'; // -1 porque los índices comienzan en 0
    }

    function convMesASNombre(numeroMes) {
        const nombresMeses = [
            'Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun',
            'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'
        ];
        return nombresMeses[numeroMes - 1] || 'Mes inválido'; // -1 porque los índices comienzan en 0
    }

    function convMesANumero(nomMes) {
        const numeroMeses = [
            'Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun',
            'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'
        ].indexOf(nomMes)
        return numeroMeses + 1; // -1 porque los índices comienzan en 0
    }

    function getFirstThursday(month, year) {
        const firstDay = new Date(year, month - 1, 1);
        const firstDayOfWeek = firstDay.getDay();
        let daysToAdd = (4 - firstDayOfWeek + 7) % 7;
        firstDay.setDate(firstDay.getDate() + daysToAdd);
        return firstDay;
    }

    document.getElementById('title_fecha').innerHTML = `${f.getFullYear()}-${f.getMonth()+1}-${f.getDate()}`

    function selectFechaStats() {
        Swal.fire({
            title: 'Elije la fecha a filtrar',
            html: `<div style="display:grid;place-items:center">
                        <div style="display:flex;justify-content:center">
                            <div id="cont-date" style="gap:18px;display:flex">
                                <div style="display:grid">
                                    <label for="por-dia"> Día</label>
                                    <input type="radio" id="dia" name="periodo">
                                </div>
                                <div style="display:grid">
                                    <label for="por-dia"> Semana</label>
                                    <input type="radio" id="semana" name="periodo">
                                </div>

                                <div style="display:grid">
                                    <label for="por-mes"> Mes</label>
                                    <input type="radio" id="mes" name="periodo">
                                </div>

                                <div style="display:grid">
                                    <label for="por-ano"> Año</label>
                                    <input type="radio" id="año" name="periodo">
                                </div>
                            </div>
                        </div>
                    <div/>
                    <div id="cn-in" style="margin-top:20px"></div>
                    `,
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Continuar',
            preConfirm: () => {
                inp = document.getElementById('dateSelc')
                if (inp) {
                    if (document.getElementById('dateSelc').value != '') {
                        return {
                            dateSelc: document.querySelector('#dateSelc').value
                        }
                    } else {
                        Swal.showValidationMessage('Debe seleccionar un valor');
                    }
                } else {
                    Swal.showValidationMessage('Debe seleccionar una opción');
                }

            }
        }).then(async (result) => {
            if (result.isConfirmed) {
                fechaSele = document.getElementById('dateSelc').value;
                loadSts(fechaSele)
            } else if (result.dismiss === Swal.DismissReason.cancel) {
                Swal.fire('Acción cancelada', '', 'error');
            }
        });

        document.getElementById('cont-date').addEventListener('click', (e) => {
            v = document.querySelector('input[name="periodo"]:checked').id
            if (v == 'dia') {
                t = `<input style="width:200px;text-align:center" type="date" class="form-control"  value="${fechaActual().full}" id="dateSelc" >`
            } else if (v == 'semana') {
                t = `<input style="width:200px;text-align:center" type="week" class="form-control"  value="${getCurrentWeek()}" id="dateSelc" >`
            } else if (v == 'mes') {
                t = `<input style="width:200px;text-align:center" type="month" class="form-control"  id="dateSelc" value="${fechaActual().año}-${fechaActual().mes_num_txt}">`
            } else if (v == 'año') {
                t = `<input style="width:200px;text-align:center" type="number" class="form-control" id="dateSelc" min="2024" value="${fechaActual().año}" step="1" >`
            }
            document.getElementById('cn-in').innerHTML = t
        })
    }

    function loadSts(date) {
        if (date.split('-').length - 1 == 0) {
            document.getElementById('title_fecha').innerHTML = `Datos del año <b>${date}</b>`
            sfd = data_arrayS.data.filter(f => f.fecha.split('/')[1].split('-')[0] == date)
            vfd = data_arrayV.data.filter(f => f['fecha Entrega'].split('-')[0] == date)
        } else if (date.split('-')[1][0] == 'W') {
            document.getElementById('title_fecha').innerHTML = `Datos de la semana <b>${date.split('-')[1]}</b>`
            sfd = data_arrayS.data.filter(f => getISOWeek(f.fecha.split('/')[1]) == (date))
            vfd = data_arrayV.data.filter(f => getISOWeek(f['fecha Entrega']) == (date))
        } else if (date.split('-').length - 1 == 1) {
            document.getElementById('title_fecha').innerHTML = `Datos del mes de <b>${convMesANombre(date.split('-')[1])}</b> del <b>${date.split('-')[0]} </b>`
            sfd = data_arrayS.data.filter(f => f.fecha.split('/')[1].split('-')[1] == date.split('-')[1] && f.fecha.split('/')[1].split('-')[0] == date.split('-')[0])
            vfd = data_arrayV.data.filter(f => f['fecha Entrega'].split('-')[1] == date.split('-')[1] && f['fecha Entrega'].split('-')[0] == date.split('-')[0])
        } else if (date.split('-').length - 1 == 2) {
            document.getElementById('title_fecha').innerHTML = `Datos del dia <b>${date}</b>`
            sfd = data_arrayS.data.filter(f => f.fecha.split('/')[1] == date)
            vfd = data_arrayV.data.filter(f => f['fecha Entrega'] == date)
        }

        //BOX COMPRAS
        document.getElementById('sms').innerHTML = AddFormatMoneda(sfd.map(m => m.valor).reduce((a, b) => parseFloat(a) + parseFloat(b), 0))

        //BOX VENTAS 
        document.getElementById('smv').innerHTML = AddFormatMoneda(vfd.map(m => m['valor T']).reduce((a, b) => parseFloat(a) + parseFloat(b), 0))

        //BOX GANANCIAS
        su = vfd.map(m => m['valor T']).reduce((a, b) => parseFloat(a) + parseFloat(b), 0) - sfd.map(m => m.valor).reduce((a, b) => parseFloat(a) + parseFloat(b), 0)
        cv = su <= 0 ? ['small-box bg-danger'] : ['small-box bg-success']
        document.getElementById('gmv').innerHTML = AddFormatMoneda(su)
        document.getElementById('c-gmv').classList = cv

        //BOX TOP CLIENTE
        atc = vfd.reduce((a, b) => {
            nameC = b.cliente
            cantidC = b.cantidad
            nameC in a ? a[nameC] += parseInt(b.cantidad) : a[nameC] = parseInt(b.cantidad)
            return a
        }, {})


        if (Object.keys(atc).length === 0) {
            topC = {
                id: 'Ninguno',
                cantidad: 0
            }
        } else {
            // Convertir el objeto en un array de entradas [clave, valor], luego ordenar por el valor
            topC = Object.entries(atc).reduce((max, [id, cantidad]) => {
                return cantidad > max.cantidad ? {
                    id,
                    cantidad
                } : max;
            }, {
                id: null,
                cantidad: -Infinity
            });
        }

        tt = isNaN(Math.ceil(parseInt((topC.id).slice(-2)) / 8)) ? '' : ' - T' + Math.ceil(parseInt((topC.id).slice(-2)) / 8)

        document.getElementById('vtc').innerHTML = topC.id + tt + ' / ' + topC.cantidad
        document.getElementById('ntc').innerHTML = 'Top Cliente'

        crearGrafica(date)
    }



    ObtenerDatos('surtido', '../../controllers/functions/datos.php').then((respuesta) => {
        data_arrayS = respuesta
    }).then(() => {
        ObtenerDatos('ventas', '../../controllers/functions/datos.php').then((respuesta) => {
            data_arrayV = respuesta
            // loadSts(fechaActual().full)
            loadSts(`${fechaActual().año}-${fechaActual().mes_num_txt}`)

        })

    })


    document.getElementById('btn-fecha-change').addEventListener('click', selectFechaStats)
</script>

<script>
    function crearGrafica(date) {
        añoT = date.split('-')[0]
        mesT = date.split('-')[1]
        diaT = date.split('-')[2]
        labels_ = []

        if (date.split('W').length == 2 || date.split('-').length == 3) {
            if (date.split('-').length == 3) {
                date = getISOWeek(date)
            }

            GTitle = `Estadisticas de la semana ${mesT} del ${añoT}`
            Stitle = 'Semanas'

            firsMK = getMondayFromWeek(date)
            firsTM = getFirstThursday(firsMK.getMonth() + 1, firsMK.getFullYear())
            m = firsTM.getMonth()
            while (firsTM.getMonth() == m) {
                labels_.push(`${agregarCero(firsTM.getDate())}-${firsTM.getMonth() + 1}-${firsTM.getFullYear()}`)
                firsTM.setDate(firsTM.getDate() + 7)
            }
            labels_.push(`${agregarCero(firsTM.getDate())}-${firsTM.getMonth() + 1}-${firsTM.getFullYear()}`)

            valoresV = []
            labels_.forEach((e, b) => {
                if (!!labels_[b + 1]) {
                    desde = e
                    hasta = labels_[b + 1]
                    desdeFecha = new Date(desde.split('-').reverse().join('-'));
                    hastaFecha = new Date(hasta.split('-').reverse().join('-'));
                    registrosFiltrados = data_arrayV.data.filter(registro => {
                        c = registro['fecha Entrega'].split('-')
                        c = `${c[0]}-${c[2]}-${c[1]}`
                        fechaRegistro = new Date(c.split('-').reverse().join('-'));
                        return fechaRegistro >= desdeFecha && fechaRegistro <= hastaFecha;
                    });

                    s = 0
                    registrosFiltrados.forEach(m => {
                        s += m['valor T']
                    });
                    valoresV.push(s)
                }
            })

            valoresS = []
            labels_.forEach((e, b) => {
                if (!!labels_[b + 1]) {
                    desde = e
                    hasta = labels_[b + 1]
                    desdeFecha = new Date(desde.split('-').reverse().join('-'));
                    hastaFecha = new Date(hasta.split('-').reverse().join('-'));
                    registrosFiltrados_ = data_arrayS.data.filter(registro => {
                        c = registro['fecha'].split('/')[1].split('-')
                        c = `${c[0]}-${c[2]}-${c[1]}`
                        fechaRegistro = new Date(c.split('-').reverse().join('-'));
                        return fechaRegistro >= desdeFecha && fechaRegistro <= hastaFecha;
                    });
                    s = 0
                    registrosFiltrados_.forEach(m => {
                        s += m['valor']
                    });
                    valoresS.push(s)
                }
            })

            labels_ = []
            valoresV.forEach((a, b) => {
                labels_.push(`Semana ${b+1}`)
            });


        } else if (date.split('-').length == 2 || date.split('-').length == 1) {
            GTitle = `Estadisticas del año ${añoT}`
            Stitle = 'Meses'

            labels_ = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic']

            // VENTAS
            valoresV = labels_.reduce((acc, month) => {
                acc[month] = 0;
                return acc;
            }, {});

            data_arrayV.data.forEach(e => {
                valoresV[convMesASNombre(e['fecha Entrega'].split('-')[1])] += parseFloat(e['valor T'])
            })
            valoresV = Object.values(valoresV)
            // COMPRAS
            valoresS = labels_.reduce((acc, month) => {
                acc[month] = 0;
                return acc;
            }, {});

            data_arrayS.data.forEach(e => {
                valoresS[convMesASNombre(e['fecha'].split('/')[1].split('-')[1])] += parseFloat(e['valor'])
            })
            valoresS = Object.values(valoresS)
        }

        const ctx = document.getElementById('revenue-chart-canvas').getContext('2d');
        if (typeof miGrafica == 'undefined') {
            miGrafica = new Chart(ctx, {
                type: 'line', // Tipo de gráfico de línea
                data: {
                    labels: labels_, // Etiquetas del eje X
                    datasets: [{
                            label: 'Compras',
                            data: valoresS, // Datos de compras
                            borderWidth: 2, // Grosor de la línea
                            tension: 0.3, // Suavizado de la curva
                            pointStyle: 'circle', // Estilo de los puntos
                            pointRadius: 4 // Radio de los puntos
                        },
                        {
                            label: 'Ventas',
                            data: Object.values(valoresV), // Datos de ventas
                            borderWidth: 2, // Grosor de la línea
                            tension: 0.3, // Suavizado de la curva
                            pointStyle: 'circle', // Estilo de los puntos
                            pointRadius: 4 // Radio de los puntos
                        },
                        // {
                        //     label: 'Ganancias',
                        //     data: valoresG, // Datos de ganancias (calculados)
                        //     borderWidth: 2, // Grosor de la línea
                        //     tension: 0.3, // Suavizado de la curva
                        //     pointStyle: 'circle', // Estilo de los puntos
                        //     pointRadius: 4 // Radio de los puntos
                        // }
                    ]
                },
                options: {
                    responsive: true, // La gráfica se adapta al tamaño de la pantalla
                    plugins: {
                        legend: {
                            display: true, // Muestra la leyenda
                            position: 'top', // Posición de la leyenda
                            labels: {
                                usePointStyle: true // Los íconos de la leyenda serán puntos
                            }
                        },
                        title: {
                            display: true,
                            text: GTitle
                        },
                        tooltip: {
                            enabled: true
                        }
                    },
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: Stitle
                            }
                        },
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: 'Monto ($)'
                            }
                        }
                    }
                }
            });
        } else {
            miGrafica.data.labels = labels_;
            miGrafica.data.datasets[0].data = valoresS;
            miGrafica.data.datasets[1].data = valoresV;
            miGrafica.options.plugins.title.text = GTitle;
            miGrafica.options.scales.x.title.text = Stitle;
            miGrafica.update();
        }

        crearGrafica2(date)
    }

    function crearGrafica2(date) {
        añoT = date.split('-')[0]
        mesT = date.split('-')[1]
        diaT = date.split('-')[2]
        labels_ = []

        if (date.split('W').length == 2 || date.split('-').length == 3) {
            if (date.split('-').length == 3) {
                date = getISOWeek(date)
            }
            GTitle = `Estadisticas de la semana ${mesT} del ${añoT}`
            Stitle = `Semana ${date}`
            topC = {}
            vfd.forEach(element => {
                cn = element.cliente
                if (element['cliente'] in topC) {
                    topC[cn] += parseInt(element['cantidad'])
                } else {
                    topC[cn] = parseInt(element['cantidad'])
                }
            });
        } else if (date.split('-').length == 2 || date.split('-').length == 1) {
            GTitle = `Estadisticas del año ${añoT}`
            Stitle = 'Meses'

            if (date.split('-').length == 3) {
                date = getISOWeek(date)
            }
            GTitle = `Estadisticas de la semana ${mesT} del ${añoT}`
            Stitle = `Semana ${date}`
            topC = {}
            vfd.forEach(element => {
                cn = element.cliente
                if (element['cliente'] in topC) {
                    topC[cn] += parseInt(element['cantidad'])
                } else {
                    topC[cn] = parseInt(element['cantidad'])
                }
            });
        }


        const ctx = document.getElementById('revenue-chart2-canvas').getContext('2d');
        if (typeof miGrafica2 == 'undefined') {
            miGrafica2 = new Chart(ctx, {
                type: 'bar', // Tipo de gráfico de línea
                data: {
                    labels: Object.keys(topC), // Etiquetas del eje X
                    datasets: [{
                            label: 'Cantidad',
                            data: Object.values(topC), // Datos de compras
                            borderWidth: 2, // Grosor de la línea
                            tension: 0.3, // Suavizado de la curva
                            pointStyle: 'circle', // Estilo de los puntos
                            pointRadius: 4 // Radio de los puntos
                        },

                    ]
                },
                options: {
                    responsive: true, // La gráfica se adapta al tamaño de la pantalla
                    plugins: {
                        legend: {
                            display: true, // Muestra la leyenda
                            position: 'top', // Posición de la leyenda
                            labels: {
                                usePointStyle: true // Los íconos de la leyenda serán puntos
                            }
                        },
                        title: {
                            display: true,
                            text: GTitle
                        },
                        tooltip: {
                            enabled: true
                        }
                    },
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: Stitle
                            }
                        },
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: 'Monto ($)'
                            }
                        }
                    }
                }
            });
        } else {
            miGrafica2.data.labels = Object.keys(topC);
            miGrafica2.data.datasets[0].data = Object.values(topC);
            miGrafica2.options.plugins.title.text = GTitle;
            miGrafica2.options.scales.x.title.text = Stitle;

            miGrafica2.update();
        }



    }
</script>


<style>
    /* Estilos para pantallas grandes */
    .small-box .inner h3 {
        font-size: 2rem;
        /* Tamaño de fuente para pantallas grandes */
    }

    .small-box .inner p {
        font-size: 1.2rem;
        /* Tamaño de fuente para pantallas grandes */
    }

    /* Ajustar la fuente para pantallas más pequeñas */
    @media (max-width: 768px) {
        .small-box .inner h3 {
            font-size: 1.5rem;
            /* Reducir tamaño de fuente */
        }

        .small-box .inner p {
            font-size: 1rem;
            /* Reducir tamaño de fuente */
        }
    }

    /* Ajustar aún más para pantallas más pequeñas */
    @media (max-width: 480px) {
        .small-box .inner h3 {
            font-size: 1.5rem;
            /* Reducir aún más el tamaño de la fuente */
        }

        .small-box .inner p {
            font-size: 1rem;
            /* Reducir aún más el tamaño de la fuente */
        }
    }
</style>