@extends('layouts.tenant.layout_1.app')

@section('page_css')
<style>

</style>
@stop

@include('pipeline.stages._edit')

@section('page_js')
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function (e) {

    let newRow = '<tr><td><span><i class="la la-arrows-alt dragula-handle"></i></span></td>'
                + '<td><input type="text" name="stage_checklist[]" class="form-control" placeholder="Enter Description" />'
                + '<input type="hidden" name="sortorder[]" class="hdsortorder" value="0" /></td>'
                + '<td width="120">'
                + '<button type="button" class="btn btn-sm btn-primary iconadd mr-1"><i class="fa fa-plus"></i></button>'
                + '<button type="button" class="btn btn-sm btn-danger iconremove"><i class="la la-trash"></i></button>'
                + '</td></tr>',
        field_options_wrapper = $('#field_options_wrapper');

    field_options_wrapper.sortable({
        update: function( event, ui ) {
            updateSortOrder();
        }
    });

    $(document).on('click', '.iconadd', function(e) {
        addrow(this);
        updateSortOrder();
    });

    $(document).on('click', '.iconremove:not(.disabled)', function(e) {
        removerow(this);
        updateSortOrder();
    });

    let iconadd, iconremove;

    function addrow(el){
        $(el).parents('tr:eq(0)').after(newRow);
    }

    function removerow(el) {
        var curr_row =  $(el).parents('tr:eq(0)');
        if($('tr', field_options_wrapper).length > 1) curr_row.remove();
    }

    function updateSortOrder(){
        let hdsortorder = $('.hdsortorder'), sortoderindex = 1;
        hdsortorder.each(function(){
            $(this).val(sortoderindex);
            ++sortoderindex;
        });
    }

    $('#frmUpdatePipelineStage').submit(function(){
        updateSortOrder();
    });
});
</script>
@stop