{% 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: #fbfbfb !important;
    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{
    max-height:200px !important;
    border-radius: 0.475rem;
    width:auto;
background: #e1e1e1;
    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 "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 %}
	<!--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">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">
         	     <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 px-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 %}>{% if customer.is_individual %} {{customer.first_name}} {{customer.last_name}} {% else %} {{customer.company_name}}{% endif %}</option>
                                 {% endfor %}
                			</select>
                        </div>
                         <div class="col-lg-3 px-4 mb-4">
                           <select name="product_id" aria-label="Product List" data-control="select2" data-placeholder="Select Product" class="form-select form-select-lg fw-semibold">
            					<option value="">Product List</option>
            					 {% for product in products %} 
                                    <option value="{{product.id}}" {% if request.GET.product_id|slugify == product.id|slugify %} selected {% endif %} >{{product.product_name}}({{product.sku}})</option>
                                 {% endfor %} 
            				</select>
                        </div>
                        <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="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="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-lg-3 px-4">
                         <select placeholder="Job Type" name="job_type" id="job_type"  data-control="select2" data-placeholder="Select Status"  class="form-select" tabindex="1">
                            <option value="" >Select Status</option>
                            <option value="1" {% if request.GET.job_type == '1' %}selected{% endif %}>Installation</option>
                            <option value="2" {% if request.GET.job_type == '2' %}selected{% endif %}>Service</option>
                        </select>
                        </div>
            
                          
                          <div class="col-3 ps-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:technician_assigned_job_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">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">Product</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">Work Order PDF</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">Scheduled On</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">Time Spend</th>
                                      <th class="pb-3 min-w-100px fw-bold text-start">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>
                                                       <span class="text-black-600 fw-bold fs-6">
                                                            {% if technician_assigned_job_list.order_item.is_trade %}
                                                                Pickup
                                                            {% else %}
                                                                {{ technician_assigned_job_list.get_job_type_display }}
                                                            {% endif %}
                                                        </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" 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">{% 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>
                                            {% if technician_assigned_job_list.job_type == 1 %}
                                                {% if technician_assigned_job_list.work_order_pdf %}
                                                    <a href="{{ technician_assigned_job_list.work_order_pdf.url }}" target="_blank" title="View WorkOrder"  class="pdf-icon workorder-pdf" > <i class="fa-solid fa-file-pdf"></i> </a>
                                                    {% if technician_assigned_job_list.job_completed == 0  %}
                                                        <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#myModal_workorder_edit_{{technician_assigned_job_list.id}}" title="Edit WorkOrder"  class="pdf-icon workorder-pdf" > <i class="fa-solid fa-pencil"></i> </a>
                                                    {% endif %}
                                                {% else %}
                                                    {% if technician_assigned_job_list.job_completed == 0  %}
                                                        <a href="javascript:void(0)"  data-bs-toggle="modal" data-bs-target="#myModal_workorder_edit_{{technician_assigned_job_list.id}}" title="Add WorkOrder"  class="pdf-icon workorder-pdf" > <i class="fa-solid fa-plus"></i> </a>
                                                    {% endif %}
                                                {% endif %}
                                            {% endif %}
                                            {% if technician_assigned_job_list.job_type == 2 %}
                                                {% if technician_assigned_job_list.work_order_pdf %}
                                                    <a href="{{ technician_assigned_job_list.work_order_pdf.url }}" target="_blank" title="View WorkOrder"  class="pdf-icon workorder-pdf" > <i class="fa-solid fa-file-pdf"></i> </a>
                                                    {% if technician_assigned_job_list.job_completed == 0  %}
                                                        <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#myModal_service_workorder_edit_{{technician_assigned_job_list.id}}" title="Edit WorkOrder"  class="pdf-icon workorder-pdf" > <i class="fa-solid fa-pencil"></i> </a>
                                                    {% endif %}
                                                {% else %}
                                                    {% if technician_assigned_job_list.job_completed == 0  %}
                                                        <!--<a href="javascript:void(0)"  data-bs-toggle="modal" data-bs-target="#myModal_service_workorder_edit_{{technician_assigned_job_list.id}}" title="Add WorkOrder"  class="pdf-icon workorder-pdf" > <i class="fa-solid fa-plus"></i> </a>-->
                                                    {% endif %}
                                                {% endif %}
                                            {% endif %}
                                        </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">
                                                     
                                                        <strong>{{ technician_assigned_job_list.total_job_interval_time }}</strong>
                                                
                                                        {% if technician_assigned_job_list.tech_breakdown|length > 1 %}
                                                            <br>
                                                            <strong>Technician Breakdown:</strong>
                                                            <br>
                                                            {% for tech in technician_assigned_job_list.tech_breakdown %}
                                                                <small>
                                                                    {{ tech.full_name  }} :
                                                                    <strong>{{ tech.total_time }}</strong>
                                                                </small>
                                                                <br>
                                                            {% endfor %}
                                                        {% endif %}
                                                        {% if technician_assigned_job_list.tech_breakdown|length < 2 %}
                                                            <br>
                                                        {% endif %}
                                                        {% if technician_assigned_job_list.technician_assigned_job_list.job_work_order_pdf and technician_assigned_job_list.get_job_type_display == 'Installation' %}
                                                            <a href="{{ technician_assigned_job_list.technician_assigned_job_list.job_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="#" 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>
                                                             {% elif technician_assigned_job_list.job_completed == 1 %}
                                                              <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">Signature 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 %}
                                                            {%if technician_assigned_job_list.customer_signature_required == 1 %}
                                                            <div class="menu-item px-3">
                                                                 <a href="{% url 'quotation:send_service_customer_sign_email' technician_assigned_job_list.id %}" target="_blank" class="menu-link px-3">
                                                                     {%if technician_assigned_job_list.sign_email_cust == 1 %}
                                                                     Resend 
                                                                     {% else %}
                                                                     Send
                                                                     {% endif %} Sign Email</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 -->
<script>
$(document).on("change", ".address-radio", function () {
    var id=$(this).attr('data-id');
    if ($(this).val() === "different") {
        $("#different_address_fields"+id).slideDown();
    } else {
        $("#different_address_fields"+id).slideUp();
    }
});
</script>
{% 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>
               
                    </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 %}
          {% if technician_assigned_job_list.work_order_pdf %}
                                            <a href="{{ technician_assigned_job_list.work_order_pdf.url }}" target="_blank" title="View WorkOrder"  class="pdf-icon workorder-pdf" > <i class="fa-solid fa-file-pdf"></i> </a>
                                         
                                                <div class="modal fades" tabindex="-1" id="myModal_workorder_edit_{{technician_assigned_job_list.id}}" data-bs-backdrop="static" data-bs-keyboard="false">
                                        <div class="modal-dialog modal-dialog-centered work-ordermodal">
                                               <form method="post" action="{% url 'quotation:update_work_order' %}" enctype="multipart/form-data" >
                                            {% csrf_token %}
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h3 class="modal-title">Work Order Form</h3>
                                                     <button id="closeModalBtn"  type="button"  style="margin-left:15px;" onclick="closeModal('{{technician_assigned_job_list.id}}','workorder_edit')">X</button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="row">
                                                        <div class="col-lg-3 col-md-4 col-xl-4 col-sm-6"><p><b>Installation JOB Id:</b> <span id="orderIdPlaceholderWC">{{technician_assigned_job_list.id}}</span></p></div>
                                                        <div class="col-lg-3 col-md-4 col-xl-4 col-sm-6"><p><b>Order Id:</b> <span id="orderIdPlaceholderWC">{{technician_assigned_job_list.order_item.order.id}}</span></p></div>
                                                        <div class="col-lg-3 col-md-4 col-xl-4 col-sm-6"><p><b>Orderitem Id:</b> <span id="orderItemIdPlaceholderWC">{{technician_assigned_job_list.order_item.id}}</span></p></div>
                                                        <div class="col-lg-3 col-md-4 col-xl-4 col-sm-6"><p><b>Customer Name: </b><span id="ordercustnameWC">{{technician_assigned_job_list.order_item.order.invoice.customer}}</span></p></div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-6 col-xl-6 col-sm-6">
                                                            <label class="required form-label mb-2 mt-3" for="technician"><strong>Select Technician:</strong></label>
                                                            <select class="form-select" data-placeholder="Select Technician" name="technician" id="technician" required>
                                                                <option disabled selected value="">Technician</option>
                                                                {% for technician in technicians %}
                                                                <option value="{{ technician.id }}" {% if technician_assigned_job_list.job_work_order.technician.id == technician.id  %} selected {% endif %} >{{ technician.userinfo.first_name }} {{ technician.userinfo.last_name }}</option>
                                                                {% endfor %}
                                                            </select>
                                                        </div>
                                                        <div class="col-lg-6 col-md-6 col-xl-6 col-sm-6">
                                                            <label class="required form-label mb-2 mt-3" for="installationDate"><strong>Select  Date:</strong></label>
                                                            <div class="input-group" id="kt_td_picker_localization_end" data-td-target-input="nearest" data-td-target="#kt_td_picker_localization_end" data-td-toggle="datetimepicker">
                                                                <input type="text" class="form-control wc_date" data-td-target="#kt_td_picker_localization_end" readonly name="installation_start_date"  value="{% if technician_assigned_job_list.job_work_order.installation_start_date %}{{ technician_assigned_job_list.job_work_order.installation_start_date|date:'d-m-Y' }}{% else %}{% now 'd-m-Y' %}{% endif %}" required />
                                                                <span class="input-group-text" data-td-target="#kt_td_picker_localization_end" 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>
                                                    <div class="row">
                                                        <label class="required form-label mb-2 mt-3" for="business_hours_from_time"><strong>Select Business Hours:</strong></label>
                                                      <div class="col-md-6">
                                                            <select class="form-select" data-placeholder="Select From" name="business_hours_from_time" id="business_hours_from_time" required>
                                                            <option disabled selected value="">Select From</option>
                                                            <option value="00:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '12 AM' %}selected{% endif %}>00:00</option>
                                                            <option value="00:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '12:30 AM' %}selected{% endif %}>00:30</option>
                                                            <option value="01:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '1 AM' %}selected{% endif %}>01:00</option>
                                                            <option value="01:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '1:30 AM' %}selected{% endif %}>01:30</option>
                                                            <option value="02:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '2 AM' %}selected{% endif %}>02:00</option>
                                                            <option value="02:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '2:30 AM' %}selected{% endif %}>02:30</option>
                                                            <option value="03:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '3 AM' %}selected{% endif %}>03:00</option>
                                                            <option value="03:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '3:30 AM' %}selected{% endif %}>03:30</option>
                                                            <option value="04:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '4 AM' %}selected{% endif %}>04:00</option>
                                                            <option value="04:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '4:30 AM' %}selected{% endif %}>04:30</option>
                                                            <option value="05:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '5 AM' %}selected{% endif %}>05:00</option>
                                                            <option value="05:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '5:30 AM' %}selected{% endif %}>05:30</option>
                                                            <option value="06:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '6 AM' %}selected{% endif %}>06:00</option>
                                                            <option value="06:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '6:30 AM' %}selected{% endif %}>06:30</option>
                                                            <option value="07:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '7 AM' %}selected{% endif %}>07:00</option>
                                                            <option value="07:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '7:30 AM' %}selected{% endif %}>07:30</option>
                                                            <option value="08:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '8 AM' %}selected{% endif %}>08:00</option>
                                                            <option value="08:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '8:30 AM' %}selected{% endif %}>08:30</option>
                                                            <option value="09:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '9 AM' %}selected{% endif %}>09:00</option>
                                                            <option value="09:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '9:30 AM' %}selected{% endif %}>09:30</option>
                                                            <option value="10:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '10 AM' %}selected{% endif %}>10:00</option>
                                                            <option value="10:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '10:30 AM' %}selected{% endif %}>10:30</option>
                                                            <option value="11:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '11 AM' %}selected{% endif %}>11:00</option>
                                                            <option value="11:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '11:30 AM' %}selected{% endif %}>11:30</option>
                                                            <option value="12:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '12 PM' %}selected{% endif %}>12:00</option>
                                                            <option value="12:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '12:30 PM' %}selected{% endif %}>12:30</option>
                                                            <option value="13:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '1 PM' %}selected{% endif %}>13:00</option>
                                                            <option value="13:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '1:30 PM' %}selected{% endif %}>13:30</option>
                                                            <option value="14:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '2 PM' %}selected{% endif %}>14:00</option>
                                                            <option value="14:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '2:30 PM' %}selected{% endif %}>14:30</option>
                                                            <option value="15:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '3 PM' %}selected{% endif %}>15:00</option>
                                                            <option value="15:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '3:30 PM' %}selected{% endif %}>15:30</option>
                                                            <option value="16:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '4 PM' %}selected{% endif %}>16:00</option>
                                                            <option value="16:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '4:30 PM' %}selected{% endif %}>16:30</option>
                                                            <option value="17:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '5 PM' %}selected{% endif %}>17:00</option>
                                                            <option value="17:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '5:30 PM' %}selected{% endif %}>17:30</option>
                                                            <option value="18:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '6 PM' %}selected{% endif %}>18:00</option>
                                                            <option value="18:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '6:30 PM' %}selected{% endif %}>18:30</option>
                                                            <option value="19:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '7 PM' %}selected{% endif %}>19:00</option>
                                                            <option value="19:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '7:30 PM' %}selected{% endif %}>19:30</option>
                                                            <option value="20:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '8 PM' %}selected{% endif %}>20:00</option>
                                                            <option value="20:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '8:30 PM' %}selected{% endif %}>20:30</option>
                                                            <option value="21:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '9 PM' %}selected{% endif %}>21:00</option>
                                                            <option value="21:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '9:30 PM' %}selected{% endif %}>21:30</option>
                                                            <option value="22:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '10 PM' %}selected{% endif %}>22:00</option>
                                                            <option value="22:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '10:30 PM' %}selected{% endif %}>22:30</option>
                                                            <option value="23:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '11 PM' %}selected{% endif %}>23:00</option>
                                                            <option value="23:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '11:30 PM' %}selected{% endif %}>23:30</option>
                                                        </select>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <select class="form-select" data-placeholder="Select To" name="business_hours_to_time" id="business_hours_to_time" required>
                                                                <option disabled selected value="">Select To</option>
                                                                <option value="00:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '12 AM' %}selected{% endif %}>00:00</option>
                                                                <option value="00:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '12:30 AM' %}selected{% endif %}>00:30</option>
                                                                <option value="01:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '1 AM' %}selected{% endif %}>01:00</option>
                                                                <option value="01:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '1:30 AM' %}selected{% endif %}>01:30</option>
                                                                <option value="02:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '2 AM' %}selected{% endif %}>02:00</option>
                                                                <option value="02:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '2:30 AM' %}selected{% endif %}>02:30</option>
                                                                <option value="03:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '3 AM' %}selected{% endif %}>03:00</option>
                                                                <option value="03:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '3:30 AM' %}selected{% endif %}>03:30</option>
                                                                <option value="04:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '4 AM' %}selected{% endif %}>04:00</option>
                                                                <option value="04:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '4:30 AM' %}selected{% endif %}>04:30</option>
                                                                <option value="05:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '5 AM' %}selected{% endif %}>05:00</option>
                                                                <option value="05:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '5:30 AM' %}selected{% endif %}>05:30</option>
                                                                <option value="06:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '6 AM' %}selected{% endif %}>06:00</option>
                                                                <option value="06:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '6:30 AM' %}selected{% endif %}>06:30</option>
                                                                <option value="07:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '7 AM' %}selected{% endif %}>07:00</option>
                                                                <option value="07:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '7:30 AM' %}selected{% endif %}>07:30</option>
                                                                <option value="08:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '8 AM' %}selected{% endif %}>08:00</option>
                                                                <option value="08:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '8:30 AM' %}selected{% endif %}>08:30</option>
                                                                <option value="09:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '9 AM' %}selected{% endif %}>09:00</option>
                                                                <option value="09:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '9:30 AM' %}selected{% endif %}>09:30</option>
                                                                <option value="10:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '10 AM' %}selected{% endif %}>10:00</option>
                                                                <option value="10:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '10:30 AM' %}selected{% endif %}>10:30</option>
                                                                <option value="11:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '11 AM' %}selected{% endif %}>11:00</option>
                                                                <option value="11:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '11:30 AM' %}selected{% endif %}>11:30</option>
                                                                <option value="12:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '12 PM' %}selected{% endif %}>12:00</option>
                                                                <option value="12:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '12:30 PM' %}selected{% endif %}>12:30</option>
                                                                <option value="13:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '1 PM' %}selected{% endif %}>13:00</option>
                                                                <option value="13:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '1:30 PM' %}selected{% endif %}>13:30</option>
                                                                <option value="14:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '2 PM' %}selected{% endif %}>14:00</option>
                                                                <option value="14:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '2:30 PM' %}selected{% endif %}>14:30</option>
                                                                <option value="15:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '3 PM' %}selected{% endif %}>15:00</option>
                                                                <option value="15:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '3:30 PM' %}selected{% endif %}>15:30</option>
                                                                <option value="16:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '4 PM' %}selected{% endif %}>16:00</option>
                                                                <option value="16:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '4:30 PM' %}selected{% endif %}>16:30</option>
                                                                <option value="17:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '5 PM' %}selected{% endif %}>17:00</option>
                                                                <option value="17:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '5:30 PM' %}selected{% endif %}>17:30</option>
                                                                <option value="18:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '6 PM' %}selected{% endif %}>18:00</option>
                                                                <option value="18:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '6:30 PM' %}selected{% endif %}>18:30</option>
                                                                <option value="19:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '7 PM' %}selected{% endif %}>19:00</option>
                                                                <option value="19:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '7:30 PM' %}selected{% endif %}>19:30</option>
                                                                <option value="20:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '8 PM' %}selected{% endif %}>20:00</option>
                                                                <option value="20:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '8:30 PM' %}selected{% endif %}>20:30</option>
                                                                <option value="21:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '9 PM' %}selected{% endif %}>21:00</option>
                                                                <option value="21:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '9:30 PM' %}selected{% endif %}>21:30</option>
                                                                <option value="22:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '10 PM' %}selected{% endif %}>22:00</option>
                                                                <option value="22:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '10:30 PM' %}selected{% endif %}>22:30</option>
                                                                <option value="23:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '11 PM' %}selected{% endif %}>23:00</option>
                                                                <option value="23:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '11:30 PM' %}selected{% endif %}>23:30</option>
                                                        </select>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                    <div class="col-md-6">
                                                        <label class="required form-label mb-2 mt-3" for="forklift_available"><strong> Forklift Available:</strong></label>
                                                        <select class="form-select" data-placeholder="Select Technician" name="forklift_available" id="forklift_available" required>
                                                                <option {% if technician_assigned_job_list.job_work_order.forklift_available == 0 %} selected {% endif %} value="0" >No</option>
                                                                <option {% if technician_assigned_job_list.job_work_order.forklift_available == 1 %} selected {% endif %} value="1" >Yes</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="required form-label mb-2 mt-3" for="Size"><strong> Size:</strong></label>
                                                        <input type="text" name="Size" class="form-control" value="{{technician_assigned_job_list.job_work_order.size}}"  required placeholder="Enter Product Size"> 
                                                    </div>
                                                </div>
                                                    <div class="row">
                                                        <label class="form-label mb-2 mt-3">Note</label>
                                                        <textarea name="note" id="description"  class="editor" placeholder="Enter Note">{{technician_assigned_job_list.job_work_order.note}}</textarea>
                                                    </div>
                                                    <div class="row mt-3">
                                                        <label class="form-label"><strong>Installation Address:</strong></label>
                                                        <div class="col-md-12">
                                                            <div class="form-check">
                                                                <input class="form-check-input address-radio" data-id="{{technician_assigned_job_list.id}}" id="same_address_type{{technician_assigned_job_list.id}}" type="radio" name="address_type" value="same" {% if  technician_assigned_job_list.job_work_order.address_type == 'same' %} checked {% endif %}>
                                                                <label class="form-check-label" for="same_address_type{{technician_assigned_job_list.id}}">Select Billing Address</label>
                                                                ({% if technician_assigned_job_list.order_item.order.invoice.customer.street %} {{technician_assigned_job_list.order_item.order.invoice.customer.street}}{% endif%}
                                          {% if technician_assigned_job_list.order_item.order.invoice.customer.city %}, {{technician_assigned_job_list.order_item.order.invoice.customer.city}}{% endif%}
                                           {% if technician_assigned_job_list.order_item.order.invoice.customer.state %}, {{technician_assigned_job_list.order_item.order.invoice.customer.state}}{% endif%}
                                            {% if technician_assigned_job_list.order_item.order.invoice.customer.country %}, {{technician_assigned_job_list.order_item.order.invoice.customer.country}}{% endif%}
                                             {% if technician_assigned_job_list.order_item.order.invoice.customer.post_code %}, {{technician_assigned_job_list.order_item.order.invoice.customer.post_code}} {% endif%})
                                                            </div>
                                                            <div class="form-check">
                                                                <input class="form-check-input address-radio" data-id="{{technician_assigned_job_list.id}}"  type="radio" id="diff_address_type{{technician_assigned_job_list.id}}" name="address_type" value="different" {% if  technician_assigned_job_list.job_work_order.address_type == 'different' %} checked {% endif %}>
                                                                <label class="form-check-label" for="diff_address_type{{technician_assigned_job_list.id}}">Add New Address</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- Hidden until "Different Address" selected -->
                                                    <div id="different_address_fields{{technician_assigned_job_list.id}}" {% if  technician_assigned_job_list.job_work_order.address_type == 'different' %}  {% else %} style="display:none; margin-top:10px;" {% endif %} >
                                                        <div class="row mt-2">
                                                            <div class="col-md-6">
                                                                <label class="form-label">Street</label>
                                                                <input type="text" name="street" value="{% if technician_assigned_job_list.job_work_order.street %} {{technician_assigned_job_list.job_work_order.street}} {% endif %}" class="form-control">
                                                            </div>
                                                            <div class="col-md-6">
                                                                <label class="form-label">Suburb</label>
                                                                <input type="text" name="suburb" value="{% if technician_assigned_job_list.job_work_order.suburb %} {{technician_assigned_job_list.job_work_order.suburb}} {% endif %}" class="form-control">
                                                            </div>
                                                        </div>
                                                        <div class="row mt-2">
                                                            <div class="col-md-4">
                                                                <label class="form-label">State</label>
                                                                 <select  class="form-select "  data-control="select2" data-placeholder="Select State"  tabindex="0"  name="state" id="state" >
                                                                    <option></option>
                                                                    <option value="ACT"  {% if technician_assigned_job_list.job_work_order.state == 'ACT' %} selected {% endif %}>Australian Capital Territory</option>
                                                                    <option value="NSW" {% if technician_assigned_job_list.job_work_order.state == 'NSW' %} selected {% endif %}>New South Wales </option>
                                                                    <option value="NT" {% if technician_assigned_job_list.job_work_order.state == 'NT' %} selected {% endif %}>Northern Territory</option>
                                                                    <option value="QLD" {% if technician_assigned_job_list.job_work_order.state == 'QLD' %} selected {% endif %}>Queensland </option>
                                                                    <option value="SA" {% if technician_assigned_job_list.job_work_order.state == 'SA' %} selected {% endif %}>South Australia</option>
                                                                    <option value="TAS" {% if technician_assigned_job_list.job_work_order.state == 'TAS' %} selected {% endif %}>Tasmania </option>
                                                                    <option value="VIC" {% if technician_assigned_job_list.job_work_order.state == 'VIC' %} selected {% endif %}>Victoria </option>
                                                                    <option value="WA" {% if technician_assigned_job_list.job_work_order.state == 'WA' %} selected {% endif %}>Western Australia </option>
                                                                  </select>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <label class="form-label">Postcode</label>
                                                                <input type="text" name="postcode" value="{% if technician_assigned_job_list.job_work_order.postcode %} {{technician_assigned_job_list.job_work_order.postcode}} {% endif %}" class="form-control">
                                                            </div>
                                                            <div class="col-md-4">
                                                                <label class="form-label">Country</label>
                                                                <select  class="form-select "  data-control="select2" data-placeholder="Select Country"   tabindex="0" name="country" id="country"  >
                                                                    <option value="Australia"  selected >Australia</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <!--<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>-->
                                                        <button type="submit" class="btn btn-primary">Update Workorder</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <input type="hidden" name="order_item_id"  value="{{technician_assigned_job_list.order_item.id}}">
                                            <input type="hidden" name="tech_assign_order_item_id"  value="{{technician_assigned_job_list.id}}">
                                            <input type="hidden" name="order_identifier" value="">
                                             </form>
                                        </div>
                                    </div>
                                           
                                    {% else %}
                                   {% if technician_assigned_job_list.job_completed == 0  %}
                                            <form method="post" action="{% url 'quotation:update_work_order' %}" >
                                            {% csrf_token %}
                                    <div class="modal fades" tabindex="-1" id="myModal_workorder_edit_{{technician_assigned_job_list.id}}" data-bs-backdrop="static" data-bs-keyboard="false">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h3 class="modal-title">Work Order Form</h3>
                                                 <button id="closeModalBtn"  type="button"  style="margin-left:15px;" onclick="closeModal('{{technician_assigned_job_list.id}}','workorder_edit')">X</button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="row">
                                                    <div class="col-lg-3 col-md-4 col-xl-4 col-sm-6"><p><b>Installation JOB Id:</b> <span id="orderIdPlaceholderWC">{{technician_assigned_job_list.id}}</span></p></div>
                                                    <div class="col-lg-3 col-md-4 col-xl-4 col-sm-6"><p><b>Order Id:</b> <span id="orderIdPlaceholderWC">{{technician_assigned_job_list.order_item.order.id}}</span></p></div>
                                                    <div class="col-lg-3 col-md-4 col-xl-4 col-sm-6"><p><b>Orderitem Id:</b> <span id="orderItemIdPlaceholderWC">{{technician_assigned_job_list.order_item.id}}</span></p></div>
                                                    <div class="col-lg-3 col-md-4 col-xl-4 col-sm-6"><p><b>Customer Name: </b><span id="ordercustnameWC">{{technician_assigned_job_list.order_item.order.invoice.customer}}</span></p></div>
                                                </div>
                                                 <div class="row">
                                                    <div class="col-md-6">
                                                        <label class="required form-label mb-2 mt-3" for="technician"><strong>Select Technician:</strong></label>
                                                        <select class="form-select" data-placeholder="Select Technician" name="technician" id="technician" required>
                                                            <option disabled selected value="">Technician</option>
                                                            {% for technician in technicians %}
                                                                <option value="{{ technician.id }}" {% if technician_assigned_job_list.job_work_order.technician.id == technician.id  %} selected {% endif %} >{{ technician.userinfo.first_name }} {{ technician.userinfo.last_name }}</option>
                                                            {% endfor %}
                                                        </select>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="required form-label mb-2 mt-3" for="installationDate"><strong>Select  Date:</strong></label>
                                                         <div class="input-group" id="kt_td_picker_localization_end" data-td-target-input="nearest" data-td-target="#kt_td_picker_localization_end" data-td-toggle="datetimepicker">
                                                            <input type="text" class="form-control wc_date" data-td-target="#kt_td_picker_localization_end" readonly name="installation_start_date"  value="{% if technician_assigned_job_list.job_work_order.installation_start_date %}{{ technician_assigned_job_list.job_work_order.installation_start_date|date:'d-m-Y' }}{% else %}{% now 'd-m-Y' %}{% endif %}" required />
                                                            <span class="input-group-text" data-td-target="#kt_td_picker_localization_end" 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>
                                                <div class="row">
                                                    <label class="required form-label mb-2 mt-3" for="business_hours_from_time"><strong>Select Business Hours:</strong></label>
                                                    <div class="col-md-6">
                                                        <select class="form-select" data-placeholder="Select From" name="business_hours_from_time" id="business_hours_from_time" required>
                                                        <option disabled selected value="">Select From</option>
                                                        <option value="00:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '12 AM' %}selected{% endif %}>00:00</option>
                                                        <option value="00:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '12:30 AM' %}selected{% endif %}>00:30</option>
                                                        <option value="01:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '1 AM' %}selected{% endif %}>01:00</option>
                                                        <option value="01:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '1:30 AM' %}selected{% endif %}>01:30</option>
                                                        <option value="02:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '2 AM' %}selected{% endif %}>02:00</option>
                                                        <option value="02:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '2:30 AM' %}selected{% endif %}>02:30</option>
                                                        <option value="03:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '3 AM' %}selected{% endif %}>03:00</option>
                                                        <option value="03:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '3:30 AM' %}selected{% endif %}>03:30</option>
                                                        <option value="04:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '4 AM' %}selected{% endif %}>04:00</option>
                                                        <option value="04:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '4:30 AM' %}selected{% endif %}>04:30</option>
                                                        <option value="05:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '5 AM' %}selected{% endif %}>05:00</option>
                                                        <option value="05:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '5:30 AM' %}selected{% endif %}>05:30</option>
                                                        <option value="06:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '6 AM' %}selected{% endif %}>06:00</option>
                                                        <option value="06:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '6:30 AM' %}selected{% endif %}>06:30</option>
                                                        <option value="07:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '7 AM' %}selected{% endif %}>07:00</option>
                                                        <option value="07:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '7:30 AM' %}selected{% endif %}>07:30</option>
                                                        <option value="08:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '8 AM' %}selected{% endif %}>08:00</option>
                                                        <option value="08:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '8:30 AM' %}selected{% endif %}>08:30</option>
                                                        <option value="09:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '9 AM' %}selected{% endif %}>09:00</option>
                                                        <option value="09:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '9:30 AM' %}selected{% endif %}>09:30</option>
                                                        <option value="10:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '10 AM' %}selected{% endif %}>10:00</option>
                                                        <option value="10:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '10:30 AM' %}selected{% endif %}>10:30</option>
                                                        <option value="11:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '11 AM' %}selected{% endif %}>11:00</option>
                                                        <option value="11:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '11:30 AM' %}selected{% endif %}>11:30</option>
                                                        <option value="12:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '12 PM' %}selected{% endif %}>12:00</option>
                                                        <option value="12:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '12:30 PM' %}selected{% endif %}>12:30</option>
                                                        <option value="13:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '1 PM' %}selected{% endif %}>13:00</option>
                                                        <option value="13:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '1:30 PM' %}selected{% endif %}>13:30</option>
                                                        <option value="14:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '2 PM' %}selected{% endif %}>14:00</option>
                                                        <option value="14:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '2:30 PM' %}selected{% endif %}>14:30</option>
                                                        <option value="15:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '3 PM' %}selected{% endif %}>15:00</option>
                                                        <option value="15:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '3:30 PM' %}selected{% endif %}>15:30</option>
                                                        <option value="16:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '4 PM' %}selected{% endif %}>16:00</option>
                                                        <option value="16:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '4:30 PM' %}selected{% endif %}>16:30</option>
                                                        <option value="17:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '5 PM' %}selected{% endif %}>17:00</option>
                                                        <option value="17:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '5:30 PM' %}selected{% endif %}>17:30</option>
                                                        <option value="18:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '6 PM' %}selected{% endif %}>18:00</option>
                                                        <option value="18:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '6:30 PM' %}selected{% endif %}>18:30</option>
                                                        <option value="19:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '7 PM' %}selected{% endif %}>19:00</option>
                                                        <option value="19:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '7:30 PM' %}selected{% endif %}>19:30</option>
                                                        <option value="20:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '8 PM' %}selected{% endif %}>20:00</option>
                                                        <option value="20:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '8:30 PM' %}selected{% endif %}>20:30</option>
                                                        <option value="21:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '9 PM' %}selected{% endif %}>21:00</option>
                                                        <option value="21:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '9:30 PM' %}selected{% endif %}>21:30</option>
                                                        <option value="22:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '10 PM' %}selected{% endif %}>22:00</option>
                                                        <option value="22:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '10:30 PM' %}selected{% endif %}>22:30</option>
                                                        <option value="23:00" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '11 PM' %}selected{% endif %}>23:00</option>
                                                        <option value="23:30" {% if technician_assigned_job_list.job_work_order.business_hours_from_time == '11:30 PM' %}selected{% endif %}>23:30</option>
                                                    </select>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <select class="form-select" data-placeholder="Select To" name="business_hours_to_time" id="business_hours_to_time" required>
                                                        <option disabled selected value="">Select To</option>
                                                        <option value="00:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '12 AM' %}selected{% endif %}>00:00</option>
                                                        <option value="00:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '12:30 AM' %}selected{% endif %}>00:30</option>
                                                        <option value="01:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '1 AM' %}selected{% endif %}>01:00</option>
                                                        <option value="01:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '1:30 AM' %}selected{% endif %}>01:30</option>
                                                        <option value="02:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '2 AM' %}selected{% endif %}>02:00</option>
                                                        <option value="02:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '2:30 AM' %}selected{% endif %}>02:30</option>
                                                        <option value="03:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '3 AM' %}selected{% endif %}>03:00</option>
                                                        <option value="03:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '3:30 AM' %}selected{% endif %}>03:30</option>
                                                        <option value="04:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '4 AM' %}selected{% endif %}>04:00</option>
                                                        <option value="04:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '4:30 AM' %}selected{% endif %}>04:30</option>
                                                        <option value="05:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '5 AM' %}selected{% endif %}>05:00</option>
                                                        <option value="05:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '5:30 AM' %}selected{% endif %}>05:30</option>
                                                        <option value="06:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '6 AM' %}selected{% endif %}>06:00</option>
                                                        <option value="06:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '6:30 AM' %}selected{% endif %}>06:30</option>
                                                        <option value="07:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '7 AM' %}selected{% endif %}>07:00</option>
                                                        <option value="07:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '7:30 AM' %}selected{% endif %}>07:30</option>
                                                        <option value="08:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '8 AM' %}selected{% endif %}>08:00</option>
                                                        <option value="08:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '8:30 AM' %}selected{% endif %}>08:30</option>
                                                        <option value="09:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '9 AM' %}selected{% endif %}>09:00</option>
                                                        <option value="09:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '9:30 AM' %}selected{% endif %}>09:30</option>
                                                        <option value="10:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '10 AM' %}selected{% endif %}>10:00</option>
                                                        <option value="10:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '10:30 AM' %}selected{% endif %}>10:30</option>
                                                        <option value="11:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '11 AM' %}selected{% endif %}>11:00</option>
                                                        <option value="11:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '11:30 AM' %}selected{% endif %}>11:30</option>
                                                        <option value="12:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '12 PM' %}selected{% endif %}>12:00</option>
                                                        <option value="12:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '12:30 PM' %}selected{% endif %}>12:30</option>
                                                        <option value="13:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '1 PM' %}selected{% endif %}>13:00</option>
                                                        <option value="13:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '1:30 PM' %}selected{% endif %}>13:30</option>
                                                        <option value="14:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '2 PM' %}selected{% endif %}>14:00</option>
                                                        <option value="14:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '2:30 PM' %}selected{% endif %}>14:30</option>
                                                        <option value="15:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '3 PM' %}selected{% endif %}>15:00</option>
                                                        <option value="15:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '3:30 PM' %}selected{% endif %}>15:30</option>
                                                        <option value="16:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '4 PM' %}selected{% endif %}>16:00</option>
                                                        <option value="16:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '4:30 PM' %}selected{% endif %}>16:30</option>
                                                        <option value="17:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '5 PM' %}selected{% endif %}>17:00</option>
                                                        <option value="17:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '5:30 PM' %}selected{% endif %}>17:30</option>
                                                        <option value="18:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '6 PM' %}selected{% endif %}>18:00</option>
                                                        <option value="18:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '6:30 PM' %}selected{% endif %}>18:30</option>
                                                        <option value="19:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '7 PM' %}selected{% endif %}>19:00</option>
                                                        <option value="19:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '7:30 PM' %}selected{% endif %}>19:30</option>
                                                        <option value="20:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '8 PM' %}selected{% endif %}>20:00</option>
                                                        <option value="20:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '8:30 PM' %}selected{% endif %}>20:30</option>
                                                        <option value="21:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '9 PM' %}selected{% endif %}>21:00</option>
                                                        <option value="21:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '9:30 PM' %}selected{% endif %}>21:30</option>
                                                        <option value="22:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '10 PM' %}selected{% endif %}>22:00</option>
                                                        <option value="22:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '10:30 PM' %}selected{% endif %}>22:30</option>
                                                        <option value="23:00" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '11 PM' %}selected{% endif %}>23:00</option>
                                                        <option value="23:30" {% if technician_assigned_job_list.job_work_order.business_hours_to_time == '11:30 PM' %}selected{% endif %}>23:30</option>
                                                    </select>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <label class="required form-label mb-2 mt-3" for="forklift_available"><strong> Forklift Available:</strong></label>
                                                        <select class="form-select" data-placeholder="Select Technician" name="forklift_available" id="forklift_available" required>
                                                                <option {% if technician_assigned_job_list.job_work_order.forklift_available == 0 %} selected {% endif %} value="0" >No</option>
                                                                <option {% if technician_assigned_job_list.job_work_order.forklift_available == 1 %} selected {% endif %} value="1" >Yes</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="required form-label mb-2 mt-3" for="Size"><strong> Size:</strong></label>
                                                        <input type="text" name="Size" class="form-control" value="{{technician_assigned_job_list.job_work_order.size}}"  required placeholder="Enter Product Size"> 
                                                    </div>
                                                </div>
                                           
                                            <div class="row">
                                                <label class="form-label  mb-2 mt-3">Note</label>
                                                <textarea name="note" id="description" class="editor" placeholder="Enter Note">{{technician_assigned_job_list.job_work_order.note}}</textarea>
                                            </div>
                                            <div class="row mt-3">
                                                        <label class="form-label"><strong>Installation Address:</strong></label>
                                                        <div class="col-md-12">
                                                            <div class="form-check">
                                                                <input class="form-check-input address-radio" data-id="{{technician_assigned_job_list.id}}" id="same_address_type{{technician_assigned_job_list.id}}" type="radio" name="address_type" value="same" checked >
                                                                <label class="form-check-label" for="same_address_type{{technician_assigned_job_list.id}}">Select Billing Address</label>
                                                                ({% if technician_assigned_job_list.order_item.order.invoice.customer.street %} {{technician_assigned_job_list.order_item.order.invoice.customer.street}}{% endif%}
                                                                    {% if technician_assigned_job_list.order_item.order.invoice.customer.city %}, {{technician_assigned_job_list.order_item.order.invoice.customer.city}}{% endif%}
                                                                    {% if technician_assigned_job_list.order_item.order.invoice.customer.state %}, {{technician_assigned_job_list.order_item.order.invoice.customer.state}}{% endif%}
                                                                    {% if technician_assigned_job_list.order_item.order.invoice.customer.country %}, {{technician_assigned_job_list.order_item.order.invoice.customer.country}}{% endif%}
                                                                    {% if technician_assigned_job_list.order_item.order.invoice.customer.post_code %}, {{technician_assigned_job_list.order_item.order.invoice.customer.post_code}} {% endif%})
                                                            </div>
                                                            <div class="form-check">
                                                                <input class="form-check-input address-radio" data-id="{{technician_assigned_job_list.id}}"  type="radio" id="diff_address_type{{technician_assigned_job_list.id}}" name="address_type" value="different" >
                                                                <label class="form-check-label" for="diff_address_type{{technician_assigned_job_list.id}}">Add New Address</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- Hidden until "Different Address" selected -->
                                                    <div id="different_address_fields{{technician_assigned_job_list.id}}" style="display:none; margin-top:10px;" >
                                                        <div class="row mt-2">
                                                            <div class="col-md-6">
                                                                <label class="form-label">Street</label>
                                                                <input type="text" name="street" value="" class="form-control">
                                                            </div>
                                                            <div class="col-md-6">
                                                                <label class="form-label">Suburb</label>
                                                                <input type="text" name="suburb" value="" class="form-control">
                                                            </div>
                                                        </div>
                                                        <div class="row mt-2">
                                                            <div class="col-md-4">
                                                                <label class="form-label">State</label>
                                                                 <select  class="form-select "  data-control="select2" data-placeholder="Select State"  tabindex="0"  name="state" id="state" >
                                                                    <option></option>
                                                                    <option value="ACT"  >Australian Capital Territory</option>
                                                                    <option value="NSW" >New South Wales </option>
                                                                    <option value="NT" >Northern Territory</option>
                                                                    <option value="QLD" >Queensland </option>
                                                                    <option value="SA" >South Australia</option>
                                                                    <option value="TAS" >Tasmania </option>
                                                                    <option value="VIC" >Victoria </option>
                                                                    <option value="WA" >Western Australia </option>
                                                                  </select>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <label class="form-label">Postcode</label>
                                                                <input type="text" name="postcode" value="" class="form-control">
                                                            </div>
                                                            <div class="col-md-4">
                                                                <label class="form-label">Country</label>
                                                                 <select  class="form-select "  data-control="select2" data-placeholder="Select Country"   tabindex="0" name="country" id="country"  >
                                                                    <option value="Australia"  selected >Australia</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                            <div class="modal-footer">
                                                <!--<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>-->
                                                <button type="submit" class="btn btn-primary">Add Workorder</button>
                                            </div>
                                        </div>
                                    </div>
                                    <input type="hidden" name="order_item_id"  value="{{technician_assigned_job_list.order_item.id}}">
                                    <input type="hidden" name="tech_assign_order_item_id"  value="{{technician_assigned_job_list.id}}">
                                    <input type="hidden" name="order_identifier" value="">
                                </div>
                                </div>
                                </form>
                                    {% endif %}      
                                         {% endif %}
          {% endif %}
           {% if technician_assigned_job_list.job_type == 2 %}
          {% if technician_assigned_job_list.work_order_pdf %}
                                            <a href="{{ technician_assigned_job_list.work_order_pdf.url }}" target="_blank" title="View WorkOrder"  class="pdf-icon workorder-pdf" > <i class="fa-solid fa-file-pdf"></i> </a>
                                         
                                                <div class="modal fades" tabindex="-1" id="myModal_service_workorder_edit_{{technician_assigned_job_list.id}}" data-bs-backdrop="static" data-bs-keyboard="false">
                                        <div class="modal-dialog modal-dialog-centered work-ordermodal">
                                               <form method="post" action="{% url 'quotation:update_service_work_order' %}" enctype="multipart/form-data" >
                                            {% csrf_token %}
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h3 class="modal-title">Work Order Form</h3>
                                                     <button id="closeModalBtn"  type="button"  style="margin-left:15px;" onclick="closeModal('{{technician_assigned_job_list.id}}','service_workorder_edit')">X</button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="row">
                                                        <div class="col-lg-3 col-md-4 col-xl-4 col-sm-6"><p><b>Service JOB Id:</b> <span id="orderIdPlaceholderWC">{{technician_assigned_job_list.id}}</span></p></div>
                                                        <div class="col-lg-3 col-md-4 col-xl-4 col-sm-6"><p><b>Product:</b> <span id="orderIdPlaceholderWC">{{technician_assigned_job_list.order_item.product.product_name}}</span></p></div>
                                                        <div class="col-lg-3 col-md-4 col-xl-4 col-sm-6"><p><b>Machine:</b> <span id="orderIdPlaceholderWC">{{technician_assigned_job_list.order_item.serial_number.serial_number}}</span></p></div>
                                                        <!--<div class="col-lg-3 col-md-4 col-xl-4 col-sm-6"><p><b>Orderitem Id:</b> <span id="orderItemIdPlaceholderWC">{{technician_assigned_job_list.order_item.id}}</span></p></div>-->
                                                        <div class="col-lg-3 col-md-4 col-xl-4 col-sm-6"><p><b>Customer Name: </b><span id="ordercustnameWC">{{technician_assigned_job_list.order_item.order.invoice.customer}}</span></p></div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-6 col-xl-6 col-sm-6">
                                                            <label class="required form-label mb-2 mt-3" for="technician"><strong>Select Technician:</strong></label>
                                                            <select class="form-select" data-placeholder="Select Technician" name="technician" id="technician" required>
                                                                <option disabled selected value="">Technician</option>
                                                                {% for technician in technicians %}
                                                                <option value="{{ technician.id }}" {% if technician_assigned_job_list.service_job_work_order.technician.id == technician.id  %} selected {% endif %} >{{ technician.userinfo.first_name }} {{ technician.userinfo.last_name }}</option>
                                                                {% endfor %}
                                                            </select>
                                                        </div>
                                                        <div class="col-lg-6 col-md-6 col-xl-6 col-sm-6">
                                                            <label class="required form-label mb-2 mt-3" for="installationDate"><strong>Select  Date:</strong></label>
                                                            <div class="input-group" id="kt_td_picker_localization_end" data-td-target-input="nearest" data-td-target="#kt_td_picker_localization_end" data-td-toggle="datetimepicker">
                                                                <input type="text" class="form-control wc_date" data-td-target="#kt_td_picker_localization_end" readonly name="installation_start_date"  value="{% if technician_assigned_job_list.service_job_work_order.installation_start_date %}{{ technician_assigned_job_list.service_job_work_order.installation_start_date|date:'d-m-Y' }}{% else %}{% now 'd-m-Y' %}{% endif %}" required />
                                                                <span class="input-group-text" data-td-target="#kt_td_picker_localization_end" 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>
                                                <!--    <div class="row">-->
                                                <!--        <label class="required form-label mb-2 mt-3" for="business_hours_from_time"><strong>Select Business Hours:</strong></label>-->
                                                <!--      <div class="col-md-6">-->
                                                <!--            <select class="form-select" data-placeholder="Select From" name="business_hours_from_time" id="business_hours_from_time" required>-->
                                                <!--            <option disabled selected value="">Select From</option>-->
                                                <!--            <option value="00:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '12 AM' %}selected{% endif %}>00:00</option>-->
                                                <!--            <option value="00:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '12:30 AM' %}selected{% endif %}>00:30</option>-->
                                                <!--            <option value="01:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '1 AM' %}selected{% endif %}>01:00</option>-->
                                                <!--            <option value="01:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '1:30 AM' %}selected{% endif %}>01:30</option>-->
                                                <!--            <option value="02:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '2 AM' %}selected{% endif %}>02:00</option>-->
                                                <!--            <option value="02:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '2:30 AM' %}selected{% endif %}>02:30</option>-->
                                                <!--            <option value="03:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '3 AM' %}selected{% endif %}>03:00</option>-->
                                                <!--            <option value="03:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '3:30 AM' %}selected{% endif %}>03:30</option>-->
                                                <!--            <option value="04:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '4 AM' %}selected{% endif %}>04:00</option>-->
                                                <!--            <option value="04:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '4:30 AM' %}selected{% endif %}>04:30</option>-->
                                                <!--            <option value="05:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '5 AM' %}selected{% endif %}>05:00</option>-->
                                                <!--            <option value="05:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '5:30 AM' %}selected{% endif %}>05:30</option>-->
                                                <!--            <option value="06:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '6 AM' %}selected{% endif %}>06:00</option>-->
                                                <!--            <option value="06:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '6:30 AM' %}selected{% endif %}>06:30</option>-->
                                                <!--            <option value="07:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '7 AM' %}selected{% endif %}>07:00</option>-->
                                                <!--            <option value="07:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '7:30 AM' %}selected{% endif %}>07:30</option>-->
                                                <!--            <option value="08:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '8 AM' %}selected{% endif %}>08:00</option>-->
                                                <!--            <option value="08:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '8:30 AM' %}selected{% endif %}>08:30</option>-->
                                                <!--            <option value="09:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '9 AM' %}selected{% endif %}>09:00</option>-->
                                                <!--            <option value="09:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '9:30 AM' %}selected{% endif %}>09:30</option>-->
                                                <!--            <option value="10:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '10 AM' %}selected{% endif %}>10:00</option>-->
                                                <!--            <option value="10:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '10:30 AM' %}selected{% endif %}>10:30</option>-->
                                                <!--            <option value="11:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '11 AM' %}selected{% endif %}>11:00</option>-->
                                                <!--            <option value="11:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '11:30 AM' %}selected{% endif %}>11:30</option>-->
                                                <!--            <option value="12:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '12 PM' %}selected{% endif %}>12:00</option>-->
                                                <!--            <option value="12:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '12:30 PM' %}selected{% endif %}>12:30</option>-->
                                                <!--            <option value="13:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '1 PM' %}selected{% endif %}>13:00</option>-->
                                                <!--            <option value="13:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '1:30 PM' %}selected{% endif %}>13:30</option>-->
                                                <!--            <option value="14:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '2 PM' %}selected{% endif %}>14:00</option>-->
                                                <!--            <option value="14:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '2:30 PM' %}selected{% endif %}>14:30</option>-->
                                                <!--            <option value="15:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '3 PM' %}selected{% endif %}>15:00</option>-->
                                                <!--            <option value="15:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '3:30 PM' %}selected{% endif %}>15:30</option>-->
                                                <!--            <option value="16:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '4 PM' %}selected{% endif %}>16:00</option>-->
                                                <!--            <option value="16:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '4:30 PM' %}selected{% endif %}>16:30</option>-->
                                                <!--            <option value="17:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '5 PM' %}selected{% endif %}>17:00</option>-->
                                                <!--            <option value="17:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '5:30 PM' %}selected{% endif %}>17:30</option>-->
                                                <!--            <option value="18:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '6 PM' %}selected{% endif %}>18:00</option>-->
                                                <!--            <option value="18:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '6:30 PM' %}selected{% endif %}>18:30</option>-->
                                                <!--            <option value="19:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '7 PM' %}selected{% endif %}>19:00</option>-->
                                                <!--            <option value="19:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '7:30 PM' %}selected{% endif %}>19:30</option>-->
                                                <!--            <option value="20:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '8 PM' %}selected{% endif %}>20:00</option>-->
                                                <!--            <option value="20:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '8:30 PM' %}selected{% endif %}>20:30</option>-->
                                                <!--            <option value="21:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '9 PM' %}selected{% endif %}>21:00</option>-->
                                                <!--            <option value="21:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '9:30 PM' %}selected{% endif %}>21:30</option>-->
                                                <!--            <option value="22:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '10 PM' %}selected{% endif %}>22:00</option>-->
                                                <!--            <option value="22:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '10:30 PM' %}selected{% endif %}>22:30</option>-->
                                                <!--            <option value="23:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '11 PM' %}selected{% endif %}>23:00</option>-->
                                                <!--            <option value="23:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '11:30 PM' %}selected{% endif %}>23:30</option>-->
                                                <!--        </select>-->
                                                <!--        </div>-->
                                                <!--        <div class="col-md-6">-->
                                                <!--            <select class="form-select" data-placeholder="Select To" name="business_hours_to_time" id="business_hours_to_time" required>-->
                                                <!--                <option disabled selected value="">Select To</option>-->
                                                <!--                <option value="00:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '12 AM' %}selected{% endif %}>00:00</option>-->
                                                <!--                <option value="00:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '12:30 AM' %}selected{% endif %}>00:30</option>-->
                                                <!--                <option value="01:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '1 AM' %}selected{% endif %}>01:00</option>-->
                                                <!--                <option value="01:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '1:30 AM' %}selected{% endif %}>01:30</option>-->
                                                <!--                <option value="02:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '2 AM' %}selected{% endif %}>02:00</option>-->
                                                <!--                <option value="02:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '2:30 AM' %}selected{% endif %}>02:30</option>-->
                                                <!--                <option value="03:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '3 AM' %}selected{% endif %}>03:00</option>-->
                                                <!--                <option value="03:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '3:30 AM' %}selected{% endif %}>03:30</option>-->
                                                <!--                <option value="04:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '4 AM' %}selected{% endif %}>04:00</option>-->
                                                <!--                <option value="04:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '4:30 AM' %}selected{% endif %}>04:30</option>-->
                                                <!--                <option value="05:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '5 AM' %}selected{% endif %}>05:00</option>-->
                                                <!--                <option value="05:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '5:30 AM' %}selected{% endif %}>05:30</option>-->
                                                <!--                <option value="06:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '6 AM' %}selected{% endif %}>06:00</option>-->
                                                <!--                <option value="06:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '6:30 AM' %}selected{% endif %}>06:30</option>-->
                                                <!--                <option value="07:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '7 AM' %}selected{% endif %}>07:00</option>-->
                                                <!--                <option value="07:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '7:30 AM' %}selected{% endif %}>07:30</option>-->
                                                <!--                <option value="08:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '8 AM' %}selected{% endif %}>08:00</option>-->
                                                <!--                <option value="08:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '8:30 AM' %}selected{% endif %}>08:30</option>-->
                                                <!--                <option value="09:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '9 AM' %}selected{% endif %}>09:00</option>-->
                                                <!--                <option value="09:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '9:30 AM' %}selected{% endif %}>09:30</option>-->
                                                <!--                <option value="10:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '10 AM' %}selected{% endif %}>10:00</option>-->
                                                <!--                <option value="10:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '10:30 AM' %}selected{% endif %}>10:30</option>-->
                                                <!--                <option value="11:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '11 AM' %}selected{% endif %}>11:00</option>-->
                                                <!--                <option value="11:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '11:30 AM' %}selected{% endif %}>11:30</option>-->
                                                <!--                <option value="12:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '12 PM' %}selected{% endif %}>12:00</option>-->
                                                <!--                <option value="12:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '12:30 PM' %}selected{% endif %}>12:30</option>-->
                                                <!--                <option value="13:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '1 PM' %}selected{% endif %}>13:00</option>-->
                                                <!--                <option value="13:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '1:30 PM' %}selected{% endif %}>13:30</option>-->
                                                <!--                <option value="14:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '2 PM' %}selected{% endif %}>14:00</option>-->
                                                <!--                <option value="14:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '2:30 PM' %}selected{% endif %}>14:30</option>-->
                                                <!--                <option value="15:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '3 PM' %}selected{% endif %}>15:00</option>-->
                                                <!--                <option value="15:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '3:30 PM' %}selected{% endif %}>15:30</option>-->
                                                <!--                <option value="16:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '4 PM' %}selected{% endif %}>16:00</option>-->
                                                <!--                <option value="16:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '4:30 PM' %}selected{% endif %}>16:30</option>-->
                                                <!--                <option value="17:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '5 PM' %}selected{% endif %}>17:00</option>-->
                                                <!--                <option value="17:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '5:30 PM' %}selected{% endif %}>17:30</option>-->
                                                <!--                <option value="18:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '6 PM' %}selected{% endif %}>18:00</option>-->
                                                <!--                <option value="18:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '6:30 PM' %}selected{% endif %}>18:30</option>-->
                                                <!--                <option value="19:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '7 PM' %}selected{% endif %}>19:00</option>-->
                                                <!--                <option value="19:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '7:30 PM' %}selected{% endif %}>19:30</option>-->
                                                <!--                <option value="20:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '8 PM' %}selected{% endif %}>20:00</option>-->
                                                <!--                <option value="20:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '8:30 PM' %}selected{% endif %}>20:30</option>-->
                                                <!--                <option value="21:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '9 PM' %}selected{% endif %}>21:00</option>-->
                                                <!--                <option value="21:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '9:30 PM' %}selected{% endif %}>21:30</option>-->
                                                <!--                <option value="22:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '10 PM' %}selected{% endif %}>22:00</option>-->
                                                <!--                <option value="22:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '10:30 PM' %}selected{% endif %}>22:30</option>-->
                                                <!--                <option value="23:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '11 PM' %}selected{% endif %}>23:00</option>-->
                                                <!--                <option value="23:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '11:30 PM' %}selected{% endif %}>23:30</option>-->
                                                <!--        </select>-->
                                                <!--        </div>-->
                                                <!--    </div>-->
                                                <!--    <div class="row">-->
                                                <!--    <div class="col-md-6">-->
                                                <!--        <label class="required form-label mb-2 mt-3" for="forklift_available"><strong> Forklift Available:</strong></label>-->
                                                <!--        <select class="form-select" data-placeholder="Select Technician" name="forklift_available" id="forklift_available" required>-->
                                                <!--                <option {% if technician_assigned_job_list.service_job_work_order.forklift_available == 0 %} selected {% endif %} value="0" >No</option>-->
                                                <!--                <option {% if technician_assigned_job_list.service_job_work_order.forklift_available == 1 %} selected {% endif %} value="1" >Yes</option>-->
                                                <!--        </select>-->
                                                <!--    </div>-->
                                                <!--    <div class="col-md-6">-->
                                                <!--        <label class="required form-label mb-2 mt-3" for="Size"><strong> Size:</strong></label>-->
                                                <!--        <input type="text" name="Size" class="form-control" value="{{technician_assigned_job_list.service_job_work_order.size}}"  required placeholder="Enter Product Size"> -->
                                                <!--    </div>-->
                                                <!--</div>-->
                                                    <div class="row">
                                                        
                                                        <div class="col-md-6">
                                                        <label class="form-label mb-2 mt-3">Service Issue Description</label>
                                                        <textarea name="note_by_customer" id="description"  class="editor" placeholder="Enter Note" readonly>{{technician_assigned_job_list.service_job_work_order.note_by_customer}}</textarea>
                                                        </div>
                                                        <div class="col-md-6">
                                                        <label class="form-label mb-2 mt-3">Admin Note</label>
                                                        <textarea name="note_by_admin" id="description"  class="editor" placeholder="Enter Note">{{technician_assigned_job_list.service_job_work_order.note_by_admin}}</textarea>
                                                        </div>
                                                    </div>
                                                    <div class="row mt-3">
                                                        <label class="form-label"><strong>Installation Address:</strong></label>
                                                        <div class="col-md-12">
                                                            <div class="form-check">
                                                                <input class="form-check-input address-radio" data-id="{{technician_assigned_job_list.id}}" id="same_address_type{{technician_assigned_job_list.id}}" type="radio" name="address_type" value="same" {% if  technician_assigned_job_list.service_job_work_order.address_type == 'same' %} checked {% endif %}>
                                                                <label class="form-check-label" for="same_address_type{{technician_assigned_job_list.id}}">Select Billing Address</label>
                                                                ({% if technician_assigned_job_list.order_item.order.invoice.customer.street %} {{technician_assigned_job_list.order_item.order.invoice.customer.street}}{% endif%}
                                          {% if technician_assigned_job_list.order_item.order.invoice.customer.city %}, {{technician_assigned_job_list.order_item.order.invoice.customer.city}}{% endif%}
                                           {% if technician_assigned_job_list.order_item.order.invoice.customer.state %}, {{technician_assigned_job_list.order_item.order.invoice.customer.state}}{% endif%}
                                            {% if technician_assigned_job_list.order_item.order.invoice.customer.country %}, {{technician_assigned_job_list.order_item.order.invoice.customer.country}}{% endif%}
                                             {% if technician_assigned_job_list.order_item.order.invoice.customer.post_code %}, {{technician_assigned_job_list.order_item.order.invoice.customer.post_code}} {% endif%})
                                                            </div>
                                                            <div class="form-check">
                                                                <input class="form-check-input address-radio" data-id="{{technician_assigned_job_list.id}}"  type="radio" id="diff_address_type{{technician_assigned_job_list.id}}" name="address_type" value="different" {% if  technician_assigned_job_list.service_job_work_order.address_type == 'different' %} checked {% endif %}>
                                                                <label class="form-check-label" for="diff_address_type{{technician_assigned_job_list.id}}">Add New Address</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- Hidden until "Different Address" selected -->
                                                    <div id="different_address_fields{{technician_assigned_job_list.id}}" {% if  technician_assigned_job_list.service_job_work_order.address_type == 'different' %}  {% else %} style="display:none; margin-top:10px;" {% endif %} >
                                                        <div class="row mt-2">
                                                            <div class="col-md-6">
                                                                <label class="form-label">Street</label>
                                                                <input type="text" name="street" value="{% if technician_assigned_job_list.service_job_work_order.street %} {{technician_assigned_job_list.service_job_work_order.street}} {% endif %}" class="form-control">
                                                            </div>
                                                            <div class="col-md-6">
                                                                <label class="form-label">Suburb</label>
                                                                <input type="text" name="suburb" value="{% if technician_assigned_job_list.service_job_work_order.suburb %} {{technician_assigned_job_list.service_job_work_order.suburb}} {% endif %}" class="form-control">
                                                            </div>
                                                        </div>
                                                        <div class="row mt-2">
                                                            <div class="col-md-4">
                                                                <label class="form-label">State</label>
                                                                 <select  class="form-select "  data-control="select2" data-placeholder="Select State"  tabindex="0"  name="state" id="state" >
                                                                    <option></option>
                                                                    <option value="ACT"  {% if technician_assigned_job_list.service_job_work_order.state == 'ACT' %} selected {% endif %}>Australian Capital Territory</option>
                                                                    <option value="NSW" {% if technician_assigned_job_list.service_job_work_order.state == 'NSW' %} selected {% endif %}>New South Wales </option>
                                                                    <option value="NT" {% if technician_assigned_job_list.service_job_work_order.state == 'NT' %} selected {% endif %}>Northern Territory</option>
                                                                    <option value="QLD" {% if technician_assigned_job_list.service_job_work_order.state == 'QLD' %} selected {% endif %}>Queensland </option>
                                                                    <option value="SA" {% if technician_assigned_job_list.service_job_work_order.state == 'SA' %} selected {% endif %}>South Australia</option>
                                                                    <option value="TAS" {% if technician_assigned_job_list.service_job_work_order.state == 'TAS' %} selected {% endif %}>Tasmania </option>
                                                                    <option value="VIC" {% if technician_assigned_job_list.service_job_work_order.state == 'VIC' %} selected {% endif %}>Victoria </option>
                                                                    <option value="WA" {% if technician_assigned_job_list.service_job_work_order.state == 'WA' %} selected {% endif %}>Western Australia </option>
                                                                  </select>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <label class="form-label">Postcode</label>
                                                                <input type="text" name="postcode" value="{% if technician_assigned_job_list.service_job_work_order.postcode %} {{technician_assigned_job_list.service_job_work_order.postcode}} {% endif %}" class="form-control">
                                                            </div>
                                                            <div class="col-md-4">
                                                                <label class="form-label">Country</label>
                                                                <select  class="form-select "  data-control="select2" data-placeholder="Select Country"   tabindex="0" name="country" id="country"  >
                                                                    <option value="Australia"  selected >Australia</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <!--<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>-->
                                                        <button type="submit" class="btn btn-primary">Update Workorder</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <input type="hidden" name="order_item_id"  value="{{technician_assigned_job_list.order_item.id}}">
                                            <input type="hidden" name="tech_assign_order_item_id"  value="{{technician_assigned_job_list.id}}">
                                            <input type="hidden" name="order_identifier" value="">
                                             </form>
                                        </div>
                                    </div>
                                           
                                    {% else %}
                                   {% if technician_assigned_job_list.job_completed == 0  %}
                                            <form method="post" action="{% url 'quotation:update_service_work_order' %}" >
                                            {% csrf_token %}
                                    <div class="modal fades" tabindex="-1" id="myModal_service_workorder_edit_{{technician_assigned_job_list.id}}" data-bs-backdrop="static" data-bs-keyboard="false">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h3 class="modal-title">Work Order Form</h3>
                                                 <button id="closeModalBtn"  type="button"  style="margin-left:15px;" onclick="closeModal('{{technician_assigned_job_list.id}}','service_workorder_edit')">X</button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="row">
                                                    <div class="col-lg-3 col-md-4 col-xl-4 col-sm-6"><p><b>Service JOB Id:</b> <span id="orderIdPlaceholderWC">{{technician_assigned_job_list.id}}</span></p></div>
                                                    <div class="col-lg-3 col-md-4 col-xl-4 col-sm-6"><p><b>Product:</b> <span id="orderIdPlaceholderWC">{{technician_assigned_job_list.order_item.product.name}}</span></p></div>
                                                    <div class="col-lg-3 col-md-4 col-xl-4 col-sm-6"><p><b>Machine:</b> <span id="orderIdPlaceholderWC">{{technician_assigned_job_list.order_item.serial_number.serial_number}}</span></p></div>
                                                        
                                                    <!--<div class="col-lg-3 col-md-4 col-xl-4 col-sm-6"><p><b>Orderitem Id:</b> <span id="orderItemIdPlaceholderWC">{{technician_assigned_job_list.order_item.id}}</span></p></div>-->
                                                    <div class="col-lg-3 col-md-4 col-xl-4 col-sm-6"><p><b>Customer Name: </b><span id="ordercustnameWC">{{technician_assigned_job_list.order_item.order.invoice.customer}}</span></p></div>
                                                </div>
                                                 <div class="row">
                                                    <div class="col-md-6">
                                                        <label class="required form-label mb-2 mt-3" for="technician"><strong>Select Technician:</strong></label>
                                                        <select class="form-select" data-placeholder="Select Technician" name="technician" id="technician" required>
                                                            <option disabled selected value="">Technician</option>
                                                            {% for technician in technicians %}
                                                                <option value="{{ technician.id }}" {% if technician_assigned_job_list.service_job_work_order.technician.id == technician.id  %} selected {% endif %} >{{ technician.userinfo.first_name }} {{ technician.userinfo.last_name }}</option>
                                                            {% endfor %}
                                                        </select>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="required form-label mb-2 mt-3" for="installationDate"><strong>Select  Date:</strong></label>
                                                         <div class="input-group" id="kt_td_picker_localization_end" data-td-target-input="nearest" data-td-target="#kt_td_picker_localization_end" data-td-toggle="datetimepicker">
                                                            <input type="text" class="form-control wc_date" data-td-target="#kt_td_picker_localization_end" readonly name="installation_start_date"  value="{% if technician_assigned_job_list.service_job_work_order.installation_start_date %}{{ technician_assigned_job_list.service_job_work_order.installation_start_date|date:'d-m-Y' }}{% else %}{% now 'd-m-Y' %}{% endif %}" required />
                                                            <span class="input-group-text" data-td-target="#kt_td_picker_localization_end" 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>
                                                <!--<div class="row">-->
                                                <!--    <label class="required form-label mb-2 mt-3" for="business_hours_from_time"><strong>Select Business Hours:</strong></label>-->
                                                <!--    <div class="col-md-6">-->
                                                <!--        <select class="form-select" data-placeholder="Select From" name="business_hours_from_time" id="business_hours_from_time" required>-->
                                                <!--        <option disabled selected value="">Select From</option>-->
                                                <!--        <option value="00:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '12 AM' %}selected{% endif %}>00:00</option>-->
                                                <!--        <option value="00:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '12:30 AM' %}selected{% endif %}>00:30</option>-->
                                                <!--        <option value="01:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '1 AM' %}selected{% endif %}>01:00</option>-->
                                                <!--        <option value="01:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '1:30 AM' %}selected{% endif %}>01:30</option>-->
                                                <!--        <option value="02:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '2 AM' %}selected{% endif %}>02:00</option>-->
                                                <!--        <option value="02:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '2:30 AM' %}selected{% endif %}>02:30</option>-->
                                                <!--        <option value="03:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '3 AM' %}selected{% endif %}>03:00</option>-->
                                                <!--        <option value="03:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '3:30 AM' %}selected{% endif %}>03:30</option>-->
                                                <!--        <option value="04:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '4 AM' %}selected{% endif %}>04:00</option>-->
                                                <!--        <option value="04:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '4:30 AM' %}selected{% endif %}>04:30</option>-->
                                                <!--        <option value="05:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '5 AM' %}selected{% endif %}>05:00</option>-->
                                                <!--        <option value="05:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '5:30 AM' %}selected{% endif %}>05:30</option>-->
                                                <!--        <option value="06:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '6 AM' %}selected{% endif %}>06:00</option>-->
                                                <!--        <option value="06:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '6:30 AM' %}selected{% endif %}>06:30</option>-->
                                                <!--        <option value="07:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '7 AM' %}selected{% endif %}>07:00</option>-->
                                                <!--        <option value="07:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '7:30 AM' %}selected{% endif %}>07:30</option>-->
                                                <!--        <option value="08:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '8 AM' %}selected{% endif %}>08:00</option>-->
                                                <!--        <option value="08:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '8:30 AM' %}selected{% endif %}>08:30</option>-->
                                                <!--        <option value="09:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '9 AM' %}selected{% endif %}>09:00</option>-->
                                                <!--        <option value="09:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '9:30 AM' %}selected{% endif %}>09:30</option>-->
                                                <!--        <option value="10:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '10 AM' %}selected{% endif %}>10:00</option>-->
                                                <!--        <option value="10:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '10:30 AM' %}selected{% endif %}>10:30</option>-->
                                                <!--        <option value="11:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '11 AM' %}selected{% endif %}>11:00</option>-->
                                                <!--        <option value="11:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '11:30 AM' %}selected{% endif %}>11:30</option>-->
                                                <!--        <option value="12:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '12 PM' %}selected{% endif %}>12:00</option>-->
                                                <!--        <option value="12:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '12:30 PM' %}selected{% endif %}>12:30</option>-->
                                                <!--        <option value="13:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '1 PM' %}selected{% endif %}>13:00</option>-->
                                                <!--        <option value="13:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '1:30 PM' %}selected{% endif %}>13:30</option>-->
                                                <!--        <option value="14:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '2 PM' %}selected{% endif %}>14:00</option>-->
                                                <!--        <option value="14:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '2:30 PM' %}selected{% endif %}>14:30</option>-->
                                                <!--        <option value="15:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '3 PM' %}selected{% endif %}>15:00</option>-->
                                                <!--        <option value="15:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '3:30 PM' %}selected{% endif %}>15:30</option>-->
                                                <!--        <option value="16:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '4 PM' %}selected{% endif %}>16:00</option>-->
                                                <!--        <option value="16:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '4:30 PM' %}selected{% endif %}>16:30</option>-->
                                                <!--        <option value="17:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '5 PM' %}selected{% endif %}>17:00</option>-->
                                                <!--        <option value="17:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '5:30 PM' %}selected{% endif %}>17:30</option>-->
                                                <!--        <option value="18:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '6 PM' %}selected{% endif %}>18:00</option>-->
                                                <!--        <option value="18:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '6:30 PM' %}selected{% endif %}>18:30</option>-->
                                                <!--        <option value="19:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '7 PM' %}selected{% endif %}>19:00</option>-->
                                                <!--        <option value="19:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '7:30 PM' %}selected{% endif %}>19:30</option>-->
                                                <!--        <option value="20:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '8 PM' %}selected{% endif %}>20:00</option>-->
                                                <!--        <option value="20:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '8:30 PM' %}selected{% endif %}>20:30</option>-->
                                                <!--        <option value="21:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '9 PM' %}selected{% endif %}>21:00</option>-->
                                                <!--        <option value="21:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '9:30 PM' %}selected{% endif %}>21:30</option>-->
                                                <!--        <option value="22:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '10 PM' %}selected{% endif %}>22:00</option>-->
                                                <!--        <option value="22:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '10:30 PM' %}selected{% endif %}>22:30</option>-->
                                                <!--        <option value="23:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '11 PM' %}selected{% endif %}>23:00</option>-->
                                                <!--        <option value="23:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_from_time == '11:30 PM' %}selected{% endif %}>23:30</option>-->
                                                <!--    </select>-->
                                                <!--    </div>-->
                                                <!--    <div class="col-md-6">-->
                                                <!--        <select class="form-select" data-placeholder="Select To" name="business_hours_to_time" id="business_hours_to_time" required>-->
                                                <!--        <option disabled selected value="">Select To</option>-->
                                                <!--        <option value="00:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '12 AM' %}selected{% endif %}>00:00</option>-->
                                                <!--        <option value="00:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '12:30 AM' %}selected{% endif %}>00:30</option>-->
                                                <!--        <option value="01:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '1 AM' %}selected{% endif %}>01:00</option>-->
                                                <!--        <option value="01:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '1:30 AM' %}selected{% endif %}>01:30</option>-->
                                                <!--        <option value="02:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '2 AM' %}selected{% endif %}>02:00</option>-->
                                                <!--        <option value="02:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '2:30 AM' %}selected{% endif %}>02:30</option>-->
                                                <!--        <option value="03:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '3 AM' %}selected{% endif %}>03:00</option>-->
                                                <!--        <option value="03:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '3:30 AM' %}selected{% endif %}>03:30</option>-->
                                                <!--        <option value="04:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '4 AM' %}selected{% endif %}>04:00</option>-->
                                                <!--        <option value="04:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '4:30 AM' %}selected{% endif %}>04:30</option>-->
                                                <!--        <option value="05:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '5 AM' %}selected{% endif %}>05:00</option>-->
                                                <!--        <option value="05:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '5:30 AM' %}selected{% endif %}>05:30</option>-->
                                                <!--        <option value="06:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '6 AM' %}selected{% endif %}>06:00</option>-->
                                                <!--        <option value="06:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '6:30 AM' %}selected{% endif %}>06:30</option>-->
                                                <!--        <option value="07:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '7 AM' %}selected{% endif %}>07:00</option>-->
                                                <!--        <option value="07:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '7:30 AM' %}selected{% endif %}>07:30</option>-->
                                                <!--        <option value="08:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '8 AM' %}selected{% endif %}>08:00</option>-->
                                                <!--        <option value="08:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '8:30 AM' %}selected{% endif %}>08:30</option>-->
                                                <!--        <option value="09:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '9 AM' %}selected{% endif %}>09:00</option>-->
                                                <!--        <option value="09:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '9:30 AM' %}selected{% endif %}>09:30</option>-->
                                                <!--        <option value="10:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '10 AM' %}selected{% endif %}>10:00</option>-->
                                                <!--        <option value="10:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '10:30 AM' %}selected{% endif %}>10:30</option>-->
                                                <!--        <option value="11:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '11 AM' %}selected{% endif %}>11:00</option>-->
                                                <!--        <option value="11:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '11:30 AM' %}selected{% endif %}>11:30</option>-->
                                                <!--        <option value="12:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '12 PM' %}selected{% endif %}>12:00</option>-->
                                                <!--        <option value="12:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '12:30 PM' %}selected{% endif %}>12:30</option>-->
                                                <!--        <option value="13:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '1 PM' %}selected{% endif %}>13:00</option>-->
                                                <!--        <option value="13:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '1:30 PM' %}selected{% endif %}>13:30</option>-->
                                                <!--        <option value="14:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '2 PM' %}selected{% endif %}>14:00</option>-->
                                                <!--        <option value="14:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '2:30 PM' %}selected{% endif %}>14:30</option>-->
                                                <!--        <option value="15:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '3 PM' %}selected{% endif %}>15:00</option>-->
                                                <!--        <option value="15:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '3:30 PM' %}selected{% endif %}>15:30</option>-->
                                                <!--        <option value="16:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '4 PM' %}selected{% endif %}>16:00</option>-->
                                                <!--        <option value="16:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '4:30 PM' %}selected{% endif %}>16:30</option>-->
                                                <!--        <option value="17:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '5 PM' %}selected{% endif %}>17:00</option>-->
                                                <!--        <option value="17:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '5:30 PM' %}selected{% endif %}>17:30</option>-->
                                                <!--        <option value="18:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '6 PM' %}selected{% endif %}>18:00</option>-->
                                                <!--        <option value="18:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '6:30 PM' %}selected{% endif %}>18:30</option>-->
                                                <!--        <option value="19:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '7 PM' %}selected{% endif %}>19:00</option>-->
                                                <!--        <option value="19:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '7:30 PM' %}selected{% endif %}>19:30</option>-->
                                                <!--        <option value="20:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '8 PM' %}selected{% endif %}>20:00</option>-->
                                                <!--        <option value="20:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '8:30 PM' %}selected{% endif %}>20:30</option>-->
                                                <!--        <option value="21:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '9 PM' %}selected{% endif %}>21:00</option>-->
                                                <!--        <option value="21:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '9:30 PM' %}selected{% endif %}>21:30</option>-->
                                                <!--        <option value="22:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '10 PM' %}selected{% endif %}>22:00</option>-->
                                                <!--        <option value="22:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '10:30 PM' %}selected{% endif %}>22:30</option>-->
                                                <!--        <option value="23:00" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '11 PM' %}selected{% endif %}>23:00</option>-->
                                                <!--        <option value="23:30" {% if technician_assigned_job_list.service_job_work_order.business_hours_to_time == '11:30 PM' %}selected{% endif %}>23:30</option>-->
                                                <!--    </select>-->
                                                <!--    </div>-->
                                                <!--</div>-->
                                                <!--<div class="row">-->
                                                <!--    <div class="col-md-6">-->
                                                <!--        <label class="required form-label mb-2 mt-3" for="forklift_available"><strong> Forklift Available:</strong></label>-->
                                                <!--        <select class="form-select" data-placeholder="Select Technician" name="forklift_available" id="forklift_available" required>-->
                                                <!--                <option {% if technician_assigned_job_list.service_job_work_order.forklift_available == 0 %} selected {% endif %} value="0" >No</option>-->
                                                <!--                <option {% if technician_assigned_job_list.service_job_work_order.forklift_available == 1 %} selected {% endif %} value="1" >Yes</option>-->
                                                <!--        </select>-->
                                                <!--    </div>-->
                                                <!--    <div class="col-md-6">-->
                                                <!--        <label class="required form-label mb-2 mt-3" for="Size"><strong> Size:</strong></label>-->
                                                <!--        <input type="text" name="Size" class="form-control" value="{{technician_assigned_job_list.service_job_work_order.size}}"  required placeholder="Enter Product Size"> -->
                                                <!--    </div>-->
                                                <!--</div>-->
                                           
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label class="form-label  mb-2 mt-3">Service Issue Description</label>
                                                    <textarea name="note_by_customer" id="description1"  class="editor" hidden placeholder="Enter Note">{{technician_assigned_job_list.service.description}}</textarea>
                                                </div>
                                                <div class="col-md-6">
                                                    <label class="form-label  mb-2 mt-3">Note</label>
                                                    <textarea name="note_by_admin" id="description" class="editor" placeholder="Enter Note">{{technician_assigned_job_list.service_job_work_order.note_by_admin}}</textarea>
                                                </div>
                                                
                                            </div>
                                            <div class="row mt-3">
                                                        <label class="form-label"><strong>Installation Address:</strong></label>
                                                        <div class="col-md-12">
                                                            <div class="form-check">
                                                                <input class="form-check-input address-radio" data-id="{{technician_assigned_job_list.id}}" id="same_address_type{{technician_assigned_job_list.id}}" type="radio" name="address_type" value="same" checked >
                                                                <label class="form-check-label" for="same_address_type{{technician_assigned_job_list.id}}">Select Billing Address</label>
                                                                ({% if technician_assigned_job_list.order_item.order.invoice.customer.street %} {{technician_assigned_job_list.order_item.order.invoice.customer.street}}{% endif%}
                                                                    {% if technician_assigned_job_list.order_item.order.invoice.customer.city %}, {{technician_assigned_job_list.order_item.order.invoice.customer.city}}{% endif%}
                                                                    {% if technician_assigned_job_list.order_item.order.invoice.customer.state %}, {{technician_assigned_job_list.order_item.order.invoice.customer.state}}{% endif%}
                                                                    {% if technician_assigned_job_list.order_item.order.invoice.customer.country %}, {{technician_assigned_job_list.order_item.order.invoice.customer.country}}{% endif%}
                                                                    {% if technician_assigned_job_list.order_item.order.invoice.customer.post_code %}, {{technician_assigned_job_list.order_item.order.invoice.customer.post_code}} {% endif%})
                                                            </div>
                                                            <div class="form-check">
                                                                <input class="form-check-input address-radio" data-id="{{technician_assigned_job_list.id}}"  type="radio" id="diff_address_type{{technician_assigned_job_list.id}}" name="address_type" value="different" >
                                                                <label class="form-check-label" for="diff_address_type{{technician_assigned_job_list.id}}">Add New Address</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- Hidden until "Different Address" selected -->
                                                    <div id="different_address_fields{{technician_assigned_job_list.id}}" style="display:none; margin-top:10px;" >
                                                        <div class="row mt-2">
                                                            <div class="col-md-6">
                                                                <label class="form-label">Street</label>
                                                                <input type="text" name="street" value="" class="form-control">
                                                            </div>
                                                            <div class="col-md-6">
                                                                <label class="form-label">Suburb</label>
                                                                <input type="text" name="suburb" value="" class="form-control">
                                                            </div>
                                                        </div>
                                                        <div class="row mt-2">
                                                            <div class="col-md-4">
                                                                <label class="form-label">State</label>
                                                                 <select  class="form-select "  data-control="select2" data-placeholder="Select State"  tabindex="0"  name="state" id="state" >
                                                                    <option></option>
                                                                    <option value="ACT"  >Australian Capital Territory</option>
                                                                    <option value="NSW" >New South Wales </option>
                                                                    <option value="NT" >Northern Territory</option>
                                                                    <option value="QLD" >Queensland </option>
                                                                    <option value="SA" >South Australia</option>
                                                                    <option value="TAS" >Tasmania </option>
                                                                    <option value="VIC" >Victoria </option>
                                                                    <option value="WA" >Western Australia </option>
                                                                  </select>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <label class="form-label">Postcode</label>
                                                                <input type="text" name="postcode" value="" class="form-control">
                                                            </div>
                                                            <div class="col-md-4">
                                                                <label class="form-label">Country</label>
                                                                 <select  class="form-select "  data-control="select2" data-placeholder="Select Country"   tabindex="0" name="country" id="country"  >
                                                                    <option value="Australia"  selected >Australia</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                            <div class="modal-footer">
                                                <!--<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>-->
                                                <button type="submit" class="btn btn-primary">Add Workorder</button>
                                            </div>
                                        </div>
                                    </div>
                                    <input type="hidden" name="order_item_id"  value="{{technician_assigned_job_list.order_item.id}}">
                                    <input type="hidden" name="tech_assign_order_item_id"  value="{{technician_assigned_job_list.id}}">
                                    <input type="hidden" name="order_identifier" value="">
                                </div>
                                </div>
                                </form>
                                    {% endif %}      
                                         {% endif %}
          {% endif %}
    {% 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-s mb-0"> {% if technician_assigned_job_list.job_type == 1 %} Installation {% else %} Service {% endif %} Job Id-{{technician_assigned_job_list.id}}</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">
                         {% if technician_assigned_job_list.service %}
                             {% if technician_assigned_job_list.service.description != ""  and technician_assigned_job_list.service.description != "None" %}
                              <div class="row">
                                                   
                                                    <div class="col-md-6">
                                                    <h5>Machine: {{ technician_assigned_job_list.order_item.product.product_name }}({{ technician_assigned_job_list.order_item.product.sku }})</h5>
                            <h5>Sr. No.: {{ technician_assigned_job_list.order_item.serial_number.serial_number }}</h5>
                                                    <label class="form-label  mt-3"><b>Service Issue Description: </b></label>
                                                    <p>{% if technician_assigned_job_list.service.description != ""  and technician_assigned_job_list.service.description != "None" %}{{technician_assigned_job_list.service.description|safe}}{% endif %}</p>
                                                     </div>
                                                    
                                                </div>
                            {% endif %}
                             {% with service_request_images=technician_assigned_job_list.related_service_request_images %}
                                    {% if service_request_images %}
                            <div class="imageblock bg-light-warning rounded p-5">
                               
                                        <!--<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>
                                    
                            </div>
                            {% endif %}
                                {% endwith %}
                             {% with service_request_videos=technician_assigned_job_list.related_service_request_videos %}
                                    {% if service_request_videos %}
                            <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">
                               
                                        <!--<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>
                                  
                            </div>
                            {% endif %}
                                {% endwith %}
                                     <hr>
                                  {% if technician_assigned_job_list.get_service_signatures %}
                <br>
               
                 <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 %}
                            {% endif %}
                            
                         {% for sig in technician_assigned_job_list.get_service_signatures %}
                         <hr>
                 <h4>Signature</h4>
                         <table  class="table table-bordered table-striped job-listc">
                            <thead>
                                 <tr>
                                     <th>Technician Sign</th>
                                     <th>Customer Sign</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 <tr>
                                     <td>
                                   {% if sig.signature %}<img src="/media/{{sig.signature }}" alt="Signature" height="50px" width="70px">{% endif %}
                                    
                                    
                                    
                                    
                                     <td> {% if sig.signature_technician %}<img src="/media/{{sig.signature_technician }}" alt="Signature_Technician" height="50px" width="70px">{% endif %}<br><b>Accepted By</b>&nbsp;{{sig.accepted_by}}</td>
                                 </tr>
                             </tbody>
                         </table>
                      
                        {% endfor %}
                    </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>
function closeModal(id, typeoforder) {

    var modalId = "myModal_" + typeoforder + "_" + id;
    var modalEl = document.getElementById(modalId);

    if (modalEl) {
        var modalInstance = bootstrap.Modal.getInstance(modalEl);
        if (modalInstance) {
            modalInstance.hide();
        }
    }
}
</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 %}