@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 id="delivery-no-data" style="display:none">No Records Found!</div>
                    </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 id="no-data" style="display:none">No Record Found!</div>
                    </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 id="zone-no-data" style="display:none;">No Records Found!</div>
                    </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 state-filter" id="reverse-pickup-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="reverse-pickup-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="reverse-pickup-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">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <canvas id="reverseChart" width="100%"></canvas>
                            </div>
                            <div class="col-md-6" id="">
                                <div class="" id="reverse-pickup-percentage"></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"></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 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="weight-discrepancy-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="weight-discrepancy-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="weight-discrepancy-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="weightChart" width="100%" height="20px"></canvas>
                            </div>

                            <div class="col-md-6" id="weight-discrepancy-percentage">

                            </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 : {{ round($revenue['todayRevenue'],2) }}</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>{{ round($revenue['totalRevenue'],2) }}</span>
                                    </div>
                                    <div class="col order-details">
                                        <p>Forward</p>
                                        <span>{{ round($revenue['forwardRevenue'],2) }}</span>
                                    </div>
                                    <div class="col order-details">
                                        <p>Reverse</p>
                                        <span>{{ round($revenue['reverseRevenue'],2) }}</span>
                                    </div>
                                    <div class="col order-details">
                                        <p>Weight Discrepancy</p>
                                        <span>{{ round($revenue['weightDiffRevenue'],2) }}</span>
                                    </div>
                                    <div class="col order-details">
                                        <p>Lost</p>
                                        <span>{{ round($revenue['lostRevenue'],2) }}</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 Customer</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">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>

        {{-- Modal --}}
        <div class="modal fade" id="change-password-modal" tabindex="-1" role="dialog" data-keyboard="false"
            data-backdrop="static" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="title-section">
                            <p>Update your password</p>
                        </div>
                    </div>
                    <form id="update-password-form" method="post" autocomplete="off">
                        @csrf
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <label>Old Password<span class="text-danger">*</span></label>
                                    <input type="password" name="old_password" class="form-control" />
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <label>New Password<span class="text-danger">*</span></label>
                                    <input type="password" name="new_password" class="form-control" />
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <label>Change Password<span class="text-danger">*</span></label>
                                    <input type="password" name="confirm_password" class="form-control" />
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <script src="{{ asset('js/custom-script.js') }}"></script>

    <script>
        $(document).ready(function() {
            var isFirst = "{{ Auth::user()->is_first }}";
            if (isFirst == '0') {
                $('#change-password-modal').modal('show');
            } else {
                $('#change-password-modal').modal('hide');
            }
        })

        $("#update-password-form").on('submit', function(e) {
            e.preventDefault();
            var form = $(this);
            $.ajax({
                method: 'POST',
                url: "{{ url('update-auth-password') }}",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: form.serialize(),
                success: function(data) {
                    if (data.success == true) {
                        swal({
                                title: "Success",
                                text: data.message,
                                type: "success",

                                closeOnConfirm: true,
                                showLoaderOnConfirm: true,
                            },
                            function() {
                                window.location.href = '{{ url('/logout') }}';
                            });

                    }

                },
                error: function($response) {
                    console.log($response.status);
                    if ($response.status === 422) {
                        if (Object.size($response.responseJSON) > 0 && Object.size(
                                $response
                                .responseJSON.errors) > 0) {
                            show_validation_error($response.responseJSON.errors);
                        }
                    } else {
                        Swal.fire(
                            'Error', $response.responseJSON.message, 'warning'
                        )
                        setTimeout(function() {}, 1200)
                    }

                }
            });
        });

        $(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: '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();
            WeightDiscrepancyChart1();
            reverseChart1();


            $('.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();
                    case 'weight-discrepancy':
                        WeightDiscrepancyChart1();
                    case 'reverse-pickup':
                        reverseChart1();

                        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 weightChart = 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) {
                   if(data.data.count){

                       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();
                   }else{
                        $('#delivery-no-data').css('display','block');
                        $('#deliveryChart').css('display','none');
                   }

                }
            });
        }

        //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) {
                    
                    if(data.data.count){
                        $('#no-data').css('display','block');
                        $('#tatChart').css('display','none');
                    }else{
                    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) {
                    
                    if(data.data.length > 0){
                        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();
                    }else{
                        $('#zone-no-data').css('display','block');
                        $('#zoneChart').css('display','none');
                    }
                }
            });
        }


        //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);
                }
            });
        }

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

                    reverseChart.data.labels = data.data.labels;

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

                    reverseChart.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>';
                    });

                    $('#reverse-pickup-percentage').html(html);
                }
            });
        }

        function WeightDiscrepancyChart1() {
            $.ajax({
                url: "{{ url('/lsp/weight-discrepancy-graph-data') }}",
                type: "POST",
                data: {
                    'state_id': $('#weight-discrepancy-state').val(),
                    'city_id': $('#weight-discrepancy-city').val(),
                    'branch': $('#weight-discrepancy-branch').val(),
                    _token: "{{ csrf_token() }}"
                },
                success: function(data) {

                    weightChart.data.labels = data.data.labels;

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

                    weightChart.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>';
                    });

                    $('#weight-discrepancy-percentage').html(html);
                }
            });
        }
    </script>
@endsection