@extends('layouts.main', ['title' => 'LOGISTICS | Loading Orders'])
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li>Routes <span class="divider">/</span></li>
        <li class="active">Loading Points</li>
    </ul>
@stop
@section('title')
    Loading Points
@endsection
@section('contentinner')

    <div class="tabbable" onload="loadScript()">
        @include('operations.settings.routes.includes.profile')
        <div class="tab-content">
            <div id="glyphs" class="tab-pane active">
                <div class="row-fluid" style="margin-bottom: 8px;">
                    <div class="span12  profile-left">
                        <div class="msghead" style="margin-bottom: 4px;margin-top: -20px;">
                            <ul class="msghead_menu">
                                <li class="right btn-group">
                                    <a class="btn" onclick="create('{{ route("loading-points.create") }}')"><i class="icon-plus"></i> &nbsp;New Loading Point</a>
                                </li>
                            </ul>
                            <span class="clearall"></span>
                        </div><!--msghead-->

                        <div class="row-fluid">
                            <div class="span12">
                                <table class="table table-bordered table-condensed" id="main_table">
                                    <thead>
                                    <tr>
                                        <th style="width: 05%">S/N</th>
                                        <!--<th style="width: 05%">More</th>-->
                                        <th style="width: 45%">Name</th>
                                        <th style="width: 45%">City</th>
                                        <th width='3px'>Action</th>
                                    </tr>
                                    </thead>
                                </table>
                            </div><!--span12-->
                        </div><!--row-fluid-->
                    </div><!--span6-->
                </div><!--row-fluid-->
            </div><!--tab-pane-->
        </div>
    </div>
    <script>
        var dt = jQuery('#main_table');
        var main_datatable = dt.on('error.dt', function (e, settings, techNote, message) {
            console.log('An error has been reported by DataTables: ', message);
            $.jGrowl("ERROR LOADING DATA!", {header: 'Important'});
            //stopSpinner();
        }).DataTable({
            "oLanguage": {
                "sLoadingRecords": "Please wait - loading data...",
                "sZeroRecords": "No data available.",
                "sInfoEmpty": "No entries to display."
            },
            ajax: {
                url: "{{ route('loading-points.indexData') }}",
                method: 'GET',
                data: function (d) {},
                error: function (xhr, textStatus, error) {
                    onAjaxError(xhr, textStatus, error);
                }
            },
            scrollCollapse: true,
            "sPaginationType": "full_numbers",
            processing: true,
            serverSide: true,
            "columns": [
                {
                    data: 'checkbox',
                    sortable: false
                },
                // {
                //     "class": "details-control",
                //     "orderable": false,
                //     "data": null,
                //     "defaultContent": ""
                // },
                {"class": "link", data: 'name'},
                {"class": "link", data: 'city'},
                {data: 'action'}
            ],
            fnRowCallback : function(nRow, aData, iDisplayIndex){
                var oSettings = this.fnSettings();
                $("td:first", nRow).html(oSettings._iDisplayStart+iDisplayIndex + 1);
                return nRow;
            },
            "bStateSave": true
        });


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

        dt.on('click', 'tr td.details-control', function () {
            var tr = jQuery(this).closest('tr');
            var row = main_datatable.row(tr);
            var idx = jQuery.inArray(tr.attr('id'), more_details);

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

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

                // Add to the 'open' array
                if (idx === -1) {
                    more_details.push(tr.attr('id'));
                }
            }
        });

        function format(d) {
            return d.more_details;
        }


        function editFn(id) {
            var url = '{{ route('loading-points.edit', ':id') }}' . replace(':id', id);
            edit(url);
        }

        function destroyFn(id) {
            var url = '{{ route('loading-points.destroy', ':id') }}' . replace(':id', id);
            destroy(url);
        }
    </script>
@stop