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

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

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

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

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

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


.videowrapper video{
    width:150px !important;
    border-radius: 0.475rem;
    margin:0 10px 0 0;
}

/*====== 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  %}
    {% 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>
        <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">
                        <!-- Comments Section -->
                        
                    <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>
    {% endfor %}
    

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

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

{% endif %}






         {% if technician_assigned_job_lists  %}
	    	<div class="table-responsive cust-table mt-2 prod-table">
	    	     
            			    <table class="table table-row-dashed align-middle gs-0 gy-3 my-0">
                                <thead>
                                    <tr class="fs-7 fw-bold text-gray-400 border-bottom-0">
                                       <!--<th class="pb-3 min-w-100px fw-bold text-start">Sr.No</th> -->
                                      <th class="pb-3 min-w-100px fw-bold text-start">Job ID</th>
                                      <th class="pb-3 min-w-100px fw-bold text-start">Order ID</th>
                                      <th class="pb-3 min-w-100px fw-bold text-start">Customer </th>
                                      <th class="pb-3 min-w-100px fw-bold text-start">Technician</th>
                                      <th class="pb-3 min-w-100px fw-bold text-start">Product</th>
                                      
                                      <!--<th class="pb-3 min-w-100px fw-bold text-start">Assigned Date</th>-->
                                      <th class="pb-3 min-w-100px fw-bold text-start">Installation DateTime</th>
                                      <!--<th class="pb-3 min-w-100px fw-bold text-start">Warranty Date</th>-->
                                      <th class="pb-3 min-w-100px fw-bold text-start">Job Details</th>
                                      <th class="pb-3 min-w-100px fw-bold text-start">Job Status</th>
                                      <th class="pb-3 w-50px fw-bold text-start">Actions</th>
                                    </tr>
                                  </thead>
            			    	    <tbody>
            			    	       
            			    	         {% for technician_assigned_job_list in technician_assigned_job_lists %}
            			    	             
                    			    		     <tr>
                                                    <!--<td class="text-start pe-0">-->
                                                    <!--    <span class="text-black-600 fw-bold fs-6">{{forloop.counter}}</span>-->
                                                    <!--  </td>-->
                    
                                                    <td class="text-start pe-0">
                                                      <span class="text-black-600 fw-bold fs-6">#{{technician_assigned_job_list.id}}</span>
                                                    </td>
                                                    
                                                    <td class="text-start pe-0">
                                                      <span class="text-black-600 fw-bold fs-6">#{{technician_assigned_job_list.order_item.order.id}}</span>
                                                    </td>
                                                    <td class="text-start pe-0">
                                                      <span class="text-black-600 fw-bold fs-6"> {{technician_assigned_job_list.order_item.order.invoice.customer }} </span>
                                                    </td>
                                                      <td class="text-start pe-0">
                                                        <span class="text-black-600 fw-bold fs-6">{% if technician_assigned_job_list.technician.userinfo %}
                                                          {{ technician_assigned_job_list.technician.userinfo.get_full_name }} {% endif %}
                                                          </span>
                                                     </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  status  {%if technician_assigned_job_list.status == 'Warranty'%}accepted {% elif  technician_assigned_job_list.status == 'Service' %}  created {% endif %}   ">{% if not technician_assigned_job_list.order_item.is_trade %}{%if technician_assigned_job_list.status == 'Warranty'%}{{technician_assigned_job_list.status}} till {{technician_assigned_job_list.order_item.warranty_end_date|date:"d-m-Y"}}{% elif  technician_assigned_job_list.status == 'Service' %}{{technician_assigned_job_list.status}}{% endif %}{% endif %}</span>
                                                   </span>
                                                    </td>
                                                    
                                                      <!--<td class="text-start pe-0">-->
                                                      <!--  <span class="text-black-600 fw-bold fs-6">{{technician_assigned_job_list.booking_date|date:"d-m-Y"}}</span>-->
                                                      <!--</td>-->
                                                      <td class="text-start pe-0">
                                                        <span class="text-black-600 fw-bold fs-6">{%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>
                                                    
                                                     </td>  
                                                            
                                                       <!--  <td class="text-start pe-0">-->
                                                       <!--   <span class="text-black-600 fw-bold fs-6">{%if technician_assigned_job_list.order_item.warranty_end_date %}{{technician_assigned_job_list.order_item.warranty_end_date|date:"d-m-Y"}}{%else%}-{%endif%}</span>-->
                                                       <!--</td>  -->
                                                          
                                                    <td class="text-start pe-0">
                                                      <span class="text-black-600 fw-bold fs-6">{% if technician_assigned_job_list.order_item.is_trade %} Trade {% else %}{{technician_assigned_job_list.get_job_type_display}}{% endif %} <br> {{technician_assigned_job_list.total_job_time}}</span>
                                                    </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>
                                                   </td>  
                                                   
                                                   <td class="text-end">
                                                        <a href="#" class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">Select<i class="ki-duotone ki-down fs-5 ms-1"></i></a>
                                                        <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true" >
                                                            
                                                           {% if technician_assigned_job_list.service %}
                                                            
                                                             <div class="menu-item px-3">
                                                                 <a href="#" data-bs-toggle="modal" data-bs-target="#kt_modal_stackedd_{{technician_assigned_job_list.id}}" data-kt-menu-placement="bottom-end" class="menu-link px-3">View Details</a>
                                                            </div>

                                                            {% endif %}
                                                        
                                                            <div class="menu-item px-3">
                                                              <a href="#" data-bs-toggle="modal" data-bs-target="#kt_modal_stacked_{{technician_assigned_job_list.id}}" data-kt-menu-placement="bottom-end" class="menu-link px-3">Activity</a>
                                                            </div> 
                                                            <!--{% if technician_assigned_job_list.order_item.is_trade == 0 %}-->
                                                            <!--<div class="menu-item px-3">-->
                                                            <!--  <a href="#" data-bs-toggle="modal" data-bs-target="#Time_intervals_{{technician_assigned_job_list.id}}" data-kt-menu-placement="bottom-end" class="menu-link px-3">Time Log</a>-->
                                                            <!--</div> -->
                                                            <!--{% endif %}-->
                                                            {% if technician_assigned_job_list.pdf_file  %}
                                                             <div class="menu-item px-3">
                                                                 <a href="{% url 'pdf-api' technician_assigned_job_list.id %}" target="_blank" class="menu-link px-3">Checklist</a>
                                                            </div>
                                                            {% endif %}
                                                        </div>
                                                    </td>
                                                </tr>
                                        {% endfor %}
            
                                  
            			    	    </tbody>
            	    		</table>
            	  
            	    		          
            	    		          
            	    		                    
            	    	<nav aria-label="Page navigation">
							<ul class="pagination justify-content-end">
								{% if technician_assigned_job_lists.has_previous %}
								<li class="page-item">
									<a class="page-link" href="?page=1" aria-label="First">
										<span aria-hidden="true">&laquo;&laquo;</span>
									</a>
								</li>
								<li class="page-item">
									<a class="page-link" href="?page={{ technician_assigned_job_lists.previous_page_number }}" aria-label="Previous">
										<span aria-hidden="true">&laquo;</span>
									</a>
								</li>
								{% endif %}
				
								{% for i in technician_assigned_job_lists.paginator.page_range %}
								<li class="page-item {% if technician_assigned_job_lists.number == i %}active{% endif %}">
									<a class="page-link" href="?page={{ i }}">{{ i }}</a>
								</li>
								{% endfor %}
				
								{% if technician_assigned_job_lists.has_next %}
								<li class="page-item">
									<a class="page-link" href="?page={{ technician_assigned_job_lists.next_page_number }}" aria-label="Next">
										<span aria-hidden="true">&raquo;</span>
									</a>
								</li>
								<li class="page-item">
									<a class="page-link" href="?page={{ technician_assigned_job_lists.paginator.num_pages }}" aria-label="Last">
										<span aria-hidden="true">&raquo;&raquo;</span>
									</a>
								</li>
								{% endif %}
							</ul>
						</nav> 
            	    		          
            	    		          
            	    		          
            	    		          
    		        {% else %}
    		        
    		          No Record Found.
    		          
    		        
    		        {% endif %}
	    	      
	            
              </div>
           </div>
        </div>
      </div>
    </div>
</div>



<script>
  function updateModalContent(link) {
      const jobId = link.getAttribute("data-job-id");
      const jobIdIdPlaceholder = document.getElementById("jobIdPlaceholder");
      
      const productName = link.getAttribute('data-product-name');
     
      $('#product_name_placeholder').text(productName);
    

      if (orderItemIdPlaceholder) {
          orderItemIdPlaceholder.textContent = jobId;

          const updateOrderForm = document.getElementById("updateOrderForm");
          if (updateOrderForm) {
              
              
              updateOrderForm.action = `/technician/job/activity/${orderItemId}/`;
            //   updateOrderForm.action = `/customer/invoice/update/order/status/${orderItemId}/`;
          }
      }
  }

  document.getElementById("kt_modal_stacked_1").addEventListener("shown.bs.modal", function(event) {
      const link = event.relatedTarget;
      updateModalContent(link);
  });
  
  
  
  
   document.getElementById("kt_modal_stackedd_1").addEventListener("shown.bs.modal", function(event) {
      const link = event.relatedTarget;
      updateModalContent(link);
  });

</script>







  
                 

 

<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 %}
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></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 %}