$(function () {
/*Select2 Dropdown*/
 //function to initialize select2 multiple
 function initializeSelect2(selectElementObj) {
    selectElementObj.select2({
    maximumSelectionLength : 4,
    placeholder: "Modifiers",
    allowClear: true,
    width: '100%',
    dropdownCssClass: 'select2-simple_select_dropdown'
    });
}
     //onload: call select2 modifiers list
     $(".js-example-basic-multiple").each(function() {
        initializeSelect2($(this));

      });

/*Append New Input fields */
var index = 1;
var numRows = $(".field_wrapper").find(".row.select-container").length;
if(numRows == 1)
{
$('.select-container .removeField').hide();
$(".field_wrapper .select-container:first-child .cptcode").addClass("inc");
index = numRows;
console.log(index);
}
else if (numRows >= 2 || numRows <= 15)
{
$('.select-container:first-child .removeField').show();
$('.select-container .removeField').show();
$(".field_wrapper .select-container .cptcode").removeClass("inc");
$(".field_wrapper .select-container:last-child .cptcode").addClass("inc");
$('.select-container:last-child .removeField').hide();
index = numRows;
console.log(index);
}
$(document).on("focusout",".form_label .inc",function() {

    //var modifierData = null
    var val = $(this).val();
    if(val.length != 0 && index <= 15)
    {
        $(this).removeClass('inc');
        $(this).removeClass("append_field");
        $.ajax({
            url: `${window.baseUrl}/user/modifier-list`,
            type: "GET",
            success: function(data){
                var newSelect = $("<select name='singleReport["+index+"][modifiers][]' class='js-example-basic-multiple select2-hidden-accessible select2-simple_select-with-search' multiple>"+data+"</select>");
                var options = $('.hidden-options option').clone();
                $(newSelect).append(options);
                //var newRow = $("<div class='row select-container'> <div class='col-6 col-sm-3 col-md-3'> <div class='form_label mb-3'> <label class='d-block d-sm-none'>Procedure Code <span class='text-red fs_12'>*</span></label> <input type='text' class='form-control inc cptcode text-uppercase append_field' name='singleReport["+index+"][cptcode]' placeholder='CPT code' value='' pattern='[a-zA-Z0-9]{1,5}'' maxLength='5'/> <div class='invalid-feedback'>Select procedure code</div> </div> </div> <div class='col-6 col-sm-3 col-md-3'> <div class='form_label mb-3'> <label class='d-block d-sm-none'>Modifiers <span class='text-red fs_12'></span></label> <div class='mb-3 mod_selector'></div> </div> </div> <div class='col-6 col-sm-3 col-md-3'> <div class='form_label mb-3'> <label class='d-block d-sm-none'>Units <span class='text-red fs_12'>*</span></label> <input type='text' class='form-control units' name='singleReport["+index+"][units]' placeholder='1' value='1' maxLength='3' required/> <div class='invalid-feedback'>Select unit</div> </div> </div> <div class='col-6 col-sm-3 col-md-3'> <div class='form_label mb-3'> <label class='d-block d-sm-none'>Charges <span class='text-red fs_12'></span></label> <div class='last_field'> <input type='text' class='form-control charges' name='singleReport["+index+"][payment_total]' placeholder='0.00'  value='0' maxLength='5' /> <div class='removeField'><a href='javascript:void(0);' class='remove_button'><i class='fa fa-remove' aria-hidden='true'></i></a></div> </div> </div> </div> </div>");
                var newRow = $("<div class='row select-container'><div class='col-6 col-sm-3 col-md-3'><div class='form_label mb-3 input-parent input-parent-cpt'><label class='d-block d-sm-none'>Procedure Code <span class='text-red fs_12'>*</span></label> <input type='text' class='form-control inc cptcode text-uppercase append_field form-input' name='singleReport["+index+"][cptcode]' placeholder='CPT code' value='' pattern='[a-zA-Z0-9]{1,5}'' maxLength='5'/> <div class='invalid-feedback'>Select procedure code</div></div></div><div class='col-6 col-sm-3 col-md-3'><div class='form_label mb-3 input-parent input-parent-cpt'> <label class='d-block d-sm-none'>Modifiers <span class='text-red fs_12'></span></label> <div class='mb-3 mod_selector select2-simple_select_div select2-modifiers'></div> </div></div><div class='col-6 col-sm-3 col-md-3'><div class='form_label mb-3 input-parent input-parent-unit'> <label class='d-block d-sm-none'>Units <span class='text-red fs_12'>*</span></label> <input type='text' class='form-control units form-input' name='singleReport["+index+"][units]' placeholder='1' value='1' maxLength='3' required/> <div class='invalid-feedback'>Select unit</div> </div></div> <div class='col-6 col-sm-3 col-md-3'><div class='form_label mb-3 input-parent input-parent-charges'> <label class='d-block d-sm-none'>Charges <span class='text-red fs_12'></span></label> <div class='last_field'> <input type='text' class='form-control charges form-input' name='singleReport["+index+"][payment_total]' placeholder='0.00'  value='0' maxLength='5' /> <div class='removeField'><a href='javascript:void(0);' class='remove_button'><i class='fa fa-remove' aria-hidden='true'></i></a></div> </div> </div></div> </div>");
                $(newRow).appendTo(".field_wrapper");
                $(newSelect).appendTo(".mod_selector");
                initializeSelect2(newSelect);
                index++;
                $('.cptcode').mask('AAAAA');
                // $('.charges').mask("###.##", {reverse: false});
                $('.units').mask('000', {reverse: true});
                $('.select-container .removeField').show();
                $('.select-container:last-child .removeField').hide();
            }
        });

    }
});

//Once remove button is clicked
$('.field_wrapper').on('click', '.remove_button', function(e){
    e.preventDefault();
    $(this).parent().parent().parent().parent().parent().remove(); //Remove row
    index--; //Decrement field counter

   $(".field_wrapper .select-container:last-child .append_field").addClass("inc");
console.log(index);
 if(index <= 1)
{
$(".cptcode").addClass("inc");
$(".cptcode.append_field").attr('required', true);
}
});
/*End Append New Input fields*/

});
