@extends('layouts.main_without_top_button', ['title' => 'LOADING EXPENSES | ' . config('app.name')])
@section('title') LOADING EXPENSES @stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="">Finance</a> <span class="divider">/</span></li>
        <li><a href="">Settings</a> <span class="divider">/</span></li>
        <li class="active">Loading Expenses</li>
    </ul>
@stop
@section('contentinner')
    <style>

        .modal-body .tabs {
            padding: 5px;
            border-top: 1px solid #bbb;
            border-left: 1px solid #bbb;
            border-right: 1px solid #bbb;
            border-bottom: 0;
            border-top: 0;
            background: #f5f5f5;
        }

        .modal-body .tabs li {
            border-top: 1px solid #bbb;
            border-left: 1px solid #bbb;
            border-right: 1px solid #bbb;
            border-bottom: 0;
            color: #0e0e0e;
        }

        .modal-body .tabs li a {
            color: #0e0e0e;
        }

        .modal-body .tabs li a:active {
            color: #51a7c6;
            background-color: #eeeeee;
        }
    </style>

    <div class="tabbable">
        @include('financial_accounts.settings.includes.profile')
        <div class="tab-content">
            <div class="tab-pane active">

                <table class="table table-striped table-bordered table-condensed" id="loading_orders">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>City</th>
                        <th style="width: 5px">Action</th>
                    </tr>
                    </thead>
                </table>


            </div><!--tab-pane-->
        </div><!--tabcontent-->
    </div><!--tabbable-->
    <script>
        var oTable = jQuery('#loading_orders').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 Route records to display.",
                    "sProcessing": "Please wait - loading records...",
                    "sInfoEmpty": "No entries to display."
                },
                "initComplete": function (settings, json) {
                    stopSpinner();
                },
                ajax: {
                    url: '{{ route('financial_management.loading_expenses.datatable.index') }}',
                    data: function (d) {
                        d.client_id = jQuery('#name').val();
                    }
                },
                scrollCollapse: true,
                "sPaginationType": "full_numbers",
                processing: true,
                serverSide: true,
                "columns": [
                    {"class": "link", data: 'name'},
                    {"class": "link", data: 'city'},
                    {"class": "link", data: 'action'}
                ],
                "bStateSave": true
            });
    </script>
@endsection