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


            <form method="get" id="ndr-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 py-4">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col">
                            <div class="zone-box">
                                <div class="delays-content">
                                    <h6>NDR Raised</h6>
                                    <p>{{$ndr_raised}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="zone-box">
                                <div class="delays-content">
                                    <h6>NDR Raised Percentage</h6>
                                    <p>{{$ndr_percentage}}%</p>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="zone-box">
                                <div class="delays-content">
                                    <h6>NDR Pending Percentage</h6>
                                    <p>{{$ndr_pending_percentage}}%</p>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="zone-box">
                                <div class="delays-content">
                                    <h6>NDR Delivered Percentage</h6>
                                    <p>{{$ndr_delivered_percentage}}%</p>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="zone-box">
                                <div class="delays-content">
                                    <h6>RTO Post NDR</h6>
                                    <p>{{$rto_post_ndr_percentage}}%</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row py-4 pt-sm-4 pb-sm-5" style="display:none">
                <div class="col-md-6">
                    <div class="title-section">
                        <p>NDR Response</p>
                    </div>

                    <div class="zone-box">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-2 pr-0 mr-0">
                                        <div class="bluecolor">
                                            <p>10</p>
                                        </div>
                                    </div>
                                    <div class="col-md-10 ml-0 pl-0">
                                        <div class="response">
                                            <p>Seller Response</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-2 pr-0 mr-0">
                                        <div class="bluecolor">
                                            <p>10</p>
                                        </div>
                                    </div>
                                    <div class="col-md-10 ml-0 pl-0">
                                        <div class="response">
                                            <p>Sellers Positive Response</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-1 pr-0 mr-0">
                                        <div class="bluecolor">
                                            <p>10</p>
                                        </div>
                                    </div>
                                    <div class="col-md-11 ml-0 pl-0">
                                        <div class="response">
                                            <p>Seller positive response delivered</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-2 pr-0 mr-0">
                                        <div class="bluecolor">
                                            <p>10</p>
                                        </div>
                                    </div>
                                    <div class="col-md-10 ml-0 pl-0">
                                        <div class="response">
                                            <p>Buyer response</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-2 pr-0 mr-0">
                                        <div class="bluecolor">
                                            <p>10</p>
                                        </div>
                                    </div>
                                    <div class="col-md-10 ml-0 pl-0">
                                        <div class="response">
                                            <p>Buyer Positive response</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-1 pr-0 mr-0">
                                        <div class="bluecolor">
                                            <p>10</p>
                                        </div>
                                    </div>
                                    <div class="col-md-11 ml-0 pl-0">
                                        <div class="response">
                                            <p>Buyer positive response delivered</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>


                <div class="col-md-6">
                    <div class="title-section">
                        <p>NDR Reason Split</p>
                    </div>

                    <div class="zone-box">

                        <div class="row">
                            <div class="col-md-5">
                                <canvas id="ndrChart" width="219" height="219"
                                    style="display: block; box-sizing: border-box; height: 219px; width: 219px;"></canvas>
                            </div>
                        </div>





                    </div>

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


        <div class="row" style="display:none">
            <div class="col-md-8">
                <div class="title-section">
                    <p>NDR Funnel</p>
                </div>

                <div class="row">
                    <div class="col-md-4 pr-0 mr-0">
                        <div class="p-3" style="background: rgba(0, 174, 239, 0.4);">
                            <h6 style="font-size:14px; font-weight: 700; margin-bottom: 10px;">3rd NDR</h6>
                            <div class="row">
                                <div class="col-md-2 pr-0 mr-0">
                                    <div class="bluecolor">
                                        <p>10</p>
                                    </div>
                                </div>
                                <div class="col-md-10 ml-0 pl-0">
                                    <div class="response">
                                        <p>Total shipments</p>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-3">
                                <div class="col-md-2 pr-0 mr-0">
                                    <div class="bluecolor">
                                        <p>10</p>
                                    </div>
                                </div>
                                <div class="col-md-10 ml-0 pl-0">
                                    <div class="response">
                                        <p>Pending shipments</p>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-3">
                                <div class="col-md-2 pr-0 mr-0">
                                    <div class="bluecolor">
                                        <p>10</p>
                                    </div>
                                </div>
                                <div class="col-md-10 ml-0 pl-0">
                                    <div class="response">
                                        <p>Delivered shipments</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>


                    <div class="col-md-4 pl-0 ml-0 pr-0 mr-0">
                        <div class="p-3" style="background: rgba(0, 174, 239, 0.3);">
                            <h6 style="font-size:14px; font-weight: 700; margin-bottom: 10px;">3rd NDR</h6>
                            <div class="row">
                                <div class="col-md-2 pr-0 mr-0">
                                    <div class="bluecolor">
                                        <p>12</p>
                                    </div>
                                </div>
                                <div class="col-md-10 ml-0 pl-0">
                                    <div class="response">
                                        <p>Total shipments</p>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-3">
                                <div class="col-md-2 pr-0 mr-0 ">
                                    <div class="bluecolor">
                                        <p>03</p>
                                    </div>
                                </div>
                                <div class="col-md-10 ml-0 pl-0">
                                    <div class="response">
                                        <p>Pending shipments</p>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-3">
                                <div class="col-md-2 pr-0 mr-0">
                                    <div class="bluecolor">
                                        <p>09</p>
                                    </div>
                                </div>
                                <div class="col-md-10 ml-0 pl-0">
                                    <div class="response">
                                        <p>Delivered shipments</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-md-4 ml-0 pl-0">
                        <div class="p-3" style="background: rgba(0, 174, 239, 0.2);">
                            <h6 style="font-size:14px; font-weight: 700; margin-bottom: 10px;">3rd NDR</h6>
                            <div class="row">
                                <div class="col-md-2 pr-0 mr-0">
                                    <div class="bluecolor">
                                        <p>11</p>
                                    </div>
                                </div>
                                <div class="col-md-10 ml-0 pl-0">
                                    <div class="response">
                                        <p>Total shipments</p>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-3">
                                <div class="col-md-2 pr-0 mr-0">
                                    <div class="bluecolor">
                                        <p>01</p>
                                    </div>
                                </div>
                                <div class="col-md-10 ml-0 pl-0">
                                    <div class="response">
                                        <p>Pending shipments</p>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-3">
                                <div class="col-md-2 pr-0 mr-0">
                                    <div class="bluecolor">
                                        <p>10</p>
                                    </div>
                                </div>
                                <div class="col-md-10 ml-0 pl-0">
                                    <div class="response">
                                        <p>Delivered shipments</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="col-md-4">
                <div class="title-section">
                    <p>NDR Funnel</p>
                </div>

                <div class="zone-box">
                    <div class="row">
                        <div class="col-md-10 col-10">
                            <h6>Status</h6>
                            <span>Total 42,580 Sales</span>
                        </div>
                    </div>

                    <canvas id="funnelChart" width="354" height="141"
                        style="display: block; box-sizing: border-box; height: 141px; width: 354px;"></canvas>
                </div>
            </div>

        </div>

        <div class="row py-4 py-sm-5" style="display:none">
            <div class="col-md-12">
                <div class="title-section">
                    <p>NDR Detailed Report</p>
                </div>

                <div class="table-responsive">
                    <table class="table table-striped"id="ndr">
                        <thead>
                            <tr>
                                {{-- <th scope="col"></th> --}}
                                <th scope="col">NDR Shipment</th>
                                <th scope="col">1st NDR Attempt </th>
                                <th scope="col">1st NDR Delivered</th>
                                <th scope="col">2nd NDR Attempt</th>
                                <th scope="col">2nd NDR Delivered</th>
                                <th scope="col">3rd NDR Attempt</th>
                                <th scope="col">Total Delivered</th>
                                <th scope="col">Total RTO</th>
                                <th scope="col">Lost/Damage</th>
                            </tr>
                        </thead>
                        <tbody>

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


        <div class="row" style="display:none">
            <div class="col-md-4">
                <div class="title-section">
                    <p>NDR Percentage</p>
                </div>

                <div class="zone-box">
                    <canvas id="percentChart" width="354" height="283"
                        style="display: block; box-sizing: border-box; height: 283px; width: 354px;"></canvas>
                </div>
            </div>

            <div class="col-md-4">
                <div class="title-section">
                    <p>NDR to Delivery Conversion Percentage</p>
                </div>
                <div class="zone-box">
                    <canvas id="conversionChart" width="354" height="283"
                        style="display: block; box-sizing: border-box; height: 283px; width: 354px;"></canvas>
                </div>
            </div>

            <div class="col-md-4">
                <div class="title-section">
                    <p>NDR response by buyer over IVR/SMS</p>
                </div>
                <div class="zone-box">
                    <canvas id="myChart" width="354" height="283"
                        style="display: block; box-sizing: border-box; height: 283px; width: 354px;"></canvas>
                </div>
            </div>
        </div>

        <div class="row pt-4 pt-sm-5" style="display:none">
            <div class="col-md-4">
                <div class="title-section">
                    <p>NDR response by seller</p>
                </div>

                <div class="zone-box">
                    <canvas id="sellerChart" width="354" height="248"
                        style="display: block; box-sizing: border-box; height: 248px; width: 354px;"></canvas>
                </div>
            </div>

            <div class="col-md-4">
                <div class="title-section">
                    <p>Reattempt to delivered conversion</p>
                </div>
                <div class="zone-box">
                    <canvas id="attemptChart" width="354" height="248"
                        style="display: block; box-sizing: border-box; height: 248px; width: 354px;"></canvas>
                </div>
            </div>

            <div class="col-md-4">
                <div class="title-section">
                    <p>Top 20 RTO pincode</p>
                </div>
                <div class="zone-box">

                    <div class="table-responsive scroll ndr-table">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th scope="col">Pincode</th>
                                    <th scope="col">City</th>
                                    <th scope="col">State</th>
                                    <th scope="col">Shipments RTO'ed</th>
                                    <th scope="col">RTO (%)</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>201301</td>
                                    <td>Greater Noida</td>
                                    <td>Uttar Pradesh</td>
                                    <td>477</td>
                                    <td>23.18</td>
                                </tr>
                                <tr>
                                    <td>201301</td>
                                    <td>Greater Noida</td>
                                    <td>Uttar Pradesh</td>
                                    <td>477</td>
                                    <td>23.18</td>
                                </tr>
                                <tr>
                                    <td>201301</td>
                                    <td>Greater Noida</td>
                                    <td>Uttar Pradesh</td>
                                    <td>477</td>
                                    <td>23.18</td>
                                </tr>
                                <tr>
                                    <td>201301</td>
                                    <td>Greater Noida</td>
                                    <td>Uttar Pradesh</td>
                                    <td>477</td>
                                    <td>23.18</td>
                                </tr>
                                <tr>
                                    <td>201301</td>
                                    <td>Greater Noida</td>
                                    <td>Uttar Pradesh</td>
                                    <td>477</td>
                                    <td>23.18</td>
                                </tr>
                                <tr>
                                    <td>201301</td>
                                    <td>Greater Noida</td>
                                    <td>Uttar Pradesh</td>
                                    <td>477</td>
                                    <td>23.18</td>
                                </tr>
                                <tr>
                                    <td>201301</td>
                                    <td>Greater Noida</td>
                                    <td>Uttar Pradesh</td>
                                    <td>477</td>
                                    <td>23.18</td>
                                </tr>
                                <tr>
                                    <td>201301</td>
                                    <td>Greater Noida</td>
                                    <td>Uttar Pradesh</td>
                                    <td>477</td>
                                    <td>23.18</td>
                                </tr>
                                <tr>
                                    <td>201301</td>
                                    <td>Greater Noida</td>
                                    <td>Uttar Pradesh</td>
                                    <td>477</td>
                                    <td>23.18</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

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

        
        <div class="row pt-4 pt-sm-5">
            <div class="col-md-4">
                <div class="title-section">
                    <p>NDR to Delivery Attempt</p>
                </div>
            </div>
        </div>

        <div class="row py-4">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col">
                            <div class="zone-box">
                                <div class="delays-content">
                                    <h6>NDR Total Shipment</h6>
                                    <p>{{$total_ndr_shipment}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="zone-box">
                                <div class="delays-content">
                                    <h6>Delivery in 1st Attempt</h6>
                                    <p>{{$delivered_ndr_1st_attempt}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="zone-box">
                                <div class="delays-content">
                                    <h6>Delivery in 2nd Attempt</h6>
                                    <p>{{$delivered_ndr_2nd_attempt}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="zone-box">
                                <div class="delays-content">
                                    <h6>Total Delivery</h6>
                                    <p>{{$total_delivered_ndr}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="zone-box">
                                <div class="delays-content">
                                    <h6>Total RTO</h6>
                                    <p>{{$total_rto}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="zone-box">
                                <div class="delays-content">
                                    <h6>Lost & Damage</h6>
                                    <p>{{$lost_order_count}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


      


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

            <div class="col-md-4" style="display:none">
                <div class="title-section">
                    <p>Seller Response</p>
                </div>
                <div class="zone-box">
                    <div class="weight-box">
                        <div class="row align-items-center">
                            <div class="col-md-5 col-4">
                                <h4><img src="/assets/images/uparrow.svg" alt="" height="25px"
                                        class="downarrow mr-2">143</h4>
                                <h4>
                                </h4>
                            </div>
                            <div class="col-md-7 col-8">
                                <p class="mb-0 f-18">This Year 2022 -<span
                                        class="f-20 font-weight-bold text-dark">5</span> </p>
                                <p class="">Last Year - <span class="f-20 font-weight-bold text-dark">8</span> </p>
                            </div>
                            <div class="col-md-6">
                                <p class=" mt-2">View Full Report Click Below Button</p>
                            </div>
                            <div class="col-md-6">
                                <button type="button" class="btn btn-danger mt-2 f-12">VIEW REPORT</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4" style="display:none">
                <div class="title-section">
                    <p>Buyer Response</p>
                </div>
                <div class="zone-box">
                    <div class="weight-box">
                        <div class="row align-items-center">
                            <div class="col-md-5 col-4">
                                <h4><img src="/assets/images/uparrow.svg" alt="" height="25px"
                                        class="downarrow mr-2">143</h4>
                                <h4>
                                </h4>
                            </div>
                            <div class="col-md-7 col-8">
                                <p class="mb-0 f-18">This Year 2022 -<span
                                        class="f-20 font-weight-bold text-dark">5</span> </p>
                                <p class="">Last Year - <span class="f-20 font-weight-bold text-dark">8</span> </p>
                            </div>
                            <!-- <div class="col-md-6">
                                <p class=" mt-2">View Full Report Click Below Button</p>
                            </div> -->
                            <!-- <div class="col-md-6">
                                <button type="button" class="btn btn-danger mt-2 f-12">VIEW REPORT</button>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row pt-4 pt-sm-5" style="display:none">
            <div class="col-md-8">
                <div class="title-section">
                    <p>Success by Courier</p>
                </div>

                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th></th>
                                <th scope="col">Total</th>
                                <th scope="col">Zone A</th>
                                <th scope="col">Zone B</th>
                                <th scope="col">Zone C</th>
                                <th scope="col">Zone D</th>
                                <th scope="col">Zone E</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>NDR Raised</td>
                                <td>02</td>
                                <td>02</td>
                                <td>02</td>
                                <td>02</td>
                                <td>02</td>
                                <td>02</td>
                            </tr>
                            <tr>
                                <td> NDR Delivered</td>
                                <td>10</td>
                                <td>10</td>
                                <td>10</td>
                                <td>10</td>
                                <td>10</td>
                                <td>10</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="col-md-4">
                <div class="title-section">
                    <p>NDR Reason</p>
                </div>
                <div class="zone-box">
                    <div class="weight-box">
                        <div class="row align-items-center">
                            <div class="col-md-5 col-4">
                                <h4><img src="/assets/images/uparrow.svg" alt="" height="25px"
                                        class="downarrow mr-2">14</h4>
                                <h4>
                                </h4>
                            </div>
                            <div class="col-md-7 col-8">
                                <p class="mb-0 f-18">This Year 2022 -<span
                                        class="f-20 font-weight-bold text-dark">5</span> </p>
                                <p class="">Last Year - <span class="f-20 font-weight-bold text-dark">8</span> </p>
                            </div>
                            <div class="col-md-6">
                                <p class=" mt-2">View Full Report Click Below Button</p>
                            </div>
                            <div class="col-md-6">
                                <button type="button" class="btn btn-danger mt-2 f-12">VIEW REPORT</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </section>

    <script>
        // =============== Filters ===========

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

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

        $(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

        const data = {
            labels: [
                'Sales Channel1',
                'Sales Channel2',
                'Sales Channel3'
            ],
            datasets: [{
                label: 'Sales Channel1',
                data: [60, 10, 10, 20, 5, 30],
                backgroundColor: [
                    '#43B5F4',
                    '#000000',
                    '#1aff8c',
                    '#ff944d',
                    '#4d4dff',
                    '#e63900'
                ],
                hoverOffset: 1,
            }]
        };
        const config = {
            type: 'pie',
            data: data,
            options: {
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        };

        const ndrChart = new Chart(
            document.getElementById('ndrChart'),
            config
        );

        // Chart 2

        var f = document.getElementById('funnelChart').getContext('2d');
        var funnelChart = new Chart(f, {
            type: 'line',
            data: {
                labels: ['Feburary', 'March', 'April', 'May', 'June'],
                datasets: [{
                    label: 'NDR Funnel',
                    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 3

        var n = document.getElementById('percentChart').getContext('2d');
        var percentChart = new Chart(n, {
            type: 'line',
            data: {
                labels: ['Feb', 'Mar', 'Apr', 'May', 'Jun'],
                datasets: [{
                    label: 'RTO Status',
                    data: [55, 55, 80, 86, 56, 55, 40],
                    fill: false,
                    borderColor: 'rgb(75, 192, 192)',
                    tension: 0.1
                }]

            },
            options: {
                yAxes: [{
                    angleLines: {
                        display: false
                    }
                }]
            }

        });


        // Chart 4

        var m = document.getElementById('conversionChart').getContext('2d');
        var conversionChart = new Chart(m, {
            type: 'line',
            data: {
                labels: ['Feb', 'Mar', 'Apr', 'May', 'Jun'],
                datasets: [{
                    // label: 'RTO Status',
                    data: [40, 40, 35, 26, 21],
                    fill: false,
                    borderColor: '#4db8ff',
                    // tension: 0.1
                }, {
                    // label: 'RTO Status',
                    data: [55, 55, 58, 60, 40, ],
                    fill: false,
                    borderColor: '#000000',
                    // tension: 0.1
                }]


            },
            options: {
                yAxes: [{
                    angleLines: {
                        display: false
                    }
                }]
            }

        });


        // Chart 5

        const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'],
                datasets: [{
                        label: '# of Votes',
                        data: [18, 55, 65, 60, 68, ],
                        backgroundColor: [
                            '#000000',
                            '#000000',
                            '#000000',
                            '#000000',
                            '#000000'
                        ],
                        borderColor: [
                            '#000000',
                            '#000000',
                            '#000000',
                            '#000000',
                            '#000000'
                        ],
                        borderWidth: 1
                    },
                    {
                        label: '# of Votes',
                        data: [25, 76, 75, 76, 76, ],
                        backgroundColor: [
                            '#aa80ff',
                            '#aa80ff',
                            '#aa80ff',
                            '#aa80ff',
                            '#aa80ff'
                        ],
                        borderColor: [
                            '#aa80ff',
                            '#aa80ff',
                            '#aa80ff',
                            '#aa80ff',
                            '#aa80ff'
                        ],
                        borderWidth: 1
                    }
                ]
            },
            // options: {
            //     scales: {
            //         yAxes: [{
            //             // beginAtZero: true,
            //             stacked: true
            //         }],
            //         xAxes: [{
            //           ticks:{
            //             stacked: true
            //           }
            //         }]

            //     }
            // }
            options: {
                plugins: {
                    title: {
                        display: true,
                        // text: 'Chart.js Bar Chart - Stacked'
                    },
                },
                responsive: true,
                scales: {
                    x: {
                        stacked: true,
                    },
                    y: {
                        stacked: true
                    }
                }
            }
        });

        // Chart 6

        var e = document.getElementById('sellerChart').getContext('2d');
        var selleChart = new Chart(e, {
            type: 'bar',
            data: {
                labels: ['Feb', 'Mar', 'Apr', 'May', 'Jun'],
                datasets: [{
                    label: 'Zone',
                    data: [40, 60, ],
                    backgroundColor: [
                        '#668cff',
                        '#668cff',
                    ],
                    borderColor: [
                        '#668cff',
                        '#668cff',
                    ],
                    borderWidth: 2,
                }]
            },
            options: {
                scales: {
                    x: {
                        beginAtZero: true,
                    }
                },
            }
        });

        // Chart 7

        var g = document.getElementById('attemptChart').getContext('2d');
        var attemptChart = new Chart(g, {
            type: 'line',
            data: {
                labels: ['Feb', 'Mar', 'Apr', 'May', 'Jun'],
                datasets: [{
                    // label: 'RTO Status',
                    data: [40, 40, 35, 26, 21],
                    fill: false,
                    borderColor: '#4db8ff',
                    tension: 0.1
                }, {
                    // label: 'RTO Status',
                    data: [55, 55, 58, 60, 40, ],
                    fill: false,
                    borderColor: '#000000',
                    tension: 0.1
                }]


            },
            options: {
                yAxes: [{
                    angleLines: {
                        display: false
                    }
                }]
            }

        });
        let example = $("#ndr").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('/ndr/dashboard/datatable') }}",
                    data: function(d) {
                        d.zone = $('#zone-filter').val();
                        d.mode = $('#mode-filter').val();
                        d.lsp = $('#lsp-filter').val();
                        d.date_range = $('#date-range').val();
                        /*  d.startDate = startDate;
                          d.endDate = endDate;
                          d.customChannel = customChannelFilters;
                          d.order_id = orderIdFiltersData;
                          d.sku = searchBySkuData;
                          d.mobile_number = searchByMobileNumberData;*/
                    }
                },

                columns: [
            //         {
            //     data: 'DT_RowIndex',
            //     name: 'DT_RowIndex',
            //     sortable: false,
            // },
                    {
                        data: 'ndr_reason',
                        name: 'ndr_reason',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    },
                     {
                        data: 'reattempts',
                        name: 'reattempts',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    }, {
                        data: 'order_id',
                        name: 'order_id',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    }, {
                        data: 'status',
                        name: 'status',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    }, {
                        data: 'products',
                        name: 'products',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    }, {
                        data: 'payment',
                        name: 'payment',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    }, {
                        data: 'customers',
                        name: 'customers',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    },
                     {
                        data: 'pickup_address',
                        name: 'pickup_address',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    },
                     {
                        data: 'dimensions',
                        name: 'dimensions',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    },


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

    </script>
@endsection