{% extends 'layout/base_template.html' %}
{% load static %}
{% block stylesheet %}
    <!-- include required css cdn link through html here -->

    {% include "cdn_through_html/datatable_cdn_css.html" %}
    {% include "cdn_through_html/animate_cdn_css.html" %}
    {% include "cdn_through_html/modal_cdn_css.html" %}

{% endblock %}

{% block content %}

<div class="row layout-top-spacing">
    <div class="col-lg-12">
        <div class="row mb-2">
            <div class="col">
                <h3>Manage FAQ</h3>
            </div>
            <div class="col text-end">
                {% comment %} <button class="btn btn-dark mb-2 me-4" onclick="history.back()">
                    <i class="fa fa-arrow-left"></i>
                    Back
                </button> {% endcomment %}
                {% comment %} <a class="btn btn-success  mb-2 me-4" href="{% url 'manage_cms:faq_category_add' %}">Add Category</a> {% endcomment %}
                <a class="btn btn-primary mb-2 me-4" href="{% url 'manage_cms:faq_add' %}">Add FAQ</a>
            </div>
        </div>

        {% comment %} <div class="row layout-spacing">
            <div class="col-lg-12">
                <div class="statbox widget box box-shadow">
                    <div class="widget-content widget-content-area">
                        <div id="faq-category_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
                            <div class="dt--top-section">
                                <h5 class="mt-2">FAQ Category</h5>
                            </div>
                            <div class="dt--top-section">
                                <div class="row">
                                    <div class="col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center">
                                        <div class="dataTables_length" id="style-3_length"><label>Results : <select
                                                    name="style-3_length" aria-controls="style-3" class="form-control">
                                                    <option value="5">5</option>
                                                    <option value="10">10</option>
                                                    <option value="20">20</option>
                                                    <option value="50">50</option>
                                                </select></label></div>
                                    </div>
                                    <div
                                        class="col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3">
                                        <div id="style-3_filter" class="dataTables_filter"><label><svg
                                                    xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                    stroke-linecap="round" stroke-linejoin="round"
                                                    class="feather feather-search">
                                                    <circle cx="11" cy="11" r="8"></circle>
                                                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                                                </svg><input type="search" class="form-control" placeholder="Search..."
                                                    aria-controls="style-3"></label></div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table id="faq-category" class="table style-3 dt-table-hover dataTable no-footer" role="grid"
                                    aria-describedby="style-3_info">
                                    <thead>
                                        <tr role="row">
                                            <th class="checkbox-column sorting_asc" tabindex="0"
                                                aria-controls="style-3" aria-sort="ascending"
                                                style="width: 69.2656px;"> Record Id </th>
                                            <th class="sorting" tabindex="0" aria-controls="style-3"
                                                colspan="1"
                                                style="width: 44.2344px;">Category Name</th>
                                            <th class="sorting" tabindex="0" aria-controls="style-3"
                                                
                                                style="width: 79.7969px;">Active</th>
                                            <th class="dt-no-sorting sorting" tabindex="0"
                                                aria-controls="style-3"
                                                style="width: 51.625px;">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for data_obj in faq_category_obj%}
                                        <tr role="row">
                                            <td class="checkbox-column text-center sorting_1"> {{data_obj.id}}</td>
                                            <td>{{data_obj.name}}</td>
                                            <td class="text-center">
                                                <span class="shadow-none badge {% if data_obj.active %}badge-primary{% else %}badge-danger{% endif %}">{{data_obj.active}}</span>
                                            </td>
                                            <td class="text-center">
                                                <ul class="table-controls">
                                                    <li><a href="{% url 'manage_cms:faq_edit' data_obj.id %}" class="bs-tooltip"
                                                            data-bs-toggle="tooltip" data-bs-placement="top" title=""
                                                            data-original-title="Edit" data-bs-original-title="Edit"
                                                            aria-label="Edit"><svg xmlns="http://www.w3.org/2000/svg"
                                                                width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                                stroke="currentColor" stroke-width="2"
                                                                stroke-linecap="round" stroke-linejoin="round"
                                                                class="feather feather-edit-2 p-1 br-8 mb-1">
                                                                <path
                                                                    d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z">
                                                                </path>
                                                            </svg></a></li>
                                                    <li><a href="{% url 'manage_cms:faq_edit' data_obj.id %}" class="bs-tooltip"
                                                            data-bs-toggle="tooltip" data-bs-placement="top" title=""
                                                            data-original-title="Delete" data-bs-original-title="Delete"
                                                            aria-label="Delete"><svg xmlns="http://www.w3.org/2000/svg"
                                                                width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                                stroke="currentColor" stroke-width="2"
                                                                stroke-linecap="round" stroke-linejoin="round"
                                                                class="feather feather-trash p-1 br-8 mb-1">
                                                                <polyline points="3 6 5 6 21 6"></polyline>
                                                                <path
                                                                    d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
                                                                </path>
                                                            </svg></a></li>
                                                </ul>
                                            </td>
                                        </tr>
                                        {% endfor %}
                                       
                                    </tbody>
                                </table>
                            </div>
                            <div class="dt--bottom-section d-sm-flex justify-content-sm-between text-center">
                                <div class="dt--pages-count  mb-sm-0 mb-3">
                                    <div class="dataTables_info" id="style-3_info" role="status" aria-live="polite">Showing
                                        page 1 of 1</div>
                                </div>
                                <div class="dt--pagination">
                                    <div class="dataTables_paginate paging_simple_numbers" id="style-3_paginate">
                                        <ul class="pagination">
                                            <li class="paginate_button page-item previous disabled" id="style-3_previous"><a
                                                    href="#" aria-controls="style-3" data-dt-idx="0" tabindex="0"
                                                    class="page-link"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                        height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                        class="feather feather-arrow-left">
                                                        <line x1="19" y1="12" x2="5" y2="12"></line>
                                                        <polyline points="12 19 5 12 12 5"></polyline>
                                                    </svg></a></li>
                                            <li class="paginate_button page-item active"><a href="#" aria-controls="style-3"
                                                    data-dt-idx="1" tabindex="0" class="page-link">1</a></li>
                                            <li class="paginate_button page-item next disabled" id="style-3_next">
                                                <a
                                                    href="#" aria-controls="style-3" data-dt-idx="2" tabindex="0"
                                                    class="page-link"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                        height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                        class="feather feather-arrow-right">
                                                        <line x1="5" y1="12" x2="19" y2="12"></line>
                                                        <polyline points="12 5 19 12 12 19"></polyline>
                                                    </svg>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> {% endcomment %}
    
        <div class="row layout-spacing">
            <div class="col-lg-12">
                <div class="statbox widget box box-shadow">
                    <div class="widget-content widget-content-area">
                        <div id="faqs_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
                            <div class="dt--top-section">
                                <h5 class="mt-2">FAQ</h5>
                            </div>
                            <div class="dt--top-section">
                                <div class="row">
                                    <div class="col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center">
                                        <div class="dataTables_length" id="style-3_length"><label>Results : <select
                                                    name="style-3_length" aria-controls="style-3" class="form-control">
                                                    <option value="5">5</option>
                                                    <option value="10">10</option>
                                                    <option value="20">20</option>
                                                    <option value="50">50</option>
                                                </select></label></div>
                                    </div>
                                    <div
                                        class="col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3">
                                        <div id="style-3_filter" class="dataTables_filter"><label><svg
                                                    xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                    stroke-linecap="round" stroke-linejoin="round"
                                                    class="feather feather-search">
                                                    <circle cx="11" cy="11" r="8"></circle>
                                                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                                                </svg><input type="search" class="form-control" placeholder="Search..."
                                                    aria-controls="style-3"></label></div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table id="faqs" class="table style-3 dt-table-hover dataTable no-footer" role="grid"
                                    aria-describedby="style-3_info">
                                    <thead>
                                        <tr role="row">
                                            <th class="checkbox-column sorting_asc" tabindex="0"
                                                aria-controls="style-3" aria-sort="ascending"
                                                style="width: 69.2656px;"> Record Id </th>
                                            <th class="sorting" tabindex="1" aria-controls="style-3"
                                                colspan="1"
                                                style="width: 44.2344px;">Faq</th>
                                            <th class="sorting" tabindex="3" aria-controls="style-3"
                                                colspan="1"
                                                style="width: 44.2344px;">Added Date</th>
                                            <th class="sorting" tabindex="4" aria-controls="style-3"
                                                colspan="1"
                                                style="width: 44.2344px;">Modified Date</th>
                                            <th class="sorting" tabindex="5" aria-controls="style-3"
                                                
                                                style="width: 79.7969px;">Active</th>
                                            <th class="dt-no-sorting sorting" tabindex="6"
                                                aria-controls="style-3"
                                                style="width: 51.625px;">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for data_obj in faqs_obj%}
                                        <tr role="row">
                                            <td class="text-center sorting_1"> {{data_obj.id}}</td>
                                            <td>
                                                <button type="button" class="btn btn-info mb-2 me-4" data-bs-toggle="modal" data-bs-target="#faqmodal" onclick="faqModal('{{data_obj.question}}','{{data_obj.answer}}')">
                                                    View
                                                </button>
                                            </td>
                                            <td>{{data_obj.created_on}}</td>
                                            <td>{{data_obj.modified_on}}</td>
                                            <td class="text-center">
                                                <span class="shadow-none badge {% if data_obj.active %}badge-primary{% else %}badge-danger{% endif %}">{{data_obj.active}}</span>
                                            </td>
                                            <td class="text-center">
                                                <ul class="table-controls">
                                                    <li><a href="{% url 'manage_cms:faq_edit' data_obj.id %}" class="bs-tooltip"
                                                            data-bs-toggle="tooltip" data-bs-placement="top" title=""
                                                            data-original-title="Edit" data-bs-original-title="Edit"
                                                            aria-label="Edit"><svg xmlns="http://www.w3.org/2000/svg"
                                                                width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                                stroke="currentColor" stroke-width="2"
                                                                stroke-linecap="round" stroke-linejoin="round"
                                                                class="feather feather-edit-2 p-1 br-8 mb-1">
                                                                <path
                                                                    d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z">
                                                                </path>
                                                            </svg></a></li>
                                                    <li><a href="{% url 'manage_cms:faq_delete' data_obj.id %}" class="bs-tooltip"
                                                            data-bs-toggle="tooltip" data-bs-placement="top" title=""
                                                            data-original-title="Delete" data-bs-original-title="Delete"
                                                            aria-label="Delete"><svg xmlns="http://www.w3.org/2000/svg"
                                                                width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                                stroke="currentColor" stroke-width="2"
                                                                stroke-linecap="round" stroke-linejoin="round"
                                                                class="feather feather-trash p-1 br-8 mb-1">
                                                                <polyline points="3 6 5 6 21 6"></polyline>
                                                                <path
                                                                    d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
                                                                </path>
                                                            </svg></a></li>
                                                </ul>
                                            </td>
                                        </tr>
                                        {% endfor %}
                                       
                                    </tbody>
                                </table>
                            </div>
                            <div class="dt--bottom-section d-sm-flex justify-content-sm-between text-center">
                                <div class="dt--pages-count  mb-sm-0 mb-3">
                                    <div class="dataTables_info" id="style-3_info" role="status" aria-live="polite">Showing
                                        page 1 of 1</div>
                                </div>
                                <div class="dt--pagination">
                                    <div class="dataTables_paginate paging_simple_numbers" id="style-3_paginate">
                                        <ul class="pagination">
                                            <li class="paginate_button page-item previous disabled" id="style-3_previous"><a
                                                    href="#" aria-controls="style-3" data-dt-idx="0" tabindex="0"
                                                    class="page-link"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                        height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                        class="feather feather-arrow-left">
                                                        <line x1="19" y1="12" x2="5" y2="12"></line>
                                                        <polyline points="12 19 5 12 12 5"></polyline>
                                                    </svg></a></li>
                                            <li class="paginate_button page-item active"><a href="#" aria-controls="style-3"
                                                    data-dt-idx="1" tabindex="0" class="page-link">1</a></li>
                                            <li class="paginate_button page-item next disabled" id="style-3_next"><a
                                                    href="#" aria-controls="style-3" data-dt-idx="2" tabindex="0"
                                                    class="page-link"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                        height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                        class="feather feather-arrow-right">
                                                        <line x1="5" y1="12" x2="19" y2="12"></line>
                                                        <polyline points="12 5 19 12 12 19"></polyline>
                                                    </svg></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

 <!-- modal for View FAQ Question Answer  -->
 <div class="modal fade" id="faqmodal" tabindex="-1" role="dialog" aria-labelledby="faqModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content" >
        <div class="modal-header">
          <h5 class="modal-title" id="faqModalLabel">Faq</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
          </button>
        </div>
        <div class="modal-body">
            <div class="card mb-2">
                <div class="card-body">
                    <h6 class="card-title">Question</h6>
                    <p class="mb-0" id="questionData"></p>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Answer</h6>
                    <p class="mb-0" id="answerData"></p>
                </div>
            </div>
          </div>
        <div class="modal-footer">
          <button class="btn btn-dark" data-bs-dismiss="modal">Discard</button>
        </div>
      </div>
    </div>
</div>

{% endblock content %}

{% block javascript %}

    <!-- include required css cdn link through html here -->

    {% include "cdn_through_html/datatable_cdn_css.html" %}
    
    <script>
        faq_category = $('#faq-category').DataTable({
            "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
                "<'table-responsive'tr>" +
                "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
            "oLanguage": {
                "oPaginate": { "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>', "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>' },
                "sInfo": "Showing page _PAGE_ of _PAGES_",
                "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
                "sSearchPlaceholder": "Search...",
                "sLengthMenu": "Results :  _MENU_",
            },
            "stripeClasses": [],
            "lengthMenu": [5, 10, 20, 50],
            "pageLength": 10
        });


        faqs = $('#faqs').DataTable({
            "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
                "<'table-responsive'tr>" +
                "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
            "oLanguage": {
                "oPaginate": { "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>', "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>' },
                "sInfo": "Showing page _PAGE_ of _PAGES_",
                "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
                "sSearchPlaceholder": "Search...",
                "sLengthMenu": "Results :  _MENU_",
            },
            "stripeClasses": [],
            "lengthMenu": [5, 10, 20, 50],
            "pageLength": 10
        });


        <!-- Faq modal show and set data-->
        function faqModal(question, answer) {
            // Set the data in the modal content
            $("#questionData").text(question);
            $("#answerData").text(answer);
        
            // Show the modal
            $('#faqmodal').modal('show');
        }

    </script>
{% endblock %}