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


@section('content')

    <style>
        #gridAutos th {
            font-size: 12px;
        }

        table {
            table-layout: fixed;
        }

        table td {
            word-wrap: break-word;
            max-width: 200px;
        }

        #gridAutos td {
            white-space: inherit;
        }
    </style>
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="col-4">
                                <h4 class="card-title">Estadísticas Autos</h4>
                            </div>

                            <div class="p-4 bg-light">
                                <p class="card-category"> Filtros</p>
                                <form action="estadisticas_autos/reporte" id="frm_reporte" method="post">
                                    @csrf
                                    <div class="row">
                                        <div class="col">
                                            <div class="form-group">
                                                <label>Sucursales </label>
                                                <select class="form-control" name="sucursal"
                                                        id="sucursal">
                                                    <option value="" disabled>-[Seleccione una opción]-</option>
                                                    <option value="" selected>TODAS</option>
                                                    @foreach($sucursales as $sucursal)
                                                        <option value="{{$sucursal->Id  }}">{{$sucursal->Descripcion}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="input-group input-group-static my-3">
                                                <label>Fecha</label>
                                                <input type="month" value="2024-10" name="fecha"
                                                       id="fecha" class="form-control">
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-check mb-3">
                                                <input class="form-check-input" type="radio" name="selectReporte"
                                                       id="selectReporte1" value="autos" checked>
                                                <label class="custom-control-label">
                                                    Autos
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="selectReporte"
                                                       id="selectReporte2" value="ventas">
                                                <label class="custom-control-label">
                                                    Ventas
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <button type="submit" class="btn btn-primary btn-lg">Aplicar</button>
                                            <button type="button" id="btn-download" class="btn btn-secondary btn-lg"
                                                    title="Descargar">
                                                <i class="fa fa-file-image-o" aria-hidden="true"></i>
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="row">

                                <div class="col-12 row">
                                    <canvas id="chartAutos"></canvas>

                                </div>
                            </div>
                            {{--<input type="text" id="numero_prueba" value="">--}}
                            {{--<input type="text" id="fecha_prueba" value="">--}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        let myChart;
        $("#frm_reporte").submit(function (event) {
            // debugger;
            event.preventDefault(); // Prevent the form from submitting via the browser
            var form = $(this);
            $.ajax({
                url: form.attr('action'),
                type: form.attr('method'),
                dataType: 'json',
                data: form.serialize()
            })
                .done(function (resp) {
                    // console.log(resp);

                    Swal.fire({
                        type: 'success',
                        title: 'Cargando datos',
                        text: 'Espere un momento',
                        showConfirmButton: false,
                        timer: 2000
                    });


                    setDataAutos(resp)
                })
                .fail(function (resp) {
                    // console.log("error");
                    Swal.fire({
                        type: 'error',
                        title: 'Oops...',
                        text: 'Ha ocurrido un problema inténtalo nuevamente más tarde'
                    })
                })
                .always(function () {
                    // console.log("complete");
                });
        });

        // let myChartAutos;

        function setDataAutos(resp) {

            let GNumero = 0;
            let GFecha = "";

            // Object.keys(resp).forEach(function (key) {
            $.each(resp, function (key, value) {
                GFecha += "'" + resp[key]['FechaDocumento'] + "', ";
                GNumero += Math.round(resp[key]['Numero']) + ', ';
            });
            GFecha = "[" + GFecha.substr(0, GFecha.length - 2) + "]";
            GNumero = "[" + GNumero.substr(1, GNumero.length - 3) + "]";

            let tipo = document.querySelector('input[name="selectReporte"]:checked').value;
            var color;
            var labelString;
            if (tipo == 'autos') {
                color = '#2196f3';
                labelString = 'Autos';
            } else {
                color = '#ff6384';
                labelString = 'Cantidad';
            }

            // console.log(GFecha);
            // console.log(GNumero);
            // console.log(eval(GNumero));

            if (myChart) {
                myChart.destroy();
            }
            let ctx = document.getElementById("chartAutos").getContext('2d');
            let data = {
                labels: eval(GFecha),
                datasets: [{
                    label: tipo,
                    data: eval(GNumero), // Specify the data values array
                    fill: false,
                    borderColor: color, // Add custom color border (Line)
                    backgroundColor: color, // Add custom color background (Points and Fill)
                    borderWidth: 1 // Specify bar border width
                }]
            };
            // console.log(data);
            myChart = new Chart(ctx, {
                type: 'bar',
                data: JSON.parse(JSON.stringify(data)),
                // data: eval(data),
                options: {
                    responsive: true, // Instruct chart js to respond nicely.
                    maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height
                    scales: {
                        yAxes: [
                            {
                                ticks: {
                                    callback: function (valor, index, valores) {
                                        return Number(valor).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                                    }
                                },
                                scaleLabel: {
                                    display: true,
                                    labelString: labelString
                                }
                            }
                        ],
                        xAxes: [
                            {
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Fechas'
                                }
                            }
                        ]
                    }
                }
            });
        }

        //Grafica
        var ctx = document.getElementById("chartAutos").getContext('2d');
        myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: [],
                datasets: [{
                    label: 'Autos',
                    data: [0], // Specify the data values array
                    fill: false,
                    borderColor: '#2196f3', // Add custom color border (Line)
                    backgroundColor: '#2196f3', // Add custom color background (Points and Fill)
                    borderWidth: 1 // Specify bar border width
                }]
            },
            options: {
                responsive: true, // Instruct chart js to respond nicely.
                maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height
            }
        });

        // Get the chart's base64 image string
        var image = myChart.toBase64Image();
        // console.log(image);

        document.getElementById('btn-download').onclick = function () {
            // Trigger the download
            var a = document.createElement('a');
            a.href = myChart.toBase64Image();
            a.download = 'Estadisticas_Autos' + Date.now() + '.png';
            a.click();
        }

    </script>
@endpush