@extends('layouts.main', ['title'=>'FUEL MANAGEMENTS | ' . config('app.name')])
@section('title', 'Fuel Managements')
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="">Fuel Management</a> <span class="divider">/</span></li>
        <li class="active">Requisitions</li>
    </ul>
@stop
@section('msghead_menu')
    <li class="right btn-group">
        <button class="btn" onclick="openAdvancedSearch('route_truck_allocation')">
            <span class="icon-search"></span> &nbsp; FILTER
        </button>
        <button class="btn" style="margin-right: 2px" id="multiple_fuel_order">
            <span class="icon-filter"></span> GENERATE ORDER
        </button>
    </li>
@stop
@section('contentinner')
    <style>
        #logistics_modal {
            width: 40%;
            left: 45%;
        }
    </style>

    <div id="route_truck_allocation" class="sidenav">
        <a href="javascript:void(0)" class="closebtn"
           onclick="closeAdvancedSearch('route_truck_allocation')">&times;</a>

        <div style="margin-bottom: 8px">
            <form target="_blank" class="form-inline form-filter" method="get">

                <label class="control-label" for="Category">Loading Order</label>
                <select name="loading_order_id" width="100%" id="loading_order_id" class="searchable_select" multiple>
                    <option value="">ALL</option>
                    @foreach($loading_orders as $loading_order)
                        <option value="{{$loading_order->loading_order_id}}">{{$loading_order->loading_order_id}}</option>
                    @endforeach
                </select>
                <label class="control-label" for="Category">Truck</label>
                <select name="truck_id" width="100%" id="truck_id" class="searchable_select" multiple>
                    <option value="">ALL</option>
                    @foreach($trucks as $truck)
                        <option value="{{$truck->truck_id}}">{{$truck->truck}}</option>
                    @endforeach
                </select>

                <button class="btn" style="" id="filter_trucks">FILTER</button>
                {{--<input class="btn" id="print_permits" type="submit" value="PRINT">--}}
            </form>
        </div>
    </div>


    <!-- Main Table -->
    <div class="row-fluid">
        <div class="span12">
            <table class="table table-bordered table-condensed logistics_table" id="loadingOrdersTable"
                   route="{{ route('loading_orders.indexDatas') }}">
                <thead>
                <tr>
                    <th width='5px'>#</th>
                    <th style="width: 10px">More</th>
                    <th>Order #</th>
                    <th>Date</th>
                    <th>Created By</th>
                    <th>Client</th>
                    <th>No. of Truck(s)</th>
                    <th style="width: 50px">&nbsp;</th>
                    <th width='5px'>Action</th>
                </tr>
                </thead>
            </table>
        </div><!--span12-->
    </div><!--row-fluid-->

    <script>
        $('.searchable_select').select2();
        $('#filter_trucks').on('click', function (e) {
            e.preventDefault();
            mainDataTable.draw();
        });

        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_orders.indexDatas') }}",
                    data: function (d) {
                        d.loading_order_id = $('#loading_order_id').val();
                        d.truck_id = $('#truck_id').val();
                        d.month = $('#month').val();
                        d.client_id = $('#client_id').val();
                    }
                },
                "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: 'id'},
                    {"class": "link number", data: 'date'},
                    {"class": "link", data: 'user_id'},
                    {"class": "link", data: 'client'},
                    {"class": "link", data: 'no_of_vehicles'},
                    {"class": "link", data: 'type'}
                    ,
                    {
                        "orderable": false,
                        data: 'action'
                    }
                ],
                "fnRowCallback" : function(nRow, aData, iDisplayIndex){
                    $("td:first", nRow).html(iDisplayIndex + 1);
                    return nRow;
                },
                "bStateSave": true
            })
    </script>
@stop