{% for order_item in order_items %}
                
                    {% if not order_item.serial_number.id %}
                        <span id="replace_modal_serial_number_{{order_item.id}}">
                            <div id="myModal_serial_number_{{order_item.id}}" class="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.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 id="closeModalBtn" onclick="closeModal('{{order_item.id}}','serial_number')">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>
                        </span>
                    {% else %}
                        <span id="replace_modal_order_{{order_item.id}}">
                            <div id="myModal_order_{{order_item.id}}" class="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.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_product != 1 %} Install {% else %} Pickup {% endif %} {% endif %} 
                                            </span>
                                        </h2>
                                        <span style="display:flex;">
                                        {% if order_item.product.is_product != 1 %}
                                        <div class="card-toolbar mr-3">
                                            <div class="d-flex flex-stack flex-wrap gap-4">
                                             <form method="POST" action="{% if order_item.status != 4 %} {% url 'quotation:update_order_status' %} {% else %} {% url 'quotation:cancel_job' %} {% endif %}" class="d-flex align-items-center">
                                                {% csrf_token %}
                                                {% if order_item.status != 4 %}
                                             <select name="status" id="status" aria-label="Status" data-control="select2" data-placeholder="Status"  class="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> 
                                             {% endif %}
                                             <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">{% if order_item.status != 4 %} Update {% else %} Cancel Job {% endif %}</button>
                                            </form>
                                            </div>
                                        </div>
                                        {% endif %}
                                        <button id="closeModalBtn" style="margin-left:15px;" onclick="closeModal('{{order_item.id}}','order')">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_product != 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-50px sorting_disabled"> Technician</th>
                                                                                                <th class="min-w-50px sorting_disabled"> {% if order_item.product.is_product != 1 %}Installation Start Date{% else %}Pickup Start Date{% endif %}</th>
                                                                                                <th class="min-w-50px sorting_disabled"> {% if order_item.product.is_product != 1 %}Installation Time{% else %}Pickup Time{% endif %}</th>
                                                                                                <th class="min-w-50px sorting_disabled"> {% if order_item.product.is_product != 1 %}Installation 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" 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">
                                                                                                    <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.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_product != 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_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>
                        </span>
                    {% endif %}
                {% endfor %}