@extends('layouts.main', ['title' => 'TRUCKS ALLOCATION'])
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a><span class="divider">/</span></li>
        <li class="active">Truck Pending Allocations</li>
    </ul>
@stop
@section('title') Enquiry NO. {{$client_enquiry->id}};Client: {{$client_enquiry->client}};Trucks Req: {{$client_enquiry->trucks}};Cargo: {{$cargo_type}} @endsection
@section('msghead_menu')
    <li class="right btn-group">

        <div class="btn-group">
            <button class="btn dropdown-toggle" data-toggle="dropdown" id="truck_nomination_create">
                &nbsp; CREATE NOMINATION
            </button>
        </div><!--btn-group-->
        <button class="btn" onclick="openAdvancedSearch('route_truck_allocation')">
            <span class="icon-search"></span> &nbsp; FILTER
        </button>
    </li>
@endsection
@section('contentinner')

    <style>
        #logistics_modal {
            width: 95%;
            margin-left: -32%;
        }
    </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>
                <button class="btn" style="" id="filter_truck_allocations">FILTER</button>
            </form>
        </div>
    </div>


    <div class="row-fluid">
        <div class="span12">
            <table class="table table-bordered logistics_table table-condensed" id="loadingOrdersTable">
                <thead>
                <tr>
                    <th width='3%'><input type="checkbox" class="checkall"/></th>
                    <th style="width: 8%">Horse</th>
                    <th style="width: 8%">Trailer</th>
                    <th style="width: 20%">Driver</th>
                    {{--<th style="width: 7%">Type</th>--}}
                    {{--<th style="width: 15%">Allocation</th>--}}
                    <th style="width: 12%">Location</th>
                    <th style="width: 10%">Status</th>
                    <th style="width: 24%">Remarks</th>
                </tr>
                </thead>
            </table>
        </div><!--span12-->

    </div><!--row-fluid-->

    <script>
        jQuery(function () {
            var calcDataTableHeight = function () {
                var viewportHeight = jQuery(window).height();
                var headerpanel = jQuery('#headerpanel').height();
                var breadcrumbwidget = jQuery('#breadcrumbwidget').height();
                var widgettitle_msghead = jQuery('#widgettitle_msghead').height();
                var footer = jQuery('#footer').height();

                return viewportHeight - (headerpanel + breadcrumbwidget + widgettitle_msghead + footer + 120);

            };
            var mainDataTable = jQuery('#loadingOrdersTable').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 Trucks', '200 Trucks']
                    ],
                    "oLanguage": {
                        "sLoadingRecords": startSpinner(),
                        "sZeroRecords": "No Orders available.",
                        "sInfoEmpty": "No entries to display."
                    },
                    "initComplete": function (settings, json) {
                        stopSpinner();
                    },
                    ajax: {
                        url: "{{ route('trucks.route_allocations.data-table.index') }}",
                        data: function (d) {
                            d.search_field = $('input[name=search_field]').val();
                            d.truck_id = $('#truck_id').val();
                            d.city_id = $('#city_id').val();
                            d.vehicle_type = '{{$cargo_type}}';
                        }
                    },
                    "sPaginationType": "full_numbers",
                    processing: true,
                    serverSide: true,
                    "columns": [
                        {
                            data: 'checkbox',
                            "class": "dt_checkbox",
                            "orderable": false
                        },
                        {"class": "link", data: 'vehicle'},
                        {"class": "link", data: 'trailer'},
                        {"class": "link", data: 'driver'},
//                            {"class": "link", data: 'type'},
                        {"class": "link", data: 'location'},
                        {"class": "link", data: 'status'},
                        {"class": "link", data: 'remarks'}
                    ],
                    "bStateSave": true
                });

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


            jQuery('#truck_nomination_create').click(function () {
                var vehicle_id;
                var truck_id = checkRows('vehicle_id');
                if (truck_id.length > 0) {
                    vehicle_id = truck_id;
                }
                else {
                    vehicle_id = checkRows('vehicle_id');
                }


                if (vehicle_id.length > 0) {
                    jQuery.ajax({
                        url: "{{ route('route_allocations.create2') }}",
                        type: "GET",
                        beforeSend: function () {
                            startSpinner();
                        },
                        data: {
                            vehicle_id: vehicle_id,
                            type: 'NOMINATION',
                            cargo_type: '{{$cargo_type}}',
                            client_inquiry_id: '{{$client_inquiry_id}}'
                        },
                        success: function (data) {
                            onAjaxSuccess(data, 'POST');

                            jQuery('select[name="cargo_type[]"]').on('change', function () {
                                var cargo_type = jQuery(this).val();
                                var table = jQuery(this).parents('table');
                                var template = jQuery('#truck_subdetails');
                                var thead, tbody;

                                switch (cargo_type) {
                                    case 'TANK':
                                        thead = jQuery('#truck_subdetails_head_Tank').find('tr').clone();
                                        tbody = template.find('#truck_subdetails_body_Tank').find('tr').clone();
                                        tbody.find('select').select2();
                                        break;
                                    case 'CONTAINER':
                                        thead = template.find('#truck_subdetails_head_Container').children('tr').clone();
                                        tbody = template.find('#truck_subdetails_body_Container').children('tr').clone();
                                        break;
                                    case 'LOOSE_CARGO':
                                        thead = template.find('#truck_subdetails_head_Loose_cargo').children('tr').clone();
                                        tbody = template.find('#truck_subdetails_body_Loose_cargo').children('tr').clone();
                                        break;
                                    default:
                                        table.find('.truck_subdetails_head').html('');
                                        table.find('.truck_subdetails_body').html('');
                                        break;
                                }

                                table.append("<tr><tsd colspan='10'>col-10</td></tr>");
                                table.find('.truck_subdetails_head').append(thead);
                                table.find('.truck_subdetails_body').append(tbody);
                            });

                            jQuery('select[name="cargo_type[]"]').each(function () {
                                var cargo_type = jQuery(this).val();
                                var table = jQuery(this).parents('table');
                                var template = jQuery('#truck_subdetails');
                                var thead, tbody;

                                switch (cargo_type) {
                                    case 'TANK':
                                        thead = jQuery('#truck_subdetails_head_Tank').find('tr').clone();
                                        tbody = template.find('#truck_subdetails_body_Tank').find('tr').clone();
                                        tbody.find('select').select2();
                                        break;
                                    case 'CONTAINER':
                                        thead = template.find('#truck_subdetails_head_Container').children('tr').clone();
                                        tbody = template.find('#truck_subdetails_body_Container').children('tr').clone();
                                        break;
                                    case 'LOOSE_CARGO':
                                        thead = template.find('#truck_subdetails_head_Loose_cargo').children('tr').clone();
                                        tbody = template.find('#truck_subdetails_body_Loose_cargo').children('tr').clone();
                                        break;
                                    default:
                                        table.find('.truck_subdetails_head').html('');
                                        table.find('.truck_subdetails_body').html('');
                                        break;
                                }

                                table.append("<tr><tsd colspan='10'>col-10</td></tr>");
                                table.find('.truck_subdetails_head').append(thead);
                                table.find('.truck_subdetails_body').append(tbody);
                                jQuery('.datepickers').datepicker();
                            });

                        },
                        error: function (xhr, textStatus, error) {
                            console.log(textStatus);
                            console.log(error);
                        },
                        complete: function () {
                            stopSpinner();
                        }
                    });
                }
            });
        });
        function formInitializations() {
            jQuery('.searchable_select').select2();


            var generate_trucks = jQuery('#generate_trucks');


            var cargo_fields = jQuery('.cargo_fields');
            cargo_fields.change(function () {
                onCargoFieldChange(jQuery(this));
            });

            var vehicle_fields = jQuery('.vehicle_fields');
            vehicle_fields.change(function () {
                onVehicleFieldChange(jQuery(this));
            });


        }


        function onVehicleFieldChange(changed_vehicle_field) {
            var parent_tr = changed_vehicle_field.parents('tr');
            var trailer_id = parent_tr.find('select[name="trailer_id[]"]');
            var driver_id = parent_tr.find('select[name="driver_id[]"]');
            var cargo_type = parent_tr.find('select[name="cargo_type[]"]');
            var vehicle_id = changed_vehicle_field.val();
            jQuery.ajax({
                url: "{{ route('general_ajax_calls.truck') }}",
                data: {
                    vehicle_id: vehicle_id
                },
                type: "GET",
                dataType: 'xml',
                beforeSend: function () {
                    startSpinner();
                    trailer_id.val('').trigger('change');
                    driver_id.val('').trigger('change');
                    cargo_type.val('').trigger('change');
                    // route_assignment_driver_passport_name.val('');
                    // route_assignment_driver_passport_number.val('');
                },
                success: function (data) {

                    if (data) {
                        var truck = jQuery(data).find('xml').find('truck');

                        var trailer = truck.find('trailer');
                        var driver = truck.find('driver');
                        var is_trailer_assigned = false;
                        var is_driver_assigned = false;
                        if (trailer.find('status').text() != 'NOT_FOUND') {
                            trailer_id.val(trailer.find('trailer_id').text()).trigger('change');
                            if (trailer.find('type_number').text() == 7) {
                                cargo_type.val('TANK').trigger('change');
                            } else {

                            }
                            is_trailer_assigned = true;
                        }

                        if (driver.find('status').text() != 'NOT_FOUND') {
                            driver_id.val(driver.find('driver_id').text()).trigger('change');
                            // route_assignment_driver_passport_name.val(driver.find('passport_name').text());
                            // route_assignment_driver_passport_number.val(driver.find('passport_number').text());
                        }

                        if ((trailer.find('status').text() == 'NOT_FOUND') & (driver.find('status').text() == 'NOT_FOUND')) {
                            alert('DRIVER AND TRAILER ARE NOT ASSIGNED TO THIS TRUCK');
                        }
                        else if ((trailer.find('status').text() != 'NOT_FOUND') & (driver.find('status').text() == 'NOT_FOUND')) {
                            alert('DRIVER IS NOT ASSIGNED TO THIS TRUCK');
                        }
                        else if ((trailer.find('status').text() == 'NOT_FOUND') & (driver.find('status').text() != 'NOT_FOUND')) {
                            alert('TRAILER IS NOT ASSIGNED TO THIS TRUCK');
                        }

                    }
                },
                complete: function () {
                    stopSpinner();
                }
            });
        }

        function onCargoFieldChange(changed_cargo_field) {
            var cargo_type = changed_cargo_field.val();
            var table = changed_cargo_field.parents('table');
            var template = jQuery('#truck_subdetails');
            var thead, tbody;

            switch (cargo_type) {
                case 'TANK':
                    thead = template.find('#truck_subdetails_head_Tank').children('tr').clone();
                    tbody = template.find('#truck_subdetails_body_Tank').children('tr').clone();
                    tbody.find('select').select2();
                    break;
                case 'CONTAINER':
                    thead = template.find('#truck_subdetails_head_Container').children('tr').clone();
                    tbody = template.find('#truck_subdetails_body_Container').children('tr').clone();
                    break;
                case 'LOOSE_CARGO':
                    thead = template.find('#truck_subdetails_head_Loose_cargo').children('tr').clone();
                    tbody = template.find('#truck_subdetails_body_Loose_cargo').children('tr').clone();
                    break;
                default:
                    table.find('.truck_subdetails_head').html('');
                    table.find('.truck_subdetails_body').html('');
                    break;
            }

            table.append("<tr><tsd colspan='10'>col-10</td></tr>");
            table.find('.truck_subdetails_head').html(thead);
            table.find('.truck_subdetails_body').html(tbody);
            jQuery('.datepickers').datepicker();
        }
    </script>
@endsection