@extends('soap.layout.main')

@section('content')
    <div class="m-grid__item m-grid__item--fluid m-grid m-grid--hor-desktop m-grid--desktop m-body">
        <div class="m-grid__item m-grid__item--fluid  m-grid m-grid--ver	 m-container--responsive m-container--xxl m-page__container">
            <div class="m-grid__item m-grid__item--fluid m-wrapper">
                <div class="m-content">

                    <div class="m-portlet m-portlet--mobile">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">
                                    <h3 class="m-portlet__head-text">
                                        SHIPMENT HISTORY
                                    </h3>
                                </div>
                            </div>
                            <div class="m-portlet__head-tools">
                                <a href="{{ route('dashboard.export') }}">Export to Excel</a>
                            </div>
                        </div>
                        <div class="m-portlet__body">


                            <!--begin: Table DataTable -->
                            <div class="table-responsive">
                                <table class="table table-striped" id="bookings-table">
                                    <thead>
                                        <tr>
                                            <th>BOOKING NO:</th>
                                            <th>Transport Type: </th>
                                            <th>Departure Port:</th>
                                            <th>Destination Port:</th>
                                            <th>Shipment Condition:</th>
                                            <th>Shipper Name:</th>
                                            <th>Consignee Name: </th>
                                            {{--<th>Notify Name:</th>--}}
                                            <th>Quantity: </th>
                                            <th>Unit Code:</th>
                                            <th>Weight:</th>
                                            <th>Volume:</th>
                                            <th>ETD Date:</th>
                                            <th>ETA Date:</th>
                                            {{--<th>ETC Date:</th>--}}
                                            <th>HBL:</th>
                                            <th>Container Number:</th>
                                            <th>Customer code:</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                            <!--end: Table DataTable -->
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
@stop


<div id="test" style="display: none;"></div>
@push('scripts')
<script>
    $(function() {
        $('#bookings-table').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            pageLength: 50,
            ajax: '{!! route('dashboard.data') !!}',
            columns: [
                { data: 'File_No', name: 'File_No' },
                { data: 'Transporttype', name: 'Transporttype' },
                { data: 'depname', name: 'depname' },
                { data: 'desname', name: 'desname' },
                { data: 'Shipment_Condition', name: 'Shipment_Condition' },
                { data: 'sgipper', name: 'sgipper' },
                { data: 'consignee', name: 'consignee' },
                // { data: 'notify', name: 'notify' },
                { data: 'decqty', name: 'decqty' },
                { data: 'sunits', name: 'sunits' },
                { data: 'decweight', name: 'decweight' },
                { data: 'decvolume', name: 'decvolume' },
                { data: 'ETD_Date', name: 'ETD_Date' },
                { data: 'ETA_Date', name: 'ETA_Date' },
                // { data: 'ETC_Date', name: 'ETC_Date' },
                { data: 'HBL_main', name: 'HBL_main' },
                { data: 'codgrpcontainer', name: 'codgrpcontainer' },
                { data: 'Customer_code', name: 'Customer_code' }
            ],
            "language": {
                "search": "Search by Booking / Container No"
            },
            "order": [[ 0, "desc" ]]
        });
    });
</script>
@endpush