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

@section('page_css')
<style type="text/css">
#field_options_wrapper > tr{
    cursor:move;
}
</style>
@stop

@include('tenant.leads.sources.webform.list._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" class="form-control new_priv_name" name="option_name[]" value="" placeholder="Enter Option Key" />'
                + '<input type="hidden" name="option_sortorder[]" class="hdsortorder" value="0" /></td>'
                + '<td><input type="text" class="form-control new_priv_desc" name="option_value[]" value="" placeholder="Enter Option Value" /></td>'
                + '<td>'
                + '<a href="javascript:void(0);" class="btn btn-sm btn-primary iconadd mr-1"><i class="fa fa-plus"></i></a>'
                + '<a href="javascript:void(0);" class="btn btn-sm btn-danger iconremove"><i class="fa fa-trash"></i></a>'
                + '</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);
    });

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

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

        $('.iconadd').unbind('click');
        $('.iconremove').unbind('click');
        $('.iconadd').click(function(){addrow(this);});
        $('.iconremove').click(function(){removerow(this);});
    }

    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); console.log(sortoderindex);
            ++sortoderindex;
        });
    }

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