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

    <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">
                        <div class="msghead" style="margin-bottom: 4px;margin-top: -20px;">
                            <ul class="msghead_menu">
                                <li class="right btn-group">
                                    <button class="btn" onclick="openAdvancedSearch()">
                                        <span class="fa fa-search"></span> &nbsp; FILTER
                                    </button>
                                    <a class="btn" id="create_truck_mileage">
                                        <span class="fa fa-edit"></span> CREATE REQUEST
                                        {{--<span style="font-size: 10px;color: #51a7c6"> ( alt+g )</span>--}}
                                    </a>
                                    <a class="btn" id="driver_suggestions">
                                        <span class="fa fa-edit"></span> SUGGEST DRIVER
                                        {{--<span style="font-size: 10px;color: #51a7c6"> ( alt+g )</span>--}}
                                    </a>
                                    <a href="javascript:createOrEdit('{{route('traffic_fines.settings.view')}}')" class="btn btn-primary" >
                                        <span class="fa fa-gear"></span> SETTINGS 
                                    </a>
                                </li>
                            </ul>
                            <span class="clearall"></span>
                        </div><!--msghead-->

                        <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" multiple>
                                        <option value="">ALL</option>
                                        @foreach($trucks as $truck)
                                            <option value="{{$truck->id}}">{{$truck->registration_number}}</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->employee_id}}">{{$driver->driver}}</option>
                                        @endforeach
                                    </select>

                                    <label class="control-label" for="Category">Licence</label>
                                    <input type="text" name="licence_number" id="licence_number" class="input-large datepicker" value="">

                                    <label class="control-label" for="Category">Reference</label>
                                    <input type="text" name="reference_number" id="reference_number" class="input-large datepicker" value="">

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


                        <table class="table table-bordered table-condensed table-striped logistics_table" style="width: 100%"
                               id="requisition_driver_mileage_index">
                            <thead>
                            <tr>
                                <th  style="width: 3%"><input type="checkbox" class="checkall"/></th>
                                <th style="width: 7%">Date</th>
                                <th style="width: 8%">Reference</th>
                                <th style="width: 7%">Vehicle</th>
                                <th style="width: 15%">Driver</th>
                                <th style="width: 8%">Licences #</th>
                                <th style="width: 5%">Location</th>
                                <th style="width: 20%">Offence</th>
                                <th style="width: 4%">Charge</th>
                                <th style="width: 6%">Extra Days</th>
                                <th style="width: 4%">Penalty</th>
                                <th style="width: 4%">Total</th>
                                {{--<th>Action</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>



        jQuery('#id_from_truck_id,#id_from_container,.searchable_select').select2();
        jQuery(function () {
            var mainDataTable = jQuery('#requisition_driver_mileage_index').
            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({
                lengthMenu: [
                    [500],
                    ['500 Orders']
                ],
                    "oLanguage": {
                        "sLoadingRecords": startSpinner(),
                        "sZeroRecords": "No records to display.",
                        "sProcessing": "Please wait - loading records...",
                        "sInfoEmpty": "No entries to display."
                    },
                    "initComplete": function (settings, json) {
                        stopSpinner();
                    },
                    ajax: {
                        url: '{{route('requisitions.traffic_fines.datatable')}}',
                        data: function (d) {
                            //console.log(d)

                            d.truck_id = jQuery('#truck_id').val();
                            d.driver_id = jQuery('#driver_id').val();
                            d.licence_number = jQuery('#licence_number').val();
                            d.reference_number = jQuery('#reference_number').val();
                        }
                    },
                    "sPaginationType": "full_numbers",
                    processing: true,
                    serverSide: true,
                    "order": [[ 1, "desc" ]],
                    "columns": [
                        {data: 'checkbox'},
                        {data: 'issued_date'},
                        {data: 'reference_number'},
                        {data: 'truck'},
                        {data: 'driver'},
                        {data: 'driver_licence'},
                        {data: 'location'},
                        {data: 'traffic_offence'},
                        {data: 'charges'},
                        {data: 'extra_days'},
                        {data: 'penalty'},
                        {data: 'total'}


                    ],
                    "bStateSave": true
                });

            jQuery('#search-form').on('click', function (e) {
                searchTable(e);
            });

            function searchTable(e) {
                oTable.draw();
                e.preventDefault();
            }

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



        jQuery('#create_truck_mileage').on('click', function () {

            var traffic_fine_item_id = checkRows('traffic_fine_item_id');
            var checked = traffic_fine_item_id.length > 0;
            if (!checked) {
                swal("Please check at least one Truck to continue with the process");
                return false;
            }
            jQuery.ajax({
                url: '{{route('requisitions.traffic_fines.create')}}',
                type: 'GET',
                data: {
                    traffic_fine_item_id: traffic_fine_item_id
                },
                beforeSend: function () {
                    startSpinner();
                },
                success: function (data) {
                    onAjaxSuccess(data, 'POST');


                    // jQuery('.remove_driver_mileage_item').on('click', function () {
                    //     jQuery(this).parents('tr').remove()
                    // });
                    //
                    // jQuery('.request_amount').keyup(function (event) {
                    //     var request_amount = jQuery(this).val();
                    //     var total_amount = 0;
                    //     jQuery('.request_amount').each(function () {
                    //         total_amount += parseFloat(removeComma(this.value));
                    //     });
                    //     jQuery('#total_truck_mileage_amount').html(total_amount.toLocaleString())
                    // });
                    //
                    // jQuery('.searchable_select_requisition').select2();
                    // jQuery('.requisition_date').datepicker();


                },
                error: function (xhr, textStatus, error) {
                    onAjaxError(xhr, textStatus, error);
                },
                complete: function () {
                    stopSpinner();
                }
            });



        });

        jQuery('#driver_suggestions').on('click', function () {

            var traffic_fine_item_id = checkRows('traffic_fine_item_id');
            var checked = traffic_fine_item_id.length > 0;
            if (!checked) {
                swal("Please check at least one Truck to continue with the process");
                return false;
            }
            jQuery.ajax({
                url: '{{route('traffic_fines.driver_suggestions.create')}}',
                type: 'GET',
                data: {
                    traffic_fine_item_id: traffic_fine_item_id
                },
                beforeSend: function () {
                    startSpinner();
                },
                success: function (data) {
                    onAjaxSuccess(data, 'POST');

                    // jQuery('.remove_driver_mileage_item').on('click', function () {
                    //     jQuery(this).parents('tr').remove()
                    // });
                    //
                    // jQuery('.request_amount').keyup(function (event) {
                    //     var request_amount = jQuery(this).val();
                    //     var total_amount = 0;
                    //     jQuery('.request_amount').each(function () {
                    //         total_amount += parseFloat(removeComma(this.value));
                    //     });
                    //     jQuery('#total_truck_mileage_amount').html(total_amount.toLocaleString())
                    // });
                    //
                    // jQuery('.searchable_select_requisition').select2();
                    // jQuery('.requisition_date').datepicker();


                },
                error: function (xhr, textStatus, error) {
                    onAjaxError(xhr, textStatus, error);
                },
                complete: function () {
                    stopSpinner();
                }
            });



        });


        function checkedRoutes() {
            var checked = jQuery('.route_id:checked').length > 0;

            var checkRoutes = [];
            jQuery('.route_id').each(function () {
                if (jQuery(this).is(':checked')) {
                    checkRoutes.push(jQuery(this).val());
                }
            });
            return checkRoutes;
        }


        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>
@stop