@extends('layout.master')

@section('content')

<section class="content pb-5">
    <div class="container-fluid">
        <meta name="csrf-token" content="{!! csrf_token() !!}">

        <div class="row pt-4">
            <div class="col-md-12">
                <div class="title-section">
                    <p>Shipping <span>Tracking</span></p>
                </div>
            </div>
        </div>

        <div class="row pt-sm-4 pt-0">
            <div class="col-md-2">
                <div class="form-group custom-form-group">
                    <label class="form-label" for="customer">Search by Order ID or AWB</label>
                    <input class="form-control" id="order_awb_no" placeholder="" type="text" value="">
                </div>
            </div>
            <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" id="date-range" placeholder="" type="text" value="{{ date('d/m/Y', strtotime('-1 month +1 day')) . ' - ' . date('d/m/Y') }}">
                </div>
            </div>


            <div class="col-md-4">
                <div class="row">
                    <div class="col-md-7">
                                <div class="form-group custom-form-group">
                                <label class="form-label" for="customer">All Tracking Status</label>

                                <div class="dropdown bootstrap-select show-tick">
                                    <select class="selectpicker"
                                    multiple name="trackingStatus[]" data-actions-box="true" tabindex="-98" id="trackingStatus">

                                    @foreach($shipment['status'] as $key => $value)
                                    <option value="{{$value['status']}}">{{ucwords($value['status'])}}</option>
                                    @endforeach
                                    </select> 
                            
                                <div class="dropdown-menu ">
                                    <div class="bs-actionsbox">
                                        <div class="btn-group btn-group-sm btn-block"><button type="button"
                                                class="actions-btn bs-select-all btn btn-light">Select All</button><button
                                                type="button" class="actions-btn bs-deselect-all btn btn-light">Deselect
                                            All</button>
                                        </div>
                                    </div>
                                </div>

                                <div class="inner show" role="listbox" id="bs-select-1" tabindex="-1"
                                aria-multiselectable="true">
                                <ul class="dropdown-menu inner show" role="presentation"></ul>
                                </div>
                                </div>

                            </div>
                    </div>

                    <div class="col-md-5">
                        <div class="tracking-sec">
                            <label class="form-label" for="customer">&nbsp;</label> <br />
                        <!-- <a style="display: none; mt-5" href=""><img src="{{ asset('/assets/images/tracking.svg') }}" height="110px" alt=""></a> -->
                            <button id="processNowButton" type="button" class="btn btn-danger save-btn mr-3 text-capitalize">Process Now</button>
                    </div>
                    </div>

                </div>

            </div>


            
        </div>

        <div class="row"  id="dataTableDiv" style="display: none;">
            <div class="col-md-12">
                <div class="table-responsive">
                    <table id="shipmentTracking" class="table table-striped" style="width:100% !important">
                        <thead>
                            <tr>
        
                                <th scope="col">Order Date</th>
                                <th scope="col">Order ID</th>
                                <th scope="col">Zone</th>
                                <th scope="col">AWB No.</th>
                                <th scope="col">Customer Info</th>
                                <th scope="col">LSP</th>
                                <th scope="col">Pickup Address</th>
                                <th scope="col">RTO Reason</th>
                                <th scope="col">Status</th>
        
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>



    </div>
</div>

<!-- </div> -->

<!-- <div class="row" id="dataTableDiv" style="display: none;">
    <div class="col-md-12">

        <div class="table-responsive">
            <table id="shipmentTracking" class="table table-striped" style="width:100% !important">
                <thead>
                    <tr>

                        <th scope="col">Order Date</th>
                        <th scope="col">Order ID</th>
                        <th scope="col">Zone</th>
                        <th scope="col">AWB No.</th>
                        <th scope="col">Customer Info</th>
                        <th scope="col">LSP</th>
                        <th scope="col">Pickup Address</th>
                        <th scope="col">RTO Reason</th>
                        <th scope="col">Status</th>

                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div> -->

<!-- <div class="row my-5">
    <div class="col-md-12 text-center">
        <div class="tracking-sec">
            <a style="display: none;" href=""><img src="{{ asset('/assets/images/tracking.svg') }}" height="110px" alt=""></a>
            <button id="processNowButton" type="button" class="btn btn-danger save-btn mr-3 text-capitalize">Process Now</button>
        </div>
    </div>

</div> -->

</div>
</section>

<script>

    $(document).ready(function(){

        let trackingStatus = [];

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

            ajax: {
                url: "{{ url('/shipments/data-table/tracking') }}",
                data: function(d) {
                    d.status = trackingStatus;
                    d.date_range = $('#date-range').val();
                    d.order_awb_no = $('#order_awb_no').val();
                }
            },

            columns: [{
                data: 'start_date',
                name: 'start_date',
                searchable: true,
                orderable: true,
                defaultContent: 'NA'
            },
            {
                data: 'order_id',
                name: 'order_id',
                searchable: true,
                orderable: true,
                defaultContent: 'NA'
            },
            {
                data: 'zone',
                name: 'zone',
                searchable: true,
                orderable: true,
                defaultContent: 'NA'
            },
            {
                data: 'docket_no',
                name: 'docket_no',
                searchable: true,
                orderable: true,
                defaultContent: 'NA'
            },
            {
                data: 'customers',
                name: 'customers',
                searchable: true,
                orderable: true,
                defaultContent: 'NA'
            },
            {
                data: 'lsp',
                name: 'lsp',
                searchable: true,
                orderable: true,
                defaultContent: 'NA'
            },
            {
                data: 'pickupaddress',
                name: 'pickupaddress',
                searchable: true,
                orderable: true,
                defaultContent: 'NA'
            },
            {
                data: 'rto_reason',
                name: 'rto_reason',
                searchable: true,
                orderable: true,
                defaultContent: 'NA'
            },
            {
                data: 'order_status',
                name: 'order_status',
                searchable: true,
                orderable: true,
                defaultContent: 'NA'
            },
            ],
            select: {
                style: 'multi',
            },
        });

       /* console.log('shipmentTrackingOrders',shipmentTrackingOrders);*/


        $("#processNowButton").on("click", function(e) {

            trackingStatus = $('#trackingStatus').val();
            if ( ! shipmentTrackingOrders.data().count() ) {
             $('#dataTableDiv').hide();
            }else {
                $('#dataTableDiv').show();
            }
            $("#shipmentTracking").DataTable().draw(true);

        });

    });

</script>
{{--  <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>  --}}
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script>
    $(document).ready(function(){
        
        var currentDate = new Date();
        var currentYear = currentDate.getFullYear();
        var lastYear = currentYear - 1;
        
        var startDate = '01/04/'+lastYear;
        var endDate = '31/03/'+currentYear;

        $('#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')],
               'Last 6 Month': [moment().subtract(6, 'month').startOf('month'), moment()],
               'Last Financial Year': [ startDate, endDate]
            },
            autoApply: true,
        });

    });


    $('#date-range').change(function(){
        $("#shipmentTracking").DataTable().draw(true);
    });

    $('#order_awb_no').keyup(function(){
        $("#shipmentTracking").DataTable().draw(true);
    });
</script>

@endsection