@extends('layout.master')

@section('content')

    <section class="content pb-5">
        <div class="container-fluid">

            <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">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 active">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>

        <form method="get" id="rto-filter-form">
            <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" name="date" 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" name="zone" 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" name="lsp" 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" name="mode" 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>
        </form>
            <!-- ==================================  -->

            <div class="row">
            <!-- row -----------  -->
                <div class="col-md-3">
                    <div class="zone-box">
                        <div class="weight-box">
                            <div class="row align-items-center">
                                    <div class="col-md-12 ">
                                    <div class="rto-head mb-2">
                                        <h1 style="font-size:15px; text-align: center; padding-bottom: 10px;border-bottom: 1px solid black;">Total RTO</h1>
                                    </div>
                                </div>

                                <div class="col-md-5 col-5">
                                    <h4><img src="/assets/images/uparrow.svg" alt="" height="25px"
                                            class="downarrow mr-2">{{$total_rto}}</h4>
                                    <h4>
                                    </h4>
                                </div>
                                <div class="col-md-7 col-7">
                                    <p class="mb-0 f-18">This Year {{date('Y')}}<span
                                            class="f-20 font-weight-bold text-dark">{{$current_year_rto}}</span> </p>
                                    <p class="">Last Year {{date('Y',strtotime('-1 years'))}} <span
                                            class="f-20 font-weight-bold text-dark">{{$previous_year_rto}}</span> </p>
                                </div>
                                <div class="col-md-6">
                                    <!-- <p class="text-center  mt-2">Total Rto</p> -->
                                </div>
                                <div class="col-md-6">
                                    <!--  <button type="button" class="btn btn-danger mt-2 f-12">Total Rto</button> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="zone-box">
                        <div class="weight-box">
                            <div class="row align-items-center">
                                    <div class="col-md-12 ">
                                    <div class="rto-head mb-2">
                                        <h1 style="font-size:15px; text-align: center; padding-bottom: 10px;border-bottom: 1px solid black;">Total RTO Percentage</h1>
                                    </div>
                                </div>
                                <div class="col-md-6 col-5 mr-0 pr-0">
                                    <h4><img src="/assets/images/downarrow.svg" alt="" height="25px"
                                            class="downarrow mr-2">{{$total_rto_percentage}}%</h4>
                                    <h4>
                                    </h4>
                                </div>
                                <div class="col-md-6 col-7">
                                    <p class="mb-0 f-18">This Year - {{date('Y')}}<span
                                            class="f-20 font-weight-bold text-dark">{{$current_year_rto_percentage}}%</span> </p>
                                    <p class="">Last Year - {{date('Y',strtotime('-1 years'))}}<span
                                            class="f-20 font-weight-bold text-dark">{{$previous_year_rto_percentage}}%</span> </p>
                                </div>
                                <div class="col-md-6">
                                    <!-- <p class="text-center mt-2">Total Rto Percentage</p> -->
                                </div>
                                <div class="col-md-6">
                                    <!-- <button type="button" class="btn btn-danger mt-2 f-12">Total Rto Percentage</button> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-5">
                    <div class="zone-box">
                        <div class="weight-box">
                            <div class="row align-items-center">
                                <div class="col-md-12 ">
                                    <div class="rto-head mb-2">
                                        <h1 style="font-size:15px; text-align: center; padding-bottom: 10px;border-bottom: 1px solid black;">RTO Initiated</h1>
                                    </div>
                                </div>
                                <!-- <div class="col-md-12 d-flex"> -->

                                <div class="row w-100">
                                    <div class="col-md-4">
                                        <h4 class="mr-2"><img src="/assets/images/downarrow.svg" alt=""
                                            height="20px" class="downarrow mr-2">{{$rto_initiated}}</h4>
                                        <h4>
                                    </div>

                                    <div class="col-md-8">
                                        <p class="mb-0 mt-2">RTO Pending For Approval -<span
                                           class="f-10 font-weight-bold text-dark">{{$rto_pending_for_approval}}</span> </p>
                                        <p>RTO Intransit After Approval - <span class="f-10 font-weight-bold text-dark">{{$rto_intransit_post_approval}}</span>
                                        </p>
                                    </div>
                                </div>

                                    <!-- <h4 class="mr-2"><img src="/assets/images/downarrow.svg" alt=""
                                            height="20px" class="downarrow mr-2">{{$rto_initiated}}</h4>
                                    <h4> -->
                                        <!-- <p class="mb-0 mt-2">RTO Pending For Approval -<span
                                                class="f-10 font-weight-bold text-dark">{{$rto_pending_for_approval}}</span> </p>
                                        <p>RTO Intransit After Approval - <span class="f-10 font-weight-bold text-dark">{{$rto_intransit_post_approval}}</span>
                                        </p> -->
                                    <!-- </h4> -->
                                <!-- </div> -->

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

                <div class="col-md-4 mt-3">
                            <div class="zone-box">
                                <div class="weight-box">
                                    <div class="row align-items-center">
                                        <div class="col-md-12 ">
                                            <div class="rto-head mb-2">
                                                <h1 style="font-size:15px; text-align: center; padding-bottom: 10px;border-bottom: 1px solid black;">RTO Undelivered</h1>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <!-- <h4 class="mr-2"><img src="/assets/images/downarrow.svg" alt=""
                                                    height="20px" class="downarrow mr-2">{{$rto_undelivered}}</h4>
                                            <h4>
                                                <p class="mb-0 mt-2">This Year 2022 -<span
                                                        class="f-10 font-weight-bold text-dark">5</span> </p>
                                                <p>Last Year - <span class="f-10 font-weight-bold text-dark">152</span>
                                                </p>
                                            </h4> -->

                                        <div class="row">
                                            <div class="col-md-5">
                                                <h4 class="mr-2"><img src="/assets/images/downarrow.svg" alt=""
                                                    height="20px" class="downarrow mr-2">{{$rto_undelivered}}</h4>
                                                <h4>
                                            </div>

                                            <div class="col-md-7">
                                                <p class="mb-0 mt-2">Total Approved -<span
                                                        class="f-10 font-weight-bold text-dark">{{$total_approved_rto}}</span> </p>
                                                <p>Total Intransit - <span class="f-10 font-weight-bold text-dark">{{$rto_intransit_post_approval}}</span>
                                                </p>
                                            </div>
                                        </div>

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

                        <div class="col-md-4 mt-3">
                            <div class="zone-box">
                                <div class="weight-box">
                                    <div class="row align-items-center">
                                        <div class="col-md-12 ">
                                            <div class="rto-head mb-2">
                                                <h1 style="font-size:15px; text-align: center; padding-bottom: 10px;border-bottom: 1px solid black;">RTO Delivered</h1>
                                            </div>
                                        </div>
                                        <div class="col-md-12 d-flex">
                                            <h4 class="mr-2"><img src="/assets/images/downarrow.svg" alt=""
                                                    height="20px" class="downarrow mr-2">{{$rto_delivered}}</h4>
                                            <h4>
                                                <p class="mb-0 mt-2">Total In Transit -<span
                                                        class="f-10 font-weight-bold text-dark">{{$rto_intransit_post_approval}}</span> </p>
                                                <p>Total Approved - <span class="f-10 font-weight-bold text-dark">{{$total_approved_rto}}</span>
                                                </p>
                                            </h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>



            <!-- row -----------  -->
            </div>

            <div class="row mt-4">
                <div class="col-md-4">
                    <div class="title-section">
                        <p>RTO Status</p>
                    </div>

                    <div class="zone-box">
                    <canvas id="statusGraph" height="314" width="349"
                            style="display: block; box-sizing: border-box; height: 314px; width: 349px;"></canvas>
                            <div id="no-data-status-chart" class="mt-1 hidden" style="margin-left: 145px"><strong>No Record Found</strong></div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="title-section">
                        <p>RTO Percentage</p>
                    </div>
                    <div class="zone-box">
                        <canvas id="percentChart" width="349" height="314"
                            style="display: block; box-sizing: border-box; height: 314px; width: 349px;"></canvas>
                            <div id="no-data-percent-chart" class="mt-1 hidden" style="margin-left: 145px"><strong>No Record Found</strong></div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="title-section">
                        <p>RTO Count</p>
                    </div>

                    <div class="zone-box">
                        <canvas id="countChart" height="256" width="349"
                            style="display: block; box-sizing: border-box; height: 256px; width: 349px;"></canvas>
                            <div id="no-data-count-chart" class="mt-1 hidden" style="margin-left: 145px"><strong>No Record Found</strong></div>
                    </div>
                </div>

                <div class="col-md-4" style="display:none;">
                    <div class="title-section">
                        <p>RTO Reasons</p>
                    </div>
                    <div class="zone-box">
                        <canvas id="reasonChart" height="314" width="349"
                            style="display: block; box-sizing: border-box; height: 314px; width: 349px;"></canvas>
                    </div>
                </div>

            </div>


            <div class="row py-4 py-sm-5 ">
                <div class="col-md-6">
                    <div class="title-section">
                        <p>Top RTO – Pin Codes</p>
                    </div>

                    <div class="zone-box">
                        <table class="table table-striped" id="top-pincodes-rto">
                            <thead>
                                <tr>
                                    <th scope="col">Pincodes</th>
                                    <th scope="col">RTO Count</th>
                                    <th scope="col">Percentage</th>
                                </tr>
                            </thead>
                            <tbody>

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

                <div class="col-md-6">
                    <div class="title-section">
                        <p>Top RTO – City</p>
                    </div>

                    <div class="zone-box">
                        <table class="table table-striped" id="top-cities-rto-data">
                            <thead>
                                <tr>
                                    <th scope="col">City</th>
                                    <th scope="col">RTO Count</th>
                                    <th scope="col">Percentage</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="col-md-6">
                    <div class="title-section">
                        <p>Top RTO – Courier</p>
                    </div>

                    <div class="zone-box">
                        <table class="table table-striped" id="top-courier-rto-data">
                            <thead>
                                <tr>
                                    <th scope="col">City</th>
                                    <th scope="col">RTO Count</th>
                                    <th scope="col">Percentage</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="title-section">
                        <p>Top RTO – Customer</p>
                    </div>

                    <div class="zone-box">
                        <table class="table table-striped" id="top-customers-rto-data">
                            <thead>
                                <tr>
                                    <th scope="col">Customer</th>
                                    <th scope="col">RTO Count</th>
                                    <th scope="col">Percentage</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </section>

    <script>
        // Chart 1

        let monthRto = ;
        let rtoCount = ;
        
        var m = document.getElementById('countChart').getContext('2d');
        var countChart = new Chart(m, {
            type: 'line',
            data: {
                labels: monthRto,
                datasets: [{
                    label: 'RTO Count',
                    data: rtoCount,
                    fill: false,
                    borderColor: 'rgb(75, 192, 192)',
                    tension: 0.1
                }]

            },
            options: {

                plugins: {
                    legend: {
                        display: false
                    }
                }
            }

        });
        if(rtoCount.length == 0){
                $('#no-data-count-chart').removeClass('hidden');
        }


        // Chart 2

        let rtoFinalArray = null;

        var e = document.getElementById('percentChart').getContext('2d');
        var percentChart = new Chart(e, {
            type: 'line',
            data: {
                labels: rtoFinalArray['month'],
                datasets: [{
                    label: 'RTO Percentage',
                    data: rtoFinalArray['percentage'],
                    fill: false,
                    borderColor: 'rgb(75, 192, 192)',
                    tension: 0.1
                }]

            },
            options: {

                plugins: {
                    legend: {
                        display: false
                    }
                }
            }

        });
        if(rtoFinalArray['month'].length == 0){
                $('#no-data-percent-chart').removeClass('hidden');
        }

        // Chart 4

        var m = document.getElementById('statusGraph').getContext('2d');
        var reasonChart = new Chart(m, {
            type: 'bar',
            data: {
                labels: monthRto,
                datasets: [{
                    label: 'RTO Status',
                    data: rtoCount,
                    backgroundColor: '#D8FFDF',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    x: {
                        beginAtZero: true,
                        display: true
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }

        });
        if(rtoCount.length == 0){
                $('#no-data-status-chart').removeClass('hidden');
        }

        var m = document.getElementById('reasonChart').getContext('2d');
        var reasonChart = new Chart(m, {
            type: 'bar',
            data: {
                labels: ['january', 'Feburary', 'March', 'April'],
                datasets: [{
                    label: 'RTO Reasons',
                    data: [10, 20, 30, 40],
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    x: {
                        beginAtZero: true,
                        display: false
                    }
                },
                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 = $("#top-pincodes-rto").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('top-pincodes-rto-data') }}",
                    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: 'pincodeData',
                        name: 'pincodeData',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'order_count',
                        name: 'order_count',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'order_percentage',
                        name: 'order_percentage',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    },
                ],
                select: {
                    style: 'multi',
                },
            });

        let example1 = $("#top-cities-rto-data").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('top-cities-rto-data') }}",
                    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: 'pincodeData',
                        name: 'pincodeData',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'order_count',
                        name: 'order_count',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'order_percentage',
                        name: 'order_percentage',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    },
                ],
                select: {
                    style: 'multi',
                },
            });

        let example2 = $("#top-courier-rto-data").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('top-courier-rto-data') }}",
                    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: 'pincodeData',
                        name: 'pincodeData',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'order_count',
                        name: 'order_count',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'order_percentage',
                        name: 'order_percentage',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    },
                ],
                select: {
                    style: 'multi',
                },
            });

        let example3 = $("#top-customers-rto-data").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('top-customers-rto-data') }}",
                    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: 'pincodeData',
                        name: 'pincodeData',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'order_count',
                        name: 'order_count',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'order_percentage',
                        name: 'order_percentage',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    },
                ],
                select: {
                    style: 'multi',
                },
            });


        //Ajax Calling for Weekly Rto Graph Data
        weeklyRtoGraph();

        ////Ajax Calling for Monthly Rto Graph Data
        // monthlyRtoGraph();

    });

    $('#zone-filter, #mode-filter, #lsp-filter, #date-range').change(function(){
        $("#top-pincodes-rto").DataTable().draw();
        $("#top-cities-rto-data").DataTable().draw();
        $("#top-courier-rto-data").DataTable().draw();
        $("#top-customers-rto-data").DataTable().draw();
        weeklyRtoGraph();
        // monthlyRtoGraph();
    })

    function weeklyRtoGraph(){

        jQuery.ajax({
            url : "{{route('rto-weekly-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); return false;

                countChart.data.labels = [];
                countChart.data.datasets['0']['data'] = [];

                jQuery.each(data.data, function(key,value){
                    countChart.data.labels.push(value.dateRange);
                    countChart.data.datasets['0']['data'].push(value.dataCount);
                });

                countChart.update();

            }
        });
    }

    // =============== Filters ===========

    $('#date-range,#zone-filter,#mode-filter,#lsp-filter').on('change', function(){
        $('#rto-filter-form').submit();
    });

    // function monthlyRtoGraph(){
    //     jQuery.ajax({
    //         url : "{{route('rto-monthly-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)
    //         {

    //             statusChart.data.labels = [];
    //             statusChart.data.datasets['0']['data'] = [];

    //             percentChart.data.labels = [];
    //             percentChart.data.datasets['0']['data'] = [];

    //             jQuery.each(data.data, function(key,value){
    //                 statusChart.data.labels.push(value.dateRange);
    //                 statusChart.data.datasets['0']['data'].push(value.dataCount);

    //                 percentChart.data.labels.push(value.dateRange);
    //                 percentChart.data.datasets['0']['data'].push(value.dataCount);
    //             });

    //             statusChart.update();
    //             percentChart.update();

    //         }
    //     });
    // }

    </script>
@endsection