@extends('layouts.main_without_top_button')
@section('demurrages')
    active
@stop
@section('title')
    {{ $vendor->name }} : Demurrages charges
@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->id) }}">{{ $vendor->name }} Profile</a> <span class="divider">/</span></li>
        <li class="active">Demurrage Charges</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('demurrage_charges.create', $vendor->id) }}')">
                                    NEW DEMURRAGE CHARGE
                                </button>
                            </div><!--btn-group-->
                        </li>
                    </ul>
                    <span class="clearall"></span>
                </div><!--msghead-->
                <br>
                <table class="table table-bordered table-condensed" id="demurrage_charges">
                    <thead>
                        <tr>
                            <th>S/N</th>
                            {{--<th>More</th>--}}
                            <th>Charges description</th>
                            <th>Basis</th>
                            <th>Currency</th>
                            <th>Clsed Top</th>
                            <th>Open Top</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div><!--tab-pane-->
        </div><!--tabcontent-->
    </div><!--tabbable-->

    <script>
        var mainDataTable = jQuery('#demurrage_charges').DataTable({
            "oLanguage": {
                "sLoadingRecords": "Please wait - loading data...",
                "sZeroRecords": "No data available.",
                "sInfoEmpty": "No entries to display."
            },
            ajax: {
                {{--url: "{{ route('orders.indexDatas') }}",--}}
                url: "{{ route("demurrage_charges.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: 'charge_description'},
                {"class": "link", data: 'basis'},
                {"class": "link", data: 'currency'},
                {"class": "link", data: 'closed_top'},
                {"class": "link", data: 'open_top'},
                {"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 loading_order_details = [];

        jQuery('#demurrage_charges 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'), loading_order_details);

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

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

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