@extends('layouts.app', ['activePage' => 'dashboard', 'titlePage' => __('Home')])

@section('content')
<div class="container-fluid py-4">

    <!-- <div class="row justify-content-end">
        <div class="col-md-4 text-right">
            <div class="cleanslate w24tz-current-time w24tz-middle" style="display: inline-block !important; visibility: hidden !important; min-width:300px !important; min-height:145px !important;">
                <p><a href="//24timezones.com/es_reloj/mexico_zapopan_hora.php" style="text-decoration: none" class="clock24" id="tz24-1636482038-c214309-eyJob3VydHlwZSI6MTIsInNob3dkYXRlIjoiMSIsInNob3dzZWNvbmRzIjoiMCIsImNvbnRhaW5lcl9pZCI6ImNsb2NrX2Jsb2NrX2NiNjE4YWJiZjY4Njg4MSIsInR5cGUiOiJkYiIsImxhbmciOiJlcyJ9" title="Zapopan hora actual" target="_blank" rel="nofollow">Zapopan</a></p>
                <div id="clock_block_cb618abbf686881"></div>
            </div>
        </div>
        <div class="col-md-2  text-right">
            <a target="_blank" href="https://hotelmix.es/weather/zapopan-27209">
                <img src="https://w.bookcdn.com/weather/picture/32_27209_1_4_34495e_250_2c3e50_ffffff_ffffff_1_2071c9_ffffff_0_6.png?scode=124&domid=583&anc_id=4078" alt="booked.net" />
            </a>
        </div>
    </div> -->
    <div class="row mt-3">
        <div class="col-md-3">
            <div class="card">
                <div class="card-header text-center">
                    <h6>GARANTIAS POR LLUVIA</h6>
                </div>
                <div class="card-body text-center mt-0 pt-0" id="content_visitas">

                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-header text-center">
                    <h6>SERVICIOS REALIZADOS</h6>
                </div>
                <div class="card-body text-center mt-0 pt-0" id="content_servicios">

                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-header text-center">
                    <h6>CLIENTES NUEVOS</h6>
                </div>
                <div class="card-body text-center mt-0 pt-0" id="content_clientes">

                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-header text-center">
                    <h6>AUTOS REGISTRADOS</h6>
                </div>
                <div class="card-body text-center mt-0 pt-0" id="content_autos">

                </div>
            </div>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 ">
                            <div class="input-group input-group-static">
                                <label for="">Mes de consulta: </label>
                                <input type="month" value="2024-10" name="fecha_mes" id="fecha_mes" class="form-control">

                            </div>
                        </div>
                        <div class="col-md-2 mt-4">
                            <button class="btn btn-primary btn-sm " onclick="loadGridServicios()">Aplicar</button>
                        </div>
                    </div>
                    <canvas id="chartServicios" height="80%"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 ">
                            <div class="input-group input-group-static">
                                <label for="">Semana de consulta: </label>
                                <input type="text" class="form-control datepicker" id="fecha_sem">

                            </div>
                        </div>
                        <div class="col-md-2 mt-4">
                            <button class="btn btn-primary btn-sm" onclick="loadGridServiciosSem()">Aplicar</button>
                        </div>
                    </div>
                    <canvas id="chartServiciosSem"></canvas>

                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <canvas id="chartRecepcion"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 ">
                            <div class="input-group input-group-static">
                                <label for="">Mes de consulta: </label>
                                <input type="month" value="2024-10" name="fecha_mes_autos" id="fecha_mes_autos" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-2 mt-4">
                            <button class="btn btn-primary btn-sm " onclick="loadGridAutos()">Aplicar</button>
                        </div>
                    </div>
                    <canvas id="myChartAutos" height="80%"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
@push('js')

<!-- <script type="text/javascript" src="//w.24timezones.com/l.js" async></script> -->

<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        const date = new Date();
        const day = date.getDay(); // 👉️ get day of week

        // 👇️ day of month - day of week (-6 if Sunday), otherwise +1
        const diff = date.getDate() - day + (day === 0 ? -6 : 0);

        fecha = new Date(date.setDate(diff));

        // console.log(fecha);
        $("#fecha_sem").flatpickr({
            enableTime: false,
            dateFormat: "Y-m-d",
            defaultDate: fecha,
            disable: [
                function(date) {
                    // return true to disable
                    return (date.getDay() === 1 || date.getDay() === 2 || date.getDay() === 3 || date.getDay() === 4 || date.getDay() === 5 || date.getDay() === 6 || date.getDay() === 7);

                }
            ],
        });

        // $("#fecha_mes").flatpickr({
        //     enableTime: false,
        //     dateFormat: "Y-m-d",
        //     defaultDate: new Date(),
        // });

        // $("#fecha_mes_autos").flatpickr({
        //     enableTime: false,
        //     dateFormat: "Y-m-d",
        //     defaultDate: new Date(),
        // });
        loadInfoHeader();
        loadGridServicios();
        loadGridServiciosSem();
        loadGridRecepcion();
        loadGridAutos()
    });

    function loadInfoHeader() {
        $.ajax({
                url: "{{url('home/get_info')}}",
                type: 'POST',
                dataType: 'json',
            })
            .done(function(resp) {


                $.each(resp.data, function(index, value) {
                    // var porcentaje = (parseFloat(value['anteriores']) / parseFloat(value['nuevos'])) * 100
                    var porcentaje = (100 / parseFloat(value['anteriores'])) * parseFloat(value['nuevos']);

                    var text_porcentaje = '% del mes anterior';
                    var color_au = 'text-success';
                    var icon = 'arrow_upward';
                    if (value['diferencia'] < 0) {
                        color_au = 'text-danger';
                        icon = 'arrow_downward';
                        text_porcentaje = '% del mes anterior';
                        porcentaje = Math.abs(porcentaje);
                    }

                    if (porcentaje == Infinity)
                        porcentaje = 100 * value['nuevos'];

                    if (isNaN(porcentaje))
                        porcentaje = 0;

                    $('#' + value['id']).append(
                        '<h1 style="font-size: 3.6rem !important;">' + value['nuevos'] + '</h1>' +
                        '<p class="' + color_au + '" style="font-size: 1.8rem !important;"><i class="material-icons">' + icon + '</i>' + value['anteriores'] + '</p>' +
                        '<span class="text-muted align-middle">' + porcentaje.toFixed(2) + text_porcentaje + '</span>'
                    )
                })
            })

            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function loadGridServicios(tipo = 0, chartType = 0) {
        if (tipo == 1) {
            $('#loadingLoad').modal('show');
        }
        $.ajax({
                url: "{{url('home/get_servicios')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    fecha: $('#fecha_mes').val(),
                },
            })
            .done(function(resp) {
                setDataServicios(resp.dataServicios)
                // $('.btnLoadBalance').show('slow');
                // $('.btnLoadAbonos').show('slow');
                // $('.btnLoadPagos').show('slow');

            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });

    }


    let myChart;

    function setDataServicios(info) {

        const descripcion = []
        const cantidades = []
        const cantidades_p = []
        $.each(info['servicios'], function(index, value) {
            descripcion.push(value['Descripcion'])
            cantidades.push(value['cantidad_p'])
        })

        $.each(info['servicios_pasado'], function(index, value) {
            cantidades_p.push(value['cantidad_p'])
            descripcion.push(value['Descripcion'])

            // $.each(descripcion, function(index2, value2) {
            //     if (descripcion.length == 0) {
            //         descripcion.push(value['Descripcion'])
            //     } else {
            //         if (value2 != value['Descripcion']) {
            //             descripcion.push(value['Descripcion'])
            //         }
            //     }
            // })

        })

        var data = {
            labels: descripcion,
            datasets: [{
                label: 'Mes anterior',
                data: cantidades_p,
                borderColor: '#000',
                backgroundColor: "#EBB809",
            }, {
                label: 'Mes seleccionado',
                data: cantidades,
                borderColor: '#000',
                backgroundColor: "#437793",
            }, ]
        };



        const config = {
            type: 'bar',
            data: data,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: 'SERVICIOS MÁS UTILIZADOS',
                        font: {
                            size: 16,
                        }
                    },

                },
                locale: 'en-US',
            }
        };


        var chart = document.getElementById('chartServicios').getContext("2d")
        if (myChart) {
            myChart.destroy();
        }
        myChart = new Chart(
            chart,
            config
        );
        setTimeout(() => {
            $('#loadingLoad').modal('hide');
        }, 2000);
    }



    function loadGridServiciosSem(tipo = 0, chartType = 0) {
        if (tipo == 1) {
            $('#loadingLoad').modal('show');
        }
        $.ajax({
                url: "{{url('home/get_servicios_sem')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    fecha: $('#fecha_sem').val(),
                }
            })
            .done(function(resp) {
                setDataServiciosSem(resp.dataServicios)
                // $('.btnLoadBalance').show('slow');
                // $('.btnLoadAbonos').show('slow');
                // $('.btnLoadPagos').show('slow');

            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });

    }


    let myChartServiciosSem;

    function setDataServiciosSem(info) {
        const semana = [
            ['Lunes'],
            ['Martes'],
            ['Miercoles'],
            ['Jueves'],
            ['Viernes'],
            ['Sabado'],
            ['Domingo'],
            ['Acumulado'],
        ]
        // $.each(info, function(index, value) {
        //     nombre.push(value['Nombre'])
        //     cantidades.push(value['cantidad_docs'])
        //     color.push(getRandomRgb())
        // })

        var data = {
            labels: semana,
            datasets: [{
                label: 'Semana anterior',
                data: info['semana_pasada'],
                borderColor: '#000',
                backgroundColor: "#EBB809",
            }, {
                label: 'Semana seleccionada',
                data: info['semana'],
                borderColor: '#000',
                backgroundColor: "#437793",
            }, ]
        };
        const config = {
            type: 'bar',
            data: data,
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: 'SERVICIOS DIARIOS REALIZADOS',
                        font: {
                            size: 16,
                        }
                    },

                },
                locale: 'en-US',
            }
        };

        var chart = document.getElementById('chartServiciosSem').getContext("2d")
        if (myChartServiciosSem) {
            myChartServiciosSem.destroy();
        }
        myChartServiciosSem = new Chart(
            chart,
            config
        );
        setTimeout(() => {
            $('#loadingLoad').modal('hide');
        }, 2000);
    }

    function getRandomRgb() {
        var num = Math.round(0xffffff * Math.random());
        var r = num >> 16;
        var g = num >> 8 & 255;
        var b = num & 255;
        return 'rgb(' + r + ', ' + g + ', ' + b + ', .7)';
    }



    function loadGridRecepcion() {
        $.ajax({
                url: "{{url('home/get_recepcion')}}",
                type: 'POST',
                dataType: 'json',
            })
            .done(function(resp) {
                setDataRecepcion(resp.dataRecepcion[0])
            })

            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }


    let myChartRecepcion;

    function setDataRecepcion(info) {


        // console.log(info)
        var data = {
            labels: ['Facturados', 'No facturados'],
            datasets: [{
                label: 'Cantidad',
                data: [info['facturados'], info['no_facturados']],
                backgroundColor: ['#28D10A', '#EBB809'],
            }]
        };
        const config = {
            type: 'pie',
            data: data,
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: 'TICKETS MENSUALES FACTURADOS',
                        font: {
                            size: 16,
                        }
                    },

                },
                locale: 'en-US',
            }
        };

        var chart = document.getElementById('chartRecepcion').getContext("2d")
        if (myChartRecepcion) {
            myChartRecepcion.destroy();
        }
        myChartRecepcion = new Chart(
            chart,
            config
        );

    }

    function loadGridAutos(tipo = 0, chartType = 0) {
        $.ajax({
                url: "{{url('home/get_autos')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    fecha: $('#fecha_mes_autos').val(),
                },
            })
            .done(function(resp) {
                setDataAutos(resp.dataAutos)
                // $('.btnLoadBalance').show('slow');
                // $('.btnLoadAbonos').show('slow');
                // $('.btnLoadPagos').show('slow');

            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });

    }


    let myChartAutos;

    function setDataAutos(info) {
        var año = info['anio'];
        var mes = info['mes'];

        const dias = [];

        var diasMes = new Date(año, mes, 0).getDate();
        var diasSemana = ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'];

        for (var dia = 1; dia <= diasMes; dia++) {
            var indice = new Date(año, mes - 1, dia).getDay();
            dias.push([diasSemana[indice] + " #" + dia])
        }

        dias.push(["Acumulado"])

        // console.log(dias);
        // console.log(info['autos']);

        var data = {
            labels: dias,
            datasets: [{
                label: 'Cantidad',
                data: info['autos'],
                borderColor: '#000',
                backgroundColor: "#437793",
            }]
        };


        const config = {
            type: 'bar',
            data: data,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: 'TOTAL DE AUTOS',
                        font: {
                            size: 16,
                        }
                    },

                },
                locale: 'en-US',
            }
        };


        var chart = document.getElementById('myChartAutos').getContext("2d")
        if (myChartAutos) {
            myChartAutos.destroy();
        }
        myChartAutos = new Chart(
            chart,
            config
        );
        setTimeout(() => {
            $('#loadingLoad').modal('hide');
        }, 2000);
    }
</script>
@endpush