{% 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>
.imageblock {
    width:100%;
    padding:20px;
    background:#fff2e3;
    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;
}
td.text-end a i.fa.fa-commenting {
    position: absolute;
    top: -27px;
    right: 0px;
    font-size: 13px !important;
}
td.text-end a i.fa.fa-commenting::before {
    font-size: 24px;
    position: relative;
    top: 15px
}
 td.text-end a {
    position: relative;
}
</style>
{% endblock addcss %}

{% load i18n %}

{% block title %}{% translate "List Jobs" %}{% endblock %}


{% block breadcumbheading %}
{% translate "Manage Jobs" %}
{% endblock  %}
{% block breadcumbfirst %}
<a href="/technician/assigned/job/list/" class="text-muted text-hover-primary" style="text-transform: capitalize;">Manage Jobs </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 un-head">
            <h3 class="card-title align-items-start flex-column tech-title">
				<span class="card-label fw-bold text-gray-800">Jobs 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">
         {% 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">Sr.No</th> -->
                                      <th class="pb-3 min-w-100px fw-bold text-start">Job ID</th>
                                      <th class="pb-3 min-w-100px fw-bold text-start">Order ID</th>
                                      <th class="pb-3 min-w-100px fw-bold text-start">Customer </th>
                                      <th class="pb-3 min-w-100px fw-bold text-start">Technician</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">Assigned Date</th>-->
                                      <th class="pb-3 min-w-100px fw-bold text-start">Installation DateTime</th>
                                      <!--<th class="pb-3 min-w-100px fw-bold text-start">Warranty Date</th>-->
                                      <th class="pb-3 min-w-100px fw-bold text-start">Job Details</th>
                                      <th class="pb-3 min-w-100px fw-bold text-start">Job Status</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">{{forloop.counter}}</span>-->
                                                    <!--  </td>-->
                    
                                                    <td class="text-start pe-0">
                                                      <span class="text-black-600 fw-bold fs-6">#{{technician_assigned_job_list.id}}</span>
                                                    </td>
                                                    
                                                    <td class="text-start pe-0">
                                                      <span class="text-black-600 fw-bold fs-6">#{{technician_assigned_job_list.order_item.order.id}}</span>
                                                    </td>
                                                    <td class="text-start pe-0">
                                                      <span class="text-black-600 fw-bold fs-6"> {{technician_assigned_job_list.order_item.order.invoice.customer }} </span>
                                                    </td>
                                                      <td class="text-start pe-0">
                                                        <span class="text-black-600 fw-bold fs-6">{% if technician_assigned_job_list.technician.userinfo %}
                                                          {{ technician_assigned_job_list.technician.userinfo.get_full_name }} {% endif %}
                                                          </span>
                                                          {% if technician_assigned_job_list.secondary_technician %}<br>
                                                          <span class="text-black-600 fw-bold fs-6">{% if technician_assigned_job_list.secondary_technician.userinfo %}
                                                           <span class="text-black-600 fw-bold badge py-3 px-4 fs-7 warr-span  status  accepted ">{{ technician_assigned_job_list.secondary_technician.userinfo.get_full_name }}(Secondary Tech)</span>{% endif %}
                                                          </span>
                                                            {% endif %}
                                                     </td>
                                                    
                                                    <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}}({{technician_assigned_job_list.order_item.product.sku}}) <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>
                                                   </span>
                                                    </td>
                                                    
                                                      <!--<td class="text-start pe-0">-->
                                                      <!--  <span class="text-black-600 fw-bold fs-6">{{technician_assigned_job_list.booking_date|date:"d-m-Y"}}</span>-->
                                                      <!--</td>-->
                                                      <td class="text-start pe-0">
                                                        <span class="text-black-600 fw-bold fs-6">Start Date: {%if technician_assigned_job_list.installation_date%}{{technician_assigned_job_list.installation_date|date:"d-m-Y"}}{%else%}-{%endif%}</span><br>
                                                        <span class="text-black-600 fw-bold fs-6">{%if technician_assigned_job_list.installation_time%}{{ technician_assigned_job_list.installation_time|date:"g:i A" }}{%endif%}</span><br>
                                                        <span class="text-black-600 fw-bold fs-6">End Date: {%if technician_assigned_job_list.installation_end_date%}{{technician_assigned_job_list.installation_end_date|date:"d-m-Y"}}{%else%}-{%endif%}</span><br>
                                                       
                                                    
                                                     </td>  
                                                            
                                                       <!--  <td class="text-start pe-0">-->
                                                       <!--   <span class="text-black-600 fw-bold fs-6">{%if technician_assigned_job_list.order_item.warranty_end_date %}{{technician_assigned_job_list.order_item.warranty_end_date|date:"d-m-Y"}}{%else%}-{%endif%}</span>-->
                                                       <!--</td>  -->
                                                          
                                                    <td class="text-start pe-0">
                                                      <span class="text-black-600 fw-bold fs-6">{% if technician_assigned_job_list.order_item.is_trade %} Trade {% else %}{{technician_assigned_job_list.get_job_type_display}}{% endif %} 
                                                      <!--<br> {{technician_assigned_job_list.total_job_time}}-->
                                                      <br>{{technician_assigned_job_list.total_job_interval_time}}</span><br>
                                                    {% if technician_assigned_job_list.order_item.work_order_pdf and technician_assigned_job_list.get_job_type_display == 'Installation' %}
                                                    <a href="{{ technician_assigned_job_list.order_item.work_order_pdf.url }}" target="_blank" title="View WorkOrder"  class="pdf-icon" > <i class="fa-solid fa-file-pdf"></i> </a>
                                                    {% endif %}
                                                    </td>
                                                    
                                                     
                                                
                                                     
                                                   
                                                    <td class="text-start pe-0">
                                                      <span class="text-black-600 fw-bold badge py-3 px-4 fs-7  status  {%if technician_assigned_job_list.job_status == 0%}created {% elif  technician_assigned_job_list.job_status == 1 %}  shipped {% elif  technician_assigned_job_list.job_status == 2 %}  created {% elif  technician_assigned_job_list.job_status == 3 %}  created {% elif  technician_assigned_job_list.job_status == 4 %}  shipped{% endif %}   ">{%if technician_assigned_job_list.job_status == 0%}{{technician_assigned_job_list.get_job_status_display}}{% elif  technician_assigned_job_list.job_status == 1 %}{{technician_assigned_job_list.get_job_status_display}}{% elif  technician_assigned_job_list.job_status == 2 %}{{technician_assigned_job_list.get_job_status_display}}{% elif  technician_assigned_job_list.job_status == 3 %}{{technician_assigned_job_list.get_job_status_display}}{% elif  technician_assigned_job_list.job_status == 4 %}{{technician_assigned_job_list.get_job_status_display}}{%else%}-{% endif %}</span>
                                                   {%if technician_assigned_job_list.customer_signature_required == 1 %} <br><br><span class="text-black-600 fw-bold badge py-3 px-4 fs-7  status  {%if technician_assigned_job_list.job_status == 0%}created {% elif  technician_assigned_job_list.job_status == 1 %}  shipped {% elif  technician_assigned_job_list.job_status == 2 %}  created {% elif  technician_assigned_job_list.job_status == 3 %}  created {% elif  technician_assigned_job_list.job_status == 4 %}  shipped{% endif %}   "> Customer Sign remaining </span>{% endif %}
                                                   </td>  
                                                    <td class="text-end">     
                                                        <a href="{%url 'quotation:show_job_chat' technician_assigned_job_list.id %}"><i class="fa fa-commenting"  style="font-size:24px; color:#1a1b1c; cursor: pointer;"  >{{ technician_assigned_job_list.unread_count }}</i></a>
                                                    </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" >-->
                                                            
                                                   <!--        {% if technician_assigned_job_list.service %}-->
                                                            
                                                   <!--          <div class="menu-item px-3">-->
                                                   <!--              <a href="#" data-bs-toggle="modal" data-bs-target="#kt_modal_stackedd_{{technician_assigned_job_list.id}}" data-kt-menu-placement="bottom-end" class="menu-link px-3">View Details</a>-->
                                                   <!--         </div>-->

                                                   <!--         {% endif %}-->
                                                        
                                                   <!--         <div class="menu-item px-3">-->
                                                   <!--           <a href="#" data-bs-toggle="modal" data-bs-target="#kt_modal_stacked_{{technician_assigned_job_list.id}}" data-kt-menu-placement="bottom-end" class="menu-link px-3">Activity</a>-->
                                                   <!--         </div> -->
                                                   <!--            {% if technician_assigned_job_list.job_type == 1 and technician_assigned_job_list.working_status != 3 %}-->
                                                   <!--         <div class="menu-item px-3">-->
                                                   <!--           <a href="#" data-bs-toggle="modal" data-bs-target="#kt_modal_rescheduled_{{technician_assigned_job_list.id}}" data-kt-menu-placement="bottom-end" class="menu-link px-3">Reschedule Job</a>-->
                                                   <!--         </div> -->
                                                   <!--         {% endif %}-->
                                                            <!--{% if technician_assigned_job_list.order_item.is_trade == 0 %}-->
                                                            <!--<div class="menu-item px-3">-->
                                                            <!--  <a href="#" data-bs-toggle="modal" data-bs-target="#Time_intervals_{{technician_assigned_job_list.id}}" data-kt-menu-placement="bottom-end" class="menu-link px-3">Time Log</a>-->
                                                            <!--</div> -->
                                                            <!--{% endif %}-->
                                                   <!--         {% if technician_assigned_job_list.pdf_file  %}-->
                                                   <!--          <div class="menu-item px-3">-->
                                                   <!--              <a href="{% url 'pdf-api' technician_assigned_job_list.id %}" target="_blank" class="menu-link px-3">Checklist</a>-->
                                                   <!--         </div>-->
                                                   <!--         {% endif %}-->
                                                   <!--     </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 %}