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

{% load i18n %}

{% block title %}{% translate "Add Supplier" %}{% endblock %}


{% block breadcumbheading %}
{% translate "Manage Suppliers" %}
{% endblock  %}
{% block breadcumbfirst %}
<a href="/supplier/list/" class="text-muted text-hover-primary" style="text-transform: capitalize;">Manage Suppliers </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 Supplier</span>
        		    </h3>
        		        {% if messages %}
                        <div class="d-flex justify-content-center align-items-center">
                            {% for message in messages %}
                              <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}success{% endif %}" role="alert" style="width: 300px;">
                                {{ message }}
                                </div>  
                            {% endfor %}
                         </div>
                        {% endif %}
        		    <div class="card-toolbar">
        			    <div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
                            <a href="{%url 'supplier: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 'supplier:create' %}" >
                        {% 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 for="supplier" class="d-flex align-items-center required fs-5 fw-semibold mb-2">
                                                <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="0" required>
                                                <option value="" selected disabled hidden>Select Supplier Type</option>
                                                <option value="1"  {% if form.supplier_type == '1' %} selected {% endif %}>Individual</option>
                                                <option value="0"  {% if form.supplier_type == '0' %} selected {% endif %}>Company</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6 fv-row fv-plugins-icon-container">
                                            <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"  checked>
                                                <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" value="{{ form.company_name}}" name="company_name" id="company" 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" value="{{ form.first_name}}"   pattern="^[a-zA-Z]+$" title="Only alphabets are allowed"   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 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"   pattern="^[a-zA-Z]+$" title="Only alphabets are allowed"    value="{{ form.last_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">
                                            <label class="required fs-5 fw-semibold mb-2" >Supplier Code</label> 
                                            <input type="text" class="form-control form-control-solid" placeholder="Enter Supplier Code" name="supplier_code" id="supplier_code"  value="{{ form.supplier_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">
                                            <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="{{ form.phone1 }}" 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"  pattern="[a-zA-Z0-9._\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,4}" title="Special characters and space is not allowed"  value="{{ form.email }}" 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=" fs-5 fw-semibold mb-2">Street</label>
                                            <input class="form-control form-control-solid" placeholder="Enter Street" name="street" id="street"  value="{{ form.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="{{ form.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" id="mainstatediv">
                                            <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 value="" selected disabled hidden>Select State</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" id="otherstateDiv" style="display: none;">
                                            <label class=" fs-5 fw-semibold mb-2">State</label>
                                            <input type="text" class="form-control form-control-solid" name="other_state" id="other_state" placeholder="Enter State Name" value="{{ form.other_state }}">
                                            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div>
                                        </div>
                    
                                        <div class="col-md-6 fv-row fv-plugins-icon-container">
                                            <label class=" fs-5 fw-semibold mb-2">Postcode</label>
                                            <input type="number" class="form-control form-control-solid" placeholder="Enter Postcode" name="post_code" id="postcode"  value="{{ form.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="required fs-5 fw-semibold mb-2">Country</label>
                                            <select class="form-select form-select-solid" data-control="select2" data-placeholder="Select Country" name="country" id="country" tabindex="0"  value="{{ form.country }}" required>
                                               <option value="">Select Country</option>
                                                <option value="Australia">Australia</option>
                                                <option value="Other">Other</option>
                                            </select>
                                        </div>
                                        
                                        <div class="col-md-6 fv-row fv-plugins-icon-container" id="otherCountryDiv" style="display: none;">
                                            <label class="required fs-5 fw-semibold mb-2">Other Country</label>
                                            <input type="text" class="form-control form-control-solid" name="other_country" id="other_country" placeholder="Enter Other Country"  pattern="^([a-zA-Z]+\s)*[a-zA-Z]+$" title="Only Aphabets are allowed Remove space from bigining and from end"  value="{{ form.other_country }}">
                                            <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="Enter Fax" name="fax" id="fax"  value="{{ form.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="{{ form.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="{{ form.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="{{ form.salutation }}">
                                            <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">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" {% if form.is_active == 'on' %} checked {% endif %}>
                                          
                                                <label class="form-check-label" for="status">
                                                    Active
                                                </label>
                                            
                                        </div> -->
                
                                        <div class="card-toolbar">
                            			    <div>
                                                <a  href="{% url 'supplier: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>

{% block script %}


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function() {
        $('#country').on('change', function() {
            var selectedValue = $(this).val();
            var otherCountryDiv = $('#otherCountryDiv');
            var otherCountryInput = $('#other_country');

            if (selectedValue === 'Other') {
                otherCountryDiv.css('display', 'block');
                otherCountryInput.attr('required', 'required');
                
                $('#otherstateDiv').css('display', 'block');
                $('#mainstatediv').css('display', 'none');
                // $('#mainstatediv').removeAttr('required');
                // $('#other_state').attr('required', 'required');
            } else {
                otherCountryDiv.css('display', 'none');
                otherCountryInput.removeAttr('required');
                
                $('#otherstateDiv').css('display', 'none');
                $('#mainstatediv').css('display', 'block');
                // $('#mainstatediv').attr('required', 'required');
                // $('#other_state').removeAttr('required');
            }
        });
    });
</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 %}	
<script>
  const numberInput = document.getElementById('phone1');
  numberInput.addEventListener('input', () => {
    if (numberInput.value.length > 1) {
      numberInput.value = numberInput.value.slice(0, 10); // Truncate to 10 digits
    }
  });
  </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 content %}