@extends('layouts.main_without_top_button')
@section('title')
    {{$client->name}} Profile
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="{{route('clients.index')}}">Clients</a> <span class="divider">/</span></li>
        <li class="active">Demurrage Change</li>
    </ul>
@stop

@section('contentinner')
    <style>
        .td_left_border {
            border-top: 1px solid #dddddd;
            border-left: 1px solid #dddddd;
            border-bottom: 0;
        }

        .td_border_right {
            border-right: 1px solid #dddddd;
        }

        .widgettitle {
            color: #000000;
        }
    </style>
    <div class="tabbable">
        @include('clients.includes.client_shipping_line_tab')
       <!-- <div class="tab-content">
            <div id="glyphs" class="tab-pane active">
                <div class="msghead" style="margin-bottom: 4px;margin-top: -20px;">
                    <ul class="msghead_menu">
                        <li class="right btn-group">
                            <div class="btn-group">
                                <button onclick="create('{{ route('clients.demurrage_change_modal.dataModal',array('clients'=>$client->id,'id'=>$shipping_line->id)) }}')" class="btn">
                                    <i class="icon-th"></i> &nbsp;New Demurrage
                                </button>
                            </div>
                        </li>
                    </ul>
                    <span class="clearall"></span>
                </div>
                <table class="table table-bordered table-striped table-condensed" id="clients-demurrage-list">
                    <thead>
                    <tr>
                        <th style="width: 15%">Start Date.</th>
                        <th style="width: 15%">End Date.</th>
                        <th style="width: 15%">Amount.</th>
                        <th style="width: 8%">Currency</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($demurage_charges as $demurage_charge)
                        <tr>
                            <td>{{$demurage_charge->start_date}}</td>
                            <td>{{$demurage_charge->end_date}}</td>
                            <td>{{$demurage_charge->amount}}</td>
                            <td>{{$demurage_charge->currency->code.' '.$demurage_charge->currency->name}}</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>tabcontent -->
        
        <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', 1) }}')">
                                    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>Charges description</th>
                            <th>Basis</th>
                            <th>Currency</th>
                            <th>Charges</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div><!--tab-pane-->
        </div><!--tabcontent-->
    </div>

<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("demurrage_charges.dt", 1) }}",
                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": "link", data: 'charge_description'},
                {"class": "link", data: 'basis'},
                {"class": "link", data: 'currency'},
                {"class": "link", data: 'charges'},
                {"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