@extends('layouts.main', ['title' => 'Transport Charges  | ' . config('app.name')])
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a><span class="divider">/</span></li>
        <li><a>Requisitions</a><span class="divider">/</span></li>
        <li class="active">Transport Charges</li>
    </ul>
@stop

@section('title')
    General Requisitions
@endsection
@section('msghead_menu')
    <li class="right btn-group">
        <div class="btn-group">
            <button class="btn  btn-small" onclick="openAdvancedSearch()"
                    style="margin-left: 2px">
                <span class="icon-search"></span> &nbsp; FILTER
            </button>

        </div><!--btn-group-->
    </li>
@stop



@section('title', 'Transport Charges')
@section('contentinner')
    <div class="row-fluid">
        <div class="span12">
            <div id="traffic_fine_filters" class="sidenav">
                <a href="javascript:void(0)" class="closebtn"
                   onclick="closeAdvancedSearch()">&times;</a>

                <div style="margin-bottom: 8px">
                    <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="" id="filter_transport_charges">FILTER</button>
                        {{--<input class="btn" id="print_permits" type="submit" value="PRINT">--}}
                    </form>
                </div>
            </div>


            <table class="table table-bordered table-condensed logistics_table" id="transport_charges"
                   route="{{ route('requisitions.transport_charges.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>
                    <th></th>
                </tr>
                </thead>
            </table>
        </div><!--span12-->
    </div><!--row-fluid-->
    <script type="text/javascript" src="{{asset('js/logistics/requisitions/logistics-datatables.js')}}"></script>

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


        var transport_charges = jQuery('#transport_charges').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('#transport_charges').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_transport_charges').on('click', function (e) {
            e.preventDefault();
            transport_charges.draw();
        });

        function closeAdvancedSearch() {
            jQuery("#traffic_fine_filters").css({
                "width": 0,
                'padding-left': 0
            });
        }

        function openAdvancedSearch() {
            jQuery("#traffic_fine_filters").css({
                "width": 230,
                'padding-left': 30
            });
        }
    </script>
@endsection