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

{% load i18n %}

{% block title %}{% translate "Edit Profile" %}{% endblock %}


{% block breadcumbheading %}
{% translate "Manage Profiles" %}
{% endblock  %}
{% block breadcumbfirst %}
<a href="/user/list/" class="text-muted text-hover-primary" style="text-transform: capitalize;">Manage Profiles </a>
{% endblock  %}
{% block breadcumbaddmore %}
	<!--begin::Item-->
		<li class="breadcrumb-item">
			<span class="bullet bg-gray-400 w-5px h-2px"></span>
		</li>
		<!--end::Item-->
		<!--begin::Item-->
		<li class="breadcrumb-item text-muted" style="text-transform: capitalize;">Edit</li>
		<!--end::Item-->
{% endblock  %}

{% block content %}

<div class="custom mt-3 create-cust">
    <div class="row g-5 g-xl-10 mb-5 mb-xl-10">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
            <div class="card card-flush">
        	    <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 Profile</span>
        		    </h3>
        		    <div class="card-toolbar">
        			    <div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
                           
                         </div>
        	    	</div>
            	</div>
            </div>
	       {% 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 %}

            <form method="post" action="{%url 'namespace-name:edit_profile' 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="d-flex align-items-center required fs-5 fw-semibold mb-2" required>
                                        <span class="">Supplier Type</span>
                                        
                                    </label>
                                    <select name="supplier_type" id="supplier"  data-control="select2" data-placeholder="Select Supplier Type"  class="form-select form-select-solid" tabindex="-1"  required>
                                        <option></option>
                                        <option value="1"  {% if supplier.is_individual == 1 %} selected {% endif %}>Individual</option>
                                        <option value="0"  {% if supplier.is_individual == 0 %} selected {% endif %}>Company</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 supplier.is_active %}checked="checked"{% endif %}>
                                        <span class="form-check-label fw-semibold text-muted">
                                            Active
                                        </span>
                                    </label>
                                </div> -->
                                <div class="col-md-12 fv-row fv-plugins-icon-container" 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="{{supplier.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-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" name="first_name" id="first_name"  value="{{supplier.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" 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"  value="{{supplier.last_name }}" required >
                                    <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div>
                                </div>
                                <div class="col-md-6 fv-row fv-plugins-icon-container">
                                    <label class="required fs-5 fw-semibold mb-2">Email</label>
                                    <input type="email" class="form-control form-control-solid" placeholder="Enter Email" name="email" id="email" value="{{supplier.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="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="{{supplier.phone1 }}" required>
                                    <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                    </div>
                                </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="required fs-5 fw-semibold mb-2">Street</label>
                                    <input class="form-control form-control-solid" placeholder="Enter Street" name="street" id="street"  value="{{supplier.street }}" 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">Suburb</label>
                                    <input class="form-control form-control-solid" placeholder="Enter Suburb" name="city"  id="city"  value="{{supplier.city }}" 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">State</label>
                                    <select class="form-select form-select-solid" tabindex="-1" data-control="select2" data-placeholder="Select State"   name="state" id="state" required>
                                        <option ></option>
                                        <option value="ACT"  {% if supplier.state == 'ACT' %} selected {% endif %}>Australian Capital Territory</option>
                                        <option value="NSW" {% if supplier.state == 'NSW' %} selected {% endif %}>New South Wales </option>
                                        <option value="NT" {% if supplier.state == 'NT' %} selected {% endif %}>Northern Territory</option>
                                        <option value="QLD" {% if supplier.state == 'QLD' %} selected {% endif %}>Queensland </option>
                                        <option value="SA" {% if supplier.state == 'SA' %} selected {% endif %}>South Australia</option>
                                        <option value="TAS" {% if supplier.state == 'TAS' %} selected {% endif %}>Tasmania </option>
                                        <option value="VIC" {% if supplier.state == 'VIC' %} selected {% endif %}>Victoria </option>
                                        <option value="WA" {% if supplier.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="required fs-5 fw-semibold mb-2">Country</label>
                                        <select   class="form-select form-select-solid"  data-control="select2" data-placeholder="Select Country"  tabindex="-1" name="country" id="country"   value="{{supplier.country }}" required>
                                            <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">
                                    <label class="required fs-5 fw-semibold mb-2">Postcode</label>
                                    <input type="number" class="form-control form-control-solid" placeholder="Enter Postcode" name="post_code" id="post_code" value="{{supplier.post_code }}" 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" hidden>
                                    <label class="  fs-5 fw-semibold mb-2">Fax</label>
                                    <input class="form-control form-control-solid" placeholder="Fax" name="fax" id="fax"  value="{{supplier.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="Website" name="website" id="website" value="{{supplier.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="Contact Name" name="contact_name" id="contact_name" value="{{ supplier.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="Salutation" name="salutation" id="salutation" value="{{ supplier.salutation }}" >
                                    <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-toolbar">
                        <div>
                            <a  href="{% url 'namespace-name:profile' %}" id="kt_ecommerce_edit_order_cancel" class="btn btn-light me-5">
                                Cancel
                            </a>
                             <button type="submit" class="btn btn-primary" >
                                   Submit
                             </button>
                        </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>

{% block script %}

<script>

$('#supplier').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');
         } 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);
         } else {
            $('#companyField').css('display','none');
             $(".individualFields").css('display','block');
         }
     });
    
         
     $(document).ready(function () {
       
         if (   $('#supplier').val() == "0") {
             $('#companyField').css('display','block');
           $(".individualFields").css('display','none');
             $('#company').attr('required',true);
             $('#first_name').removeAttr('required');
             $('#last_name').removeAttr('required');
         } else if ( $('#supplier').val() ==  "1") {
                 $('#companyField').css('display','none');
           $(".individualFields").css('display','block');
             $('#company').removeAttr('required');
              $('#first_name').attr('required',true);
               $('#last_name').attr('required',true);
         } else {
            $('#companyField').css('display','none');
             $(".individualFields").css('display','block');
         }
     });
</script>	
{% endblock script %}	
{% endblock content %}