@extends('layouts.main', ['title' => 'Loading Order Vehicles'])
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a><span class="divider">/</span></li>
        <li class="active">HSE:Inspections</li>
    </ul>
@stop
@section('title')
    HSE
@endsection
@section('msghead_menu')
    <li class="right btn-group">
        <div class="btn-group">
            <button class="btn" id="print_documents">PRINT DOCUMENT(s)</button>
        </div><!--btn-group-->
        <div class="btn-group">
            <button class="btn dropdown-toggle" data-toggle="dropdown" id="edit_btn">
                <i class="icon-edit"></i> &nbsp;EDIT
            </button>
        </div><!--btn-group-->
        <div class="btn-group">
            <button class="btn dropdown-toggle" data-toggle="dropdown" id="delete_btn">
                <i class="icon-trash"></i> &nbsp;DELETE
            </button>
        </div><!--btn-group-->
        <button class="btn" onclick="openAdvancedSearch('route_truck_allocation')">
            <span class="icon-search"></span> &nbsp; FILTER
        </button>
        <div class="btn-group">
            <button class="btn dropdown-toggle" data-toggle="dropdown">
                <i class="icon-th"></i> &nbsp;OPTIONS <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                {{--<li><a href="javascript:void(0);"><i class="icon-plus"></i> &nbsp;Some Action</a></li>--}}
                <li><a id="truck_loading"><i class="icon-plus"></i> &nbsp;TRUCK LOADING</a></li>
                {{--<li><a onclick="modelShow('route_assignment_create_form')"><i class="icon-plus"></i> &nbsp;TRUCK LOADING</a></li>--}}
            </ul>
        </div><!--btn-group-->
    </li>
@endsection
@section('contentinner')
    <style>
        tr:hover, tr.selected {
            background-color: #eeeeee;
            font-weight: 600;
        }
        td.details-control {
            background: url('{{ URL::asset('img/details_open.png') }}') no-repeat center center;
            cursor: pointer;
        }

        tr.details td.details-control {
            background: url('{{ URL::asset('img/details_close.png') }}') no-repeat center center;
        }

        .form-filter {
            border-top: 1px solid #dddddd;
            border-bottom: 1px solid #dddddd;
            color: #0e4722;
            font-weight: normal;
            text-align: center;
            padding-bottom: 4px;
        }

        /*.dataTables_length {*/
        /*height: 10px;*/
        /*}*/

    </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"
                  action="#">

                <label class="control-label" for="Category">Truck</label>
                <select name="select" 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">Client</label>
                <select name="select" width="100%" id="client_id" class="searchable_select">
                    <option value="">ALL</option>
                    @foreach($clients as $client)
                        <option value="{{$client->id}}">{{$client->name}}</option>
                    @endforeach
                </select>
                <label class="control-label" for="Category">Status</label>
                <select name="select" width="100%" id="status" class="searchable_select">
                    <option value="">ALL</option>
                    <option value="1">LOCATED</option>
                    <option value="0">UNALLOCATED</option>
                </select>
                <label class="control-label" for="Category">Vehicle Type</label>
                <select name="select" width="100%" id="vehicle_type" class="searchable_select">
                    <option value="">ALL</option>
                    <option value="DRY CARGO">DRY CARGO</option>
                    <option value="TANKERS">TANKERS</option>
                </select>
                <button class="btn" style="" id="filter_truck_allocations">FILTER</button>
                {{--<input class="btn" id="print_permits" type="submit" value="PRINT">--}}
            </form>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span12">
            <table class="table table-bordered logistics_table table-condensed" id="loadingOrdersTable"
                   route="{{ route('loading_orders.indexDatas') }}">
                <thead>
                <tr>
                    <th width='5px'><input type="checkbox" class="checkall"/></th>
                    {{--<th>More</th>--}}
                    <th>Date</th>
                    {{--<th>D.O.N</th>--}}
                    <th>Driver</th>
                    <th>Passport</th>
                    <th>Horse</th>
                    <th>Trailer</th>
                    <th>Destination</th>
                    <th>Client</th>
                    {{--<th>Cargo Desc.</th>--}}
                    {{--<th>Border</th>--}}
                    {{--<th>Tonnage/Litres</th>--}}
                    <th>Loading Point</th>
                    <th style="width: 40px">&nbsp;</th>
                    <!--<th width='5px'>Action</th>-->
                </tr>
                </thead>
            </table>
        </div><!--span12-->
    </div><!--row-fluid-->
    <script>
        var loading_order_table = $('#loadingOrdersTable');
        var mainDataTable = loading_order_table.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({
                    lengthMenu: [
                        [ 100, 200],
                        [ '100 Orders', '200 Orders']
                    ],
                    "oLanguage": {
                        "sLoadingRecords": startSpinner(),
                        "sZeroRecords": "No Orders available.",
                        "sInfoEmpty": "No entries to display."
                    },
//                    scrollX:        true,
//                    scrollCollapse: true,
//                    fixedColumns:   {
//                        leftColumns: 1
//                    },
                    "initComplete": function (settings, json) {
                        stopSpinner();
                    },
                    ajax: {
                        url: "{{ route('inspections.vehicle_handovers.indexDatas') }}",
                        data: function (d) {
                            d.search_field = $('input[name=search_field]').val();
                            d.truck_id = $('#truck_id').val();
                            d.client_id = $('#client_id').val();
                            d.vehicle_type = $('#vehicle_type').val();
                            d.status = $('#status').val();
                        }
                    },
                    scrollCollapse: true,
                    "sPaginationType": "full_numbers",
                    processing: true,
                    serverSide: true,
//                    "aoColumnDefs": [{
//                        "aTargets": [10],
//                        "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
//                            jQuery(nTd).css('text-align', 'right');
//                            if ((sData == 0.00)) {
//                                jQuery(nTd).addClass('highlight-red')
//                            }
//                        }
//                    }],
                    "columns": [
                        {
                            data: 'checkbox',
                            "class": "dt_checkbox",
                            "orderable": false
                        },
                        {"class": "link", data: 'loading_date'},
//                        {"class": "link", data: 'delivery_order_number'},
                        {"class": "link", data: 'driver'},
                        {"class": "link", data: 'passport'},
                        {"class": "link", data: 'vehicle'},
                        {"class": "link", data: 'trailer'},
                        {"class": "link", data: 'destination'},
                        {"class": "link", data: 'client'},
//                        {"class": "link", data: 'cargo_description'},
//                        {"class": "link", data: 'border'},
//                        {"class": "link", data: 'tonnage'},
                        {"class": "link", data: 'loading_point'},
                        {"class": "link", data: 'nature'}
                        // {data: 'action'}
                    ],
                    "bStateSave": true
                });

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


//        var loading_order_tbody = $('#loadingOrdersTable tbody');
        var loading_order_tbody = loading_order_table.find('tbody');
        loading_order_tbody.on('click', 'tr td.link', function () {
            var tr = $(this).closest('tr');
            var checkBoxes = tr.find('.loading_order_vehicle_id');
            checkBoxes.prop("checked", !checkBoxes.prop("checked"));
            if(checkBoxes.prop('checked')){
                tr.addClass('selected');
            }else{
                tr.removeClass('selected');
            }
        });

        loading_order_tbody.on('dblclick', 'tr td.link', function () {
            var tr = $(this).closest('tr');
            var loading_order_vehicle_id = tr.find('.loading_order_vehicle_id').val();
            console.log('lov' . loading_order_vehicle_id);

            if(typeof loading_order_vehicle_id === 'undefined') {
                loading_order_vehicle_id = tr.find('.loading_order_routes').val();
                console.log('lor' . loading_order_vehicle_id);
            }


            jQuery.ajax({
                url: '{{ route('vehicle_handover_checklists.create') }}',
                type: 'GET',
                data: {loading_order_vehicle_id: loading_order_vehicle_id},
                beforeSend: function () {
                    startSpinner();
                },
                complete: function () {
                    stopSpinner();
                    $('#create_trip').attr("disabled", false);
                },
                success: function (data) {
                    onAjaxSuccess(data, 'POST');
                }
            });
        });

        var edit_btn = jQuery('#edit_btn');
        edit_btn.click(function () {
            var checked_lo_items = checkRows('loading_order_vehicle_id');
            var checked_routes = checkRows('loading_order_routes');

            if (checked_lo_items.length > 0 && checked_routes.length > 0)
                logistics_alert('Records with routes can not be edited together with routeless records');
            else if (checked_lo_items.length > 0) editRecordsFn(checked_lo_items);
            else if (checked_routes.length > 0) editVehicleRoutesFn(checked_routes);
            else logistics_alert('Please select at least one record to edit');
        });

        var delete_btn = jQuery('#delete_btn');
        delete_btn.click(function () {
            var checked_rows = checkRows('loading_order_vehicle_id');
            var checked_routes = checkRows('loading_order_routes');

            if (checked_routes.length > 0)
                logistics_alert(checked_routes.length + ' of the selected item is arleady assigned a route and thus it can not be deleted');
            else if (checked_rows.length > 0)
                destroyRecordsFn(checked_rows);
            else
                logistics_alert('Please select at least one record to delete');
        });

        function editRecordsFn(checked_rows) {
            jQuery.ajax({
                url: "{{ route('loading_order_vehicles.edit', 'placeholder') }}",
                type: "GET",
                data: {
                    checked_rows: checked_rows
                },
                beforeSend: function () {
                    startSpinner();
                },
                success: function (data) {
                    // console.log(data);
                    var modal = jQuery('#logistics_modal');
                    modal.empty().append(data);
                    modelShow('logistics_modal');

                    var form = modal.find('form');
                    form.on('submit', function (e) {
                        e.preventDefault();
                        updateRecordsFn(form);
                    });
                },
                error: function (xhr, textStatus, error) {
                    console.log(error);
                    console.log(textStatus);
                },
                complete: function () {
                    stopSpinner();
                }
            });
        }
        function updateRecordsFn(form) {
            jQuery.ajax({
                url: "{{ route('loading_order_vehicles.update', 'multiple') }}",
                type: "PUT",
                beforeSend: function () {
                    startSpinner();
                    disableSubmitBtn();
                },
                data: form.serialize(),
                success: function (data) {
                    if (data.state == 'Done') {
                        jQuery.jGrowl(data.msg);
                        // modalHide('logistics_modal');
                    } else {
                        jQuery.jGrowl(data.msg);
                    }
                },
                error: function (xhr, textStatus, error) {
                    console.log(textStatus);
                    console.log(error);
                },
                complete: function () {
                    stopSpinner();
                    enableSubmitBtn();
                }
            });
        }
        function editVehicleRoutesFn(checked_routes) {
            jQuery.ajax({
                url: "{{ route('route-assignment.edit_vehicle_routes') }}",
                type: "GET",
                data: {
                    checked_routes: checked_routes
                },
                beforeSend: function () {
                    startSpinner();
                },
                success: function (data) {
                    // console.log(data);
                    var modal = jQuery('#logistics_modal');
                    modal.empty().append(data);
                    modelShow('logistics_modal');

                    var form = modal.find('form');
                    form.on('submit', function (e) {
                        e.preventDefault();
                        updateVehicleRoutesFn(form);
                    });
                },
                error: function (xhr, textStatus, error) {
                    console.log(error);
                    console.log(textStatus);
                },
                complete: function () {
                    stopSpinner();
                }
            });
        }
        function updateVehicleRoutesFn(form) {
            jQuery.ajax({
                url: form.attr('action'),
                type: "PUT",
                data: form.serialize(),
                beforeSend: function () {
                    startSpinner();
                    disableSubmitBtn();
                },
                success: function (data) {
                    if (data.state == 'Done') {
                        jQuery.jGrowl(data.msg);
                        // modalHide('logistics_modal');
                    } else {
                        jQuery.jGrowl(data.msg);
                    }
                },
                error: function (xhr, textStatus, error) {
                    console.log(textStatus);
                    console.log(error);
                },
                complete: function () {
                    stopSpinner();
                    enableSubmitBtn();
                }
            });
        }
        //Ajax function to delete a record
        function destroyRecordsFn(checked_rows) {
            swal({
                        title: "Are you sure?",
                        text: "You will not be able to recover this data!",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "Yes, delete it!",
                        closeOnConfirm: false
                    },
                    function () {
                        swal({title: "", text: "", timer: 0, showConfirmButton: false});

                        jQuery.ajax({
                            url: '{{ route("loading_order_vehicles.destroy", "multiple") }}',
                            type: 'DELETE',
                            data: {
                                ids: checked_rows
                            },
                            success: function (data) {
                                console.log(data.state + ' ' + data.msg);

                                if (data.state === 'Done') {
                                    jQuery.jGrowl(data.msg);
                                    mainDataTable.draw();
                                } else if (data.state === 'Fail') {
                                    jQuery.jGrowl(data.msg);
                                } else {
                                    jQuery.jGrowl('Something went wrong!');
                                }
                            },
                            error: function (data) {
                                // jQuery.jGrowl('Fatal error');
                                console.log(data);
                            }
                        });
                    });
        }

        $('.loading_order_vehicle_id').click(function () {
            onCheckboxChange('loading_order_vehicle_id');
        });
        $('.loading_order_routes').change(function () {
            onCheckboxChange('loading_order_routes');

            // var checked = jQuery('.' + id + ':checked').length > 0;
            // var checkRoutes = [];
            // jQuery('.' + id).each(function () {
            //     if (jQuery(this).is(':checked')) {
            //         checkRoutes.push(jQuery(this).val());
            //     }
            // });
        });
        function onCheckboxChange(checkbox_class) {
            alert(checkbox_class);
        }
        //   Array to track the ids of the details displayed rows
        var lo_vehicle_details = [];
        loading_order_tbody.on('click', 'tr td.details-control', function () {
            var tr = jQuery(this).closest('tr');
            var row = mainDataTable.row(tr);
            var idx = jQuery.inArray(tr.attr('id'), lo_vehicle_details);

            if (row.child.isShown()) {
                tr.removeClass('details');
                row.child.hide();

                // Remove from the 'open' array
                lo_vehicle_details.splice(idx, 1);
            } else {
                tr.addClass('details');
                row.child(format(row.data())).show();

                // Add to the 'open' array
                if (idx === -1) {
                    lo_vehicle_details.push(tr.attr('id'));
                }
            }
        });
        function format(d) {
            return d.loading_order_more_details;
        }

        // $('#create_trip').attr('onclick','this ');
        // Ajax function to add a record
        $('#truck_loading_cargo').on('submit', function (e) {
            var this_from = jQuery(this);
            e.preventDefault();
            // $('#create_trip').style.opacity = "0.4";
            $('#create_trip').attr("disabled", true);
            var loading_order_form_id = jQuery(this);
            var formData = loading_order_form_id.serialize();
            jQuery.ajax({
                url: '{{route('loading_orders.truck_loading.store')}}',
                type: 'POST',
                data: formData,
                beforeSend: function () {
                    startSpinner();
                },
                complete: function () {
                    stopSpinner();
                },
                success: function (data) {
                    stopSpinner();
                    console.log(data);
                    jQuery('.has-error').removeClass('has-error');

                    if (data.state === 'Done') {
                        resetFormAndClose(this_from);
                        jQuery.jGrowl(data.msg);
                        mainDataTable.draw();
                    } else if (data.state === 'Fail') {
                        jQuery.jGrowl(data.msg);
                    } else {
                        var num = 0;
                        jQuery.each(data, function (k, v) {
                            field = k.substr(0, k.indexOf("."));
                            field = jQuery('select[name="' + field + '[]"]').addClass('has-error');
                            if (num == 0) jQuery.jGrowl(v);
                            num++;
                        });
                    }
                },
                error: function (data) {
                    stopSpinner();
                    console.log('Error: ');
                    console.log(data);
                    // toastr.error('Unknown error occur!', 'Error');
                }
            });
        });


        $('#truck_loading').on('click', function (e) {
            e.preventDefault();
            var loading_order_vehicle_id = checkRows('loading_order_vehicle_id');
            if (loading_order_vehicle_id < 1) {
                logistics_alert("PLEASE CHECK AT LEAST ONE ORDER TO CONTINUE", 'SELECTION DIALOG');
                return false;
            }
            jQuery.ajax({
                url: '{{route('loading_orders.truck_loading.create')}}',
                type: 'GET',
                data: {loading_order_vehicle_id: loading_order_vehicle_id},
                beforeSend: function () {
                    startSpinner();
                },
                complete: function () {
                    stopSpinner();
                    // $('#create_trip').style.opacity = "1";
                    $('#create_trip').attr("disabled", false);
                },
                success: function (data) {
                    jQuery('#loading_cargo_body').empty().append(data);
                    jQuery('#route_assignment_create_form').appendTo("body").modal('toggle');
                    $('.laoding_order_serchable_select').select2();
                    $('.route_assignment_date_time_picker').datetimepicker({
                        format: 'yyyy-MM-dd hh:mm'
                    });
                    $('input[name="loading_date[]"]').datepicker({
                        format: 'yyyy-mm-dd'
                    });
                    {{--$('.single_trip_route_id').on('change', function () {--}}
                    {{--var route_id = $(this).val();--}}
                    {{--jQuery.ajax({--}}
                    {{--url: '{{route('routes.fuel_assignments')}}',--}}
                    {{--type: 'GET',--}}
                    {{--data: {--}}
                    {{--route_id: route_id--}}
                    {{--},--}}
                    {{--success: function (data) {--}}
                    {{--alert(data);--}}
                    {{--}--}}
                    {{--});--}}
                    {{--});--}}
                }
            });
        });
    </script>

@endsection