@extends('layouts.main', ['title' => 'LOGISTICS | Loading Orders'])
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li class="active">Loading Orders</li>
        </li>
    </ul>
@stop
@section('title')
    Loading Orders
@endsection
@section('msghead_menu')
    <li class="right btn-group">
        <div class="btn-group">
            <button class="btn" onclick="create('{{ route('loading_orders.create') }}')">
                <i class="icon-th"></i> &nbsp;NEW LOADING ORDER
            </button>
        </div><!--btn-group-->
    </li>
@endsection
@section('contentinner')
    <style>

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

    </style>

    <!-- Main Modal -->
    {{--<div aria-hidden="false" class="fade hide modal animated" data-backdrop="static" id="main_modal"></div>--}}


    <!-- Main Table -->
    <div class="row-fluid">
        <div class="span12">
            <table class="table table-bordered table-condensed logistics_table" id="loadingOrdersTable"
                   route="{{ route('loading_orders.indexDatas') }}">
                <thead>
                <tr>
                    <th width='5px'>#</th>
                    <th style="width: 10px">More</th>
                    <th>Date</th>
                    <th>Created By</th>
                    <th>Client</th>
                    <th>No. of Truck(s)</th>
                    <th style="width: 50px">&nbsp;</th>
                    <th width='5px'>Action</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>Quantity</th>
                    <th>Loading Date</th>
                </tr>
                </thead>
                <tbody id='truck_subdetails_body_Tank'>
                <tr>
                    <td>
                        <select name="loading_point_id[]" style="width: 100%">
                            <option value=""></option>
                            @foreach($loading_points as $loading_point)
                                <option value="{{ $loading_point->id }}" }}>{{ $loading_point->name }}</option>
                            @endforeach
                        </select>
                    </td>
                    </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="text" 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>
                <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>
                        <select name="loading_point_id[]" style="width: 100%">
                            <option value=""></option>
                            @foreach($loading_points as $loading_point)
                                <option value="{{ $loading_point->id }}" }}>{{ $loading_point->name }}</option>
                            @endforeach
                        </select>
                    </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="text" 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>
                        <select name="loading_point_id[]" style="width: 100%">
                            <option value=""></option>
                            @foreach($loading_points as $loading_point)
                                <option value="{{ $loading_point->id }}" }}>{{ $loading_point->name }}</option>
                            @endforeach
                        </select>
                    </td>
                    <td><textarea rows='1' name="loose_cargo_description[]" class="span12" autocomplete="off"></textarea>
                    </td>
                    <td><input type="text" 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>
        var dt = jQuery('#loadingOrdersTable');
        var mainDataTable = dt.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."
                },
                ajax: {
                    url: "{{ route('loading_orders.indexDatas') }}",
                    data: function (d) {
                    },
//                         error: function(xhr, textStatus, error) {
//                             onAjaxError(xhr, textStatus, error);
//                         }
                },
                "initComplete": function (settings, json) {
                    stopSpinner();
                },
                scrollCollapse: true,
                "sPaginationType": "full_numbers",
                processing: true,
                serverSide: true,
                "order": [[ 2, "desc" ]],
                "columns": [
                    {data: 'checkbox'},
                    {
                        "class": "details-control",
                        "orderable": false,
                        "data": null,
                        "defaultContent": ""
                    },
                    {"class": "link number", data: 'date'},
                    {"class": "link", data: 'user_id'},
                    {"class": "link", data: 'client'},
                    {"class": "link", data: 'no_of_vehicles'},
                    {"class": "link", data: 'type'}
                    ,
                    {
                        "orderable": false,
                        data: 'action'
                    }
                ],
                "fnRowCallback" : function(nRow, aData, iDisplayIndex){
                    $("td:first", nRow).html(iDisplayIndex + 1);
                    return nRow;
                },
                "bStateSave": true
            });

        // Array to track the ids of the details displayed rows
        var loading_order_details = [];

        dt.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'), loading_order_details);

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

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

                // Add to the 'open' array
                if (idx === -1) {
                    loading_order_details.push(tr.attr('id'));
                }
            }
        });

        function format(d) {
            return d.loading_order_more_details;
        }


        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();
        }


        // Ajax function to edit record
        function editRecordFn(id) {
            var url = "{{ route('loading_orders.edit', ':id') }}". replace(':id', id);
            edit(url);
        }

        //Ajax function to delete a record
        function deleteRecordFn(id) {
            var url = "{{ route('loading_orders.destroy', ':id') }}". replace(':id', id);
            destroy(url);
        }


        // Ajax function to print record
        function printRecordFn(id) {
            var url = '{{route('loading_orders.print',':id')}}'. replace(':id', id);
            window.open(url, '_blank');
        }


        function pageInitiation() {
            var number_of_trucks = jQuery('#number_of_trucks');

            var generate_trucks = jQuery('#generate_trucks');
            var remained_number_of_trucks = generate_trucks.find('table').length;
            if(remained_number_of_trucks == 0) tripTracks_load(1);

            number_of_trucks.on('keyup', function () {
                var num = jQuery(this).val();
                tripTracks(num);
                pageInitiation();
            });

            jQuery('.searchable_select').select2();
            jQuery('.datepickers').datepicker();
            jQuery('.delete_row').click(function () {
                if (jQuery('#number_of_trucks').val() == 1) {
                    jQuery.jGrowl("LOADING ORDER MUST HAVE AT LEAST ONE TRUCK)");
                    return false;
                }
                var generate_trucks = jQuery('#generate_trucks');
                jQuery(this).parents('table').fadeOut(function () {
                    jQuery(this).remove();
                    var remained_number_of_trucks = generate_trucks.find('table').length;
                    jQuery('#number_of_trucks').val(remained_number_of_trucks);
                });
                return false;
            });
        }
        function tripTracks_load(num) {
            var generate_trucks = jQuery('#generate_trucks');
            generate_trucks.append(generateLoadingOrderItem());

            for (i = 1; i < num; i++) {
                generate_trucks.append(generateLoadingOrderItem());
            }
            jQuery('.datepickers').datepicker();
        }
        function tripTracks(num) {
            var generate_trucks = jQuery('#generate_trucks');
            var old_trucks = generate_trucks.find('table').length;

            if (old_trucks < num) {
                var j = num - old_trucks;
                for (i = 0; i < j; i++) {
                    generate_trucks.append(generateLoadingOrderItem());
                }
            } else {
                console.log('wrong');
                jQuery('#number_of_trucks').val(num);
            }
        }
        function generateLoadingOrderItem() {
            var response_ = jQuery('#trucks_details').find('table').clone();
            response_.find('select[name="vehicle_id[]"]').addClass('truck searchable_select');

            response_.find('select[name="vehicle_id[]"]').on('change', function () {
                onVehicleFieldChange(jQuery(this));
            });

            response_.find('select[name="cargo_type[]"]').change(function () {
                onCargoFieldChange(jQuery(this));
            });

            response_.find('select[name="trailer_id[]"],' +
                ' select[name="driver_id[]"],' +
                ' select[name="cargo_type[]"],' +
                ' select[name="city_id[]"]').addClass('searchable_select');
            response_.find('.delete_row_appended').addClass('delete_row');
            response_.find('input[name="loading_date[]"]').addClass('datepickers');

            return response_;
        }
    </script>
    <style>
        .bootstrap-datetimepicker-widget {
            z-index: 99999 !important;
        }

        .dropdown-menu {
            top: 43%;
        }

        .customer-field {
            margin-bottom: 6px;
        }

        .pull-top {
            margin-top: -28px
        }

        .divider15 {
            border-top: 1px #0b4073 dashed;
        }

        label {
            text-align: left;
        }

        .has-error {
            /*outline: #FF0000 solid thin;*/
            /*border-bottom-color: red;*/
        }
    </style>

    <!-- =============================================================================== -->

@stop