@extends('layouts.app')
@push('page_css')
    <link href="{{ asset('assets') }}/plugins/select2/css/select2.min.css" rel="stylesheet">
@endpush
@section('content')
    <div class="page-info">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url('/home') }}">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">Historial de producción</li>
            </ol>
        </nav>
    </div>

    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-12">
                    <h1>Historial de producción</h1>
                </div>
            </div>
        </div>
    </section>

    <div class="content px-3">
        <div class="card">
            <div class="row" style="width:100%">
                <div class="col-sm-6">
                    <div class="row" style="padding:30px 30px 0">
                        <div class="col-sm-6 form-group">
                            <!-- Weight Field -->
                            {!! Form::label('weight', 'Filtra por producto del mes de ' . now()->format('M') . ':') !!}
                            <select name="" id="filter_product" class="filter_product">
                                @foreach ($product_filter as $item)
                                    <option value="{!! $item->id !!}" {!! $producto_only->product->id == $item->id ? 'selected' : null !!}
                                        data-nombre="{!! $item->description !!}" />
                                    {!! $item->description !!}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-sm-6 form-group ">
                            {!! Form::label('year', 'Filtra producto por mes') !!}
                            {!! Form::text('mes', null, ['class' => 'date form-control', 'id' => 'mes']) !!}
                        </div>
                        <div class="col-sm-12">
                            <h4 class="nombre_prodcuto">
                                {!! $producto_only->product->description !!}
                            </h4>
                        </div>
                    </div>
                    <div class="table-responsive removeData">
                        <table id="zero-conf" class="display" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Fecha</th>
                                    <th>Cantidad</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($productos as $producto)
                                    <tr>
                                        <td>{{ $producto->created_at->format('Y-m-d') }}</td>
                                        <td>{{ $producto->cantidad }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="table-responsive addTbale"></div>
                </div>
                <div class="col-sm-6">
                    <h5 class="card-title" style="padding-top:55px">Historial</h5>
                    {{-- <div id="chart" style="width:100%"></div> --}}
                    <canvas id="myChart" width="100%"></canvas>
                </div>
                <!-- Submit Field -->
                <div class="card-footer col-sm-12" style="margin-top:30px">
                    <div class="form-group  flex-content">
                        <a type="button" href="{{ route('devices.show', [$id]) }}" class="btn btn-light">VOLVER</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('page_scripts')
    <script src="{{ asset('assets') }}/plugins/select2/js/select2.full.min.js"></script>
    <script src="{!! asset('assets') !!}/plugins/apexcharts/dist/apexcharts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    </body>
    <script>
        var nombre = "{!! $producto_only->product->description !!}";
        var id_device = "{!! $id !!}";
        var url_dinamica = "{!! url('/') !!}";
        let myChart;
        var id_prodcuto = "{!! $producto_only->product->id !!}";
        var jsonSemanas = [];

        $(`#filter_product`).select2();
        initialDataTable(); 

        $('.dataTables_length').remove();
        $('.dataTables_filter').remove();
        $('.date').datetimepicker({
            format: 'MMMM',
            viewMode: "months",
            useCurrent: true,
            icons: {
                up: "icon-arrow-up-circle icons font-2xl",
                down: "icon-arrow-down-circle icons font-2xl"
            },
            sideBySide: true
        });

        $(`#filter_product`).on('change', function() {
            var id = $(this).val();
            id_prodcuto = id;
            nombre = $(`#filter_product option:selected`).data('nombre');
            let llamada = `${url_dinamica}/get-history-product/${id_device}/${id}`;

            fetch(llamada)
                .then(response => response.json())
                .then(value => {
                    if (myChart) {
                        myChart.destroy();
                    }
                    $('.nombre_prodcuto').text(nombre);
                    const labels = @JSON($dates);
                    const data = {
                        labels: labels,
                        datasets: [{
                            label: nombre,
                            data: value.data.cantidad,
                            borderColor: '#FF6600',
                            backgroundColor: '#FF6600',
                            yAxisID: 'y',
                        }, ]
                    };
                    const config = {
                        type: 'line',
                        data: data,
                        options: {
                            responsive: true,
                            interaction: {
                                mode: 'index',
                                intersect: false,
                            },
                            stacked: false,
                            scales: {
                                y: {
                                    type: 'linear',
                                    display: true,
                                }
                            }
                        },
                    };

                    // Chart declaration:
                    myChart = new Chart(
                        document.getElementById('myChart'),
                        config
                    );
                    $(`.removeData`).remove();
                    conDatos(value.data.productos);
                })
                .catch(error => console.log(error));
        });



        $('#mes').on('dp.hide', function(e) {
            var date = e.date.format('YYYY-MM-DD');
            //si tenemos datos se cargan y genera el js en caso contrario se crea uno nuevo y se crea el json
            // let product_id = $('#product_id').val();
            let llamada = `${url_dinamica}/get-history-month/${id_device}/${id_prodcuto}/${date}`;

            fetch(llamada)
                .then(response => response.json())
                .then(value => {
                    console.log(value);
                    if (myChart) {
                        myChart.destroy();
                    }
                    const labels = value.data.dias;
                    const data = {
                        labels: labels,
                        datasets: [{
                            label: nombre,
                            data: value.data.cantidad,
                            borderColor: '#FF6600',
                            backgroundColor: '#FF6600',
                            yAxisID: 'y',
                        }, ]
                    };
                    const config = {
                        type: 'line',
                        data: data,
                        options: {
                            responsive: true,
                            interaction: {
                                mode: 'index',
                                intersect: false,
                            },
                            stacked: false,
                            scales: {
                                y: {
                                    type: 'linear',
                                    display: true,
                                }
                            }
                        },
                    };

                    // Chart declaration:
                    myChart = new Chart(
                        document.getElementById('myChart'),
                        config
                    );
                    $(`.removeData`).remove();
                    conDatos(value.data.productos);
                })
                .catch(error => console.log(error));

        });

        const labels = @JSON($dates);

        const data = {
            labels: labels,
            datasets: [{
                label: nombre,
                data: @JSON($data),
                borderColor: '#FF6600',
                backgroundColor: '#FF6600',
                yAxisID: 'y',
            }, ]
        };

        const config = {
            type: 'line',
            data: data,
            options: {
                responsive: true,
                interaction: {
                    mode: 'index',
                    intersect: false,
                },
                stacked: false,
                scales: {
                    y: {
                        type: 'linear',
                        display: true,
                    }
                }
            },
        };

        // Chart declaration:
        myChart = new Chart(
            document.getElementById('myChart'),
            config
        );


        function crearTablaProductos() {
            let tabla = '<table class="table table-bordered" id="zero-conf">';
            tabla += '<thead>';
            tabla += '<tr>';
            tabla += '<th>Fechas</th>';
            tabla += '<th>Cantidad</th>';
            tabla += '</tr>';
            tabla += '</thead>';
            tabla += '<tbody>';

            for (let index = 0; index < jsonSemanas.length; index++) {
                tabla += '<tr>';
                tabla += '<td>' + jsonSemanas[index].cantidad + '</td>';
                tabla += '<td>' + nombre + '</td>';
                tabla += '</tr>';
            }

            tabla += '</tbody>';
            tabla += '</table>';

         
            return tabla;
        }

        function conDatos(datos) {
            jsonSemanas = datos;
            let tablaSemanas = crearTablaProductos();
            $('.addTbale').html(tablaSemanas);
            initialDataTable();
            $('.dataTables_length').remove();
            $('.dataTables_filter').remove();
        }


        function initialDataTable() {
            $('#zero-conf').DataTable({
                order: [0, 'desc'],
                language: {
                    "decimal": "",
                    "emptyTable": "No hay información",
                    "info": "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
                    "infoEmpty": "Mostrando 0 a 0 de 0 Entradas",
                    "infoFiltered": "(Filtrado de _MAX_ total entradas)",
                    "infoPostFix": "",
                    "thousands": ",",
                    "lengthMenu": "Mostrar _MENU_ Entradas",
                    "loadingRecords": "Cargando...",
                    "processing": "Procesando...",
                    "search": "Buscar:",
                    "zeroRecords": "Sin resultados encontrados",
                    "paginate": {
                        "first": "Primero",
                        "last": "Ultimo",
                        "next": "Siguiente",
                        "previous": "Anterior"
                    }
                },
            })
        }

    </script>
@endpush