@extends('layouts.main_without_top_button')
@section('demurrages')
    active
@stop
@section('title')
    {{ $vendor->name }} : Laytimes
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="{{route('vendors.index')}}">Vendors</a> <span class="divider">/</span></li>
        <li><a href="{{route('vendors.show')}}">{{ $vendor->name }} Profile</a> <span class="divider">/</span></li>
        <li class="active">Free Times</li>
    </ul>
@stop
@section('contentinner')
    <div class="tabbable">
        @include('vendors.includes.vendor_profile')
        <div class="tab-content">
            <div class="tab-pane active">
                <div class="msghead">
                    <ul class="msghead_menu">
                        <li class="right btn-group">
                            <div class="btn-group">
                                <button class="btn" onclick="create('{{ route('container_laytimes.create', $vendor->id) }}')">
                                    NEW CONTAINER LAYTIME
                                </button>
                            </div><!--btn-group-->
                        </li>
                    </ul>
                    <span class="clearall"></span>
                </div><!--msghead-->
                <br>
                <table class="table table-bordered table-condensed" id="main_dt">
                    <thead>
                    <tr>
                        <th style="width: 05%">S/N</th>
                        {{--<th style="width: 05%">More</th>--}}
                        <th style="width: 30%">Route</th>
                        <th style="width: 10%">Container Type</th>
                        <th style="width: 10%">Free Time</th>
                        <th style="width: 05%">Action</th>
                    </tr>
                    </thead>
                </table>
            </div><!--tab-pane-->
        </div><!--tabcontent-->
    </div><!--tabbable-->

    <script>
        var mainDataTable = jQuery('#main_dt').DataTable({
            "oLanguage": {
                "sLoadingRecords": "Please wait - loading data...",
                "sZeroRecords": "No data available.",
                "sInfoEmpty": "No entries to display."
            },
            ajax: {
                url: "{{ route("container_laytimes.dt", $vendor->id) }}",
                data: function (d) {},
                error: function (xhr, textStatus, error) {
                    onAjaxError(xhr, textStatus, error);
                }
            },
            scrollCollapse: true,
            "sPaginationType": "full_numbers",
            processing: true,
            serverSide: true,
            "columns": [
                {"orderable": false, data: 'checkbox'},
//                {
//                    "class": "details-control",
//                    "orderable": false,
//                    "data": null,
//                    "defaultContent": ""
//                },
                {"class": "link", data: 'route'},
                {"class": "link", data: 'container_type'},
                {"class": "link", data: 'laytime'},
                {"orderable": false, data: 'action'}
            ],
            "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                var index = iDisplayIndex +1;
                $('td:eq(0)',nRow).html(index);
                return nRow;
            },
            "bStateSave": true
        });

        // Array to track the ids of the details displayed rows
        var details_arr = [];

        jQuery('#main_dt tbody').on('click', 'tr td.details-control', function () {

            var tr = jQuery(this).closest('tr');
            var row = mainDataTable.row(tr);
            var idx = jQuery.inArray(tr.attr('id'), details_arr);

            if (row.child.isShown()) {
                tr.removeClass('details');
                row.child.hide();

                // Remove from the 'open' array
                details_arr.splice(idx, 1);
            }
            else {
                tr.addClass('details');
                row.child(format(row.data())).show();

                // Add to the 'open' array
                if (idx === -1) {
                    details_arr.push(tr.attr('id'));
                }
            }
        });
        function format(d) {
            return d.loading_order_more_details;
        }
    </script>
@stop