@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 : Transaction History <a href="#" id="transactions-export"> <img src="/assets/images/excel-file.png" alt=""> Export as Excel </a></p>
                    </div>
                </div>

                <div class="col-md-2">

                </div>

                <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 Order</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">Reverse Order</a>
                        </li>
                        <li class="nav-item lsp-item">
                            <a class="nav-link lsp-link" id="cod-tab" data-toggle="tab" href="#cod" role="tab"
                                aria-controls="cod" aria-selected="false">COD</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 align-items-center">
                                <div class="col-md-3">
                                    <div class="form-group custom-form-group">
                                        <input class="form-control customer_name" placeholder="Customer Name" type="text"
                                            value="">
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <p class="font-weight-bold">Last 30 Days <img src="/assets/images/calender2.png" class="ml-2"
                                            alt=""></p>
                                </div>


                                <div class="col-md-12">
                                    <div class="table-responsive">
                                        <table class="table table-striped" id="forward-datatable">
                                            <thead>
                                                <tr>
                                                    <th scope="col">AWB No.</th>
                                                    <th scope="col">Order ID </th>
                                                    <th scope="col">Seller Name</th>
                                                    <th scope="col">Buyer Name </th>
                                                    <th scope="col">Scheduled Pickup</th>
                                                    <th scope="col">Pickup Date</th>
                                                    <th scope="col">Picker Name</th>
                                                    <th scope="col">TAT Status</th>
                                                    <th scope="col">Shipment Value</th>
                                                    <th scope="col">Expected Charges </th>
                                                    <th scope="col">Additional Info</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 align-items-center">
                                <div class="col-md-3">
                                    <div class="form-group custom-form-group">
                                        <input class="form-control customer_name" placeholder="Customer Name" type="text"
                                            value="">
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <p class="font-weight-bold">Last 30 Days <img src="/assets/images/calender2.png"
                                            class="ml-2" alt=""></p>
                                </div>


                                <div class="col-md-12">
                                    <div class="table-responsive">
                                        <table class="table table-striped" id="return-datatable">
                                            <thead>
                                                <tr>
                                                    <th scope="col">AWB No.</th>
                                                    <th scope="col">Order ID </th>
                                                    <th scope="col">From Customer</th>
                                                    <th scope="col">To Customer</th>
                                                    <th scope="col">Reverse Order ID</th>
                                                    <th scope="col">Pickup Date</th>
                                                    <th scope="col">TAT Status</th>
                                                    <th scope="col">Shipment Value</th>
                                                    <th scope="col">Expected Charges </th>
                                                    <th scope="col">Additional Info</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="cod" role="tabpanel" aria-labelledby="cod-tab">

                            <div class="row align-items-center">
                                <div class="col-md-3">
                                    <div class="form-group custom-form-group">
                                        <input class="form-control customer_name" placeholder="Customer Name" type="text"
                                            value="">
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <p class="font-weight-bold">Last 30 Days <img src="/assets/images/calender2.png"
                                            class="ml-2" alt=""></p>
                                </div>


                                <div class="col-md-12">
                                    <div class="table-responsive">
                                        <table class="table table-striped" id="cod-datatable">
                                            <thead>
                                                <tr>
                                                    <th scope="col">AWB No.</th>
                                                    <th scope="col">Order ID </th>
                                                    <th scope="col">Customer Name Seller</th>
                                                    <th scope="col">Customer Name Buyer</th>
                                                    <th scope="col">Delivered on</th>
                                                    <th scope="col">TAT Status</th>
                                                    <th scope="col">Shipment Value</th>
                                                    <th scope="col">Expected Charges </th>
                                                    <th scope="col">Collected by </th>
                                                    <th scope="col">Additional Info</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        var order_type = 'forward';
        var customer_name = '';
        $(document).ready(function() {
            $("#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,

                ajax: {
                    url: "{{ url('/lsp/transactions/table') }}",
                    data: function(d) {
                        d.order_type = order_type;
                        d.customer_name = customer_name;
                    }
                },

                columns: [
                    {
                        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: 'seller_name',
                        name: 'seller_name',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'buyer_name',
                        name: 'buyer_name',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'scheduled_pickup',
                        name: 'scheduled_pickup',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'pickup_date',
                        name: 'pickup_date',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'picker_name',
                        name: 'picker_name',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'tat_status',
                        name: 'tat_status',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'shipment_value',
                        name: 'shipment_value',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'amount',
                        name: 'amount',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                ],
                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,

                ajax: {
                    url: "{{ url('/lsp/transactions/table') }}",
                    data: function(d) {
                        d.order_type = order_type;
                        d.customer_name = customer_name;
                    }
                },

                columns: [
                    {
                        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: 'seller_name',
                        name: 'seller_name',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'buyer_name',
                        name: 'buyer_name',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'start_date',
                        name: 'start_date',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'pickup_date',
                        name: 'pickup_date',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'picker_name',
                        name: 'picker_name',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {{--  {
                        data: 'tat_status',
                        name: 'tat_status',order_type
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },  --}}
                    {
                        data: 'shipment_value',
                        name: 'shipment_value',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'amount',
                        name: 'amount',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                ],
                select: {
                    style: 'multi',
                },
            });

            $("#cod-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,

                ajax: {
                    url: "{{ url('/lsp/transactions/table') }}",
                    data: function(d) {
                        d.order_type = order_type;
                        d.customer_name = customer_name;
                    }
                },

                columns: [
                    {
                        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: 'seller_name',
                        name: 'seller_name',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'buyer_name',
                        name: 'buyer_name',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'scheduled_pickup',
                        name: 'scheduled_pickup',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'pickup_date',
                        name: 'pickup_date',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'picker_name',
                        name: 'picker_name',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {{--  {
                        data: 'tat_status',
                        name: 'tat_status',order_type
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },  --}}
                    {
                        data: 'shipment_value',
                        name: 'shipment_value',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'amount',
                        name: 'amount',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                ],
                select: {
                    style: 'multi',
                },
            });
        });

        $('.nav-link').click(function(e) {
            order_type = $(this).attr('id').slice(0, -4);
            customer_name = '';
            $('.customer_name').val('');
            $("#" + order_type + "-datatable").DataTable().draw(true);
        });

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

        $('#transactions-export').click(function(){
            location.href = "{{ url('/lsp/transaction-export') }}?order_type="+order_type+"&customer_name="+customer_name;
        });
    </script>
@endsection