@extends('layout.master')

@section('content')
    <section class="content pb-5">
        <div class="container-fluid">
            <meta name="csrf-token" content="{!! csrf_token() !!}">
            <div class="row">
                <div class="col-md-12">
                    <div class="overviewbtns">
                        <a href="{{ url('/home') }}" class="btn btn-secondary mr-2">Overview</a>
                        <a href="{{ url('/orders/dashboard') }}" class="btn btn-secondary mr-2">Orders</a>
                        <a href="{{ url('/dashboard/shipments') }}" class="btn btn-secondary mr-2 active">Shipments</a>
                        <a href="{{ url('/dashboard/weight-discrepancy') }}" class="btn btn-secondary mr-2">Weight
                            Discrepancy</a>
                        <a href="{{ url('/dashboard/ndr') }}" class="btn btn-secondary mr-2">NDR</a>
                        <a href="{{ url('/dashboard/rto') }}" class="btn btn-secondary mr-2">RTO </a>
                        <a href="{{ url('/dashboard/lsp-performance') }}" class="btn btn-secondary mr-2">LSP Performance</a>
                        <!-- <a href="{{ url('/dashboard/delays') }}" class="btn btn-secondary">Delays</a> -->
                    </div>
                </div>
            </div>



            <div class="row">
                <div class="col-md-2">
                    <div class="form-group custom-form-group">
                        <label class="form-label" for="customer">Date range</label>
                        <input class="form-control" placeholder="" type="text"
                            value="{{ date('d/m/Y', strtotime('-1 month +1 day')) . ' - ' . date('d/m/Y') }}"
                            id="date-range">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group custom-form-group">
                        <label class="form-label" for="customer">Select zone</label>
                        <select class="form-control" id="zone-filter">
                            <option value="">Select Zone</option>
                            @foreach ($zones as $key => $zone)
                                <option value="{{ $zone->name }}">{{ $zone->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group custom-form-group">
                        <label class="form-label" for="customer">Select LSP</label>
                        <select class="form-control" id="lsp-filter">
                            <option value="">Select LSP</option>
                            @foreach ($lsps as $key => $lsp)
                                <option value="{{ $lsp->id }}">{{ $lsp->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group custom-form-group">
                        <label class="form-label" for="customer">Select payment mode</label>
                        <select class="form-control" id="mode-filter">
                            <option value="">Select Payment Mode</option>
                            @foreach ($payment_modes as $key => $mode)
                                <option value="{{ $mode }}">{{ strtoupper($mode) }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>


            <div class="row pt-4">
                <div class="col-md-12">
                    <div class="table-responsive mb-3">
                        <table class="table table-striped" id="shipment-dashboard">
                            <thead>
                                <tr>
                                    <th scope="col">Lsp Name <img src="/assets/images/filter-icon.svg" alt="">
                                    </th>
                                    <th scope="col">Total Shipments</th>
                                    <th scope="col">RTO</th>
                                    <th scope="col">Pickup</th>
                                    <th scope="col">Delivered</th>
                                    <th scope="col">NDR Raised</th>
                                    <th scope="col">NDR Delivered</th>
                                    <th scope="col">Lost/Damaged</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>

                    <div class="pagination_rounded">
                        <!-- <ul>
                                <li>
                                    <a href="#" class="prev"> <i class="fa fa-chevron-left" aria-hidden="true"></i>
                                    </a>
                                </li>
                                <li><a href="#" class="active">1</a> </li>
                                <li class="hidden-xs"><a href="#">2</a> </li>
                                <li class="hidden-xs"><a href="#">3</a> </li>
                                <li class="hidden-xs"><a href="#">4</a> </li>
                                <li>
                                    <a href="#" class="next"> <i class="fa fa-chevron-right"
                                            aria-hidden="true"></i></a>
                                </li>
                            </ul> -->
                    </div>
                </div>
            </div>


            <div class="row py-4 pt-sm-4 pb-sm-5">

                <div class="col-md-12">
                    <div class="title-section">
                        <p>Zone wise contribution</p>
                    </div>

                    <div class="zone-box">
                        <canvas id="zoneChart" height="379" width="1138"
                            style="display: block; box-sizing: border-box; height: 379px; width: 1138px;"></canvas>
                    </div>
                </div>

            </div>



            <div class="row">
                <div class="col-md-3">
                    <div class="title-section">
                        <p>Zone Wise Contribution</p>
                    </div>

                    <div class="zone-box zone-data">

                        <canvas id="myChart" width="250" height="250"
                            style="display: block; box-sizing: border-box; height: 250px; width: 250px;"></canvas>

                        <div class="row mt-3">
                            <div class="col-md-4">
                                <p><img src="/assets/images/dot1.png" class="mr-2" alt=""> Zone A</p>
                            </div>
                            <div class="col-md-4">
                                <p><img src="/assets/images/dot2.png" class="mr-2" alt=""> Zone B</p>
                            </div>
                            <div class="col-md-4">
                                <p><img src="/assets/images/dot3.png" class="mr-2" alt=""> Zone C</p>
                            </div>
                            <div class="col-md-4">
                                <p><img src="/assets/images/dot4.png" class="mr-2" alt=""> Zone D</p>
                            </div>
                            <div class="col-md-4">
                                <p><img src="/assets/images/dot5.png" class="mr-2" alt=""> Zone E</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3" style="display:none">
                    <div class="title-section">
                        <p>Shipment Channel</p>
                    </div>

                    <div class="zone-box">

                        <div class="row">
                            <div class="col-md-12 channel-data">
                                <ul class="zone-detail">
                                    <li>Channels <span class="float-right">Orders</span> </li>
                                    <li>Magento-V2 <span class="float-right">155445</span></li>
                                    <li>Mannual Order <span class="float-right">3457</span></li>
                                    <li>Bulk Order <span class="float-right">512</span></li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- <div class="col-md-3">
                    <div class="title-section">
                        <p>Shipment’s Zone</p>
                    </div>

                    <div class="zone-box zone-data mt-0">

                        <canvas id="shipmentChart" width="250" height="250"
                            style="display: block; box-sizing: border-box; height: 250px; width: 250px;"></canvas>

                        <div class="row mt-3">
                            <div class="col-md-4">
                                <p><img src="/assets/images/dot1.png" class="mr-2" alt=""> Zone A</p>
                            </div>
                            <div class="col-md-4">
                                <p><img src="/assets/images/dot2.png" class="mr-2" alt=""> Zone B</p>
                            </div>
                            <div class="col-md-4">
                                <p><img src="/assets/images/dot3.png" class="mr-2" alt=""> Zone C</p>
                            </div>
                            <div class="col-md-4">
                                <p><img src="/assets/images/dot4.png" class="mr-2" alt=""> Zone D</p>
                            </div>
                            <div class="col-md-4">
                                <p><img src="/assets/images/dot5.png" class="mr-2" alt=""> Zone E</p>
                            </div>
                        </div>
                    </div>

                </div> -->

                <div class="col-md-3">
                    <div class="title-section">
                        <p>Delivery Chart</p>
                    </div>

                    <div class="zone-box zone-data mt-0">

                        <canvas id="deliveryChart" width="250" height="250"
                            style="display: block; box-sizing: border-box; height: 250px; width: 250px;"></canvas>

                        <div class="row mt-3">
                            <div class="col-md-4">
                                <p><img src="/assets/images/dot1.png" class="mr-2" alt=""> Zone A</p>
                            </div>
                            <div class="col-md-4">
                                <p><img src="/assets/images/dot2.png" class="mr-2" alt=""> Zone B</p>
                            </div>
                            <div class="col-md-4">
                                <p><img src="/assets/images/dot3.png" class="mr-2" alt=""> Zone C</p>
                            </div>
                            <div class="col-md-4">
                                <p><img src="/assets/images/dot4.png" class="mr-2" alt=""> Zone D</p>
                            </div>
                            <div class="col-md-4">
                                <p><img src="/assets/images/dot5.png" class="mr-2" alt=""> Zone E</p>
                            </div>
                            <div class="col-md-4">
                                <p><img src="/assets/images/dot6.png" class="mr-2" alt=""> Zone E</p>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>


        <div class="row pt-4 pt-sm-5">
            <div class="col-md-12">
                <div class="title-section">
                    <p>LSP wise Shipment Lost Contribution</p>
                </div>

                <div class="zone-box">
                    <div class="row">
                        <div class="col-md-9 col-12">
                            <h6>Total Contribution</h6>
                            <canvas id="lspChart" height="287" width="861"
                                style="display: block; box-sizing: border-box; height: 287px; width: 861px;"></canvas>
                        </div>

                       <!--  <div class="col-md-3 col-12">
                            <div class="row">
                                <div class="col-md-10 col-10">
                                    <h6>$482.85k</h6>
                                    <span>Last month balance $234.40k</span>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-2 col-2">
                                    <div class="icon-box">
                                        <img src="/assets/images/img-3.svg" alt="">
                                    </div>
                                </div>
                                <div class="col-md-10 col-6">
                                    <div class="icon-box-content">
                                        <h5 class="mb-0">$48,568.20</h5>
                                        <p>Total Profit</p>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-2 col-2">
                                    <div class="icon-box bg-secondary">
                                        <img src="/assets/images/img-1.svg" alt="">
                                    </div>
                                </div>
                                <div class="col-md-10 col-6">
                                    <div class="icon-box-content">
                                        <h5 class="mb-0">$48,568.20</h5>
                                        <p>Total Profit</p>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-2 col-2">
                                    <div class="icon-box bg-secondary">
                                        <img src="/assets/images/img-2.svg" alt="">
                                    </div>
                                </div>
                                <div class="col-md-10 col-6">
                                    <div class="icon-box-content">
                                        <h5 class="mb-0">$48,568.20</h5>
                                        <p>Total Profit</p>
                                    </div>
                                </div>
                            </div>

                            <button type="button" class="btn btn-primary btn-block">VIEW REPORT</button>


                        </div> -->


                    </div>
                </div>

            </div>
        </div>
    </section>

    <script>
        // Chart 1



        var e = document.getElementById('zoneChart').getContext('2d');
        var zoneChart = new Chart(e, {
            type: 'bar',
            data: {
                labels: ['Xpressbess Surface', 'Delivery', 'Delivery Essential', 'Others'],
                datasets: [{
                        label: "Zone A",
                        type: "bar",
                        stack: "Base",
                        backgroundColor: "#85e085",
                        data: [19, 0, 0, 0, 0, 0, ],
                    }, {
                        label: "Zone B",
                        type: "bar",
                        stack: "Base",
                        backgroundColor: "#9999ff",
                        data: [2, 0, 0, 0, 0, 0, ],
                    }, {
                        label: "Zone C",
                        backgroundColor: "#85e085",
                        data: [20, 5, 0, 0, 0, 0, ],
                    }, {
                        label: "Zone D",
                        backgroundColor: "#85e085",
                        data: [15, 3, 5, 0, 0, 0, ],
                    },

                    {
                        label: "Zone E",
                        type: "bar",
                        stack: "base",
                        backgroundColor: "#85e085",
                        data: [58, 21, 8, 23, 0, 0, ],
                    }, {
                        label: "Zone F",
                        type: "bar",
                        stack: "base",
                        backgroundColor: " #9999ff",
                        backgroundColorHover: "#9999ff",
                        data: [3, 5, 0, 0, 0, 0, ]
                    }, {
                        label: "Zone G",
                        backgroundColor: "#85e085",
                        data: [5, 3, 0, 0, 0, 0, ],
                    },
                ]
            },

            options: {
                plugins: {
                    title: {
                        display: true,
                    },
                }

            }
        });


        //console.log('+++++zoneChartDataLabels+++++++',);
        //console.log('+++++zoneChartDatasets+++++++',zoneChart.data.datasets);

        // -------

        // Chart 2

        var m = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(m, {
            type: 'doughnut',
            data: {
                labels: ['Last Month', 'Prepaid', 'COD', 'x', 'y', 'z', 'w', 'r'],
                datasets: [{
                    label: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'],
                    data: [200, 200, 100, 40, 30, 30, 58, 86],
                    backgroundColor: [
                        '#FF0000', '#049CFF', '#0000ff', '#ff8000', '#ff3377', '#00ff80'
                    ],
                    hoverOffset: 1,
                    borderWidth: 0
                }]
            },
            options: {
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });

        // Chart 3

        // var s = document.getElementById('shipmentChart').getContext('2d');
        // var shipmentChart = new Chart(s, {
        //     type: 'doughnut',
        //     data: {
        //         labels: ['Last Month', 'Prepaid', 'COD', 'a', 'b', 'c', 'd', 'e', 'f'],
        //         datasets: [{
        //             data: [200, 200, 200, 40, 500, 600, 700, 800],
        //             backgroundColor: [
        //                 '#bb99ff', '#33ffad', '#ffa31a', '#ffccdd',
        //             ],
        //             hoverOffset: 1,

        //             borderWidth: 0
        //         }]
        //     },
        //     options: {
        //         plugins: {
        //             legend: {
        //                 display: false
        //             }
        //         }
        //     }
        // });

        // Chart 4

        var a = document.getElementById('deliveryChart').getContext('2d');
        var deliveryChart = new Chart(a, {
            type: 'doughnut',
            data: {
                labels: ['Last Month', 'Prepaid', 'COD', 'a', 'b', 'c', 'd', 'e', 'f'],
                datasets: [{
                    data: [200, 200, 200, 40, 500, 600, 700, 800],
                    backgroundColor: [
                        '#049CFF', '#6EC1F9', '#B6EDFF', '#079ED1', '#65D8FF', '#35C8FF'
                    ],
                    hoverOffset: 1,

                    borderWidth: 0
                }]
            },
            options: {
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });



        // Chart 5

        var d = document.getElementById('lspChart').getContext('2d');
        var lspChart = new Chart(d, {
            type: 'bar',
            data: {
                labels: ['2015', '2016', '2017', '2018', '2019', '2020', '2021'],
                datasets: [{
                    label: 'Zone',
                    data: [65, 59, 80, 81, 56, 55, 40],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)',
                        'rgba(153, 102, 255, 0.2)', 'rgba(201, 203, 207, 0.2)'
                    ],
                    borderColor: [
                        'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)',
                        'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)',
                        'rgb(201, 203, 207)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    x: {
                        beginAtZero: true,
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });

        $(document).ready(function() {

            $('#date-range').daterangepicker({
                locale: {
                    format: 'DD/MM/YYYY'
                },
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')]
                },
                autoApply: true,
            });

            let example = $("#shipment-dashboard").DataTable({
                "language": {
                    "zeroRecords": "No record(s) found."
                },
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                order: [
                    [1, 'asc']
                ],
                processing: true,
                serverSide: true,
                lengthChange: true,
                order: [0, 'asc'],
                searchable: true,
                bStateSave: false,

                ajax: {
                    url: "{{ url('shipment/dashboard/datatable') }}",
                    data: function(d) {
                        d.zone = $('#zone-filter').val();
                        d.mode = $('#mode-filter').val();
                        d.lsp = $('#lsp-filter').val();
                        d.date_range = $('#date-range').val();
                        /*  d.startDate = startDate;
                          d.endDate = endDate;
                          d.customChannel = customChannelFilters;
                          d.order_id = orderIdFiltersData;
                          d.sku = searchBySkuData;
                          d.mobile_number = searchByMobileNumberData;*/
                    }
                },

                columns: [{
                        data: 'lsp_name',
                        name: 'lsp_name',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    }, {
                        data: 'total_shipment',
                        name: 'total_shipment',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    }, {
                        data: 'rto',
                        name: 'rto',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    }, {
                        data: 'pickup_scheduled',
                        name: 'pickup_scheduled',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    }, {
                        data: 'intransit_delivered',
                        name: 'intransit_delivered',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    }, {
                        data: 'ndr_raised',
                        name: 'ndr_raised',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    }, {
                        data: 'intransit_delivered',
                        name: 'intransit_delivered',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    }, {
                        data: 'lost_damage',
                        name: 'lost_damage',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    },

                ],
                select: {
                    style: 'multi',
                },
            });

            $('#custum-loader').removeClass('hidden');

            zoneDataBarGraph();
            zoneShipmentDonutData();
            zoneDeliveredDonutData();
            shipmentLostGraphData();
        });

        $('#zone-filter, #mode-filter, #lsp-filter, #date-range').change(function() {
            $("#shipment-dashboard").DataTable().draw();
            zoneDataBarGraph();
            zoneShipmentDonutData();
            zoneDeliveredDonutData();
            shipmentLostGraphData();
        });

        //Ajax Calling for graph Data Contribution with zone data bar graph

        function zoneDataBarGraph() {
            jQuery.ajax({
                url: "{{ route('shipment-graph-data') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    userAddressFormArray: '',
                    zone: $('#zone-filter').val(),
                    mode: $('#mode-filter').val(),
                    lsp: $('#lsp-filter').val(),
                    date_range: $('#date-range').val(),
                },
                success: function(data) {

                    zoneChart.data.labels = [];
                    zoneChart.data.datasets = [];
                    let shipmentData = [];
                    //myChart.data.datasets = [];
                    // myChart.data.labels = [];

                    jQuery.each(data.data, function(key, value) {

                        zoneChart.data.labels.push(value.lsp_name);

                        shipmentData.push(value.zone_shipment);

                    });

                    let mpclData = [];
                    let blueDartData = [];



                    jQuery.each(shipmentData, function(zoneKey, zoneValue) {
                        if (zoneKey == 0) {
                            mpclData = zoneValue;
                        } else if (zoneKey == 1) {
                            blueDartData = zoneValue;
                        }


                    });

                    jQuery.each(mpclData, function(zoneKeyMpcl, zoneValueMpcl) {

                        /*myChart.data.labels.push(zoneValueMpcl.zone);*/

                        zoneChart.data.datasets.push({
                            label: zoneValueMpcl.zone,
                            type: "bar",
                            stack: "Base",
                            backgroundColor: "#" + zoneValueMpcl.color_code,
                            data: [zoneValueMpcl.value, 0, 0, 0, 0, 0, 0, 0],
                        });

                    });

                    jQuery.each(zoneChart.data.datasets, function(zoneKeyDatas, zoneValueDatas) {
                        zoneValueDatas.data[1] = blueDartData[zoneKeyDatas]['value'];
                    });

                    zoneChart.update();

                    $('#custum-loader').addClass('hidden');


                }
            });
        }

        //Ajax Calling for graph Data Contribution with donut pie chart

        function zoneShipmentDonutData() {
            jQuery.ajax({
                url: "{{ route('zone-shipment-donut-data') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    userAddressFormArray: '',
                    zone: $('#zone-filter').val(),
                    mode: $('#mode-filter').val(),
                    lsp: $('#lsp-filter').val(),
                    date_range: $('#date-range').val(),
                },
                success: function(data) {
                    myChart.data.labels = [];
                    myChart.data.datasets = [];

                    let dataArr = [];
                    let backgroundColorArray = [];

                    jQuery.each(data.data, function(key, value) {
                        myChart.data.labels.push(value.zone);
                        dataArr.push(value.total_shipment_count);
                        backgroundColorArray.push(value.color);
                    });

                    myChart.data.datasets.push({
                        'data': dataArr,
                        'backgroundColor': backgroundColorArray
                    })

                    myChart.update();

                }
            });
        }

        //Ajax Calling for graph Data Contribution with donut pie chart

        function zoneDeliveredDonutData() {
            jQuery.ajax({
                url: "{{ route('zone-delivered-donut-data') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    userAddressFormArray: '',
                    zone: $('#zone-filter').val(),
                    mode: $('#mode-filter').val(),
                    lsp: $('#lsp-filter').val(),
                    date_range: $('#date-range').val(),
                },
                success: function(data) {
                    console.log("delivered zonewise : ",data);
                    deliveryChart.data.labels = [];
                    deliveryChart.data.datasets = [];

                    let dataArr = [];
                    let backgroundColorArray = [];

                    jQuery.each(data.data, function(key, value) {
                        deliveryChart.data.labels.push(value.zone);
                        dataArr.push(value.value);
                        backgroundColorArray.push(value.color_code);
                    });
                    
                    deliveryChart.data.datasets.push({
                        'data': dataArr,
                        'backgroundColor': backgroundColorArray
                    });

                    deliveryChart.update();

                }
            });
        }

        //Ajax Calling for graph Data Contribution with LostData

        function shipmentLostGraphData() {
            jQuery.ajax({
                url: "{{ route('shipment-lost-graph-data') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    userAddressFormArray: '',
                    zone: $('#zone-filter').val(),
                    mode: $('#mode-filter').val(),
                    lsp: $('#lsp-filter').val(),
                    date_range: $('#date-range').val(),
                },
                success: function(data) {
                    console.log(data);

                    // console.log('+++++++++++LostResponseData', data.data);

                    // console.log('+++++++++++LspChartsData+++++++', );

                    lspChart.data.labels = [];
                    lspChart.data.datasets['0']['backgroundColor'] = [];
                    lspChart.data.datasets['0']['borderColor'] = [];
                    lspChart.data.datasets['0']['data'] = [];
                    lspChart.data.datasets['0']['borderWidth'] = 1;

                    lspChart.data.datasets = [];

                    let dataArr = [];
                    let backgroundColorArray = [];
                    let borderColorArr = [];

                    jQuery.each(data.data, function(key, value) {
                        lspChart.data.labels.push(value.lsp);
                        dataArr.push(value.value);
                        backgroundColorArray.push(value.color_code);
                        borderColorArr.push(value.border_color_code);
                    });

                    lspChart.data.datasets.push({
                        'data': dataArr,
                        'backgroundColor': backgroundColorArray,
                        'borderColor': borderColorArr,
                        'borderWidth': 1
                    });
                    lspChart.update();
                }
            });
        }
    </script>
@endsection