{% 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">Add Features</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='/add-lifestyle-question' id='add-lifestyle-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="lifestyle_question" id="lifestyle_question"></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="sub_features" 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>
			                        </thead>
			                    	<input type="hidden" id="hidden-field" name="hidden-field" 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>
$(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();
 });
});


 $(document).on("click", "#saveid", function () {
  var rowsData = [];
  console.log('rowsData',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);
    console.log('rowsss',rowsDataJson)
    data = $('#hidden-field').val(rowsDataJson);
    console.log('data',data)
  }); 


</script>

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