@extends('layout.master')

@section('content')
    <section class="content pb-5">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="overviewbtns">
                        <a href="{{ url('/home') }}" class="btn btn-secondary mr-2">Overview</a>
                        <a href="{{ url('/orders/dashboard') }}" class="btn btn-secondary mr-2">Orders</a>
                        <a href="{{ url('/dashboard/shipments') }}" class="btn btn-secondary mr-2">Shipments</a>
                        <a href="{{ url('/dashboard/weight-discrepancy') }}" class="btn btn-secondary mr-2">Weight
                            Discrepancy</a>
                        <a href="{{ url('/dashboard/ndr') }}" class="btn btn-secondary mr-2">NDR</a>
                        <a href="{{ url('/dashboard/rto') }}" class="btn btn-secondary mr-2">RTO </a>
                        <a href="{{ url('/dashboard/lsp-performance') }}" class="btn btn-secondary mr-2">LSP Performance</a>
                        <!-- <a href="{{ url('/dashboard/delays') }}" class="btn btn-secondary active">Delays</a> -->
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-2">
                    <div class="form-group custom-form-group">
                        <label class="form-label" for="customer">Date range</label>
                        <input class="form-control" placeholder="" type="text" value="{{ date('d/m/Y', strtotime('-1 month +1 day')) . ' - ' . date('d/m/Y') }}" id="date-range">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group custom-form-group">
                        <label class="form-label" for="customer">Select zone </label>
                        <select class="form-control" id="zone-filter">
                            @foreach($zones as $key => $zone)
                                <option value="{{ $zone->name }}">{{ $zone->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group custom-form-group">
                        <label class="form-label" for="customer">Select LSP</label>
                        <select class="form-control" id="lsp-filter">
                            <option value="">Select LSP</option>
                            @foreach($lsps as $key => $lsp)
                                <option value="{{ $lsp->id }}">{{ $lsp->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group custom-form-group">
                        <label class="form-label" for="customer">Select payment mode</label>
                        <select class="form-control" id="mode-filter">
                            <option value="">Select Payment Mode</option>
                            @foreach($payment_modes as $key => $mode)
                                <option value="{{ $mode }}">{{ strtoupper($mode) }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group custom-form-group">
                        <label class="form-label" for="customer">Select mode</label>
                        <select class="form-control">
                            <option value="air">Air</option>
                            <option value="surface">Surface</option>
                            <option value="self">Self</option>
                        </select>
                    </div>
                </div>
                <!-- <div class="col-md-2">
              <div class="form-group custom-form-group">
                <label class="form-label" for="customer">&nbsp;</label>
                <button type="button" class="btn btn-danger btn-block">SEARCH</button>
              </div>
            </div> -->
            </div>

            <div class="row py-4">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col">
                            <div class="zone-box">
                                <div class="delays-content">
                                    <h6>Misrouted Shipments</h6>
                                    <p>10%</p>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="zone-box">
                                <div class="delays-content">
                                    <h6>ODA Shipments</h6>
                                    <p>5%</p>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="zone-box">
                                <div class="delays-content">
                                    <h6>ODA Shipments</h6>
                                    <p>10%</p>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="zone-box">
                                <div class="delays-content">
                                    <h6>Lost Shipments</h6>
                                    <p>5%</p>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="zone-box">
                                <div class="delays-content">
                                    <h6>Damage Shipments</h6>
                                    <p>5%</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row pt-4">
                <div class="col-md-6">
                    <div class="title-section">
                        <p> Pickup Pendency</p>
                    </div>

                    <div class="zone-box">

                        <div class="table-responsive scroll pickup-table">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th scope="col"></th>
                                        <th scope="col">1 Day Delayed</th>
                                        <th scope="col">2 Day Delayed</th>
                                        <th scope="col">3 Day Delayed</th>
                                        <th scope="col">3+ Day Delayed</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Ecom Reverse ROS</td>
                                        <td>2</td>
                                        <td>3</td>
                                        <td>2</td>
                                        <td>21</td>
                                    </tr>
                                    <tr>
                                        <td>Xpressbees Surface</td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td>1</td>
                                    </tr>
                                    <tr>
                                        <td>Delivery Essential</td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td>1</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>

                <div class="col-md-6">
                    <div class="title-section">
                        <p>NDR to Reattempt Delays</p>
                    </div>

                    <div class="zone-box">
                        <div class="table-responsive pickup-table">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th scope="col"></th>
                                        <th scope="col">1 Day Delayed</th>
                                        <th scope="col">2 Day Delayed</th>
                                        <th scope="col">3 Day Delayed</th>
                                        <th scope="col">3+ Day Delayed</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Ecom Reverse ROS</td>
                                        <td>2</td>
                                        <td>3</td>
                                        <td>2</td>
                                        <td>21</td>
                                    </tr>
                                    <tr>
                                        <td>Xpressbees Surface</td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td>1</td>
                                    </tr>
                                    <tr>
                                        <td>Delivery Essential</td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td>1</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>

            </div>

            <div class="row pt-4 pt-sm-5">
                <div class="col-md-4">
                    <div class="title-section">
                        <p>In Transit Delay</p>
                    </div>

                    <div class="zone-box">
                        <div class="table-responsive pickup-table">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th scope="col"></th>
                                        <th scope="col">1 Day Delayed</th>
                                        <th scope="col">2 Day Delayed</th>
                                        <th scope="col">2+ Day Delayed</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Zone A</td>
                                        <td>1</td>
                                        <td>10</td>
                                        <td>3</td>
                                    </tr>
                                    <tr>
                                        <td>Zone B</td>
                                        <td>111</td>
                                        <td>2</td>
                                        <td>87</td>
                                    </tr>
                                    <tr>
                                        <td>Zone C</td>
                                        <td>11</td>
                                        <td>2</td>
                                        <td>15</td>
                                    </tr>
                                    <tr>
                                        <td>Zone D</td>
                                        <td>96</td>
                                        <td>63</td>
                                        <td>385</td>
                                    </tr>
                                    <tr>
                                        <td>Zone E</td>
                                        <td>22</td>
                                        <td>25</td>
                                        <td>218</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="title-section">
                        <p>RAD to Delivery Delay</p>
                    </div>
                    <div class="zone-box">
                        <div class="table-responsive pickup-table">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th scope="col"></th>
                                        <th scope="col">1 Day Delayed</th>
                                        <th scope="col">2 Day Delayed</th>
                                        <th scope="col">2+ Day Delayed</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Zone A</td>
                                        <td>1</td>
                                        <td>10</td>
                                        <td>3</td>
                                    </tr>
                                    <tr>
                                        <td>Zone B</td>
                                        <td>111</td>
                                        <td>2</td>
                                        <td>87</td>
                                    </tr>
                                    <tr>
                                        <td>Zone C</td>
                                        <td>11</td>
                                        <td>2</td>
                                        <td>15</td>
                                    </tr>
                                    <tr>
                                        <td>Zone D</td>
                                        <td>96</td>
                                        <td>63</td>
                                        <td>385</td>
                                    </tr>
                                    <tr>
                                        <td>Zone E</td>
                                        <td>22</td>
                                        <td>25</td>
                                        <td>218</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="title-section">
                        <p>RTO Delay</p>
                    </div>
                    <div class="zone-box">
                        <div class="table-responsive pickup-table">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th scope="col"></th>
                                        <th scope="col">1 Day Delayed</th>
                                        <th scope="col">2 Day Delayed</th>
                                        <th scope="col">2+ Day Delayed</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Zone A </td>
                                        <td>0</td>
                                        <td>26</td>
                                        <td>8</td>
                                    </tr>
                                    <tr>
                                        <td>Zone B</td>
                                        <td>109</td>
                                        <td>5</td>
                                        <td>119</td>
                                    </tr>
                                    <tr>
                                        <td>Zone C</td>
                                        <td>48</td>
                                        <td>1</td>
                                        <td>11</td>
                                    </tr>
                                    <tr>
                                        <td>Zone D</td>
                                        <td>18</td>
                                        <td>23</td>
                                        <td>295</td>
                                    </tr>
                                    <tr>
                                        <td>Zone E</td>
                                        <td>19</td>
                                        <td>1</td>
                                        <td>13</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>

        $(document).ready(function(){

            $('#date-range').daterangepicker({
                locale: {
                    format: 'DD/MM/YYYY'
                },
                ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                },
                autoApply: true,
            });

        });

    </script>
@endsection