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

@endsection
@section('contentinner')
    <style>

        .form-filter {
            border-top: 1px solid #dddddd;
            border-bottom: 1px solid #dddddd;
            color: #0e4722;
            font-weight: normal;
            text-align: center;
            padding-bottom: 4px;
        }
    </style>

    <!-- Main Table -->
    <div class="row-fluid">
        <div class="span12">
            <table class="table table-bordered table-condensed logistics_table" id="loadingOrdersTable">
                <thead>
                <tr>
                    <th width='5px'>#</th>
                    <th style="width: 10px">More</th>
                    <th>Date</th>
                    <th>Created By</th>
                    <th>Client</th>
                    <th>Code</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('loading_expenses.budget_summary.loading_orders.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": [[2, "desc"]],
                "columns": [
                    {data: 'checkbox'},
                    {
                        "class": "details-control",
                        "orderable": false,
                        "data": null,
                        "defaultContent": ""
                    },
                    {"class": "link number", data: 'date'},
                    {"class": "link", data: 'user_id'},
                    {"class": "link", data: 'client'},
                    {"class": "link", data: 'code_number'},
                    {
                        "orderable": false,
                        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_order_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_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