@extends('layout.master')

@section('content')
    <section class="content pb-5">
        <div class="container-fluid">
            @php
                $order = $logs->first() ? $logs->first()->model : null;
            @endphp
            <div class="row pt-4">
                <div class="col-md-12">
                    <div class="title-section">
                        <p>Order ID - {{ @$order->order_id }} : Details <a href="#"> <img src="{{ asset('/assets/images/excel-file.png') }}" alt="">
                                Export as Excel </a></p>
                    </div>
                </div>
            </div>

            <div class="row">
                <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 @if(@$order->order_type == 'forward') active @endif" id="pickup-tab" data-toggle="tab" href="#pickup" role="tab"
                                aria-controls="pickup" aria-selected="false">Forward Order</a>
                        </li>
                        <li class="nav-item lsp-item">
                            <a class="nav-link lsp-link @if(@$order->order_type == 'return') active @endif" id="delivery-tab" data-toggle="tab" href="#delivery"
                                role="tab" aria-controls="delivery" aria-selected="true">Reverse Order</a>
                        </li>
                        {{--  <li class="nav-item lsp-item">
                            <a class="nav-link lsp-link" id="reverse-tab" data-toggle="tab" href="#reverse" role="tab"
                                aria-controls="reverse" aria-selected="false">COD</a>
                        </li>  --}}
                    </ul>
                    <div class="tab-content lsp-tab-content" id="myTabContent">
                        {{--  <div class="tab-pane fade" id="pickup" role="tabpanel" aria-labelledby="pickup-tab">
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem, laboriosam. Quo natus odit
                            magni sequi veritatis, iste consequuntur beatae facilis.
                        </div>  --}}

                        <div class="tab-pane fade active show" id="delivery" role="tabpanel"
                            aria-labelledby="delivery-tab">

                            <div class="row justify-content-center">
                                <div class="col-md-9 col-12 mt-2 mt-sm-5">
                                    <div class="timeline">
                                        @foreach ($logs as $log)
                                            <div class="contain @if($loop->iteration%2 == 0) right @else left @endif">
                                                <div class="content">
                                                    <h2>{{ ucwords($log->status) }}</h2>
                                                    <span>{{ $log->created_at }}</span>
                                                    <h2>{{ $log->remark }}</h2>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{--  <div class="tab-pane fade" id="reverse" role="tabpanel" aria-labelledby="reverse-tab">
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem, laboriosam. Quo natus odit
                            magni sequi veritatis, iste consequuntur beatae facilis.
                        </div>  --}}
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        var order_type = 'forward';
        var order_awb_no = '';
        $(document).ready(function() {
            $("table").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-ops/table') }}",
                    data: function(d) {
                        d.order_type = order_type;
                        d.order_awb_no = order_awb_no;
                    }
                },

                columns: [{
                        data: 'checkbox',
                        name: 'checkbox',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        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'
                    },
                ],
                select: {
                    style: 'multi',
                },
            });
        });

        $('.nav-link').click(function(e) {
            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);
        })
    </script>
@endsection