@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">TRUCKS ALLOCATION</li>
    </ul>
@stop
@section('title')
    Truck Alocated to {{$client->name}}
@endsection
@section('msghead_menu')
    <li class="right btn-group">
        <div class="btn-group">
            <button class="btn dropdown-toggle" data-toggle="dropdown" id="create_nominations">
                &nbsp; CREATE NOMINATION
            </button>
        </div><!--btn-group-->
        <div class="btn-group">
            <button class="btn dropdown-toggle" data-toggle="dropdown" id="update_location">
                <i class="icon-trash"></i> &nbsp;UPDATE LOCATION
            </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%;
        }
        tr:hover, tr.selected {
            background-color: #eeeeee;
            font-weight: 600;
        }
    </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">Destinations</label>
                <select name="select" width="100%" id="city_id" class="searchable_select" multiple>
                    <option value="">ALL</option>
                    @foreach($cities as $city)
                        <option value="{{$city->id}}">{{$city->name}}</option>
                    @endforeach
                </select>
                <input type="hidden" id="client_id" value="{{$client->id}}">
                <input type="hidden" id="status" value="1">

                <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" 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: 13%">Driver</th>
                    <th style="width: 7%">type</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-->

    <div class="fade hide">
        <div id="trucks_details">
            <table class="table table-bordered table-condensed">
                <thead>
                <tr>
                    <th style="width: 20%">Vehicle Reg</th>
                    <th style="width: 20%">Trailer Reg</th>
                    <th style="width: 20%">Driver Name</th>
                    <th style="width: 20%">Loading City</th>
                    <th style="width: 20%">Cargo Type
                        <a href="javascript:;" class="delete_row_appended pull-right">
                            <span class="icon-trash" style='color:red;'></span></a>
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>
                        <select name="vehicle_id[]" class="" style="width: 100%;">
                            <option value=""></option>
                            @forelse($trucks as $truck)
                                <option value="{{ $truck->id }}">{{ $truck->registration_number }}</option>
                            @empty
                                <option>No data found!</option>
                            @endforelse
                        </select>
                    </td>
                    <td>
                        <select name="trailer_id[]" class="" style="width: 100%">
                            <option value=""></option>
                            @forelse($trailers as $trailer)
                                <option value="{{ $trailer->id }}">{{ $trailer->registration_number }}
                                    ({{ $trailer->trailer_type }})
                                </option>
                            @empty
                                <option>No data found!</option>
                            @endforelse
                        </select>
                    </td>
                    <td>
                        <select name="driver_id[]" data-placeholder="" class="" style="width: 100%">
                            <option value=""></option>
                            @forelse($drivers as $driver)
                                <option value="{{ $driver->employee_id }}">{{ $driver->full_name }}</option>
                            @empty
                                <option>No data found!</option>
                            @endforelse
                        </select>
                        <!-- <input type="text" class="input-small" name="container[]" autocomplete="off"/> -->
                    </td>
                    <td>
                        <select name="city_id[]" required style="width: 100%" class="">
                            <option value=""></option>
                            @forelse($cities as $city)
                                <option value="{{ $city->id }}">{{ $city->name }}</option>
                            @empty
                                <option>No data found!</option>
                            @endforelse
                        </select>
                    </td>
                    <td>
                        <select name="cargo_type[]" class="" style="width: 100%">
                            <option value=""></option>
                            <option value="TANK">Tank</option>
                            <option value="CONTAINER">Container</option>
                            <option value="LOOSE_CARGO">Loose Cargo</option>
                        </select>
                    </td>
                </tr>
                </tbody>
                <thead class='truck_subdetails_head'></thead>
                <tbody class='truck_subdetails_body'></tbody>
                <tr>
                    <td colspan="5">&nbsp;</td>
                </tr>
            </table>
        </div>

        <div id="truck_subdetails">
            <table>
                <thead id='truck_subdetails_head_Tank'>
                <tr>
                    <th>Loading Point</th>
                    <th>Fuel Type</th>
                    <th>Tonnage</th>
                    <th>Rate</th>
                    <th>Loading Date</th>
                </tr>
                </thead>
                <tbody id='truck_subdetails_body_Tank'>
                <tr>
                    <td><input class="span12" name="loading_point[]" type="text" autocomplete="off"/>
                    </td>
                    <td>
                        <select name="fuel_product_type_id[]" data-placeholder="" class="" style="width: 100%">
                            <option value=""></option>
                            @forelse($fuel_product_types as $fuel)
                                <option value="{{ $fuel->id }}">{{ $fuel->name .' ('. $fuel->abbreviation .')' }}</option>
                            @empty
                                <option>No data found!</option>
                            @endforelse
                        </select>
                        <!-- <input type="text" class="input-small" name="container[]" autocomplete="off"/> -->
                    </td>
                    <td><input type="number" name="tonnage[]" class="span12" min='0' autocomplete="off"/>
                    </td>
                    <td><input type="number" name="rate[]" class="span12" min='0' autocomplete="off"/>
                    </td>
                    <td><input class="span12 datepickers" name="loading_date[]" type="text" autocomplete="off"/>
                    </td>
                </tr>
                </tbody>
                <thead id='truck_subdetails_head_Container'>
                <tr>
                    <th>Loading Point</th>
                    <th>Container(s) No.</th>
                    <th>Size</th>
                    <th>Tonnage</th>
                    <th>Loading Date</th>
                </tr>
                </thead>
                <tbody id='truck_subdetails_body_Container'>
                <tr>
                    <td><input class="span12" name="loading_point[]" type="text" autocomplete="off"/>
                    </td>
                    <td><input type="text" name="containers[]" class="span12" min='0' autocomplete="off"/></td>
                    <td>
                        <select name="container_size[]" style="width: 100%">
                            <option value="20Ft">20Ft</option>
                            <option value="40Ft">40Ft</option>
                        </select>
                    </td>
                    <td><input type="number" name="tonnage[]" class="span12" min='0' autocomplete="off"/></td>
                    <td><input class="span12 datepickers" name="loading_date[]" type="text" autocomplete="off"/></td>
                </tr>
                </tbody>
                <thead id='truck_subdetails_head_Loose_cargo'>
                <tr>
                    <th>Loading Point</th>
                    <th>Description</th>
                    <th>Tonnage</th>
                    <th>Quantity</th>
                    <th>Loading date</th>
                </tr>
                </thead>
                <tbody id='truck_subdetails_body_Loose_cargo'>
                <tr>
                    <td><input class="span12" name="loading_point[]" type="text" autocomplete="off"/>
                    </td>
                    <td><textarea rows='1' name="loose_cargo_description[]" class="span12"
                                  autocomplete="off"></textarea>
                    </td>
                    <td><input type="number" name="tonnage[]" class="span12" min='0' autocomplete="off"/>
                    </td>
                    <td><input type="number" name="quantity[]" class="span12" min='0' autocomplete="off"/>
                    </td>
                    <td><input class="span12 datepickers" name="loading_date[]" type="text" autocomplete="off"/>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <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({
                        "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',['client_is'=>$client->id]) }}",
                            data: function (d) {
                                d.search_field = $('input[name=search_field]').val();
                                d.truck_id = $('#truck_id').val();
                                d.city_id = $('#city_id').val();
                                d.client_id = '{{$client->id}}';
                                d.vehicle_type = $('#vehicle_type').val();
                                d.status = $('#status').val();
                            }
                        },
                        scrollY: calcDataTableHeight(),
//                        scrollCollapse: true,
                        "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
                    });

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

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

        var update_location_btn = jQuery('#update_location');
        update_location_btn.click(function () {
            var vehicle_id = checkRows('vehicle_id');

            if (vehicle_id.length > 0) {
                jQuery.ajax({
                    url: "{{ route('vehicle_locations.create') }}",
                    type: "GET",
                    beforeSend: function () {
                        startSpinner();
                    },
                    data: {
                        vehicle_id: vehicle_id
                    },
                    success: function (data) {
                        onAjaxSuccess(data, 'POST');
                    },
                    error: function (xhr, textStatus, error) {
                        console.log(textStatus);
                        console.log(error);
                    },
                    complete: function () {
                        stopSpinner();
                    }
                });
            }
        });


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

            if (vehicle_id.length > 0) {
                jQuery.ajax({
                    url: "{{ route('clients.loading-allocations.create',['clients'=>$client->id])}}",
                    type: "GET",
                    beforeSend: function () {
                        startSpinner();
                    },
                    data: {
                        vehicle_id: vehicle_id
                    },
                    success: function (data) {
                        onAjaxSuccess(data, 'POST');
                    },
                    error: function (xhr, textStatus, error) {
                        console.log(textStatus);
                        console.log(error);
                    },
                    complete: function () {
                        stopSpinner();
                    }
                });
            }
        });

        function formInitializations() {
            jQuery('.searchable_select').select2();
            jQuery('.datepickers').datepicker();

            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