const add = document.getElementById('add');
var allQuationts = document.getElementById('allQuationts');
var options = document.querySelectorAll('.options');

var newQuationt = document.createElement('quation');
var newOption = document.createElement('option');
var form = document.querySelectorAll('.validation');
var btnAddOptions = document.querySelectorAll('.btn-add-option');
var quations = document.querySelectorAll('.quation');
var typeQuations = document.querySelectorAll('.type-quation');
var quationTiltes = document.querySelectorAll('.quation-tilte');
var singleOptions = document.querySelectorAll('.single-option');
var radios = document.querySelectorAll('.radio');
var optionInputs = document.querySelectorAll('.optionInput');
var index =0;
var indexOption=0;
var correctIndexOption =0;
add.addEventListener('click', function () {
 // if (!form[0].checkValidity()) {
 //     form[0].classList.add('was-validated');
 //     console.log('error');
 //   }
 //    else
{
    correctIndexOption =0;
 newQuationt.innerHTML = `
 <div class="row border p-3 mt-2 quation">
     <div class="col-12 col-md-6">
         <label class="form-label fw-bold" for="name">نوع السؤال</label>
         <select class="form-control form-white type-quation" data-placeholder="Choose a color..." name="typeQuation[]" required=""  onchange="changeType(${index})">
         <option selected value="">يرجى تحديد النوع  </option>

         <option  value="1">سؤال  اختيارات</option>
         </select>
     </div>
     <div class="col-12 col-md-6">
         <label class="form-label fw-bold" for="mark">الدرجة</label>
         <input type="number" id="mark " value="" name="mark[]" class="form-control text quation-tilte" placeholder="الدرجة" required="" >
     </div>
     <div class="col-12 col-md-12 mt-2 fv-plugins-icon-container">
         <label class="form-label fw-bold" for="quation">السؤال</label>

         <input type="text" id="quation " value="" name="quation[]" class="form-control text quation-tilte" placeholder="الرجاء ادخال السؤال" required="" >
         <p id="alertquation" class="massege"></p>
         <div class="fv-plugins-message-container invalid-feedback ">
         يرجاء ادخال السؤال
         </div>
         <strong> يرجى تحديد الإجابة الصحيحة </strong>

     </div>
     <div class="options">

     </div>
     <div class="col-xl-12 mt-3 btn-add-option mb-2" style="direction: rtl;">
          <span onclick="addNewOptions(${index})" class="btn btn-success">اضافة اختيار جديد +</span>
     </div>
     <div class="btn-delete-quation">
         <span  onclick="deleteQuation(${index})" class="btn  btn-delete  ">
             <i class="fa fa-trash  text-danger"></i>
         </span>
     </div>
     <div  class="btn-delete-quation number-qution">
         <span class=" badge badge-rounded badge-primary light">${index+1}</span>
     </div>
 </div>
 `;
 allQuationts.append(newQuationt.lastElementChild);
 btnAddOptions = document.querySelectorAll('.btn-add-option');
 option = document.querySelectorAll('.option');
 options = document.querySelectorAll('.options');
 quations = document.querySelectorAll('.quation');
 typeQuations = document.querySelectorAll('.type-quation');
 quationTiltes = document.querySelectorAll('.quation-tilte');
 index++;
}
})

/**
* [Description for when user change type qution]
*
* @param mixed index qution
*
* @return [type]
*
*/
function changeType(index)
{ console.log(typeQuations);

if(typeQuations[index].value=='1')
{
     options[index].style.display="block";
     btnAddOptions[index].style.display="block";
}
else
{
     btnAddOptions[index].style.display="none";
     options[index].style.display="none";
     var NumberInputOptions=options[index].getElementsByClassName('row-option').length;
     deleteSingleOption(index,NumberInputOptions);
}
}

/**
* [Description for addNewOptions]
*
* @param mixed index
*
* @return [type]
*
*/
function addNewOptions(index)
{
 newOption.innerHTML = `
 <div class="row  border shadow-sm pt-3 single-option">
     <div class="col-1 col-md-1 fv-plugins-icon-container pt-2 pe-4">
         <input class="form-check-input radio row-option" type="radio" name="aneswerSelect[${index}][]" id="exampleRadios${index}" value="${correctIndexOption}" >
     </div>
     <div class="col-10 col-md-10 fv-plugins-icon-container">
         <input type="text" id="email" value="" name="option[${index}][]" class="form-control text optionInput row-option" placeholder="الرجاء ادخال الاختيار" required="" >
         <p id="alertemail" class="massege"></p>
         <div class="fv-plugins-message-container invalid-feedback ">
         يرجاء ادخال السؤال
         </div>

     </div>
     <div class="btn-delete-quation btn-delete-option">
         <span  onclick="deleteOption(${indexOption})" class="btn btn-danger btn-delete">
             <i class="fa fa-trash  text-danger"></i>
         </span>
     </div>

 </div>
 `;
 correctIndexOption++;
 options[index].append(newOption.lastElementChild);
 radios = document.querySelectorAll('.radio');
 optionInputs = document.querySelectorAll('.optionInput');
 singleOptions = document.querySelectorAll('.single-option');
 indexOption++;
}

/**
* [Description for deleteQuation]
*
* @param mixed index
*
* @return [type]
*
*/
function deleteQuation(index)
{
 typeQuations[index].removeAttribute('name');
 quationTiltes[index].removeAttribute('name');
 typeQuations[index].removeAttribute('required');
 quationTiltes[index].removeAttribute('required');
 quations[index].style.display="none";

 var NumberInputOptions=options[index].getElementsByClassName('row-option').length;
 deleteSingleOption(index,NumberInputOptions)
}

/**
* [Description for deleteOption]
*
* @param mixed index
*
* @return [type]
*
*/
function deleteOption(index)
{
 radios[index].removeAttribute('name');
 optionInputs[index].removeAttribute('name');
 radios[index].removeAttribute('required');
 optionInputs[index].removeAttribute('required');
 singleOptions[index].style.display="none";
}


/**
* [Description for delete one Option]
*
* @param mixed index
* @param mixed number Option
*
* @return [type]
*
*/
function deleteSingleOption(index,numberOption)
{
 for (let i = 0; i < numberOption; i++) {
             options[index].getElementsByClassName('row-option')[i].removeAttribute('name');
             options[index].getElementsByClassName('row-option')[i].removeAttribute('required');
             options[index].getElementsByClassName('row-option')[i].style.display="none";
             options[index].getElementsByClassName('single-option')[i].style.display="none";
         }
}
