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

{% load i18n %}

{% block title %}{% translate "List Order Item" %}{% endblock %}

{% block breadcumbheading %}
    {% translate "Manage Orders Items" %}
{% endblock  %}

{% block breadcumbfirst %}
    <a href="{% url 'quotation:customer_invoice_order_item_list' order.id %}" class="text-muted text-hover-primary" style="text-transform: capitalize;">Manage Orders Items </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;">List</li>
    <!--end::Item-->
{% 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 unique-head align-items-start flex-column">
                        <span class="card-label fw-bold text-gray-800 mb-3">{% if order.invoice.customer %}{{order.invoice.customer }}{% endif %}</span>
                        
                        <p class="order-dets-cont mb-0">
                            
                        <span class="card-label fw-bold text-gray-800 inv-pay-name">Order ID: {{ order.id}} </span> | <span class="order-dat card-label fw-bold text-gray-800 ">{{order.order_date|date:"d-m-Y"}} </span>
                      | <span class="order-dat card-label fw-bold text-gray-800 ">Invoice ID: {{order.invoice.id}} </span>
                         <!--<span class="card-label fw-bold text-gray-800 inv-pay-name">Order Date: {{order.order_date|date:"d-m-Y"}} </span>-->
                       </p>
                        
                    </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:customer_invoice_order_item_history' order.id %}"> <button type="button" class="btn btn-primary">-->
                        <!--        History-->
                        <!--   </button></a>-->
                        <!--</div>-->
                    </div>
                </div>
                <div class="card-body pt-6">
                    
                   
                    <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">Sr.No</th>
                                    <!--<th class="pb-3 min-w-100px fw-bold text-start">Order Item Id</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">Serial Number</th>-->
                                    <th class="pb-3 min-w-100px fw-bold text-start">Status</th>
                                    <!--<th class="pb-3 min-w-100px fw-bold text-start">Work Order PDF</th>-->
                                  <th class="pb-3 min-w-100px fw-bold text-start">Technician</th> 
                                    <!--<th class="pb-3 w-50px fw-bold text-start">Actions</th>-->
                                </tr>
                            </thead>
                            <tbody>
                                {% for order_item in order_items %}
                                    <tr>
                                        <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_item.id}}</span>-->
                                        <!--</td>-->
                                        <td class="text-start pe-0">
                                            <span class="text-black-600 fw-bold fs-6">{{order_item.product.product_name}} ({{order_item.product.sku}})</span>
                                        </td>
                                        
                                        
                                        
                     <!--                   <td class="text-start pe-12">-->
			    			           <!--  	<span class="text-black-600  fw-bold fs-6 prod-name">{% if order_item.serial_number%}{{ order_item.serial_number }}{% else%}-{% endif%}</span>-->
			    			           <!--</td>-->
                                        <!--<td class="text-start pe-0">-->
                                        <!--    <span class="text-black-600 fw-bold fs-6">{{order.order_date|date:"d-m-Y"}}</span>-->
                                        <!--</td>-->
                                        <td class="text-start pe-0">
                                            <span class="text-black-600 fw-bold badge py-3 px-4 fs-7  status {% if order_item.get_status_display == 'Orderd'  or  order_item.get_status_display == 'Shipped' %} accepted {% elif order_item.get_status_display == 'Watered' %} email-sent {% elif order_item.get_status_display == 'Arrived' %} created {% elif order_item.get_status_display == 'Booked For Install' %} rejected {% elif order_item.get_status_display == 'Installed' %}created{% else %}accepted{% endif %}">
                                                {% if order_item.get_status_display == 'Order' %}Order{% elif order_item.get_status_display == 'Shipped' %} Shipped  {% elif order_item.get_status_display == 'Watered' %} Watered {% elif order_item.get_status_display == 'Arrived' %} Arrived {% elif order_item.get_status_display == 'Shipped' %} Shipped {% elif order_item.get_status_display == 'Shipped' %} Shipped {% else %} {{order_item.get_status_display}} {% endif %}
                                            </span>
                                        </td>
                                       
                                      
                                         <td class="text-start pe-0">
                                          
                                        <span class="text-black-600 fw-bold fs-6">
                                                  {% if order_item.technicians %}
                                                    {{ order_item.technicians.first.userinfo.first_name }} {{ order_item.technicians.first.userinfo.last_name }}
                                                  {% else %}
                                                    -
                                                  {% endif %}
                                                  {% if order_item.seconday_technicians %}<br>
                                                          <span class="text-black-600 fw-bold fs-6">{% if order_item.seconday_technicians.first.userinfo %}
                                                           <span class="text-black-600 fw-bold badge py-3 px-4 fs-7 warr-span  status  accepted ">{{ order_item.seconday_technicians.first.userinfo.get_full_name }}(Secondary Tech)</span>{% endif %}
                                                          </span>
                                                            {% endif %}
                                        </span>
                                                                                       
                                       
                                        </td> 
                                        
                                
                                        <!--<td class="text-end">-->
                                                    
                                        <!--{% if not order_item.serial_number %}-->
                                        <!--    <a href="#" class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">Select<i class="ki-duotone ki-down fs-5 ms-1"></i></a>-->
                                        <!--    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary-->
                                        <!--    fw-semibold fs-7 w-125px py-4" data-kt-menu="true" >-->
                                        <!--        <div class="menu-item px-3">-->
                                        <!--            <a href="#" id="select" class="menu-link px-3" data-order-item-id="{{ order_item.id }}" data-bs-toggle="modal" data-bs-target="#kt_modal_stacked_1" onclick="updateModalContent(this)">Edit</a>-->
                                        <!--        </div>-->
                                        <!--    </div>-->
                                        <!--   {% else %}-->

                                        <!--      <span class="user-na">-</span>-->
         
                                        <!--{% endif %}-->
                                        <!--</td>-->
                                        
                                        
                                     
                                    </tr>


                                {% endfor %}
                            </tbody>
                        </table>
                          {% else %}
	    		         No Record Found.
	    		        {% endif %}
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</div>
<div class="d-flex mb-7 mt-12 just-cont-space">
	<div class="form-check form-check-custom form-check-solid"></div>
  
		<div class="menu-item px-3">
		<a href="{% url 'quotation:customer_invoice_order_list'  %}" id="kt_ecommerce_edit_order_cancel" class="btn btn-primary me-5">
  
		Back
		</a>	
  
		</div>
  
  </div>
<script>
//   function updateModalContent(link) {
//       const orderItemId = link.getAttribute("data-order-item-id");
//       const orderItemIdPlaceholder = document.getElementById("orderItemIdPlaceholder");

//       if (orderItemIdPlaceholder) {
//           orderItemIdPlaceholder.textContent = orderItemId;

//           const updateOrderForm = document.getElementById("updateOrderForm");
//           if (updateOrderForm) {
              
              
//               updateOrderForm.action = `/customer/invoice/update/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>
     function closeModal(id,typeoforder) {
        console.log(id,typeoforder,"myModal_"+typeoforder+"_"+id);
        var modal = document.getElementById("myModal_"+typeoforder+"_"+id);
      
    var closeBtn = document.getElementById("closeModalBtn");
        modal.style.display = "none";
    document.body.classList.remove('modal-open'); // restore scroll

    // remove backdrop if exists
    var backdrop = document.querySelector('.modal-backdrop');
    if (backdrop) backdrop.remove();


    }
</script>

                                    {% for order_item in order_items %}
                                    <form method="post" action=" "  id="updateOrderForm">
                                        {% csrf_token %}

                                        <div class="modal fade" tabindex="-1" id="kt_modal_stacked_1">
                                            <div class="modal-dialog modal-dialog-centered">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h3 class="modal-title">Assigned Serial Number </h3>
                                                        <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                                                            <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>
                                                        </div>
                                                    </div>

                                                    <div class="modal-body">
                                                        <p><b>Order Item Id:</b> <span id="orderItemIdPlaceholder">{{ order_item.id }}</span></p>
                                                        <p><b>Product Name:-</b>{{order_item.product.product_name}} ({{order_item.product.sku}})</span></p>
                                                        
                                                        
                                                        
                                                         <div>
                                                            <label class="required form-label"><strong>Select Serial Number:</strong></label>
                                                            <select class="form-select" data-control="select2" data-placeholder="Select status" name="serial_number" id="serial_number" onchange="showTechnicianAndDateSelection()" required>
                                                             
                                                                    <option value="" disabled selected>Select Serial Number</option>
                                                                    {% for serial_number in serial_numbers %}
                                                                        {% if serial_number.product == order_item.product %}
                                                                            <option value="{{ serial_number.id }}">{{ serial_number }}</option>
                                                                        {% endif %}
                                                                    {% endfor %}
                                                           
                                                            </select>
                                                        </div>
                                                        
                                                        <!--<div>-->
                                                        <!--    <label class="required form-label"><strong>Order Status:</strong></label>-->
                                                        <!--    <select class="form-select" data-control="select2" data-placeholder="Select status" name="status" id="orderState" onchange="showTechnicianAndDateSelection()" required>-->
                                                        <!--        {% for status_id, status in order_item.STATUS_CHOICES %}-->
                                                        <!--            <option value="{{ status_id }}" {% if status_id == order_item.status %}selected{% endif %}>{{ status }}</option>-->
                                                        <!--        {% endfor %}-->
                                                        <!--    </select>-->
                                                        <!--</div>-->

                                                    <!--    <div id="technicianSelect" style="display: none;">-->
                                                    <!--        <label class="required form-label" for="technician"><strong>Select Technician:</strong></label>-->
                                                    <!--        <select class="form-select" data-placeholder="Select Technician" name="technician" id="technician">-->
                                                    <!--            {% for technician in technicians %}-->
                                                    <!--                <option value="{{ technician.id }}" {% if order_item.technician.id == technician.id %}selected{% endif %}>{{ technician.userinfo.first_name }} {{ technician.userinfo.last_name }}</option>-->
                                                    <!--            {% endfor %}-->
                                                    <!--        </select>-->
                                                    <!--    </div>-->

                                                    <!--    <div id="installationdateSelect" style="display: none;">-->
                                                            <!-- Your installation date selection HTML goes here -->
                                                            <!-- Example: -->
                                                    <!--        <label class="required form-label" for="installationDate"><strong>Select Installation Date:</strong></label>-->
                                                    <!--        <input type="date" class="form-control" name="installation_date" id="installation_date">-->
                                                    <!--    </div>-->
                                                    

                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                                                        <button type="submit" class="btn btn-primary">Save</button>
                                                    </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>  
                                    
                                    {% endfor %}
<script>
$(document).on("change", ".address-radio", function () {
    var id=$(this).attr('data-id');
    if ($(this).val() === "different") {
        $("#different_address_fields"+id).slideDown();
    } else {
        $("#different_address_fields"+id).slideUp();
    }
});
</script>
{% endblock script %}