{% include "header.html"  %}
{% load static %}

    <!-- main page  -->
    <div class="mdk-header-layout__content">

        <div class="mdk-drawer-layout js-mdk-drawer-layout" data-push data-responsive-width="992px">
            <div class="mdk-drawer-layout__content page">

                <div class="container page__heading-container">
                    <div class="row mb-3">
                        <div class="col-6">
                            <h1 class="heading">User Profile list</h1>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb mb-0">
                                    <li class="breadcrumb-item"><a href="#">Home</a></li>
            
                                    <li class="breadcrumb-item active" aria-current="page">User Profiles</li>
                                </ol>
                            </nav>
                        </div>
                        <div class="col-6">
                            <div class="d-flex justify-content-end">
                                <a href="{% url 'add_user' %}" class="add-btn" >Add User Profile</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="container page__container exam-module">
                    <div class="card card-body">
                        <div class="row no-gutters">

                            <div class="col-lg-12 card-body">

                                <div class="table-responsive border-bottom" data-toggle="lists"
                                    data-lists-values='["js-lists-values-employee-name"]'>
                                    <table class="table mb-0 thead-border-top-0 text-center">
                                        <thead class="table-heading text-center">
                                            <tr>
                                                <th>Sr.No.</th>
                                                <th>Name</th>
                                                <th>Email</th>
                                                <th>Contact</th>
                                                <th>Role</th>
                                                <th>Status</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>

                                        <tbody class="align-middle text-center">

                                            {% for user in users %}
                                            <tr>

                                                <td>{{ forloop.counter }}</td>

                                                <td>
                                                    {{ user.first_name }} {{ user.last_name }}
                                                </td>

                                                <td>{{ user.email }}</td>

                                                <td>
                                                    {{ user.userprofile.contact_number }}
                                                </td>

                                                <td>
                                                    {{ user.userprofile.role.role_name }}
                                                </td>

                                                <td>
                                                    {% if user.userprofile.status == "Active" %}
                                                    <span class="badge badge-success">Active</span>
                                                    {% else %}
                                                    <span class="badge badge-warning">Inactive</span>
                                                    {% endif %}
                                                </td>

                                                <td>

                                                    <a class="edit-btn badge badge-warning"
                                                    href="{% url 'edit_user' user.id %}">
                                                        <i class="fas fa-edit"></i>
                                                    </a>

                                                    <a class="delete-button badge badge-danger"
                                                    data-id="{{user.id}}"
                                                    data-toggle="modal"
                                                    href="#delete_modal">
                                                        <i class="fas fa-trash"></i>
                                                    </a>

                                                </td>

                                            </tr>

                                            {% empty %}

                                            <tr>
                                                <td colspan="7" class="text-center text-muted py-4">
                                                    <strong>No Users Found</strong>
                                                </td>
                                            </tr>

                                            {% endfor %}

                                        </tbody>
                                    </table>

                                </div>
                               
                            </div>
                        </div>
                      
                    </div>

                    
                    <div class="col-lg-12 p-0">
                            <ul class="pagination m-0">

                                {% if users.has_previous %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ users.previous_page_number }}">
                                    <span aria-hidden="true" class="material-icons">chevron_left</span>
                                    <span>Prev</span>
                                    </a>
                                </li>
                                {% endif %}

                                <li class="page-item active">
                                    <a class="page-link" href="#">
                                    {{ users.number }}
                                    </a>
                                </li>

                                {% if users.has_next %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ users.next_page_number }}">
                                    <span>Next</span>
                                    <span aria-hidden="true" class="material-icons">chevron_right</span>
                                    </a>
                                </li>
                                {% endif %}

                            </ul>
                    </div>

               
                </div>
             
            </div>

            
            <!-- // END drawer-layout__content -->

            <!-- drawer -->
          {% include "sidebar.html"%}
            <!-- // END drawer -->
        </div>
        <!-- // END drawer-layout -->

    </div>
    <!-- // END header-layout__content -->

</div>

<!-- // END header-layout -->

{% include "footer.html" %}





     <!-- delete modal  -->
     <div id="delete_modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content">
                <div class="modal-body text-center p-4">
                    <form method="post" enctype="multipart/form-data" id="deleteForm" >
                        {% csrf_token %}
                        <h4 class="">Are you sure you want to delete?</h4>
                        <input type="hidden" name="id" id="delete_id" />
                        <button type="submit" class="btn btn-danger">Yes</button>
                        <button type="button" class="btn btn-light text-dark" data-dismiss="modal">No</button>
                </form>
                </div> 
            </div> 
        </div> 
    </div> 


</body>


<script>
    $('.delete-button').click( function() {
      var id = $(this).data('id');
       $('#delete_id').val(id);
   })
 
       $('#deleteForm').submit(function(event) {
        
         event.preventDefault();
         
         var formData = new FormData($(this)[0]);
       
     
       $.ajax({
         url: '{% url "delete_user_role" %}',
         type: 'POST',
         data: formData,
         processData: false,
         dataType: 'json',
         contentType: false,
         success: function(response) {
           if(response.status=='success'){
            $('#modal-delete').modal('hide');
            setTimeout(function () {
                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    text: 'User role Deleted Successfully.',
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: 'OK'
                });
            }, 1000);
            setTimeout(function () {
                location.reload();
            }, 2000);
          
           }
           else{
       
               $('#delete_msg').html('<div class="text-danger">'+response.msg+'</div>');
           }
         },
         error: function(xhr, status, error) {
        
           console.log(error);
         }
       });
        
   });
</script>



</html>