{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}

<!-- Begin Page Content -->
<title>Manimaran | Add FAQ</title>

<div class="container-fluid">
    <div class="inner-content">
        <!-- Page Heading -->
        <div class="top-bar mb-4 d-flex justify-content-between">
            <div class="left-side-bar">
                <h2 class="topHead">Add FAQ</h2>
            </div>
        </div>
    
        <div class="product-add-data mt-4">
            <div class="card space">
                <form class="add-prdcts-form add-faq" method="POST" action='/add-new-faq' id='add-faq' enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="row">
                        <div class="col-12 col-md-10 m-auto">
                            <div class="form-group mb-4">                  
                                <label for="name" class="col-form-label">Faq Title</label>                
                                <input type="text" class="form-control" name="title" id="title" placeholder="Faq Title" maxlength="250">              
                            </div>
                        </div>   
                        <div class="col-12 col-md-10 m-auto">
                            <div class="form-group mb-4">                  
                                <label for="name" class="col-form-label">Faq Content</label>                
                                  <textarea class= 'ckeditor' type="texteditor" name="content" id="content"></textarea>
                            </div>
                             <div id="errorContainer" class="errorContainer" style="color: red;"></div>
                        </div>                            
                        <div class="form-footer text-center mt-4">
                            <button type="submit" class="btn dark-btn" onclick="validateForm()">Submit</button>
                        </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- /.container-fluid -->
<script src="https://cdn.ckeditor.com/4.11.1/standard/ckeditor.js"></script>

<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>
{% endblock %}