{% extends "layout/default.html" %}

{% load i18n %}

{% block title %}{% translate "Edit User" %}{% 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 %}
	<!--begin::Item-->
		<li class="breadcrumb-item">
			<span class="bullet bg-gray-400 w-5px h-2px"></span>
		</li>
		<!--end::Item-->
		<!--begin::Item-->
		<li class="breadcrumb-item text-muted" style="text-transform: capitalize;">Edit</li>
		<!--end::Item-->
{% endblock  %}

{% block content %}

<div class="custom mt-3 create-cust">
    <div class="row g-5 g-xl-10 mb-5 mb-xl-10">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">

            <div class="card card-flush single-card-head">
        	    <div class="card-header pt-7 pb-7">

        		    <h3 class="card-title align-items-start flex-column">
        			    <span class="card-label fw-bold text-gray-800">Edit User</span>
                
        		    </h3>
        		    
        		    
                        {% if messages %}
                        <div class="d-flex justify-content-center align-items-center">
                            {% for message in messages %}
                              <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}success{% endif %}" role="alert" style="width: 300px;">
                                {{ message }}
                                </div>  
                            {% endfor %}
                         </div>
                        {% endif %}
                    
        		    
        		    
        		    
        		    <div class="card-toolbar">
        			    <div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
                           
                                <a href="{%url 'user:list'%}"><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_user">
                                   View List
                             </button></a>
                        </div>
        	    	</div>
                </div>
            </div>
                
                
                      <form method="post" action="{%url 'user:edit' user.id  %}" >
                        {% csrf_token %}
                            <div class="card card-flush mt-6 mb-6">
                                <div class="card-body pt-6">
                                    <div class="row g-9">
                                        <div class="col-md-6 fv-row fv-plugins-icon-container">
                                            <label class="required fs-5 fw-semibold mb-2" >First Name</label>
                                            <input type="text" class="form-control form-control-solid" placeholder="Enter First Name" pattern="^[a-zA-Z]+$" title="Only alphabets are allowed"  name="first_name" id="first_name"  value="{{userinfo.first_name}}"required>
                                            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div>
                                        </div>
                                        <div class="col-md-6 fv-row fv-plugins-icon-container">
                                            <label class="required fs-5 fw-semibold mb-2">Last Name</label>
                                            <input type="text" class="form-control form-control-solid" placeholder="Enter Last Name" pattern="^[a-zA-Z]+$" title="Only alphabets are allowed"  name="last_name" id="last_name"  value="{{userinfo.last_name}}" required>
                                            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div>
                                        </div>
                                        <div class="col-md-6 fv-row fv-plugins-icon-container">
                                            <label class="required fs-5 fw-semibold mb-2">Email</label>
                                            <input type="email" class="form-control form-control-solid" placeholder="Enter Email" pattern="[a-zA-Z0-9._\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,4}" title="Special characters and space is not allowed"  name="email" id="email"  value="{{userinfo.email}}" required>
                                            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div>
                                        </div>
                                        
                                        <div class="col-md-6 fv-row fv-plugins-icon-container">
                                            <label class="fs-5 fw-semibold mb-2" >Phone</label> 
                                            <input  type="number" class="form-control form-control-solid" placeholder="Enter Phone" name="phone1" id="phone1"  value="{{userinfo.phone1}}" >
                                            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                            </div>
                                        </div>

                                      
                                        <div class="col-md-6 fv-row fv-plugins-icon-container">
                                            <label class="required fs-5 fw-semibold mb-2">Role</label>
                                            <select name="role" id="role" class="form-select form-select-solid" data-control="select2" data-placeholder="Select Role" multiple="multiple" tabindex="0" required>
                                                <option></option>
                                                <option value="1" {% if "Admin" in userinfo.user.get_role_names  or '1' in selected_roles %} selected {% endif %}>Admin</option>
                                                <option value="2" {% if "Sales" in userinfo.user.get_role_names  or '2' in selected_roles %} selected {% endif %}>Sales</option>
                                                <option value="3" {% if "Technician" in userinfo.user.get_role_names or '3' in selected_roles  %} selected {% endif %}>Technician</option>
                                            </select>
                                            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div>
                                        </div>
                                        <div class="col-md-6 fv-row fv-plugins-icon-container">
                                            <label class=" fs-5 fw-semibold mb-2">Password</label>
                                            <input  type="password" class="form-control form-control-solid" placeholder="Enter Password" name="password" id="password"  pattern="(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain one uppercase and lowercase letter, and at least 8 or more characters"  >
                                            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                            </div>
                                        </div>
                                        <div class="col-md-6 fv-row fv-plugins-icon-container">
                                            <label class=" fs-5 fw-semibold mb-2">Confirm Password</label>
                                            <input type="password" class="form-control form-control-solid" placeholder="Enter Confirm Password" name="confirm_password" id="confirm_password"  pattern="(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain one uppercase and lowercase letter, and at least 8 or more characters" >
                                            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                            </div>
                                        </div>
                                         <div class="col-md-6 fv-row fv-plugins-icon-container showapp" {% if "Technician" in userinfo.user.get_role_names or '3' in selected_roles  %} {% else %} style="display:none;" {% endif %}>
                                        <label class=" fs-5 fw-semibold mb-2" >{% if  userinfo.user.is_sent_creadentials == 1 %}Resend{% else %} Send {% endif %} App Credentials?</label><br>
                                        <select name="send_credentials"  class="form-select sendcred"  data-control="select2" data-placeholder="Select"  {% if "Technician" in userinfo.user.get_role_names or '3' in selected_roles  %} required {% else %}  {% endif %}>
                                            <option></option>
                                            <option value="1" >Yes</option>
                                            <option value="0"  {% if "Technician" in userinfo.user.get_role_names or '3' in selected_roles  %} selected {% else %} {% endif %} >No</option>
                                        </select>
                                    </div>
                                        <div class="col-md-6 fv-row fv-plugins-icon-container">
                                            <label class="required fs-5 fw-semibold mb-2" >Status</label><br>
                                            <label class="form-check form-switch form-check-custom form-check-solid">
                                                <input class="form-check-input" name="is_active" id="is_active" type="checkbox" value="on"  {% if userinfo.is_active %}checked="checked"{% endif %}>
                                                <span class="form-check-label fw-semibold text-muted">
                                                    Active
                                                </span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card card-flush mt-6 mb-6">
                                <div class="card-body pt-6">
                  
                                    <div class="row g-9 mb-5">
                                        

                                   
                                          <div class="col-md-6 fv-row fv-plugins-icon-container">
                                            <label class="fs-5 fw-semibold mb-2">Street</label>
                                            <input class="form-control form-control-solid" placeholder="Enter Street" name="street" id="street" value="{{userinfo.street}}" >
                                            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                            </div>
                                            

                                        </div>
                                        <div class="col-md-6 fv-row fv-plugins-icon-container">
                                            <label class=" fs-5 fw-semibold mb-2">Suburb</label>
                                            <input class="form-control form-control-solid" placeholder="Enter Suburb" name="city"  id="city" value="{{userinfo.city}}"  >
                                            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                            </div>
                                        </div>
                                        <div class="col-md-6 fv-row fv-plugins-icon-container">

                                            <label class="fs-5 fw-semibold mb-2">State</label>
                                            <select class="form-select form-select-solid"  data-control="select2" data-placeholder="Select State"  tabindex="0"  name="state" id="state" >

                                                <option></option>
                                                <option value="ACT"  {% if userinfo.state == 'ACT' %} selected {% endif %}>Australian Capital Territory</option>
                                                <option value="NSW" {% if userinfo.state == 'NSW' %} selected {% endif %}>New South Wales </option>
                                                <option value="NT" {% if userinfo.state == 'NT' %} selected {% endif %}>Northern Territory</option>
                                                <option value="QLD" {% if userinfo.state == 'QLD' %} selected {% endif %}>Queensland </option>
                                                <option value="SA" {% if userinfo.state == 'SA' %} selected {% endif %}>South Australia</option>
                                                <option value="TAS" {% if userinfo.state == 'TAS' %} selected {% endif %}>Tasmania </option>
                                                <option value="VIC" {% if userinfo.state == 'VIC' %} selected {% endif %}>Victoria </option>
                                                <option value="WA" {% if userinfo.state == 'WA' %} selected {% endif %}>Western Australia </option>
                                            </select>
                                            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                            </div>
                                        </div>

                                           
                                        
                                         
                    
                                        <div class="col-md-6 fv-row fv-plugins-icon-container">
                                            <label class=" fs-5 fw-semibold mb-2">Postcode</label>
                                            <input type="number" class="form-control form-control-solid" placeholder="Enter Postcode" name="post_code" id="postcode" value="{{userinfo.post_code}}"  >
                                            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                            </div>
                                        </div>
                                        



                                        <div class="col-md-6 fv-row fv-plugins-icon-container">
                                            <label class=" fs-5 fw-semibold mb-2">Country</label>
                                            <select   class="form-select form-select-solid" tabindex="0"  data-control="select2" data-placeholder="Select Country" name="country" id="country">
                                               
                                                <option value="Australia" selected >Australia</option>
                                                
                                                <!-- Add more country options as needed -->
                                            </select>
                                            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div>

                                        </div>
                                         
                                    </div>
                
                
                
                                     <div class="card-toolbar">
                        			    <div>
                                            <a  href="{% url 'user:list' %}" id="kt_ecommerce_edit_order_cancel" class="btn btn-light me-5">
                                                Cancel
                                            </a>
                                             <button type="submit" class="btn btn-primary" >
                                                   Save
                                             </button>
                                      </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                
                
                
                
                
                
                
                <!--<div class="fv-row mb-5">-->
                <!--    <div class="d-flex flex-stack">-->
                <!--        <div class="me-5">-->
                <!--            <label class="fs-5 fw-semibold">Use as a billing adderess?</label>-->
                <!--            <div class="fs-7 fw-semibold text-muted">If you need more info, please check budget planning</div>-->
                <!--        </div>-->
                <!--            <label class="form-check form-switch form-check-custom form-check-solid">-->
                <!--                <input class="form-check-input" name="billing" type="checkbox" value="1" checked="checked">-->
                <!--                    <span class="form-check-label fw-semibold text-muted">-->
                <!--                        Yes-->
                <!--                    </span>-->
                <!--            </label>-->
                <!--    </div>-->
                <!--</div>-->
            <!-- </div>
	           </div>-->
        <!--    </div>-->
        <!--</div>-->
    </div>
</div>
<script>
    $(document).on('change','#password',function()
    {
        console.log($(this).val());
        if($(this).val()!='')
        {
            $('#confirm_password').attr('required',true);
        }
        else
        {
            $('#confirm_password').removeAttr('required');
        }
    });
</script>
   
<script>
  const postcodeInput = document.getElementById('postcode');
  postcodeInput.addEventListener('input', () => {
    if (postcodeInput.value.length > 6) {
      postcodeInput.value = postcodeInput.value.slice(0, 6); // Truncate to 10 digits
    }
  });
     const phone1 = document.getElementById('phone1');
  phone1.addEventListener('input', () => {
    if (phone1.value.length > 0 || phone1.value.length <= 11) {
      phone1.value = phone1.value.slice(0, 11); // Truncate to 10 digits
    }
    else
    {
    }
  });
</script>
				
{% endblock content %}
{% block script %}
    
	 <script>
	  $('#role').on('change',function()
	      {
	         console.log($(this).val());
	         var listrole=$(this).val();
	         if (listrole.includes("3")) {
                $(".showapp").css('display','block');
                 $(".sendcred").attr('required','true');
            }
            else
            {
                 $(".showapp").css('display','none');
                 $(".sendcred").removeAttr('required');
            }
            
	      })

</script>
    
    {% endblock script %}