@extends('layouts.main_without_top_button', ['title' => 'On-Road Expenses | ' . config('app.name')])
@section('title')
    On-Road Expenses
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="{{route('requisitions.index')}}">General Requisitions</a> <span class="divider">/</span></li>
        <li class="active">On-Road Expenses</li>
    </ul>
@stop
@section('contentinner')
    <style>
        #logistics_modal {
            width: 95%;
            margin-left: -32%;
        }
    </style>

{{--    @include('requisitions.prepaid_expenses.includes.tabs')--}}

    <div class="tabbable" onload="loadScript()">
        {{--@include('requisitions.truck_mileages.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" style="padding: 1%">

                        <div class="msghead" style="margin-bottom: 4px;margin-top: -20px;">
                            <ul class="msghead_menu">
                                <li class="right btn-group">
                                    <button class="btn  btn-small" onclick="openAdvancedSearch('on_road_filters')" style="margin-left: 2px">
                                        <span class="icon-search"></span> &nbsp; FILTER
                                    </button>
                                    <a class="btn btn-small" style="margin-right: 20px" id="generate_requisition">
                                        <span class="icon-edit"></span> REQUEST
                                    </a>



                                </li>
                            </ul>
                            <span class="clearall"></span>
                        </div><!--msghead-->

                        <div id="on_road_filters" class="sidenav">
                            <a href="javascript:void(0)" class="closebtn" style="margin-top: 5%"
                               onclick="closeAdvancedSearch('on_road_filters')">&times;</a>


                            <form target="_blank" class="form-inline form-filter" method="get"
                                  action="#">

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

                                <label class="control-label" for="Category">Driver</label>
                                <select name="driver_id" width="100%" id="driver_id" class="searchable_select">
                                    <option value="">ALL</option>
                                    @foreach($drivers as $driver)
                                        <option value="{{$driver->driver_id}}">{{$driver->driver}}</option>
                                    @endforeach
                                </select>
                                <label class="control-label" for="Category">Allocations</label>
                                <select  name="client_id" width="100%" id="client_id" class="searchable_select">
                                    <option value="">ALL</option>
                                    @foreach($allocations as $allocation)
                                        <option value="{{$allocation->client_id}}">{{$allocation->client}}</option>
                                    @endforeach
                                </select>

                                <button class="btn" style="margin-top: 3%" id="filter_on_road_expenses">FILTER</button>
                            </form>


                        </div>

                        <br/>

                        <table class="table table-bordered table-condensed logistics_table" id="on_road_expenses"
                               route="{{ route('requisitions.on_road_expenses.datatable') }}">
                            <thead>
                            <tr>
                                <th width='5px'></th>
                                <th>Date</th>
                                <th>Horse</th>
                                <th>Trailer</th>
                                <th>Driver</th>
                                <th>Allocation</th>
{{--                                <th>Status</th>--}}
                                <th>Destination</th>
                            </tr>
                            </thead>
                        </table>

                    </div><!--span6-->
                </div><!--row-fluid-->
{{--            </div><!--tab-pane-->--}}
        </div>
    </div>

    <div aria-hidden="false" class="fade hide modal animated" data-backdrop="static" id="logistics_modal-1"></div>
    <script type="text/javascript" src="{{asset('js/logistics/requisitions/logistics-datatables.js')}}"></script>

    <script>
        $('.searchable_select').select2();


        var on_road_expenses = jQuery('#on_road_expenses').on('error.dt', function (e, settings, techNote, message) {
            console.log('An error has been reported by DataTables: ', message);
            jQuery.jGrowl("ERROR LOADING DATA!", {header: 'Important'});
            stopSpinner();
        }).DataTable({
            "oLanguage": {
                "sLoadingRecords": startSpinner(),
                "sZeroRecords": "No Orders available.",
                "sInfoEmpty": "No entries to display."
            },
            "initComplete": function (settings, json) {
                stopSpinner();
            },
            ajax: {
                url: jQuery('#on_road_expenses').attr('route'),
                data: function (d) {
                    d.client_id = jQuery('#client_id').val();
                    d.driver_id = jQuery('#driver_id').val();
                    d.truck_id = jQuery('#truck_id').val();
                }
            },
            scrollCollapse: true,
            "sPaginationType": "full_numbers",
            processing: true,
            serverSide: true,
            "columns": [
                {
                    data: 'checkbox',
                    "class": "dt_checkbox",
                    "orderable": false
                },
                {"class": "link", data: 'date'},
                {"class": "link", data: 'truck'},
                {"class": "link", data: 'trailer'},
                {"class": "link", data: 'driver'},
                {"class": "link", data: 'client'},
                // {"class": "link", data: 'status'},
                {"class": "link", data: 'destination'},
                // {"class": "link", data: 'action'}
            ],
            "bStateSave": true
        });

        // socket.on('TransitChargesApprovalNotification', function (data) {
        //     if (typeof transport_charges !== 'undefined') {
        //         transport_charges.draw();
        //     }
        // });

        $('#filter_on_road_expenses').on('click', function (e) {
            e.preventDefault();
            on_road_expenses.draw();
        });

        jQuery('#generate_requisition').on('click', function (e) {

            var checked_trucks = checkRows('checked_trucks');
            var url = '{{ route("requisitions.on_road_expenses.create") }}';

            if (checked_trucks.length > 0) create(url, checked_trucks);
            else logistics_alert('Please select at least one Truck');
        });




    </script>
@stop