<style type="text/css">
    .error{
        color: red;
    }
    .marks_text {
    font-weight: 600;
    text-align: right;
    font-size: 12px;
    width: 120px;
}
</style>
<main class="common_margin" id="main">
    <div class="main-wrap main-inner-content main-inner-content-new">
        <h3 class="common-heading">
            <a href="<?php echo base_url() ?>teacher/exam-details/<?php echo $classroom_id; ?>" style="text-decoration: none;color: inherit;">
                <i class="fas fa-long-arrow-alt-left">                
                </i>
            </a>
            Test/Exams
        </h4>
        <?php if($get_questions != '' && !empty($get_questions)) {
             $marks_data = json_decode($get_questions['exam_question_format']);

            function comparator($object1, $object2) {
                return $object1->marks > $object2->marks;
            }
            usort($marks_data, 'comparator');
            ?>
        <?php } ?>
        <div class=" ">
            <div class="mid-paper-sec">
                <div class="mid-paper-sec-left">
                    <div class="quest-box-ouuter">
                        <div class="quest-box-header" id="box_heading_one">                       
                        </div>
                        <div class="quest-box-body-scroll">
                            <?php $count = 0;$timer= 0;
                                

                             foreach($marks_data as $key) {  
                                    
                                for ($i=1; $i <= $key->que ; $i++) {
                                    
                                    $sql = 'select * from exam_questions where exam_id ='. $get_questions['id'].' and question_mark = '.$key->marks;
                                    $query = $this->db->query($sql);
                                    $stu = $query->result_array();
                                       
                                        if ($i <= count($stu)) {
                                            foreach ($stu as $row) {
                                                $count++;                            
                                        ?>
                            <div class="quest-added-row <?php echo 'tick_'.$key->marks; ?>" id="<?php echo 'box_'.$key->marks .'_'.$i ?>">
                                <div class="quest-added quest-added-green" id="<?php echo 'success_'.$key->marks .'_'.$i ?>"><i class="fas fa-check"></i></div>
                                <ul class="quest-added-one " id="<?php echo 'listMarks_'.$key->marks .'_'.$i ?>">
                                    <li class="count"><?php echo $count; ?></li>                          
                                    <li class="question_text_content"  style='width:70%;font: size 12px;'>
                                        <?php echo substr($row['question_name'], 0,50).'...';  ?>
                                    </li>
                                    <li class="update_pen_icon" id="<?php echo 'updatePen_'.$key->marks .'_'.$i ?>" style="width: 6%; ">
                                        <div  onclick="show_right_data(<?php echo $key->marks .','.$i.','.$row['id'] ?>)" id="<?php echo 'updateIcon_'.$key->marks .'_'.$i ?>"  style="text-decoration: none;color: black;"><i class="<?php echo ($date_checker) ? "fa fa-eye" : "fas fa-pen" ?>"></i></div>
                                    </li>
                                    <li  ><?php echo $key->marks . ' marks'; ?>
                                        
                                    </li>
                                </ul>
                            </div>
                                            
                                    <?php   
                                         $i++;
                                            }
                                        } 
                                        if ($i > $key->que) {  
                                            $timer = 0;                                  
                                            break;
                                        }
                                        $count++; ?>
                            <div class="quest-added-row <?php echo 'tick_'.$key->marks; ?>" id="<?php echo 'box_'.$key->marks .'_'.$i ?>">
                                <div class="quest-added" id="<?php echo 'success_'.$key->marks .'_'.$i ?>"><i class="fas fa-check"></i></div>
                                <ul class="quest-added-one" id="<?php echo 'listMarks_'.$key->marks .'_'.$i ?>">
                                    <li class="count"><?php echo $count; ?></li>
                                    <li id="<?php echo 'addList_'.$key->marks .'_'.$i ?>" ><input type="button" class="add-tec-quest" value="+" id="<?php echo 'addButton_'.$key->marks .'_'.$i ?>"  onclick="show_right_data(<?php echo $key->marks .','.$i.',0' ;?>)">Add Question</li>
                                    <li class="question_text_content" style='width:70%;font: size 12px;' ></li>
                                    <li class="update_pen_icon" id="<?php echo 'updatePen_'.$key->marks .'_'.$i ?>" style="width: 6%;display: none;">
                                        
                                    </li>
                                    <li></li>
                                    <li  class="marks_text"><?php echo $key->marks . ' marks'; ?>
                                        
                                    </li>
                                </ul>
                                
                            </div>

                             <?php }  } ?>
                            
                    </div>
                    <div class="quest-box-footer">
                        <?php if($get_questions != '' && !empty($get_questions)) {                                            
                        ?>

                        <ul class="quest-foot-marks">
                            <?php foreach($marks_data as $key) {  ?>
                            <li class="check-inactive <?php echo 'check_'.$key->marks ?>"><?php echo $key->marks.'x'.$key->que; ?> <i class="fas fa-check mark-around"></i></li>
                             <?php } ?>
                            
                            <?php if (!$date_checker) { ?>
                            <li>
                                <a href="<?php echo base_url() ?>teacher/exam-details/<?php echo $classroom_id; ?>">
                                <input type="button" value="Submit question paper" class="sub-quest-paper ">
                                </a>
                            </li>
                            <?php } ?>
                                
                            
                        </ul>

                        <?php }?>
                    </div>
                </div>

            </div>

                <!----------right side------------------->
            <div class="mid-paper-sec-right">
            <form method="post" id="submit_data">
                <div class="quest-info-header">
                    
                    <p class="question_content_one"></p>
                    <p class="question_content_two"></p>
                </div>
                <input type="hidden" name="" id="exam_id" value="<?php echo ($get_questions != '') ? $get_questions['id'] : ''  ?>" >
                <input type="hidden" name="" id="subject_id" value="<?php echo ($get_questions != '') ? $get_questions['subject_id'] : ''  ?>" >
                <input type="hidden" name="" id="marks_total" value="" >
                <input type="hidden" name="" id="subject_id" value="<?php echo ($get_questions != '') ? $get_questions['subject_id'] : ''  ?>" >
                <input type="hidden" name="" id="exam_questions_id" value="" >
                <div class="sel-quest-type"><label>Select Question Type: </label>
                    <select id="exam-choice"class="sel-multiple" name="choice_question_select">
                        <option value="1">Multiple Choice</option>
                        <option value="2">True or false</option>
                        <option value="3">Short Answers</option>
                        <option value="4">Long Answers</option>
                    </select>
                </div>
                <div class="enter-quest-place">
                    <label class="que_number_place"> 03</label> 
                    <textarea placeholder="Type your question ...." name="text_area_content" class="quest-add-inside" required></textarea>
                </div>
                
                <div>
                    <span class=" err error_text_content text-danger"></span>
                </div>
                <div class="insert-prop">
                    <input id="upload" name="file" type="file" accept=".jpg, .png, .jpeg" />
                    <P>Would you like to add an image?<span class="input-image" id="upload_link">Click here</span></P>

                    <img id="previewImg" src="" alt="Placeholder" width="auto" height="120">
                </div>
                <div class="ans-opt-box">
                    <div class="ans-opt-one"><strong>A .</strong> <input type="text" class="add-opt-ans option_one" required name="option_A">
                    </div>
                    <div class="ans-opt-one"><strong>B .</strong> <input type="text" class="add-opt-ans option_two" required name="option_B">
                    </div>
                    <div class="ans-opt-one"><strong>C .</strong> <input type="text" class="add-opt-ans option_three" required name="option_C">
                    </div>
                    <div class="ans-opt-one"><strong>D .</strong> <input type="text" class="add-opt-ans option_four" required name="option_D">
                    </div>
                </div>
                <div>
                    <span class="err error_option text-danger"></span>
                </div>
                <div class="selected-ans-type"><label><strong>Select the correct answer:</strong></label>
                    <select class="correct-opt" id="correctAns" value="" name="multiple_choice_ans">
                        <option selected disabled value="">Options</option>
                        <option value="A">Option A</option>
                        <option value="B">Option B</option>
                        <option value="C">Option C</option>
                        <option value="D">Option D</option>
                    </select>

                    <select class="correct-opt" id="correctAnsTrueFalse" value="" name="trueFalse_ans" style="display: none;">
                        <option selected  disabled value="">Options</option>
                        <option value="1">True</option>
                        <option value="0">False</option>
                    </select>
                </div>
                <div>
                    <span class="err error_option_TF text-danger"></span>
                </div>
                <?php if ($date_checker) { ?>
                    
                <?php }else{ ?>  
                    <div class="opt-footer-btns">
                        <input type="submit" value="Done" class="done-btn">
                    </div>
                <?php } ?>
                
            </form>
            </div>

         </div>
        </div>
    </div>
</main>
<style type="text/css">
    #upload_link{
    text-decoration:none;
    }
    #upload{
        display:none
    }

</style>
<script>    
    
    $(document).ready(function(){

        // geting all the data of question
        var que_id = <?php echo $exam_id; ?>;
 
        get_all_question_data(que_id);
        $('.mid-paper-sec-right').hide();
        // $('#previewImg, .question_text_content, .update_pen_icon').hide();
        var Flag = false;
        var mark = '';
        var count='1'; //for getting the count for the tick mark
        tick_marks_code(mark,que_id,count);
    });
   
    

    function get_all_question_data(que_id)
    {        
        $.ajax({
            url: '<?php echo base_url() ?>teacher/get_exam_question_details/'+que_id, 
            type:'POST',            
            success: function(result) {   
                let header_one = '';

                var res = JSON.parse(result);           
                console.log(res);
                if (res.length=== 0) {
                    
                }else{
                    
                    header_one += '<p>'+ res.subject_name +' - '+ res.e_name +'</p><p>Total: '+res.total_marks+' Marks</p>'
                    $('#box_heading_one').html(header_one);

                    let NDate = NepaliFunctions.GetCurrentBsDate();
                    let todayDate = `${NDate.year}-${NDate.month}-${NDate.day}`;
                    
                    var CurrentDate = new Date(todayDate).getTime();
                    
                    var SelectedDate = new Date(res.exam_date).getTime();
                    console.log(CurrentDate);console.log(SelectedDate);
                   
                    if(CurrentDate >= SelectedDate){
                        console.log('helo');
                        $('.done-btn, .sub-quest-paper ').css('display','none');
                        // $('.done-btn').css('display','none');
                        // $('.update_pen_icon  i.fas').removeClass('fa-pen');
                        // $('.update_pen_icon  i.fas').addClass('fa-eye');
                    }
                    
                    
                }          
                
                
                }
            });
    }

      
   function show_right_data(marks_for_question,counter, que_id)
   {
        clear_all();
        $('.err').text('');
        $('#previewImg').hide();
        $('.mid-paper-sec-right').show();
        var numItems = $('.count').length;
        // alert(numItems);
        
        $('#upload_link').attr('src',"");
        $('#upload').val('');

        var qus_numner = $('#listMarks_'+ marks_for_question +'_'+ counter +' > .count').text();

        $('.question_content_one').text('Question:'+ qus_numner+ '/'+ numItems);
        $('.question_content_two').text('Value:'+ marks_for_question +' marks');
        $('.que_number_place').text(qus_numner);

        $('.done-btn').attr('id','submit_'+marks_for_question+'_'+counter);

        $('#marks_total').val(marks_for_question);
        $('#exam_questions_id').val('');
        $('#submit_'+ marks_for_question +'_'+ counter).val('Done');

        if (que_id != 0) {

            $.ajax({
                url: '<?php echo base_url() ?>teacher/add_edit_question_details/'+que_id,
                type:'POST',
                success: function(result) { 
                    var res = JSON.parse(result);
                    console.log(res);
                    $('.quest-add-inside').val(res['question_name']);
                     $('select#exam-choice').val(res['question_type_id']);
                     if (res['image'] !='') {
                        $("#previewImg").attr("src", '<?php echo base_url() ?>'+res['image']);
                        $("#previewImg").show();
                     }

                    if (res['question_type_id'] == 1) {                        
                       
                        $('#correctAns').val(res['correct_answer']);
                        $('.option_one').val(res['option_a']);
                        $('.option_two').val(res['option_b']);
                        $('.option_three').val(res['option_c']);
                        $('.option_four').val(res['option_d']);


                    }else if(res['question_type_id'] == 2){                      

                        $("#correctAnsTrueFalse option[value="+ res['correct_answer'] +"]").prop("selected", true)

                        $('.ans-opt-one > input').val('');
                        $('.selected-ans-type').show();
                        $('.ans-opt-box').hide();
                        $("#correctAns").css('display','none');
                        $("#correctAnsTrueFalse").show();
                        // $('#correctAnsTrueFalse option[value="'+ res['correct_answer']+'"]');
                        $("#correctAnsTrueFalse").val(res['correct_answer']);


                    }else if (res['question_type_id'] == 3 || res['question_type_id'] == 4) {
                        $('select#correctAnsTrueFalse option:selected').val('');
                        $('select#correctAns option:selected').val('');
                        $('.ans-opt-one > input').val('');
                        $('.selected-ans-type').hide();
                        $('.ans-opt-box').hide();
                        $("#correctAns").css('display','none');
                        $("#correctAnsTrueFalse").hide();
                    }
                    
                    $('#submit_'+ marks_for_question +'_'+ counter).val('Update');
                    $('#exam_questions_id').val(res['id'])

                }
            });

        }
       

   }


   // Right Side Dropdown Change Code

   $('#exam-choice').change(function(){
        $('.err').text('');
        var value = parseInt($('select#exam-choice option:selected').val());    

        if (value == 1) {
            $('.selected-ans-type').show();
            $('.ans-opt-box').show();
            $("#correctAns").css('display','inline-flex');
            $("#correctAnsTrueFalse").hide();
            $('select#correctAnsTrueFalse option:selected').val('');

        }
        else if (value == 2) {
            $('select#correctAns option:selected').val('');
            $('.ans-opt-one > input').val('');
            $('.selected-ans-type').show();
            $('.ans-opt-box').hide();
            $("#correctAns").css('display','none');
            $("#correctAnsTrueFalse").show();

        }
        else if(value == 3 || value == 4){
            $('select#correctAnsTrueFalse option:selected').val('');
            $('select#correctAns option:selected').val('');
            $('.ans-opt-one > input').val('');
            $('.selected-ans-type').hide();
            $('.ans-opt-box').hide();
            $("#correctAns").css('display','none');
            $("#correctAnsTrueFalse").hide();
        }
        
    });
    

    //file uplaod link trigger

    $(function(){
        $("#upload_link").on('click', function(e){
            e.preventDefault();
            $("#upload:hidden").trigger('click');
        });
    });

    //imagePreview 
    $('#upload').change(function(){
        $('#previewImg').show();
        var file = $("input[type=file]").get(0).files[0];
        if(file){
            var reader = new FileReader();
 
            reader.onload = function(){
                $("#previewImg").attr("src", reader.result);
            }
 
            reader.readAsDataURL(file);
        }    
    });

    
   $(document).ready(function(){ 
   
   var v = $("#submit_data").validate({

    ignore: ':hidden',

    rules: {
      option_A: {
        required: true
      },
      option_B: {
        required: true
      },
      option_C: {
        required: true
      },
      option_D: {
        required: true
      },
      choice_question_select: {
        required: true
      },
      multiple_choice_ans: {
        required: true
      },
      trueFalse_ans: {
        required: true
      },
      text_area_content: {
        required: true
      },
    

    },
    submitHandler: function(form) {
        // alert('hello word');
      

    },
    highlight: function(element, errorClass) {

      window.scrollTo(0, 0);

    },
    unhighlight: function(element, errorClass) {

    },

  });
});


$('.done-btn').click(function(){
    if ($('#submit_data').valid()) { 

        var id = $('.done-btn').attr('id');        
        var splite_data = id.split("_");
        var marks_for_question = splite_data[1];
        var counter = splite_data[2];    
        var formData = new FormData();

        formData.append('question_type_id',parseInt($('select#exam-choice option:selected').val()));
        formData.append('multiple_answer',$('select#correctAns option:selected').val());
        formData.append('tf_answer',$('select#correctAnsTrueFalse option:selected').val());
        formData.append('question_name',$('.quest-add-inside').val());
        formData.append('option_a',$('.option_one').val());
        formData.append('option_b',$('.option_two').val());
        formData.append('option_c',$('.option_three').val());
        formData.append('option_d',$('.option_four').val());
        formData.append('exam_id',$('#exam_id').val());
        formData.append('subject_id',$('#subject_id').val());
        formData.append('question_mark',$('#marks_total').val());
        formData.append('exam_que_id',$('#exam_questions_id').val());

        var files = $('#upload')[0].files;
        if (files.length > 0) {
            formData.append('file',files[0]);
        }else{
            formData.append('file','');
        }
        
       $.ajax({
            url: '<?php echo base_url() ?>teacher/add_edit_question_details_save', 
            type:'POST',
            data:formData,
            contentType:false,
            processData:false,            
            success: function(result) {
                // console.log(result);                                
                if (result > 0) {
                    $('#addList_'+ marks_for_question+'_'+counter).hide();
                    var data = $('.quest-add-inside').val();
                    $('#listMarks_'+ marks_for_question+'_'+counter+' > .question_text_content').css('display','block');
                    $('#listMarks_'+ marks_for_question+'_'+counter+' > .question_text_content').text(data.substr(0, 35)+'...');
                    $('#listMarks_'+ marks_for_question+'_'+counter+' > .update_pen_icon').css('display','block');

                    
                    if ($('#updateIcon_'+ marks_for_question+'_'+counter).length)
                    {

                    }else{
                        $('#listMarks_'+ marks_for_question+'_'+counter+' > .update_pen_icon').append('<div  onclick="show_right_data('+ marks_for_question +','+ counter +','+ result +')" id=updateIcon_'+ marks_for_question +'_'+ counter +'  style="text-decoration: none;color: black;"><i class="fas fa-pen"></i></div>');
                    }                
                    
                   
                    $('#box_'+ marks_for_question+'_'+counter+'> .quest-added').addClass("quest-added-green");
                    clear_all();
                    var marks = $('#marks_total').val(); var e_id = $('#exam_id').val();var count =0;
                    tick_marks_code(parseInt(marks), parseInt(e_id), count);
                    $('.mid-paper-sec-right').hide();
                }else{
                    $('.mid-paper-sec-right').hide();
                }    
                    
                
               
            }
        });
      }
});

//clear the content of the right side

function clear_all()
{
    $('.quest-add-inside').val('');
    $('.selected-ans-type').show();
    $('.ans-opt-box').show();
    $("#correctAns").css('display','inline-flex');
    $("#correctAnsTrueFalse").hide();
    $('select#exam-choice').val('1')
    $('select#correctAnsTrueFalse').val('');
    $('.option_one, .option_two, .option_three , .option_four').val('');
    $("#correctAns option[value='']").prop("selected", true);
}


// Tick Mark Codeing Start Here

function tick_marks_code(marks, exam_id, count)
{
    var formData = new FormData();
    formData.append('exam_id', exam_id);
    formData.append('marks',marks);
    formData.append('count',count);
    
    $.ajax({
            url: '<?php echo base_url() ?>teacher/tick_marks_data_view', 
            type:'POST',
            data:formData,
            contentType:false,
            processData:false,            
            success: function(result) {
                 var res = JSON.parse(result);
                var length = res.length;
                
                if (!res.length) {
                    var counter = $('.tick_'+marks).length;

                    if (parseInt(counter) == parseInt(result)) {
                        $('.check_'+marks +' > svg').addClass('mark-green');
                    }
                }else{
                    
                    $.each(res, function(index, value){
                        var c = $('.tick_'+ value['que_mark']).length;
                        
                        if (parseInt(c) == parseInt(value['count_mark'])) {
                             $('.check_'+value['que_mark'] +' > svg').addClass('mark-green');
                        }
                    });
                    
                }   
                
            }
        });   
}
  
</script>