{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<!-- html code -->
<title>Seer | FAQ Listing</title>
	    <div class="main-content pt-0">
	    	<div class="content-wrapper">
	    		<div class="row">
	    			<div class="col-12">
                        <div class="d-flex align-items-center justify-content-between">
	    					<div>
		    					<h2 class="topHead">FAQ Listing</h2>
	    					</div>
		    				<div class="faq-btn">
                                <button type="submit" class="search-btn" onclick="window.location.href = 'add-faq';" >Add FAQ</button>
                            </div>
	    				</div>
	    			</div>
	    		</div>
	    		<div class="row new-user-table bookings mt-3">
	    			<div class="col-12 col-md-12">
	    				<div class="card dashboard-card">
	    					<div class="table-users">
	    						<div class="table-responsive w-100">   
								{% if faq_obj %}       
					              <table class="table w-100">
					                <thead>
					                  <tr>
					                    <th>ID</th>
										<th>Type</th>
					                    <th>Title</th>
					                    <th>Action</th>
					                  </tr>
					                </thead>
					                <tbody>
									{% for faq in faq_obj %}
										<tr>
                                            <td>{{forloop.counter}}</td>
											<td>{{ faq.type }}</td>
											<td>
												{{ faq.title }}
                                            </td>
											<td>
											  <div class="action-btns faq">
                                                <a onclick="theFunction({{faq.id}});" class="block-icon" data-toggle="tooltip" data-placement="top" title="Delete"><i class="fa fa-trash-o" aria-hidden="true"></i></a>
												<a href="/edit-faq/{{ faq.id }}" class="block-icon" data-toggle="tooltip" data-placement="top" title="Edit"><img src="{% static 'admin/images/edit.png' %}"></a> 
											</td>
										</tr>  
										{% endfor %}	  								                  
					                </tbody>
					              </table>    
								  {% else %}
								  <p>No data found</p>
								  {% endif %}    
					            </div>
	    					</div>
	    				</div>
	    			</div>
	    		</div>
				<div class="row ">
					{% if faq_obj %}
					<div class="demo-inline-spacing pagi">
					  <div class="pagination justify-content-center">
					  <nav aria-label="Page navigation">
						<ul class="pagination">
						{% if faq_obj.has_previous %}
						<li><a href="?page={{ faq_obj.previous_page_number }}">&laquo;</a></li>
						{% else %}
						<li class="disabled"><a class="page-link" href="#"><i class="bx bx-chevron-left"></i></a></li>
						{% endif %}

						{% if faq_obj.number > 3 %}
						<li><a href="?page=1">1</a></li>
						<li class="disabled"><span>...</span></li>
						{% endif %}

						{% for i in faq_obj.paginator.page_range %}
						{% if i >= faq_obj.number|add:-2 and i <= faq_obj.number|add:10 %}
						{% if faq_obj.number == i %}
						<li><span><a href="#" class="page-link active">{{ i }} </a></span></li>
						{% else %}
						<li><a class="page-link" href="?page={{ i }}">{{ i }}</a></li>
						{% endif %}
						{% endif %}
						{% endfor %}

						{% if faq_obj.paginator.num_pages > faq_obj.number|add:2 %}
						<li class="disabled"><span>...</span></li>
						<li><a href="?page={{ faq_obj.paginator.num_pages }}">{{ faq_obj.paginator.num_pages }}</a></li>
						{% endif %}

						{% if faq_obj.has_next %}
						<li><a class="page-link" href="?page={{ faq_obj.next_page_number }}">&raquo;</a></li>
						{% else %}
						<li class="disabled"><a href="#" class="page-link"><i class="bx bx-chevron-right"></i></a></li>
						{% endif %}
						</ul>
					  </nav>
					  </div>
					</div>
					{%endif%}
				  </div>
	    	</div>
	    </div>
		
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Do you want to delete this FAQ?</h5>
                    <button class="close" type="button"  data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                         <input type="hidden" id="model_delete_id">
                    </button>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button"  data-bs-dismiss="modal">Cancel</button>
                    <button type="btn btn-secondary" id="delete-customer" class="btn btn-primary">Yes</button>
                </div>
            </div>
        </div>
    </div>

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

{%block js%}
<!-- js code -->
<script>
    function theFunction(e){
    $('#model_delete_id').val(e)
        $('#deleteModal').modal('show');
        return false;
    }

    $(document).on('click','#delete-customer',function(e){
        del_id = $('#model_delete_id').val()
        window.location.href='/delete-faq/'+ del_id;
    });
</script>

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