{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<!-- html code -->
<title>Seer | Add FAQ</title>
	    <div class="main-content pt-0">
	    	<div class="content-wrapper">
	    		<div class="row">
	    			<div class="col-12">
	    				<h2 class="topHead">Add FAQ</h2>
	    			</div>	    			
	    		</div>
	    		<div class="row new-user-table bookings mt-3">
	    			<div class="col-12 col-md-12">
	    				<div class="card addService dashboard-card">
	    					<form class="row g-3" action="/add-faq" id="add-faq" method="POST">
							{% csrf_token %}
								<div class="col-12">
								  	<label class="col-form-label">Type</label>
									<select class="form-select" aria-label="Default select example" name="type">
									<option selected disabled>Select Type</option>
									<option value="User">User</option>
									<option value="Fortuneteller">Fortuneteller</option>
									</select>
	    						</div>
	    						<div class="col-12">
								  	<label class="col-form-label">Faq Title</label>
								    <input type="text" placeholder="Faq Title" name="title" class="form-control" maxlength="100">
	    						</div>
	    						
	    						<div class="col-12">
                                    <label class="col-form-label">Faq Content</label>
									<textarea class= 'ckeditor form-control' type="texteditor" name="content" id="content"></textarea>
                                 <div id="errorContainer" class="errorContainer" style="color: red;"></div>
                                </div>
	    						<div class="col-12">
	    							<div class="save-btn text-center mt-4">
										<button type="submit" class="save-btn" onclick="validateForm()">Save</button>
								    </div>
	    						</div>
	    					</form>
	    				</div>
	    			</div>
	    		</div>
	    	</div>
	    </div>	

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

{%block js%}
<!-- js code -->
<script src="https://cdn.ckeditor.com/4.11.1/standard/ckeditor.js"></script>z
<script>
function validateForm() {
  var content = CKEDITOR.instances.content.getData().trim();

  if (content === '') {
    $('#errorContainer').text("Please fill in the content field.").show();
    return false;
  } else {
    $('#errorContainer').hide();
  }
}

</script>

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