{% extends 'layout/default.html' %}
{% load i18n %}
{% load querystring %}
{% 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">JOB CHAT INCLUDED?</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 email-td">
                			    			        	<span class="text-black-600  fw-bold fs-6">{% if user.job_chat == 1 %} Yes {% else %}  - {%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="openDeleteModal({{user.id}})" data-bs-toggle="modal" data-bs-target="#deleteModal" 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="?{% querystring request page=1 %}" aria-label="First">
        										<span aria-hidden="true">&laquo;&laquo;</span>
        									</a>
        								</li>
        								<li class="page-item">
        									<a class="page-link" href="?{% querystring request 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="?{% querystring request page=i %}">{{ i }}</a>
        								</li>
        								{% endfor %}
        				
        								{% if users.has_next %}
        								<li class="page-item">
        									<a class="page-link" href="?{% querystring request 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="?{% querystring request 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>
<div class="modal fade" id="deleteModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5>Select a replacement technician for future jobs</h5>
      </div>
      <div class="modal-body">
        <select id="replacementTech" class="form-control">
          <option value="">-- Select technician --</option>
        </select>
      </div>
      <div class="modal-footer">
        <button class="btn btn-danger" onclick="confirmDelete()">Yes, Delete</button>
        <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>

{% endblock content %}

{% block script %}
<script>

    let deleteUserId = null;

function openDeleteModal(userId) {
  deleteUserId = userId;
  document.getElementById("deleteModal").style.display = "block";

  // Load technicians
  fetch(`/api/technicians/?exclude_id=${userId}`)
    .then(res => res.json())
    .then(data => {
      const select = document.getElementById("replacementTech");
      select.innerHTML = '<option value="">-- Select technician --</option>';

      data.forEach(t => {
        select.innerHTML += `<option value="${t.id}">
          ${t.name}
        </option>`;
      });
    });
}

function closeModal() {
  document.getElementById("deleteModal").style.display = "none";
  deleteUserId = null;
}

function confirmDelete() {
    const replacementId = document.getElementById("replacementTech").value;
    console.log(replacementId,deleteUserId)
    if (!replacementId) {
        alert("Please select a replacement technician");
        return;
    }
     const CSRF_TOKEN = "{{ csrf_token }}";
    var delurl = "{% url 'user:delete' id=1%}"
    $.ajax({
        url: delurl.replace('1', deleteUserId),
        type: "POST",
        data: {
            replacement_id: replacementId,
            csrfmiddlewaretoken: CSRF_TOKEN
        },
        success: function(res) {
            if (res.success) {
                alert("Technician replaced and deleted");
                location.reload();
            }
        }
    });
}




    // 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%}