{% extends 'layout/default.html' %}
{% load i18n %}
{% block title %}{% translate "User List" %}{% endblock %}

{% block breadcumbheading %} {% translate "Manage Users" %} {% endblock  %}

{% block breadcumbfirst %}
    <a href="/user/list/" class="text-muted text-hover-primary" style="text-transform: capitalize;" >Manage Users </a>
{% endblock  %}

{% block breadcumbaddmore %}
	<li class="breadcrumb-item"> <span class="bullet bg-gray-400 w-5px h-2px"></span> 	</li>
	<li class="breadcrumb-item text-muted" style="text-transform: capitalize;">List</li>
{% endblock  %} 

{% block content %}
    <div class="custom mt-3 cust-list">
        <div class="row g-5 g-xl-10 mb-5 mb-xl-10 cust-row">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                <div class="card card-flush h-md-100 cust-card">
            	    <div class="card-header pt-7">
            		    <h3 class="card-title align-items-start flex-column">
            			    <span class="card-label fw-bold text-gray-800">User List</span>
            		    </h3>
                        {% if messages %}
                {% for message in messages %}
                  <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}success{% endif %}" role="alert">
                    {{ message }}
                    </div>  
                {% endfor %}
            {% endif %}
            		    <div class="card-toolbar">
            			    <div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
                                <a href="{%url 'user:create'%}"> 
                                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_user"> Add User </button>
                                </a>
                            </div>
            	    	</div>
        	        </div>
    	            <div class="card-body pt-6"> 
    	                <form action="#" class="sp-searchpanel mb-7">
                            <div class="search-row">
                                <input name="user_name" id="user_name"  value="{% if request.GET.user_name %}{{ request.GET.user_name }}{% endif %}" class="form-control ui-autocomplete-input" placeholder="Name" autocomplete="off">
            					<input name="email" id="email"  value="{% if request.GET.email %}{{ request.GET.email }}{% endif %}" class="form-control ui-autocomplete-input" placeholder="Email" autocomplete="off">
            				    <input type="number" name="phone" id="phone"  value="{% if request.GET.phone %}{{ request.GET.phone }}{% endif %}" class="form-control ui-autocomplete-input" placeholder="Phone" autocomplete="off">
                                <select name="role" id="role"  data-control="select2" data-placeholder="Select Role" class="form-select " tabindex="0" >
                                    <option></option>
                                    <option value="1"  {% if request.GET.role == '1' %} selected {% endif %} >Admin</option>
                                    <option value="2" {% if request.GET.role == '2' %} selected {% endif %}>Sales</option>
                                    <option value="3" {% if request.GET.role == '3' %} selected {% endif %}>Technician</option>
                                </select> &nbsp;
                                <div class="col-3 formfbtn">
                                    <button type="submit" class="btn btn-alt-primary search-btn"><i class="fa fa-search pe-sm-1"></i>Search</button>
                                    <a href="{% url 'user:list' %}" class="btn btn-alt-danger reste-btn"><i class="fa fa-refresh pe-sm-1"></i>Reset</a>
                                </div>
                            </div>
                        </form>
    	    	        <div class="table-responsive cust-table mt-2">
    	    	            {% if users %}
        			            <table class="table table-row-dashed align-middle gs-0 gy-3 my-0">
            			    	    <thead>
            			    		    <tr class="fs-7 fw-bold text-gray-400 border-bottom-0">
            			    		    	<th class="pb-3 min-w-100px fw-bold text-start">ID</th>
            			    		    	
            			    		    	<th class="pb-3 min-w-100px fw-bold text-start text-role">NAME</th>
            			    		    	<th class="pb-3 min-w-100px fw-bold text-start">EMAIL</th>
            			    		    	<th class="pb-3 min-w-100px fw-bold text-start">PHONE</th>
            			    		    	<!-- <th class="pb-3 min-w-100px fw-bold text-start">COUNTRY</th>
            			    		    	<th class="pb-3 min-w-100px fw-bold text-start">STATE</th>
            			    		    	<th class="pb-3 min-w-100px fw-bold text-start">CITY</th> -->
            			    		    	<th class="pb-3 min-w-100px fw-bold text-start text-role ">ROLE</th>
            			    		    	<th class="pb-3 min-w-100px fw-bold text-start">STATUS</th>
            			    		    	<th class="pb-3 w-50px fw-bold text-start">ACTIONS</th>
            			    		    </tr>
            			    	    </thead>
        			    	        <tbody>
            			    	        {% for user in users %}
                			    	        {% if not user.is_superuser %}
                			    		       <tr> 
                			    			        <td>
                			    				        <div class="align-items-center">
                			    				    	    <div class="justify-content-start flex-column">
                			    					    	    <a href="#" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">{{forloop.counter}}</a>
                			    				    	    </div>
                			    			        	</div>
                			    			        </td>
                			    			        
                			    			      
                			    			        <td class="text-start pe-0 text-role">
                			    				        <span class="text-black-600  fw-bold fs-6 ">{% if user.userinfo.first_name %}{{ user.userinfo.first_name }} {{ user.userinfo.last_name }}{%else%}-{%endif%}</span>
                			    			        </td>
                			    			        
                			    			        <td class="text-start pe-12 email-td">
                			    			        	<span class="text-black-600  fw-bold fs-6">{{ user.email }}</span>
                			    			        </td>
                			    			        <td class="text-start pe-0">
                			    			        	<span class="text-black-600  fw-bold fs-6">{% if user.userinfo.phone1 %}{{ user.userinfo.phone1}}{%else%}-{%endif%}</span>
                			    			        </td>
                			    			          <td class="text-start pe-0 text-role">
                			    			        	<span class="text-black-600  fw-bold fs-6"> {% if user.is_superuser %}Super Admin  {% else %}  {{user.get_role_names }}{%endif%}</span>
                			    			        </td>
                			    		            <td class="text-start pe-12">
                                                        {% if user.userinfo.get_status == 'Active' %}
                                                            <span class="badge py-3 px-4 fs-7 badge-light-primary product-state active">{{ user.userinfo.get_status }}</span>
                                                        {% else %}
                                                            <span class="adge py-3 px-4 fs-7 badge-light-primary product-state inactive">{{ user.userinfo.get_status }}</span>
                                                        {% endif %}
                                                    </td>
                			    			        <td class="text-end pe-0">
                			    			            {% if not user.is_superuser %}
                                                            <a href="#" class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">Select<i class="ki-duotone ki-down fs-5 ms-1"></i></a>
                                                            <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true" style="">
                                                           
                                                                <div class="menu-item px-3"> 
                                                                    <a href="{%url 'user:edit' user.id %}" class="menu-link px-3">Edit</a>
                                                                </div>
                                                                
                                                                {% if '3' in user.get_role %}
                                                                    <div class="menu-item px-3">
                                                                        <a href="{%url 'user:send_credentials' user.id %}" class="menu-link px-3">Send Temp Password</a>
                                                                    </div>
                                                                {% endif %}
                                                               
                                                                <div class="menu-item px-3">
                                                                    <a href="javascript:void(0);" onclick="confirmDelete({{user.id}})" class="menu-link px-3" data-kt-users-table-filter="delete_row">Delete</a>
                                                                </div>
                                                                
                                                            </div>
                                                        {% else %}
                                                            <span class="user-na">-</span>
                                                        {% endif %}
                                                    </td>
                			    		        </tr>
                			                {% endif %}
            			    		    {% endfor %}
        			    	        </tbody>
        	    		        </table>
        						<nav aria-label="Page navigation">
        							<ul class="pagination justify-content-end">
        								{% if users.has_previous %}
        								<li class="page-item">
        									<a class="page-link" href="?page=1" aria-label="First">
        										<span aria-hidden="true">&laquo;&laquo;</span>
        									</a>
        								</li>
        								<li class="page-item">
        									<a class="page-link" href="?page={{ users.previous_page_number }}" aria-label="Previous">
        										<span aria-hidden="true">&laquo;</span>
        									</a>
        								</li>
        								{% endif %}
        				
        								{% for i in users.paginator.page_range %}
        								<li class="page-item {% if users.number == i %}active{% endif %}">
        									<a class="page-link" href="?page={{ i }}">{{ i }}</a>
        								</li>
        								{% endfor %}
        				
        								{% if users.has_next %}
        								<li class="page-item">
        									<a class="page-link" href="?page={{ users.next_page_number }}" aria-label="Next">
        										<span aria-hidden="true">&raquo;</span>
        									</a>
        								</li>
        								<li class="page-item">
        									<a class="page-link" href="?page={{ users.paginator.num_pages }}" aria-label="Last">
        										<span aria-hidden="true">&raquo;&raquo;</span>
        									</a>
        								</li>
        								{% endif %}
        							</ul>
        						</nav>
    	    		        {% else %}
    	    		            No Record Found.
    	    		        {% endif %}
    	    	        </div>
    	            </div>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}

{% block script %}
<script>
    function confirmDelete(id) {
        let text;
        var delurl = "{% url 'user:delete' id=1%}"
        if (confirm("Are you sure you want to delete this record?") == true) 
        {
            $.ajax({
                url: delurl.replace('1',id),
                dataType: "json", 
                async: false
            });
            window.location.reload();
        }
    }
</script>
{% endblock script%}