{{--<table class="table table-bordered">--}}
{{--<tbody>--}}
{{--<tr class="gradeX">--}}
{{--<td colspan="7">--}}
{{--<table style="margin-left: 10%;width: 85%;margin-top: 15px">--}}
{{--<tr>--}}
{{--<td>Distance</td>--}}
{{--<td><input type="text" name="distance[]" @if($route)value="{{$route->go_distance*2}}"  @endif class="span12"></td>--}}


{{--<td>Return</td>--}}
{{--<td>--}}
{{--<select name="is_returning[]" class="searchable_select"--}}
{{--style="width: 100%">--}}
{{--<option value="0" @if($route) @if(!$route->is_returning) selected @endif @endif >FALSE</option>--}}
{{--<option value="1" @if($route) @if($route->is_returning) selected @endif @endif >TRUE</option>--}}
{{--</select>--}}
{{--</td>--}}
{{--</tr>--}}
{{--</table>--}}
{{--</td>--}}
{{--</tr>--}}
{{--</tbody>--}}
{{--</table>--}}
<div class="company_cargo_type route_cargo_detail">
    <div class="row-fluid">
        <hr style="margin-bottom: 0px"/>
        &nbsp;
    </div>
    <div class="fade hide cargo_zones" style="font-size: 8px">

        <hr style="width: 100%;margin-top: 5px;border-bottom: 4px dashed #ddd; background: #999; ">
        <div class="row-fluid">
            <div class="span12">
                <div class="span2"><a class="remove_returning_point btn">X</a></div>
                <div class="span5">
                    <label class="control-label span5 " for="Return City">Loading City (<span style="font-size: 8px;font-weight: bold;">Returning Cargo</span>)</label>
                    <input type="hidden" class="template" name="template[{{$type}}][]" value="1">
                    <input type="hidden" name="route_returning_cargo_detail_id[{{$type}}][]" value="0">
                    <div class="controls span7">
                        <select name="return_loading_city_id[{{$type}}][]" style="width:100%">
                            <option value="">&nbsp;</option>
                            @foreach($cities as $city)
                                <option value="{{ $city->id }}" @if($route){{ $city->id == $route->return_city ? 'elected ' : '' }} @endif > {{ $city->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="span5">
                    <label class="control-label span5 " for="Return Point">Loading Point (<span style="font-size: 8px;font-weight: bold;">Returning Cargo</span>)</label>

                    <div class="controls span7">
                        <select name="return_loading_city_point[{{$type}}][]"
                                style="width:100%">
                            <option value="">&nbsp;</option>
                            @foreach($cities as $city)
                                @if($city->loading_points->count())
                                    <optgroup label="{{ $city->name }}" class="{{ 'optgroup' . $city->id }}">
                                        @foreach($city->loading_points as $loading_point)
                                            <option value="{{ $loading_point->id }}" @if($route) {{ $loading_point->id == $route->return_point ? 'elected ' : '' }} @endif> {{ $loading_point->name }}</option>
                                        @endforeach
                                    </optgroup>
                                @endif
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="row-fluid ">
            <div class="span12">
                <div class="span3" style="text-align: right">
                    <h4><span class="destination_name">Dest</span> TO <span class="returning_city_name">RE</span>:</h4>
                </div>
                <div class="span3">
                    <label class="control-label span5" for="extra_distance">(KM)</label>

                    <div class="controls span7">
                        <input type="number" name="destination_return_km[{{$type}}][]" id="extra_distance" @if($route) value="{{ $route->extra_distance }}" @endif min="0" class="span12" autocomplete="off"/>
                    </div>
                </div>
                <div class="span3">
                    <label class="control-label span5 " for="extra_distance">(DAYS)</label>

                    <div class="controls span7">
                        <input type="number" name="destination_return_days[{{$type}}][]" id="extra_distance" @if($route) value="{{ $route->extra_distance }}" @endif min="0" class="span12" autocomplete="off"/>
                    </div>
                </div>
                <div class="span3">
                    <label class="control-label span5 "
                           for="extra_distance">(FUEL)</label>

                    <div class="controls span7">
                        <input type="number" name="destination_return_fuels[{{$type}}][]" id="extra_distance" @if($route) value="{{ $route->extra_distance }}" @endif min="0" class="span12" autocomplete="off"/>
                    </div>
                </div>
            </div>
        </div>


        <div class="row-fluid">
            <div class="span12">
                <div class="span3" style="text-align: right">
                    <h4><span class="returning_city_name">RE</span> - HQ:</h4>
                </div>
                <div class="span3">
                    <label class="control-label span5 " for="tanker_return_distance">(KM)</label>

                    <div class="controls span7">
                        <input type="number" name="return_hq_km[{{$type}}][]" id="tanker_return_distance" @if($route) value="{{ $route->tanker_return_distance }}" @endif min="0" class="span12 tanker_fields" autocomplete="off"/>
                    </div>
                </div>
                <div class="span3">
                    <label class="control-label span5 " for="tanker_allowable_days">(DAYS)</label>

                    <div class="controls span7">
                        <input type="number" name="return_hq_days[{{$type}}][]" id="tanker_allowable_days" @if($route) value="{{ $route->tanker_allowable_days }}" @endif min="0" class="span12 tanker_fields" autocomplete="off"/>
                    </div>
                </div>
                <div class="span3">
                    <label class="control-label span5 " for="tanker_fuel_required">(Fuel)</label>

                    <div class="controls span7">
                        <input type="number" name="return__hq_fuels[{{$type}}][]" id="tanker_fuel_required" @if($route) value="{{ $route->tanker_fuel_required }}" @endif min="0" class="span12 tanker_fields" autocomplete="off"/>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row-fluid">{{$type}}:</div>
    <input type="hidden" name="cargo_type[]" value="{{$type}}">
    <div class="row-fluid">
        <div class="span12">
            <div class="span6">
                <label class="control-label span4 " for="">&nbsp;</label>

                <div class="controls span8"> WITHOUT RETURNING CARGO</div>
            </div>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span12">
            <div class="span6">
                <label class="control-label span4 " for="tanker_fuel_required">GO & RETURN(KM)</label>

                <div class="controls span8">
                    <input type="number" name="fuel[]" id="tanker_fuel_required"
                           @if($route) value="{{$route->go_distance*2}}" @endif min="0" class="span12"
                           autocomplete="off"/>
                </div>
            </div>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span12">
            <div class="span6">
                <label class="control-label span4 " for="tanker_fuel_required">Fuel</label>

                <div class="controls span8">
                    <input type="number" name="fuel[]" id="tanker_fuel_required"
                           @if($route) value="{{$route->fuel}}" @endif min="0" class="span12"
                           autocomplete="off"/>
                </div>
            </div>
            <div class="span6">
                <label class="control-label span4 " for="tanker_allowable_days">Allowable Days</label>

                <div class="controls span8">
                    <input type="number" name="allowable_days[]" id="tanker_allowable_days"
                           @if($route) value="{{$route->days}}" @endif  min="0" class="span12"
                           autocomplete="off"/>
                </div>
            </div>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span12">

            <div class="span6">
                <label for="route_nature" class="control-label span4">Returning Cargo</label>

                <div class="span8 controls">
                    <select name="is_returning[]" id="route_nature" class="searchable_select returning_cargo"
                            style="width:100%">
                        <option value="1" @if($route) @if($route->is_returning) selected @endif @endif>
                            APPLICABLE
                        </option>
                        <option value="2"
                                @if($route) @if(!$route->is_returning) selected @endif @endif>NO APPLICABLE
                        </option>
                    </select>
                </div>
            </div>
            <div class="span6">
                <label class="control-label span4"></label>
                <div class="span8 controls">
                    <span class="btn btn-lg btn-block add_returning_point">Add Returning Point</span>
                </div>
            </div>
        </div>
    </div>
    <div class="route_append_zone"></div>

</div>
<script>
    jQuery('.returning_cargo').each(function () {
        var is_returning_value = jQuery(this).val();
        var route_cargo_detail = jQuery(this).closest('.route_cargo_detail');
        var add_returning_point = route_cargo_detail.find('.add_returning_point');
        if (is_returning_value == 1) {
            add_returning_point.css('display', 'block');
        } else {
            add_returning_point.css('display', 'none');
        }

    });

    jQuery('.returning_cargo').on('change', function () {
        var is_returning_value = jQuery(this).val();
        var route_cargo_detail = jQuery(this).closest('.route_cargo_detail');
        var add_returning_point = route_cargo_detail.find('.add_returning_point');

        var return_append_zone = route_cargo_detail.find('.route_append_zone');
        if (is_returning_value == 1) {
            add_returning_point.css('display', 'block');
        } else {
            add_returning_point.css('display', 'none');
            return_append_zone.empty();
        }
    });

    var add_returning_point_btn = jQuery('.add_returning_point');
    add_returning_point_btn.on('click', function () {
        var route_cargo_detail = jQuery(this).closest('.route_cargo_detail');
        var return_append_zone = route_cargo_detail.find('.route_append_zone');
        var type = route_cargo_detail.find('input[name="cargo_type[]"]').val();

        var route_data = route_cargo_detail.find('.cargo_zones').clone();
        route_data.removeClass('hide fade cargo_zones');
        route_data.addClass('possible_returning_point');
        route_data.find('.template').val(0);
        route_data.find('select[name="return_loading_city_id[' + type + '][]"]').select2();
        route_data.find('select[name="return_loading_city_id[' + type + '][]"]').on('change', function (e) {
            var possible_returning_point = $(this).closest('.possible_returning_point');
            var returning_city__label_name = possible_returning_point.find('.returning_city_name');
            var returning_city_name = $(this).children("option").filter(":selected").text();
            var city_id = $(this).val()
            returning_city__label_name.html(returning_city_name);

            //load, loading point for this loading city
            var url = "{{route('loading_cities.loading_points.create',[':id'])}}";
            url = url.replace(":id", city_id);
            jQuery.ajax({
                url: url,
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    {{--name="[{{$type}}][]"--}}
                    $('select[name="return_loading_city_point[' + type + '][]"]').empty();
                    $('select[name="return_loading_city_point[' + type + '][]"]').select2({
                        placeholder: "Loading Point",
                        data: data
                    });

                }
            });
        });
        route_data.find('.remove_returning_point').on('click', function () {
            var possible_returning_point = $(this).closest('.possible_returning_point');
            possible_returning_point.remove();
        });
        route_data.find('select[name="return_loading_city_point[' + type + '][]"]').select2();
        return_append_zone.append(route_data);

    });
</script>