
<div class="row mb-3">
    <div class="col-sm-12">
        <div id="rules-container"></div>
        <button type="button" class="btn btn-sm btn-primary text-white mt-3" id="btn-add-rule">
            <i class="fa fa-plus"></i> Add Rule
        </button>
    </div>
</div>

<script>
    let empty_rule = {
        "rule_id" : "",
        "rating_label" : "",
        "question_family" : "",
        "question_level" : "",
        "comparator" : "",
        "threshold" : "",
        "concerned_answer" : "",
        "removed" : false,
    };

    var rules_data = JSON.parse('{{str_replace('\"', '',json_encode($ratingRulesDetails))}}'.replace(/&quot;/g,'"'));

    function buildRulesView(){
        let innerContent = '';
        for (let i=0; i<rules_data.length; i++){
            let e = rules_data [i];
            if (!e['removed']) {
                innerContent += '<div class="rule-form">'+rulesFrom(e, i)+'</div>';
            }
        }

        $('#rules-container').html(innerContent);
    }

    $(document).on('click','#btn-add-rule',function (e) {
        rules_data.push({ ...empty_rule });
        buildRulesView();
    });

    $(document).on('click','.btn-delete-item',function (e) {
        let index = $(this).data('index');
        rules_data[index]['removed'] =  true;
        buildRulesView();
    });

    $(document).on('change','.rule-form .form-control',function (e) {
        let index = $(this).data('index');
        let target = $(this).data('target');
        rules_data[index][target] = $(this).val();
    })

    function rulesFrom(rule, index){
        let rating_label_input = '<select required class="form-control mb-2 rating-label" data-target="rating_label" data-index="'+index+'" ><option value="">*Choose</option>';
            @foreach($ratingLabels as $t)
                var selected = rule['rating_label'] == {{$t->id}}? 'selected' : '';
                rating_label_input +='<option '+selected+' data-color="{{$t->color}}" value="{{$t->id}}">{{$t->label}}</option>';
            @endforeach
        rating_label_input += '</select>';

        let question_family_input = '<select class="form-control mb-2 question-family" data-target="question_family" data-index="'+index+'" ><option value="">*Choose</option>';
            @foreach($questionFamilies as $t)
                var selected = rule['question_family'] == {{$t->id}}? 'selected' : '';
                question_family_input +='<option '+selected+' data-name="{{$t->code}}" value="{{$t->id}}">{{$t->label}}</option>';
            @endforeach
        question_family_input += '</select>';

        let question_level_input = '<select class="form-control mb-2 question-level" data-target="question_level" data-index="'+index+'" ><option value="">*Choose</option>';
            @foreach($questionLevels as $t)
                var selected = rule['question_level'] == {{$t->id}}? 'selected' : '';
                question_level_input +='<option '+selected+' data-name="{{$t->sequence}}" value="{{$t->id}}">{{$t->name}}</option>';
            @endforeach
        question_level_input += '</select>';

        let concerned_answer_input = '<select required class="form-control mb-2 concerned-answer" data-target="concerned_answer" data-index="'+index+'" ><option value="">*Choose</option>';
            @foreach($concernedAnswers as $t)
                var selected = rule['concerned_answer'] == '{{$t}}' ? 'selected' : '';
                concerned_answer_input +='<option '+selected+' data-name="{{$t}}" value="{{$t}}">{{$t}}</option>';
            @endforeach
        concerned_answer_input += '</select>';

        let comparator_input = '<select required class="form-control mb-2 comparator" data-target="comparator" data-index="'+index+'"  ><option value="">*Choose</option>';
            @foreach($comparators as $t)
                var selected = rule['comparator'] == '{{$t}}' ? 'selected' : '';
                comparator_input +='<option '+selected+' data-name="{{$t}}" value="{{$t}}">{{$t}}</option>';
            @endforeach
        comparator_input += '</select>';


        let html = '<div class="row">';
        html += '<div class="col-sm-12 mb-2"><h4 class="float-left">Rule '+(index+1)+'</h4> <button  data-index="'+index+'" class="float-right btn-delete-item text-black btn-danger btn btn-sm mr-2" style="">Remove</button></div>';

        @if($ratingType=='RATING')
            html += '<div class="col-sm-4"><label>Question family</label> '+question_family_input+'</div>';
            html += '<div class="col-sm-4"><label>Question level</label> '+question_level_input+'</div>';
        @endif
        html += '<div class="col-sm-4"><label>Concerned answers<span style="color: red">*</span></label> '+concerned_answer_input+'</div>';
        html += '<div class="col-sm-4"><label>Comparator<span style="color: red">*</span></label> '+comparator_input+'</div>';
        html += '<div class="col-sm-4"><label>Threshold {{$ratingType=='SCORING'? '(%)' : ''}}<span style="color: red">*</span></label> <input data-target="threshold" step="any" required class="form-control threshold mb-2" value="'+rule['threshold']+'" placeholder="Threshold" data-index="'+index+'" type="number" /></div>';
        html += '<div class="col-sm-4"><label>Rating label<span style="color: red">*</span></label> '+rating_label_input+'</div>';

        html += '</div>';

        return html;
    }

    buildRulesView();
</script>
