{% 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 %}
<style>
    	a.clear_sign.btn.btn-border.btn-round.border-active {
        padding: 8px 25px;
        font-size: 14px !important;
        text-transform: uppercase;
        color: #000;
        border: 1px solid #000 !important;
        border-radius: 50px;
        margin: 0 10px 0 0;
        /* box-shadow: none !important; */
        line-height: 20px;
    }
	a.save-signature{
    	border-radius:50px;
    	padding:8px 25px !important;
    	font-size:14px;
    	line-height:20px;
    	background:#0b9cda !important;
    	border:1px solid #0b9cda !important;
    	color:#fff !important;
    	outline:none !important;
    	box-shadow: none !important;
	}
</style>
<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">Designation</label>
                                        <input type="text" class="form-control form-control-solid" placeholder="Enter Designation" name="designation"  value="{% if userinfo.designation %}{{ userinfo.designation }} {% endif %}" id="designation" 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>

                                      {% if '1' in request.user.get_role %}
                                        <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>
                                        {% endif %}
                                        {% if '1' in request.user.get_role %}
                                        <div class="col-md-6 fv-row fv-plugins-icon-container">
                                            <label class="required fs-5 fw-semibold mb-2">Allow Job Group Chat?</label>
                                            <select name="job_chat" id="job_chat" class="form-select form-select-solid" data-control="select2" data-placeholder="Allow job group chat"  tabindex="0" required>
                                                <option></option>
                                                <option value="0" {% if userinfo.user.job_chat == 0 %} selected {% endif %}>No</option>
                                                <option value="1" {% if userinfo.user.job_chat == 1 %} selected {% endif %}>Yes</option>
                                               
                                            </select>
                                            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div>
                                        </div>
                                        {% endif %}
                                        <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 password" 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 confirm_password" 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 id="replacementTechDiv" class="col-md-6 fv-row fv-plugins-icon-container" style="display:none">
                                            <label class="required fs-5 fw-semibold mb-2" >Select Replacement Technician</label><br>
                                            <select id="replacementTech" name="replacement_id" class="form-control">
                                              <option value="">-- Select technician --</option>
                                            </select>
                                        </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 class="col-md-6  fv-plugins-icon-container">-->
                                       <!--     <label class="fs-5 fw-semibold mb-2">Signature</label>-->
                                       <!--     <canvas id="signature-pad" class="form-control border" width=400 height=200></canvas>-->
                                       <!--     <input type="hidden" name="signature_data" id="signature-data">-->
                                       <!--     <button type="button" class="btn btn-sm btn-light mt-2" id="clear-signature">Clear</button>-->
                                       <!-- </div>-->
                                          {% if user.signature != None %}
                                          <div class="sign-date col-md-5">
        									<div colspan="3">
        										<label class=" fs-5 fw-semibold mb-2">Existing Signature:</label>
                                                <div class="col-md-6  fv-plugins-icon-container"> <img src="/media/{{user.signature}}" alt="Signature" width="200"></div>
                                            </div>
                                        </div>
                                      {% endif %}
                                        <div class="sign-date col-md-5 sign-datehere">
        									<div colspan="3">
        										<label class=" fs-5 fw-semibold mb-2">Signature:</label>
        										<div class="canwrap">
        											<div height="200" style="border: 1px solid;margin-bottom:10px;width: 352px;">
        												<canvas id="canvas1" width="350" height="200" style="background-color:#ffffff;"></canvas>
        											</div>
        										</div>
        										<a class="clear_sign btn btn-border btn-round border-active" onclick="clear1()">clear</a>
        										<!--<a href="" id="clear" class="clear">Clear Signature</a>-->
        										<textarea id="signature641" class="signature64" name="signature" style="display: none;"></textarea>
        										<a href="javascript:void(0)" id="btnSaveSignature1" class="btn btn-primary btn-border btn-round save-signature" >Save Signature</a>
        										<!--<span class="sign_saved" style="display:none"> Signature Saved <i class="icon-check-sign"></i></span>-->
        										<!--<p class="signature_error" style="display:none"><strong class="error">Please enter Digital signature or type signature</strong></p>-->
        										<!--<p>Signature Image</p>-->
        										<!--<br>-->
        										<img id="canvasImage1" name="canvasImage" style="display:none; height:100px;">
        									</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 src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
<script>
    const canvas = document.getElementById('signature-pad');
    const signaturePad = new SignaturePad(canvas);

    document.getElementById('clear-signature').addEventListener('click', function () {
        signaturePad.clear();
    });

    document.querySelector('form').addEventListener('submit', function (e) {
        if (!signaturePad.isEmpty()) {
            document.getElementById('signature-data').value = signaturePad.toDataURL();
        }
    });
</script>
<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>
		
		
	
		     <script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>
<script type='text/javascript' src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
<script type="text/javascript">

	$(function () {
	    window.signaturePad1 = new SignaturePad($('#canvas1').get(0), {
	    });
	    
	  })
	  function validateForm() {
	      var signature_text = $('.signature_text').val();
	               if( signaturePad1.isEmpty() && signature_text == ''){
	                 alert("Please fill one of the field Owner’s Signature or Type Signature");
	                  return false
	             }
	            
	             }
	  var clear1 = function () {
	    window.signaturePad1.clear();
	    document.getElementById("canvasImage1").src="";
	 document.getElementById("signature641").value ="";
	 $('.sign_saved').hide();
	 $('#canvasImage1').hide();
	  }
	  
	      
	  $("#btnSaveSignature1").click(function(e){
	      e.preventDefault();
	                  html2canvas([document.getElementById('canvas1')], {
	                      onrendered: function (canvas) {
	                          var canvas_img_data = canvas.toDataURL('image/png');
	                          var img_data = canvas_img_data.replace(/^data:image\/(png|jpg);base64,/, "");
	                          // console.log(img_data);
	                          document.getElementById("canvasImage1").src="data:image/gif;base64,"+img_data;
	                        //  document.getElementById("signature641").value = img_data;
	                          $("#signature641").val(img_data);
	                          //alert($("#signature641").val());
	                            $data = document.getElementById("signature641").value;
	                          if($data){
	                            $('.sign_saved').show();  
	                            $('#canvasImage1').show();  
	                          }
	                      }
	                  });
	  });
	  $("#btnSaveSignature1").click(function(e) {
	                 $('html,body').animate({
	                     scrollTop: $(".sign-datehere").offset().top},
	                     'slow');
	             });
		</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');
    }

})
	     
	     
$('.sendcred').on('change',function()
{
    console.log('here');
  var valueselected=$(this).val();
  if(valueselected==1)
  {
      $(".confirm_password").attr('required','true');
      $(".password").attr('required','true');
  }
  else
  {
       $(".confirm_password").removeAttr('required');
       $(".password").removeAttr('required');
  }
})
	     
</script>

<script>
const CURRENT_USER_ID = "{{ userinfo.user.id }}";
const CURRENT_REPLACEMENT_ID = "{{ userinfo.user.replacement_technician_id|default:'' }}";
document.addEventListener("DOMContentLoaded", function () {
    const statusCheckbox = document.getElementById("is_active");
    const replacementDiv = document.getElementById("replacementTechDiv");
    const replacementSelect = document.getElementById("replacementTech");

    function loadTechniciansAndSelect() {
        fetch(`/api/technicians/?exclude_id=${CURRENT_USER_ID}`)
            .then(res => res.json())
            .then(data => {
                replacementSelect.innerHTML =
                    '<option value="">-- Select technician --</option>';

                data.forEach(t => {
                    const selected =
                        (CURRENT_REPLACEMENT_ID && t.id == CURRENT_REPLACEMENT_ID)
                        ? 'selected'
                        : '';

                    replacementSelect.innerHTML += `
                      <option value="${t.id}" ${selected}>
                        ${t.name}
                      </option>`;
                });
            });
    }

    function handleStatusChange() {
        // INACTIVE
        if (!statusCheckbox.checked) {
            replacementDiv.style.display = "block";
            replacementSelect.setAttribute("required", "required");
            loadTechniciansAndSelect();
        } else {
            // ACTIVE
            replacementDiv.style.display = "none";
            replacementSelect.removeAttribute("required");
            replacementSelect.value = "";
        }
    }

    // Run on page load
    handleStatusChange();

    // Run on toggle
    statusCheckbox.addEventListener("change", handleStatusChange);
});
</script>

    
    {% endblock script %}