@extends('admin.layouts.app')
@section('content')


<script>

function validateTabForm() {
    var str = document.getElementById("newtabname").value;
    if (str && str.trim().length) {
        $( "#divtab" ).hide();
        $( "#tabaddfrmaddedit" ).submit();
        return true;
    }
    $( "#divtab" ).show();
    return false;
}

function showhideTrgAnswer(tabid = 0) {
        if (tabid > 0) {
            $( ".trigger_answer_cls" ).hide();
            var is_triggered = $("#trigger_question"+tabid+" :selected").val();
            if (is_triggered) {
                $( "#addquestionModal"+tabid+" #add_trigger_answer_"+tabid+"_"+is_triggered ).show();
            }
        }
    }


    function showhideEditTrgAnswer(tabid = 0) {
        if (tabid > 0) {
            $( ".trigger_answer_edit_cls" ).hide();
            var e = document.getElementById("Edit_trigger_question"+tabid);
            var value = e.options[e.selectedIndex].value;
            var is_triggered = $("#Edit_trigger_question"+tabid+" :selected").val();
            if (is_triggered) {
                $( "#edit_trigger_answer"+tabid+is_triggered ).show();
            }
        }
    }

    function showhideTrgQst(tabid = 0) {
        if (tabid > 0) {
            $( "#div_TrgQst"+tabid ).hide();
            var is_triggered = document.getElementById("is_triggered"+tabid).checked;
            if (is_triggered) {
                $( "#div_TrgQst"+tabid ).show();
            }
        }
    }

    function showhideEditTrgQst(tabid = 0) {
        if (tabid > 0) {
            $( "#div_EditTrgQst"+tabid ).hide();
            var is_triggered = document.getElementById("is_triggeredEdit"+tabid).checked;
            if (is_triggered) {
                $( "#div_EditTrgQst"+tabid ).show();
            }
        }
    }
    function validateQuestionForm(tabid = 0) {
    if (tabid > 0) {
        var isheading = false;
        var isqst = false;
        var str = document.getElementById("addheading"+tabid).value;
        if (str && str.trim().length) {
            $( "#divheading"+tabid ).hide();
            isheading = true;
        } else {
            var isheading = false;
            $( "#divheading"+tabid ).show();
        }

        var addquestion_text = document.getElementById("addquestion_text"+tabid).value;
        if (addquestion_text && addquestion_text.trim().length) {
            $( "#divqst"+tabid ).hide();
            isqst = true;
        } else {
            isqst = false;
            $( "#divqst"+tabid ).show();
        }
        var is_triggered = document.getElementById("is_triggered"+tabid).checked;
        if (is_triggered) {
            istrgqst = false;
            var e = document.getElementById("trigger_question"+tabid);
            if (e.value > 0) {
                istrgqst = true;
                $( "#divtrgqst"+tabid ).hide();
            } else {
                istrgqst = false;
                $( "#divtrgqst"+tabid ).show();
            }
        } else {
            var istrgqst = true;
            $( "#divtrgqst"+tabid ).hide();
        }
        if ( isheading == true && isqst == true  && istrgqst == true ) {
            $( "#addqstfrmaddedit"+tabid ).submit();
        }
    }
    return false;
}
function validateEditQuestionForm(tabid = 0) {
    if (tabid > 0) {
        var isheading = false;
        var isqst = false;
        var str = document.getElementById("editheading"+tabid).value;
        if (str && str.trim().length) {
            $( "#diveditheading"+tabid ).hide();
            isheading = true;
        } else {
            var isheading = false;
            $( "#diveditheading"+tabid ).show();
        }

        var addquestion_text = document.getElementById("editquestion_text"+tabid).value;
        if (addquestion_text && addquestion_text.trim().length) {
            $( "#diveditquestion_textt"+tabid ).hide();
            isqst = true;
        } else {
            isqst = false;
            $( "#diveditquestion_text"+tabid ).show();
        }
        var is_triggered = document.getElementById("is_triggeredEdit"+tabid).checked;
        if (is_triggered) {
            istrgqst = false;
            var e = document.getElementById("Edit_trigger_question"+tabid);
            if (e.value > 0) {
                istrgqst = true;
                $( "#divEdittrgqst"+tabid ).hide();
            } else {
                istrgqst = false;
                $( "#divEdittrgqst"+tabid ).show();
            }
        } else {
            var istrgqst = true;
            $( "#divEdittrgqst"+tabid ).hide();
        }
        if ( isheading == true && isqst == true  && istrgqst == true ) {
            $( "#editqstfrmaddedit"+tabid ).submit();
        }
    }
    return false;
}
function changeOption(val = '',id=0,isedit = '') {
    $( "#Yes_or_No"+isedit+id ).hide();
    $( "#Multiple_Choice_Select"+isedit+id ).hide();
    if ( 'Multiple_Choice' == val || 'Multiple_Select' == val ) {
        $( "#Multiple_Choice_Select"+isedit+id ).show();
    }
    if ( 'True_or_False' == val || 'Yes_or_No' == val ) {
        $( "#Yes_or_No"+isedit+id).show();
    }
}

function addTriggeredQuestion(qid=0 , option='') {
    chkname = 'question_triggered_'+qid+'_'+option;
    var val = [];
    var val = $("input[name='"+chkname+"']:checked").map(function() {
        return this.value;
    }).get();
    var question_trigger_url = $( "#question_trigger_url").val();
    var csrf_token = "{{ csrf_token() }}";
    $.ajax({
        type: 'POST',
        url: question_trigger_url,
        data: {
            'val': val,
            'qid': qid,
            'option': option
        },
        beforeSend: function(xhr) {
            xhr.setRequestHeader('X-CSRF-Token', csrf_token);
        },
        success: function(response) {
            $(".ajax_message").removeClass("d-none");
            $(".ajax_message").find('span').addClass('successmessage').addClass('text-success').html(response.success);
            setTimeout(function() {
                $(".ajax_message").find('span').html('');
            }, message_display_time);
        },
    });

}

function addMcqMsqOption(id=0) {
    var IMG = $('#hid_input_delete').val();
    var count = $("#CntMcqMsqOption"+id).val();
    var cnt = parseInt(count) + 1;
    var mcdiv = 'mcdiv'+cnt;
    var cc = 'CntMcqMsqOption'+id;
    var html = '<div id="'+mcdiv+'" class="choice_box mb-3"><label for="">';
    html += 'Choice '+ cnt;
    html += '</label>';
    html += '<div class="input-group">';
    html += '<input type="text" class="form-control" value="Choice '+cnt+'" id="mctext'+cnt+'" name="mctext[]" placeholder="Choice '+cnt+'" aria-label="Choice '+cnt+'" aria-describedby="button-addon2">';
    html += '<div class="input-group-append">';
    html += '<a href="" onclick="return removeMcqMsqOption(\''+mcdiv+'\',\''+cc+'\');">';
    html += '<img src="'+IMG+'" alt="" >';
    html += '</a>';
    html += '</div>';
    html += '</div>';
    html += '</div>';
    $("#Multiple_Choice_Select"+id).append(html);
    $("#CntMcqMsqOption"+id).val(cnt);
    return false;
}

function EditMcqMsqOption(id=0) {
    var IMG = $('#hid_input_delete').val();
    var count = $("#EditCntMcqMsqOption"+id).val();
    var cnt = parseInt(count) + 1;
    var mcdiv = 'editmcdiv'+cnt;
    var cc = 'EditCntMcqMsqOption'+id;
    var html = '<div id="'+mcdiv+'" class="choice_box mb-3"><label for="">';
    html += 'Choice '+ cnt;
    html += '</label>';
    html += '<div class="input-group">';
    html += '<input type="text" class="form-control" value="Choice '+cnt+'" id="mctext'+cnt+'" name="mctext[]" placeholder="Choice '+cnt+'" aria-label="Choice '+cnt+'" aria-describedby="button-addon2">';
    html += '<div class="input-group-append">';
    html += '<a href="" onclick="return removeMcqMsqOption(\''+mcdiv+'\',\''+cc+'\');">';
    html += '<img src="'+IMG+'" alt="" >';
    html += '</a>';
    html += '</div>';
    html += '</div>';
    html += '</div>';
    $("#Multiple_Choice_Selectedit"+id).append(html);
    $("#EditCntMcqMsqOption"+id).val(cnt);
    return false;
}

function removeMcqMsqOption(id,ccid) {
    var count = $("#"+ccid).val();
    if ( count > 2 ) {
        $('#'+id).remove();
        var cnt = parseInt(count) - 1;
        $("#"+ccid).val(cnt);
    }
    return false;
}

</script>



<input type="hidden" id="tab_sort_url" name="tab_sort_url" value="{{ route('tab.sort') }}">
<input type="hidden" id="question_sort_url" name="question_sort_url" value="{{ route('question.sort') }}">
<input type="hidden" id="question_trigger_url" name="question_trigger_url" value="{{ route('question.trigger') }}">
<input type="hidden" name="hid_input_delete" id="hid_input_delete" value="{{ asset('assets/admin/images/input-delete.svg') }}">

<h1 class="page-title">
        <center>{{($organization->name)}}</center>
    </h1>
<div class="row mx-0 mb-3">

    <div class="col-6 my-3">
        <h1 class="page-title">
            Create Questionnaire Form
        </h1>
    </div>
    <div class="top-btn-box col-6 my-3">
    <div class="top-btn-box d-flex justify-content-end align-items-center h-100">
            @if (count($tabs) != 0)
            <a tabindex="1" href="{{  route('question.setting',['organization_id' => $organization_id])  }}" class="btn  btn-primary addnew-btn mr-2">
                <i class="icon-addnew top-icon"></i>
                <span class="btn-title">Report Settings</span>
            </a>
            @endif
            <a tabindex="2" href="" class="btn  btn-primary addnew-btn" data-toggle="modal" data-target="#addTabModel">
                <i class="icon-addnew top-icon"></i>
                <span class="btn-title">Add Tab</span>
            </a>
            @if ( 3 == Auth::user()->user_type_id )
            <a class="btn btn-primary addnew-btn ml-3" href="{{ route('dashboards') }}">Back</a>
            @else
            <a class="btn btn-primary addnew-btn ml-3" href="{{ route('organization.index') }}">Back</a>
            @endif
        </div>
    </div>





    <div class="col-xl-8 mx-auto tab_accordion">
        <div class="accordion" id="accordionExample">
        @foreach ($tabs as $key => $tab)
        <div class="dropclass card border rounded-0 mb-3 ui-sortable-handle" rel="display_order_{{ $tab->id }}">
            <div class="card-header p-0 bg-white" id="headingOne{{ $tab->id }}">
                <h5 class="mb-0 d-flex align-items-center">
                    <span class="tabdragicon drag-icon " id="display_order_{{ $tab->id }}">
                        <img src="{{ asset('assets/admin/images/tab-drag.svg') }}" alt="" >
                    </span>
                    <a class="btn pl-0 pr-3 py-2 text-left flex-grow-1 d-flex align-items-center" href="javacript:void(0);" data-toggle="collapse" data-target="#collapseOne{{ $tab->id }}" aria-expanded="true" aria-controls="collapseOne{{ $tab->id }}">
                    {{ $tab->tabname }}
                    </a>
                    <div class="edit_dlt_buttons d-flex flex-row">
                            <div class="btn-group">
                                <a href="" class="btn dropdown-toggle bt-transparant border-0 p-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <img src="{{ asset('assets/admin/images/tab-toggle.svg') }}" alt="" >
                                    <div class="dropdown-menu dropdown-menu-right">
                                        <a href="" data-toggle="modal" data-target="#editTabModel{{ $tab->id }}">
                                            <img src="{{ asset('assets/admin/images/tab-edit.svg') }}" alt="" >
                                        </a>
                                        <a href="{{  route('tab.delete',['id' => $tab->id,'organization_id' => $organization_id])  }}">
                                            <img src="{{ asset('assets/admin/images/tab-delete.svg') }}" alt="" >
                                        </a>
                                    </div>
                                </a>
                            </div>
                        </div>
                    <!-- <div class="edit_dlt_buttons d-flex flex-row">
                        <a href="" data-toggle="modal" data-target="#exampleModal">
                            <img src="{{ asset('assets/admin/images/tab-edit.svg') }}" alt="" >
                        </a>
                        <a href="">
                            <img src="{{ asset('assets/admin/images/tab-delete.svg') }}" alt="" >
                        </a>
                    </div> -->
                </h5>
            </div>
            <div id="collapseOne{{ $tab->id }}" class="collapse {{ ($key == 0) ? 'show' : ''}}" aria-labelledby="headingOne">
                <div class="card-body">
                    <h5 class="card-title d-inline-block w-100">Add Question
                        <a class="btn btn-primary btn-sm float-right" href="" data-toggle="modal" data-target="#addquestionModal{{ $tab->id }}">
                            <i class="icon-addnew top-icon"></i>
                            Add
                        </a>
                    </h5>
                    <div class="question_accordion">
                    <div class="accordion" id="tabQuestions{{ $tab->id }}">
                    @if (isset($tab->tabQuestion))
                    @foreach ($tab->tabQuestion as $qkey => $question)
                            <div class="dropclass card border rounded-0 mb-3">
                                <div class="card-header p-0 background-light" id="questionsOne">
                                    <h5 class="mb-0 d-flex align-items-center">
                                        <span id="question_order_{{ $question->id }}" class="tabQuestionsdrag{{ $tab->id }} drag-icon">
                                            <img src="{{ asset('assets/admin/images/tab-drag.svg') }}" alt="" >
                                        </span>
                                        <a class="btn pl-0 pr-3 py-2 text-left flex-grow-1 d-flex align-items-center" href="javacript:void(0);" data-toggle="collapse" data-target="#answerOne_{{ $question->id }}" aria-expanded="true" aria-controls="answerOne_{{ $question->id }}">
                                            {{ $question->heading }}
                                        </a>
                                        <div class="edit_dlt_buttons d-flex flex-row">
                                            <div class="btn-group">
                                                <a href="javascript::void(0)" class="btn dropdown-toggle bt-transparant border-0 p-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <img src="{{ asset('assets/admin/images/tab-toggle.svg') }}" alt="" ></a>
                                                    <div class="dropdown-menu dropdown-menu-right">
                                                        <a href="javascript::void(0)" data-toggle="modal" data-target="#questionModal_{{ $question->id }}">
                                                            <img src="{{ asset('assets/admin/images/tab-edit.svg') }}" alt="" >
                                                        </a>
                                                        <a href="{{  route('question.delete',['id' => $question->id,'organization_id' => $organization_id])  }}">
                                                            <img src="{{ asset('assets/admin/images/tab-delete.svg') }}" alt="" >
                                                        </a>
                                                    </div>

                                            </div>
                                        </div>
                                    </h5>
                                </div>

                                <div id="answerOne_{{ $question->id }}" class="collapse" aria-labelledby="questions"><!--show-->
                                    <div class="card-body">
                                        <!-- True False option -->
                                        <p>{{ $question->question_text }}
                                        </p>
                                        @if( 'True_or_False' == $question->question_type || 'Yes_or_No' == $question->question_type )
                                        @php
                                        $arr_option = explode(",", $question->question_option);
                                        @endphp

                                        @foreach ( $arr_option as $option )
                                        <div class="custom-control custom-radio">
                                        <input type="radio" id="radiotrue" name="customRadio" class="custom-control-input" disabled="">
                                        <label class="custom-control-label col-2" for="true">{{$option}} </label>



                                        </div>

                                        @endforeach

                                        @endif
                                        @if( 'Multiple_Choice' == $question->question_type || 'Multiple_Select' == $question->question_type )
                                        @php
                                        $arr_choice = explode(",", $question->question_option);
                                        @endphp
                                        <div class="col-md-6">
                                        <div class="row">
                                        <select id="chk" name="chk" class="form-control">
                                            <option value="">Select</option>
                                        @foreach ( $arr_choice as $option )
                                            <option value="{{ $option }}">{{ $option }}</option>
                                        @endforeach
                                        </select>
                                        </div>
                                        </div>
                                        @endif
                                        @if( 'Date' == $question->question_type || 'Number' == $question->question_type || 'Short_Answer' == $question->question_type)
                                        <div class="free-text mb-3">
                                            <div class="input-group">
                                            <input type="text" class="form-control" name="{{$question->question_type}}" id="{{$question->question_type}}" value="">
                                                <div class="input-group-append">
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                        @if( 'Free_Text' == $question->question_type )
                                        <div class="free-text mb-3">
                                            <div class="input-group">
                                                <textarea class="form-control" cols="30" rows="4"></textarea>
                                                <div class="input-group-append">
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                        @if( $question->is_triggered )
                                        <p class="mb-0 mt-2">This is triggered question.</p>
                                        @endif

                                    </div>
                                </div>
                            


<!-- START: Edit question Popup -->
<div class="modal fade" id="questionModal_{{ $question->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Edit Question </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form method="post" action="{{  route('question.update',$question->id)  }}" name="frmaddedit" id="editqstfrmaddedit{{ $question->id  }}">
            @csrf
            @method('PUT')
            <input type="hidden" id="organization_id" name="organization_id" value="{{ $organization_id  }}">
            <input type="hidden" id="tab_id" name="tab_id" value="{{ $tab->id  }}">
            <input type="hidden" id="question_id" name="question_id" value="{{ $question->id  }}">

            <div class="form-group">
                <label for="tabname">Title
                <span class="text-danger">*</span>
                </label>
                <input type="text" class="form-control" id="editheading{{ $question->id  }}" name="heading" value="{{ $question->heading  }}" aria-describedby="tabname">
                <div  id="diveditheading{{ $question->id  }}" class="errormessage hide">The Title field is required.</div>
            </div>

            <div class="form-group">
                <label for="tabname">Question
                <span class="text-danger">*</span>
                </label>
                <textarea class="form-control" id="editquestion_text{{ $question->id }}" name="question_text" maxlength="500" style="resize:none;" cols="30" rows="2">{{ $question->question_text  }}</textarea>

                <div id="diveditquestion_text{{ $question->id }}" class="errormessage hide">The Free Question field is required.</div>
            </div>

            <div class="form-group">
                <label for="tabname">Question Type
                <span class="text-danger">*</span>
                </label>
                @php
                $selectedFree_Text = ( 'Free_Text' == $question->question_type ) ? 'selected="selected"' : '';
                $selectedDate = ( 'Date' == $question->question_type ) ? 'selected="selected"' : '';
                $selectedNumber = ( 'Number' == $question->question_type ) ? 'selected="selected"' : '';
                $selectedShort_Answer = ( 'Short_Answer' == $question->question_type ) ? 'selected="selected"' : '';
                $selectedTrue_or_False = ( 'True_or_False' == $question->question_type ) ? 'selected="selected"' : '';
                $selectedYes_or_No = ( 'Yes_or_No' == $question->question_type ) ? 'selected="selected"' : '';
                $selectedMultiple_Choice = ( 'Multiple_Choice' == $question->question_type ) ? 'selected="selected"' : '';
                $selectedMultiple_Select = ( 'Multiple_Select' == $question->question_type ) ? 'selected="selected"' : '';
                @endphp
                <select onchange="changeOption(this.value,{{ $question->id  }},'edit');" id="question_type_edit{{ $question->id  }}"  name="question_type_edit" class="form-control form-control" id="question_type_edit{{ $question->id  }}">
                    <option @php echo $selectedFree_Text @endphp value="Free_Text">Free Text</option>
                    <option @php echo $selectedShort_Answer @endphp value="Short_Answer">Short Answer</option>
                    <option @php echo $selectedDate @endphp value="Date">Date</option>
                    <option @php echo $selectedNumber @endphp value="Number">Number</option>
                    <option @php echo $selectedTrue_or_False @endphp value="True_or_False">True or False</option>
                    <option @php echo $selectedYes_or_No @endphp value="Yes_or_No">Yes or No</option>
                    <option @php echo $selectedMultiple_Choice @endphp value="Multiple_Choice">Multiple Choice</option>
                    <option @php echo $selectedMultiple_Select @endphp value="Multiple_Select">Multiple Select</option>
                </select>
            </div>

            <!-- START: values : YES or NO and True or False-->
            @php
                $rval1 = '';
                $rval2 = '';
                $showidv = "display:none;";
                if( 'True_or_False' == $question->question_type || 'Yes_or_No' == $question->question_type ) {
                    $rval1 = (isset($arr_option[0])) ? $arr_option[0] : '';
                    $rval2 = (isset($arr_option[1])) ? $arr_option[1] : '';
                    $showidv = '';
                }
            @endphp
            <div id="Yes_or_Noedit{{ $question->id  }}" class="Yes_or_Noedit{{ $question->id  }} row"  style='{{$showidv}}'>
            <div class="form-group col-lg-6">
                    <label>Enter Yes Value</label>
                    <input type="text" class="form-control" value="{{$rval1}}" id="radiotext1{{ $question->id  }}" name="radiotext[]">
                </div>
                <div class="form-group col-lg-6">
                    <label>Enter No Value</label>
                    <input type="text" class="form-control" value="{{$rval2}}" id="radiotext2{{ $question->id  }}" name="radiotext[]">
                </div>
            </div>

            <!-- END: values : YES or NO and True or False-->

            <!-- START: Multiple choice -->
            @php
                $showchoice = "display:none;";
                if( 'Multiple_Choice' == $question->question_type || 'Multiple_Select' == $question->question_type ) {
                    $showchoice = "";
                }
                $i = 1;
                $arr_choice = explode(",", $question->question_option);

            @endphp
            <div id="Multiple_Choice_Selectedit{{ $question->id  }}" class="Multiple_Choice_Selectedit{{ $question->id  }} choice_box mb-3" style='{{$showchoice}}'>
            @foreach ( $arr_choice as $option )
            <div id="editmcdiv{{$i}}{{ $question->id  }}" class="choice_box mb-3">
                <label for="">
                    Choice {{$i}}
                </label>
                <div class="input-group">
                <input type="text" class="form-control" value="{{$option}}" id="mctext{{$i}}{{ $question->id  }}" name="mctext[]" placeholder="Choice {{$i}}" aria-label="Choice {{$i}}" aria-describedby="button-addon2">
                <div class="input-group-append">
                        <a href=""  onclick="return removeMcqMsqOption('editmcdiv{{$i}}{{ $question->id  }}','EditCntMcqMsqOption{{ $question->id  }}');">
                            <img src="{{ asset('assets/admin/images/input-delete.svg') }}" alt="" >
                        </a>
                    </div>
                </div>
            </div>
            @php
            $i++;
            @endphp
            @endforeach

            </div>
            <!-- END: Multiple choice -->

            <!-- Start: Trigger Question -->
            <div class="">
            <input type="hidden" name="EditCntMcqMsqOption{{ $question->id }}" id="EditCntMcqMsqOption{{ $question->id }}" value="{{$i - 1}}">
            <a class="btn btn-primary btn-sm float-right" href="" onclick="return EditMcqMsqOption({{ $question->id }});">
                <i class="icon-addnew top-icon"></i>
                Add
            </a>
                @php
                $chkchecked = ($question->is_triggered) ? "checked" : "";
                $div_hide = ($question->is_triggered) ? "" : "hide";
                @endphp
                <input type="checkbox" {{$chkchecked}} onClick="showhideEditTrgQst({{ $question->id }});" class="" id="is_triggeredEdit{{ $question->id }}" name="is_triggered">
                <label class="" for="is_triggered">This is triggered Question</label>
            </div>
            <div id="div_EditTrgQst{{ $question->id }}" class="{{$div_hide}}">
                <div class="form-group">
                <label for="tabname">Trigger Question
                <span class="text-danger">*</span>
                </label>
                <select name="trigger_question" onchange="showhideEditTrgAnswer({{ $question->id }})" class="form-control" id="Edit_trigger_question{{ $question->id }}">
                <option value="0">Select Trigger Question</option>
                @if( count($triggered_question) > 0)
                    @foreach ( $triggered_question as $tkey => $Tval )
                        @if ($question->id != $Tval->id)
                        @php
                            $selectedvalue = '';
                            if (isset($tab_trgquestion) && isset($tab_trgquestion[$question->id]) && isset($tab_trgquestion[$question->id][$Tval->id])) {
                                $selectedvalue = ($Tval->id == $tab_trgquestion[$question->id][$Tval->id]) ? "selected=\"selected\"" : '';
                            }
                        @endphp
                        <option {!! $selectedvalue !!} value="{{ $Tval->id  }}">{{ $Tval->heading  }}</option>
                        @endif
                    @endforeach

                @endif
                </select>
                <div id="divEdittrgqst{{ $question->id }}" class="errormessage hide">The Trigger Question field is required.</div>

            </div>

            <div class="form-group">
                <label for="tabname">Trigger Answer
                <span class="text-danger">*</span>
                </label>
                @if( count($triggered_question) > 0)

                    @foreach ( $triggered_question as $tkey => $Tval )
                        @if( 'Free_Text' != $Tval->question_type && 'Short_Answer' != $Tval->question_type )
                            @if ($question->id != $Tval->id)
                            @php
                                $selectedvalue = '';
                                $showhide = 'hide';
                                if (isset($tab_trgquestion) && isset($tab_trgquestion[$question->id]) && isset($tab_trgquestion[$question->id][$Tval->id])) {
                                    $showhide = ($Tval->id == $tab_trgquestion[$question->id][$Tval->id]) ? '' : 'hide';
                                }
                                if (isset($tab_trganswer) && isset($tab_trganswer[$question->id]) && isset($tab_trganswer[$question->id][$Tval->id])) {
                                    $selectedvalue = $tab_trganswer[$question->id][$Tval->id];
                                }
                            @endphp
                                @if( 'Date' == $Tval->question_type || 'Number' == $Tval->question_type )
                                @php
                                $hasDatepicker = ( 'Date' == $Tval->question_type ) ? 'form_date' : '';
                                @endphp
                                <input type="text" class="form-control {{$showhide}} trigger_answer_edit_cls {{$hasDatepicker}}" name="trigger_edit_answer{{ $Tval->id  }}" id="edit_trigger_answer{{ $question->id }}{{ $Tval->id  }}" value="{{$selectedvalue}}">
                                @else
                                <select multiple name="trigger_edit_answer{{ $Tval->id  }}[]" class="form-control {{$showhide}} trigger_answer_edit_cls" id="edit_trigger_answer{{ $question->id }}{{ $Tval->id }}">
                                @php
                                $opArr = array();
                                if (strstr($Tval->question_option,',')) {
                                    $opArr = explode(',',$Tval->question_option);
                                }
                                $selop =  '';
                                @endphp
                                @if(is_array($opArr) && !empty($opArr))
                                @foreach($opArr as $opval)
                                @php
                                if ( strpos( $selectedvalue , ',' ) ) {
                                    $tmparr = explode(',' , $selectedvalue);
                                    $selop = (in_array( $opval, $tmparr)) ? "selected=\"selected\"" : '';
                                } else {
                                    $selop = ($opval == $selectedvalue) ? "selected=\"selected\"" : '';
                                }
                                @endphp
                                    <option {{$selop}} value="{{ $opval  }}">{{ $opval  }}</option>
                                @endforeach
                                @endif
                                </select>
                                @endif
                            @endif
                        @endif
                    @endforeach
                @endif
            </div>
            </div>
             <!-- End: Trigger Question -->

            <button type="button" onclick="return validateEditQuestionForm({{ $question->id }})" class="btn btn-primary">Save</button>

        </form>
      </div>
    </div>
  </div>
</div>
<!-- END: Edit question Popup -->
</div> <!-- div class="card border rounded-0 mb-3" ends here -->
                    @endforeach
                    @endif



                            </div>
                    </div>

                </div>
            </div>
       

     <!-- start: Edit tab Popup -->

        <div class="modal fade" id="editTabModel{{ $tab->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Edit Tab</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="post" action="{{  route('tab.update',$tab->id)  }}" name="frmaddedit" id="frmaddedit">
                @csrf
                @method('PUT')
                <input type="hidden" id="organization_id" name="organization_id" value="{{ $organization_id  }}">

                <div class="modal-body">
                        <div class="form-group">
                            <label for="tabname">
                                Please enter the tab name
                                <span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control" name="tabname" id="tabname" value="{{ $tab->tabname }}" aria-describedby="tabname">
                            <div class="errormessage">The Tab Name is required.</div>
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
                </form>
                </div>
            </div>
            </div>
     <!-- END: Edit tab Popup -->


<!-- START: Add question Popup -->
<div class="modal fade" id="addquestionModal{{ $tab->id }}" tabindex="-1" role="dialog"  data-backdrop="static" data-keyboard="false" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add Question </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form method="post" action="{{  route('question.store')  }}" name="frmaddedit" id="addqstfrmaddedit{{ $tab->id  }}">
            @csrf
            <input type="hidden" id="organization_id" name="organization_id" value="{{ $organization_id  }}">
            <input type="hidden" id="tab_id" name="tab_id" value="{{ $tab->id  }}">

            <div class="form-group">
                <label for="tabname">Title
                <span class="text-danger">*</span>
                </label>
                <input type="text" class="form-control" id="addheading{{ $tab->id }}" name="heading" value="" aria-describedby="tabname">
                <div id="divheading{{ $tab->id }}" class="errormessage hide">The Title field is required.</div>
            </div>

            <div class="form-group">
                <label for="tabname">Question
                <span class="text-danger">*</span>
                </label>
                <textarea class="form-control"  aria-describedby="tabname" id="addquestion_text{{ $tab->id }}" name="question_text" style="resize:none;" maxlength="500"  cols="30" rows="2"></textarea>
                <div id="divqst{{ $tab->id }}" class="errormessage hide">The Question field is required.</div>
            </div>

            <div class="form-group">
                <label for="tabname">Question Type
                <span class="text-danger">*</span>
                </label>
                <select name="question_type" onchange="changeOption(this.value,{{ $tab->id  }});" class="form-control" id="question_type{{ $tab->id }}">
                <option value="Free_Text">Free Text</option>
                <option value="Short_Answer">Short Answer</option>
                    <option value="Date">Date</option>
                    <option value="Number">Number</option>
                    <option value="True_or_False">True or False</option>
                    <option value="Yes_or_No">Yes or No</option>
                    <option value="Multiple_Choice">Multiple Choice</option>
                    <option value="Multiple_Select">Multiple Select</option>
                </select>
            </div>

            <!-- START: values : YES or NO and True or False-->
            <div id="Yes_or_No{{ $tab->id }}" class="Yes_or_No row" style="display:none;">
            <div class="form-group col-lg-6">
                    <label>Enter Yes Value</label>
                    <input type="text" class="form-control" value="Yes" id="radiotext1" name="radiotext[]">
                </div>
                <div class="form-group col-lg-6">
                    <label>Enter No Value</label>
                    <input type="text" class="form-control" value="No" id="radiotext2" name="radiotext[]">
                </div>
            </div>
            <!-- END: values : YES or NO and True or False-->

            <!-- START: Multiple choice -->
            <div id="Multiple_Choice_Select{{ $tab->id }}" class="Multiple_Choice_Select choice_box mb-3" style="display:none;">
                <div id="mcdiv1" class="choice_box mb-3">
                    <label for="">
                        Choice 1
                    </label>
                    <div class="input-group">
                    <input type="text" class="form-control" value="Choice 1" id="mctext1" name="mctext[]" placeholder="Choice 1" aria-label="Choice 1" aria-describedby="button-addon2">
                    <div class="input-group-append">
                        <a href=""  onclick="return removeMcqMsqOption('mcdiv1','CntMcqMsqOption{{ $tab->id }}');">
                            <img src="{{ asset('assets/admin/images/input-delete.svg') }}" alt="" >
                        </a>
                    </div>
                    </div>
                </div>
                <div id="mcdiv2" class="choice_box mb-3">
                    <label for="">
                        Choice 2
                    </label>
                    <div class="input-group">
                    <input type="text" class="form-control" value="Choice 2" id="mctext2" name="mctext[]" placeholder="Choice 1" aria-label="Choice 1" aria-describedby="button-addon2">
                    <div class="input-group-append">
                        <a href=""  onclick="return removeMcqMsqOption('mcdiv2','CntMcqMsqOption{{ $tab->id }}');">
                            <img src="{{ asset('assets/admin/images/input-delete.svg') }}" alt="" >
                        </a>
                    </div>
                    </div>
                </div>
                <div id="mcdiv3" class="choice_box mb-3">
                    <label for="">
                        Choice 3
                    </label>
                    <div class="input-group">
                    <input type="text" class="form-control" value="Choice 3" id="mctext3" name="mctext[]" placeholder="Choice 3" aria-label="Choice 3" aria-describedby="button-addon2">
                    <div class="input-group-append">
                        <a href=""  onclick="return removeMcqMsqOption('mcdiv3','CntMcqMsqOption{{ $tab->id }}');">
                            <img src="{{ asset('assets/admin/images/input-delete.svg') }}" alt="" >
                        </a>
                    </div>
                    </div>
                </div>
                <div id="mcdiv4" class="choice_box mb-3">
                    <label for="">
                        Choice 4
                    </label>
                    <div class="input-group">
                    <input type="text" class="form-control" value="Choice 4" id="mctext4" name="mctext[]" placeholder="Choice 4" aria-label="Choice 4" aria-describedby="button-addon2">
                    <div class="input-group-append">
                        <a href=""  onclick="return removeMcqMsqOption('mcdiv4','CntMcqMsqOption{{ $tab->id }}');">
                            <img src="{{ asset('assets/admin/images/input-delete.svg') }}" alt="" >
                        </a>
                    </div>
                    </div>
                </div>


            </div>
            <!-- END: Multiple choice -->

            <div class="">
                <input type="hidden" name="CntMcqMsqOption{{ $tab->id }}" id="CntMcqMsqOption{{ $tab->id }}" value="4">
                <a class="btn btn-primary btn-sm float-right" href="" onclick="return addMcqMsqOption({{ $tab->id }});">
                            <i class="icon-addnew top-icon"></i>
                            Add
                        </a>
                <input type="checkbox" onClick="showhideTrgQst({{ $tab->id }});" class="" id="is_triggered{{ $tab->id }}" name="is_triggered">
                <label class="" for="is_triggered">This is triggered Question</label>
            </div>
            <div id="div_TrgQst{{ $tab->id }}" class="hide">
                <div class="form-group">
                <label for="tabname">Trigger Question
                <span class="text-danger">*</span>
                </label>
                <select onchange="showhideTrgAnswer({{ $tab->id }})" name="trigger_question" class="form-control" id="trigger_question{{ $tab->id }}">
                <option value="0">Select Trigger Question</option>
                @if( count($triggered_question) > 0)
                    @foreach ( $triggered_question as $tkey => $Tval )
                        <option value="{{ $Tval->id  }}">{{ $Tval->heading  }}</option>
                        
                    @endforeach
                @endif
                </select>
                <div id="divtrgqst{{ $tab->id }}" class="errormessage hide">The Trigger Question field is required.</div>

            </div>

            <div class="form-group">
                <label for="tabname">Trigger Answer
                <span class="text-danger">*</span>
                </label>

                @if( count($triggered_question) > 0)
                    @foreach ( $triggered_question as $tkey => $Tval )
                        @if( 'Free_Text' != $Tval->question_type && 'Short_Answer' != $Tval->question_type )
                                @if( 'Date' == $Tval->question_type || 'Number' == $Tval->question_type )
                                @php
                                $hasDatepicker = ( 'Date' == $Tval->question_type ) ? 'form_date' : '';
                                @endphp
                                <input type="text" class="form-control hide trigger_answer_cls {{$hasDatepicker}}" name="trigger_answer{{ $Tval->id  }}" id="add_trigger_answer_{{ $tab->id }}_{{ $Tval->id  }}" value="">
                                @else
                                <select multiple name="trigger_answer{{ $Tval->id  }}[]" class="form-control hide trigger_answer_cls" id="add_trigger_answer_{{ $tab->id }}_{{ $Tval->id }}">
                                @php
                                $opArr = array();
                                if (strstr($Tval->question_option,',')) {
                                    $opArr = explode(',',$Tval->question_option);
                                }
                                @endphp
                                @if(is_array($opArr) && !empty($opArr))
                                @foreach($opArr as $opval)
                                    <option value="{{ $opval  }}">{{ $opval  }}</option>
                                @endforeach
                                @endif
                                </select>
                                @endif
                        @endif
                    @endforeach
                @endif


            </div>
            </div>
            <button type="button" onclick="return validateQuestionForm({{ $tab->id }})" class="btn btn-primary">Save</button>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- START: Add question Popup -->

</div>
        @endforeach





    </div>



    </div>

        </div>
    </div>

</div>
@if (count($tabs) == 0)
<div class="noreocrd">
    <div class="text-center">
        {{ __('organizationuser.no_result') }}
    </div>
</div>
@endif
<!-- START: Add Tab Popup -->
<div class="modal fade" id="addTabModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add Tab</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form method="post" action="{{  route('tab.store')  }}" name="frmaddedit" id="tabaddfrmaddedit">
      @csrf
      <input type="hidden" id="organization_id" name="organization_id" value="{{ $organization_id  }}">
      <div class="modal-body">
            <div class="form-group">
                <label for="tabname">
                    Please enter the tab name
                    <span class="text-danger">*</span>
                </label>
                <input type="text" class="form-control" name="tabname" id="newtabname" value="" aria-describedby="tabname">
                <div id="divtab" class="errormessage hide">The Tab Name is required.</div>
            </div>
      </div>
      <div class="modal-footer">
        <button type="button" onclick="return validateTabForm()" class="btn btn-primary">Save</button>
      </div>
      </form>
    </div>
  </div>
</div>
<!-- END: Add Tab Popup -->


<!--- sortable code start -->
  <script>


  $( function() {
    $( "#accordionExample" ).sortable({
        revert: true,
        handle: '.tabdragicon',
        stop: function (event, ui) {
            $(".dropclass").removeAttr("style");
        var data = $(this).sortable('serialize');
        var csrf_token = "{{ csrf_token() }}";
        var sortable_element_length = $('*[id^="display_order_"]').length;
        var sort_url = $('#tab_sort_url').val();
        var display_order = $('.tabdragicon').map(function() {
            if($(this).attr('id'))
                return ($(this).attr('id')).replace('display_order_', '');
        }).get();
        // POST to server using $.post or $.ajax
        $.ajax({
            type: 'POST',
            url: sort_url,
             data: {
                        'display_order': display_order
                    },
                    beforeSend: function(xhr) {
                        xhr.setRequestHeader('X-CSRF-Token', csrf_token);
                    },
                    success: function(response) {
                        $(".ajax_message").removeClass("d-none");
                        $(".ajax_message").find('span').addClass('successmessage').addClass('text-success').html(response.success);
                        setTimeout(function() {
                            $(".ajax_message").find('span').html('');
                        }, message_display_time);
                    },
        });
    },
    });
    $( "#draggable" ).draggable({
        connectToSortable: "#accordionExample",
        helper: "clone",
        revert: "invalid"
    });

    @php
    foreach ($tabs as $key => $tab) {
    @endphp
    $( "#tabQuestions{{ $tab->id }}" ).sortable({
        revert: true,
        handle: '.tabQuestionsdrag{{ $tab->id }}',
        stop: function (event, ui) {
            $(".dropclass").removeAttr("style");
        var data = $(this).sortable('serialize');
        var csrf_token = "{{ csrf_token() }}";
        var sortable_element_length = $('*[id^="question_order_"]').length;
        var sort_url = $('#question_sort_url').val();
        var display_order = $('.tabQuestionsdrag{{ $tab->id }}').map(function() {
            if($(this).attr('id'))
                return ($(this).attr('id')).replace('question_order_', '');
        }).get();
        // POST to server using $.post or $.ajax
        $.ajax({
            type: 'POST',
            url: sort_url,
            data: {
                        'display_order': display_order
                    },
                    beforeSend: function(xhr) {
                        xhr.setRequestHeader('X-CSRF-Token', csrf_token);
                    },
                    success: function(response) {
                        $(".ajax_message").removeClass("d-none");
                        $(".ajax_message").find('span').addClass('successmessage').addClass('text-success').html(response.success);
                        setTimeout(function() {
                            $(".ajax_message").find('span').html('');
                        }, message_display_time);
                    },
        });
        },
        
    });
    $( "#draggable" ).draggable({
      connectToSortable: "#tabQuestions{{ $tab->id }}",
      helper: "clone",
      revert: "invalid"
    });
    @php
        }
    @endphp

$( "ul, li" ).disableSelection();
});
  </script>

  <!--- sortable code end -->

@endsection