{% extends "layout/default.html" %}
{% load i18n %}
{% block title %}{% translate "Edit Customer" %}{% endblock %}

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

{% block breadcumbfirst %}
    <a href="/customer/list/" class="text-muted text-hover-primary" style="text-transform: capitalize;">Manage Customers </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;">Edit</li>
{% 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 Customer</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 'customer: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"  onsubmit="return validateForm()" class="form">
                            {% csrf_token %}
                            <div class="card card-flush mt-6 mb-6 parent_fulsh_card">
                                <div class="card-body pt-6">
                                    <div class="row g-9">
                                         <div class="col-md-6 fv-row fv-plugins-icon-containe">
                                            <label class="d-flex align-items-center required fs-5 fw-semibold mb-2">
                                                <span class="">Customer Type</span>
                                                
                                            </label>
                                            <select name="customer_type" id="customer" class="form-select form-select-solid"  data-control="select2" data-placeholder="Select Customer"  tabindex="0" required>
                                                <option></option>
                                             <option value="1"  {% if customer.is_individual == 1 %} selected {% endif %}>Individual</option>
                                                <option value="0"  {% if customer.is_individual == 0 %} selected {% endif %}>Company</option>
                                            </select>
                                            <input type="hidden" class="form-control form-control-solid" name="customer_info_id[]"  value="{{customer.id}}">
                                        </div> 
                                        <div class="col-md-6 fv-row fv-plugins-icon-container">
                                        <!-- <label class="required fs-5 fw-semibold mb-2">Status</label>
                                            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                            </div>
                                            <input class="form-check-input" type="checkbox" name="is_active" id="is_active" value="on" checked>
                                             <label class="form-check-label" for="status">
                                                    Active
                                            </label>   -->
                                            <label class=" 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 customer.is_active %} checked {% endif %}>
                                                <span class="form-check-label fw-semibold text-muted">
                                                    Active
                                                </span>
                                            </label>
                                             <span class="deleted_items"> </span> 
                                        </div>
                                        <div class="col-md-6 fv-row fv-plugins-icon-containe" id="companyField" style="display: block;">
                                            <label class="required fs-5 fw-semibold mb-2">Company Name</label>
                                            <input type="text" class="form-control form-control-solid" placeholder="Enter Company Name" name="company_name" id="company"   value="{{customer.company_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-containe individualFields" id="individualFields" style="display: block;">

                                            <label class="required fs-5 fw-semibold mb-2" id="fname">First Name</label>

                                            <input type="text" class="form-control form-control-solid" placeholder="Enter First Name" name="first_name" id="first_name"  value="{{customer.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 individualFields"  style="display: block;">

                                            <label class="required fs-5 fw-semibold mb-2" id="lname">Last Name</label>

                                            <input type="text" class="form-control form-control-solid" placeholder="Enter Last Name" name="last_name" id="last_name"  value="{{customer.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=" fs-5 fw-semibold mb-2" >Phone</label> 
                                                <input  type="number" class="form-control form-control-solid" placeholder="Enter Phone" name="phone1" id="phone1"  pattern="\d{10}" maxlength="10" value="{{customer.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">Email</label>

                                                <input type="email" class="form-control form-control-solid" placeholder="Enter Email" name="email[]" id="email" value="{{customer.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" for="abn">ABN</label> 
                                                <input  type="number" class="form-control form-control-solid" placeholder="Enter ABN Here" name="abn"  pattern="\d*" maxlength="11" minlength="11" id="abn" value="{{customer.abn }}" >
                                                <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" style="display:none">
                                            <label class="required fs-5 fw-semibold mb-2" for="is_primary">Primary</label> <br>
                                            <input type="checkbox" class="form-check-input" name="is_primary" id="is_primary1"  onchange="toggleCheckbox(this)"  value='True' checked>
                                            <!--<input type="checkbox" class="form-check-input" name="is_primary" id="is_primary"  value="True" {% if customer.is_primary %} checked {% endif %}>-->
                                            <!--<input type="hidden" name="is_primary" id="is_primary_hidden" value="{% if customer.is_primary %}True{% else %}False{% endif %}">-->
                                            <label class="form-check-label" for="is_primary">Primary email</label>
                                            <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" style="display:none;">
                                            <label class=" fs-5 fw-semibold mb-2" >Allow App Access?</label><br>
                                            <label class="form-check form-switch form-check-custom form-check-solid"  >
                                                <input class="form-control  form-check-input" name="app_access[]" id="app_access" onchange="toggleCheckbox(this)" type="checkbox" value="on" tabindex="0" checked>
                                                <span class="form-check-label fw-semibold text-muted">
                                                    Yes
                                                </span>
                                            </label>
                                        </div>
    
                                        <div class="col-md-6 fv-row fv-plugins-icon-container">
                                            <label class=" fs-5 fw-semibold mb-2" >{% if customer.user.is_sent_creadentials == 0 %} Send {% else %} Resend {% endif %} App Credentials? </label><br>
                                            <!--<label class="form-check form-switch form-check-custom form-check-solid"  >-->
                                            <!--    <input class="form-check-input" name="send_credentials[]" id="send_credentials" onchange="toggleCheckbox(this)" type="checkbox" value="on" checked tabindex="0" >-->
                                            <!--    <span class="form-check-label fw-semibold text-muted">-->
                                            <!--        {% if customer.user.is_sent_creadentials == 0 %} NO {% else %} Yes {% endif %}-->
                                            <!--    </span>-->
                                            <!--</label>-->
                                             <select name="send_credentials[]"  class="form-select form-select-solid"  data-control="select2" data-placeholder="Select"  tabindex="0" required>
                                                <option></option>
                                                <option value="1"   {% if customer.user.is_sent_creadentials == 0 %} selected {% endif %} >Yes</option>
                                                <option value="0" {% if customer.user.is_sent_creadentials == 1 %} selected {% endif %}>No</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6 fv-row fv-plugins-icon-container"  style="display:none;">
                                            <label class=" fs-5 fw-semibold mb-2" >Should receive all communication Emails?</label><br>
                                            <!--<label class="form-check form-switch form-check-custom form-check-solid"  >-->
                                            <!--    <input class="form-check-input form-control " name="receive_emails[]" id="receive_emails" onchange="toggleCheckbox(this)" type="checkbox" value="on" tabindex="0" checked>-->
                                            <!--    <span class="form-check-label fw-semibold text-muted">-->
                                            <!--        Yes-->
                                            <!--    </span>-->
                                            <!--</label>-->
                                             <select name="receive_emails[]"  class="form-select form-select-solid"  data-control="select2" data-placeholder="Select Customer"  tabindex="0" required>
                                                <option></option>
                                                <option value="1"   selected >Yes</option>
                                                <option value="0" >No</option>
                                            </select>
                                        </div>

                                        
                                        <input type="hidden" name="num_contacts" id="num_contacts" value="0">
                                        <div class="col-md-12 fv-row fv-plugins-icon-container">
                                            <button type="button" class="btn btn-primary px-6 align-self-center text-nowrap" id="addmorecontact" count="1" >Add More Contact</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="quu">
                                {% if customer_info %}
                                {% for cust in customer_info %}
                                <div class="card card-flush mt-6 mb-6"> 
                                    <div class="card-header pt-5">
                                        <h3 class="card-title align-items-start flex-column">
                                            <span class="card-label fw-bold text-dark">Additional Contact</span> 
                                            <span class="text-gray-400 mt-1 fw-semibold fs-6"></span> 
                                        </h3>
                                        <div class="card-toolbar"> 
                                           
                                            
                                            <a href="javascript:void(0);" id="delbtn" class="btn btn-sm fw-bold btn-secondary deletenow" data-cust_id="{{cust.id}}">Delete</a> 
                                        </div>
                                    </div>
                                    <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" name="first_name" id="first_name" value="{{cust.first_name}}" required   pattern="^[a-zA-Z]+$" title="Only alphabets are allowed"  > 
                                                 <input type="hidden" class="form-control form-control-solid" name="customer_info_id[]"  value="{{cust.id}}"> 
                                                <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" name="last_name" id="last_name" value="{{cust.last_name}}" required   pattern="^[a-zA-Z]+$" title="Only alphabets are allowed"  >
                                                <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" pattern="\d{10}" maxlength="10" value="{{cust.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">Email</label>
                                                <input type="email" class="form-control form-control-solid" placeholder="Enter Email" name="email[]" id="email" value="{{cust.email}}" required  pattern="[a-zA-Z0-9._\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,4}" title="Special characters and space is not allowed"> 

                                                <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="d-flex align-items-center required fs-5 fw-semibold mb-2"> 
                                                <span class="">Position</span> 
                                                </label>  
                                                <input type="text" class="form-control form-control-solid" placeholder="Enter Position" value="{{cust.position}}" name="position" id="position" required> 
                                            </div> 

                                            <div class="col-md-6 fv-row fv-plugins-icon-container" style="display:none">

                                                
                                               <label class="required fs-5 fw-semibold mb-2" for="is_primary">Primary</label> <br>
                                               
                                                <input type="hidden" name="is_primary" id="is_primary_hidden" value="False">
                                                <input type="checkbox" class="form-check-input" name="is_primary"  id="is_primary_{{ forloop.counter }}"     onchange="toggleCheckbox(this)"  value="True" {% if cust.is_primary %} checked {% endif %}>
                                              
                                                <label class="form-check-label" for="is_primary">Primary email</label>
                                                <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" >Allow App Access?</label><br>
                                            <!--<label class="form-check form-switch form-check-custom form-check-solid"  >-->
                                            <!--    <input class="form-control  form-check-input" name="app_access[]" id="app_access" type="checkbox" onchange="toggleCheckbox(this)" {% if cust.user.app_access == 0 %} value=""   {% else %} value="on" checked {% endif %} tabindex="0" >-->
                                            <!--    <span class="form-check-label fw-semibold text-muted">-->
                                            <!--        {% if cust.user.app_access == 0 %} No  {% else %}Yes {% endif %} -->
                                            <!--    </span>-->
                                            <!--</label>-->
                                            <select name="app_access[]"  class="form-select form-select-solid"  data-control="select2" data-placeholder="Select"  tabindex="0" required>
                                                <option value=""></option>
                                                <option value="1"  {% if cust.user.app_access == 1 %} selected {% endif %} >Yes</option>
                                                <option value="0" {% if cust.user.app_access == 0 %} selected {% endif %}>No</option>
                                            </select>
                                        </div>
    
                                        <div class="col-md-6 fv-row fv-plugins-icon-container">
                                            <label class=" fs-5 fw-semibold mb-2" >{% if cust.user.is_sent_creadentials == 0 %} Send {% else %} Resend {% endif %}  App Credentials?</label><br>
                                            <!--<label class="form-check form-switch form-check-custom form-check-solid"  >-->
                                            <!--    <input class="form-check-input" name="send_credentials[]" id="send_credentials" type="checkbox" onchange="toggleCheckbox(this)" value="on" checked tabindex="0" >-->
                                            <!--    <span class="form-check-label fw-semibold text-muted">-->
                                            <!--         Yes -->
                                            <!--    </span>-->
                                            <!--</label>-->
                                            <select name="send_credentials[]"  class="form-select form-select-solid"  data-control="select2" data-placeholder="Select"  tabindex="0" required>
                                                <option value=""></option>
                                                <option value="1"   {% if cust.user.is_sent_creadentials == 0 %} selected {% endif %} >Yes</option>
                                                <option value="0" {% if cust.user.is_sent_creadentials == 1 %} selected {% endif %}>No</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6 fv-row fv-plugins-icon-container"  >
                                            <label class=" fs-5 fw-semibold mb-2" >Should receive all communication Emails?</label><br>
                                            <!--<label class="form-check form-switch form-check-custom form-check-solid"  >-->
                                            <!--    <input class="form-check-input form-control " name="receive_emails{{forloop.counter}}[]" id="receive_emails" onchange="toggleCheckbox(this)" {% if cust.user.is_communication == 0 %} value="off"  {% else %} value="on" checked {% endif %} type="checkbox"  tabindex="0" >-->
                                            <!--    <span class="form-check-label fw-semibold text-muted">-->
                                            <!--     {% if cust.user.is_communication == 1 %}  No {% else %}  Yes {% endif %}-->
                                            <!--    </span>-->
                                            <!--</label>-->
                                            <select name="receive_emails[]"  class="form-select form-select-solid"  data-control="select2" data-placeholder="Select "  tabindex="0" required>
                                                <option value=""></option>
                                                <option value="1"   {% if cust.user.is_communication == 1 %} selected {% endif %} >Yes</option>
                                                <option value="0" {% if cust.user.is_communication == 0 %} selected {% endif %}>No</option>
                                            </select>
                                             
                                        </div>

                                            </div>
                                        </div> 
                                    </div> 
                                </div>
                                {% endfor %}
                                {% endif %}
                               
                            </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" name="street" id="street"  value="{{customer.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="{{customer.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 customer.state == 'ACT' %} selected {% endif %}>Australian Capital Territory</option>
                                                    <option value="NSW" {% if customer.state == 'NSW' %} selected {% endif %}>New South Wales </option>
                                                    <option value="NT" {% if customer.state == 'NT' %} selected {% endif %}>Northern Territory</option>
                                                    <option value="QLD" {% if customer.state == 'QLD' %} selected {% endif %}>Queensland </option>
                                                    <option value="SA" {% if customer.state == 'SA' %} selected {% endif %}>South Australia</option>
                                                    <option value="TAS" {% if customer.state == 'TAS' %} selected {% endif %}>Tasmania </option>
                                                    <option value="VIC" {% if customer.state == 'VIC' %} selected {% endif %}>Victoria </option>
                                                    <option value="WA" {% if customer.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" pattern="\d*" maxlength="6" value="{{customer.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"  data-control="select2" data-placeholder="Select Country"  tabindex="0" name="country" id="country"   value="{{customer.country }}" >
                                                            <option></option>
                                                            <option value="Australia" selected >Australia</option>
                                                           
                                                            <!-- Add more country options as needed -->
                                                        </select>
                                                </div>
                                        <div class="col-md-6 fv-row fv-plugins-icon-container" hidden>
                                                <label class="  fs-5 fw-semibold mb-2">Fax</label>
                                                <input class="form-control form-control-solid" placeholder="Enter Fax" name="fax" id="fax"  value="{{customer.fax }}">
                                                <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" hidden>
                                                <label class=" fs-5 fw-semibold mb-2">Website</label>
                                                <input class="form-control form-control-solid" placeholder="Enter Website" name="website" id="website" value="{{customer.website }}" >
                                                <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" hidden>
                                                <label class=" fs-5 fw-semibold mb-2">Contact Name</label>
                                                <input class="form-control form-control-solid" placeholder="Enter Contact Name" name="contact_name" id="contact_name" value="{{ customer.contact_name }}"  >
                                                <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" hidden>
                                                <label class=" fs-5 fw-semibold mb-2">Salutation</label>
                                                <input class="form-control form-control-solid" placeholder="Enter Salutation" name="salutation" id="salutation" value="{{ customer.salutation }}" >
                                                <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                                </div>
                                            </div>
                                        <div class="card-toolbar">
                            			    <div>
                                                <a  href="{% url 'customer: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>
                            </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>
{% endblock content %}
{% block script %}
    
	 <script>

               
           $('#customer').on("change", function (){
               var val=$(this).val();             
                if ( val== 0) {
                    $('#companyField').css('display','block');

                //   $(".individualFields").css('display','none');
                    $('#company').attr('required',true);
                    // $('#first_name').removeAttr('required');
                    // $('#last_name').removeAttr('required');
                    $('#fname').html("Director's First Name");
                    $('#lname').html("Director's Last Name");
                } else if (val == "1") {
                        $('#companyField').css('display','none');
                //   $(".individualFields").css('display','block');
                    $('#company').removeAttr('required');
                    //  $('#first_name').attr('required',true);
                    //   $('#last_name').attr('required',true);
                    $('#fname').html("Director's First Name");
                    $('#lname').html("Director's Last Name");

                } else {
                   $('#companyField').css('display','none');
                    $(".individualFields").css('display','block');
                }
            });
     
                
            $(document).ready(function () {
              
               $("#addmorecontact").click(function(){
                    var count=parseInt($(this).attr('count'));
                    count=count+1;
                    $(this).attr('count',count);
                    console.log(count);

                    // var foo =`<div class="card card-flush mt-6 mb-6"> <div class="card-header pt-5"><h3 class="card-title align-items-start flex-column"> <span class="card-label fw-bold text-dark">Additional Contact</span> <span class="text-gray-400 mt-1 fw-semibold fs-6"></span> </h3><div class="card-toolbar"> <a href="javascript:void(0);" id="delbtn" class="btn btn-sm fw-bold btn-secondary deletenow" data-cust_id="0">Delete</a> </div></div> <div class="card-body pt-6"> <div class="row g-9"> <div class="col-md-6 fv-row fv-plugins-icon-container individualFields" id="individualFields" style="display: block;"> <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" value="" name="first_name" id="first_name" value="" 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 individualFields" id="individualFields" style="display: block;"> <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" name="last_name" id="last_name" required value=""> <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" >Phone</label> <input type="number" class="form-control form-control-solid" placeholder="Enter Phone" name="phone1" id="phone1" value="" 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" id="email" value="" 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="d-flex align-items-center required fs-5 fw-semibold mb-2"> <span class="">Position</span> </label>  <input type="text" class="form-control form-control-solid" placeholder="Enter Position" value="" name="position" id="position" value="" required> </div> <div class="col-md-6 fv-row fv-plugins-icon-container">
                    //                             <label class="required fs-5 fw-semibold mb-2" for="is_primary">Primary</label> <br>
                    //                             <input type="hidden" name="is_primary" id="is_primary_hidden" value="False">
                    //                             <input type="checkbox" class="form-check-input" name="is_primary" id="is_primary`+count+`" onchange="toggleCheckbox(this)"   value="True">
                    //                             <label class="form-check-label" for="is_primary">Primary email</label>
                    //                             <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                    //                             </div>
                    //                         </div> </div> </div> </div>`;
                    var foo =
                    `<div class="card card-flush mt-6 mb-6">
                        <div class="card-header pt-5">
                            <h3 class="card-title align-items-start flex-column"> <span class="card-label fw-bold text-dark">Additional Contact</span> <span class="text-gray-400 mt-1 fw-semibold fs-6"></span> </h3>
                            <div class="card-toolbar"> 
                                <a href="javascript:void(0);" id="delbtn" class="btn btn-sm fw-bold btn-secondary deletenow">Delete</a>
                            </div>
                        </div> 
                        <div class="card-body pt-6"> 
                            <div class="row g-9"> 
                                <div class="col-md-6 fv-row fv-plugins-icon-container "  style="display: block;"> 
                                <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" value="" name="first_name" id="first_name" value="" required   pattern="^[a-zA-Z]+$" title="Only alphabets are allowed"  > 
                                <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div> 
                                <input type="hidden" class="form-control form-control-solid" name="customer_info_id[]"  value="0"> 
                            </div>
                            <div class="col-md-6 fv-row fv-plugins-icon-container "  style="display: block;"> 
                                <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" name="last_name" id="last_name"  required value=""   pattern="^[a-zA-Z]+$" title="Only alphabets are allowed"  > 
                                <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" pattern="\d{11}" maxlength="11" minlength="11" value="" > 
                                <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[]" id="email" value="" required  pattern="[a-zA-Z0-9._\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,4}" title="Special characters and space is not allowed"> 
                                <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="d-flex align-items-center required fs-5 fw-semibold mb-2"> <span class="">Position</span> </label>  
                                <input type="text" class="form-control form-control-solid" placeholder="Enter Position" value="" name="position" id="position"  required>    
                            </div> 
                            <div class="col-md-6 fv-row fv-plugins-icon-container">
                                <label class=" fs-5 fw-semibold mb-2" >Send App Credentials?</label><br>
                                
                                <select name="send_credentials[]"  class="form-select form-select-solid"  data-control="select2" data-placeholder="Select"  tabindex="0" required>
                                                <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=" fs-5 fw-semibold mb-2" >Allow App Access?</label><br>
                                
                                <select name="app_access[]"  class="form-select form-select-solid"  data-control="select2" data-placeholder="Select"  tabindex="0" required>
                                                <option value=""></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=" fs-5 fw-semibold mb-2" >Should receive all communication Emails?</label><br>
                               
                                <select name="receive_emails[]"  class="form-select form-select-solid"  data-control="select2" data-placeholder="Select"  tabindex="0" required>
                                                <option value=""></option>
                                                <option value="1" >Yes</option>
                                                <option value="0" >No</option>
                                            </select>
                            </div>
                        </div>
                    </div>     `;

                    $("#quu").append(foo);
                    $('.form-select').select2();
                });


                if (   $('#customer').val() == "0") {
                    $('#companyField').css('display','block');

                //   $(".individualFields").css('display','none');
                    $('#company').attr('required',true);
                    // $('#first_name').removeAttr('required');
                    // $('#last_name').removeAttr('required');
                    $('#fname').html("Director's First Name");
                    $('#lname').html("Director's Last Name");
                } else if ( $('#customer').val() ==  "1") {
                        $('#companyField').css('display','none');
                //   $(".individualFields").css('display','block');
                    $('#company').removeAttr('required');
                    //  $('#first_name').attr('required',true);
                    //   $('#last_name').attr('required',true);
                    $('#fname').html("Director's First Name");
                    $('#lname').html("Director's Last Name");

                } else {
                   $('#companyField').css('display','none');
                    $(".individualFields").css('display','block');
                }
          
         
                
               
                
             
                
                $(document).on('click', '#delbtn', function() {
                    $(this).parent().parent().parent().remove();
                   var cust_id= $(this).attr("data-cust_id");
                   if(cust_id != undefined)
                   {
                    var html=`<input type="hidden" name="deleted[]" value="`+cust_id+`">`;
                    $('.deleted_items').append(html);
                   }
                });
            });
              
    
    </script>
    
   <script>
    function updateCheckboxes(checkedId) {
      var checkboxes = document.getElementsByName("is_primary");
     
      checkboxes.forEach(function(checkbox) {
        if (checkbox.id !== checkedId) {
          checkbox.checked = false; // Uncheck other checkboxes
      
              
        }
      });
    }
  </script>
    <script>
function toggleCheckbox(checkbox) {

    console.log('hre');
   if (!checkbox.checked) {
     checkbox.checked = false; 
      checkbox.value = 'off';
   }
   else
   {
    //   $(checkbox).attr('checked','true');
    //   console.log($(this).val());
    //   $(checkbox).val('on');
      checkbox.checked = true; 
            checkbox.value = 'on';
   }
    // const checkboxes = document.querySelectorAll('input[name="is_primary"]');
    // if (checkbox.checked) {
    //     checkboxes.forEach((cb) => {
    //         if (cb !== checkbox && cb.checked) {
    //             cb.checked = false; // Deselect previously selected checkbox
    //             cb.value = 'off'; 
    //         }
    //     });
    // }

}
</script>
  <script>
  function validateForm() {
            var numberField = document.getElementById("abn");
            var numberValue = numberField.value;

            if (numberValue && numberValue.length < 11) {
                alert("Please enter valid ABN.");
                return false; // Prevent form submission
            }
            if (numberValue && numberValue.length > 11) {
                alert("Please enter valid ABN.");
                return false; // Prevent form submission
            }
            $('.form').attr('action',"{%url 'customer:edit' customer.id %}");
            return true; // Allow form submission
        }
  </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
    }
  });
</script>
    

 
 

    
    {% endblock script %}