// console.log('here2');
function sortCustomLinks(that, condition) {
    console.log(condition);
    // $(that).closest('ul').find('li').map((index, val) => {
    //     if (condition) {
    //         $(val).find('.custom_f').attr('name', $(val).find('.custom_f').attr('name').slice(0, -1) + (index+1))
    //     } else {
    //         $(val).find('.title').attr('name', $(val).find('.title').attr('name').slice(0, -1) + (index+1))
    //         $(val).find('.url').attr('name', $(val).find('.url').attr('name').slice(0, -1) + (index+1))
    //         $(val).find('select.icon').attr('name', $(val).find('select.icon').attr('name').slice(0, -1) + (index+1))
    //     }
    // })
}
jQuery(document).ready(function($){
    $('.mySelect').selectpicker();
    // $('.exam')
    $('ul.example').sortable({
        onDrop: function($item, container, _super) {
            $item.find('ol.dropdown-menu').sortable('enable');
            _super($item, container);
            if ($item.parent().find('.custom_links')) {
                console.log('custom links');
                sortCustomLinks($item, 'links');
            }
            if ($item.parent().find('.custom_field')) {
                sortCustomLinks($item, 'fields');
                console.log('custom fields');
            }
            console.log('dropped')
        }
    })


    var maxField = 100; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var addButtonUserProfile = $('.add_button_up');
    var wrapper = $('.field_wrapper'); //Input field wrapper
    var x = 1; //Initial field counter is 1
    $(addButton).click(function(){
        // $(this).attr('class','remove_button').find('i').attr('class','fa fa-minus icon-remove');
        const div_count = parseInt($(this).siblings('ul').find('li').length)+1;
        const user_id = $(this)[0].attributes['id-ref'].value;
        if(x < maxField){
            x++; //Increment field counter
            $( $(this).siblings('ul')).append(
            `<li class="item"><div class="user-custom-links" style="display: flex; margin: 10px 0">
                <a href='javascript:void(0);'><i class="fa fa-bars fa-lg"></i></a>
                <label>Title: <input placeholder='Enter Link Title'" type="text" name="link_title_`+user_id+`_`+div_count+`"/></label>
               <label  style="display: flex; width: 200px; align-items: center;">Icon:
                   <select name="link_icon_`+user_id+`_`+(div_count)+`" data-show-content="true" class="form-control mySelect">
                       <option value=""  >Select Icon</option>
                       <option value="globe"  data-content="<i class='fa fa-globe'></i> globe"></option>
                       <option value="user"   data-content="<i class='fa fa-user'></i> user"></option>
                       <option value="map-marker"  data-content="<i class='fa fa-map-marker'></i> map-marker"></option>
                       <option value="envelope"  data-content="<i class='fa fa-envelope'></i>"> envelope</option>
                       <option value="address-book"  data-content="<i class='fa fa-address-book'></i> address-book"></option>
                   </select>
               </label>
               <label>URL:  <input placeholder='Enter Link Url' type="text" name="link_url_`+user_id+`_`+(div_count)+`"/></label>
               <a style="margin-left: 5px;" href="javascript:void(0);" class="remove_button">
                   <i class="fa fa-minus icon-remove"></i>
               </a>
           </div></li>`
           );
           $('.mySelect').selectpicker();
       }
   });
   $(addButtonUserProfile).click(function(){
        const div_count = parseInt($(this).siblings('ul').find('li').length)+1;
       if(x < maxField){
           x++; //Increment field counter
           $( $(this).siblings('ul')).append(
               `<li class="item"><div class="user-custom-links" style="display: flex; margin: 10px 0"><a href='javascript:void(0);'><i class="fa fa-bars fa-lg"></i></a>
               <label>Name: <input class="custom_f" placeholder="Enter name" type="text" name="custom_field_`+div_count+`"  value=""/></label>
               <a style="margin-left: 5px;" href="javascript:void(0);" class="remove_button">
                   <i class="fa fa-minus icon-remove"></i>
               </a>
           </div></li>`
           ); //Add field html
       }
   });

   $(document).on('click', '.remove_button', function(e){
       e.preventDefault();
       const user_id = $(this).closest('.user_profile_wrapper').find('.countDeletedFields').attr('ref-id');
       $('#countDeletedFields_' + user_id ).val( parseInt($('#countDeletedFields_' + user_id).val())+1 )
       $('#fieldsCountDeletedFields').val( parseInt($('#fieldsCountDeletedFields').val())+1 )

       // const that = $(this);
       console.log($(this).closest('li'))
       const that = $(this).closest('ul').find('li')
       $(this).closest('li').remove(); //Remove field html
       sortCustomLinks(that)
       // console.log($(this).parent().parent().parent().parent().find('li'))

       x--;
   });
});

function makeid(length) {
   var result           = '';
   var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
   var charactersLength = characters.length;
   for ( var i = 0; i < length; i++ ) {
      result += characters.charAt(Math.floor(Math.random() * charactersLength));
   }
   return result;
}