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

@section('page_css')
<style type="text/css">
.table_list_col, .custom_list_row, .sellisttype_column, .custom_list_column{
    display: none;
}    
#field_options_wrapper > tr{
    cursor:move;
}
</style>
@stop

@include('system.fields._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);
        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;
        });
    }

    $(document).on("change", "#field_type", function() {
        var seltype = $(this);
        if(seltype.val() == 'select'){
            $('.sellisttype_column').show();
            $('#sellisttype, #field_custom_list, #predefined_list').val('');
        }
        else{
            $('.custom_list_row, .sellisttype_column, .custom_list_column').hide();
        }
    });

    $(document).on("change", "#field_custom_list", function() {
        var seltype = $(this);
        // if(seltype.val() == 'select'){
        //     $('.sellisttype_column').show();
        // }
        // else{
        //     $('.table_list_col,.custom_list_row, .sellisttype_column').hide();
        // }
    });

    $(document).on("change", "#sellisttype", function() {
        var seltype = $(this);
        if(seltype.val() == 1){
            $('.custom_list_column').hide();
            $('.custom_list_row').show();
        } else if(seltype.val() == 2){
            $('.custom_list_column').show();
            $('.custom_list_row').hide();
        } else{
            $('.custom_list_row, .custom_list_column').hide();
        }
    });
});
</script>
@stop