{!! Form::open(array('class' => 'stdform','route'=>'services.create')) !!}
<div class="modal-body">
    <div class="row-fluid">
        <div class="container-fluid span6">
            <div class="span12">
                <label style="text-align: left" for="asset_group_id">Asset Group:</label>
                <select required name="asset_group_id" id="asset_group_id" style="width: 100%"
                        class="span12 uniformselect">
                    <option value="" selected disabled>Select Asset Group</option>
                    @foreach($asset_groups as $asset_group)
                        <option value="{{ $asset_group->id }}">{{ $asset_group->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="span12" style="margin-left: 0px; padding-top: 3px">
                <div class="span4">
                    <label style="text-align: left" for="frequency">Frequency:</label>
                    <input type="text" name="service_frequency" style="text-align: right" class="span12"
                           placeholder=""/>
                </div>
                <div class="span4">
                    <label style="text-align: left" for="asset_group_id">&nbsp;</label>
                    <select name="service_frequency_type" id="selection2" class="span12 uniformselect">
                        <option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </option>
                        <option value="Day">Day(s)</option>
                        <option value="Month">Month(s)</option>
                        <option value="Year">Year(s)</option>
                        <option value="Trip" selected>Trip(s)</option>
                    </select>
                </div>
                <div class="span1">
                    <label style="text-align: left" for="asset_group_id">&nbsp;</label>
                    <h3>OR</h3>
                </div>
                <div class="span3">
                    <label style="text-align: left" for="asset_group_id">&nbsp;</label>
                    <input type="text" name="service_frequency_odometer" class="span12" placeholder="Odometer Unit"/>
                </div>
            </div>

            <div class="span12" style="margin-left: 0px; padding-top: 3px">
                <div class="span4">
                    <label style="text-align: left" for="frequency">Alert When Remain :</label>
                    <input type="text" name="create_remainder" style="text-align: right" class="span12" placeholder=""/>
                </div>
                <div class="span4">
                    <label style="text-align: left" for="asset_group_id">&nbsp;</label>
                    <select name="create_remainder_type" id="selection2" class="span12 uniformselect">
                        <option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </option>
                        <option value="Day">Day(s)</option>
                        <option value="Month">Month(s)</option>
                        <option value="Year">Year(s)</option>
                        <option value="Trip" selected>Trip(s)</option>
                    </select>
                </div>
                <div class="span1">
                    <label style="text-align: left" for="asset_group_id">&nbsp;</label>
                    <h3>OR</h3>
                </div>
                <div class="span3">
                    <label style="text-align: left" for="asset_group_id">&nbsp;</label>
                    <input type="text" name="create_remainder_odometer" class="span12" placeholder="Odometer Unit"/>
                </div>
            </div>
        </div>
        <div class="container-fluid span6" style="margin-left: -10px">
            <label style="text-align: left" for="description">Description:</label>
            <textarea name="description" class="span12" rows="7" style="width: 110%"></textarea>
        </div>
    </div>


    <div class="row-fluid" style="padding-top:4px"></div>
    <div id="asset_maintenance_parameters"></div>

</div>
<div class="modal-footer">
    <div class="row">
        <div class="form-group">
            <button class="btn btn-primary" type="submit">Submit</button>
            <button type="reset" class="btn  btn-primary" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>
</form>

<div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1"
     class="modal hide fade in modal-1" id="edit_master_service">
    <!-- Modal content-->
    <div class="modal-header" style="background: #50A6C6">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4>Add Service</h4>
    </div>
    {!! Form::open(array('class' => 'stdform','route'=>'master-service.update')) !!}
    <div class="modal-body">
        <div id="edit_master_service_body"></div>
    </div>
    <div class="modal-footer">
        <div class="row">
            <div class="form-group">
                <button class="btn btn-primary" type="submit">Submit</button>
                <button type="reset" class="btn  btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
    </form>
</div>


<table style="width: 90%" class="fade">
    <tbody id="add_sub_service_details">
    <tr>
        <td>
            <input type="hidden" name="master_service_list_ids[]" value="">
            <span class="formwrapper">
                <select placeholder="Choose a On-Route Cost..." name="service[]" class="onRoute_cost">
                    <option value=""></option>
                    @foreach($_services as $service)
                        <option value="{{$service->id}}">{{$service->name}}</option>
                    @endforeach
                </select>
            </span>
        </td>
        <td>
            <a class="remove_sub_service"><i class="icon-minus-sign" style="font-size: 18px;color: red"></i></a>
        </td>
    </tr>
    </tbody>
</table>

<script>
    sortableShowCnt();
    var asset_group_id = $('#asset_group_id');
    asset_group_id.select2();
    asset_group_id.change(function () {
        jQuery.ajax({
            type: "get",
            url: "{{route('settings.master_services.service_parameters.by_asset_groups.create')}}",
            data: {
                asset_group_id: $(this).val()
            },
            beforeSend: function () {
                startSpinner();
                jQuery('#asset_maintenance_parameters').empty();
            }, complete: function () {
                stopSpinner();
            },
            success: function (data) {
                jQuery('#asset_maintenance_parameters').empty().append(data);
                sortableShowCnt();
            },
            error: function (data) {

            }
        })
    });

    function sortableShowCnt(){
        if (jQuery('#sortable2').length > 0) {
            jQuery("#sortable2").sortable();
            jQuery('.showcnt-2').click(function () {
                var t = jQuery(this);
                var det = t.parents('li').find('.details');
                if (!det.is(':visible')) {
                    det.slideDown();
                    t.removeClass('icon-arrow-down').addClass('icon-arrow-up');
                } else {
                    det.slideUp();
                    t.removeClass('icon-arrow-up').addClass('icon-arrow-down');
                }
            });
        }
    }

</script>