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

{% load i18n %}

{% block title %}{% translate "Edit  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;">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 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">Edit  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:edit_serialnumber' serialnumber.id %}" >
                {% 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_select" id="product_select" data-control="select2" disabled data-placeholder="Select Product" class="form-select form-select-solid" onchange="changeserialnumber()" tabindex="-1" required> 
        <option></option>
        {% for product in products %}
            <option value="{{ product.id }}" {% if serialnumber.product_id == product.id %}selected{% endif %} > {{ product.product_name }}({{ product.sku }})</option>
        {% endfor %}
    </select>
    <input type="hidden" name="product" id="product_hidden" value="{% if serialnumber.product_id %}{{ serialnumber.product_id }}{% endif %}">
    <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">Serial Number</label>
                        <input type="text" class="form-control " placeholder="Enter Serial Number" name="serial_number" id="serial_number"  pattern="^([a-zA-Z0-9]+\s)*[a-zA-Z0-9]+$" title="Only Aphanumeric Characters are allowed"  value="{% if serialnumber.serial_number != " " %}{{serialnumber.serial_number}}{% endif %}" >

                        <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div>
                    </div>
                    
                </div>


                <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">Allocate To Invoice</label>
                        <select class="form-select" data-control="select2" {%if serialnumber.tracking_status >= 4  %} disabled {%endif%} data-placeholder="Select Invoice Item" name="order_item" id="order_item" onchange="showTechnicianAndDateSelection()">

                                                             
                        <option value="" disabled selected>Select Order item </option>
                        {% for order_item in order_items %}
                           {% if order_item.product.id == serialnumber.product.id %}
                                 <option value="{{ order_item.id }}"   {% if order_item.product.id == serialnumber.product.id  and order_item.order.invoice.id == serialnumber.invoice.id   %}selected{% endif %}  >{{ order_item.product }}({{order_item.product.sku}})-{{order_item.order.invoice.customer}}-(invoice-{{order_item.order.invoice.id}})</option>
                           {%endif %}
                           
                             
                            {% endfor %}
                            
                             {% if serialnumber.invoice.id != None %}
                             <option value="{{ serialnumber.get_order_item_id }}"  selected  >{{ serialnumber.product }}({{serialnumber.product.sku}})-{{serialnumber.invoice.customer}}-(invoice-{{serialnumber.invoice.id}})</option>
                          
                             {%endif %}
                        </select>
                        {% if serialnumber.invoice.id != None %}
                         <input type="hidden" name="order_item" id="order_item_hidden"  value="{{ serialnumber.get_order_item_id }}">
                        {%endif %}
                        
                       {% if serialnumber.tracking_status >= 4  %}
                        {% for order_item in order_items %}
                           {% if order_item.product.id == serialnumber.product.id %}
                            <input type="hidden" name="order_item" id="order_item_hidden"   {% if order_item.product.id == serialnumber.product.id  and order_item.order.invoice.id == serialnumber.invoice.id   %} value="{{ order_item.id }}" {% endif %} >
                           {%endif %}
                            {% endfor %}
                        {% endif %}
                        <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"  {% if serialnumber.is_active %}checked="checked"{% endif %}>
                        <span class="form-check-label fw-semibold text-muted">
                                Active
                            </span>
                        </label>
                    </div>
                 </div>
                
                
                 <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>
        function changeserialnumber()
        {
           var selectedProductId= $('#product').val();
           
            $.get("/quote/get-inv/?product_id="+selectedProductId, function(data, status)
            {
               
                var htmltoadd='';
                $('#inv').html('').empty().trigger('change');            
                $.each(data , function(index, val) { 
                    $.each(val , function(index1, val1) {                   
                    htmltoadd=htmltoadd+` <option value="`+val[index1]['pk']+`">`+val[index1]['pk']+`</option>`;
                    });
                    });                
                    $('#inv').html(htmltoadd).select2();
            });
        }
        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 %}