@extends('layouts.main', ['title' => 'LOGISTICS | Loading Nominations'])
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li class="active">Loading Nominations</li>
    </ul>
@stop
@section('title', 'Loading Nominations')
@section('msghead_menu', '')
@section('contentinner')
    <!-- Main Table -->
    <div class="row-fluid">
        <div class="span12">
            <table class="table table-bordered table-condensed logistics_table" id="loadingOrdersTable"
                   route="{{ route('operations.loading_nominations.data_table') }}">
                <thead>
                <tr>
                    <th style="width: 3%"></th>
                    <th  style="width: 5%">Order #</th>
                    {{--<th style="width: 10px">More</th>--}}
                    <th style="width: 10%">Date</th>
                    <th style="width: 20%">Created By</th>
                    <th style="width: 40%">Client</th>
                    <th style="width: 15%">No. of Truck(s)</th>
                    <th  style="width: 7%">&nbsp;</th>
                    <th width='5px'>Action</th>
                </tr>
                </thead>
            </table>
        </div><!--span12-->
    </div><!--row-fluid-->


    <script>
        var dt = jQuery('#loadingOrdersTable');
        var mainDataTable = 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": startSpinner(),
                "sZeroRecords": "No Orders available.",
                "sInfoEmpty": "No entries to display."
            },
            ajax: {
                url: "{{ route('operations.loading_nominations.data_table') }}",
                data: function (d) {},
                error: function(xhr, textStatus, error) { onAjaxError(xhr, textStatus, error); }
            },
            "initComplete": function (settings, json) { stopSpinner(); },
            scrollCollapse: true,
            "sPaginationType": "full_numbers",
            processing: true,
            serverSide: true,
            "order": [[ 1, "desc" ]],
            "columns": [
                {data: 'checkbox'},
                {data: 'id'},
                // {
                //     "class": "details-control",
                //     "orderable": false,
                //     "data": null,
                //     "defaultContent": ""
                // },
                {"class": "link number", data: 'date'},
                {"class": "link", data: 'employee'},
                {"class": "link", data: 'client'},
                {"class": "link", data: 'trucks'},
                {"class": "link", data: 'type'},
                 {"class": "link", data: 'action'}
            ],
            // "fnRowCallback" : function(nRow, aData, iDisplayIndex){
            //     $("td:first", nRow).html(iDisplayIndex + 1);
            //     return nRow;
            // },
            "bStateSave": true
        });
        
        // Array to track the ids of the details displayed rows
        var loading_nomination_details = [];
        
        dt.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_nomination_details);
            
            if (row.child.isShown()) {
                tr.removeClass('details');
                row.child.hide();
                loading_nomination_details.splice(idx, 1); // Remove from the 'open' array
            } else {
                tr.addClass('details');
                row.child(format(row.data())).show();
                if (idx === -1) loading_nomination_details.push(tr.attr('id')); // Add to the 'open' array
            }
        });
        
        function format(d) { return d.loading_nomination_more_details; }
        
        
        // // Ajax function to edit record
        // function editRecordFn(id) {
        //     var url = "{{ route('loading_nominations.edit', ':id') }}". replace(':id', id);
        //     edit(url);
        // }
        
        // //Ajax function to delete a record
        // function deleteRecordFn(id) {
        //     var url = "{{ route('loading_nominations.destroy', ':id') }}". replace(':id', id);
        //     destroy(url);
        // }
    </script>
    <!-- =============================================================================== -->

@stop