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

{% load i18n %}

{% block title %}{% translate "List Assigend Product" %}{% endblock %}

{% block breadcumbheading %}
    {% translate "Manage Assigend Products" %}
{% endblock  %}

{% block breadcumbfirst %}
    <a href="{% url 'quotation:technician_assigned_product' order.id %}" class="text-muted text-hover-primary" style="text-transform: capitalize;">Manage Asigend Products </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 align-items-start flex-column">
                        <span class="card-label fw-bold text-gray-800">Customer Name: {% if order.invoice.customer.first_name and order.invoice.customer.last_name %}{{order.invoice.customer.first_name }} {{ order.invoice.customer.last_name }}{% else %}{{order.invoice.customer.company_name }}{% endif %}</span>
                        <span class="card-label fw-bold text-gray-800">Order ID: {{ order.id}} </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">
                        </div>
                    </div>
                </div>
                <div class="card-body pt-6">
                    <div class="table-responsive cust-table mt-2 prod-table">
                         {% if assigned_products  %}
                        <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">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">Installation Date</th>
                                    <th class="pb-3 min-w-100px fw-bold text-start">comment</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 assigned_product in assigned_products %}
                                    <tr>
                                        <td class="text-start pe-0">
                                            <span class="text-black-600 fw-bold fs-6">{{assigned_product.order_item.id}}</span>
                                        </td>
                                        <td class="text-start pe-0">
                                            <span class="text-black-600 fw-bold fs-6">{{ assigned_product.order_item.product.product_name }}</span>
                                        </td>
                                        <td class="text-start pe-0">
                                            <span class="text-black-600 fw-bold fs-6">{{assigned_product.installation_date|date:"d-m-Y"}}</span>
                                        </td>
                                        <td class="text-start pe-0">
                                            <span class="text-black-600 fw-bold fs-6">{%if assigned_product.comment%}{{assigned_product.comment}}{%else%}-{%endif%}</span>
                                        </td>
                                     
                                       
                                        <td class="text-end">
                                            <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="{{ assigned_product.id }}" data-bs-toggle="modal" data-bs-target="#kt_modal_stacked_1" onclick="updateModalContent(this)">Update Date</a>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>

                                    <form method="post" action="{% url 'quotation:technician_update_installation_date' assigned_product.order_item.id %}">
                                        {% 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">Update Installation Date</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>Installation Date:</b> <span id="orderItemIdPlaceholder">{{ assigned_product.id }}</span></p>
                                                        <p><b>Customer Name:-</b>{{order.invoice.customer}}</span></p>


                                                        
                                                        <label class="required form-label"><strong>Installation Date</strong></label>
                                                                
                                                        <input type="date" id="kt_td_picker_localization_input" class="form-control start_date" data-td-target="#kt_td_picker_localization" name="installation_date"   required 
                        min="{% now 'Y-m-d' %}"  value="{{assigned_product.installation_date|date:'Y-m-d'}}" />
                                                                   
                                                             
                                                        
                                                        

                        <div >
                            <label for="payAmount"><strong>Comment:</strong></label>
                            <input type="text" class="form-control"  name="comment" id="comment" placeholder="Enter Comment"  >
                        </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 changes</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>  

                                {% endfor %}
                            </tbody>
                        </table>
                            {% else %}
	    		         No Record Found.
	    		        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </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 = `technician/update/installation/date/${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 %}