{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<!-- html code -->

	    <div class="main-content pt-0">
	    	<div class="content-wrapper">
	    		<div class="row">
	    			<div class="col-12">
	    				<h2 class="topHead">Edit MBTI Question</h2>	    				
	    			</div>
	    		</div>
	    		<div class="row new-user-table bookings mt-3">
	    			<div class="col-12 col-md-12">
	    				<div class="card dashboard-card p-4">
	    					<form method="POST" action='/edit-mbti-question/{{question_obj.id}}' id='add-mbit-question' enctype="multipart/form-data">
	    						{% csrf_token %}
								<div class="mb-3">
								  <label class="form-label">Question</label>
								  <input type="text"  class="form-control"  rows="4" name="mbit_question" id="mbit_question" value="{{ question_obj.question_title}}"></input>
								</div>
								<table class="table table-scroll quesTable mt-3" id="productTable">
			                      <tbody id="test-body">
			                        <thead style="background: none;">			                          
			                          <tr>
			                            <th scope="col">
			                                <label>Option Name</label>
			                                <input type="text" class="form_control" id="option" value="{{ option_obj_first.option}}"placeholder="option" name="option" >
			                            </th>
			                            <th scope="col"><button type="button" class="btn btn-primary" id="addProduct"><i class="fa fa-plus"></i></button></th>
			                          </tr>
                                       {% for option_data in option_obj %}
                                      <tr>
                                      <td>
                                      <label>Option name</label>
                                      <input type="text" class="form_control" placeholder="Option name" id="options_append" name="options_append" value="{{option_data.option}}" required >
                                      </td>
                                      <td><button class="btn btn-danger remove" onclick="deleteOption({{option_data.id}})">
                                      <i class="fas fa-window-close" ></i>
                                      </button>
                                      </td>
                                      </tr>
                                      {% endfor %}

			                        </thead>
                                    
			                    	<input type="hidden" id="hidden-field" name="hidden-field" value="">
                            <input type="hidden" id="hidden-field-two" name="hidden-field-two" value="">

			                        </tbody>
			                     </table>			                     
								<div class="save-btn text-center mt-4">
									<button type="submit" class="save-btn" id="saveid">Save</button>
							    </div>
	    					</form>
	    				</div>
	    			</div>
	    		</div>
	    	</div>
	    </div>

<!-- end of html code -->
{%endblock%}

{%block js%}
<!-- js code -->

<script>

  var form = document.getElementById('add-mbit-question');
  form.addEventListener('submit', function(e) {
    e.preventDefault(); 
    var optionInputs = document.querySelectorAll('input[name="options_append"]');
    var hiddenField = document.getElementById('hidden-field-two');
    var optionValues = [];
    optionInputs.forEach(function(input) {
      optionValues.push(input.value);
    });

    hiddenField.value = optionValues.join(',');
    form.submit();
  });

$(document).ready(function(){
    var html = '<tr><td><label>Option name</label><input type="text" class="form_control" placeholder="Option name" id="options_append" name="options_append" required></td><td><button class="btn btn-danger remove"><i class="fas fa-window-close"></i></button></td></tr>'; 
     $("#addProduct").click(function(){
         $('tbody').append(html);
 });
 
 $(document).on('click','.remove',function(){
     $(this).parents('tr').remove();
 });
});


 {% comment %} $(document).on("click", "#saveid", function () {
  var rowsData = [];
  $('#test-body tr').each(function(index, row) {
      var options_append = $(row).find('input[name^="options_append"]').val();

      var rowData = {
        option: options_append,
      };

      rowsData.push(rowData);
    });
    var rowsDataJson = JSON.stringify(rowsData);
    data = $('#hidden-field').val(rowsDataJson);
  }); 

function deleteOption(id) {
    console.log("---------")
     $.ajax({
          url:"/remove-mbit-option",
          type:"GET",
        data: {
          'option_id': id,
        },
        success: function (data) {
          console.log('success')         
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) { 
        alert("Status: " + textStatus); alert("Error: " + errorThrown); 
        }       

      });

} {% endcomment %}


</script>

<!-- end of js -->
{% endblock %}