{% extends 'admin_layout_two.html' %}
 {% load static %}
 {% block content %}
 <style>
    .switch {
        position: relative;
        display: inline-block;
        width: 90px;
        height: 34px;
        vertical-align: middle;
        margin: 0;
    }
    .switch input {display:none;}
    
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #e2c38a;
        -webkit-transition: .4s;
        transition: .4s;
    }
    .modal-open .modal {
      overflow-x: hidden;
      overflow-y: auto;
      opacity: 1;
    }
    .modal-dialog {
      top: 50px;
    }
    
    .slider:before {
        position: absolute;
        content: "";
        height: 17px;
        width: 17px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }
    span.off {
        margin-left: 10px;
    }
    
    span.on {
        right: -22px !important;
    }
    input:checked + .slider {
        background-color: #bc9948;
    }
    
    input:focus + .slider {
      box-shadow: 0 0 1px #2196F3;
    }
    
    input:checked + .slider:before {
      -webkit-transform: translateX(55px);
      -ms-transform: translateX(55px);
      transform: translateX(38px);
    }
    
    /*------ ADDED CSS ---------*/
    .on
    {
      display: none;
    }
    
    .on, .off
    {
      color: white;
      position: absolute;
      transform: translate(-50%,-50%);
      top: 50%;
      left: 50%;
      font-size: 10px;
      font-family: Verdana, sans-serif;
    }
    
    input:checked+ .slider .on
    {display: block;}
    
    input:checked + .slider .off
    {display: none;}
    
    /*--------- END --------*/
    
    /* Rounded sliders */
    .slider.round {
        border-radius: 34px;
        height: 24px;
        width: 62px;
    }
    .modal-footer {
        justify-content: center;
    }
    .modal-body {
        text-align: center;
        font-size: 16px;
    }
    .slider.round:before {
      border-radius: 50%;}
    </style>
 <!--Content body start-->
 <title>Beni | FAQ</title>
 <div class="content-body">

     <div class="container-fluid mt-3">
         <div class="row page-titles mx-0">
             <div class="col">
                 <h2 class="fs-32 mb-0">Frequently Asked Questions</h2>
             </div>
           
         </div>
         <div class="add-faq mt-3 text-right">
             <a href="/add-faq">
                 <button type="button" class="btn btn-primary">Add FAQ</button>
             </a>
         </div>
         <div class="row faq-rw mt-4">
             <div class="col-12 col-md-12">
                 <div class="card">
                     <div class="card-body">

                         <div class="table-responsive">
                             <table class="table header-border table-hover verticle-middle">
                                 <thead>
                                     <tr>
                                         <th scope="col">Sr. No.</th>
                                         <th scope="col">FAQ Title in English</th>
                                         <th scope="col">FAQ Title in Arabic</th>

                                         {% comment %} <th scope="col">Status</th> {% endcomment %}
                                         <th scope="col">Actions</th>
                                     </tr>
                                 </thead>
                                 <tbody>
                                     {% for i in faq_obj %}
                                     <tr>
                                         <th>{{ i.id }}</th>
                                         <td>{{ i.english_title }}</td>
                                         <td>{{ i.arabic_title }}</td>
                                         {% comment %} <td>
                                            <label class="switch">
                                              <input type="checkbox" id="switch" {% if user.user.status == 1 %} checked {% else %} {% endif %} name="status" onchange="changeUserStatus(this,'{{user.user.id}}')">
                                              <span class="slider round"></span>
                                             </label>
                                          
                                          </td> {% endcomment %}
                                         <td>
                                             <span><a class="edit-btn yellow" href="/edit-faq/{{i.id}}"
                                                     data-toggle="tooltip" data-placement="top" title=""
                                                     data-original-title="Edit">
                                                     <i class="fa fa-pencil color-muted m-r-5"></i> </a>
                                                 <a class="Close-btn" id="delete-item" onclick="theFunction({{i.id}});"
                                                     data-toggle="tooltip" data-placement="top" title=""
                                                     data-original-title="Delete">
                                                     <i class="fa fa-close color-danger"></i></a>
                                             </span>
                                         </td>
                                     </tr>
                                     {% endfor %}
                                 </tbody>
                             </table>
                         </div>
                     </div>

                 </div>
             </div>
         </div>
         {% if data_obj %}
         <div class="demo-inline-spacing">
             <div class="pagination justify-content-center">
                 {% if faq_obj.has_previous %}
                 <li><a href="?page={{ faq_obj.previous_page_number }}">&laquo;</a></li>
                 {% else %}
                 <li class="disabled"><span>&laquo;</span></li>
                 {% endif %}
                 {% for i in faq_obj.paginator.page_range %}
                 {% if faq_obj.number == i %}
                 <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
                 {% else %}
                 <li><a href="?page={{ i }}">{{ i }}</a></li>
                 {% endif %}
                 {% endfor %}
                 {% if faq_obj.has_next %}
                 <li><a href="?page={{ faq_obj.next_page_number }}">&raquo;</a></li>
                 {% else %}
                 <li class="disabled"><span>&raquo;</span></li>
                 {% endif %}
             </div>
         </div>
         {% endif %}
     </div>
 </div>

 <div class="bootstrap-modal">
     <!-- Modal -->
     <div class="modal fade faqdelete" id="deleteModal">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
                 <div class="modal-btn">
                     <button type="button" class="close" data-dismiss="modal"><span>&times;</span>
                     </button>
                 </div>
                 <input type="hidden" id="model_delete_id">

                 <div class="modal-body">Are you sure you want to delete this faq?</div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                     <button type="button" id="delete-faq" class="btn btn-primary">Yes</button>
                 </div>
             </div>
         </div>
     </div>
 </div>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
     function theFunction(e) {
         $('#model_delete_id').val(e)
         $('#deleteModal').modal('show');
         $('.faqdelete').css('opacity',"1")

         return false;
     }

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

     let pag = document.querySelectorAll('a.page-link')
     console.log(pag.length)
     let url = window.location

     if (url.href.includes("?csrfmiddlewaretoken")) {
         for (let i = 0; i < pag.length; i++) {
             pag[i].href = url.search + pag[i].getAttribute("data-href").replace("?", "&")
             console.log(pag[i].getAttribute("data-href"))
         }
     } else {
         console.log("not included")
     }
 </script>

 {% endblock %}