@extends('layout.master')
@section('content')
    <section class="content pb-5">
        <div class="container-fluid">
            <div class="row pt-4">
                <div class="col-md-12">
                    <div class="title-section">
                        <p>
                           
                            LSP : Ops Management
                            <a href="#" id="exportAsExcel">
                                <img src={{ asset('/assets/images/excel-file.png') }} alt=""> Export as Excel
                            </a>
                        </p>
                    </div>
                </div>
                <input type="hidden" id="multiple_forward_order_id">
                <input type="hidden" id="multiple_reverse_order_id">
                <div class="col-md-12">
                    <ul class="nav nav-tabs lsp-tabs" id="myTab" role="tablist">
                        <li class="nav-item lsp-item">
                            <a class="nav-link lsp-link active" id="forward-tab" data-toggle="tab" href="#forward"
                                role="tab" aria-controls="forward" aria-selected="true">Forward Orders</a>
                        </li>
                        <li class="nav-item lsp-item">
                            <a class="nav-link lsp-link" id="return-tab" data-toggle="tab" href="#return" role="tab"
                                aria-controls="return" aria-selected="false">Return Orders</a>
                        </li>
                    </ul>
                    <div class="tab-content lsp-tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="forward" role="tabpanel" aria-labelledby="forward-tab">

                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group custom-form-group">
                                        <label class="form-label" for="customer">Search by Order ID or AWB</label>
                                        <input class="form-control order_awb_no" placeholder="" type="text"
                                            value="">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group custom-form-group">
                                        <label class="form-label" for="customer">All Tracking Status</label>

                                        <div class="dropdown bootstrap-select show-tick w-75">
                                            <select class="selectpicker order_status w-75" multiple data-actions-box="true"
                                                tabindex="-98" id="">
                                                @foreach ($lsp_ops_management_status as $status)
                                                    <option value="{{ $status }}">
                                                        {{ ucwords(str_replace('_', ' ', $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 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>

                                <div class="col-md-12">
                                    <div class="table-responsive">
                                        <table class="table table-striped" id="forward-datatable">
                                            <thead>
                                                <tr>
                                                    <th scope="col">
                                                        <input class="filled-in fill-check" id="select_all_forward" name="group1" type="checkbox">
                                                        <label for="select_all_forward"></label>
                                                    </th>
                                                    <th scope="col">Awb No</th>
                                                    <th scope="col">Order ID </th>
                                                    <th scope="col">Reffrence No.</th>
                                                    <th scope="col">Pickup Address</th>
                                                    <th scope="col">Pickup Contact </th>
                                                    <th scope="col">Pickup Pincode</th>
                                                    <th scope="col">Order Details</th>
                                                    <th scope="col">Status</th>
                                                    <th scope="col">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>

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

                        </div>

                        <div class="tab-pane fade" id="return" role="tabpanel" aria-labelledby="return-tab">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group custom-form-group">
                                        <label class="form-label" for="customer">Search by Order ID or AWB</label>
                                        <input class="form-control order_awb_no" placeholder="" type="text"
                                            value="">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group custom-form-group">
                                        <label class="form-label" for="customer">All Tracking Status</label>

                                        <div class="dropdown bootstrap-select show-tick w-75">
                                            <select class="selectpicker order_status w-75" multiple
                                                data-actions-box="true" tabindex="-98" id="">
                                                @foreach ($order_status as $status)
                                                    <option value="{{ $status }}">
                                                        {{ ucwords(str_replace('_', ' ', $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 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>

                                <div class="col-md-12">
                                    <div class="table-responsive">
                                        <table class="table table-striped" id="return-datatable">
                                            <thead>
                                                <tr>
                                                    <th scope="col">
                                                        <input class="filled-in fill-check" name="group1"
                                                            type="checkbox" id="active">
                                                        <label for="active"></label>
                                                    </th>
                                                    <th scope="col"> Date <img
                                                            src={{ asset('/assets/images/calender-lsp.png') }}
                                                            alt=""></th>
                                                    <th scope="col">Awb No</th>
                                                    <th scope="col">Order ID </th>
                                                    <th scope="col">Forward Order No.</th>
                                                    <th scope="col">Reverse Pickup Address</th>
                                                    <th scope="col">Pickup Contact </th>
                                                    <th scope="col">Pickup Pincode</th>
                                                    <th scope="col">No. of items </th>
                                                    <th scope="col">Reverse Reason </th>
                                                    <th scope="col">Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>

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

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

    <script>
        var status = '';
        var order_type = 'forward';
        var order_awb_no = '';
        $(document).ready(function() {
            $("table").on('change','select[name="actions"]',function(){
                var parent_tr=$(this).parents('tr');
                var actions=$(this).val();
                var order_product_id=$(parent_tr).find('.container_checkbox_forward').val();
                if(actions=="Weight Discrepancy"){
                    $(parent_tr).find('.weight_discrepancy_colorbox').trigger('click');
                }
            });

            $("#forward-datatable").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,
                responsive: true,
                ajax: {
                    url: "{{ url('/lsp-ops/table') }}",
                    data: function(d) {
                        d.status = status;
                        d.order_type = order_type;
                        d.order_awb_no = order_awb_no;
                        d.pagetype = 'opsmanagement';
                    }
                },

                columns: [{
                        data: 'checkbox',
                        name: 'checkbox',
                        sortable: false,
                        searchable: false
                    },
                    {
                        data: 'docket_no',
                        name: 'docket_no',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'order_id',
                        name: 'order_id',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'reference_no',
                        name: 'reference_no',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'pickupaddress',
                        name: 'pickupaddress',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'pickup_contact',
                        name: 'pickup_contact',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'pickup_pincode',
                        name: 'pickup_pincode',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'order_details',
                        name: 'order_details',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'order_status',
                        name: 'order_status',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    }
                ],
                fnDrawCallback: function( oSettings ) {
                    $(".weight_discrepancy_colorbox").colorbox({iframe: true, width: '800px', height: '365px',top:true});
                },
                select: {
                    style: 'multi',
                },
            });


            $("#return-datatable").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,
                responsive: true,
                ajax: {
                    url: "{{ url('/lsp-ops/table') }}",
                    data: function(d) {
                        d.status = status;
                        d.order_type = order_type;
                        d.order_awb_no = order_awb_no;
                        d.pagetype = 'opsmanagement';
                    }
                },

                columns: [{
                        data: 'checkbox',
                        name: 'checkbox',
                        sortable: false,
                        searchable: false
                    },
                    {
                    data: 'start_date',
                        name: 'start_date',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'docket_no',
                        name: 'docket_no',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'order_id',
                        name: 'order_id',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'order_id',
                        name: 'order_id',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'reverse_pickup_address',
                        name: 'reverse_pickup_address',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'pickup_contact',
                        name: 'pickup_contact',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'pickup_pincode',
                        name: 'pickup_pincode',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'products',
                        name: 'products',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'reverse_reason',
                        name: 'reverse_reason',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'order_status',
                        name: 'order_status',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    }
                ],
                fnDrawCallback: function( oSettings ) {
                    $(".weight_discrepancy_colorbox").colorbox({iframe: true, width: '800px', height: '365px',top:true});
                },
                select: {
                    style: 'multi',
                },
            });

        });

        $('.nav-link').click(function(e) {
            order_awb_no = '';
            status = '';
            $('.order_awb_no').val('');
            $('.order_status').selectpicker('val', '');

            order_type = $(this).attr('id').slice(0, -4);
            $("#" + order_type + "-datatable").DataTable().draw(true);
        });

        $('.order_awb_no').keyup(function() {
            order_awb_no = $(this).val();
            $("#" + order_type + "-datatable").DataTable().draw(true);
        })

        $('.order_status').change(function() {
            status = $(this).val();
            $("#" + order_type + "-datatable").DataTable().draw(true);
        })

        $('.bs-select-all .bs-deselect-all').click(function() {
            $("#" + order_type + "-datatable").DataTable().draw(true);
        });

        $('#select_all_forward').on('click', function() {
            var id = [];
            if (this.checked) {
                $('.container_checkbox_forward').prop('checked', true);
                $('.container_checkbox_forward').each(function(){
                    id.push($(this).val());
                });
            } else {
                $('.container_checkbox_forward').prop('checked', false);
            }

            $("#multiple_forward_order_id").val(JSON.stringify(id));

            if(id.length > 0){
                $('.bulk-rto').removeAttr("disabled");
            }else{
                $('.bulk-rto').attr("disabled", true);
            }
        });

        $(document).on('click','.container_checkbox_forward',function(){

            var id=[];

            $('.container_checkbox_forward:checked').each(function(){
                id.push($(this).val());
            });

            $("#multiple_forward_order_id").val(JSON.stringify(id));

            if($('.container_checkbox_forward:checked').length == $('.container_checkbox_forward').length) {
                $('#select_all_forward').prop("checked", true);
            } else {
                $('#select_all_forward').prop("checked", false);
            }

            if(id.length > 0){
                $('.bulk-rto').removeAttr("disabled");
            }else{
                $('.bulk-rto').attr("disabled", true);
            }
        });

        $('#exportAsExcel').click(function() {
            var id = $("#myTab .nav-link.active").attr('id');
            var multipleIds, exportStatus;
            switch(id){
                case 'forward-tab':
                    multipleIds = $('#multiple_forward_order_id').val();
                    exportStatus = status;
                    break;
                case 'return-tab':
                    multipleIds = $('#multiple_reverse_order_id').val();
                    exportStatus = status;
                    break;
            }
            if(id == 'forward-tab'){
                window.location = "{{ route('order-table-export') }}?ids="+btoa(multipleIds)+"&status="+exportStatus;
            }else{
                window.location = "{{ route('return-order-table-export') }}?ids="+btoa(multipleIds)+"&status="+exportStatus;
            }
        });
    </script>
@endsection