@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">RTO </a>
                        <a href="{{ url('/dashboard/lsp-performance') }}" class="btn btn-secondary mr-2 active">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">
                        {{-- <select class="form-control">
                            <option value=""></option>
                        </select> --}}
                    </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 class="col-md-2">
                    <div class="form-group custom-form-group">
                        <label class="form-label" for="customer">Select mode</label>
                        <select class="form-control">
                            <option value=""></option>
                        </select>
                    </div>
                </div> --}}
            </div>

            <div class="row py-4 pt-sm-4">
                <div class="col-md-12">
                    <div class="table-responsive mt-3">
                        <table class="table table-striped" id="lsp-dashboardDataTable">
                            <thead>
                                <tr>
                                    <th scope="col">LSP Name</th>
                                    <th scope="col">Mode (Rail, Road, Air)</th>
                                    <th scope="col">Shipment Count Total</th>
                                    <th scope="col">Shipment Count PP</th>
                                    <th scope="col">Shipment Count COD</th>
                                    <th scope="col">Delivered Total</th>
                                    <th scope="col">Blind Attempt Delivered</th>
                                    <th scope="col">NDR Delivered</th>
                                </tr>
                            </thead>
                            {{-- <tbody>
                                <tr>
                                    <td>Surface</td>
                                    <td>Air</td>
                                    <td>Surface</td>
                                    <td>Air</td>
                                    <td>Air</td>
                                    <td>Air</td>
                                    <td>Air</td>
                                    <td>Air</td>
                                </tr>
                                <tr>
                                    <td> 1,291650</td>
                                    <td> 1,291650</td>
                                    <td> 1,291650</td>
                                    <td> 1,291650</td>
                                    <td> 1,291650</td>
                                    <td> 1,291650</td>
                                    <td> 1,291650</td>
                                    <td> 1,291650</td>
                                </tr>

                            </tbody> --}}
                        </table>
                    </div>

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


        <div class="row pb-sm-5" style="display:none;">
            <div class="col-md-7">
                <div class="title-section">
                    <p>Zone Wise Shipment </p>
                </div>
                <div class="zone-box">
                    <div class="row">
                        <div class="col-md-7">
                            <h6 class="mb-3">Total Shipment</h6>
                            <canvas id="myChart1" height="220px"></canvas>
                        </div>


                        <div class="col-md-5">
                            <div class="row">
                                <div class="col-md-12">
                                    <h6>12000</h6>
                                    <span>Last month Shipment 9500</span>
                                </div>

                            </div>

                            <div class="row">
                                <div class="col-md-2 col-2">
                                    <div class="icon-box">
                                        <img src="images/img-3.svg" alt="">
                                    </div>
                                </div>
                                <div class="col-md-10 col-6">
                                    <div class="icon-box-content">
                                        <h5 class="mb-0">4568</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="images/img-1.svg" alt="">
                                    </div>
                                </div>
                                <div class="col-md-10 col-6">
                                    <div class="icon-box-content">
                                        <h5 class="mb-0">30,853</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="images/img-2.svg" alt="">
                                    </div>
                                </div>
                                <div class="col-md-10 col-6">
                                    <div class="icon-box-content">
                                        <h5 class="mb-0">2453</h5>
                                        <p>Total Profit</p>
                                    </div>
                                </div>
                            </div>

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

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

            <div class="col-md-5">
                <div class="title-section">
                    <p>LSP Contribution- Shipment Value</p>
                </div>

                <div class="zone-box">
                    <div class="row">
                        <div class="col-md-10 col-10">
                            <h6 class="mb-3">Total Shipment Value</h6>
                        </div>
                    </div>

                    <div class="col-md-8">
                        <canvas id="newChart1"></canvas>
                    </div>
                </div>

            </div>
        </div>


        <div class="row" style="display:none;">
            <div class="col-md-6">
                <div class="title-section">
                    <p>TOP 5 LSP- Based on delivery performance</p>
                </div>
                <div class="zone-box">
                    <h6>Delivery Performance</h6>
                    <div class="mt-2 zone-content">
                        <ul class="list-unstyled">
                            <li>
                                <h6>Lorem Ipsum</h6>
                                <p class="f-13">Lorem Ipsum is simply dummy text of the printing and typesetting
                                    industry. </p>
                            </li>
                            <li>
                                <h6>Lorem Ipsum</h6>
                                <p class="f-13">Lorem Ipsum is simply dummy text of the printing and typesetting
                                    industry. </p>
                            </li>
                            <li>
                                <h6>Lorem Ipsum</h6>
                                <p class="f-13">Lorem Ipsum is simply dummy text of the printing and typesetting
                                    industry. </p>
                            </li>
                            <li>
                                <h6>Lorem Ipsum</h6>
                                <p class="f-13">Lorem Ipsum is simply dummy text of the printing and typesetting
                                    industry. </p>
                            </li>
                        </ul>

                    </div>

                </div>
            </div>

            <div class="col-md-6">
                <div class="title-section">
                    <p>Bottom 5 LSP- Based on Delivery Performance</p>
                </div>
                <div class="zone-box">
                    <h6>Delivery Performance</h6>
                    <div class="mt-2 zone-content">
                        <ul class="list-unstyled">
                            <li>
                                <h6>Lorem Ipsum</h6>
                                <p class="f-13">Lorem Ipsum is simply dummy text of the printing and typesetting
                                    industry. </p>
                            </li>
                            <li>
                                <h6>Lorem Ipsum</h6>
                                <p class="f-13">Lorem Ipsum is simply dummy text of the printing and typesetting
                                    industry. </p>
                            </li>
                            <li>
                                <h6>Lorem Ipsum</h6>
                                <p class="f-13">Lorem Ipsum is simply dummy text of the printing and typesetting
                                    industry. </p>
                            </li>
                            <li>
                                <h6>Lorem Ipsum</h6>
                                <p class="f-13">Lorem Ipsum is simply dummy text of the printing and typesetting
                                    industry. </p>
                            </li>
                        </ul>

                    </div>

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

        <div class="row py-4 py-sm-5" style="display:none;">
            <div class="col-md-4">
                <div class="title-section">
                    <p>LSP wise - weight discreancy ratio</p>
                </div>

                <div class="zone-box pb-5">

                    <div class="row pb-3">
                        <div class="col-md-12">
                            <h6 class="mb-4">Weight Ratio</h6>
                            <canvas id="myChart3" width="100%"></canvas>
                        </div>
                    </div>
                </div>

            </div>

            <div class="col-md-4">
                <div class="title-section">
                    <p>LSP wise avg per KG Cost</p>
                </div>
                <div class="zone-box">
                    <div class="row">
                        <div class="col-md-12">
                            <h6>KG Cost</h6>
                            <span>Total 42580 Sales</span>
                        </div>

                    </div>
                    <canvas id="myChart4" height="335px"></canvas>

                </div>

            </div>

            <div class="col-md-4">
                <div class="title-section">
                    <p>LSP wise % NDR</p>
                </div>
                <div class="zone-box zone-data">
                    <div class="row">
                        <div class="col-md-12">
                            <h6>LSP</h6>
                        </div>

                    </div>

                    <canvas id="myChart5" height="260px"></canvas>

                    <div class="row mt-3">
                        <div class="col-md-7">
                            <p class="mb-2">Captive Logistics Arms</p>
                        </div>
                        <div class="col-md-2">
                            <p>$845k</p>
                        </div>
                        <div class="col-md-3">
                            <p class="text-right">82% <img src="images/imageangle.svg" alt=""></p>
                        </div>
                        <div class="col-md-7">
                            <p class="mb-2">Traditional LSPs</p>
                        </div>
                        <div class="col-md-2">
                            <p>$12.5kk</p>
                        </div>
                        <div class="col-md-3">
                            <p class="text-right">52% <img src="images/imageangle.svg" alt=""></p>
                        </div>
                        <div class="col-md-7">
                            <p>E-Commerce Retail-focused LSPs</p>
                        </div>
                        <div class="col-md-2">
                            <p>$27.6k</p>
                        </div>
                        <div class="col-md-3">
                            <p class="text-right">82% <img src="images/imageangle.svg" alt=""></p>
                        </div>

                    </div>

                </div>

            </div>
        </div>

        <div class="row" style="display:none;">
            <div class="col-md-7">
                <div class="title-section">
                    <p>LSP wise -Shipment Lost/Damaged Ratio</p>
                </div>

                <div class="zone-box">
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <h6>Shipment Lost and Damaged Ration</h6>
                        </div>
                    </div>

                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <canvas id="valueChart"></canvas>
                        </div>

                        <div class="col-md-6">
                            <p class="mb-0">Number of Shipments</p>
                            <p class="f-20">8600</p>
                            <hr class="mt-0">

                            <div class="row">
                                <div class="col-md-6 col-6">
                                    <p><img src="images/dot1.png" alt=""> Shipment Lost <br> 3600</p>
                                </div>
                                <div class="col-md-6 col-6">
                                    <p><img src="images/dot2.png" alt=""> Damaged <br> 5000</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        </div>
    </section>

    <div class="chat-icon">
        <img src="images/chat-icon.svg" class="" alt="">
    </div>

    <footer class="main-footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    ©2021. All rights reserved
                </div>
            </div>
        </div>
    </footer>

    <aside class="control-sidebar control-sidebar-dark">
    </aside>

    </div>


    <script>
    $(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,
        });
    })
        // Chart 1

        var m = document.getElementById('myChart1').getContext('2d');
        var myChart1 = new Chart(m, {
            type: 'bar',
            data: {
                labels: ['january', 'Feburary', 'March', 'April'],
                datasets: [{
                    label: 'Total Shipment',
                    data: [10, 20, 30, 40],
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });

        // ------------------

        // Chart 2

        const ctx = document.getElementById('valueChart').getContext('2d');
        const valueChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ['Shipment Lost', 'Damaged', 'Weight Ratio', ],
                datasets: [{
                    data: [300, 50, 100],
                    backgroundColor: [
                        'rgb(255, 99, 132)',
                        'rgb(54, 162, 235)',
                        'rgb(255, 205, 86)'
                    ],
                    hoverOffset: 1,
                    borderWidth: 1
                }]
            },
            options: {
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });

        // ---------------------

        // Chart 3

        var e = document.getElementById('myChart3').getContext('2d');
        var myChart3 = new Chart(e, {
            type: 'polarArea',
            data: {
                labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
                datasets: [{
                    label: '# of Votes',
                    data: [11, 16, 7, 3, 14],
                    backgroundColor: [
                        'rgb(255, 99, 132)',
                        'rgb(75, 192, 192)',
                        'rgb(255, 205, 86)',
                        'rgb(201, 203, 207)',
                        'rgb(54, 162, 235)'
                    ],
                    borderColor: [
                        'rgb(255, 99, 132)',
                        'rgb(75, 192, 192)',
                        'rgb(255, 205, 86)',
                        'rgb(201, 203, 207)',
                        'rgb(54, 162, 235)'
                    ],

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

        // --------------

        // Chart 4

        var f = document.getElementById('myChart4').getContext('2d');
        var myChart4 = new Chart(f, {
            type: 'line',
            data: {
                labels: ['Feburary', 'March', 'April', 'May', 'June'],
                datasets: [{
                    label: 'KG Cost',
                    data: [65, 59, 80, 81, 56, 55, 40],
                    fill: false,
                    borderColor: 'rgb(75, 192, 192)',
                    tension: 0.1
                }]

            },
            options: {
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }

            // options: {
            //     scales: {
            //         y: {
            //             beginAtZero: true
            //         }
            //     }
            // }
        });

        // ---------------

        // Chart 5

        var n = document.getElementById('myChart5').getContext('2d');
        var myChart5 = new Chart(n, {
            type: 'bar',
            data: {
                labels: ['january', 'Feburary', 'March', 'April'],
                datasets: [{
                    label: 'LSP',
                    data: [10, 20, 30, 40],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(255, 99, 132, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(255, 99, 132, 0.2)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    x: {
                        beginAtZero: true,
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });

        // -------------

        // Chart 6

        var s = document.getElementById('newChart1').getContext('2d');
        var newChart1 = new Chart(s, {
            type: 'doughnut',
            data: {
                labels: ['Red', 'Blue', 'Yellow', ],
                datasets: [{
                    data: [300, 50, 100],
                    backgroundColor: [
                        'rgb(255, 99, 132)',
                        'rgb(54, 162, 235)',
                        'rgb(255, 205, 86)'
                    ],
                    hoverOffset: 1,
                    borderWidth: 1
                }]
            },
            options: {
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });

        let example = $("#lsp-dashboardDataTable").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('dashboard/lsp-performance/datatable') }}",
                    data: function(d) {
                        // alert(d.zone);
                        d.zone = $('#zone-filter').val();
                        d.mode = $('#mode-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: 'shipping_mode',
                        name: 'shipping_mode',
                        searchable: true,
                        orderable: false,

                        defaultContent: 'NA'
                    },
                     {
                        data: 'total_shipment',
                        name: 'total_shipment',
                        searchable: true,
                        orderable: false,

                        defaultContent: 'NA'
                    },
                     {
                        data: 'total_shipment_pp',
                        name: 'total_shipment_pp',
                        searchable: true,
                        orderable: false,

                        defaultContent: 'NA'
                    },
                     {
                        data: 'payment_mode',
                        name: 'payment_mode',
                        searchable: true,
                        orderable: false,

                        defaultContent: 'NA'
                    },
                     {
                        data: 'total_shipment',
                        name: 'total_shipment',
                        searchable: true,
                        orderable: false,

                        defaultContent: 'NA'
                    },
                     {
                        data: 'attempt',
                        name: 'attempt',
                        searchable: true,
                        orderable: false,

                        defaultContent: 'NA'
                    },
                     {
                        data: 'intransit_delivered',
                        name: 'intransit_delivered',
                        searchable: true,
                        orderable: false,

                        defaultContent: 'NA'
                    },


                ],
                select: {
                    style: 'multi',
                },
            });
             $('#zone-filter, #mode-filter, #lsp-filter, #date-range').change(function() {
            $('#lsp-dashboardDataTable').DataTable().draw();
            $('#top10-customers').DataTable().draw();
            $('#top10-products').DataTable().draw();

            codGraph();
            orderRevenueGraph();
        });


        //Prepaid Cod Graph
        function codGraph() {
            jQuery.ajax({
                url: "{{ route('prepaid-cod-graph') }}",
                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.datasets['0']['data'] = [];
                    myChart.data.datasets['0']['data'].push(data.data.cod);
                    myChart.data.datasets['0']['data'].push(data.data.prepaid);

                    $('#prepaid').text(data.data.prepaid);
                    $('#cod').text(data.data.cod);
                    $('#lastMonthTotal').text(data.data.lastMont);

                    myChart.update();

                }
            });
        }

        //Orders vs Revenue Graph
        function orderRevenueGraph() {
            jQuery.ajax({
                url: "{{ route('orders-vs-revenue-graph') }}",
                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) {

                    /* {
                            // label: 'RTO Status',
                            data: [0, 65, 40, 30, 20, 0],
                            fill: false,
                            borderColor: "#4db8ff",
                            tension: 0.1,
                        },
                    */
                    orderCountValue = [];
                    revenuePrice = [];

                    percentChart.data.datasets = [];
                    percentChart.data.labels = [];

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

                        percentChart.data.labels.push(value.dateRange);
                        orderCountValue.push(value.totalOrdersCount);
                        revenuePrice.push(value.revenue);


                    });

                    //Order Count Data

                    percentChart.data.datasets.push({
                        label: 'Orders',
                        data: orderCountValue,
                        fill: false,
                        borderColor: "#4db8ff",
                        tension: 0.1,

                    })
                    //Revenue
                    percentChart.data.datasets.push({
                        label: 'Revenue',
                        data: revenuePrice,
                        fill: false,
                        borderColor: "#000000",
                        tension: 0.1,

                    })

                    percentChart.update();

                }
            });
        }
    </script>
@endsection