{% for row in order_items %}
					<div class="modal_{{row.id}} modal">
				    <div class="modalflex">
				        <div class="modalcontent">
				            <h1>Modal modal_{{row.id}}</h1>
				            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				        </div>
				    </div>
				</div>
				{% endfor %}
{% for order_item in technician_assigned_job_lists %}
{% if order_item.get_job_type != 'Service' %}
    <div id="myModalj{{order_item.id}}" class="modal fade myModal">
                           <div class="modal-content">
                                    <div class="modal-header">
                                        <h2> &nbsp;
                                            <span class=" fw-bold badge py-3 px-4 fs-7  {% if order_item.get_job_status_display == 'Completed' %} j-status-completed {% elif order_item.get_job_status_display == 'Not Started' %} j-status-notStarted {% elif order_item.get_job_status_display == 'In Progress' %} j-status-inProgress {% elif order_item.get_job_status_display == 'Parts Needed' %} j-status-partsNeeded  {% elif order_item.get_job_status_display == 'Parts Arrived' %} j-status-partsReceived {% endif %}">
                                             {{order_item.get_job_status_display}}
                                            </span> 
                                            <span class=" fw-bold badge py-3 px-4 fs-7  arrived">
                                            {{order_item.get_job_type}} Job
                                            </span>
                                        </h2>
                                        <button id="closeModalBtn" class="close" data-id="j{{order_item.id}}">X</button>
                                       
                                    </div>
                                    <div class="modal-body">
                                        <div class="orders-details mt-5">
                                            <div class="row g-5">
                                                <div class="col-md-4">
                                                    <div class="card track-card cus-card card-flush flex-row-fluid position-relative"> 
                                                        <div class="card-header track-head">
                                                            <div class="card-title">
                                                                <div class="d-flex align-items-center">
                                                                    <i  class="ki-outline ki-profile-circle fs-1 me-2 text-b"></i> 
                                                                     <a href="#"  class="text-gray-800 text-hover-primary text-b">
                                                                        {% if order_item.technician %}
                                                                            {{order_item.technician.userinfo.first_name }} {{ order_item.technician.userinfo.last_name }}(Technician)
                                                                        {% else %}
                                                                           -
                                                                        {% endif %}
                                                                        </a> 
                                                                </div>
                                                            </div>
                                                        </div> 
                                                        <div class="pt-0 cus-body">
                                                            <div class="table-responsive"> 
                                                                <table  class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                        <tr>
                                                                            <td class="text-gray-800">
                                                                                <div class="d-flex align-items-center">
                                                                                    <i class="ki-outline ki-sms fs-2 me-2 text-b"></i>
                                                                                    <a href="#" class="text-gray-600 text-hover-primary text-b"> {{ order_item.technician.userinfo.email }} </a>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="text-gray-800">
                                                                                <div class="d-flex align-items-center text-b">
                                                                                    <i  class="ki-outline ki-phone fs-2 me-2 text-b"></i>{{ order_item.technician.userinfo.phone1}}
                                                                                </div>
                                                                            </td>
                                                                        </tr> 
                                                                </table> 
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                {% if order_item.secondary_technician %}
                                                 <div class="col-md-4">
                                                    <div class="card track-card cus-card card-flush flex-row-fluid position-relative"> 
                                                        <div class="card-header track-head">
                                                            <div class="card-title">
                                                                <div class="d-flex align-items-center">
                                                                    <i  class="ki-outline ki-profile-circle fs-1 me-2 text-b"></i> 
                                                                     <a href="#"  class="text-gray-800 text-hover-primary text-b">
                                                                        {% if order_item.secondary_technician %}
                                                                            {{order_item.secondary_technician.userinfo.first_name }} {{ order_item.secondary_technician.userinfo.last_name }}(Secondary Technician)
                                                                        {% else %}
                                                                           -
                                                                        {% endif %}
                                                                        </a> 
                                                                </div>
                                                            </div>
                                                        </div> 
                                                        <div class="pt-0 cus-body">
                                                            <div class="table-responsive"> 
                                                                <table  class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                        <tr>
                                                                            <td class="text-gray-800">
                                                                                <div class="d-flex align-items-center">
                                                                                    <i class="ki-outline ki-sms fs-2 me-2 text-b"></i>
                                                                                    <a href="#" class="text-gray-600 text-hover-primary text-b"> {{ order_item.technician.userinfo.email }} </a>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="text-gray-800">
                                                                                <div class="d-flex align-items-center text-b">
                                                                                    <i  class="ki-outline ki-phone fs-2 me-2 text-b"></i>{{ order_item.technician.userinfo.phone1}}
                                                                                </div>
                                                                            </td>
                                                                        </tr> 
                                                                </table> 
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                {% endif %}
                                                <div class="col-md-4">
                                                    <div class="card track-card bill-card card-flush mb-5 order-card position-relative">
                                                        <div class="card-header track-head">
                                                            <div class="card-title">
                                                                <div class="d-flex align-items-center">
                                                                    <i  class="ki-outline ki-notepad-bookmark fs-1 me-2 text-b"></i> 
                                                                     <a href="#"  class="text-gray-800 text-hover-primary text-b">Order ID: #{{ order_item.order_item.order.id }}</a> 
                                                                </div>
                                                            </div>
                                                        </div> 
                                                        <div class="pt-0 cus-body">
                                                            <div class="table-responsive"> 
                                                                <table  class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                    <tr>
                                                                        <td class="text-gray-800">
                                                                            <div class="d-flex align-items-center">
                                                                                <i class="ki-outline ki-calendar fs-2 me-2 text-b"></i>
                                                                                <a href="#" class="text-gray-600 text-hover-primary text-b"> {{ order_item.order_item.order.created_at }} </a>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                </table> 
                                                            </div>
                                                        </div>                                
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="card track-card card-flush invoice-card track-card flex-row-fluid position-relative"> 
                                                        <div class="card-header track-head">
                                                            <div class="card-title">
                                                                <div class="d-flex align-items-center">
                                                                    <i  class="ki-outline ki-document fs-1 me-2 text-b"></i> 
                                                                     <a href="#"  class="text-gray-800 text-hover-primary text-b">Inv ID: #{{ order_item.order_item.order.invoice.id }}</a> 
                                                                </div>
                                                            </div>
                                                        </div> 
                                                        <div class="pt-0 cus-body">
                                                            <div class="table-responsive"> 
                                                                <table  class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                    <tr>
                                                                        <td class="text-gray-800">
                                                                            <div class="d-flex align-items-center">
                                                                                <i class="ki-outline ki-calendar fs-2 me-2 text-b"></i>
                                                                                <a href="#" class="text-gray-600 text-hover-primary text-b"> {{ order_item.order_item.order.invoice.created_at }} </a>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="text-gray-800">
                                                                            <div class="d-flex align-items-center">
                                                                                <i class="ki-outline ki-save-deposit fs-2 me-2 text-b"></i>
                                                                                <a href="#" class="text-gray-600 text-hover-primary text-b">Balance  ${{order_item.order_item.order.invoice.payable_amount }}  </a>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                 </table> 
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="cards p-0">
                                                        <div class="card-body ex-b">
                                                            <div id="kt_activity_today_serial{{order_item.id}}" class="card-body p-0 tab-pane fade show active" role="tabpanel"  aria-labelledby="kt_activity_today_tab">
                                                                <div class="cards card-flush h-xl-100" data-select2-id="select2-data-124-p5cu">
                                                                    <div class="card-header p-0" data-select2-id="select2-data-123-flzv">
                                                                        <!--begin::Title-->
                                                                        <h3 class="card-title align-items-start flex-column">
                                                                            <span  class="card-label fw-bold text-gray-800 text-b">Job Product</span>
                                                                            <span class="text-gray-500 mt-1 fw-semibold fs-6 text-b"></span>
                                                                        </h3>
                                                                        <div class="card-toolbar">
                                                                            <div class="d-flex flex-stack flex-wrap gap-4">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="card-body pt-2">
                                                                        <div>
                                                                            <div class="table-responsive">
                                                                                <table class="table align-middle table-row-dashed fs-6 gy-3  no-footer tracking-table"  >
                                                                                    <thead>
                                                                                        <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                                                                            <th colspan="2" class="min-w-100px sorting_disabled"  rowspan="1" style="">Product </th>
                                                                                            <th class="min-w-100px sorting_disabled"  rowspan="1"  style="">Job Type</th>
                                                                                            <th class="min-w-100px sorting_disabled" rowspan="1" style="">Serial Number </th>
                                                                                            <th class="min-w-100px sorting_disabled" rowspan="1"  style="">Customer</th>
                                                                                            <th class="min-w-100px sorting_disabled" rowspan="1"  style="">Supplier</th>
                                                                                            <th class="min-w-100px sorting_disabled" rowspan="1"  style="">Quantity</th>
                                                                                            <th class="min-w-100px sorting_disabled"  rowspan="1"  style="">Job Status</th>
                                                                                        </tr>
                                                                                    </thead>
                                                                                    <tbody class="fw-bold text-gray-600">
                                                                                        <tr data-kt-table-widget-4="subtable_template" class="">
                                                                                            <td colspan="2">
                                                                                                <div  class="d-flex align-items-center gap-3">
                                                                                                    <a href="#" class="symbol symbol-50px bg-secondary bg-opacity-25 rounded ">
                                                                                                        <img src="https://ea.stagingstorm.com/media/product_images/main_images/4.jpg" data-kt-src-path="https://ea.stagingstorm.com/media/product_images/main_images/4.jpg" alt=""  data-kt-table-widget-4="template_image">
                                                                                                    </a>
                                                                                                    <div class="d-flex flex-column">
                                                                                                        <a href="#" class="text-gray-800 text-hover-primary fw-bold"   data-kt-table-widget-4="template_name">{{order_item.order_item.product.product_name}}-({{order_item.order_item.product.sku}})
                                                                                                          </a>                                                                                           
                                                                                                    </div>
                                                                                                </div>
                                                                                            </td>
                                                                                            <td class="text-start">
                                                                                                <div class=" fs-7 fw-bold"  data-kt-table-widget-4="template_cost"> {{order_item.get_job_type}}</div>
                                                                                            </td>
                                                                                            <td class="text-start">
                                                                                                <div class=" fs-7 fw-bold"  data-kt-table-widget-4="template_cost"> {{order_item.order_item.serial_number}}</div>
                                                                                            </td>
                                                                                             <td class="text-start">
                                                                                                <div class="fs-7 fw-bold"  data-kt-table-widget-4="template_cost">{% if order_item.order_item.order.invoice.customer != None %}{{order_item.order_item.order.invoice.customer}}{% else %} - {% endif %}</div>
                                                                                            </td>
                                                                                            <td class="text-start">
                                                                                                <div class="fs-7 fw-bold"  data-kt-table-widget-4="template_cost">{% if order_item.order_item.serial_number.bill.supplier != None %}{{order_item.order_item.serial_number.bill.supplier}}{% else %} - {% endif %}</div>
                                                                                            </td>
                                                                                            
                                                                                            <td class="text-start">
                                                                                                <div class="fs-7 fw-bold"
                                                                                                    data-kt-table-widget-4="template_qty">
                                                                                                   1</div>
                                                                                            </td>
                                                                                            <td class="text-start">
                                                                                                <div class="fs-7 fw-bold"  data-kt-table-widget-4="template_stock">
                                                                                                    <div class="badge  {% if order_item.get_job_status_display == 'Completed' %} j-status-completed {% elif order_item.get_job_status_display == 'Not Started' %} j-status-notStarted {% elif order_item.get_job_status_display == 'In Progress' %} j-status-inProgress {% elif order_item.get_job_status_display == 'Parts Needed' %} j-status-partsNeeded  {% elif order_item.get_job_status_display == 'Parts Arrived' %} j-status-partsReceived {% endif %}">
                                                                                                        {{order_item.get_job_status_display}}
                                                                                                    </div>
                                                                                                    </div>
                                                                                                </td>
                                                                                             
                                                                                            </tr>
                                                                                    </tbody>
                                                                                </table>
                                                                            </div>
                                                                            <div class="row">
                                                                                <div
                                                                                    class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start">
                                                                                </div>
                                                                                <div
                                                                                    class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                           
                                                            {% if order_item.order_item.order.invoice != None %}
                                                            <div class="card-header p-0">
                                                                <h3 class="card-title align-items-start flex-column">
                                                                    <span  class="card-label fw-bold text-gray-800">Payment Details </span>
                                                                    <span class="text-gray-500 mt-1 fw-semibold fs-6"></span>
                                                                </h3>
                                                            </div>
                                                            <div id="kt_activity_month_serial{{order_item.id}}" class="card-body p-0 tab-pane fade show active ex-b" role="tabpanel" aria-labelledby="kt_activity_month_tab">
                                                                <div class="cards p-0">
                                                                    <div class="card-body">
                                                                        <div class="d-flex flex-column flex-xl-row">
                                                                            <div class="flex-grow-1">
                                                                                <div class="table-responsive border-bottom mb-9">
                                                                                    <table class="table mb-3 tracking-table">
                                                                                        <thead>
                                                                                            <tr class="border-bottom fs-6 fw-bold text-muted">
                                                                                                <th class="min-w-50px sorting_disabled"> Invoice ID</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Total Amount</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Paid</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Balance</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Due Date</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Last Payment Date</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Invoice</th>
                                                                                            </tr>
                                                                                        </thead>
                                                                                        <tbody>
                                                                                            <tr class="fw-bold text-gray-700 fs-5">
                                                                                                <td class="d-flex align-items-center pt-6"> <i class="fa fa-genderless text-danger fs-2 me-2"></i>{{ order_item.order_item.order.invoice.id }} </td>
                                                                                                    <td class="pt-6 fw-bolder"> ${{ order_item.order_item.order.invoice.total }}</td>
                                                                                                    <td class="pt-6 fw-bolder"> ${{ order_item.order_item.order.invoice.total_paid_amount }}</td>
                                                                                                    <td class="pt-6 fw-bolder"> ${{order_item.order_item.order.invoice.payable_amount }}</td>
                                                                                                    <td class="pt-6 fw-bolder">{{order_item.order_item.order.invoice.due_date }}</td>
                                                                                                    
                                                                                                     <td class="pt-6 fw-bolder"> 
                                                                                                    {% if order_item.order_item.order.invoice.total !=  order_item.order_item.order.invoice.payable_amount %}
                                                                                                             {{order_item.order_item.order.invoice.get_invoice_last_payment_record.created_at}}
                                                                                                    {% else %}
                                                                                                            -
                                                                                                    {% endif %}</td>
                                                                                                    {% if order_item.order_item.order.invoice.myob_invoice_pdf %}
                                                                                                    <td class="pt-6 fw-bolder"> <a href="/media/{{order_item.order_item.order.invoice.myob_invoice_pdf}}" target="_blank" title="Myob Invoice PDF" class="pdf-icon"> <i class="fa-solid fa-file-pdf"></i></a></td>
                                                                                                    {% endif %}
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                </div>
                                                                                <div class="d-flex justify-content-end"> </div>
                                                                                <div class="flex-lg-row-fluid me-xl-10 mb-10 mb-xl-0"> </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            {% endif %}
                                                            
                                                          
                                                            <!--<div class="card-header p-0">-->
                                                            <!--    <h3 class="card-title align-items-start flex-column">-->
                                                            <!--        <span  class="card-label fw-bold text-gray-800">Technician Details </span>-->
                                                            <!--        <span class="text-gray-500 mt-1 fw-semibold fs-6"></span>-->
                                                            <!--    </h3>-->
                                                            <!--</div>-->
                                                            <!--<div id="kt_activity_month_serial{{order_item.order_item.id}}" class="card-body p-0 tab-pane fade show active ex-b" role="tabpanel" aria-labelledby="kt_activity_month_tab">-->
                                                            <!--    <div class="cards p-0">-->
                                                            <!--        <div class="card-body">-->
                                                            <!--            <div class="d-flex flex-column flex-xl-row">-->
                                                            <!--                <div class="flex-grow-1">-->
                                                            <!--                    <div class="table-responsive border-bottom mb-9">-->
                                                            <!--                        <form action="/update/technician_order/" method="post">-->
                                                            <!--                        {% csrf_token %}-->
                                                            <!--                        <table class="table mb-3 tracking-table">-->
                                                            <!--                            <thead>-->
                                                            <!--                                <tr class="border-bottom fs-6 fw-bold text-muted">-->
                                                            <!--                                    <th class="min-w-50px sorting_disabled"> Technician</th>-->
                                                            <!--                                    <th class="min-w-50px sorting_disabled"> {% if order_item.order_item.product.is_product != 1 %}Installation Date{% else %}Pickup Date{% endif %}</th>-->
                                                            <!--                                    <th class="min-w-50px sorting_disabled"> {% if order_item.order_item.product.is_product != 1 %}Installation Time{% else %}Pickup Time{% endif %}</th>-->
                                                                                                <!--<th class="min-w-50px sorting_disabled"> Action</th>-->
                                                            <!--                                </tr>-->
                                                            <!--                            </thead>-->
                                                            <!--                            <tbody>-->
                                                            <!--                                <tr class="fw-bold text-gray-700 fs-5">-->
                                                            <!--                                    <td class="d-flex align-items-center pt-6"> <i class="fa fa-genderless text-danger fs-2 me-2"></i>-->
                                                            <!--                                        <select class="form-select" data-placeholder="Select Technician" name="technician" id="technician" required>-->
                                                            <!--                                            <option disabled selected value="">Select Technician</option>-->
                                                            <!--                                            {% for technician in technicians %}-->
                                                            <!--                                                <option value="{{ technician.id }}" {% if order_item.order_item.ordered_technician.technician == technician %} selected {% endif %}>{{ technician.userinfo.first_name }} {{ technician.userinfo.last_name }}</option>-->
                                                            <!--                                            {% endfor %}-->
                                                            <!--                                        </select>-->
                                                            <!--                                        <input type="hidden" name="order_item_id" class="orderItemIdInput" value="{{order_item.id}}">-->
                                                            <!--                                        <input type="hidden" name="order_identifier" class="orderItemIdentifierInput" value="{{order_item.order_item.order_identifier}}">-->
                                                            <!--                                    </td>-->
                                                            <!--                                    <td class="pt-6 fw-bolder">-->
                                                            <!--                                        <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_cost">-->
                                                            <!--                                            <div class="input-group" id="kt_td_picker_localization{{order_item.id}}" data-td-target-input="nearest" data-td-target="#kt_td_picker_localization{{order_item.id}}" data-td-toggle="datetimepicker">-->
                                                            <!--                                                <input type="text" class="form-control start_date{{order_item.id}}" data-td-target="#kt_td_picker_localization{{order_item.id}}" readonly name="installation_date"  value="{% if order_item.order_item.installation_date %}{{order_item.order_item.installation_date|date:"d-m-Y"}}{% else %}{% now 'd-m-Y' %}{% endif %}" required />-->
                                                                                        
                                                            <!--                                                <span class="input-group-text" data-td-target="#kt_td_picker_localization{{order_item.id}}" data-td-toggle="datetimepicker">-->
                                                            <!--                                                    <i class="ki-duotone ki-calendar fs-2"><span class="path1"></span><span class="path2"></span></i>-->
                                                            <!--                                                </span>-->
                                                            <!--                                            </div>-->
                                                            <!--                                        </div>-->
                                                            <!--                                    </td>-->
                                                            <!--                                    <td class="pt-6 fw-bolder"> -->
                                                            <!--                                        <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_cost">-->
                                                            <!--                                         <select class="form-select" data-placeholder="Select Installation Time" name="installation_time" id="installation_time" required>-->
                                                            <!--                                            <option disabled selected value="">Select {% if order_item.order_item.product.is_product != 1 %}Installation{% else %}Pickup{% endif %} Time</option>-->

                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:'h:i' == '00:00' %} selected {% endif %} value="00:00">00:00</option>-->
                                                            <!--                                            <option  {% if order_item.order_item.installation_time|time:'h:i' == '00:30' %} selected {% endif %} value="00:30">00:30</option>-->

                                                            <!--                                            <option  {% if order_item.order_item.installation_time|time:"h:i" == '01:00' %} selected {% endif %} value="01:00">01:00</option>-->
                                                            <!--                                            <option  {% if order_item.order_item.installation_time|time:"h:i" == '01:30' %} selected {% endif %} value="01:30">01:30</option>-->
                                                            <!--                                            <option  {% if order_item.order_item.installation_time|time:"h:i" == '02:00' %} selected {% endif %} value="02:00">02:00</option>-->
                                                            <!--                                            <option  {% if order_item.order_item.installation_time|time:"h:i" == '02:30' %} selected {% endif %} value="02:30">02:30</option>-->
                                                            <!--                                            <option  {% if order_item.order_item.installation_time|time:"h:i" == '03:00' %} selected {% endif %} value="03:00">03:00</option>-->
                                                            <!--                                            <option  {% if order_item.order_item.installation_time|time:"h:i" == '03:30' %} selected {% endif %} value="03:30">03:30</option>-->
                                                            <!--                                            <option  {% if order_item.order_item.installation_time|time:"h:i" == '04:00' %} selected {% endif %} value="04:00">04:00</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '04:30' %} selected {% endif %}  value="04:30">04:30</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '05:00' %} selected {% endif %} value="05:00">05:00</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '05:30' %} selected {% endif %} value="05:30">05:30</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '06:00' %} selected {% endif %} value="06:00">06:00</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '06:30' %} selected {% endif %} value="06:30">06:30</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '07:00' %} selected {% endif %} value="07:00">07:00</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '07:30' %} selected {% endif %} value="07:30">07:30</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '08:00' %} selected {% endif %} value="08:00">08:00</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '08:30' %} selected {% endif %} value="08:30">08:30</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '09:00' %} selected {% endif %} value="09:00">09:00</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '09:30' %} selected {% endif %} value="09:30">09:30</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '10:00' %} selected {% endif %} value="10:00">10:00</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '10:30' %} selected {% endif %} value="10:30">10:30</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '11:00' %} selected {% endif %} value="11:00">11:00</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '11:30' %} selected {% endif %} value="11:30">11:30</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '12:00' %} selected {% endif %} value="12:00">12:00</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '12:30' %} selected {% endif %} value="12:30">12:30</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '13:00' %} selected {% endif %} value="13:00">13:00</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '13:30' %} selected {% endif %} value="13:30">13:30</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '14:00' %} selected {% endif %} value="14:00">14:00</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '14:30' %} selected {% endif %} value="14:30">14:30</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '15:00' %} selected {% endif %} value="15:00">15:00</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '15:30' %} selected {% endif %} value="15:30">15:30</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '16:00' %} selected {% endif %} value="16:00">16:00</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '16:30' %} selected {% endif %} value="16:30">16:30</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '17:00' %} selected {% endif %} value="17:00">17:00</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '17:30' %} selected {% endif %} value="17:30">17:30</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '18:00' %} selected {% endif %} value="18:00">18:00</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '18:30' %} selected {% endif %} value="18:30">18:30</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '19:00' %} selected {% endif %} value="19:00">19:00</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '19:30' %} selected {% endif %} value="19:30">19:30</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '20:00' %} selected {% endif %} value="20:00">20:00</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '20:30' %} selected {% endif %} value="20:30">20:30</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '21:00' %} selected {% endif %} value="21:00">21:00</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '21:30' %} selected {% endif %} value="21:30">21:30</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '22:00' %} selected {% endif %} value="22:00">22:00</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '22:30' %} selected {% endif %} value="22:30">22:30</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '23:00' %} selected {% endif %} value="23:00">23:00</option>-->
                                                            <!--                                            <option {% if order_item.order_item.installation_time|time:"h:i" == '23:30' %} selected {% endif %} value="23:30">23:30</option>-->
                                                            <!--                                         </select>-->
                                                            <!--                                        </div>-->
                                                            <!--                                    </td>-->
                                                                                                <!--<td class="pt-6 fw-bolder">-->
                                                                                                <!--    <button type="submit" class="btn tech-btn">Update</button>-->
                                                                                                <!--</td>-->
                                                            <!--                                </tr>-->
                                                            <!--                            </tbody>-->
                                                            <!--                        </table>-->
                                                            <!--                        </form>-->
                                                            <!--                    </div>-->
                                                            <!--                    <div class="d-flex justify-content-end"> </div>-->
                                                            <!--                    <div class="flex-lg-row-fluid me-xl-10 mb-10 mb-xl-0"> </div>-->
                                                            <!--                </div>-->
                                                            <!--            </div>-->
                                                            <!--        </div>-->
                                                            <!--    </div>-->
                                                            <!--</div>-->
                                                          
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        </div>
                          {% else %}
                          <div id="myModalj{{order_item.id}}" class="modal service-job-modal">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h2> &nbsp;
                                            <span class=" fw-bold badge py-3 px-4 fs-7  {% if order_item.order_item.status == 0   or  order_item.order_item.tracking_status ==  0 %} ordered {% endif %}  {% if order_item.order_item.status == 1   or  order_item.order_item.tracking_status ==  1  %} shipped {% endif %}  {% if order_item.order_item.status == 3   or  order_item.order_item.tracking_status ==  3%} arrived {% endif %}  {% if order_item.order_item.status == 4   %} booked {% endif %} {% if order_item.order_item.status != 4 and order_item.order_item.status != 0 and order_item.order_item.status != 1 and order_item.order_item.status != 3 %} installed {% endif %}">
                                                    {% if order_item.order_item.status == 0 %} Ordered {% endif %}  {% if order_item.order_item.status == 1 %} Shipped {% endif %}  {% if order_item.order_item.status == 3 %} Arrived {% endif %}  {% if order_item.order_item.status == 4 %} Booked For {% if order_item.order_item.is_trade != 1 %} Install {% else %} Pickup {% endif %} {% endif %}  {{order_item.get_working_status }}
                                            </span>
                                        </h2>
                                        <span style="display:flex;">
                                        {% if order_item.order_item.is_trade != 1 %}
                                        <div class="card-toolbar mr-3">
                                            <div class="d-flex flex-stack flex-wrap gap-4">
                                             <form method="POST" action="{% if order_item.working_status == 4 %} {% url 'quotation:cancel_service_job' %} {% endif %}" class="d-flex align-items-center">
                                                {% csrf_token %}
                                                {% if order_item.order_item.status != 4 and  order_item.order_item.status < 3 %} 
                                                <select name="status" id="status" aria-label="Status" data-control="select2" data-placeholder="Status"  class="form-select form-select-lg fw-semibold" required>
                                                   {% if order_item.order_item.status == 0 %} <option value="0" {% if order_item.order_item.status == 0 %} selected{% endif %}>Ordered</option>
                                                        <option value="1" {% if order_item.order_item.status == 1 %} selected{% endif %}>Shipped</option>
                                                        <option value="3" {% if order_item.order_item.status == 3 %} selected{% endif %}>Arrived</option>
                                                        <option value="4" {% if order_item.order_item.status == 4 %} selected{% endif %}>Book for Install</option> 
                                                    {% endif %}
                                                    {% if order_item.order_item.status == 1 %} 
                                                        <option value="1" {% if order_item.order_item.status == 1 %} selected{% endif %}>Shipped</option>
                                                        <option value="3" {% if order_item.order_item.status == 3 %} selected{% endif %}>Arrived</option>
                                                        <!--<option value="4" {% if order_item.order_item.status == 4 %} selected{% endif %}>Book for Install</option> -->
                                                    {% endif %}
                                                     {% if order_item.order_item.status == 3 %} 
                                                        <option value="3" {% if order_item.order_item.status == 3 %} selected{% endif %}>Arrived</option>
                                                        <option value="4" {% if order_item.order_item.status == 4 %} selected{% endif %}>Book for Install</option> 
                                                    {% endif %}
                                                </select> 
                                                {% endif %}
                                           
                                             <input type="hidden" name="order_item_id" id="order_item_id" value="{{order_item.order_item.id}}">
                                             <input type="hidden" name="job_id" id="job_id" value="{{order_item.id}}">
                                           <!--{% if  order_item.working_status == 4 %} <button type="submit" style="margin-left:5px;" class="btn btn-primary "> Cancel Job</button>{% endif %}-->
                                            </form>
                                            </div>
                                        </div>
                                        {% endif %}
                                        <button id="closeModalBtn" class="close" data-id="j{{order_item.id}}">X</button>
                                        </span>
                                    </div>
                                    <div class="modal-body">
                                        <div class="orders-details mt-1">
                                            <div class="row g-5">
                                                <div class="col-md-4">
                                                    <div class="card track-card cus-card card-flush flex-row-fluid position-relative"> 
                                                        <div class="card-header track-head">
                                                            <div class="card-title">
                                                                <div class="d-flex align-items-center">
                                                                    <i  class="ki-outline ki-profile-circle fs-1 me-2 text-b"></i> 
                                                                     <a href="#"  class="text-gray-800 text-hover-primary text-b">
                                                                        {% if order_item.order_item.order.invoice.customer.company_name %}
                                                                            {{ order_item.order_item.order.invoice.customer.company_name }}
                                                                        {% else %}
                                                                            {{ order_item.order_item.order.invoice.customer.first_name}}   {{ order_item.order_item.order.invoice.customer.last_name}}
                                                                        {% endif %}
                                                                        </a> 
                                                                </div>
                                                            </div>
                                                        </div> 
                                                        <div class="pt-0 cus-body">
                                                            <div class="table-responsives"> 
                                                                <table  class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                        <tr>
                                                                            <td class="text-gray-800">
                                                                                <div class="d-flex align-items-center">
                                                                                    <i class="ki-outline ki-sms fs-2 me-2 text-b"></i>
                                                                                    <a href="#" class="text-gray-600 text-hover-primary text-b"> {{ order_item.order_item.order.invoice.customer.email}} </a>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="text-gray-800">
                                                                                <div class="d-flex align-items-center text-b">
                                                                                    <i  class="ki-outline ki-phone fs-2 me-2 text-b"></i>{{ order_item.order_item.order.invoice.customer.phone1}}
                                                                                </div>
                                                                            </td>
                                                                        </tr> 
                                                                         <tr>
                                                                            <td class="text-gray-800">
                                                                                <div class="d-flex align-items-center text-b">
                                                                                    <i  class="ki-outline ki-notepad-bookmark fs-1 me-2 text-b"></i> Order ID: #{{ order_item.order_item.order.id }}  ({{ order_item.order_item.order.created_at }})
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        
                                                                </table> 
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                               
                                                <div class="col-md-4">
                                                    <div class="card track-card card-flush invoice-card track-card flex-row-fluid position-relative"> 
                                                        <div class="card-header track-head">
                                                            <div class="card-title">
                                                                <div class="d-flex align-items-center">
                                                                    <i  class="ki-outline ki-document fs-1 me-2 text-b"></i> 
                                                                     <a href="#"  class="text-gray-800 text-hover-primary text-b">Inv ID: #{{ order_item.order_item.order.invoice.id }}</a> 
                                                                </div>
                                                            </div>
                                                        </div> 
                                                        <div class="pt-0 cus-body">
                                                            <div class="table-responsives"> 
                                                                <table  class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                    <tr>
                                                                        <td class="text-gray-800">
                                                                            <div class="d-flex align-items-center">
                                                                                <i class="ki-outline ki-calendar fs-2 me-2 text-b"></i>
                                                                                <a href="#" class="text-gray-600 text-hover-primary text-b"> {{ order_item.order_item.order.invoice.created_at }} </a>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="text-gray-800">
                                                                            <div class="d-flex align-items-center">
                                                                                <i class="ki-outline ki-save-deposit fs-2 me-2 text-b"></i>
                                                                                <a href="#" class="text-gray-600 text-hover-primary text-b">Balance  ${{order_item.order_item.order.invoice.payable_amount }}  </a>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                 </table> 
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="card track-card bill-card card-flush mb-5 order-card position-relative">
                                                        <div class="card-header track-head">
                                                            <div class="card-title">
                                                                <div class="d-flex align-items-center">
                                                                    <i  class="ki-outline ki-notepad-bookmark fs-1 me-2 text-b"></i> 
                                                                     <a href="#"  class="text-gray-800 text-hover-primary text-b">Bill Product </a> 
                                                                </div>
                                                            </div>
                                                        </div> 
                                                        
                                                        
                                                        
                                                                                                
                                                        <div class="pt-0 cus-body">
                                                             <div class="table-responsives"> 
                                                                <table  class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                    <tr>
                                                                        <td class="text-gray-800">
                                                                            <div class="d-flex align-items-center">
                                                                               
                                                                                <i class="ki-outline ki-file-sheet fs-2"></i>
 

                                                                                <a href="#" class="text-gray-600 text-hover-primary text-b"> Product: {{order_item.order_item.product.product_name}}-({{order_item.order_item.product.sku}}) </a>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="text-gray-800">
                                                                            <div class="d-flex align-items-center">
                                                                                <i class="ki-outline ki-note-2 fs-2">
                                                                                  
                                                                                </i>
                                                                                <a href="#" class="text-gray-600 text-hover-primary text-b">SR.No.: {{order_item.order_item.serial_number}} </a>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="text-gray-800">
                                                                            <div class="d-flex align-items-center">
                                                                                <i class="ki-outline ki-user-edit fs-2">
                                                                                  
                                                                                </i>
                                                                                <a href="#" class="text-gray-600 text-hover-primary text-b">Supplier: {% if order_item.order_item.serial_number.bill.supplier != None %}{{order_item.order_item.serial_number.bill.supplier}}{% else %} - {% endif %} </a>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                 </table> 
                                                            </div>
                                                            
            
                                                        </div>                                          
                                                  
                                                    </div>
                                                </div>
                                                <div class="col-md-12 mt-1">
                                                    <div class="cards p-0">
                                                        <div class="card-body ex-b">
                                                            {% if order_item.service.description %}
                                                            <div class="card-header p-0">
                                                                <h3 class="card-title align-items-start flex-column">
                                                                    <span  class="card-label fw-bold text-gray-800">Job Details</span>
                                                                    <span class="text-gray-500 mt-1 fw-semibold fs-6"></span>
                                                                </h3>
                                                            </div>
                                                            <div id="kt_activity_month_serial{{order_item.order_item.id}}" class="card-body p-0 tab-pane fade show active ex-b" role="tabpanel" aria-labelledby="kt_activity_month_tab">
                                                                <div class="cards p-0">
                                                                    <div class="card-body">
                                                                        <div class="d-flex flex-column flex-xl-row">
                                                                            <div class="flex-grow-1">
                                                                                <div class="table-responsive border-bottom mb-2">
                                                                                    <table class="table mb-3 tracking-table">
                                                                                      
                                                                                        <tbody>
                                                                                            <tr class="fw-bold text-gray-700 fs-5">
                                                                                                <td class="d-flex align-items-center pt-2"> <i class="fa fa-genderless text-danger fs-2 me-2"></i>{{ order_item.service.description }} </td>
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                </div>
                                                                                <div class="d-flex justify-content-end"> </div>
                                                                                <div class="flex-lg-row-fluid me-xl-10 mb-10 mb-xl-0"> </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                             {% endif %}
                                                            
                                                            <div id="kt_activity_month_serial{{order_item.order_item.id}}" class="card-body p-0 tab-pane fade show active ex-b" role="tabpanel" aria-labelledby="kt_activity_month_tab">
                                                                <div class="cards p-0">
                                                                    <div class="card-body">
                                                                        <div class="d-flex flex-column flex-xl-row">
                                                                            <div class="flex-grow-1">
                                                                                <div class="table-responsive mb-2">
                                                                                    <table class="table mb-1 tracking-table">
                                                                                      
                                                                                        <tbody>
                                                                                            <tr class="fw-bold text-gray-700 fs-5">
                                                                                               <td class="pt-2 fw-bolder"> 
                                                                                               <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/Videos</h6>
                                                                                                            </div>
                                                                                                        </div>
                                                                                               {% if order_item.related_service_request_images  or  order_item.related_service_request_videos %}
                                                                                               {% with service_request_images=order_item.related_service_request_images %}
                                                                                                    {% if service_request_images %}
                                                                                                        <!--<h2>Service Request Images</h2>-->
                                                                                                        
                                                                                                        <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" width="100" height="100"> <!-- Define width and height for each image -->
                                                                                                                        </a>
                                                                                                                    
                                                                                                                    {% endif %}
                                                                                                                {% endfor %}
                                                                                                            
                                                                                                            {% endif %}
                                                                                                        </div>
                                                                                                    {% endif %}
                                                                                                {% endwith %}
                                                                                                  
    {% with service_request_videos=order_item.related_service_request_videos %}
{% if service_request_videos %}


<div class="d-flex align-items-center justify-content-start imagewrapper">

    {% for video in service_request_videos %}
        {% if video.service_request_video %}
        <div class="me-3">
            <video width="200" height="150" controls>
                <source src="{{ video.service_request_video.url }}" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>
        {% endif %}
    {% endfor %}

</div>
{% endif %}
{% endwith %}
{% endif %}</td>
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                </div>
                                                                                <div class="d-flex justify-content-end"> </div>
                                                                                <div class="flex-lg-row-fluid me-xl-10 mb-10 mb-xl-0"> </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                          
                                                           
                                                            
                                                            <div class="card-header p-0">
                                                                <h3 class="card-title align-items-start flex-column">
                                                                    <span  class="card-label fw-bold text-gray-800">Assigned Technician Details </span>
                                                                    <span class="text-gray-500 mt-1 fw-semibold fs-6"></span>
                                                                </h3>
                                                            </div>
                                                            <div id="kt_activity_month_serial{{order_item.order_item.id}}" class="card-body p-0 tab-pane fade show active ex-b" role="tabpanel" aria-labelledby="kt_activity_month_tab">
                                                                <div class="cards p-0">
                                                                    <div class="card-body">
                                                                        <div class="d-flex flex-column flex-xl-row">
                                                                            <div class="flex-grow-1">
                                                                                <div class="table-responsive border-bottom mb-2">
                                                                                    <form action="/update/technician_order/" method="post">
                                                                                    {% csrf_token %}
                                                                                    <table class="table mb-3 tracking-table">
                                                                                        <thead>
                                                                                            <tr class="border-bottom fs-6 fw-bold text-muted" style="border-top:0px solid #ccc !important;">
                                                                                                <th class="min-w-50px sorting_disabled"> Technician </th>
                                                                                                <th class="min-w-50px sorting_disabled">Secondary Technician</th>
                                                                                                <th class="min-w-50px sorting_disabled"> {% if order_item.order_item.is_trade != 1 %}Service Start Date{% else %}Pickup  Start Date{% endif %}</th>
                                                                                                <th class="min-w-50px sorting_disabled"> {% if order_item.order_item.is_trade != 1 %}Service Time{% else %}Pickup Time{% endif %}</th>
                                                                                                <th class="min-w-50px sorting_disabled"> {% if order_item.order_item.is_trade != 1 %}Service End Date{% else %}Pickup  ENd Date{% endif %}</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Action</th>
                                                                                            </tr>
                                                                                        </thead>
                                                                                        <tbody>
                                                                                            <tr class="fw-bold text-gray-700 fs-5">
                                                                                                <td class="d-flex align-items-center pt-6"> <i class="fa fa-genderless text-danger fs-2 me-2"></i>
                                                                                                    <select class="form-select"  {% if order_item.working_status != 4 %} disabled {% endif %}  data-placeholder="Select Technician" name="technician" id="technician" required>
                                                                                                        <option disabled selected value="">Select Technician</option>
                                                                                                        {% for technician in technicians %}
                                                                                                            <option value="{{ technician.id }}" {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.technician.id == technician.id %} selected {% endif %}>{{ technician.userinfo.first_name }} {{ technician.userinfo.last_name }}</option>
                                                                                                        {% endfor %}
                                                                                                    </select>
                                                                                                    <input type="hidden" name="order_item_id" class="orderItemIdInput" value="{{order_item.order_item.id}}">
                                                                                                    <input type="hidden" name="order_identifier" class="orderItemIdentifierInput" value="{{order_item.order_item.order_identifier}}">
                                                                                                </td>
                                                                                                <td class="pt-6 fw-bolder"> 
                                                                                                    <select class="form-select"  {% if order_item.working_status != 4 %} disabled {% endif %}  data-placeholder="Select Secondary Technician" name="secondary_technician" id="secondary_technician" >
                                                                                                        <option  selected value="">Select Secondary Technician</option>
                                                                                                        {% for technician in technicians %}
                                                                                                            <option  {% if order_item.working_status != 4 %} disabled {% endif %} value="{{ technician.id }}" {% if order_item.secondary_technician == technician %} selected {% endif %}>{{ technician.userinfo.first_name }} {{ technician.userinfo.last_name }}</option>
                                                                                                        {% endfor %}
                                                                                                    </select>
                                                                                                </td>
                                                                                                <td class="pt-6 fw-bolder">
                                                                                                    <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_cost">
                                                                                                        <div class="input-group" id="kt_td_picker_localization{{order_item.order_item.id}}" data-td-target-input="nearest" data-td-target="#kt_td_picker_localization{{order_item.order_item.id}}" data-td-toggle="datetimepicker">
                                                                                                            <input type="text" {% if order_item.working_status != 4 %} disabled {% endif %} class="form-control start_date0 start_date{{order_item.order_item.id}}" data-td-target="#kt_td_picker_localization{{order_item.order_item.id}}" readonly name="installation_start_date"  value="{% if order_item.installation_date %}{{order_item.installation_date|date:"d-m-Y"}}{% else %}{% now 'd-m-Y' %}{% endif %}" required />
                                                                                        
                                                                                                            <span class="input-group-text" data-td-target="#kt_td_picker_localization{{order_item.order_item.id}}" data-td-toggle="datetimepicker">
                                                                                                                <i class="ki-duotone ki-calendar fs-2"><span class="path1"></span><span class="path2"></span></i>
                                                                                                            </span>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </td>
                                                                                                <td class="pt-6 fw-bolder"> 
                                                                                                    <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_cost">
                                                                                                     <select class="form-select" data-placeholder="Select Installation Time" name="installation_time" id="installation_time" required  {% if order_item.working_status != 4 %} disabled {% endif %} >
                                                                                                        <option disabled selected value="">Select {% if order_item.order_item.is_trade != 1 %}Service{% endif %} Time</option>

                                                                                                        <option {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:'h:i' == '00:00' %} selected {% endif %} value="00:00">00:00</option>
                                                                                                        <option {% if order_item.working_status != 4 %} disabled {% endif %}  {% if order_item.order_item.installation_time|time:'h:i' == '00:30' %} selected {% endif %} value="00:30">00:30</option>

                                                                                                        <option {% if order_item.working_status != 4 %} disabled {% endif %}  {% if order_item.order_item.installation_time|time:"h:i" == '01:00' %} selected {% endif %} value="01:00">01:00</option>
                                                                                                        <option {% if order_item.working_status != 4 %} disabled {% endif %}  {% if order_item.order_item.installation_time|time:"h:i" == '01:30' %} selected {% endif %} value="01:30">01:30</option>
                                                                                                        <option {% if order_item.working_status != 4 %} disabled {% endif %}  {% if order_item.order_item.installation_time|time:"h:i" == '02:00' %} selected {% endif %} value="02:00">02:00</option>
                                                                                                        <option {% if order_item.working_status != 4 %} disabled {% endif %}  {% if order_item.order_item.installation_time|time:"h:i" == '02:30' %} selected {% endif %} value="02:30">02:30</option>
                                                                                                        <option {% if order_item.working_status != 4 %} disabled {% endif %}  {% if order_item.order_item.installation_time|time:"h:i" == '03:00' %} selected {% endif %} value="03:00">03:00</option>
                                                                                                        <option {% if order_item.working_status != 4 %} disabled {% endif %}  {% if order_item.order_item.installation_time|time:"h:i" == '03:30' %} selected {% endif %} value="03:30">03:30</option>
                                                                                                        <option {% if order_item.working_status != 4 %} disabled {% endif %}  {% if order_item.order_item.installation_time|time:"h:i" == '04:00' %} selected {% endif %} value="04:00">04:00</option>
                                                                                                        <option  {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '04:30' %} selected {% endif %}  value="04:30">04:30</option>
                                                                                                        <option  {% if order_item.working_status != 4 %} disabled {% endif %}  {% if order_item.order_item.installation_time|time:"h:i" == '05:00' %} selected {% endif %} value="05:00">05:00</option>
                                                                                                        <option  {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '05:30' %} selected {% endif %} value="05:30">05:30</option>
                                                                                                        <option  {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '06:00' %} selected {% endif %} value="06:00">06:00</option>
                                                                                                        <option  {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '06:30' %} selected {% endif %} value="06:30">06:30</option>
                                                                                                        <option  {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '07:00' %} selected {% endif %} value="07:00">07:00</option>
                                                                                                        <option  {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '07:30' %} selected {% endif %} value="07:30">07:30</option>
                                                                                                        <option  {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '08:00' %} selected {% endif %} value="08:00">08:00</option>
                                                                                                        <option  {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '08:30' %} selected {% endif %} value="08:30">08:30</option>
                                                                                                        <option  {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '09:00' %} selected {% endif %} value="09:00">09:00</option>
                                                                                                        <option  {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '09:30' %} selected {% endif %} value="09:30">09:30</option>
                                                                                                        <option  {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '10:00' %} selected {% endif %} value="10:00">10:00</option>
                                                                                                        <option  {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '10:30' %} selected {% endif %} value="10:30">10:30</option>
                                                                                                        <option  {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '11:00' %} selected {% endif %} value="11:00">11:00</option>
                                                                                                        <option  {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '11:30' %} selected {% endif %} value="11:30">11:30</option>
                                                                                                        <option  {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '12:00' %} selected {% endif %} value="12:00">12:00</option>
                                                                                                        <option  {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '12:30' %} selected {% endif %} value="12:30">12:30</option>
                                                                                                        <option  {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '13:00' %} selected {% endif %} value="13:00">13:00</option>
                                                                                                        <option  {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '13:30' %} selected {% endif %} value="13:30">13:30</option>
                                                                                                        <option  {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '14:00' %} selected {% endif %} value="14:00">14:00</option>
                                                                                                        <option  {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '14:30' %} selected {% endif %} value="14:30">14:30</option>
                                                                                                        <option  {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '15:00' %} selected {% endif %} value="15:00">15:00</option>
                                                                                                        <option  {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '15:30' %} selected {% endif %} value="15:30">15:30</option>
                                                                                                        <option  {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '16:00' %} selected {% endif %} value="16:00">16:00</option>
                                                                                                        <option  {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '16:30' %} selected {% endif %} value="16:30">16:30</option>
                                                                                                        <option {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '17:00' %} selected {% endif %} value="17:00">17:00</option>
                                                                                                        <option {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '17:30' %} selected {% endif %} value="17:30">17:30</option>
                                                                                                        <option {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '18:00' %} selected {% endif %} value="18:00">18:00</option>
                                                                                                        <option {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '18:30' %} selected {% endif %} value="18:30">18:30</option>
                                                                                                        <option {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '19:00' %} selected {% endif %} value="19:00">19:00</option>
                                                                                                        <option {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '19:30' %} selected {% endif %} value="19:30">19:30</option>
                                                                                                        <option {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '20:00' %} selected {% endif %} value="20:00">20:00</option>
                                                                                                        <option {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '20:30' %} selected {% endif %} value="20:30">20:30</option>
                                                                                                        <option {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '21:00' %} selected {% endif %} value="21:00">21:00</option>
                                                                                                        <option {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '21:30' %} selected {% endif %} value="21:30">21:30</option>
                                                                                                        <option {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '22:00' %} selected {% endif %} value="22:00">22:00</option>
                                                                                                        <option  {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '22:30' %} selected {% endif %} value="22:30">22:30</option>
                                                                                                        <option  {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '23:00' %} selected {% endif %} value="23:00">23:00</option>
                                                                                                        <option  {% if order_item.working_status != 4 %} disabled {% endif %} {% if order_item.order_item.installation_time|time:"h:i" == '23:30' %} selected {% endif %} value="23:30">23:30</option>
                                                                                                     </select>
                                                                                                    </div>
                                                                                                </td>
                                                                                                 <td class="pt-6 fw-bolder">
                                                                                                    <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_cost">
                                                                                                        <div class="input-group" id="kt_td_picker_localization_end{{order_item.order_item.id}}" data-td-target-input="nearest" data-td-target="#kt_td_picker_localization_end{{order_item.order_item.id}}" data-td-toggle="datetimepicker">
                                                                                                            <input type="text" {% if order_item.working_status != 4 %} disabled {% endif %} class="form-control end_date{{order_item.order_item.id}}" data-td-target="#kt_td_picker_localization_end{{order_item.order_item.id}}" readonly name="installation_end_date"  value="{% if order_item.installation_end_date %}{{order_item.installation_end_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{{order_item.order_item.id}}" data-td-toggle="datetimepicker">
                                                                                                                <i class="ki-duotone ki-calendar fs-2"><span class="path1"></span><span class="path2"></span></i>
                                                                                                            </span>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </td>
                                                                                                 <input type="hidden" name='job_id' value="{{order_item.id}}">
                                                                                              {% if order_item.working_status == 4 %}  <td class="pt-6 fw-bolder">
                                                                                                   
                                                                                                    <button type="submit" class="btn tech-btn">Update</button>
                                                                                                </td>
                                                                                                {% endif %}
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                    </form>
                                                                                </div>
                                                                                <div class="d-flex justify-content-end"> </div>
                                                                                <div class="flex-lg-row-fluid me-xl-10 mb-10 mb-xl-0"> </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endif %}
{% endfor %}
				<div id="addEvent">
					<h2>Add Event</h2>
					<input type="text" id="txtTitle" placeholder="Event Title" />
					<button id="btnSave">Save</button>
					<button class="btnClose">Close</button>
				</div>
				<div id="viewEvent">
					<h2>Event</h2>
					<p id="eventText">This is Sample Event</p>
					<button id="btnDelete">Delete</button>
					<button class="btnClose">Close</button>
				</div>
	{% for order_item in order_items %}				
 
    <div id="myModalo{{order_item.id}}" class="modal fade myModal">
                           <div class="modal-content">
                                    <div class="modal-header">
                                        <h2> &nbsp;
                                            <span class=" fw-bold badge py-3 px-4 fs-7  {% if order_item.status == 0   or  order_item.tracking_status ==  0 %} ordered {% endif %}  {% if order_item.status == 1   or  order_item.tracking_status ==  1  %} shipped {% endif %}  {% if order_item.status == 3   or  order_item.tracking_status ==  3%} arrived {% endif %}  {% if order_item.status == 4   %} booked {% endif %} {% if order_item.status != 4 and order_item.status != 0 and order_item.status != 1 and order_item.status != 3 %} installed {% endif %}">
                                                    {% if order_item.status == 0 %} Ordered {% endif %}  {% if order_item.status == 1 %} Shipped {% endif %}  {% if order_item.status == 3 %} Arrived {% endif %}  {% if order_item.status == 4 %} Booked For {% if order_item.product.is_trade != 1 %} Install {% else %} Pickup {% endif %} {% endif %} 
                                            </span>
                                        </h2>
                                        <span style="display:flex;">
                                        {% if order_item.product.is_trade != 1 %}
                                        <div class="card-toolbar mr-3">
                                            <div class="d-flex flex-stack flex-wrap gap-4">
                                             <form method="POST" action="{% url 'quotation:update_order_status' %}" class="d-flex align-items-center cal-forms">
                                                {% csrf_token %}
                                             <select name="status" id="status" aria-label="Status" data-control="select2" data-placeholder="Status"  class=" cal-update form-select form-select-lg fw-semibold">
                                                <option value="0" {% if order_item.status == 0 %} selected{% endif %}>Ordered</option>
                                                <option value="1" {% if order_item.status == 1 %} selected{% endif %}>Shipped</option>
                                                <option value="3" {% if order_item.status == 3 %} selected{% endif %}>Arrived</option>
                                                <option value="4" {% if order_item.status == 4 %} selected{% endif %}>Book for Install</option>
                                            </select> 
                                             <input type="hidden" name="order_item_id" id="order_item_id" value="{{order_item.id}}">
                                            <button type="submit" style="margin-left:5px;" class="btn btn-primary ml-2">Update</button>
                                            </form>
                                            </div>
                                        </div>
                                        {% endif %}
                                        <button  class="close" data-id="o{{order_item.id}}" >X</button>
                                        </span>
                                    </div>
                                    <div class="modal-body">
                                        <div class="orders-details mt-5">
                                            <div class="row g-5">
                                                <div class="col-md-4">
                                                    <div class="card track-card cus-card card-flush flex-row-fluid position-relative"> 
                                                        <div class="card-header track-head">
                                                            <div class="card-title">
                                                                <div class="d-flex align-items-center">
                                                                    <i  class="ki-outline ki-profile-circle fs-1 me-2 text-b"></i> 
                                                                     <a href="#"  class="text-gray-800 text-hover-primary text-b">
                                                                        {% if order_item.order.invoice.customer.company_name %}
                                                                            {{ order_item.order.invoice.customer.company_name }}
                                                                        {% else %}
                                                                            {{ order_item.order.invoice.customer.first_name}}   {{ order_item.order.invoice.customer.last_name}}
                                                                        {% endif %}
                                                                        </a> 
                                                                </div>
                                                            </div>
                                                        </div> 
                                                        <div class="pt-0 cus-body">
                                                            <div class="table-responsive"> 
                                                                <table  class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                        <tr>
                                                                            <td class="text-gray-800">
                                                                                <div class="d-flex align-items-center">
                                                                                    <i class="ki-outline ki-sms fs-2 me-2 text-b"></i>
                                                                                    <a href="#" class="text-gray-600 text-hover-primary text-b"> {{ order_item.order.invoice.customer.email}} </a>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="text-gray-800">
                                                                                <div class="d-flex align-items-center text-b">
                                                                                    <i  class="ki-outline ki-phone fs-2 me-2 text-b"></i>{{ order_item.order.invoice.customer.phone1}}
                                                                                </div>
                                                                            </td>
                                                                        </tr> 
                                                                </table> 
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="card track-card bill-card card-flush mb-5 order-card position-relative">
                                                        <div class="card-header track-head">
                                                            <div class="card-title">
                                                                <div class="d-flex align-items-center">
                                                                    <i  class="ki-outline ki-notepad-bookmark fs-1 me-2 text-b"></i> 
                                                                     <a href="#"  class="text-gray-800 text-hover-primary text-b">Order ID: #{{ order_item.order.id }}</a> 
                                                                </div>
                                                            </div>
                                                        </div> 
                                                        <div class="pt-0 cus-body">
                                                            <div class="table-responsive"> 
                                                                <table  class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                    <tr>
                                                                        <td class="text-gray-800">
                                                                            <div class="d-flex align-items-center">
                                                                                <i class="ki-outline ki-calendar fs-2 me-2 text-b"></i>
                                                                                <a href="#" class="text-gray-600 text-hover-primary text-b"> {{ order_item.order.created_at }} </a>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                </table> 
                                                            </div>
                                                        </div>                                
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="card track-card card-flush invoice-card track-card flex-row-fluid position-relative"> 
                                                        <div class="card-header track-head">
                                                            <div class="card-title">
                                                                <div class="d-flex align-items-center">
                                                                    <i  class="ki-outline ki-document fs-1 me-2 text-b"></i> 
                                                                     <a href="#"  class="text-gray-800 text-hover-primary text-b">Inv ID: #{{ order_item.order.invoice.id }}</a> 
                                                                </div>
                                                            </div>
                                                        </div> 
                                                        <div class="pt-0 cus-body">
                                                            <div class="table-responsive"> 
                                                                <table  class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                    <tr>
                                                                        <td class="text-gray-800">
                                                                            <div class="d-flex align-items-center">
                                                                                <i class="ki-outline ki-calendar fs-2 me-2 text-b"></i>
                                                                                <a href="#" class="text-gray-600 text-hover-primary text-b"> {{ order_item.order.invoice.created_at }} </a>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="text-gray-800">
                                                                            <div class="d-flex align-items-center">
                                                                                <i class="ki-outline ki-save-deposit fs-2 me-2 text-b"></i>
                                                                                <a href="#" class="text-gray-600 text-hover-primary text-b">Balance  ${{order_item.order.invoice.payable_amount }}  </a>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                 </table> 
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="cards p-0">
                                                        <div class="card-body ex-b">
                                                            <div id="kt_activity_today_serial{{order_item.id}}" class="card-body p-0 tab-pane fade show active" role="tabpanel"  aria-labelledby="kt_activity_today_tab">
                                                                <div class="cards card-flush h-xl-100" data-select2-id="select2-data-124-p5cu">
                                                                    <div class="card-header p-0" data-select2-id="select2-data-123-flzv">
                                                                        <!--begin::Title-->
                                                                        <h3 class="card-title align-items-start flex-column">
                                                                            <span  class="card-label fw-bold text-gray-800 text-b">Bill Product</span>
                                                                            <span class="text-gray-500 mt-1 fw-semibold fs-6 text-b"></span>
                                                                        </h3>
                                                                        <div class="card-toolbar">
                                                                            <div class="d-flex flex-stack flex-wrap gap-4">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="card-body pt-2">
                                                                        <div>
                                                                            <div class="table-responsive">
                                                                                <table class="table align-middle table-row-dashed fs-6 gy-3  no-footer tracking-table"  >
                                                                                    <thead>
                                                                                        <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                                                                            <th colspan="2" class="min-w-100px sorting_disabled"  rowspan="1" style="">Product </th>
                                                                                            <th class="min-w-100px sorting_disabled" rowspan="1" style="">Serial Number </th>
                                                                                            <th class="min-w-100px sorting_disabled" rowspan="1"  style="">Supplier</th>
                                                                                            <th class="min-w-100px sorting_disabled" rowspan="1"  style="">Quantity</th>
                                                                                            <th class="min-w-100px sorting_disabled"  rowspan="1"  style="">Tracking Status</th>
                                                                                        </tr>
                                                                                    </thead>
                                                                                    <tbody class="fw-bold text-gray-600">
                                                                                        <tr data-kt-table-widget-4="subtable_template" class="">
                                                                                            <td colspan="2">
                                                                                                <div  class="d-flex align-items-center gap-3">
                                                                                                    <a href="#" class="symbol symbol-50px bg-secondary bg-opacity-25 rounded ">
                                                                                                        <img src="https://ea.stagingstorm.com/media/product_images/main_images/4.jpg" data-kt-src-path="https://ea.stagingstorm.com/media/product_images/main_images/4.jpg" alt=""  data-kt-table-widget-4="template_image">
                                                                                                    </a>
                                                                                                    <div class="d-flex flex-column">
                                                                                                        <a href="#" class="text-gray-800 text-hover-primary fw-bold"   data-kt-table-widget-4="template_name">{{order_item.product.product_name}}-({{order_item.product.sku}})
                                                                                                          </a>                                                                                           
                                                                                                    </div>
                                                                                                </div>
                                                                                            </td>
                                                                                            <td class="text-start">
                                                                                                <div class=" fs-7 fw-bold"  data-kt-table-widget-4="template_cost"> {{order_item.serial_number}}</div>
                                                                                            </td>
                                                                                            <td class="text-start">
                                                                                                <div class="fs-7 fw-bold"  data-kt-table-widget-4="template_cost">{% if order_item.serial_number.bill.supplier != None %}{{order_item.serial_number.bill.supplier}}{% else %} - {% endif %}</div>
                                                                                            </td>
                                                                                            <td class="text-start">
                                                                                                <div class="fs-7 fw-bold"
                                                                                                    data-kt-table-widget-4="template_qty">
                                                                                                   1</div>
                                                                                            </td>
                                                                                            <td class="text-start">
                                                                                                <div class="fs-7 fw-bold"  data-kt-table-widget-4="template_stock">
                                                                                                    <div class="badge   {% if order_item.status == 0   or  order_item.tracking_status ==  0 %} ordered {% endif %}  {% if order_item.status == 1   or  order_item.tracking_status ==  1  %} shipped {% endif %}  {% if order_item.status == 3   or  order_item.tracking_status ==  3%} arrived {% endif %}  {% if order_item.status == 4   %} booked {% endif %} {% if order_item.status != 4 and order_item.status != 0 and order_item.status != 1 and order_item.status != 3 %} installed {% endif %}">
                                                                                                        {% if order_item.status == 0 %} Ordered {% endif %}  {% if order_item.status == 1 %} Shipped {% endif %}  {% if order_item.status == 3 %} Arrived {% endif %}  {% if order_item.status == 4 %} Booked For {% if order_item.product.is_trade != 1 %} Install {% else %} Pickup {% endif %} {% endif %} 
                                                                                                    </div>
                                                                                                    </div>
                                                                                                </td>
                                                                                             
                                                                                            </tr>
                                                                                    </tbody>
                                                                                </table>
                                                                            </div>
                                                                            <div class="row">
                                                                                <div
                                                                                    class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start">
                                                                                </div>
                                                                                <div
                                                                                    class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                           
                                                            {% if order_item.order.invoice != None %}
                                                            <div class="card-header p-0">
                                                                <h3 class="card-title align-items-start flex-column">
                                                                    <span  class="card-label fw-bold text-gray-800">Payment Details </span>
                                                                    <span class="text-gray-500 mt-1 fw-semibold fs-6"></span>
                                                                </h3>
                                                            </div>
                                                            <div id="kt_activity_month_serial{{order_item.id}}" class="card-body p-0 tab-pane fade show active ex-b" role="tabpanel" aria-labelledby="kt_activity_month_tab">
                                                                <div class="cards p-0">
                                                                    <div class="card-body">
                                                                        <div class="d-flex flex-column flex-xl-row">
                                                                            <div class="flex-grow-1">
                                                                                <div class="table-responsive border-bottom mb-9">
                                                                                    <table class="table mb-3 tracking-table">
                                                                                        <thead>
                                                                                            <tr class="border-bottom fs-6 fw-bold text-muted">
                                                                                                <th class="min-w-50px sorting_disabled"> Invoice ID</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Total Amount</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Paid</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Balance</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Due Date</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Last Payment Date</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Invoice</th>
                                                                                            </tr>
                                                                                        </thead>
                                                                                        <tbody>
                                                                                            <tr class="fw-bold text-gray-700 fs-5">
                                                                                                <td class="d-flex align-items-center pt-6"> <i class="fa fa-genderless text-danger fs-2 me-2"></i>{{ order_item.order.invoice.id }} </td>
                                                                                                    <td class="pt-6 fw-bolder"> ${{ order_item.order.invoice.total }}</td>
                                                                                                    <td class="pt-6 fw-bolder"> ${{ order_item.order.invoice.total_paid_amount }}</td>
                                                                                                    <td class="pt-6 fw-bolder"> ${{order_item.order.invoice.payable_amount }}</td>
                                                                                                    <td class="pt-6 fw-bolder">{{order_item.order.invoice.due_date }}</td>
                                                                                                    
                                                                                                     <td class="pt-6 fw-bolder"> 
                                                                                                    {% if order_item.order.invoice.total !=  order_item.order.invoice.payable_amount %}
                                                                                                             {{order_item.order.invoice.get_invoice_last_payment_record.created_at}}
                                                                                                    {% else %}
                                                                                                            -
                                                                                                    {% endif %}</td>
                                                                                                    {% if order_item.order.invoice.myob_invoice_pdf %}
                                                                                                    <td class="pt-6 fw-bolder"> <a href="/media/{{order_item.order.invoice.myob_invoice_pdf}}" target="_blank" title="Myob Invoice PDF" class="pdf-icon"> <i class="fa-solid fa-file-pdf"></i></a></td>
                                                                                                    {% endif %}
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                </div>
                                                                                <div class="d-flex justify-content-end"> </div>
                                                                                <div class="flex-lg-row-fluid me-xl-10 mb-10 mb-xl-0"> </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            {% endif %}
                                                            
                                                            {% if order_item.status == 4 %}
                                                            <div class="card-header p-0">
                                                                <h3 class="card-title align-items-start flex-column">
                                                                    <span  class="card-label fw-bold text-gray-800">Assigned Technician Details </span>
                                                                    <span class="text-gray-500 mt-1 fw-semibold fs-6"></span>
                                                                </h3>
                                                            </div>
                                                            <div id="kt_activity_month_serial{{order_item.id}}" class="card-body p-0 tab-pane fade show active ex-b" role="tabpanel" aria-labelledby="kt_activity_month_tab">
                                                                <div class="cards p-0">
                                                                    <div class="card-body">
                                                                        <div class="d-flex flex-column flex-xl-row">
                                                                            <div class="flex-grow-1">
                                                                                <div class="table-responsive border-bottom mb-9">
                                                                                    <form action="/update/technician_order/" method="post">
                                                                                    {% csrf_token %}
                                                                                    <table class="table mb-3 tracking-table">
                                                                                        <thead>
                                                                                            <tr class="border-bottom fs-6 fw-bold text-muted">
                                                                                                <th class="min-w-40px sorting_disabled"> Technician</th>
                                                                                                <th class="min-w-40px sorting_disabled"> Secondary Technician</th>
                                                                                                <th class="min-w-50px sorting_disabled"> {% if order_item.product.is_trade != 1 %}Installation Start Date{% else %}Pickup Start Date{% endif %}</th>
                                                                                                <th class="min-w-50px sorting_disabled"> {% if order_item.product.is_trade != 1 %}Installation Time{% else %}Pickup Time{% endif %}</th>
                                                                                                 <th class="min-w-50px sorting_disabled"> {% if order_item.product.is_trade != 1 %}Installation End Date{% else %}Pickup End Date{% endif %}</th>
                                                                                                <th class="min-w-20px sorting_disabled"> Action</th>
                                                                                            </tr>
                                                                                        </thead>
                                                                                        <tbody>
                                                                                            <tr class="fw-bold text-gray-700 fs-5">
                                                                                                <td class="d-flex align-items-center pt-6"> <i class="fa fa-genderless text-danger fs-2 me-2"></i>
                                                                                                    <select class="form-select" data-placeholder="Select Technician" name="technician" id="technician" required>
                                                                                                        <option disabled selected value="">Select Technician</option>
                                                                                                        {% for technician in technicians %}
                                                                                                            <option value="{{ technician.id }}" {% if order_item.ordered_technician.technician == technician %} selected {% endif %}>{{ technician.userinfo.first_name }} {{ technician.userinfo.last_name }}</option>
                                                                                                        {% endfor %}
                                                                                                    </select>
                                                                                                    <input type="hidden" name="order_item_id" class="orderItemIdInput" value="{{order_item.id}}">
                                                                                                    <input type="hidden" name="order_identifier" class="orderItemIdentifierInput" value="{{order_item.order_identifier}}">
                                                                                                </td>
                                                                                                 <td class="pt-6 fw-bolder"> 
                                                                                                    <select class="form-select" data-placeholder="Select Secondary Technician" name="secondary_technician" id="secondary_technician" >
                                                                                                        <option  selected value="">Select Secondary Technician</option>
                                                                                                        {% for technician in technicians %}
                                                                                                            <option value="{{ technician.id }}" {% if order_item.ordered_technician.secondary_technician == technician %} selected {% endif %}>{{ technician.userinfo.first_name }} {{ technician.userinfo.last_name }}</option>
                                                                                                        {% endfor %}
                                                                                                    </select>
                                                                                                </td>
                                                                                                <td class="pt-6 fw-bolder">
                                                                                                    <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_cost">
                                                                                                        <div class="input-group" id="kt_td_picker_localization{{order_item.id}}" data-td-target-input="nearest" data-td-target="#kt_td_picker_localization{{order_item.id}}" data-td-toggle="datetimepicker">
                                                                                                            <input type="text" class="form-control start_date{{order_item.id}}" data-td-target="#kt_td_picker_localization{{order_item.id}}" readonly name="installation_start_date"  value="{% if order_item.installation_date %}{{order_item.installation_date|date:'d-m-Y'}}{% else %}{% now 'd-m-Y' %}{% endif %}" required />
                                                                                        
                                                                                                            <span class="input-group-text" data-td-target="#kt_td_picker_localization{{order_item.id}}" data-td-toggle="datetimepicker">
                                                                                                                <i class="ki-duotone ki-calendar fs-2"><span class="path1"></span><span class="path2"></span></i>
                                                                                                            </span>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </td>
                                                                                                <td class="pt-6 fw-bolder"> 
                                                                                                    <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_cost">
                                                                                                     <select class="form-select" data-placeholder="Select Installation Time" name="installation_time" id="installation_time" required>
                                                                                                        <option disabled selected value="">Select {% if order_item.product.is_trade != 1 %}Installation{% else %}Pickup{% endif %} Time</option>

                                                                                                        <option {% if order_item.installation_time|time:'h:i' == '00:00' %} selected {% endif %} value="00:00">00:00</option>
                                                                                                        <option  {% if order_item.installation_time|time:'h:i' == '00:30' %} selected {% endif %} value="00:30">00:30</option>

                                                                                                        <option  {% if order_item.installation_time|time:"h:i" == '01:00' %} selected {% endif %} value="01:00">01:00</option>
                                                                                                        <option  {% if order_item.installation_time|time:"h:i" == '01:30' %} selected {% endif %} value="01:30">01:30</option>
                                                                                                        <option  {% if order_item.installation_time|time:"h:i" == '02:00' %} selected {% endif %} value="02:00">02:00</option>
                                                                                                        <option  {% if order_item.installation_time|time:"h:i" == '02:30' %} selected {% endif %} value="02:30">02:30</option>
                                                                                                        <option  {% if order_item.installation_time|time:"h:i" == '03:00' %} selected {% endif %} value="03:00">03:00</option>
                                                                                                        <option  {% if order_item.installation_time|time:"h:i" == '03:30' %} selected {% endif %} value="03:30">03:30</option>
                                                                                                        <option  {% if order_item.installation_time|time:"h:i" == '04:00' %} selected {% endif %} value="04:00">04:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '04:30' %} selected {% endif %}  value="04:30">04:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '05:00' %} selected {% endif %} value="05:00">05:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '05:30' %} selected {% endif %} value="05:30">05:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '06:00' %} selected {% endif %} value="06:00">06:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '06:30' %} selected {% endif %} value="06:30">06:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '07:00' %} selected {% endif %} value="07:00">07:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '07:30' %} selected {% endif %} value="07:30">07:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '08:00' %} selected {% endif %} value="08:00">08:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '08:30' %} selected {% endif %} value="08:30">08:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '09:00' %} selected {% endif %} value="09:00">09:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '09:30' %} selected {% endif %} value="09:30">09:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '10:00' %} selected {% endif %} value="10:00">10:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '10:30' %} selected {% endif %} value="10:30">10:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '11:00' %} selected {% endif %} value="11:00">11:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '11:30' %} selected {% endif %} value="11:30">11:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '12:00' %} selected {% endif %} value="12:00">12:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '12:30' %} selected {% endif %} value="12:30">12:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '13:00' %} selected {% endif %} value="13:00">13:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '13:30' %} selected {% endif %} value="13:30">13:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '14:00' %} selected {% endif %} value="14:00">14:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '14:30' %} selected {% endif %} value="14:30">14:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '15:00' %} selected {% endif %} value="15:00">15:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '15:30' %} selected {% endif %} value="15:30">15:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '16:00' %} selected {% endif %} value="16:00">16:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '16:30' %} selected {% endif %} value="16:30">16:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '17:00' %} selected {% endif %} value="17:00">17:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '17:30' %} selected {% endif %} value="17:30">17:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '18:00' %} selected {% endif %} value="18:00">18:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '18:30' %} selected {% endif %} value="18:30">18:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '19:00' %} selected {% endif %} value="19:00">19:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '19:30' %} selected {% endif %} value="19:30">19:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '20:00' %} selected {% endif %} value="20:00">20:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '20:30' %} selected {% endif %} value="20:30">20:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '21:00' %} selected {% endif %} value="21:00">21:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '21:30' %} selected {% endif %} value="21:30">21:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '22:00' %} selected {% endif %} value="22:00">22:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '22:30' %} selected {% endif %} value="22:30">22:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '23:00' %} selected {% endif %} value="23:00">23:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '23:30' %} selected {% endif %} value="23:30">23:30</option>
                                                                                                     </select>
                                                                                                    </div>
                                                                                                </td>
                                                                                                <td class="pt-6 fw-bolder">
                                                                                                    <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_cost">
                                                                                                        <div class="input-group" id="kt_td_picker_localization_end{{order_item.id}}" data-td-target-input="nearest" data-td-target="#kt_td_picker_localization_end{{order_item.id}}" data-td-toggle="datetimepicker">
                                                                                                            <input type="text" class="form-control end_date{{order_item.id}}" data-td-target="#kt_td_picker_localization_end{{order_item.id}}" readonly name="installation_end_date"  value="{% if order_item.installation_end_date %}{{order_item.installation_end_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{{order_item.id}}" data-td-toggle="datetimepicker">
                                                                                                                <i class="ki-duotone ki-calendar fs-2"><span class="path1"></span><span class="path2"></span></i>
                                                                                                            </span>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </td>
                                                                                                <td class="pt-6 fw-bolder">
                                                                                                    <button type="submit" class="btn tech-btn">Update</button>
                                                                                                </td>
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                    </form>
                                                                                </div>
                                                                                <div class="d-flex justify-content-end"> </div>
                                                                                <div class="flex-lg-row-fluid me-xl-10 mb-10 mb-xl-0"> </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        </div>
  {% endfor %}
  	{% for order_item in serial_numbers %}				

    <div  id="myModals{{order_item.id}}" class="modal fade myModal">
        <div class="modal-content">
                                    <div class="modal-header">
                                        <h2> &nbsp;
                                            <span class=" fw-bold badge py-3 px-4 fs-7  {% if  order_item.tracking_status ==  0 %} ordered {% endif %}  {% if  order_item.tracking_status ==  1  %} shipped {% endif %}  {% if order_item.tracking_status ==  3%} arrived {% endif %}">
                                                  {{order_item.get_tracking_status}}
                                            </span>
                                            <span class="serialStatus-{{order_item.get_self_status}}">{{order_item.get_self_status}}</span>
                                        </h2>
                                        <button  class="close" data-id="s{{order_item.id}}" >X</button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="orders-details mt-5">
                                            <div class="row g-5">
                                                {% if order_item.bill %}
                                                <div class="col-md-4">
                                                    <div class="card track-card cus-card card-flush flex-row-fluid position-relative"> 
                                                        <div class="card-header track-head">
                                                            <div class="card-title">
                                                                <div class="d-flex align-items-center">
                                                                    <i  class="ki-outline ki-profile-circle fs-1 me-2 text-b"></i> 
                                                                     <a href="#"  class="text-gray-800 text-hover-primary text-b">
                                                                        {% if order_item.bill.supplier.company_name %}
                                                                            {{ order_item.bill.supplier.company_name }}({{order_item.bill.supplier.supplier_code}})
                                                                        {% else %}
                                                                            {{ order_item.bill.supplier.first_name}}   {{ order_item.bill.supplier.last_name}}({{order_item.bill.supplier.supplier_code}})
                                                                        {% endif %}
                                                                        </a> 
                                                                </div>
                                                            </div>
                                                        </div> 
                                                        <div class="pt-0 cus-body">
                                                            <div class="table-responsive"> 
                                                                <table  class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                        <tr>
                                                                            <td class="text-gray-800">
                                                                                <div class="d-flex align-items-center">
                                                                                    <i class="ki-outline ki-sms fs-2 me-2 text-b"></i>
                                                                                    <a href="#" class="text-gray-600 text-hover-primary text-b"> {{ order_item.bill.supplier.email}} </a>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="text-gray-800">
                                                                                <div class="d-flex align-items-center text-b">
                                                                                    <i  class="ki-outline ki-phone fs-2 me-2 text-b"></i>{{ order_item.bill.supplier.phone1}}
                                                                                </div>
                                                                            </td>
                                                                        </tr> 
                                                                </table> 
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="card track-card bill-card card-flush mb-5 order-card position-relative">
                                                        <div class="card-header track-head">
                                                            <div class="card-title">
                                                                <div class="d-flex align-items-center">
                                                                    <i  class="ki-outline ki-notepad-bookmark fs-1 me-2 text-b"></i> 
                                                                     <a href="#"  class="text-gray-800 text-hover-primary text-b">Bill ID: #{{ order_item.bill.id}}</a> 
                                                                </div>
                                                            </div>
                                                        </div> 
                                                        <div class="pt-0 cus-body">
                                                            <div class="table-responsive"> 
                                                                <table  class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                    <tr>
                                                                        <td class="text-gray-800">
                                                                            <div class="d-flex align-items-center">
                                                                                <i class="ki-outline ki-calendar fs-2 me-2 text-b"></i>
                                                                                <a href="#" class="text-gray-600 text-hover-primary text-b"> {{ order_item.bill.created_at }} </a>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                </table> 
                                                            </div>
                                                        </div>                                
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="card track-card card-flush invoice-card track-card flex-row-fluid position-relative"> 
                                                        <div class="card-header track-head">
                                                            <div class="card-title">
                                                                <div class="d-flex align-items-center">
                                                                    <i  class="ki-outline ki-document fs-1 me-2 text-b"></i> 
                                                                     <a href="#"  class="text-gray-800 text-hover-primary text-b">Supplier Inv ID: #{{ order_item.bill.invoice_number}}</a> 
                                                                </div>
                                                            </div>
                                                        </div> 
                                                        <div class="pt-0 cus-body">
                                                            <div class="table-responsive"> 
                                                                <table  class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                    <tr>
                                                                        <td class="text-gray-800">
                                                                            <div class="d-flex align-items-center">
                                                                                <i class="ki-outline ki-calendar fs-2 me-2 text-b"></i>
                                                                                <a href="#" class="text-gray-600 text-hover-primary text-b">{{ order_item.bill.created_at }}</a>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="text-gray-800">
                                                                            <div class="d-flex align-items-center">
                                                                                <i class="ki-outline ki-save-deposit fs-2 me-2 text-b"></i>
                                                                                <a href="#" class="text-gray-600 text-hover-primary text-b">Balance {% if order_item.bill.payable_amount %} ${{ order_item.bill.payable_amount  }}{% else %}$0.00{% endif %}  </a>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                 </table> 
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                {% endif %}
                                                <div class="col-md-12">
                                                    <div class="cards p-0">
                                                        <div class="card-body ex-b">
                                                            <div id="kt_activity_today_serial{{order_item.id}}" class="card-body p-0 tab-pane fade show active" role="tabpanel"  aria-labelledby="kt_activity_today_tab">
                                                                <div class="cards card-flush h-xl-100" data-select2-id="select2-data-124-p5cu">
                                                                    <div class="card-header p-0" data-select2-id="select2-data-123-flzv">
                                                                        <!--begin::Title-->
                                                                        <h3 class="card-title align-items-start flex-column">
                                                                            <span  class="card-label fw-bold text-gray-800 text-b">Bill Product</span>
                                                                            <span class="text-gray-500 mt-1 fw-semibold fs-6 text-b"></span>
                                                                        </h3>
                                                                        <div class="card-toolbar">
                                                                            <div class="d-flex flex-stack flex-wrap gap-4">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="card-body pt-2">
                                                                        <div>
                                                                            <div class="table-responsive">
                                                                                <table class="table align-middle table-row-dashed fs-6 gy-3  no-footer tracking-table"  >
                                                                                    <thead>
                                                                                        <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                                                                            <th colspan="2" class="min-w-100px sorting_disabled"  rowspan="1" style="">Product </th>
                                                                                            <th class="min-w-100px sorting_disabled" rowspan="1" style="">Serial Number </th>
                                                                                            <th class="min-w-100px sorting_disabled" rowspan="1"  style="">Supplier</th>
                                                                                            <th class="min-w-100px sorting_disabled" rowspan="1"  style="">Quantity</th>
                                                                                            <th class="min-w-100px sorting_disabled"  rowspan="1"  style="">Tracking Status</th>
                                                                                            <th class="min-w-50px sorting_disabled"  rowspan="1"  style="">Allocation Status</th>
                                                                                        </tr>
                                                                                    </thead>
                                                                                    <tbody class="fw-bold text-gray-600">
                                                                                        <tr data-kt-table-widget-4="subtable_template" class="">
                                                                                            <td colspan="2">
                                                                                                <div  class="d-flex align-items-center gap-3">
                                                                                                    <a href="#" class="symbol symbol-50px bg-secondary bg-opacity-25 rounded ">
                                                                                                        <img src="https://ea.stagingstorm.com/media/product_images/main_images/4.jpg" data-kt-src-path="https://ea.stagingstorm.com/media/product_images/main_images/4.jpg" alt=""  data-kt-table-widget-4="template_image">
                                                                                                    </a>
                                                                                                    <div class="d-flex flex-column">
                                                                                                        <a href="#" class="text-gray-800 text-hover-primary fw-bold"   data-kt-table-widget-4="template_name">{{order_item.product.product_name}}-({{order_item.product.sku}})
                                                                                                          </a>                                                                                           
                                                                                                    </div>
                                                                                                </div>
                                                                                            </td>
                                                                                            <td class="text-start">
                                                                                                <div class=" fs-7 fw-bold"  data-kt-table-widget-4="template_cost">{% if order_item.serial_number != ' ' %} {{order_item.serial_number}} {% else %} - {% endif %}</div>
                                                                                            </td>
                                                                                            <td class="text-start">
                                                                                                <div class="fs-7 fw-bold"  data-kt-table-widget-4="template_cost">{% if order_item.supplier != None %}{{order_item.supplier}}{% else %} - {% endif %}</div>
                                                                                            </td>
                                                                                            <td class="text-start">
                                                                                                <div class="fs-7 fw-bold"
                                                                                                    data-kt-table-widget-4="template_qty">
                                                                                                   1</div>
                                                                                            </td>
                                                                                            <td class="text-start">
                                                                                                <div class="fs-7 fw-bold"  data-kt-table-widget-4="template_stock">
                                                                                                    <div class="badge  {% if order_item.tracking_status == 0 %} ordered {% endif %}  {% if order_item.tracking_status == 1 %} shipped {% endif %}  {% if order_item.tracking_status == 3 %} arrived {% endif %}  {% if order_item.tracking_status == 4 %} booked {% endif %} {% if order_item.tracking_status != 4 and order_item.tracking_status != 0 and order_item.tracking_status != 1 and order_item.tracking_status != 3 %} installed {% endif %}">
                                                                                                       {{order_item.get_tracking_status}}
                                                                                                    </div>
                                                                                                </div>
                                                                                            </td>
                                                                                             <td class="text-start">
                                                                                                <div class="fs-7 fw-bold"  data-kt-table-widget-4="template_stock">
                                                                                                    <div class="badge  {% if order_item.tracking_status == 0 %} ordered {% endif %}  {% if order_item.tracking_status == 1 %} shipped {% endif %}  {% if order_item.tracking_status == 3 %} arrived {% endif %}  {% if order_item.tracking_status == 4 %} booked {% endif %} {% if order_item.tracking_status != 4 and order_item.tracking_status != 0 and order_item.tracking_status != 1 and order_item.tracking_status != 3 %} installed {% endif %}">
                                                                                                        {{order_item.get_self_status}}
                                                                                                    </div>
                                                                                                    </div>
                                                                                                </td>
                                                                                            </tr>
                                                                                    </tbody>
                                                                                </table>
                                                                            </div>
                                                                            <div class="row">
                                                                                <div
                                                                                    class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start">
                                                                                </div>
                                                                                <div
                                                                                    class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                           
                                                            {% if order_item.supplier != None %}
                                                            <div class="card-header p-0">
                                                                <h3 class="card-title align-items-start flex-column">
                                                                    <span  class="card-label fw-bold text-gray-800">Payment Details </span>
                                                                    <span class="text-gray-500 mt-1 fw-semibold fs-6"></span>
                                                                </h3>
                                                            </div>
                                                            <div id="kt_activity_month_serial{{order_item.id}}" class="card-body p-0 tab-pane fade show active ex-b" role="tabpanel" aria-labelledby="kt_activity_month_tab">
                                                                <div class="cards p-0">
                                                                    <div class="card-body">
                                                                        <div class="d-flex flex-column flex-xl-row">
                                                                            <div class="flex-grow-1">
                                                                                <div class="table-responsive border-bottom mb-9">
                                                                                    <table class="table mb-3 tracking-table">
                                                                                        <thead>
                                                                                            <tr class="border-bottom fs-6 fw-bold text-muted">
                                                                                                <th class="min-w-50px sorting_disabled"> Bill ID</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Total Amount</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Paid</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Balance</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Due Date</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Last Payment Date</th>
                                                                                                {% if order_item.bill.attachment %}
                                                                                                <th class="min-w-50px sorting_disabled"> Supplier Invoice</th>
                                                                                                {% endif %}
                                                                                            </tr>
                                                                                        </thead>
                                                                                        <tbody>
                                                                                            <tr class="fw-bold text-gray-700 fs-5">
                                                                                                <td class="d-flex align-items-center pt-6"> <i class="fa fa-genderless text-danger fs-2 me-2"></i>{{ order_item.bill.id }} </td>
                                                                                                    <td class="pt-6 fw-bolder">${{ order_item.bill.total }}</td>
                                                                                                    <td class="pt-6 fw-bolder"> {% if order_item.bill.total_paid_amount %} ${{ order_item.bill.total_paid_amount }}{% else %}$0.00{% endif %}</td>
                                                                                                    <td class="pt-6 fw-bolder"> {% if order_item.bill.payable_amount %} ${{ order_item.bill.payable_amount  }}{% else %}$0.00{% endif %}</td>
                                                                                                    <td class="pt-6 fw-bolder"> {{ order_item.bill.due_date  }} </td>
                                                                                                    <td class="pt-6 fw-bolder"> 
                                                                                                    {% if order_item.bill.get_bill_payment_records %}
                                                                                                        {% for i_pay in order_item.bill.get_bill_payment_records %}
                                                                                                            {% if forloop.counter == 1 %}
                                                                                                                {{i_pay.pay_date}}
                                                                                                            {% endif %}
                                                                                                        {% endfor %}
                                                                                                    {% else %}
                                                                                                            -
                                                                                                    {% endif %}</td>
                                                                                                    {% if order_item.bill.attachment %}
                                                                                                    <td class="pt-6 fw-bolder"> <a href="/media/{{order_item.bill.attachment}}" target="_blank" title="View Supplier Invoice PDF" class="pdf-icon"> <i class="fa-solid fa-file-pdf"></i></a></td>
                                                                                                    {% endif %}
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                </div>
                                                                                <div class="d-flex justify-content-end"> </div>
                                                                                <div class="flex-lg-row-fluid me-xl-10 mb-10 mb-xl-0"> </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>                         
    </div>
  {% endfor %}
   {% for lead_note in lead_notes %}
   <div  id="myModalleadNote{{lead_note.id}}" class="modal fade myModal">
               <div class="modal-content">
                                    <div class="modal-header">
                                        <h2> &nbsp;
                                            <span class=" fw-bold badge py-3 px-4 fs-7       arrived  " style="margin-bottom:5px;">
                                                   Note Id: {{lead_note.id}}
                                            </span><br/>
                                            
                                        </h2>
                                         <span style="display:flex;">
                                        <div class="card-toolbar mr-3">
                                            <div class="d-flex flex-stack flex-wrap gap-4">
                                            
                                            </div>
                                        </div>
                                        <button id="closeModalBtn" style="margin-left:15px;"  data-id="{{lead_note.id}}" class="close">X</button>
                                        </span>
                                        
                                    </div>
                                    <div class="modal-body">
                                        <div class="orders-details mt-1">
                                           
                 <!--Note: {{lead_note.note}}<br>-->
                 <!-- Reminder Date: {{lead_note.reminder_date}}<br>-->
                 <!-- Is Scheduled Meeting: {% if lead_note.meeting_invitation == 1 %} Yes {% else %} No {% endif %}<br>-->
                 <!--  {% if lead_note.meeting_invitation == 1 %} {{lead_note.meet_link}} <br>{% endif %}-->
                   
                   <div class="row mb-3">
                       <div class="col-md-12">
                       <div class="d-flex align-items-center" style="color:#000 !important;">
                                                                    <i class="ki-outline ki-profile-circle fs-8 me-2 text-b" style="color:#000 !important; font-size: 21px !important;"></i> 
                                                                     <a href="#" class="text-gray-800 text-hover-primary text-b" style="color:#000 !important;">
                                                                        <span class="serialStatus-{{lead_note.id}} fs-6 mt-5" style="margin-left:12px; color:#000 !important;"> {% if lead_note.lead.company_name %}
                                                                            {{ lead_note.lead.company_name }}
                                                                        {% else %}
                                                                            {{ lead_note.lead.first_name}}   {{ lead_note.lead.last_name}}
                                                                        {% endif %}</span>
                                                                        </a> 
                                                                </div>
                   </div>
                   </div>
                  <div class="row">
                                                <div class="col-md-12">
                                                    <div class="cards p-0">
                                                        <div class="card-body ex-b">
                                                            <div id="kt_activity_today_serial14" class="card-body p-0 tab-pane fade show active" role="tabpanel" aria-labelledby="kt_activity_today_tab">
                                                                <div class="cards card-flush h-xl-100" data-select2-id="select2-data-124-p5cu">
                                                                    <div class="card-header p-0" data-select2-id="select2-data-123-flzv">
                                                                        <!--begin::Title-->
                                                                        <h3 class="card-title align-items-start flex-column">
                                                                            <span class="card-label fw-bold text-gray-800 text-b">Note</span>
                                                                            <span class="text-gray-500 mt-1 fw-semibold fs-6 text-b"></span>
                                                                        </h3>
                                                                        <div class="card-toolbar">
                                                                           
                                                                        </div>
                                                                    </div>
                                                                    <div class="card-body pt-2">
                                                                        <div class="p-3 pt-3">
                                                                            
                                                                           <span class="serialStatus-{{lead_note.id}}"> {{lead_note.note}}<br>
                                                                            
                                                                        </div>
                                                                    </div>
                                                                   
                                                                </div>
                                                            </div>
                                                           </div>
                                                    </div>
                                                </div>
                                                </div>
                                                
                                            <div class="row g-5">
                                                
                                                <div class="col-md-6">
                                                    <div class="card track-card cus-card card-flush flex-row-fluid position-relative"> 
                                                        <div class="card-header track-head">
                                                            <div class="card-title">
                                                                <div class="d-flex align-items-center">
                                                                    <i class="ki-outline ki-abstract-26 fs-1 me-2 text-b"></i>
                                                                     <a href="#" class="text-gray-800 text-hover-primary text-b">
                                                                        Reminder Details
                                                                        </a> 
                                                                </div>
                                                            </div>
                                                        </div> 
                                                        <div class="pt-0 cus-body">
                                                            <div class="table-responsive"> 
                                                                <table class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                        <tbody><tr>
                                                                            <td class="text-gray-800">
                                                                                 <div class="d-flex align-items-center">
                                                                                <i class="ki-outline ki-calendar fs-2 me-2 text-b"></i>
                                                                                <a href="#" class="text-gray-600 text-hover-primary text-b"> {{lead_note.reminder_date}}{% if lead_note.meeting_time %}, {{lead_note.meeting_time}}   {% endif %}</a>
                                                                            </div>
                                                                            </td>
                                                                        </tr>
                                                                        {% if lead_note.meeting_invitation == 1 %}
                                                                        <tr >
                                                                            <td class="text-gray-800">
                                                                                <div class="d-flex align-items-center text-b">
                                                                                    <i class="ki-outline ki-archive-tick fs-2 me-2 text-b"></i>Is Scheduled Meeting: {% if lead_note.meeting_invitation == 1 %} Yes {% else %} No {% endif %} 
                                                                                </div>
                                                                            </td>
                                                                        </tr> 
                                                                        {% endif %}
                                                                </tbody></table> 
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                {% if lead_note.meeting_invitation == 1 %}
                                                <div class="col-md-6">
                                                    <div class="card track-card bill-card card-flush mb-5 order-card position-relative">
                                                        <div class="card-header track-head">
                                                            <div class="card-title">
                                                                <div class="d-flex align-items-center"><i class="ki-outline ki-document fs-1 me-2 text-b"></i>
                                                                     <a href="#" class="text-gray-800 text-hover-primary text-b">Meeting Details</a> 
                                                                </div>
                                                            </div>
                                                        </div> 
                                                        <div class="pt-0 cus-body">
                                                            <div class="table-responsive"> 
                                                                <table class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                    <tbody><tr>
                                                                        <td class="text-gray-800">
                                                                            <div class="d-flex align-items-center">
                                                                                <i class="ki-outline ki-calendar fs-2 me-2 text-b"></i>
                                                                                <a href="#" class="text-gray-600 text-hover-primary text-b"> {{lead_note.reminder_date}}, {{lead_note.meeting_time}} </a>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="text-gray-800">
                                                                            <div class="d-flex align-items-center">
                                                                                <i class="ki-outline ki-time fs-2 me-2 text-b"></i>
                                                                                <a href="#" class="text-gray-600 text-hover-primary text-b"> {{lead_note.meeting_time}} </a>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="text-gray-800">
                                                                            <div class="d-flex align-items-center">
                                                                                <i class="ki-outline ki-fasten fs-2 me-2 text-b"></i>
                                                                                <a href="{{lead_note.meet_link}}" class="text-gray-600 text-hover-primary text-b"> Join Meeting </a>
                                                                                    {% if lead_note.mail_status == 0 %}
                                                                                        <a href="{%url 'leads:send_lead_note_email' lead_note.lead.id lead_note.id  %}" class="note-email" title="Send Meeting Invitationn"><i class="fa-solid fa-paper-plane"></i></a>
                                                                                    {% elif lead_note.mail_status != 0  %}
                                                                                        <i class="fa-solid fa-envelope-circle-check" title="Already Sent Meeting Link" > </i>
                                                                                    {% endif %}
                                                                               
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                </tbody></table> 
                                                            </div>
                                                        </div>                                
                                                    </div>
                                                </div>
                                                {% endif %}
                                                </div>
                                        </div>
                                    </div>
                                </div>
    </div>
    {% endfor %}