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

{% load i18n %}

{% block title %}{% translate "Add  Serial Numbers" %}{% endblock %}


{% block breadcumbheading %}
{% translate "Manage Serial Numbers" %}
{% endblock  %}
{% block breadcumbfirst %}
<a href="/serialnumber/list/" class="text-muted text-hover-primary" style="text-transform: capitalize;">Manage  Serial Numbers </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 h-md-100">
	    <div class="card-header pt-7">
		    <h3 class="card-title align-items-start flex-column">
			    <span class="card-label fw-bold text-gray-800">Add  Serial Number</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 'product:list_serialnumber'%}"><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 class="card-body pt-9">
	    	<div class=" me-n7 pe-7" >
              <form method="post" action="{%url 'product:create_serialnumber' %}" >
                {% csrf_token %}
                <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">Product</label>
                        <select name="product" id="product"  data-control="select2" data-placeholder="Select Product"  class="form-select form-select-solid" tabindex="-1" required>
                            <option value="" >Select Product</option>
                            {% for pro_duct in products %}
                                <option value="{{ pro_duct.id}}"  {% if form.product == pro_duct.id|stringformat:"s"  %} selected {% endif %}>{{ pro_duct.product_name }}({{ pro_duct.sku }})</option>
                            {% endfor %}
                        
                        </select>
                        <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div>
                    </div>
                    <div class="col-md-1 fv-row fv-plugins-icon-container">
                        <label class="required fs-5 fw-semibold mb-2" >Status</label><br>
                        <label class="form-check form-switch form-check-custom form-check-solid">
                        <input class="form-check-input" name="is_active" id="is_active" type="checkbox" value="on"  checked="checked">
                        <span class="form-check-label fw-semibold text-muted">
                                Active
                            </span>
                        </label>
                    </div>
                 
                </div>

                <div 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" >Serial Number</label>
                        <input type="text" class="form-control form-control-solid" placeholder="Enter Serial Number" name="serial_number[]"   pattern="^([a-zA-Z0-9]+\s)*[a-zA-Z0-9]+$" title="Only Aphanumeric Characters are allowed"   id="serial_number" value="{{ form.serial_number }}" required>
                        <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div>
                    </div>
                    <div class="col-md-1 fv-row fv-plugins-icon-container">
                        <label class=" fs-5 fw-semibold mb-2" >&nbsp; </label>
                        <a href="#" class="form-control form-control-solid btn btn-light-primary btn-sm btn btn-light" id="AddMore" count="1">
                            <i class="ki-duotone ki-plus fs-2"></i>
                        </a>
                    </div>
                 
                 </div> 
                 <span class="row g-9 mb-5" id="appendhere">
                 
                    
                 </span>    
                   
                
                 <div class="card-toolbar">
    			    <div>
                        <a  href="{% url 'product:list_serialnumber' %}" 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>
            </form>               
                
            </div>
	            </div>
            </div>
        </div>
    </div>
</div>


	 <script>
        
     $('#AddMore').on('click',function()
    {
        var count=parseInt($(this).attr('count'));
        count=count+1;
        $(this).attr('count',count);
        $('#appendhere').append(
           `<div class="row g-9 mb-5" id="count`+count+`"> 
           <div class="col-md-6 fv-row fv-plugins-icon-container">
                        <label class="required fs-5 fw-semibold mb-2" >Serial Number</label>
                        <input type="text" class="form-control form-control-solid" placeholder="Enter Serial Number" name="serial_number[]"  pattern="^([a-zA-Z0-9]+\s)*[a-zA-Z0-9]+$" title="Only Aphanumeric Characters are allowed"   id="serial_number" value="{{ form.serial_number }}" required>
                        <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div>
                    </div>
                    <div class="col-md-1 fv-row fv-plugins-icon-container">
                        <label class=" fs-5 fw-semibold mb-2" >&nbsp; </label>
                        <a href="#" class="form-control form-control-solid btn btn-light-primary btn-sm btn btn-light removetr" onclick="removetr(`+count+`)" count="`+count+`">
                            <i class="ki-duotone ki-minus fs-2"></i>
                        </a>
                    </div>
                    </div>
                    `);
    });
    function removetr(id)
    {
        $('#count'+id).remove();
    }
  


        document.addEventListener("DOMContentLoaded", function () {
            var userSelect = document.getElementById("user");
            var companyField = document.getElementById("companyField");
            var individualFields = document.getElementById("individualFields");

            userSelect.addEventListener("change", function () {
                if (userSelect.value === "0") {
                    companyField.style.display = "block";
                    individualFields.style.display = "none";
                    $('#company').attr('required',true);
                    $('#first_name').removeAttr('required');
                    $('#last_name').removeAttr('required');
                } else if (userSelect.value === "1") {
                    companyField.style.display = "none";
                    individualFields.style.display = "block";
                    $('#company').removeAttr('required');
                     $('#first_name').attr('required',true);
                      $('#last_name').attr('required',true);
                } else {
                    companyField.style.display = "none";
                    individualFields.style.display = "none";
                }
            });
        });
    </script>				
{% endblock content %}