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

{% load i18n %}

{% block title %}{% translate "Add 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;">Add</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">Add 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">
                            <!--<button type="button" class="btn btn-light-primary me-3" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">-->
                            <!--    <i class="ki-duotone ki-filter fs-2"><span class="path1"></span><span class="path2"></span></i>        Filter-->
                            <!--</button>-->
                            <!--    <div class="menu menu-sub menu-sub-dropdown w-300px w-md-325px" data-kt-menu="true">-->
                            <!--        <div class="px-7 py-5">-->
                            <!--            <div class="fs-5 text-dark fw-bold">Filter Options</div>-->
                            <!--        </div>-->
                            <!--        <div class="separator border-gray-200"></div>-->
                            <!--    </div>  -->
                            <!--<button type="button" class="btn btn-light-primary me-3" data-bs-toggle="modal" data-bs-target="#kt_modal_export_users">-->
                            <!--    <i class="ki-duotone ki-exit-up fs-2"><span class="path1"></span><span class="path2"></span></i>        Export-->
                            <!--</button>-->
                            <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>
	    <!--<div class="card-body pt-6">-->
	    <!--	<div class=" me-n7 pe-7" >-->
                <!--<div class="notice d-flex bg-light-warning rounded border-warning border border-dashed mb-9 p-6">-->
                <!--    <i class="ki-duotone ki-information fs-2tx text-warning me-4"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>-->
                <!--        <div class="d-flex flex-stack flex-grow-1 ">-->
                <!--            <div class=" fw-semibold">-->
                <!--                    <h4 class="text-gray-900 fw-bold">Warning</h4>-->
                <!--                    <div class="fs-6 text-gray-700 ">Updating address may affter to your <a href="#">Tax Location</a></div>-->
                <!--            </div>-->
                <!--        </div>-->
    
                <!--</div>-->
                
                
                   
                    <form method="post" action="{%url 'user:create' %}" enctype="multipart/form-data" >
                    {% 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" pattern="^[a-zA-Z]+$" title="Only alphabets are allowed" placeholder=" Enter First Name" name="first_name" id="first_name" value="{{ form.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" pattern="^[a-zA-Z]+$" title="Only alphabets are allowed" placeholder="Enter Last Name" name="last_name"  value="{{ form.last_name }}" id="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="{{ form.designation }}" 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" name="email" value="{{ form.email }}"  id="email" pattern="[a-zA-Z0-9._\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,4}" title="Special characters and space is not allowed" 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" value="{{ form.phone1 }}"  id="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" data-control="select2" data-placeholder="Select Role" class="form-select form-select-solid" multiple="multiple" tabindex="0" required>
                                                <option></option>
                                                <option value="1" {% if '1' in selected_roles %} selected {% endif %}>Admin</option>
                                                <option value="2" {% if '2' in selected_roles %} selected {% endif %}>Sales</option>
                                                <option value="3" {% if '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="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" selected >No</option>
                                                <option value="1" >Yes</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="required fs-5 fw-semibold mb-2">Password</label>
                                        <input  type="password" class="form-control form-control-solid" pattern="(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain one uppercase and lowercase letter, and at least 8 or more characters" placeholder="Enter Password" name="password" id="password" 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">Confirm Password</label>
                                        <input type="password" class="form-control form-control-solid" placeholder="Enter Confirm Password"  pattern="(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain one uppercase and lowercase letter, and at least 8 or more characters" name="confirm_password" id="confirm_password" 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 showapp" style="display:none;">
                                        <label class=" fs-5 fw-semibold mb-2" >Send App Credentials?</label><br>
                                        <select name="send_credentials"  class="form-select sendcred"  data-control="select2" data-placeholder="Select">
                                            <option></option>
                                            <option value="1" >Yes</option>
                                            <option value="0" >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"  checked="checked">
                                            <span class="form-check-label fw-semibold text-muted">
                                                Active
                                            </span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
        
            
                        <div class="card card-flush">
                            <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"  value="{{ form.street }}" name="street" id="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" value="{{ form.city }}"  name="city"  id="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" tabindex="0"   data-control="select2" data-placeholder="Select State" name="state" id="state">

                                        <option></option>
                                        <option value="ACT"  {% if form.state == 'ACT' %} selected {% endif %}>Australian Capital Territory</option>
                                        <option value="NSW" {% if form.state == 'NSW' %} selected {% endif %}>New South Wales </option>
                                        <option value="NT" {% if form.state == 'NT' %} selected {% endif %}>Northern Territory</option>
                                        <option value="QLD" {% if form.state == 'QLD' %} selected {% endif %}>Queensland </option>
                                        <option value="SA" {% if form.state == 'SA' %} selected {% endif %}>South Australia</option>
                                        <option value="TAS" {% if form.state == 'TAS' %} selected {% endif %}>Tasmania </option>
                                        <option value="VIC" {% if form.state == 'VIC' %} selected {% endif %}>Victoria </option>
                                        <option value="WA" {% if form.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" value="{{ form.post_code }}"  placeholder="Enter Postcode" name="post_code" id="postcode"  >
                                        <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"  data-control="select2" data-placeholder="Select Country"  tabindex="0" 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-row 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>-->
                    <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>
  
 
  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');
            }
            
	      })

</script>
    
    {% endblock script %}