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

{% load i18n %}
{% block title %}{% translate "Request Product Bill" %}{% endblock %}
{% block breadcumbheading %}
    {% translate "Manage Request Product Bill" %}
{% endblock  %}
{% block breadcumbfirst %}
    <a href="{% url 'quotation:product_list_to_bill' %}" class="text-muted text-hover-primary" style="text-transform: capitalize;">Manage Request Product Bill   </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;">List</li>

{% endblock  %} 

{% block content %}
<div class="custom mt-3">
    <div class="row g-5 g-xl-10 mb-5 mb-xl-10 cust-row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
            <div class="card card-flush h-md-100 cust-card">

        	    <div class="card-header pt-7">
        		    <h3 class="card-title align-items-start flex-column">
        			    <span class="card-label fw-bold text-gray-800">Request Product Bill</span>
        		    </h3>
        		    {% if messages %}
                {% for message in messages %}
                  <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}success{% endif %}" role="alert">
                    {{ message }}
                    </div>  
                {% endfor %}
            {% endif %}
        		    <!--<div class="card-toolbar">-->
        			   <!-- <div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">-->
              <!--             <a href="{% url 'quotation:request_create_bill' %}"> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_user">-->
              <!--                 Create Bill -->
              <!--           </button></a>-->
              <!--       </div>-->
        	    	<!--</div>-->
            	</div>
                <div class="card-body pt-6">
                       <form action="#" class="sp-searchpanel mb-7">
                          <div class="search-row">
                               <select name="product_id" aria-label="Product List" data-control="select2" data-placeholder="Select Product" class="form-select form-select-lg fw-semibold">
                					<option value="">Product List</option>
                					 {% for product in products %} 
                                        <option value="{{product.id}}" {% if request.GET.product_id|slugify == product.id|slugify %} selected {% endif %} >{{product.product_name}}({{product.sku}})</option>
                                     {% endfor %} 
                				</select>
                              <div class="col-3 formfbtn">
                                  <button type="submit" onclick="removeRequired()"  class="btn btn-alt-primary search-btn"><i class="fa fa-search pe-sm-1"></i>Search</button>
                                  <a href="{% url 'quotation:product_list_to_bill' %}" class="btn btn-alt-danger reste-btn"><i class="fa fa-refresh pe-sm-1"></i>Reset</a>
                              </div>
                          </div>
                      </form>
                    <form method="post" action="{% url 'quotation:request_create_bill' %}" >
                            {% csrf_token %}
                    <div class="table-responsive cust-table mt-2 prod-table">
                    {% if order_items  %}
                        <table class="table table-row-dashed align-middle gs-0 gy-3 my-0">
                            <thead>
                                <tr class="fs-7 fw-bold text-gray-400 border-bottom-0">
                                    <th class="pb-3 min-w-100px fw-bold text-start">Select</th>
                                    <th class="pb-3 min-w-100px fw-bold text-start">Sr.No</th>
                                    <th class="pb-3 min-w-100px fw-bold text-start">Product</th>
                                    <th class="pb-3 min-w-100px fw-bold text-start">Required Bill Qty</th>
                                </tr>
                            </thead>
                            <tbody>
                               
                                 {% for order in order_items %}
                                   {% if order.reuiredbilledqty > 0  %}
                                    
                                    <tr>
                                        <td class="text-center"><input class="check" type="checkbox" checked name="product_id[]" value="{{order.product__id}}"></td>
                                        <td class="text-start pe-0">
                                            <span class="text-black-600 fw-bold fs-6">{{forloop.counter}}</span>
                                        </td>
                                        <td class="text-start pe-0">
                                            <span class="text-black-600 fw-bold fs-6">{{order.product__product_name}} ({{order.product__sku}})</span>
                                        </td>
			    			            <td class="text-start pe-12">
			    			             	<span class="text-black-600  fw-bold fs-6 prod-name"> 
                                                {{ order.reuiredbilledqty }}
                                            </span>
			    			           </td>
                                    </tr>
                                    {% endif %}
                                {% endfor %}
                                  <tr> 
                                     <td  colspan="3" class="text-start"><input id="Select_all" type="checkbox" checked> <label for="Select_all"><span id="select_text">Deselect All Products</span></label></td>
                                 </tr>
                            </tbody>
                        </table>
                         <div class="block block-content block-rounded pb-3 pt-3 formsactions-flex">
              <div class="row">
                <!--<div class="col-md-6">-->
                <!--  <button type="button" onclick="history.back()" class="btn btn-alt-danger fs-5 py-2 px-4">-->
                <!--    <i class="fa fa-left-long me-1"></i> Back-->
                <!--  </button>-->
                <!--</div>-->
                <div class="col-md-12 text-end">
                  <button type="submit" class="btn btn-primary">
                     Create Bill
                  </button>
                </div>
              </div>
            </div>

                       <nav aria-label="Page navigation">
							<ul class="pagination justify-content-end">
								{% if order_items.has_previous %}
								<li class="page-item">
									<a class="page-link" href="?page=1" aria-label="First">
										<span aria-hidden="true">&laquo;&laquo;</span>
									</a>
								</li>
								<li class="page-item">
									<a class="page-link" href="?page={{ order_items.previous_page_number }}" aria-label="Previous">
										<span aria-hidden="true">&laquo;</span>
									</a>
								</li>
								{% endif %}
								{% for i in order_items.paginator.page_range %}
								<li class="page-item {% if order_items.number == i %}active{% endif %}">
									<a class="page-link" href="?page={{ i }}">{{ i }}</a>
								</li>
								{% endfor %}
								{% if order_items.has_next %}
								<li class="page-item">
									<a class="page-link" href="?page={{ order_items.next_page_number }}" aria-label="Next">
										<span aria-hidden="true">&raquo;</span>
									</a>
								</li>
								<li class="page-item">
									<a class="page-link" href="?page={{ order_items.paginator.num_pages }}" aria-label="Last">
										<span aria-hidden="true">&raquo;&raquo;</span>
									</a>
								</li>
								{% endif %}
							</ul>
						</nav>
	    		         {% else %}
	    		         No Record Found.
	    		        {% endif %}
	    	        </div>
	    	        </form>

	            </div>
            </div>
        </div>
    </div>
</div>

<script>
  function updateModalContent(link) {
      const orderItemId = link.getAttribute("data-order-item-id");
      const orderItemIdPlaceholder = document.getElementById("orderItemIdPlaceholder");
      
      const productName = link.getAttribute('data-product-name');
     
      $('#product_name_placeholder').text(productName);
    

      if (orderItemIdPlaceholder) {
          orderItemIdPlaceholder.textContent = orderItemId;

          const updateOrderForm = document.getElementById("updateOrderForm");
          if (updateOrderForm) {
              
              
              updateOrderForm.action = `/customer/order-item/serialnumber/allocate/${orderItemId}/`;
            //   updateOrderForm.action = `/customer/invoice/update/order/status/${orderItemId}/`;
          }
      }
  }

  document.getElementById("kt_modal_stacked_1").addEventListener("shown.bs.modal", function(event) {
      const link = event.relatedTarget;
      updateModalContent(link);
  });

//   function showTechnicianAndDateSelection() {
//       const orderState = document.getElementById('orderState').value;
//       const technicianSelect = document.getElementById('technicianSelect');
//       const installationdateSelect = document.getElementById('installationdateSelect');

//       if (orderState == "4") { // "BOOKED_FOR_INSTALL"
//           technicianSelect.style.display = "block";
//           installationdateSelect.style.display = "block";
//       } else {
//           technicianSelect.style.display = "none";
//           installationdateSelect.style.display = "none";
//       }
//   }
</script>

{% endblock content %}

{% block script %}
<script>
    //   $( "#company_name" ).autocomplete({
    //   source: {'!!$company_name!!'}
    // });
     $('.js-select2').select2();
     $(document).on('click','#Select_all',function(){
         if($(this).is(":checked"))
         {
             $('.check').attr('checked','checked');
             $('#select_text').html('Deselect All Customers');
         }
         else
         {
             $('.check').removeAttr('checked');
           $('#select_text').html('Select All Customers');   
         }
     });
</script>
{% endblock script %}