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

{% block addcss %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
<style>
/*====== Image Video PopUp CSS Starts =====*/

.imageblock {
    width:100%;
    padding:20px;
    background:#fff2e3;
    border-radius:8px;
}

.videoblock {
    width:100%;
    padding:20px;
    background:#f3f8f3;
    border-radius:8px;
}

.imagewrapper,
.videowrapper{
    margin:0 0 0;
    border-radius: 0.475rem;
}

.imagewrapper img{
    width:200px !important;
    border-radius: 0.475rem;
    width:200px;
    background:#f6c000;
    padding:5px;
    margin:0 10px 0 0;
}


.videowrapper video{
    width:150px !important;
    border-radius: 0.475rem;
    margin:0 10px 0 0;
}
/*.preview-container {*/
/*    display: inline-block;*/
/*    position: relative;*/
/*}*/

/*.zoom-btn {*/
/*    position: absolute;*/
    top: 10px;           /* adjust vertical position */
/*    background-color: rgba(0,0,0,0.5);*/
/*    color: white;*/
/*    border: none;*/
/*    padding: 5px 10px;*/
/*    border-radius: 5px;*/
/*    cursor: pointer;*/
/*    font-size: 18px;*/
/*}*/

/*.zoom-in {*/
    right: 50px;  /* position right */
/*}*/

/*.zoom-out {*/
    right: 10px;  /* position right */
/*}*/

/*====== Image Video PopUp CSS Starts =====*/
</style>
{% endblock addcss %}

{% load i18n %}

{% block title %}{% translate "Machines" %}{% endblock %}


{% block breadcumbheading %}
{% translate "Machines" %}
{% endblock  %}
{% block breadcumbfirst %}
<a href="/technician/assigned/job/list/" class="text-muted text-hover-primary" style="text-transform: capitalize;">Machines</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 un-head">
            <h3 class="card-title align-items-start flex-column tech-title">
				<span class="card-label fw-bold text-gray-800">Machines List</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">
         	     <form action="#" class="sp-searchpanel mb-7">
         	       
         	         
                      <div class="search-row flex-wrap justify-content-start">
                      <!--<input name="technician_name" id="technician_name" value="{% if request.GET.technician_name %}{{ request.GET.technician_name }}{% endif %}" class="form-control ui-autocomplete-input" placeholder="Technician Name" autocomplete="off">    -->
                      <!--<input name="customer_name" id="customer_name" value="{% if request.GET.customer_name %}{{ request.GET.customer_name }}{% endif %}" class="form-control ui-autocomplete-input" placeholder="Customer Name" autocomplete="off">-->
                <!--        <div class="col-lg-3 pe-4 mb-4">-->
                <!--           <select name="technician_id" aria-label="Technician List" data-control="select2" data-placeholder="Select Technician" class="form-select form-select-lg fw-semibold">-->
            				<!--<option disabled selected value="">Select Technician</option>-->
                <!--            {% for technician in technicians %}-->
                <!--                <option value="{{ technician.id }}" {% if request.GET.technician_id|slugify == technician.id|slugify  %} selected {% endif %}>{{ technician.userinfo.first_name }} {{ technician.userinfo.last_name }}</option>-->
                <!--            {% endfor %} -->
            				<!--</select>-->
                <!--        </div>-->
                        <div class="col-lg-3 pe-4 mb-4">
                           <select name="customer_id" aria-label="Customer List" data-control="select2" data-placeholder="Select Customer" class="form-select form-select-lg fw-semibold">
                				<option value="">Customer List</option>
                                {% for customer in customers %} 
                                    <option value="{{customer.id}}"   {% if request.GET.customer_id|slugify == customer.id|slugify %} selected {% endif %}>{{customer.display_name}}</option>
                                 {% endfor %}
                			</select>
                        </div>
                         <div class="col-lg-3 px-4 mb-4">
                           <select name="product_id" aria-label="Machines List" data-control="select2" data-placeholder="Select Machines" class="form-select form-select-lg fw-semibold">
            					<option value="">Machines 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>
                        <div class="col-lg-3 px-4">
                         <select placeholder="Serial Number" name="serial_number" id="serial_number"  data-control="select2" data-placeholder="Select Serial Number"  class="form-select" tabindex="1">
                            <option value="" >Select Serial Number</option>
                            {% for sn in serial_numbers %}
                            <option value="{{sn.serial_number}}" {% if request.GET.serial_number == sn.serial_number %}selected{% endif %}>{{sn.serial_number}}</option>
                            {% endfor %}
                        </select>
                        </div>
                       <!--<input name="product_name" id="product_name" value="{% if request.GET.product_name %}{{ request.GET.product_name }}{% endif %}" class="form-control ui-autocomplete-input" placeholder="Product" autocomplete="off">-->
                      <!-- <input    type="text"   class ="form-control" placeholder="Date" name="start_date" value="{% if request.GET.start_date %}{{ request.GET.start_date }}{% endif %}" onfocus="(this.type='date')"/>  -->
                         <div class="col-lg-3 ps-4 mb-4">
                                <div class="input-group" id="kt_td_picker_localization"  data-td-toggle="datetimepicker">
                                    <input type="text" class="form-control" placeholder="Warranty Start Date" data-td-target="#kt_td_picker_localization" name="start_date" readonly value="{% if request.GET.start_date %} {{ request.GET.start_date }}  {% endif %}" />
                                    <span class="input-group-text" data-td-target="#kt_td_picker_localization" data-td-toggle="datetimepicker">
                                    <i class="ki-duotone ki-calendar fs-2"><span class="path1"></span><span class="path2"></span></i>
                                    </span>
                                </div>
                        </div>
                         <div class="col-lg-3 pe-4">
                            <div class="input-group" id="kt_td_picker_localization1"  data-td-toggle="datetimepicker">
                                <input type="text" class="form-control" placeholder="Warranty End Date" data-td-target="#kt_td_picker_localization1" name="end_date" readonly value="{% if request.GET.end_date %} {{ request.GET.end_date }}  {% endif %}" />
                                <span class="input-group-text" data-td-target="#kt_td_picker_localization1" data-td-toggle="datetimepicker">
                                <i class="ki-duotone ki-calendar fs-2"><span class="path1"></span><span class="path2"></span></i>
                                </span>
                            </div>
                        </div>
                          <div class="col-3 px-4 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:machines_list' %}" class="btn btn-alt-danger reste-btn"><i class="fa fa-refresh pe-sm-1"></i>Reset</a>
                          </div>
                  </div>
                  
              </form>
         {% if technician_assigned_job_lists  %}
	    	<div class="table-responsive cust-table mt-2 prod-table">
            			    <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">Machines</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">Warranty Date</th>
                                      <th class="pb-3 w-50px fw-bold text-start">Actions</th>
                                    </tr>
                                  </thead>
            			    	    <tbody>
            			    	         {% for technician_assigned_job_list in technician_assigned_job_lists %}
                    			    		     <tr>
                                                    <td class="text-start pe-0">
                                                        <span class="text-black-600 fw-bold fs-6" title="{{technician_assigned_job_list.order_item.serial_number.serial_number}}"  data-toggle="tooltip" data-placement="top">
                                                          {{technician_assigned_job_list.order_item.product}} <br>
                                                          <span class="text-black-600 fw-bold badge py-3 px-4 fs-7 warr-span  status accepted">{{ technician_assigned_job_list.order_item.order.invoice.customer }}</span>
                                                        </span>
                                                    </td> 
                                                    <td class="text-start pe-0">
                                                        <span class="text-black-600 fw-bold fs-6">{{ technician_assigned_job_list.order_item.serial_number.serial_number }}</span>
                                                    </td>
                                                    <td class="text-start pe-0">
                                                        <span class="text-black-600 fw-bold badge py-3 px-4 fs-7 warr-span  status  {%if technician_assigned_job_list.status == 'Warranty'%}accepted {% elif  technician_assigned_job_list.status == 'Service' %}  created {% endif %}">
                                                            {% if not technician_assigned_job_list.order_item.is_trade %}
                                                                {%if technician_assigned_job_list.status == 'Warranty'%}
                                                                    {{technician_assigned_job_list.status}} till {{technician_assigned_job_list.order_item.warranty_end_date|date:"d-m-Y"}}
                                                                {% elif  technician_assigned_job_list.status == 'Service' %}
                                                                    {{technician_assigned_job_list.status}}
                                                                {% endif %}
                                                            {% 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="{%url 'quotation:create_service_request' technician_assigned_job_list.id %}" class="menu-link px-3">
                                                                    Add Service Ticket
                                                                </a>
                                                            </div>
                                                            <div class="menu-item px-3">
                                                                <a href="{% url 'quotation:machine_detail' technician_assigned_job_list.order_item.id %}" class="menu-link px-3">
                                                                    View Log
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                        {% endfor %}
            
                                  
            			    	    </tbody>
            	    		</table>
            	  
            	    		          
            	    		          
            	    		                    
            	    	<nav aria-label="Page navigation">
							<ul class="pagination justify-content-end">
								{% if technician_assigned_job_lists.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={{ technician_assigned_job_lists.previous_page_number }}" aria-label="Previous">
										<span aria-hidden="true">&laquo;</span>
									</a>
								</li>
								{% endif %}
				
								{% for i in technician_assigned_job_lists.paginator.page_range %}
								<li class="page-item {% if technician_assigned_job_lists.number == i %}active{% endif %}">
									<a class="page-link" href="?page={{ i }}">{{ i }}</a>
								</li>
								{% endfor %}
				
								{% if technician_assigned_job_lists.has_next %}
								<li class="page-item">
									<a class="page-link" href="?page={{ technician_assigned_job_lists.next_page_number }}" aria-label="Next">
										<span aria-hidden="true">&raquo;</span>
									</a>
								</li>
								<li class="page-item">
									<a class="page-link" href="?page={{ technician_assigned_job_lists.paginator.num_pages }}" aria-label="Last">
										<span aria-hidden="true">&raquo;&raquo;</span>
									</a>
								</li>
								{% endif %}
							</ul>
						</nav> 
            	    		          
            	    		          
            	  </div>   		          
            	    		          
    		        {% else %}
    		        
    		          No Record Found.
    		          
    		        
    		        {% endif %}
	    	      
	            
             
           </div>
        </div>
      </div>
    </div>
</div>



<script>
  function showTechnicianSelection() {
      var orderState = document.getElementById('orderState').value;
      var technicianSelect = document.getElementById('technicianSelect');

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









{% endblock content %}
{% block script %}

<!-- Modal -->

{% if technician_assigned_job_lists  %}
    {% for technician_assigned_job_list in technician_assigned_job_lists %}
   
     <div class="modal fade" tabindex="-1" id="Time_intervals_{{technician_assigned_job_list.id}}">
            <div class="modal-dialog modal-dialog-centered modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        {% if technician_assigned_job_list.order_item.product %}
                        <h3 class="modal-title">Job Id-{{technician_assigned_job_list.id}}</h3>
                         
                            <h3>{{ technician_assigned_job_list.order_item.product.product_name }}({{ technician_assigned_job_list.order_item.product.sku }})</h3>
                        {% endif %}
                        <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">
                    <h4>Interval Time Log</h4>
                        <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>Date & Time</th>
                                        <th>Start Time</th>
                                        <th>Stop Time</th>
                                        <th>Total Time</th>
                                    </tr>
                                </thead>
                                 <tbody>
                                    {% for item in technician_assigned_job_list.get_job_interval_time %}
                                        <tr>
                                            <td> {% if item.created_at %}{{ item.created_at|date:"M. d, Y, H:i:s " }}{% endif %}</td>
                                            <td>
                                                {{ item.start_time_timer|date:"M. d, Y, H:i:s " }}
                                            </td>
                                            <td>
                                              {{ item.stop_time_timer|date:"M. d, Y, H:i:s " }}
                                            </td>
                                            <td>
                                             Total Time
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        {% if technician_assigned_job_list.job_type == 1 and technician_assigned_job_list.working_status != 3 %}
        <div class="modal fade" tabindex="-1" id="kt_modal_rescheduled_{{technician_assigned_job_list.id}}">
            <div class="modal-dialog modal-dialog-centered ">
                <div class="modal-content">
                    <div class="modal-header">
                        <span class="act-header">
                        {% if technician_assigned_job_list.order_item.product %}
                        <h3 class="modal-title  job-id-s">Job Id-{{technician_assigned_job_list.id}}</h3>
                         
                            <h3 class="tech-nme">{{ technician_assigned_job_list.order_item.product.product_name }}({{ technician_assigned_job_list.order_item.product.sku }})</h3>
                        {% endif %}</span>
                        <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 joblist-modal">
                    <h4>Reschedule Job</h4>
                  <form id="actionForm" method="POST" action="{% url 'quotation:update_job' technician_assigned_job_list.id %}">
                    {% csrf_token %}
                     
                     <div class="mb-3 dateInput"  >
                    <div class="mb-3 text-left mt-4">
                        <label for="rescheduleDate" class="form-label">Select Installation Date:</label>
                        <input type="date" class="form-control" id="rescheduleDate" name="installation_start_date">
                    </div>
                  <div class="mb-3 text-left mt-2" id="meet_time_{{ customer.id }}" >
                    <label for="meeting_time">Select Installation Time:</label>
                     <select class="form-select" data-placeholder="Select Installation Time" name="installation_time" id="installation_time" required>
                                                                                                        <option disabled selected value="">Select Installation Time</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:'h:i' == '00:00' %} selected {% endif %} value="00:00">00:00</option>
                                                                                                        <option  {% if technician_assigned_job_list.installation_time|time:'h:i' == '00:30' %} selected {% endif %} value="00:30">00:30</option>
                                                                                                        <option  {% if technician_assigned_job_list.installation_time|time:"h:i" == '01:00' %} selected {% endif %} value="01:00">01:00</option>
                                                                                                        <option  {% if technician_assigned_job_list.installation_time|time:"h:i" == '01:30' %} selected {% endif %} value="01:30">01:30</option>
                                                                                                        <option  {% if technician_assigned_job_list.installation_time|time:"h:i" == '02:00' %} selected {% endif %} value="02:00">02:00</option>
                                                                                                        <option  {% if technician_assigned_job_list.installation_time|time:"h:i" == '02:30' %} selected {% endif %} value="02:30">02:30</option>
                                                                                                        <option  {% if technician_assigned_job_list.installation_time|time:"h:i" == '03:00' %} selected {% endif %} value="03:00">03:00</option>
                                                                                                        <option  {% if technician_assigned_job_list.installation_time|time:"h:i" == '03:30' %} selected {% endif %} value="03:30">03:30</option>
                                                                                                        <option  {% if technician_assigned_job_list.installation_time|time:"h:i" == '04:00' %} selected {% endif %} value="04:00">04:00</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '04:30' %} selected {% endif %}  value="04:30">04:30</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '05:00' %} selected {% endif %} value="05:00">05:00</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '05:30' %} selected {% endif %} value="05:30">05:30</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '06:00' %} selected {% endif %} value="06:00">06:00</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '06:30' %} selected {% endif %} value="06:30">06:30</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '07:00' %} selected {% endif %} value="07:00">07:00</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '07:30' %} selected {% endif %} value="07:30">07:30</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '08:00' %} selected {% endif %} value="08:00">08:00</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '08:30' %} selected {% endif %} value="08:30">08:30</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '09:00' %} selected {% endif %} value="09:00">09:00</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '09:30' %} selected {% endif %} value="09:30">09:30</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '10:00' %} selected {% endif %} value="10:00">10:00</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '10:30' %} selected {% endif %} value="10:30">10:30</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '11:00' %} selected {% endif %} value="11:00">11:00</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '11:30' %} selected {% endif %} value="11:30">11:30</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '12:00' %} selected {% endif %} value="12:00">12:00</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '12:30' %} selected {% endif %} value="12:30">12:30</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '13:00' %} selected {% endif %} value="13:00">13:00</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '13:30' %} selected {% endif %} value="13:30">13:30</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '14:00' %} selected {% endif %} value="14:00">14:00</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '14:30' %} selected {% endif %} value="14:30">14:30</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '15:00' %} selected {% endif %} value="15:00">15:00</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '15:30' %} selected {% endif %} value="15:30">15:30</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '16:00' %} selected {% endif %} value="16:00">16:00</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '16:30' %} selected {% endif %} value="16:30">16:30</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '17:00' %} selected {% endif %} value="17:00">17:00</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '17:30' %} selected {% endif %} value="17:30">17:30</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '18:00' %} selected {% endif %} value="18:00">18:00</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '18:30' %} selected {% endif %} value="18:30">18:30</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '19:00' %} selected {% endif %} value="19:00">19:00</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '19:30' %} selected {% endif %} value="19:30">19:30</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '20:00' %} selected {% endif %} value="20:00">20:00</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '20:30' %} selected {% endif %} value="20:30">20:30</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '21:00' %} selected {% endif %} value="21:00">21:00</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '21:30' %} selected {% endif %} value="21:30">21:30</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '22:00' %} selected {% endif %} value="22:00">22:00</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '22:30' %} selected {% endif %} value="22:30">22:30</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '23:00' %} selected {% endif %} value="23:00">23:00</option>
                                                                                                        <option {% if technician_assigned_job_list.installation_time|time:"h:i" == '23:30' %} selected {% endif %} value="23:30">23:30</option>
                                                                                                     </select>
                </div>
                 <div class="mb-3 text-left mt-4">
                        <label for="rescheduleDate" class="form-label">Select Installation End Date:</label>
                        <input type="date" class="form-control" id="rescheduleDate" name="installation_end_date">
                    </div>
                 <div class="mb-3 text-left mt-2">
                    <label for="userid-{{ customer.id }}" class="form-label ">Comment:</label>
                    <input tyep="text" class="form-control" name="comment" placeholder="Enter Comment">
                </div>
                </div>
                <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Submit</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                 </form>
                         
                    </div>

                    <!--<div class="modal-footer">-->
                    <!--    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>-->
                    <!--</div>-->
                </div>
            </div>
        </div>
        {% endif %}
        <div class="modal fade" tabindex="-1" id="kt_modal_stacked_{{technician_assigned_job_list.id}}">
            <div class="modal-dialog modal-dialog-centered modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <span class="act-header">
                        {% if technician_assigned_job_list.order_item.product %}
                        <h3 class="modal-title  job-id-s">Job Id-{{technician_assigned_job_list.id}}</h3>
                         
                            <h3 class="tech-nme">{{ technician_assigned_job_list.order_item.product.product_name }}({{ technician_assigned_job_list.order_item.product.sku }})</h3>
                        {% endif %}</span>
                        <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 joblist-modal">
                    <h4>Activity</h4>
                    
                    
                        <table class="table table-bordered table-striped job-listc">
                                <thead>
                                <tr>
                                    <th>Timestamp</th>
                                    <th>Activity Type</th>
                                    <th>Activity</th>
                                    
                                </tr>
                                </thead>
                                
                                
                                 <tbody>
                                    {% for item in technician_assigned_job_list.get_combined_data %}
                                        <tr>
                                            <td> {% if item.created_at and item.content %}{{ item.created_at|date:"M. d, Y, g:i A" }}{% elif item.created_at and item.call_time %}{{ item.created_at|date:"M. d, Y, g:i A" }} {% elif item.created_at and item.installation_date %}{{ item.created_at|date:"M. d, Y, g:i A" }} {% elif  item.created_at  and item.chat_image %}{{ item.created_at|date:"M. d, Y, g:i A" }}{% endif %}</td>
                                            <td>
                                                {% if item.call_time %}
                                                    Call Log
                                                {% elif item.content %}
                                                    Chat
                                                {% elif item.chat_image %}
                                                    Chat Image   
                                
                                                {% elif item.installation_date and item.comment %}
                                                    Rescheduling
                                                {% elif item.installation_date or service_request_date %}
                                                    Scheduling
                                                    
                                                {% endif %}
                                            </td>
                                            <td>
                                                <span class="activity-con">
                                                    {% if item.call_time %}
                                                       <span class="call-detail"> Call Detail: {{ item.call_description }} {% if item.call_time %}{{ item.call_time|date:"g:i A" }}{% else %}-{% endif %} {% if item.call_duration %}{{ item.call_duration }}{% endif %}</span>
                                                    {% elif item.content %}
                                                       <span class="activity-sender"> <b>Sender: </b>{{ item.get_sender }}</span> <span class="activity-receiver"><b>Receiver: </b>{{ item.get_recipient }} </span> <span class="activity-msg"><b>Message: </b>{{ item.content }}</span>
                                                        
                                                     {% elif item.chat_image %}
                                                        <span class="activity-sender"> <b>Sender: </b>{{ item.chat.get_sender }} </span><span class="activity-receiver"><b>Receiver: </b>{{ item.chat.get_recipient }} </span> <span class="activity-img"><b class="act-img">Image: </b>   <a href="{{ item.chat_image.url }}" target="_blank"><img src="{{ item.chat_image.url }}" alt="Chat Image" style="max-width: 50px; height: auto;"></a></span>
                                                        
                                                    {% elif item.installation_date %}
                                                       <span class="activity-date"> <b>Date: </b>{{ item.installation_date }}</span> <span class="activity-time"><b>Time: </b>{{ item.installation_time|date:"g:i A" }}  {%if item.comment %} </span> <span class="activity-comment"><b>Comment: </b>{{ item.comment }}{% endif %}</span>
                                                    
                                                    {% endif %}
                                                </span>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                                
                    
                            </table>
                {% if technician_assigned_job_list.get_service_signatures %}
                <br><br>
                <hr>
                 <h4>Images Uploaded By Technician</h4>
                         <table  class="table table-bordered table-striped job-listc">
                            
                             <tr>
                              <td colspan="3" >
                                       {% for sig in technician_assigned_job_list.get_service_signatures %}
                                            {% for img in sig.get_signature_after_image %}
                                                <a href="{{ img.accepted_image.url }}" download>
                                                    <img src="{{ img.accepted_image.url }}"
                                                         alt="Accepted Image"
                                                         class="thumbnail"
                                                         style="width:80px; height:80px; cursor:pointer; margin:5px;">
                                                </a>
                                            {% endfor %}
                                        {% endfor %}
                                    </td>
                             </tr>
                         </table>
                      
                         {% endif %}
                    </div>

                    <!--<div class="modal-footer">-->
                    <!--    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>-->
                    <!--</div>-->
                </div>
            </div>
        </div>
    {% endfor %}
    

    
    
    
    
    
    
    {% for technician_assigned_job_list in technician_assigned_job_lists %}
        <div class="modal fade" tabindex="-1" id="kt_modal_stackedd_{{technician_assigned_job_list.id}}">
            <div class="modal-dialog modal-dialog-centered modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        {% if technician_assigned_job_list.order_item.product %}
                        <h3 class="modal-title">Job Id-{{technician_assigned_job_list.id}}</h3>
                            <h3>{{ technician_assigned_job_list.order_item.product.product_name }}({{ technician_assigned_job_list.order_item.product.sku }})</h3>
                        {% endif %}
                        <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">
                        <div class="imageblock bg-light-warning rounded p-5">
                            {% with service_request_images=technician_assigned_job_list.related_service_request_images %}
                                {% if service_request_images %}
                                    <!--<h2>Service Request Images</h2>-->
                                    <div class="d-flex align-items-center btn-color-primary mb-7">
                                        <div class="d-flex btn btn-color-primary me-3 p-0">
                                            <i class="ki-duotone ki-category fs-4"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>             
                                        </div>
                                        <div class="d-flex flex-column">
                                            <h6 class="text-gray-900 text-hover-primary fs-4 fw-bold m-0">Service Request Images</h6>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-start imagewrapper"> <!-- Set display to flex and prevent wrapping to new rows -->
                                       {%if service_request_images != '' %}
                                            {% for image in service_request_images %}
                                                {% if image.service_request_image %}
                                                    <a href="{{ image.service_request_image.url }}" data-id="{{ image.id }}">
                                                        <img src="{{ image.service_request_image.url }}" alt="Service Request Image"> <!-- Define width and height for each image -->
                                                    </a>
                                                
                                                {% endif %}
                                            {% endfor %}
                                        {% else %}
                                                <p>No service request images available.</p>
                                        {% endif %}
                                    </div>
                                {% endif %}
                            {% endwith %}
                        </div>
                        <div class="separator separator-dashed mx-lg-5 mt-7 mb-7" bis_skin_checked="1"></div>
                        <div class="videoblock bg-light-info rounded p-5">
                            {% with service_request_videos=technician_assigned_job_list.related_service_request_images %}
                                {% if service_request_videos %}
                                    <!--<h2>Service Request Videos</h2>-->
                                    <div class="d-flex align-items-center btn-color-primary mb-7">
                                        <div class="d-flex btn btn-color-primary me-3 p-0">
                                            <i class="ki-duotone ki-category fs-3"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>             
                                        </div>
                                        <div class="d-flex flex-column">
                                            <h6 class="text-gray-900 text-hover-primary fs-4 fw-bold m-0">Service Request Videos</h6>
                                        </div>
                                    </div>
                                     <div class="d-flex align-items-center justify-content-start videowrapper">
                                         
                                        {% if service_request_videos %}
                                            {% for video in service_request_videos %}
                                                {% if video.service_request_video %}
                                                    
                                                        <video width="150" height="258" controls>
                                                            <source src="{{ video.service_request_video.url }}" type="video/mp4">
                                                            Your browser does not support the video tag.
                                                        </video>
                                                        
                                                
                                                
                                                {% endif %}
                                                
                                            {% endfor %}
                                        
                                         {% else %}
                                                     <p>No service request videos available.</p>    
                                         {% endif %}  
                                    </div>
                                {% endif %}
                            {% endwith %}
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}

{% endif %}

<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script> 


<script>
// Use Bootstrap modal show event
// document.querySelectorAll('.modal').forEach(modal => {
//     modal.addEventListener('shown.bs.modal', function () {
//         const previewImg = modal.querySelector('img[id^="previewImg_"]');
//         const thumbnails = modal.querySelectorAll('.thumbnail');
//         const zoomInBtn = modal.querySelector('button[id^="zoomInBtn_"]');
//         const zoomOutBtn = modal.querySelector('button[id^="zoomOutBtn_"]');

//         if (!previewImg) return;

//         let scale = 1;

//         thumbnails.forEach(img => {
//             img.addEventListener('click', () => {
//                 previewImg.src = img.src;
//                 previewImg.style.display = 'block';
//                 scale = 1;
//                 previewImg.style.transform = `scale(${scale})`;
//             });
//         });

//         if (zoomInBtn) {
//             zoomInBtn.addEventListener('click', () => {
//                 scale += 0.2;
//                 previewImg.style.transform = `scale(${scale})`;
//             });
//         }

//         if (zoomOutBtn) {
//             zoomOutBtn.addEventListener('click', () => {
//                 if (scale > 0.2) {
//                     scale -= 0.2;
//                     previewImg.style.transform = `scale(${scale})`;
//                 }
//             });
//         }
//     });
// });

</script>

<script>  
new tempusDominus.TempusDominus(document.getElementById("kt_td_picker_localization"), {
  display: {
    icons: {
        clear: "ki-outline ki-trash fs-1",
        close: "ki-outline ki-cross fs-1",
    },
    buttons: {
        clear: true,
        close: true,
    },
    },
    localization: {
       locale: "en",
       startOfTheWeek: 1,
       format: "d-MM-yyyy"
   }
});
new tempusDominus.TempusDominus(document.getElementById("kt_td_picker_localization1"), {
  display: {
    icons: {
        clear: "ki-outline ki-trash fs-1",
        close: "ki-outline ki-cross fs-1",
    },
    buttons: {
        clear: true,
        close: true,
    },
    },
    localization: {
       locale: "en",
       startOfTheWeek: 1,
       format: "d-MM-yyyy"
   }
});

$('[data-fancybox]').fancybox({
  // Options will go here
  buttons : [
    'close'
  ],
  wheel : false,
  transitionEffect: "slide",
  loop            : true,
  toolbar         : false,
  arrows          : true,
  clickContent    : false
});
</script>
{% endblock script %}