@extends('layout.master')
@section('content')
    <section class="content pb-5">
        <div class="container-fluid">
            <div class="position-relative pb-5 mt-3">
                <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">
                            <img class="d-block w-100" src="/assets/images/top-banner.png" alt="First slide">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="/assets/images/top-banner.png" alt="Second slide">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="/assets/images/top-banner.png" alt="Third slide">
                        </div>
                    </div>
                </div>
            </div>

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

                    <div class="row">
                        {{--  <div class="col-md-4 col-4">
                            <div class="form-group custom-form-group">
                                <select class="form-control zone-filter" id="delivery-status-zone">
                                    <option value="">Zone</option>
                                </select>
                            </div>
                        </div>  --}}
                        <div class="col-md-4 col-4">
                            <div class="form-group custom-form-group">
                                <select class="form-control state-filter" id="delivery-status-state">
                                    <option value="">State</option>
                                    @foreach($states as $key => $state)
                                        <option value="{{ $state->id }}">{{ $state->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4 col-4">
                            <div class="form-group custom-form-group">
                                <select class="form-control city-filter" id="delivery-status-city">
                                    <option value="">City</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4 col-5">
                            <div class="form-group custom-form-group">
                                <select class="form-control branch-filter" id="delivery-status-branch">
                                    <option value="">Branch</option>
                                </select>
                            </div>
                        </div>
                        {{--  <div class="col-md-6 col-7">
                            <div class="form-group custom-form-group">
                                <input class="form-control" placeholder="" type="date" value="">
                            </div>
                        </div>  --}}
                    </div>

                    <div class="zone-box">
                        <canvas id="deliveryChart" width="100%"></canvas>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="title-section">
                        <p>TAT Status</p>
                    </div>

                    <div class="row">
                        {{--  <div class="col-md-4 col-4">
                            <div class="form-group custom-form-group">
                                <select class="form-control zone-filter" id="tat-status-zone">
                                    <option value="">Zone</option>
                                </select>
                            </div>
                        </div>  --}}
                        <div class="col-md-4 col-4">
                            <div class="form-group custom-form-group">
                                <select class="form-control state-filter" id="tat-status-state">
                                    <option value="">State</option>
                                    @foreach($states as $key => $state)
                                        <option value="{{ $state->id }}">{{ $state->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4 col-4">
                            <div class="form-group custom-form-group">
                                <select class="form-control city-filter" id="tat-status-city">
                                    <option value="">City</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4 col-5">
                            <div class="form-group custom-form-group">
                                <select class="form-control branch-filter" id="tat-status-branch">
                                    <option value="">Branch</option>
                                </select>
                            </div>
                        </div>
                        {{--  <div class="col-md-6 col-7">
                            <div class="form-group custom-form-group">
                                <input class="form-control" placeholder="" type="date" value="">
                            </div>
                        </div>  --}}
                    </div>

                    <div class="zone-box">
                        <canvas id="tatChart" width="100%"></canvas>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="title-section">
                        <p>Zone wise Status</p>
                    </div>

                    <div class="row">
                        {{--  <div class="col-md-4 col-4">
                            <div class="form-group custom-form-group">
                                <select class="form-control zone-filter" id="zone-status-zone">
                                    <option value="">Zone</option>
                                </select>
                            </div>
                        </div>  --}}
                        <div class="col-md-4 col-4">
                            <div class="form-group custom-form-group">
                                <select class="form-control state-filter" id="zone-status-state">
                                    <option value="">State</option>
                                    @foreach($states as $key => $state)
                                        <option value="{{ $state->id }}">{{ $state->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4 col-4">
                            <div class="form-group custom-form-group">
                                <select class="form-control city-filter" id="zone-status-city">
                                    <option value="">City</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4 col-5">
                            <div class="form-group custom-form-group">
                                <select class="form-control branch-filter" id="zone-status-branch">
                                    <option value="">Branch</option>
                                </select>
                            </div>
                        </div>
                        {{--  <div class="col-md-6 col-7">
                            <div class="form-group custom-form-group">
                                <input class="form-control" placeholder="" type="date" value="">
                            </div>
                        </div>  --}}
                    </div>

                    <div class="zone-box">
                        <canvas id="zoneChart" width="100%"></canvas>
                    </div>
                </div>

                <div class="col-md-12 mt-4">
                    <div class="title-section">
                        <p>Daily no. of deliveries</p>
                    </div>

                    <div class="row">
                        {{--  <div class="col-md-2 col-4">
                            <div class="form-group custom-form-group">
                                <select class="form-control">
                                    <option value="">Zone</option>
                                </select>
                            </div>
                        </div>  --}}
                        <div class="col-md-2 col-4">
                            <div class="form-group custom-form-group">
                                <select class="form-control state-filter" id="daily-status-state">
                                    <option value="">State</option>
                                    @foreach($states as $key => $state)
                                        <option value="{{ $state->id }}">{{ $state->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2 col-4">
                            <div class="form-group custom-form-group">
                                <select class="form-control city-filter" id="daily-status-city">
                                    <option value="">City</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2 col-5">
                            <div class="form-group custom-form-group">
                                <select class="form-control branch-filter" id="daily-status-branch">
                                    <option value="">Branch</option>
                                </select>
                            </div>
                        </div>
                        {{--  <div class="col-md-2 col-7">
                            <div class="form-group custom-form-group">
                                <input class="form-control" placeholder="" type="date" value="">
                            </div>
                        </div>  --}}
                    </div>

                    <div class="zone-box">
                        <canvas id="dailyChart" width="100%" height="30px"></canvas>
                    </div>
                </div>

            </div>

            <div class="row py-4 py-sm-5">
                <div class="col-md-4">
                    <div class="title-section">
                        <p>Reverse Pickup</p>
                    </div>

                    <div class="row">
                        <div class="col-md-4 col-4">
                            <div class="form-group custom-form-group">
                                <select class="form-control">
                                    <option value="">Zone</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4 col-4">
                            <div class="form-group custom-form-group">
                                <select class="form-control">
                                    <option value="">State</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4 col-4">
                            <div class="form-group custom-form-group">
                                <select class="form-control">
                                    <option value="">City</option>
                                    <option value="">City</option>
                                    <option value="">City</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4 col-5">
                            <div class="form-group custom-form-group">
                                <select class="form-control">
                                    <option value="">Branch</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6 col-7">
                            <div class="form-group custom-form-group">
                                <input class="form-control" placeholder="" type="date" value="">
                            </div>
                        </div>
                    </div>

                    <div class="zone-box">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <canvas id="reverseChart" width="100%"></canvas>
                            </div>
                            <div class="col-md-6">
                                <div class="">
                                    <p class="mb-0"><img src="/assets/images/lspdot1.png" alt=""> Out for
                                        Pickup 56%
                                    </p>
                                    <p class="mb-0"><img src="/assets/images/lspdot2.png" alt=""> Pickup 34%
                                    </p>
                                    <p class="mb-0"><img src="/assets/images/lspdot3.png" alt=""> Lost 10%</p>
                                    <p class="mb-0"><img src="/assets/images/lspdot4.png" alt=""> Others 10%
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="title-section">
                        <p>Pending Status</p>
                    </div>

                    <div class="row">
                        {{--  <div class="col-md-4 col-4">
                            <div class="form-group custom-form-group">
                                <select class="form-control state-filter" id="pending-status-state">
                                    <option value="">zone</option>
                                </select>
                            </div>
                        </div>  --}}
                        <div class="col-md-4 col-4">
                            <div class="form-group custom-form-group">
                                <select class="form-control state-filter" id="pending-status-state">
                                    <option value="">State</option>
                                    @foreach($states as $key => $state)
                                        <option value="{{ $state->id }}">{{ $state->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4 col-4">
                            <div class="form-group custom-form-group">
                                <select class="form-control city-filter" id="pending-status-city">
                                    <option value="">City</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4 col-5">
                            <div class="form-group custom-form-group">
                                <select class="form-control branch-filter" id="pending-status-branch">
                                    <option value="">Branch</option>
                                </select>
                            </div>
                        </div>
                        {{--  <div class="col-md-6 col-7">
                            <div class="form-group custom-form-group">
                                <input class="form-control" placeholder="" type="date" value="">
                            </div>
                        </div>  --}}
                    </div>

                    <div class="zone-box">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <canvas id="pendingChart" width="100%"></canvas>
                            </div>
                            <div class="col-md-6">
                                <div class="" id="pending-status-percentage">
                                    <p class="mb-0"><img src="/assets/images/lspdot1.png" alt=""> Out for
                                        Pickup 56%
                                    </p>
                                    <p class="mb-0"><img src="/assets/images/lspdot2.png" alt=""> Pickup 34%
                                    </p>
                                    <p class="mb-0"><img src="/assets/images/lspdot4.png" alt=""> Others 10%
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="title-section">
                        <p>Weight Discrepancy</p>
                    </div>

                    <div class="row">
                        <div class="col-md-4 col-4">
                            <div class="form-group custom-form-group">
                                <select class="form-control">
                                    <option value="">Zone</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4 col-4">
                            <div class="form-group custom-form-group">
                                <select class="form-control">
                                    <option value="">State</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4 col-4">
                            <div class="form-group custom-form-group">
                                <select class="form-control">
                                    <option value="">City</option>
                                    <option value="">City</option>
                                    <option value="">City</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4 col-5">
                            <div class="form-group custom-form-group">
                                <select class="form-control">
                                    <option value="">Branch</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6 col-7">
                            <div class="form-group custom-form-group">
                                <input class="form-control" placeholder="" type="date" value="">
                            </div>
                        </div>
                    </div>

                    <div class="zone-box">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <canvas id="weightChart" width="100%" height="20px"></canvas>
                            </div>

                            <div class="col-md-6">
                                <p class="mb-0"><img src="/assets/images/lspdot1.png" alt=""> Settled 20%</p>
                                <p class="mb-0"><img src="/assets/images/lspdot2.png" alt=""> Open 40% </p>
                                <p class="mb-0"><img src="/assets/images/lspdot4.png" alt=""> Unsettled 40%</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="title-section">
                        <p>Lost & Damage</p>
                    </div>

                    <div class="row">
                        {{--  <div class="col-md-3 col-4">
                            <div class="form-group custom-form-group">
                                <select class="form-control">
                                    <option value="">Zone</option>
                                </select>
                            </div>
                        </div>  --}}
                        <div class="col-md-3 col-4">
                            <div class="form-group custom-form-group">
                                <select class="form-control state-filter" id="lost-status-state">
                                    <option value="">State</option>
                                    @foreach($states as $key => $state)
                                        <option value="{{ $state->id }}">{{ $state->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3 col-4">
                            <div class="form-group custom-form-group">
                                <select class="form-control city-filter" id="lost-status-city">
                                    <option value="">City</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3 col-5">
                            <div class="form-group custom-form-group">
                                <select class="form-control branch-filter" id="lost-status-branch">
                                    <option value="">Branch</option>
                                </select>
                            </div>
                        </div>
                        {{--  <div class="col-md-4 col-7">
                            <div class="form-group custom-form-group">
                                <input class="form-control" placeholder="" type="date" value="">
                            </div>
                        </div>  --}}
                    </div>

                    <div class="zone-box">
                        <canvas id="lostChart" width="100%"></canvas>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="title-section">
                        <p>COD</p>
                    </div>

                    <div class="row">
                        {{--  <div class="col-md-3 col-4">
                            <div class="form-group custom-form-group">
                                <select class="form-control">
                                    <option value="">Zone</option>
                                </select>
                            </div>
                        </div>  --}}
                        <div class="col-md-3 col-4">
                            <div class="form-group custom-form-group">
                                <select class="form-control state-filter" id="cod-status-state">
                                    <option value="">State</option>
                                    @foreach($states as $key => $state)
                                        <option value="{{ $state->id }}">{{ $state->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3 col-4">
                            <div class="form-group custom-form-group">
                                <select class="form-control city-filter" id="cod-status-city">
                                    <option value="">City</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3 col-5">
                            <div class="form-group custom-form-group">
                                <select class="form-control branch-filter" id="cod-status-branch">
                                    <option value="">Branch</option>
                                </select>
                            </div>
                        </div>
                        {{--  <div class="col-md-4 col-7">
                            <div class="form-group custom-form-group">
                                <input class="form-control" placeholder="" type="date" value="">
                            </div>
                        </div>  --}}
                    </div>

                    <div class="zone-box">
                        <canvas id="codChart" width="100%"></canvas>
                    </div>
                </div>
            </div>

            <div class="row mt-4 mt-sm-5">
                <div class="col-md-4">
                    <div class="curvebox curve-box">
                        <div class="row row-flex">
                            <div class="col-8 mb-3">
                                <div class="curve-content">
                                    <h4>Delivery</h4>
                                    <p class="mb-4">Today's order : {{ $delivery['todayOrders'] }}</p>
                                </div>
                            </div>
                            <div class="col-4">
                                <img src="/assets/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-7">
                            <div class="title-section">
                                <p>Delivery 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>{{ $delivery['totalOrders'] }}</span>
                                    </div>
                                    <div class="col order-details">
                                        <p class="mb-0">Pickup Pending</p>
                                        <span>{{ $delivery['pickupPendingOrders'] }}</span>
                                    </div>
                                    <div class="col order-details">
                                        <p>Pickup</p>
                                        <span>{{ $delivery['pickedOrders'] }}</span>
                                    </div>
                                    <div class="col order-details">
                                        <p>In- Transit</p>
                                        <span>{{ $delivery['inTransitOrders'] }}</span>
                                    </div>
                                    <div class="col order-details">
                                        <p>Out for Delivery</p>
                                        <span>{{ $delivery['outForDeliveryOrders'] }}</span>
                                    </div>
                                    <div class="col order-details">
                                        <p>NDR</p>
                                        <span>{{ $delivery['ndrOrders'] }}</span>
                                    </div>
                                    <div class="col order-details">
                                        <p>RTO</p>
                                        <span>{{ $delivery['rtoOrders'] }}</span>
                                    </div>
                                    <div class="col order-details">
                                        <p>Deliverd</p>
                                        <span>{{ $delivery['deliveredOrders'] }}</span>
                                    </div>
                                    <div class="col order-details">
                                        <p>Lost</p>
                                        <span>{{ $delivery['lostOrders'] }}</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>Reverse</h4>
                                    <p class="mb-4">Today's order : {{ $reverse['todayOrders'] }}</p>
                                </div>
                            </div>
                            <div class="col-4">
                                <img src="/assets/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-4">
                            <div class="title-section">
                                <p>Reverse 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 Reverse</p>
                                        <span>{{ $reverse['totalOrders'] }}</span>
                                    </div>
                                    <div class="col order-details">
                                        <p>Pending for Pickup</p>
                                        <span>{{ $reverse['pickupPendingOrders'] }}</span>
                                    </div>
                                    <div class=" col  order-details">
                                        <p class=" ">Picked up</p>
                                        <span>{{ $reverse['pickedOrders'] }}</span>
                                    </div>
                                    <div class="col  order-details">
                                        <p>Delivered</p>
                                        <span>{{ $reverse['deliveredOrders'] }}</span>
                                    </div>
                                    <div class="col  order-details">
                                        <p>Lost</p>
                                        <span>{{ $reverse['lostOrders'] }}</span>
                                    </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>Revenue</h4>
                                    <p class="mb-4">Today's Revenue : {{ $revenue['todayRevenue'] }}</p>
                                </div>
                            </div>
                            <div class="col-4">
                                <img src="/assets/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>Revenue 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</p>
                                        <span>{{ $revenue['totalRevenue'] }}</span>
                                    </div>
                                    <div class="col order-details">
                                        <p>Forward</p>
                                        <span>{{ $revenue['forwardRevenue'] }}</span>
                                    </div>
                                    <div class="col order-details">
                                        <p>Reverse</p>
                                        <span>{{ $revenue['reverseRevenue'] }}</span>
                                    </div>
                                    <div class="col order-details">
                                        <p>Weight Discrepancy</p>
                                        <span>{{ $revenue['weightDiffRevenue'] }}</span>
                                    </div>
                                    <div class="col order-details">
                                        <p>Lost</p>
                                        <span>{{ $revenue['lostRevenue'] }}</span>
                                    </div>
                                </div>

                            </div>

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

            </div>

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

                    <div class="details">
                        <p>Last 30 Days <img src="/assets/images/calender2.png" alt=""></p>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-striped" id="shipment-overview-by-customer">
                            <thead>
                                <tr>
                                    <th scope="col">Sr No</th>
                                    <th scope="col">Customer Name</th>
                                    <th scope="col">Pickup Unscheduled</th>
                                    <th scope="col">Pickup Scheduled</th>
                                    <th scope="col">Picked</th>
                                    <th scope="col">In Transit</th>
                                    <th scope="col">Out for Delivery</th>
                                    <th scope="col">NDR Raised</th>
                                    <th scope="col">NDR Pending</th>
                                    <th scope="col">NDR Delivered</th>
                                    <th scope="col">Lost/Damage</th>
                                    <th scope="col">RTO</th>
                                    <th scope="col">Delivered</th>
                                    <th scope="col">Total</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script>
        $(document).on({
            ajaxStart: function() {
                $('#custum-loader').removeClass('hidden');
            },
            ajaxStop: function() {
                $('#custum-loader').addClass('hidden');
            }
        });

        $(document).ready(function() {

            var lspWiseShipment = $('#shipment-overview-by-customer').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('/lsp-dashboard/shipment-overview-by-customer/table') }}",
                    data: function(d) {}
                },

                columns: [{
                        data: 'index',
                        name: 'index',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'customer_name',
                        name: 'customer_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: 'picked',
                        name: 'picked',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'in_transit',
                        name: 'in_transit',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'out_for_delivery',
                        name: 'out_for_delivery',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'ndr_raised',
                        name: 'ndr_raised',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'ndr_pending',
                        name: 'ndr_pending',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'ndr_delivered',
                        name: 'ndr_delivered',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'lost_damage',
                        name: 'lost_damage',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'rto',
                        name: 'rto',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'delivered',
                        name: 'delivered',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'total_shipment',
                        name: 'total_shipment',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                ],
                select: {
                    style: 'multi',
                },
            });

            deliveryChart1();
            tatChart1();
            zoneChart1();
            lostChart1();
            dailyChart1();
            codChart1();
            pendingChart1();

            $('.zone-filter, .state-filter, .city-filter, .branch-filter').change(function(){
                var targetId = $(this).attr('id');
                targetId = targetId.split('-');
                targetId = targetId[0]+'-'+targetId[1];

                switch(targetId){
                    case 'delivery-status':
                        deliveryChart1();
                        break;
                    case 'tat-status':
                        tatChart1();
                        break;
                    case 'zone-status':
                        zoneChart1();
                        break;
                    case 'lost-status':
                        lostChart1();
                        break;
                    case 'daily-status':
                        dailyChart1();
                        break;
                    case 'cod-status':
                        codChart1();
                        break;
                    case 'pending-status':
                        pendingChart1();
                        break;
                }
            });

            $('.state-filter').change(function(){
                var targetId = $(this).attr('id');
                targetId = targetId.split('-');
                targetId = targetId[0]+'-'+targetId[1];

                stateId = $(this).val();

                $.ajax({
                    url: "{{ url('/cities-list') }}",
                    type: "POST",
                    data: {
                        'state_id' : stateId,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(data) {
                        html = '<option value="">City</option>';
                        $.each(data.cities, function(key, city){
                            html += '<option value="'+city.id+'">'+city.name+'</option>';
                        });

                        $('#'+targetId+'-city').html(html);
                    }
                });


            });

            $('.city-filter').change(function(){
                var targetId = $(this).attr('id');
                targetId = targetId.split('-');
                targetId = targetId[0]+'-'+targetId[1];

                cityId = $(this).val();

                $.ajax({
                    url: "{{ url('/branch-list') }}",
                    type: "POST",
                    data: {
                        'district_id' : cityId,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(data) {

                        html = '<option value="">Branch</option>';
                        $.each(data.branches, function(key, branch){
                            html += '<option value="'+branch.id+'">'+branch.name+'</option>';
                        });

                        $('#'+targetId+'-branch').html(html);
                    }
                });


            });
        });
    </script>
    <script>
        // Chart 1

        const data = {
            //labels: [
            //   'Sales Channel1',
            //   'Sales Channel2',
            //   'Sales Channel3'
            // ],
            datasets: [{
                label: 'Sales Channel1',
                data: [15, 10, 13, 30, 8, 15, 20],
                backgroundColor: [
                    '#65BCEC',
                    '#43B5F4',
                    '#89CFF5',
                    '#88CAEF',
                    '#B4E2FB',
                    '#D4EDFB',
                    '#84D3FF'
                ],
                hoverOffset: 1,
            }]
        };
        const config = {
            type: 'pie',
            data: data,
            options: {
                plugins: {
                    legend: {
                        display: true
                    }
                }
            }
        };

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

        // Chart 2

        const ctx = document.getElementById('tatChart');
        const tatChart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: '# of Votes',
                    data: [35, 15, 45, 40],
                    backgroundColor: [
                        '#43B5F4',
                        '#89CFF5',
                        '#B4E2FB',
                        '#D4EDFB',
                    ],
                    borderWidth: 1,
                }]
            },

            options: {
                plugins: {
                    legend: {
                        display: true
                    }
                }
            }
        });


        // Chart 3

        const zone = document.getElementById('zoneChart');
        const zoneChart = new Chart(zone, {
            type: 'pie',
            data: {
                // labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: '# of Votes',
                    data: [35, 15, 45, 40],
                    backgroundColor: [
                        '#43B5F4',
                        '#89CFF5',
                        '#B4E2FB',
                        '#D4EDFB',
                    ],
                    borderWidth: 1,
                }]
            },
            options: {
                plugins: {
                    legend: {
                        display: true
                    }
                }
            }
        });

        // Chart 4

        var d = document.getElementById('dailyChart').getContext('2d');
        var dailyChart = new Chart(d, {
            type: 'bar',
            data: {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
                datasets: [{
                    // label: '# of Votes',
                    data: [10, 20, 35, 42, 45, 40, ],
                    backgroundColor: '#D4EDFB',
                    borderWidth: 0,
                    // borderRadius: 5,
                }, {
                    // label: '# of Votes',
                    data: [25, 25, 18, 15, 15, 20, ],
                    backgroundColor: '#EDF9FF',
                    borderWidth: 0,
                    // borderRadius: 5,
                }, ]
            },

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

        // Chart 5

        var s = document.getElementById('reverseChart').getContext('2d');
        var reverseChart = new Chart(s, {
            type: 'doughnut',
            data: {
                labels: ['Out for Pickup', 'Pickup', 'Others', ],
                datasets: [{
                    data: [10, 55, 35],
                    backgroundColor: [
                        '#D4EDFB',
                        '#43B5F4',
                        '#89CFF5',
                    ],
                    hoverOffset: 1,

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

        // Chart 6

        var a = document.getElementById('pendingChart').getContext('2d');
        var pendingChart = new Chart(a, {
            type: 'doughnut',
            data: {
                labels: ['Out for Pickup', 'Pickup', 'Others', ],
                datasets: [{
                    data: [10, 55, 35],
                    backgroundColor: [
                        '#D4EDFB',
                        '#43B5F4',
                        '#89CFF5',
                    ],
                    hoverOffset: 1,

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

        // Chart 7

        var m = document.getElementById('weightChart');
        var m = new Chart(m, {
            type: 'pie',
            data: {
                // labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: '# of Votes',
                    data: [20, 40, 40],
                    backgroundColor: [
                        '#43B5F4',
                        '#89CFF5',
                        '#B4E2FB',
                    ],
                    borderWidth: 1,
                }]
            },
            options: {
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });


        // Chart 8

        var d = document.getElementById('lostChart').getContext('2d');
        var lostChart = new Chart(d, {
            type: 'bar',
            data: {
                labels: ['Lost', 'Broken', 'Theft', 'Others'],
                datasets: [{
                    label: 'Zone',
                    data: [65, 59, 80, 81],
                    backgroundColor: [
                        '#43B5F4',
                        '#43B5F4',
                        '#43B5F4',
                        '#43B5F4'
                    ],
                    barThickness: 20,
                    borderColor: [
                        '#43B5F4',
                        '#43B5F4',
                        '#43B5F4',
                        '#43B5F4'
                    ],
                    borderWidth: 0
                }]
            },
            options: {
                scales: {
                    x: {
                        beginAtZero: true,
                    },
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });

        // Chart 9

        var e = document.getElementById('codChart').getContext('2d');
        var codChart = new Chart(e, {
            type: 'bar',
            data: {
                labels: ['Pre-paid', 'COD'],
                datasets: [{
                    label: "Zone 1",
                    type: "bar",
                    stack: "Base",
                    backgroundColor: "#43B5F4",
                    barThickness: 30,
                    data: [15, 10],
                }, {
                    label: "Zone 2",
                    type: "bar",
                    stack: "Base",
                    backgroundColor: "#D4EDFB",
                    barThickness: 30,
                    data: [10, 10],
                }]
            },
            options: {
                indexAxis: 'y',
                elements: {
                    bar: {
                        borderWidth: 0,
                    }
                }
            },
            responsive: true,
            plugins: {
                legend: {
                    position: 'right',
                },
                title: {
                    display: true,
                    text: 'Chart.js Horizontal Bar Chart'
                }
            }
        });

        //delivery chart
        function deliveryChart1(){
            $.ajax({
                url: "{{ url('/lsp/delivery-status-graph-data') }}",
                type: "POST",
                data: {
                    {{--  'zone_id' : $('#delivery-status-zone').val(),  --}}
                    'state_id' : $('#delivery-status-state').val(),
                    'city_id' : $('#delivery-status-city').val(),
                    'branch' : $('#delivery-status-branch').val(),
                    _token: "{{ csrf_token() }}"
                },
                success: function(data) {

                    deliveryChart.data.labels = [];
                    deliveryChart.data.labels = data.data.labels;

                    deliveryChart.data.datasets = [];
                    deliveryChart.data.datasets = [{
                        label: data.data.labels,
                        data: Object.values(data.data.count),
                        backgroundColor: data.data.bcolor,
                        hoverOffset: 1,
                    }];

                    deliveryChart.update();

                }
            });
        }

        //tat chart
        function tatChart1(){
            $.ajax({
                url: "{{ url('/lsp/tat-status-graph-data') }}",
                type: "POST",
                data: {
                    {{--  'zone_id' : $('#tat-status-zone').val(),  --}}
                    'state_id' : $('#tat-status-state').val(),
                    'city_id' : $('#tat-status-city').val(),
                    'branch' : $('#tat-status-branch').val(),
                    _token: "{{ csrf_token() }}"
                },
                success: function(data) {

                    tatChart.data.labels = data.data.labels;

                    tatChart.data.datasets = [{
                        label: data.data.labels,
                        data: Object.values(data.data.count),
                        backgroundColor: data.data.bcolor,
                        hoverOffset: 1,
                    }];

                    tatChart.update();

                }
            });
        }

        //zone-wise chart
        function zoneChart1(){
            $.ajax({
                url: "{{ url('/lsp/zone-wise-status-graph-data') }}",
                type: "POST",
                data: {
                    {{--  'zone_id' : $('#zone-status-zone').val(),  --}}
                    'state_id' : $('#zone-status-state').val(),
                    'city_id' : $('#zone-status-city').val(),
                    'branch' : $('#zone-status-branch').val(),
                    _token: "{{ csrf_token() }}"
                },
                success: function(data) {

                    zoneChart.data.labels = [];
                    zoneChart.data.datasets = [];
                    let dataArr = [];
                    let backgroundColorArray = [];
                    jQuery.each(data.data, function(key, value) {
                        zoneChart.data.labels.push(value.zone);
                        dataArr.push(value.value);
                        backgroundColorArray.push("#" + value.color_code);
                    });

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

                    zoneChart.update();
                }
            });
        }


        //lost-damage chart
        function lostChart1(){
            $.ajax({
                url: "{{ url('/lsp/lost-damage-graph-data') }}",
                type: "POST",
                data: {
                    {{--  'zone_id' : $('#lost-status-zone').val(),  --}}
                    'state_id' : $('#lost-status-state').val(),
                    'city_id' : $('#lost-status-city').val(),
                    'branch' : $('#lost-status-branch').val(),
                    _token: "{{ csrf_token() }}"
                },
                success: function(data) {
                    lostChart.data.labels = data.data.labels;

                    lostChart.data.datasets = [{
                        label: 'Orders',
                        data: Object.values(data.data.count),
                        backgroundColor: data.data.bcolor,
                        barThickness: 20,
                        borderColor: data.data.bcolor,
                        borderWidth: 0
                    }];

                    lostChart.update();
                }
            });
        }

        //no-of-deliveries chart
        function dailyChart1(){
            $.ajax({
                url: "{{ url('/lsp/no-of-deliveries-graph-data') }}",
                type: "POST",
                data: {
                    {{--  'zone_id' : $('#daily-status-zone').val(),  --}}
                    'state_id' : $('#daily-status-state').val(),
                    'city_id' : $('#daily-status-city').val(),
                    'branch' : $('#daily-status-branch').val(),
                    _token: "{{ csrf_token() }}"
                },
                success: function(data) {
                    dailyChart.data.labels = data.data.labels;
                    dailyChart.data.datasets = [];

                    $.each(data.data.count, function(key, val) {
                        dailyChart.data.datasets.push({
                            label: Object.keys(val)[0],
                            data: Object.values(val)[0],
                            backgroundColor: val.bcolor,
                            borderWidth: 0
                        });
                    });

                    dailyChart.update();
                }
            });
        }

        //cod chart
        function codChart1(){
            $.ajax({
                url: "{{ url('/lsp/cod-graph-data') }}",
                type: "POST",
                data: {
                    {{--  'zone_id' : $('#cod-status-zone').val(),  --}}
                    'state_id' : $('#cod-status-state').val(),
                    'city_id' : $('#cod-status-city').val(),
                    'branch' : $('#cod-status-branch').val(),
                    _token: "{{ csrf_token() }}"
                },
                success: function(data) {

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

                    $.each(data.data.count, function(key, val) {
                        codChart.data.datasets.push({
                            label: val.zone_name,
                            type: "bar",
                            stack: "Base",
                            backgroundColor: '#' + val.bcolor,
                            barThickness: 30,
                            data: Object.values(val.orders),
                        });
                    });

                    codChart.update();
                }
            });
        }

        //pending status chart
        function pendingChart1(){
            $.ajax({
                url: "{{ url('/lsp/pending-status-graph-data') }}",
                type: "POST",
                data: {
                    {{--  'zone_id' : $('#pending-status-zone').val(),  --}}
                    'state_id' : $('#pending-status-state').val(),
                    'city_id' : $('#pending-status-city').val(),
                    'branch' : $('#pending-status-branch').val(),
                    _token: "{{ csrf_token() }}"
                },
                success: function(data) {

                    pendingChart.data.labels = data.data.labels;

                    pendingChart.data.datasets = [{
                        label: 'Orders',
                        data: Object.values(data.data.count),
                        backgroundColor: data.data.bcolor,
                        hoverOffset: 1,
                        borderWidth: 0
                    }];

                    pendingChart.update();

                    var html = '';
                    var img = 1;
                    $.each(data.data.percentage, function(key, val){
                        html += '<p class="mb-0"><img src="/assets/images/lspdot'+(img)+'.png" alt=""> '+data.data.labels[(img++) - 1]+' '+val+'% </p>';
                    });

                    $('#pending-status-percentage').html(html);
                }
            });
        }


    </script>
@endsection