@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 active">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">LSP Performance</a>
                        <!-- <a href="{{ url('/dashboard/delays') }}" class="btn btn-secondary">Delays</a> -->
                    </div>
                </div>
            </div>


            <div class="position-relative pb-5">
                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="1" class=""></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="2" class=""></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            @php
                            //dd($banner_image_url);
                            @endphp
                            <img class="d-block w-100" src="{{$banner_image_url}}" alt="First slide">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="{{$banner_image_url}}" alt="Second slide">
                        </div>
                       <div class="carousel-item">
                            <img class="d-block w-100" src="{{$banner_image_url}}" alt="Third slide">
                        </div>
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="col-md-4">
                    <div class="curvebox curve-box">
                        <div class="row row-flex">
                            <div class="col-8">
                                <div class="curve-content">
                                    <h4>Orders</h4>
                                    <p class="mb-0 ">Today's order : {{ $orders['todayOrder'] }}</p>
                                    <p>Yesterdays : {{ $orders['yesterdayOrder'] }}</p>
                                </div>
                            </div>
                            <div class="col-4">
                                <img src="images/order-icon.png" class="mt-2" alt="">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-8">
                    <div class="row">
                        <div class="col-6 col-7">
                            <div class="title-section">
                                <p>Shipping Details</p>
                            </div>
                        </div>
                        <div class="col-5 ">
                            <div class="details">
                                <p>Last 30 Days</p>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="order-section">
                                <div class="row">

                                    <div class="col order-details">
                                        <p>Total Shipment</p>
                                        <span>{{ $orders['totalShipment'] }}</span>
                                    </div>
                                    <div class="col order-details">
                                        <p class="mb-0">Pickup Pending</p>
                                        <span>{{ $orders['pickupPending'] }}</span>
                                    </div>
                                    <div class="col order-details">
                                        <p>Weight Diff</p>
                                        <span>{{ $orders['weightDiff'] }}</span>
                                    </div>
                                    <div class="col order-details">
                                        <p>In- Transit</p>
                                        <span>{{ $orders['inTransit'] }}</span>
                                    </div>
                                    <div class="col order-details">
                                        <p>NDR Pending</p>
                                        <span>{{ $orders['ndrPending'] }}</span>
                                    </div>
                                    <div class="col order-details">
                                        <p>RTO</p>
                                        <span>{{ $orders['rto'] }}</span>
                                    </div>
                                    <div class="col order-details">
                                        <p>Delivered</p>
                                        <span>{{ $orders['delivered'] }}</span>
                                    </div>
                                    <div class="col order-details">
                                        <p>Lost</p>
                                        <span>{{ $orders['lost'] }}</span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>


            <div class="row py-4 py-sm-5">
                <div class="col-md-4">
                    <div class="curvebox curvebox2">
                        <div class="row">
                            <div class="col-8">
                                <div class="curve-content">
                                    <h4>Revenue</h4>
                                    <p class="mb-0 ">Today's Revenue : {{ $revenue['today'] }}</p>
                                    <p>Yesterday's : {{ $revenue['yesterday'] }}</p>
                                </div>
                            </div>
                            <div class="col-4">
                                <img src="images/revenue-icon.png" class="mt-2" alt="">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-8">
                    <div class="row">
                        <div class="col-6 col-4">
                            <div class="title-section">
                                <p>NDR Details</p>
                            </div>
                        </div>
                        <div class="col-6  col-4">
                            <div class="details">
                                <p>Last 30 Days</p>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="order-section">
                                <div class="row">
                                    <div class="col order-details">
                                        <p>Total NDR</p>
                                        <span>{{ $ndrs['totalNdr'] }}</span>
                                    </div>
                                    <div class="col order-details">
                                        <p>Reattempt Request</p>
                                        <span>{{ $ndrs['ndrReattempts'] }}</span>
                                    </div>
                                    <div class=" col  order-details">
                                        <p class=" ">Buyers Reattempt Request</p>
                                        <span>{{ $ndrs['ndrReattempts'] }}</span>
                                    </div>
                                    <div class="col  order-details">
                                        <p>NDR Delivered</p>
                                        <span>{{ $ndrs['ndrDelivered'] }}</span>
                                    </div>
                                    <div class="col  order-details">
                                        <p>NDR-->RTO</p>
                                        <span>{{ $ndrs['ndrToRto'] }}</span>
                                    </div>
                                    <div class="col  order-details">
                                        <p>Lost</p>
                                        <span>{{ $ndrs['ndrLost'] }}</span>
                                    </div>
                                </div>
                                <!-- </div>
                                                                                                                                                                                                                                                                        </div> -->
                            </div>


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


            <div class="row">
                <div class="col-md-4 col-12">
                    <div class="curvebox curvebox3">
                        <div class="row">
                            <div class="col-8">
                                <div class="curve-content">
                                    <h4>Shipping</h4>
                                    <p class="mb-0 ">Last 30 Days</p>
                                    <p>Average Cost: Rs {{ $avgShippingCharge ?: 0 }}</p>
                                </div>
                            </div>
                            <div class="col-4">
                                <img src="images/shipping-icon.png" class="mt-2" alt="">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-8">
                    <div class="row">
                        <div class="col-6 col-4">
                            <div class="title-section">
                                <p>COD Details</p>
                            </div>
                        </div>
                        <div class="col-6  col-4">
                            <div class="details">
                                <p>Last 30 Days</p>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 ">
                            <div class="order-section">
                                <!-- <div class="row">
                                                                                                                                                                                                                                                                            <div class="col-md-12"> -->
                                <div class="row">
                                    <div class="col order-details">
                                        <p>Total COD</p>
                                        <span>
                                        <i class="fa fa-inr" aria-hidden="true"></i> {{@$totalCod ? : 0}}
                                        </span>
                                    </div>
                                    <div class="col order-details">
                                        <p>COD Available</p>
                                        <span><i class="fa fa-inr" aria-hidden="true"></i> 0</span>
                                        {{-- <span>{{$codDetails['total_available']}}</span> --}}
                                    </div>
                                    <div class="col order-details">
                                        <p>COD Pending(>7 Days)</p>
                                        <span>
                                        <i class="fa fa-inr" aria-hidden="true"></i> {{@$pendingCod ? : 0}}
                                        </span>
                                    </div>
                                    <div class="col order-details">
                                        <p>Last COD Remitted</p>
                                        <span>
                                        <i class="fa fa-inr" aria-hidden="true"></i> {{isset($lastPaidCod->cod_amount) ? $lastPaidCod->cod_amount  : 0}}
                                        </span>
                                    </div>
                                </div>
                                <!-- </div>
                                                                                                                                                                                                                                                                        </div> -->
                            </div>

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

            <div class="row py-4 py-sm-5">
                <div class="col-md-4">
                    <div class="title-section">
                        <p>Couriers Split </p>
                    </div>
                    <div class="zone-box">
                        <h6>Top 5 Couiers Zone</h6>
                        <div class="zone-box-content">
                            <canvas id="splitChart" width="100%" height="122px"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="title-section">
                        <p>Zone Wise Shipment </p>
                    </div>

                    <div class="zone-box">
                        <h6 class="mb-3">Total Shipment</h6>
                        <div class="zone-box-content">

                            <canvas id="shipmentChart" width="100%" height="80px"></canvas>

                            <span id="noRecodsFound"><strong>No record(s) found.</strong></span>

                            <!-- <div class="progress-circle progress-78">
                                                                                                                                                                                                                                                                                            <div class="progress-txt">78%<br />Growth</div>
                                                                                                                                                                                                                                                                                        </div> -->
                            <!-- <p>4200 New Shipments</p> -->
                            <!-- <span>This Year</span> -->
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="title-section">
                        <p>Delivery Performance</p>
                    </div>
                    <div class="zone-box">
                        <h6>Performance</h6>
                        <div class="zone-box-content">
                            <canvas id="deliveryChart" height="367px"></canvas>
                        </div>
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="col-md-4" hidden>
                    <div class="row">
                        <div class="col-6 col-4">
                            <div class="title-section">
                                <p>Orders</p>
                            </div>
                        </div>
                        <div class="col-6 col-4">
                            <div class="details">
                                <p>Last 30 Days</p>
                            </div>
                        </div>
                    </div>

                    <div class="zone-box position-relative">
                        <select class=" order-select mb-2 w-50" id="">
                            <option value="">Orders</option>
                            <option value="">123</option>
                        </select>
                        <p class="text-center mb-0"><iframe
                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30703867.0716799!2d64.40183608457191!3d20.049158955693073!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30635ff06b92b791%3A0xd78c4fa1854213a6!2sIndia!5e0!3m2!1sen!2sin!4v1649678246649!5m2!1sen!2sin"
                                width="100%" height="211" class="mt-1" style="border:0;" allowfullscreen=""
                                loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="title-section">
                        <p>Shipment - Zone Distribution </p>
                    </div>
                    <div class="dist-container">
                        <div class="zone-box" id="zone-dist">
                            <ul class="zone-detail">
                                @foreach ($zones as $key => $zone)
                                    <li>
                                        <img src="images/dot{{ $loop->iteration }}.png" class="mr-2" alt="">
                                        {{ $zone->zone }}
                                        <span class="float-right">{{ $zone->orders_count }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                        <span class="more">More...</span>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="title-section">
                        <p>Revenue</p>
                    </div>
                    <div class="zone-box">
                        <ul class="zone-detail">
                            <li>LifeTime <span class="float-right">₹ {{ round($revenue['lifetime'],2) }}</span> </li>
                            <li>Last Week <span class="float-right">₹ {{ round($revenue['lastweek'],2) }}</span></li>
                            <li>This Week <span class="float-right">₹ {{ round($revenue['thisweek'],2) }}</span></li>
                            <li>Last Month <span class="float-right">₹ {{round( $revenue['lastmonth'],2) }}</span></li>
                            <li>This Month <span class="float-right">₹ {{round( $revenue['thismonth'],2) }}</span></li>
                            <li>This Year <span class="float-right">₹ {{ round($revenue['thisyear'],2) }}</span></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="row pt-4 pt-sm-5">
                <div class="col-md-12">
                    <div class="title-section">
                        <p>Shipment Overview by Courier</p>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-striped" id="lspwise-shipment">
                            <thead>
                                <tr>
                                    <th scope="col">Courier Name</th>
                                    <th scope="col">Pickup Unscheduled</th>
                                    <th scope="col">Pickup Scheduled</th>
                                    <th scope="col">In-Transit Delivered</th>
                                    <th scope="col">NDR Raised</th>
                                    <th scope="col">NDR delivered</th>
                                    <th scope="col">RTO</th>
                                    <th scope="col">Lost/Damaged</th>
                                    <th scope="col">Total Shipment</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- <button onclick="couiersZone()">Test</button> -->
        </div>
    </section>

    {{-- Modal --}}
    <div class="modal fade" id="terms-condition-modal" tabindex="-1" role="dialog" data-keyboard="false"
        data-backdrop="static" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="title-section">
                        <p>{{ $staticContent ? $staticContent->title : '' }}</p>
                    </div>
                </div>
                <div class="modal-body">
                    {!! $staticContent ? $staticContent->content : '' !!}
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"
                        onclick="acceptTermsConditon({{ json_encode($staticContent) }},{{ Auth::user()->id }})">I
                        Agree</button>
                </div>
            </div>
        </div>
    </div>
    <style>
        #zone-dist{
            height:322px;
            overflow:hidden;
        }
        .more{
            cursor:pointer;
            
        }
        
    </style>
    <script>
        // Chart 1

        let year = null;
        let courierData = null;
       
        const d = document.getElementById('splitChart').getContext('2d');
        const splitChart = new Chart(d, {
            type: 'bar',
            data: {
                labels: year,
                datasets: courierData,

            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        max: 30,
                        min: 0,                       
                    },
                }
            }
        });

        // Chart 2

        let shipmentdata = {
            labels: [
                '78% Growth',
                // 'grey',
                // 'Yellow'
            ],
            datasets: [{
                label: 'My First Dataset',
                data: [300, 100],
                backgroundColor: [
                    'rgb(54, 162, 235)',
                    '#fff',
                    // 'rgb(255, 205, 86)'
                ],
                hoverOffset: 4
            }]
        };

        const shipmentconfig = {
            type: 'pie',
            data: shipmentdata,
        };

        const shipmentChart = new Chart(
            document.getElementById('shipmentChart'),
            shipmentconfig
        );

        // Chart 3

        var performanceYear = null;
        var percentArr = null;

        const b = document.getElementById('deliveryChart').getContext('2d');
        const deliveryChart = new Chart(b, {
            type: 'bar',
            data: {
                labels: performanceYear,
                datasets: [{
                    label: 'Performance',
                    data: percentArr,
                    backgroundColor: '#00AEEF',
                    barThickness: 20,
                    borderWidth: 1,
                    borderRadius: 40
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        max: 100,
                        min: 0,
                    }
                }
            }
        });

        $('#overviewDasboard').on('click', function(e) {
            // alert('aya');
        });

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

            ajax: {
                url: "{{ url('/home/lspwise-shipments') }}",
                data: function(d) {}
            },

            columns: [{
                    data: 'lsp_name',
                    name: 'lsp_name',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                {
                    data: 'pickup_unscheduled',
                    name: 'pickup_unscheduled',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                {
                    data: 'pickup_scheduled',
                    name: 'pickup_scheduled',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                {
                    data: 'intransit_delivered',
                    name: 'intransit_delivered',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                {
                    data: 'ndr_raised',
                    name: 'ndr_raised',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                {
                    data: 'ndr_delivered',
                    name: 'ndr_delivered',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                {
                    data: 'rto',
                    name: 'rto',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
                {
                    data: 'lost_damage',
                    name: 'lost_damage',
                    searchable: true,
                    orderable: false,
                    defaultContent: 'NA'
                },
                {
                    data: 'total_shipment',
                    name: 'total_shipment',
                    searchable: true,
                    orderable: true,
                    defaultContent: 'NA'
                },
            ],
            select: {
                style: 'multi',
            },
        });

        //Zone Wise Shipment Graph Data

        jQuery.ajax({
            url: "{{ route('zone-shipment-donut-data') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                userAddressFormArray: ''
            },
            success: function(data) {
                
                shipmentChart.data.labels = [];
                shipmentChart.data.datasets = [];

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

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

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

                shipmentChart.update();

                if (dataArr?.length == 0) {
                    ('#noRecodsFound').show();
                }else{
                     ('#noRecodsFound').hide();
                }
            }
        });

        $(document).ready(function() {
            // delivery();
            // couiersZone();
            var isAccepted = "{{ Auth::user()->terms_and_conditions }}";
            if (isAccepted == 'rejected') {
                $('#terms-condition-modal').modal('show');
            } else {
                $('#terms-condition-modal').modal('hide');
            }
        })

        function acceptTermsConditon(content, id) {
            jQuery.ajax({
                url: "{{ url('update-user-terms-log') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    terms_condition_id: content.id,
                    user_id: id,
                },
                success: function(res) {
                    if (res.success == true) {
                        location.reload();
                    }

                }
            });
        }

        // function delivery() {
        //     // console.log('hi');
        //     jQuery.ajax({
        //         url: "{{ route('delivery-performance-graph') }}",
        //         type: "POST",
        //         data: {
        //             _token: "{{ csrf_token() }}",
        //         },
        //         success: function(data) {
        //             // console.log(data); return false;

        //             deliveryChart.data = [];

        //             let dataArr = [];
        //             let backgroundColorArray = [];
        //             let borderColorArr = [];
        //             jQuery.each(data.data, function(key, value) {
        //                 deliveryChart.data.labels.push(value[0]);
        //                 dataArr.push(value[1]);
        //             });

        //             deliveryChart.data.datasets.push({
        //                 'data': dataArr,
        //                 'label': "Performance",
        //                 'backgroundColor': "#00AEEF",
        //                 'borderColor': "#00AEEF",
        //                 'borderWidth': 1
        //             });
        //             deliveryChart.update();

        //         }
        //     });
        // }

        // function couiersZone() {
        //     console.log('hi');
        //     jQuery.ajax({
        //         url: "{{ route('couiers-zones-graph') }}",
        //         type: "POST",
        //         data: {
        //             _token: "{{ csrf_token() }}",
        //         },
        //         success: function(data) {
        //             // console.log(data); return false;

        //             splitChart.data = [];

        //             let dataArr = [];
        //             let backgroundColorArray = [];
        //             let borderColorArr = [];
        //             jQuery.each(data, function(key, values) {
        //                 jQuery.each(values, function(key, value) {
        //                     console.log(value.year); return false;
        //                     splitChart.data.labels.push(value.zone);
        //                     dataArr.push(value.count);
        //                     dataArr.push(value.count);
        //                 });

        //             });

        //             splitChart.data.datasets.push({
        //                 'data': dataArr,
        //                 'label': "Zone",
        //                 'backgroundColor': "#00AEEF",
        //                 'borderColor': "#00AEEF",
        //                 'borderWidth': 1
        //             });
        //             splitChart.update();

        //         }
        //     });
        // }

        // ================Expand zone distribution==================
        var curHeight = $('#zone-dist').height();
        $(".more").click(function(){
            var container = $(this).parent('.dist-container');
            var el = container.find('#zone-dist');
            var autoHeight = el.css('height', 'auto').height();
            if(el.hasClass('open')){
                el.removeClass('open');
                el.height(autoHeight).animate({height: curHeight}, 1000), $(this).text('More..');
            }
            else{
                el.addClass('open');
                el.height(curHeight).animate({height: autoHeight}, 1000), $(this).text('Less..');
            }
        })
    </script>
@endsection