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

{% load i18n %}

{% block title %}{% translate "Tracking Status" %}{% endblock %}

{% block breadcumbheading %}
{% translate "Tracking Status" %}
{% endblock %}
{% block breadcumbfirst %}

<a href="{% url 'tracking_order_status' %}" class="text-muted text-hover-primary"
    style="text-transform: capitalize;">Tracking Status </a>

{% endblock %}
{% block breadcumbaddmore %}
<!--begin::Item-->
<li class="breadcrumb-item">
    <span class="bullet bg-gray-400 w-5px h-2px"></span>
</li>
<!--end::Item-->
<!--begin::Item-->
<li class="breadcrumb-item text-muted" style="text-transform: capitalize;">Tracking Status</li>
<!--end::Item-->
{% endblock %}

{% block content %}
<style>
    #board {
        display: flex;
        /*padding: 20px;*/
        gap: 20px;
    }
    .min-w-200px .date-s{
        width: fit-content;
    padding: 6px 6px;
    line-height: 11px;
    font-size: 11px !important;
    border-radius: 5px;
    background: #ededed;
    color: #4c4949 !important;
    }
    .arrived{
        background: #50cd89;
        border-radius: 8px;
    }
    .installed{
        background: #f5c71a36;
        border-radius: 8px;
    }
    .ordered{
        background: #f5c71a36;
        border-radius: 8px;
    }
    .shipped{
        background: #3e97ff;
        border-radius: 8px;
    }
    .booked
    {
        background: #7239ea;
        border-radius: 8px;
    }
    .list {
        /* background-color: #e2e4e6;*/
        /*border-radius: 8px;*/
        /*padding: 15px 12px;*/
        min-width: 24%;
        padding-bottom: 8px;
    }

    #list0 {
        background: #f5c71a36;
        border-radius: 8px;
    }

    #list1 {
        background: #3e97ff26;
        border-radius: 8px;
    }

    div.watered {
        background: #ffa5002e;
    }

    #list3 {
        background: #00800014;
        border-radius: 8px;
    }

    #list4 {
        background: #3e008014;
        border-radius: 8px;
    }

    .list-title {
        font-size: 15px;
        margin-bottom: 20px;
        padding: 14px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    #board .card-title {
        margin-bottom: 0px;
    }

    #board .list .card {
        margin-bottom: 10px;
        margin-right: 10px;
        margin-left: 10px;
    }
#board .list .card .card-title .card-inner {
    padding-left:10px;
    padding-right:10px;
   
}
    #list0 .list-title {
        background: #ffe586;
    }

    #list1 .list-title {
        background: #3e97ff26;
    }

    #list3 .list-title {
        background: #77ad7729;
    }

    #list4 .list-title {
        background: #643c8c2e;
    }

    .timeline .timeline-icon {
        z-index: 1;
        background: #fff;
        padding: 4px;
        flex-shrink: 0;
        margin-right: 1rem;
        width: var(--bs-timeline-icon-size);
        height: var(--bs-timeline-icon-size);
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        border: 1px solid #0000007d;
        border-radius: 50%;
        border-style: dashed !important;
    }

    .card {
        background-color: #fff;
        border-radius: 8px;
        margin-bottom: 10px;
        cursor: pointer;
        transition: background-color 0.3s;
        position: relative;
    }

    /*.list-wrap{*/

    /*border-radius: 8px;*/
    /*padding: 0px 0px 5px;*/
    /*}*/

    .card:hover {
        background-color: #f9f9f9;
    }
.card.ind-card{
    padding-bottom:0px;
}
    .card-content {
        display: none;
        margin-top: 10px;
    }

    .card-content p {
        margin: 0;
    }

    .modal {
        display: none;
        position: fixed;
        padding: 25px;
        top: 0;
        left: 0;
        background: #0000008c;
        width: 100%;
        max-width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }

    .modal-content {
        background-color: #fff;
        /*padding: 20px;*/
        width: 60%;
        border-radius: 5px;
        height:calc(100vh - 55px);
        overflow-y:auto;
    }
    
    .modal.fades .modal-content{
        height:auto;
        width:100%;
    }

    .modal-header {
        border-bottom: 1px dashed #2221213d;
        padding: 15px 15px;
    }

    .modal-header h2 {
        margin-bottom: 0px;
        font-size: 16px;
        color: #4c4949;
    }

    .modal-header,
    .modal-footer {
        /*text-align: center;*/

        /*background-color: #f0f0f0;*/
    }

    .orders-details .table.table-borderless tr,
    .orders-details .table.table-borderless tr:last-child {
        border-bottom: 1px dashed #2221213d !important;
    }

    .kt_activity_comments {
        border-radius: 8px;
        background: #77ad7717;
        padding: 20px 14px !important;
    }

    #board thead tr {
        border-top: 1px dashed #2221213d !important;
    }

    #closeModalBtn {
        background: transparent;
        border: 0px solid #cccc;
        font-size: 16px;
        color: #4c4949;
    }

    .timeline .timeline-line {
        left: 12px;
        border-left-color: #0000007d;
    }

    .cards .card-body {
        padding: 0px;
    }

    .timeline-icon i {
        color: #000000ab !important;
    }

    .orders-details .order-card {
        background: #ff88001c;
    }

    .orders-details .card .text-muted,
    .orders-details .card .text-muted i {
        color: #4c4949 !important;
    }

    .cards {
        padding: 10px;
    }

    .orders-details .card {
        padding: 15px;
    }

    .orders-details .card-header,
    .orders-details .card-body {
        padding: 0px;
    }

    .orders-details .card-title h2 {
        color: #4c4949 !important;
    }

    section {
        max-width: 800px;
        margin: 20px auto;
        background-color: #fff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .order-details {
        display: flex;
        justify-content: space-between;
    }

    .customer-details,
    .product-details {
        width: 48%;
    }

    .customer-details {
        background-color: #e0f7fa;
        padding: 10px;
        border-radius: 5px;
    }

    .product-details {
        background-color: #e8f5e9;
        padding: 10px;
        border-radius: 5px;
    }

    .status-ordered {
        background: #f5c71a36;
        color: #c59b00 !important;
        text-transform: uppercase;
        font-size: 11px !important;
        letter-spacing: 0.2px;
    }

    #list1 .bg-warning {

        background-color: #007bff8f !important;
    }

    #list0 .bg-warning {
        background-color: #ffc700 !important;
    }

    #list3 .bg-warning {
        background-color: #9ec89e !important;
    }

    #list4 .bg-warning {
        background-color: #b898d7 !important;
    }

    .cal2 .list-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .cal2 .list-title-text {
        font-size: 15px;
        color: #4c4949;
        margin-bottom: 0px;
    }

    .cal2 .list-title i {
        color: #4c4949;
        font-size: 30px;
    }

    h2 {
        color: #333;
    }

    .card.ind-card table td {
        border-bottom: 0px;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
    }

    th,
    td {
        padding: 10px;
        border-bottom: 1px solid #ddd;
    }

    .orders-details .table.table-borderless tr.sub-t {
        border-bottom: 0px !important;
    }

    th {
        background-color: #f2f2f2;
    }

    .heading1 {
        font-size: 16px;
        color: #1A237E
    }

    .days {
        font-size: 15px;
        color: #9FA8DA
    }

    th {
        font-size: 14px;
        color: #D50000
    }

    tr {
        font-size: 13px
    }

    .solditems {
        font-size: 13px;
        color: #9FA8DA
    }

    .balance {
        font-size: 45px;
        color: green
    }

.card.ind-card a.text-muted {
    color: #4c4949 !important;
}
.card.ind-card .inv-id.text-muted {
    color: #4c4949 !important;
}
.card.ind-card .ind-card-footer .inv-id {
    display: inline-block;
}
.card.ind-card .ind-card-footer {
    padding: 5px 10px;
    background: #f6f6f6;
}
.card.ind-card .ind-card-footer .symbol.symbol-25px .symbol-label{
    text-transform:uppercase;
}
.card.ind-card .ind-card-footer .symbol.symbol-circle{
    position: absolute;
    right: 8px;
    bottom: 11px;
}
.card.ind-card .ind-card-footer .text-muted{
    font-size:11px !important;
}
td.min-w-200px{
    padding:0px;
}
td.min-w-100px{
    padding:0px;
}
    .account {
        margin-bottom: 36px !important;
        font-size: 16px;
        color: #1A237E
    }

    .transaction {
        font-size: 13px
    }

    .progress {
        height: 3px !important
    }

    .money {
        color: #9FA8DA
    }

    .goal {
        font-size: 17px;
        color: #D50000;
        font-weight: 400
    }

    .revenue {
        font-size: 14px;
        color: #311B92;
        font-weight: 500
    }

    .orders {
        font-size: 14px;
        color: #311B92;
        font-weight: 500
    }

    .customer {
        font-size: 14px;
        color: #311B92;
        font-weight: 500
    }

    .comment-area {
        max-height: 200px;
        overflow-y: auto;
    }

    .comment {
        margin-bottom: 10px;
    }

    .symbol.symbol-50px>img {
        width: 70px;

        height: max-content;
    }

    .comment small {
        color: #888;
    }
</style>
<div class="custom mt-3 create-cust cal2">
    <div class="d-flex flex-column flex-lg-row-fluid gap-7 gap-lg-10" data-select2-id="select2-data-129-yayj">
        <div class="card card-flush py-4">
            <div class="card-header">
                <div class="card-title">
                    <h3></h3>
                </div>
                {% if messages %}
                <div class="d-flex justify-content-center align-items-center">
                    {% for message in messages %}
                      <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}success{% endif %}" role="alert" style="width: 300px;">
                        {{ message }}
                        </div>  
                    {% endfor %}
                 </div>
                {% endif %}
                <div class="card-toolbar w-100">
                    <div class="my-1 me-4" data-select2-id="select2-data-137-jnyq">
                        <!--begin::Select-->
                        <select class="form-select form-select-sm form-select-solid w-125px select2-hidden-accessible"
                            data-control="select2" data-placeholder="Select Hours" data-hide-search="true"
                            data-select2-id="select2-data-10-zgsa" tabindex="-1" aria-hidden="true"
                            data-kt-initialized="1">
                            <option value="1" data-select2-id="select2-data-139-tfjz">Today</option>
                            <option value="2" data-select2-id="select2-data-140-04xl">Last 7 Days</option>
                            <option value="3" selected="" data-select2-id="select2-data-12-hsda">Last 2 weeks</option>
                            <option value="4" data-select2-id="select2-data-141-zh54">This month</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <form action="/order/tracking-order-status/search" method="get">
                               {% csrf_token %}
                        <div class="row w-100 align-items-center">
                            <div class="col-lg-2">
                               <select name="product_id" aria-label="Product List" data-control="select2" data-placeholder="Product List" class="form-select form-select-lg fw-semibold">
    								<option value="">Product List</option>
    								 {% for product in products %} 
                                        <option value="{{product.id}}" {% if request.GET.product_id|slugify == product.id|slugify %} selected {% endif %} >{{product.product_name}}({{product.sku}})</option>
                                     {% endfor %} 
    							</select>
                            </div>
                            <div class="col-lg-3">
                               <select name="customer_id" aria-label="Customer List" data-control="select2" data-placeholder="Customer List" class="form-select form-select-lg fw-semibold">
    								<option value="">Customer List</option>
                                    {% for customer in customers %} 
                                        <option value="{{customer.id}}"   {% if request.GET.customer_id|slugify == customer.id|slugify %} selected {% endif %}>{% if customer.is_individual %} {{customer.first_name}} {{customer.last_name}} {% else %} {{customer.company_name}}{% endif %}</option>
                                     {% endfor %}
    							</select>
                            </div>
                            <div class="col-lg-3">
                               <select name="supplier_id" aria-label="Supplier List" data-control="select2" data-placeholder="Supplier List" class="form-select  form-select-lg fw-semibold">
    								<option value="">Supplier List</option>
                                    {% for supplier in suppliers %} 

                                        <option value="{{supplier.id}}"  {% if request.GET.supplier_id|slugify == supplier.id|slugify %} selected {% endif %}>{% if supplier.is_individual %} {{supplier.first_name}} {{supplier.last_name}}({{ supplier.supplier_code }}) {% else %} {{supplier.company_name}}({{ supplier.supplier_code }}){% endif %}</option>

                                     {% endfor %}
    							</select>
                            </div>
                            <div class="col-lg-2">
                                <input type="number" name="orderno" value="{{request.GET.orderno}}" class="form-control form-control-lg  m-0" placeholder="Order/Bill Number">
                            </div>
                            <!--<div class="col-lg-2">-->
                            <!--    <input type="number" name="billno"  value="{{request.GET.billno}}"  class="form-control form-control-lg m-0" placeholder="Bill No.">-->
                            <!--</div>-->
                            <div class="col-lg-2">
                                <button type="submit" class="w-100px btn btn-primary" id="kt_account_profile_details_submit">Search</button>
                               <button type="reset" class="w-100px btn btn-primary me-2"> <a href="/order/tracking-order-status/">Reset</a></button>
                            </div>
                        </div>
                    </form>
                </div>
                <br>
                <div id="board">
                    <div class="list" id="list0" data-status="0" ondrop="handleDrop(event)" ondragover="allowDrop(event)">
                        <div class="list-title">
                            <h2 class="list-title-text">Ordered</h2>
                            <i class="ki-duotone ki-parcel">
                                <span class="path1"></span>
                                <span class="path2"></span>
                                <span class="path3"></span>
                                <span class="path4"></span>
                                <span class="path5"></span>
                            </i>
                        </div>
                        {% for order_item in order_items %}   
                            {% if not order_item.serial_number.id %}
                                {% if order_item.tracking_status == 0 %}

                                    <div class="card ind-card"  draggable="true" ondragstart="handleDragStart(event)" is_pickup="0" data-supplier-name="{{ order_item.bill.supplier }}" data-customer-name="{{ order_item.order.invoice.customer }}"  data-order-item-id="{{ order_item.id }}"  data-type="serial_number"   data-bill-item-id="{{order_item.bill.id }}" data-order-identifier="{{ order_item.order_identifier }}"  data-bill-identifier="{{ order_item.bill_identifier }}"       data-order-status="{{ order_item.status }}" data-bill-status="{{ order_item.tracking_status }}" >

                                        <div class="card-title modal-trigger"  onclick="openModal('{{order_item.id}}','serial_number')">
                                            <div class="card-inner">
                                            <table>
                                                <tr class="even">
                                                    <td class="min-w-200px">
                                                        <div class="position-relative pe-3 pb-2">
                                                             <div class="fs-7 text-muted fw-bold date-s mb-3">{{ order_item.updated_at|date:"d b Y" }}</div>
                                                            <a href="#" class="mb-1 text-gray-900 text-hover-primary fw-bold"> {{order_item.product}}-{{order_item.product.sku}}</a><br>
                                                        </div>
                                                    </td>
                                                    <td class="min-w-100px">
                                                       <!--<span class="serialStatus-{{order_item.get_status_display}}">{{order_item.get_status_display}}</span>-->
                                                        
                                                        <div class="fs-8 fw-bold text-muted">{{ order_item.bill.supplier.supplier_code}}{% if order_item.bill.invoice_number %}{% endif %}</div>
                                                    </td>
                                                </tr>
                                            </table>
                                            </div>
                                            <div class="ind-card-footer">
                                                <a href="#" class="mb-1 fs-7 text-muted fw-bold"> BILL ID: {{ order_item.bill.id }}</a> <div class="mb-1 fs-7 text-muted fw-bold inv-id"> | INV ID: {{ order_item.bill.invoice_number }}</div>
                                                    <div class="symbol symbol-circle symbol-25px mb-1">
                                                            
                                                            <div class="symbol-label bg-danger">
                                                                <span class="fs-8 text-inverse-danger">
                                                                {% if order_item.bill.supplier.company_name %}
                                                                    {{ order_item.bill.supplier.company_name|slice:":1" }}
                                                                {% else %}
                                                                    {{ order_item.bill.supplier.first_name|slice:":1" }}
                                                                {% endif %}
                                                                </span>
                                                            </div>
                                                        </div>
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}
                            {% else %}
                                {% if order_item.status == 0 %}
                                    <div class="card ind-card"  draggable="true" ondragstart="handleDragStart(event)" is_pickup="0" data-customer-name="{{ order_item.order.invoice.customer }}"  data-order-item-id="{{ order_item.id }}" data-type="order"    data-bill-item-id="{{order_item.serial_number.bill.id }}" data-order-identifier="{{ order_item.order_identifier }}"  data-bill-identifier="{{ order_item.bill_identifier }}"       data-order-status="{{ order_item.status }}" data-bill-status="{{ order_item.tracking_status }}" >
                                        <div class="card-title modal-trigger"  onclick="openModal('{{order_item.id}}','order')">
                                           <div class="card-inner">
                                           <table>
                                        <tr class="even">
                                            <td class="min-w-200px">
                                                <div class="position-relative pe-3 py-2">
                                                    <div class="fs-7 text-muted fw-bold date-s mb-3">{{ order_item.updated_at|date:"d b Y" }}</div>
                                                    <a href="#" class="mb-1 text-gray-900 text-hover-primary fw-bold">{{order_item.product}}-{{order_item.product.sku}}</a><br>
                                                    
                                                </div>
                                            </td>
                                            <td class="min-w-100px">
                                               
                                                <div class="fs-8 fw-bold text-muted">{{ order_item.order.invoice.customer }}</div>
                                                
                                            </td>
                                        </tr>
                                    </table>
                                    </div>
                                    <div class="ind-card-footer">
                                                <a href="#" class="mb-1 fs-7 text-muted fw-bold">  ORDER ID: {{ order_item.order.id }}</a> <div class="mb-1 fs-7 text-muted fw-bold inv-id"> | {% if order_item.order.invoice.id %}INV ID: {{ order_item.order.invoice.id }}{% endif %}</div>
                                                <div class="symbol symbol-circle symbol-25px mb-1">
                                                    <div class="symbol-label bg-danger">
                                                        <span class="fs-8 text-inverse-danger">{% if order_item.order.invoice.customer.company_name %}
                                                            {{ order_item.order.invoice.customer.company_name|slice:":1" }}
                                                        {% else %}
                                                            {{ order_item.order.invoice.customer.first_name|slice:":1" }}
                                                        {% endif %}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}
                            {% endif %}
                        {% endfor %}
                    </div>

                    <div class="list" id="list1" data-status="1" ondrop="handleDrop(event)" ondragover="allowDrop(event)">
                        <div class="list-title">
                            <h2 class="list-title-text">Shipped</h2>
                            <i class="ki-duotone ki-delivery">
                                <span class="path1"></span>
                                <span class="path2"></span>
                                <span class="path3"></span>
                                <span class="path4"></span>
                                <span class="path5"></span>
                            </i>
                        </div>
                           {% for order_item in order_items %}   
                           {% if not order_item.serial_number.id %}
                                {% if order_item.tracking_status == 1 %}
                                    <div class="card ind-card"  draggable="true" ondragstart="handleDragStart(event)" is_pickup="0" data-customer-name="{{ order_item.order.invoice.customer }}"  data-order-item-id="{{ order_item.id }}"  data-type="serial_number"   data-bill-item-id="{{order_item.bill.id }}" data-order-identifier="{{ order_item.order_identifier }}"  data-bill-identifier="{{ order_item.bill_identifier }}"       data-order-status="{{ order_item.status }}" data-bill-status="{{ order_item.tracking_status }}" >
                                        <div class="card-title modal-trigger"  onclick="openModal('{{order_item.id}}','serial_number')">
                                           <div class="card-inner">
                                           <table>
                                                <tr class="even">
                                                    <td class="min-w-200px">
                                                        <div class="position-relative pe-3 py-2">
                                                            <div class="fs-7 text-muted fw-bold date-s mb-3">{{ order_item.updated_at|date:"d b Y" }}</div>
                                                             <a href="#" class="mb-1 text-gray-900 text-hover-primary fw-bold"> Bill ID: {{ order_item.bill.id }}({{order_item.product}}-{{order_item.product.sku}})</a><br>
                                                             <a href="#" class="mb-1 text-gray-900 text-hover-primary fw-bold"> ETA: </a>{{ order_item.Arrival_ETA_date|date:"d b Y" }}<br>
                                                           
                                                        </div>
                                                    </td>
                                                    <td class="min-w-100px">
                                                       <!--<span class="serialStatus-{{order_item.get_status_display}}">{{order_item.get_status_display}}</span>-->
                                                        
                                                        <div class="fs-8 fw-bold text-muted">{{ order_item.bill.supplier.supplier_code}}</div>
                                                    </td>
                                                </tr>
                                            </table>
                                            </div>
                                            <div class="ind-card-footer">
                                                <div class="mb-1 fs-7 text-muted fw-bold inv-id">{% if order_item.bill.invoice_number %}INV ID: {{ order_item.bill.invoice_number }}{% endif %}</div>
                                                <div class="symbol symbol-circle symbol-25px mb-1">
                                                            
                                                            <div class="symbol-label bg-danger">
                                                                <span class="fs-8 text-inverse-danger">
                                                                {% if order_item.bill.supplier.company_name %}
                                                                    {{ order_item.bill.supplier.company_name|slice:":1" }}
                                                                {% else %}
                                                                    {{ order_item.bill.supplier.first_name|slice:":1" }}
                                                                {% endif %}
                                                                </span>
                                                            </div>
                                                        </div>
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}
                            {% else %}
                                {% if order_item.status == 1 %}
                                    <div class="card ind-card"  draggable="true" ondragstart="handleDragStart(event)" is_pickup="0" data-customer-name="{{ order_item.order.invoice.customer }}"  data-order-item-id="{{ order_item.id }}" data-type="order"    data-bill-item-id="{{order_item.serial_number.bill.id }}" data-order-identifier="{{ order_item.order_identifier }}"  data-bill-identifier="{{ order_item.bill_identifier }}"       data-order-status="{{ order_item.status }}" data-bill-status="{{ order_item.tracking_status }}" >
                                        <div class="card-title modal-trigger"  onclick="openModal('{{order_item.id}}','order')">
                                           <div class="card-inner">
                                           <table>
                                        <tr class="even">
                                            <td class="min-w-200px">
                                                <div class="position-relative pe-3 py-2">
                                                    <div class="fs-7 text-muted fw-bold date-s mb-3">{{ order_item.updated_at|date:"d b Y" }}</div>
                                                   <a href="#" class="mb-1 text-gray-900 text-hover-primary fw-bold">{{order_item.product}}-{{order_item.product.sku}}</a>
                                                </div>
                                            </td>
                                            <td class="min-w-100px">
                                                
                                                <div class="fs-8 fw-bold text-muted">{{ order_item.order.invoice.customer }}</div>
                                                
                                            </td>
                                        </tr>
                                    </table>
                                    </div>
                                    <div class="ind-card-footer">
                                                <a href="#" class="mb-1 fs-7 text-muted fw-bold">ORDER ID: {{ order_item.order.id }}</a> <div class="mb-1 fs-7 text-muted fw-bold inv-id"> | {% if order_item.order.invoice.id %}INV ID: {{ order_item.order.invoice.id }}{% endif %}</div>
                                                <div class="symbol symbol-circle symbol-25px mb-1">
                                                    <div class="symbol-label bg-danger">
                                                        <span class="fs-8 text-inverse-danger">{% if order_item.order.invoice.customer.company_name %}
                                                            {{ order_item.order.invoice.customer.company_name|slice:":1" }}
                                                        {% else %}
                                                            {{ order_item.order.invoice.customer.first_name|slice:":1" }}
                                                        {% endif %}</span>
                                                    </div>
                                                </div>
                                    </div>
                                    </div>
                                    </div>
                                {% endif %}
                            {% endif %}
                        {% endfor %}
                    </div>
                    
                    <div class="list" id="list3" data-status="3" ondrop="handleDrop(event)" ondragover="allowDrop(event)">
                        <div class="list-title">
                            <h2 class="list-title-text">Arrived</h2>
                            <i class="ki-duotone ki-delivery-door">
                                <span class="path1"></span>
                                <span class="path2"></span>
                                <span class="path3"></span>
                                <span class="path4"></span>
                            </i>
                        </div>
                        {% for order_item in order_items %}   
                            {% if not order_item.serial_number.id %}
                                {% if order_item.tracking_status == 3 %}
                                    <div class="card ind-card"  draggable="true" ondragstart="handleDragStart(event)" is_pickup="0" data-customer-name="{{ order_item.order.invoice.customer }}"  data-order-item-id="{{ order_item.id }}"  data-type="serial_number"   data-bill-item-id="{{order_item.bill.id }}" data-order-identifier="{{ order_item.order_identifier }}"  data-bill-identifier="{{ order_item.bill_identifier }}"       data-order-status="{{ order_item.status }}" data-bill-status="{{ order_item.tracking_status }}" >
                                        <div class="card-title modal-trigger"  onclick="openModal('{{order_item.id}}','serial_number')">
                                           <div class="card-inner">
                                           <table>
                                                <tr class="even">
                                                    <td class="min-w-200px">
                                                        <div class="position-relative pe-3 py-2">
                                                            <div class="fs-7 text-muted fw-bold date-s mb-3">{{ order_item.updated_at|date:"d b Y" }}</div>
                                                            <a href="#" class="mb-1 text-gray-900 text-hover-primary fw-bold">{{order_item.product}}-{{order_item.product.sku}}</a>
                                                        </div>
                                                    </td>
                                                    <td class="min-w-100px">
                                                       <!--<span class="serialStatus-{{order_item.get_status_display}}">{{order_item.get_status_display}}</span>-->
                                                        
                                                        <div class="fs-8 fw-bold text-muted">{{ order_item.bill.supplier.supplier_code}}</div>
                                                    </td>
                                                </tr>
                                            </table>
                                            </div>
                                            <div class="ind-card-footer">
                                                <a href="#" class="mb-1 fs-7 text-muted fw-bold">BILL ID: {{ order_item.bill.id }}</a> <div class="mb-1 fs-7 text-muted fw-bold inv-id"> | {% if order_item.bill.invoice_number %}( Inv ID: {{ order_item.bill.invoice_number }} ){% endif %}</div>
                                                <div class="symbol symbol-circle symbol-25px mb-1">
                                                            
                                                            <div class="symbol-label bg-danger">
                                                                <span class="fs-8 text-inverse-danger">
                                                                {% if order_item.bill.supplier.company_name %}
                                                                    {{ order_item.bill.supplier.company_name|slice:":1" }}
                                                                {% else %}
                                                                    {{ order_item.bill.supplier.first_name|slice:":1" }}
                                                                {% endif %}
                                                                </span>
                                                            </div>
                                                        </div>
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}
                            {% else %}
                                {% if order_item.status == 3 %}
                                    <div class="card ind-card"  draggable="true" ondragstart="handleDragStart(event)" is_pickup="0" data-customer-name="{{ order_item.order.invoice.customer }}"  data-order-item-id="{{ order_item.id }}"  data-type="order"   data-bill-item-id="{{order_item.serial_number.bill.id }}" data-order-identifier="{{ order_item.order_identifier }}"  data-bill-identifier="{{ order_item.bill_identifier }}"       data-order-status="{{ order_item.status }}" data-bill-status="{{ order_item.tracking_status }}" >
                                    <div class="card-title modal-trigger"  onclick="openModal('{{order_item.id}}','order')">
                                    <div class="card-inner">
                                    <table>
                                        <tr class="even">
                                            <td class="min-w-200px">
                                                <div class="position-relative pe-3 py-2">
                                                    <div class="fs-7 text-muted fw-bold date-s mb-3">{{ order_item.updated_at|date:"d b Y" }}</div>
                                                    <a href="#" class="mb-1 text-gray-900 text-hover-primary fw-bold">{{order_item.product}}-{{order_item.product.sku}}</a><br>
                                                    
                                                </div>
                                            </td>
                                            <td class="min-w-100px">
                                                
                                                <div class="fs-8 fw-bold text-muted">{{ order_item.order.invoice.customer }}</div>
                                                
                                            </td>
                                        </tr>
                                    </table>
                                    </div>
                                    <div class="ind-card-footer">
                                        <a href="#" class="mb-1 fs-7 text-muted fw-bold">ORDER ID: {{ order_item.order.id }} </a> <div class="mb-1 fs-7 text-muted fw-bold inv-id"> | {% if order_item.order.invoice.id %} INV ID: {{ order_item.order.invoice.id }} {% endif %}</div>
                                        <div class="symbol symbol-circle symbol-25px mb-1">
                                                    <div class="symbol-label bg-danger">
                                                        <span class="fs-8 text-inverse-danger">{% if order_item.order.invoice.customer.company_name %}
                                                            {{ order_item.order.invoice.customer.company_name|slice:":1" }}
                                                        {% else %}
                                                            {{ order_item.order.invoice.customer.first_name|slice:":1" }}
                                                        {% endif %}</span>
                                                    </div>
                                                </div>
                                    </div>
                                    </div>
                                    </div>
                                {% endif %}
                            {% endif %}
                        {% endfor %}
                    </div>

                    <div class="list" id="list4"   data-status="4" ondrop="handleDrop(event)" ondragover="allowDrop(event)">
                        <div class="list-title">
                            <h2 class="list-title-text">Book for Install/Pickup</h2>
                            <i class="ki-duotone ki-setting-2">
                                <span class="path1"></span>
                                <span class="path2"></span>
                            </i>
                        </div>
                        {% for order_item in order_items %}   
                                
                                {% if order_item.status == 4 and order_item.product.is_product == 0  %}
                                    <div class="card ind-card"  draggable="true" ondragstart="handleDragStart(event)" data-customer-name="{{ order_item.order.invoice.customer }}" is_pickup="0"  data-order-item-id="{{ order_item.id }}"  data-type="order"   data-bill-item-id="{{order_item.serial_number.bill.id }}" data-order-identifier="{{ order_item.order_identifier }}"  data-bill-identifier="{{ order_item.bill_identifier }}"       data-order-status="{{ order_item.status }}" data-bill-status="{{ order_item.tracking_status }}" >
                                        <div class="card-title modal-trigger"  onclick="openModal('{{order_item.id}}','order')">
                                            <div class="card-inner">
                                            <table>
                                                <tr class="even">
                                                    <td class="min-w-200px">
                                                        <div class="position-relative pe-3 py-2">
                                                            <div class="fs-7 text-muted fw-bold date-s mb-3">{{ order_item.updated_at|date:"d b Y" }}</div>
                                                            <a href="#" class="mb-1 text-gray-900 text-hover-primary fw-bold">  {{order_item.product}}-{{order_item.product.sku}}</a>
                                                            <div class="fs-7 text-muted fw-bold">  <a href="#" class="mb-1 text-gray-900 text-hover-primary fw-bold"></a> test test<br>
                                                             <a href="#" class="mb-1 text-gray-900 text-hover-primary fw-bold">Scheduled:</a>{% if order_item.installation_date %}{{order_item.installation_date|date:"d-m-Y"}}{% else %} - {% endif %}  {% if order_item.installation_date %}{{order_item.installation_time}}{% else %} - {% endif %}</div>
                                                             
                                                        </div>
                                                    </td>
                                                    <td class="min-w-100px">
                                                          <div class="fs-8 fw-bold text-muted">{{ order_item.order.invoice.customer }}</div>
                                                    </td>
                                                </tr>
                                            </table>
                                            </div>
                                            <div class="ind-card-footer">
                                                <a href="#" class="mb-1 fs-7 text-muted fw-bold">ORDER ID: {{order_item}}{{ order_item.order.id }}</a> <div class="mb-1 fs-7 text-muted fw-bold inv-id"> | {% if order_item.order.invoice.id %} INV ID: {{ order_item.order.invoice.id }} {% endif %}</div>
                                                <div class="symbol symbol-circle symbol-25px mb-1">
                                                            <div class="symbol-label bg-danger">
                                                                <span class="fs-8 text-inverse-danger">{% if order_item.order.invoice.customer.company_name %}
                                                                    {{ order_item.order.invoice.customer.company_name|slice:":1" }}
                                                                {% else %}
                                                                    {{ order_item.order.invoice.customer.first_name|slice:":1" }}
                                                                {% endif %}</span>
                                                            </div>
                                                        </div>
                                            </div>               
                                        </div>
                                    </div>
                                {% endif %}
                                 {% if order_item.order and order_item.product.is_product == 1  %}
                                  <div class="card ind-card"  draggable="true" ondragstart="handleDragStart(event)" data-customer-name="{{ order_item.order.invoice.customer }}" is_pickup="1"  data-order-item-id="{{ order_item.id }}"  data-type="order"   data-bill-item-id="{{order_item.serial_number.bill.id }}" data-order-identifier="{{ order_item.order_identifier }}"  data-bill-identifier="{{ order_item.bill_identifier }}"       data-order-status="{{ order_item.status }}" data-bill-status="{{ order_item.tracking_status }}" >
                                        <div class="card-title modal-trigger"  onclick="openModal('{{order_item.id}}','order')">
                                            <div class="card-inner">
                                            <table>
                                                <tr class="even">
                                                    <td class="min-w-200px">
                                                        <div class="position-relative pe-3 py-2">
                                                           <div class="fs-7 text-muted fw-bold date-s mb-3">{{ order_item.updated_at|date:"d b Y" }}</div>
                                                            <a href="#" class="mb-1 text-gray-900 text-hover-primary fw-bold">{{order_item.product}}-{{order_item.product.sku}}</a><br>
                                                            
                                                             <div class="fs-7 text-muted fw-bold">  <a href="#" class="mb-1 text-gray-900 text-hover-primary fw-bold"></a> test test<br>
                                                             <a href="#" class="mb-1 text-gray-900 text-hover-primary fw-bold">Scheduled:</a>{% if order_item.installation_date %}{{order_item.installation_date|date:"d-m-Y"}}{% else %} - {% endif %}  {% if order_item.installation_date %}{{order_item.installation_time}}{% else %} - {% endif %}</div>
                                                             
                                                        </div>
                                                    </td>
                                                    <td class="min-w-100px">
                                                        <div class="fs-8 fw-bold text-muted">{{ order_item.order.invoice.customer }}</div>
                                                    </td>
                                                </tr>
                                            </table>
                                            </div>
                                            <div class="ind-card-footer">
                                                <a href="#" class="mb-1 fs-7 text-muted fw-bold">Order ID: {{order_item}}{{ order_item.order.id }} </a><div class="mb-1 fs-7 text-muted fw-bold inv-id"> | {% if order_item.order.invoice.id %}INV ID: {{ order_item.order.invoice.id }} {% endif %}</div>
                                                <div class="symbol symbol-circle symbol-25px mb-1">
                                                            <div class="symbol-label bg-danger">
                                                                <span class="fs-8 text-inverse-danger">{% if order_item.order.invoice.customer.company_name %}
                                                                    {{ order_item.order.invoice.customer.company_name|slice:":1" }}
                                                                {% else %}
                                                                    {{ order_item.order.invoice.customer.first_name|slice:":1" }}
                                                                {% endif %}</span>
                                                            </div>
                                                        </div>
                                            </div>
                                            
                                                           
                                        </div>
                                    </div>
                                
                                {% endif %}
                        {% endfor %}
                    </div>
                </div>
                <span id="modalreplace">
                {% for order_item in order_items %}
                
                    {% if not order_item.serial_number.id and  order_item.tracking_status %}
                        <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 %}">
                                                    {% if order_item.tracking_status == 0 %} Ordered {% endif %}  {% if order_item.tracking_status == 1 %} Shipped {% endif %}  {% if order_item.tracking_status == 3 %} Arrived {% endif %} 
                                            </span>
                                            <span class="serialStatus-{{order_item.get_status_display}}">{{order_item.get_status_display}}</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 mb-5">
                                            <div class="row g-5">
                                                <div class="col-md-12">
                                                    <div class="card card-flush py-4 flex-row mb-5 order-card" style="padding-top:15px !important;">
                                                        <div class="card-header w-75">
                                                            <div class="card-title">
                                                                 <h2>Bill ID: {{order_item.bill.id}}</h2>
                                                            </div>
                                                        </div>
                                                        <div class="card-body pt-0 w-25">
                                                            <div class="table-responsive">
                                                                <table class="table align-middle table-row-bordered mb-0 fs-6 gy-5 mt-0">
                                                                        <tr class="fw-semibold text-gray-600">
                                                                            <td class="text-muted py-2">
                                                                                <div class="d-flex justify-content-end">
                                                                                    <i class="ki-outline ki-calendar fs-2 me-2"></i>
                                                                                    Date Added
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="fw-bold text-end py-2">{{order_item.created_at|date:"M. d, Y, g:i A"}}</td>
                                                                        </tr>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="cards p-0">
                                                        
                                                        <div class="card-body">
                                                                <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 pt-7 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">Bill Product</span>
                                                                                <span class="text-gray-500 mt-1 fw-semibold fs-6"></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="text-end min-w-125px sorting_disabled" rowspan="1"  style="">Supplier</th>
                                                                                                <th class="text-end min-w-100px sorting_disabled" rowspan="1"  style="">Quantity</th>
                                                                                                <th class="text-end min-w-50px sorting_disabled"  rowspan="1"  style="">Tracking Status</th>
                                                                                                <th class="text-end 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 text-muted">
                                                                                                            <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="text-muted fs-7 fw-bold"  data-kt-table-widget-4="template_cost"> {{order_item.serial_number}}</div>
                                                                                                </td>
                                                                                                <td class="text-end">
                                                                                                    <div class="text-muted 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-end">
                                                                                                    <div class="text-muted fs-7 fw-bold"
                                                                                                        data-kt-table-widget-4="template_qty">
                                                                                                       1</div>
                                                                                                </td>
                                                                                                <td class="text-end">
                                                                                                    <div class="text-muted 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 %}">
                                                                                                            {% 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 %} 
                                                                                                        </div>
                                                                                                        </div>
                                                                                                    </td>
                                                                                                 <td class="text-end">
                                                                                                    <div class="text-muted 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 %}">
                                                                                                            {% if order_item.get_status_display == 'Open' %} Open {% endif %}  {% if order_item.get_status_display == "Allocated" %} Allocated {% endif %}  {% if order_item.get_status_display == "Unallocated" %} Unallocated {% 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>
                                                               <br><br><br>
                                                               {% if order_item.supplier != None %}
                                                               <h3 class="card-title align-items-start flex-column">
                                                                    <span  class="card-label fw-bold text-gray-800">Account Details </span>
                                                                    <span class="text-gray-500 mt-1 fw-semibold fs-6"></span>
                                                                </h3> <hr/>
                                                                <div id="kt_activity_week_serial{{order_item.id}}" class="card-body p-0 tab-pane fade show active pt-10" role="tabpanel"  aria-labelledby="kt_activity_week_tab">
                                                                    <div class="d-flex flex-column gap-7 gap-lg-10"> 
                                                                        <div class="d-flex flex-column flex-xl-row gap-7 gap-lg-10"> 
                                                                            <div class="card card-flush py-4  flex-row-fluid"> 
                                                                                <div class="card-header">
                                                                                    <div class="card-title">
                                                                                        <h2>Supplier Details</h2>
                                                                                    </div>
                                                                                </div> 
                                                                                <div class="card-body pt-0">
                                                                                    <div class="table-responsive"> 
                                                                                        <table  class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                                                <tr  class="fw-semibold text-gray-600">
                                                                                                    <td class="text-muted">
                                                                                                        <div class="d-flex align-items-center">
                                                                                                            <i  class="ki-outline ki-profile-circle fs-2 me-2"></i> Supplier
                                                                                                        </div>
                                                                                                    </td> 
                                                                                                    <td class="fw-bold text-end">
                                                                                                        <div class="d-flex align-items-center justify-content-end"> 
                                                                                                            <a href="/metronic8/demo42/../demo42/apps/ecommerce/customers/details.html"  class="text-gray-600 text-hover-primary">
                                                                                                                {% 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>
                                                                                                    </td>
                                                                                                </tr>
                                                                                                <tr>
                                                                                                    <td class="text-muted">
                                                                                                        <div class="d-flex align-items-center">
                                                                                                            <i class="ki-outline ki-sms fs-2 me-2"></i>Email
                                                                                                        </div>
                                                                                                    </td>
                                                                                                    <td class="fw-bold text-end">
                                                                                                        <a href="/metronic8/demo42/../demo42/apps/user-management/users/view.html" class="text-gray-600 text-hover-primary"> {{ order_item.bill.supplier.email}} </a>
                                                                                                    </td>
                                                                                                </tr>
                                                                                                <tr>
                                                                                                    <td class="text-muted">
                                                                                                        <div class="d-flex align-items-center">
                                                                                                            <i  class="ki-outline ki-phone fs-2 me-2"></i>Phone
                                                                                                        </div>
                                                                                                    </td>
                                                                                                    <td class="fw-bold text-end">{{ order_item.bill.supplier.phone1}}</td>
                                                                                                </tr> 
                                                                                      
                                                                                        </table> 
                                                                                    </div>
                                                                                </div> 
                                                                            </div> 
                                                                            <div class="card card-flush py-4 flex-row-fluid"> 
                                                                                <div class="card-header">
                                                                                    <div class="card-title">
                                                                                        <h2>Bill History</h2>
                                                                                    </div>
                                                                                </div> 
                                                                                <div class="card-body pt-0">
                                                                                    <div class="table-responsive order-his"> 
                                                                                        <table class="table align-middle table-row-dashed fs-6 gy-5 mb-0 history-table">
                                                                                            <thead>
                                                                                                <tr  class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                                                                                    <th class="min-w-100px">Date Added</th>
                                                                                                    <th class="min-w-70px">Serial Number Status</th>
                                                                                                </tr>
                                                                                            </thead>
                                                                                            <tbody
                                                                                                class="fw-semibold text-gray-600">
                                                                                                {% if order_item.get_serial_history %}
                                                                                                {% for o_history in order_item.get_serial_history%}
                                                                                                <tr>
                                                                                                    <td>{{o_history.timestamp|date:"M. d, Y, g:i A" }}</td> 
                                                                                                    <td> 
                                                                                                        <div class="badge badge-light-success"> {{o_history.action}}</div> 
                                                                                                    </td> 
                                                                                                </tr>
                                                                                                {% endfor %}
                                                                                                {% endif %}
                                                                                            </tbody>
                                                                                        </table> 
                                                                                    </div>
                                                                                </div> 
                                                                            </div> 
                                                                        </div> 
                                                                        <div class="tab-content"> 
                                                                            <div class="tab-pane fade active show"  id="kt_ecommerce_sales_order_summary" role="tab-panel"> 
                                                                                <div class="d-flex flex-column gap-7 gap-lg-10">
                                                                                    <div  class="d-flex flex-column flex-xl-row gap-7 gap-lg-10"> 
                                                                                        <div class="card card-flush py-4 flex-row-fluid position-relative"> 
                                                                                            <div  class="position-absolute top-0 end-0 bottom-0 opacity-10 d-flex align-items-center me-5">
                                                                                                <i class="ki-solid ki-two-credit-cart"  style="font-size: 14em">   </i>
                                                                                            </div>
                                                                                            <div class="card-header">
                                                                                                <div class="card-title">
                                                                                                    <h2>Billing Address</h2>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="card-body pt-0">
                                                                                                {% if order_item.bill.supplier.street %}{{ order_item.bill.supplier.street}} ,<br> {% endif %}
                                                                                                {% if order_item.bill.supplier.city %} {{ order_item.bill.supplier.city}} ,<br>  {% endif %}
                                                                                                {% if order_item.bill.supplier.state %} {{ order_item.bill.supplier.state}} ,<br>  {% endif %}
                                                                                                {% if order_item.bill.supplier.country %}{{ order_item.bill.supplier.country}}  {% endif %}  {% if order_item.bill.supplier.post_code %}{{ order_item.bill.supplier.post_code}}  {% endif %}.
                                                                                            </div> 
                                                                                        </div> 
                                                                                        <div class="card card-flush py-4 flex-row-fluid position-relative"> 
                                                                                            <div  class="position-absolute top-0 end-0 bottom-0 opacity-10 d-flex align-items-center me-5">
                                                                                                <i class="ki-solid ki-delivery"  style="font-size: 13em"></i>
                                                                                            </div>
                                                                                            <div class="card-header">
                                                                                                <div class="card-title">
                                                                                                    <h2>Shipping Address</h2>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="card-body pt-0">
                                                                                                {% if order_item.bill.supplier.street %}{{ order_item.bill.supplier.street}} ,<br> {% endif %}
                                                                                                {% if order_item.bill.supplier.city %} {{ order_item.bill.supplier.city}} ,<br>  {% endif %}
                                                                                                {% if order_item.bill.supplier.state %} {{ order_item.bill.supplier.state}} ,<br>  {% endif %}
                                                                                                {% if order_item.bill.supplier.country %}{{ order_item.bill.supplier.country}}  {% endif %}  {% if order_item.bill.supplier.post_code %}{{ order_item.bill.supplier.post_code}}  {% endif %}.
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <br><br><br>
                                                                <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>
                                                                <hr/>
                                                                <div id="kt_activity_month_serial{{order_item.id}}" class="card-body p-0 tab-pane fade show active"
                                                                    role="tabpanel" aria-labelledby="kt_activity_month_tab">
                                                                    <div class="cards mt-9">
                                                                        <div class="card-body">
                                                                            <div class="d-flex flex-column flex-xl-row">
                                                                                <div class="flex-lg-row-fluid me-xl-10 mb-10 mb-xl-0">
                                                                                    <div class="mt-n1">
                                                                                        <div class="m-0">
                                                                                            <div class="fw-bold fs-3 text-gray-800 mb-8">Bill ID: {{ order_item.bill.id}}</div>
                                                                                            <div class="row g-5 mb-11">
                                                                                                <div class="col-sm-6">
                                                                                                    <div class="fw-semibold fs-7 text-gray-600 mb-1"> Issue Date:</div>
                                                                                                    <div class="fw-bold fs-6 text-gray-800">{{ order_item.bill.created_at|date:"M. d, Y, g:i A"}}</div>
                                                                                                </div>
                                                                                                <div class="col-sm-6">
                                                                                                    <div class="fw-semibold fs-7 text-gray-600 mb-1"> Due Date:</div>
                                                                                                    <div class="fw-bold fs-6 text-gray-800 d-flex align-items-center flex-wrap">
                                                                                                        <span class="pe-2">{{ order_item.bill.due_date}}</span>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="row g-5 mb-12">
                                                                                                <div class="col-sm-6">
                                                                                                    <div class="fw-semibold fs-7 text-gray-600 mb-1"> Issue By:</div>
                                                                                                    <div class="fw-bold fs-6 text-gray-800">
                                                                                                        {% if order_item.bill.supplier.company_name %}
                                                                                                            {{ order_item.bill.supplier.company_name }}
                                                                                                        {% else %}
                                                                                                            {{ order_item.bill.supplier.first_name}}   {{ order_item.bill.supplier.last_name}}
                                                                                                        {% endif %} 
                                                                                                    </div>
                                                                                                    <div class="fw-semibold fs-7 text-gray-600">
                                                                                                        {% if order_item.bill.supplier.street %}{{ order_item.bill.supplier.street}} ,<br> {% endif %}
                                                                                                        {% if order_item.bill.supplier.city %} {{ order_item.bill.supplier.city}} ,<br>  {% endif %}
                                                                                                        {% if order_item.bill.supplier.state %} {{ order_item.bill.supplier.state}} ,<br>  {% endif %}
                                                                                                        {% if order_item.bill.supplier.country %}{{ order_item.bill.supplier.country}}  {% endif %}  {% if  order_item.bill.supplier.post_code %}{{  order_item.bill.supplier.post_code}}  {% endif %}.
                                                                                                 </div>
                                                                                                </div>
                                                                                                <div class="col-sm-6">
                                                                                                    <div class="fw-semibold fs-7 text-gray-600 mb-1">Issued For:</div>
                                                                                                    <div class="fw-bold fs-6 text-gray-800">
                                                                                                      Excitech Team.
                                                                                                     </div>
                                                                                                    <div class="fw-semibold fs-7 text-gray-600">
                                                                                                        {% if order_item.bill.created_by.street %}{{ order_item.bill.created_by.street}} ,<br> {% endif %}
                                                                                                        {% if order_item.bill.created_by.city %} {{ order_item.bill.created_by.city}} ,<br>  {% endif %}
                                                                                                        {% if order_item.bill.created_by.state %} {{ order_item.bill.created_by.state}} ,<br>  {% endif %}
                                                                                                        {% if order_item.bill.created_by.country %}{{ order_item.bill.created_by.country}}  {% endif %}  {% if order_item.bill.created_by.post_code %}{{ order_item.bill.created_by.post_code}}  {% endif %}.
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="flex-grow-1">
                                                                                                <div class="table-responsive border-bottom mb-9">
                                                                                                    <table class="table mb-3">
                                                                                                        <thead>
                                                                                                            <tr class="border-bottom fs-6 fw-bold text-muted">
                                                                                                                <th class="min-w-175px pb-2"> Bill ID</th>
                                                                                                                <th class="min-w-150px pb-2"> Total Amount</th>
                                                                                                                <th class="min-w-120px pb-2"> Paid</th>
                                                                                                                <th class="min-w-120px pb-2"> Balance</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.id }} </td>
                                                                                                                    <td class="pt-6 text-gray-900 fw-bolder">${{ order_item.bill.total }}</td>
                                                                                                                    <td class="pt-6 text-gray-900 fw-bolder"> {% if order_item.bill.total_paid_amount %} ${{ order_item.bill.total_paid_amount }}{% else %}$0.00{% endif %}</td>
                                                                                                                    <td class="pt-6 text-gray-900 fw-bolder"> {% if order_item.bill.payable_amount %} ${{ order_item.bill.payable_amount  }}{% else %}$0.00{% endif %}</td>
                                                                                                            </tr>
                                                                                                        </tbody>
                                                                                                    </table>
                                                                                                </div>
                                                                                                <div class="d-flex justify-content-end">
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="m-0">
                                                                                    <div class="d-print-none border border-dashed border-gray-300 card-rounded h-lg-100 min-w-md-350px p-9 bg-lighten"> 
                                                                                        <div class="mb-8">
                                                                                            <span class="badge badge-light-warning">{% if order_item.bill.payable_amount == order_item.bill.total %}UnPaid {% elif  order_item.bill.total_paid_amount != order_item.bill.total %}Partial Paid{% elif  order_item.bill.total == order_item.bill.total_paid_amount  %}Paid{% endif %} </span>
                                                                                        </div> 
                                                                                        <h6 class="mb-8 fw-bolder text-gray-600 text-hover-primary"> LAST PAYMENT DETAILS</h6> 
                                                                                        {% if order_item.bill.get_bill_payment_records %}
                                                                                        {% for i_pay in order_item.bill.get_bill_payment_records %}
                                                                                        {% if forloop.counter == 1 %} 
                                                                                        <div class="mb-6">
                                                                                            <div class="fw-semibold text-gray-600 fs-7">  Payment Date</div> 
                                                                                            <div class="fw-bold text-gray-800 fs-6"> {{i_pay.pay_date}}  </div>
                                                                                        </div> 
                                                                                        <div class="mb-6">
                                                                                            <div class="fw-semibold text-gray-600 fs-7">  Amount</div> 
                                                                                            <div class="fw-bold text-gray-800 fs-6">    ${{i_pay.paid_amount}} </div>
                                                                                        </div> 
                                                                                        <div class="mb-13">
                                                                                            <div class="fw-semibold text-gray-600 fs-7"> Payment Term:</div>
                                                                                            <div class="fw-bold fs-6 text-gray-800 d-flex align-items-center">14 days
                                                                                                <span class="fs-7 text-danger d-flex align-items-center">
                                                                                                    <span class="bullet bullet-dot bg-danger mx-2"></span>Due in 7 days
                                                                                                </span>
                                                                                            </div>
                                                                                        </div>
                                                                                        {% endif %}
                                                                                        {% endfor %}
                                                                                        {% endif %} 
                                                                                        <h6 class="mb-4 fw-bolder text-gray-600 text-hover-primary">  PAYMENT HISTORY</h6>
                                                                                        <div class="flex-grow-1"> 
                                                                                            <div class="table-responsive border-bottom mb-4">
                                                                                                <table class="table mb-3">
                                                                                                    <thead>
                                                                                                        <tr class="border-bottom fs-6 fw-bold text-muted">
                                                                                                            <th class="min-w-120px pb-2">Date</th>
                                                                                                            <th class="min-w-120px pb-2">Amount</th>
                                                                                                        </tr>
                                                                                                    </thead>
                                                                                                    <tbody>
                                                                                                        {% if order_item.bill.get_bill_payment_records %}
                                                                                                        {% for i_pay in order_item.bill.get_bill_payment_records %}
                                                                                                        <tr class="fw-bold text-gray-700 fs-5">
                                                                                                            <td class="pt-6 text-gray-900 fw-bolder">{{i_pay.pay_date}}</td>
                                                                                                            <td class="pt-6 text-gray-900 fw-bolder">${{i_pay.paid_amount}}</td>
                                                                                                        </tr>
                                                                                                        {% endfor %}
                                                                                                        {% endif %}
                                                                                                    </tbody>
                                                                                                </table>
                                                                                            </div> 
                                                                                            <div class="d-flex justify-content-end"> 
                                                                                            </div> 
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                {% endif %}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer"></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 {% endif %} 
                                        </span>
                                    </h2> 
                                    <button id="closeModalBtn" onclick="closeModal('{{order_item.id}}','order')">X</button>
                                </div>
                                <div class="modal-body">
                                    <div class="orders-details mt-5 mb-5">
                                        <div class="row g-5">
                                            <div class="col-md-12">
                                                <div class="card card-flush py-4 flex-row mb-5 order-card" style="padding-top:15px !important;">
                                                    <div class="card-header wp-75">
                                                        <div class="card-title">

                                                            <h2>Order ID: {{order_item.order.id}}</h2>

                                                        </div>
                                                    </div> 
                                                    <div class="card-body pt-0 w-25">
                                                        <div class="table-responsive"> 
                                                            <table class="table align-middle table-row-bordered mb-0 fs-6 gy-5 mt-0">
                                                                
                                                                    <tr  class="fw-semibold text-gray-600">
                                                                        <td class="text-muted py-2">
                                                                            <div class="d-flex justify-content-end">
                                                                                <i class="ki-outline ki-calendar fs-2 me-2"></i>
                                                                                Date Added
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="fw-bold text-end py-2">{{order_item.order.created_at|date:"M. d, Y, g:i A"}}</td>
                                                                    </tr>
                                                                    <!--<tr>-->
                                                                    <!--    <td class="text-muted">-->
                                                                    <!--        <div class="d-flex align-items-center">-->
                                                                    <!--            <i class="ki-outline ki-wallet fs-2 me-2"></i>-->
                                                                    <!--            Payment Method-->
                                                                    <!--        </div>-->
                                                                    <!--    </td>-->
                                                                    <!--    <td class="fw-bold text-end">  Online </td>-->
                                                                    <!--</tr>-->
                                                                    <!--<tr>-->
                                                                    <!--    <td class="text-muted">-->
                                                                    <!--        <div class="d-flex align-items-center">-->
                                                                    <!--            <i class="ki-outline ki-truck fs-2 me-2"></i>-->
                                                                    <!--            Shipping Method-->
                                                                    <!--        </div>-->
                                                                    <!--    </td>-->
                                                                    <!--    <td class="fw-bold text-end">Flat Shipping Rate</td>-->
                                                                    <!--</tr>-->
                                                               
                                                            </table> 
                                                        </div>
                                                    </div> 
                                                </div>
            
                                                <!--<div id="kt_activity_years"  class="card-body p-0 pt-5 tab-pane fade active show mt-6 kt_activity_comments"  role="tabpanel" aria-labelledby="kt_activity_year_tab"> -->
                                                <!--    <h3 class="card-label fw-bold text-gray-800 mb-7">Activity</h3>-->
                                                <!--    <div class="timeline timeline-border-dashed mt-5"> -->
                                                <!--        <div class="timeline-item"> -->
                                                <!--            <div class="timeline-line"></div>-->
                                                <!--            <div class="timeline-icon">-->
                                                <!--                <i class="ki-outline ki-pencil fs-2 text-gray-500"></i>-->
                                                <!--            </div>-->
                                                <!--            <div class="timeline-content mb-6 mt-n1">-->
                                                <!--                <div class="pe-3 mb-5">-->
                                                <!--                    <div class="fs-6 fw-semibold mb-2">3 new application design concepts added:order</div>-->
                                                <!--                    <div class="d-flex align-items-center mt-1 fs-6">-->
                                                <!--                        <div class="text-muted me-2 fs-7">Created at 4:23 PM by  Abc</div>-->
                                                <!--                        <div class="symbol symbol-circle symbol-25px"  data-bs-toggle="tooltip" data-bs-boundary="window"  data-bs-placement="top" aria-label="Marcus Dotson"  data-bs-original-title="Marcus Dotson" data-kt-initialized="1"> -->
                                                <!--                        </div> -->
                                                <!--                    </div> -->
                                                <!--                </div>-->
                                                <!--                <div class="overflow-auto pb-5">-->
                                                <!--                </div>-->
                                                <!--            </div>-->
                                                <!--        </div> -->
                                                <!--        <div class="timeline-item">-->
                                                <!--            <div class="timeline-line"></div>-->
                                                <!--            <div class="timeline-icon">-->
                                                <!--                <i class="ki-outline ki-sms fs-2 text-gray-500"></i>-->
                                                <!--            </div>-->
                                                <!--            <div class="timeline-content mb-6 mt-n1">-->
                                                <!--                <div class="pe-3 mb-5">-->
                                                <!--                    <div class="fs-6 fw-semibold mb-2"> New case <a href="#" class="text-primary fw-bold me-1">#67890</a>  is assigned to you in Multi-platform Database Design project-->
                                                <!--                    </div>-->
                                                <!--                    <div class="overflow-auto pb-5">-->
                                                <!--                        <div class="d-flex align-items-center mt-1 fs-6"> -->
                                                <!--                            <div class="text-muted me-2 fs-7">Added at 4:23 PM  by Abc</div> -->
                                                <!--                            <a href="#" class="text-primary fw-bold me-1">Alice Tan</a> -->
                                                <!--                        </div> -->
                                                <!--                    </div> -->
                                                <!--                </div> -->
                                                <!--            </div> -->
                                                <!--        </div> -->
                                                <!--        <div class="timeline-item"> -->
                                                <!--            <div class="timeline-line"></div> -->
                                                <!--            <div class="timeline-icon">-->
                                                <!--                <i class="ki-outline ki-basket fs-2 text-gray-500"></i>-->
                                                <!--            </div>-->
                                                <!--            <div class="timeline-content mt-n1">-->
                                                <!--                <div class="pe-3 mb-5">-->
                                                <!--                    <div class="fs-6 fw-semibold mb-2">-->
                                                <!--                        New order <a href="#" class="text-primary fw-bold me-1">#67890</a> is placed for Workshow Planning &amp; Budget Estimation-->
                                                <!--                    </div>-->
                                                <!--                    <div class="d-flex align-items-center mt-1 fs-6">-->
                                                <!--                        <div class="text-muted me-2 fs-7">Placed at 4:23 PM by Abc</div>-->
                                                <!--                        <a href="#" class="text-primary fw-bold me-1">Jimmy Bold</a>-->
                                                <!--                    </div>-->
                                                <!--                </div>-->
                                                <!--            </div>-->
                                                <!--        </div>-->
                                                <!--    </div>-->
                                                <!--</div>-->
                                            </div>
            
                                            <div class="col-md-12"> 
                                                <div class="cards p-0"> 
                                                    <div class="card-header card-header-stretch">
                                                        <div class="card-title d-flex align-items-center">
                                                            <div class="my-1 me-4" data-select2-id="select2-data-137-jnyq" style="display:flex;">
                                                            </div>
                                                        </div> 
                                                        <div class="card-toolbar m-0"> 
                                                            <ul class="nav nav-tabs nav-line-tabs nav-stretch fs-6 border-0 fw-bold" role="tablist">
                                                                <li class="nav-item" role="presentation">
                                                                    <a id="kt_activity_today_tab" class="nav-link justify-content-center text-active-gray-800 active"  data-bs-toggle="tab" role="tab" href="#kt_activity_today_order{{order_item.id}}" aria-selected="true"> Order Details </a>
                                                                </li>
                                                                <li class="nav-item" role="presentation">
                                                                    <a id="kt_activity_week_tab" class="nav-link justify-content-center text-active-gray-800"  data-bs-toggle="tab" role="tab" href="#kt_activity_week_order{{order_item.id}}" aria-selected="false" tabindex="-1"> Account </a>
                                                                </li>
                                                                <li class="nav-item" role="presentation">
                                                                    <a id="kt_activity_month_tab"  class="nav-link justify-content-center text-active-gray-800"   data-bs-toggle="tab" role="tab" href="#kt_activity_month_order{{order_item.id}}" aria-selected="false"  tabindex="-1">  Payment Details </a>
                                                                </li> 
                                                            </ul> 
                                                        </div> 
                                                    </div> 
                                                    <div class="card-body">
                                                        <!--begin::Tab Content-->
                                                        <div class="tab-content">
                                                            <!--begin::Tab panel-->
                                                            <div id="kt_activity_today_order{{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">
                                                                    <!--begin::Card header-->
                                                                    <div class="card-header pt-7 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">Order Product</span>
                                                                            <span class="text-gray-500 mt-1 fw-semibold fs-6"></span>
                                                                        </h3>
                                                                        <!--end::Title-->

                                                                        <!--begin::Actions-->
                                                                        {% if order_item.product.is_product != 1 %}
                                                                        <div class="card-toolbar">
                                                                            
                                                                            <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">
                                                                                {% csrf_token %}
                                                                            
                                                                             <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> 
                                                						     <input type="hidden" name="order_item_id" id="order_item_id" value="{{order_item.id}}">
                                                					          
                                                                          <button type="submit" class="btn btn-primary ml-2">Update</button>
                                                                               
                                                                               
                                                                            </form>
                                                                            </div>
                                                                                   

                                                                        </div>
                                                                         {% endif %}
                                                                        <!--end::Actions-->
                                                                    </div>
                                                                    <!--end::Card header-->
            
                                                                    <!--begin::Card body-->
                                                                    <div class="card-body pt-2">
                                                                        <!--begin::Table-->
                                                                        <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="text-end min-w-125px sorting_disabled" rowspan="1"   style="">Supplier</th>
                                                                                            <th class="text-end min-w-100px sorting_disabled" rowspan="1"   style="">Quantity</th>
                                                                                            <th class="text-end min-w-100px sorting_disabled" rowspan="1"  style="">Total</th>
                                                                                            <th class="text-end min-w-50px sorting_disabled"  rowspan="1"  style="">Status</th>
                                                                                        </tr>
                                                                                    </thead>
                                                                                    <tbody class="fw-bold text-gray-600">
                                                                                        {% for o_i in order_items %}
                                                                                        {% if o_i.order_identifier == order_item.order_identifier and o_i.order.id == order_item.order.id %}
                                                                                        <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 text-muted">
                                                                                                        <a href="#" class="text-gray-800 text-hover-primary fw-bold" data-kt-table-widget-4="template_name">{{o_i.product.product_name}}-({{o_i.product.sku}})
                                                                                                          </a>                                                                                           
                                                                                                    </div>
                                                                                                </div>
                                                                                            </td>
                                                                                            <td class="text-end">
                                                                                                <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_cost">{% if o_i.serial_number.supplier != None %} {{o_i.serial_number.supplier}}{% else %} - {% endif %}</div>
                                                                                            </td>
                                                                                            <td class="text-end">
                                                                                                <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_qty">  {{o_i.qty}}</div>
                                                                                            </td>
                                                                                            <td class="text-end">
                                                                                                <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_total">  {{o_i.subtotal}}</div>
                                                                                            </td>
                                                                                            <td class="text-end">
                                                                                                <!--<div class="text-gray-800 fs-7 me-3">On hand</div>-->
                                                                                                <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_stock">
                                                                                                    <div class="badge  {% if o_i.status == 0 %} ordered {% endif %}  {% if o_i.status == 1 %} shipped {% endif %}  {% if o_i.status == 3 %} arrived {% endif %}  {% if o_i.status == 4 %} booked {% endif %} {% if o_i.status != 4 and o_i.status != 0 and o_i.status != 1 and o_i.status != 3 %} installed {% endif %}">
                                                                                                        {% if o_i.status == 0 %} Ordered {% endif %}  {% if o_i.status == 1 %} Shipped {% endif %}  {% if o_i.status == 3 %} Arrived {% endif %}  {% if o_i.status == 4 %} Booked {% endif %} 
                                                                                                    </div>
                                                                                                    </div>
                                                                                                </td>
                                                                                            </tr>
                                                                                            {% endif %}
                                                                                        {% endfor %}
                                                                                    </tbody>
                                                                                    <!--end::Table body-->
                                                                                </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>
                                                                        <!--end::Table-->
                                                                    </div>
                                                                    <!--end::Card body-->
                                                                </div>
                                                                 {% if  order_item.status == 4  or order_item.product.is_product == 1 %}
                                                                <div class="cards card-flush h-xl-100" data-select2-id="select2-data-124-p5cu">
                                                                    <!--begin::Card header-->
                                                                    <div class="card-header pt-7 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">Assigned Technician</span>
                                                                            <span class="text-gray-500 mt-1 fw-semibold fs-6"></span>
                                                                        </h3>
                                                                        <!--end::Title-->
            
                                                                        <!--begin::Actions-->
                                                                        <div class="card-toolbar">
                                                                            
                                                                            <div class="d-flex flex-stack flex-wrap gap-4">
                                                                            </div>
                                                                            
                                                                        </div> 
                                                                    </div> 
                                                                    <div class="card-body pt-2">
                                                                        <form action="/update/technician_order/" method="post">
                                                                            {% csrf_token %}
                                                                        <div>
                                                                            <div class="table-responsive">
                                                                                <table class="table align-middle table-row-dashed fs-6 gy-3 no-footer tracking-table" >

                                                                                    <!--begin::Table head-->
                                                                                    <thead>
                                                                                        <!--begin::Table row-->
                                                                                        <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                                                                            <th colspan="3"  class="min-w-100px sorting_disabled" rowspan="1" style="">Technician </th>
                                                                                            <th class="text-start min-w-125px sorting_disabled"  rowspan="1"   style="">{% if order_item.product.is_product != 1 %}Installation Date{% else %}Pickup Date{% endif %}</th>
                                                                                             <th class="text-start min-w-125px sorting_disabled"  rowspan="1"  style="">{% if order_item.product.is_product != 1 %}Installation Time{% else %}Pickup Time{% endif %}</th>
                                                                                            <th class="text-start min-w-125px sorting_disabled" rowspan="1"  style="">Action</th>
                                                                                        </tr>
                                                                                    </thead>
                                                                                    <tbody class="fw-bold text-gray-600">
                                                                                        <tr data-kt-table-widget-4="subtable_template" class="">
                                                                                            <td colspan="3">
                                                                                                <div class="d-flex align-items-center gap-3">
                                                                                                     <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>
                                                                                                </div>
                                                                                                   <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="text-start">
                                                                                                <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> 

                                                                                                        <!--<input type="date" class="form-control" name="installation_date" id="installation_date" required value="{{order_item.ordered_technician.installation_date|date:'Y-m-d'}}">-->

                                                                                                    </div>
                                                                                            </td>
                                                                                            <td class="text-start">
                                                                                                <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="text-end" >
                                                                                               <button type="submit" class="btn tech-btn">Update</button>
                                                                                            </td>
                                                                                            </tr>
                                                                                    </tbody>
                                                                                    <!--end::Table body-->
                                                                                </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>
                                                                        </form>
                                                                        <!--end::Table-->
                                                                    </div>
                                                                    <!--end::Card body-->
                                                                </div>
                                                                {% endif %}
            
           
                                                            </div> 

                                                            <div id="kt_activity_week_order{{order_item.id}}"  class="card-body p-0 tab-pane fade show pt-10" role="tabpanel"   aria-labelledby="kt_activity_week_tab">

                                                                <div class="d-flex flex-column gap-7 gap-lg-10"> 
                                                                    <div class="d-flex flex-column flex-xl-row gap-7 gap-lg-10"> 
                                                                        <div class="card card-flush py-4  flex-row-fluid"> 
                                                                            <div class="card-header">
                                                                                <div class="card-title">
                                                                                    <h2>Customer Details</h2>
                                                                                </div>
                                                                            </div> 
                                                                            <div class="card-body pt-0">
                                                                                <div class="table-responsive"> 
                                                                                    <table  class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                                       
                                                                                            <tr  class="fw-semibold text-gray-600">
                                                                                                <td class="text-muted">
                                                                                                    <div  class="d-flex align-items-center">
                                                                                                        <i class="ki-outline ki-profile-circle fs-2 me-2"></i>  Customer
                                                                                                    </div>
                                                                                                </td> 
                                                                                                <td class="fw-bold text-end">
                                                                                                    <div class="d-flex align-items-center justify-content-end"> 
                                                                                                        <a href="/metronic8/demo42/../demo42/apps/ecommerce/customers/details.html"  class="text-gray-600 text-hover-primary">
                                                                                                            {% 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>
                                                                                                </td>
                                                                                            </tr>
                                                                                            <tr>
                                                                                                <td class="text-muted">
                                                                                                    <div class="d-flex align-items-center">
                                                                                                        <i class="ki-outline ki-sms fs-2 me-2"></i>  Email
                                                                                                    </div>
                                                                                                </td>
                                                                                                <td class="fw-bold text-end">
                                                                                                    <a href="javascript:void(0);" class="text-gray-600 text-hover-primary"> {{ order_item.order.invoice.customer.email}} </a>
                                                                                                </td>
                                                                                            </tr>
                                                                                            <tr>
                                                                                                <td class="text-muted">
                                                                                                    <div class="d-flex align-items-center">
                                                                                                        <i  class="ki-outline ki-phone fs-2 me-2"></i>  Phone
                                                                                                    </div>
                                                                                                </td>
                                                                                                <td class="fw-bold text-end"> {{ order_item.order.invoice.customer.phone1}}</td>
                                                                                            </tr> 
                                                                                      
                                                                                    </table> 
                                                                                </div>
                                                                            </div> 
                                                                        </div> 
                                                                        <div class="card card-flush py-4 flex-row-fluid"> 
                                                                            <div class="card-header">
                                                                                <div class="card-title">
                                                                                    <h2>Order History</h2>
                                                                                </div>
                                                                            </div> 
                                                                            <div class="card-body pt-0">
                                                                                <div class="table-responsive order-his"> 
                                                                                    <table class="table align-middle table-row-dashed fs-6 gy-5 mb-0 history-table">
                                                                                        <thead>
                                                                                            <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                                                                                <th class="min-w-100px">Date Added</th>
                                                                                                <th class="min-w-70px">Order Status</th>
                                                                                            </tr>
                                                                                        </thead>
                                                                                        <tbody          class="fw-semibold text-gray-600">
                                                                                            {% if order_item.get_order_history %}
                                                                                            {% for o_history in order_item.get_order_history%}
                                                                                            <tr>
                                                                                                <td>{{o_history.timestamp|date:"M. d, Y, g:i A" }}</td>
                                                                                                <td> 
                                                                                                    <div class="badge badge-light-success"> {{o_history.action}}</div>
                                                                                                </td>
                                                                                            </tr>
                                                                                            {% endfor %}
                                                                                            {% endif %}

                                                                                        </tbody>
                                                                                    </table>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                     </div>
                                                                    <div class="tab-content">
                                                                        <div class="tab-pane fade active show" id="kt_ecommerce_sales_order_summary" role="tab-panel">
                                                                             <div class="d-flex flex-column gap-7 gap-lg-10">
                                                                                <div class="d-flex flex-column flex-xl-row gap-7 gap-lg-10">
                                                                                     <div class="card card-flush py-4 flex-row-fluid position-relative">
                                                                                         <div class="position-absolute top-0 end-0 bottom-0 opacity-10 d-flex align-items-center me-5">
                                                                                            <i class="ki-solid ki-two-credit-cart" style="font-size: 14em">
                                                                                            </i>
                                                                                        </div>
                                                                                       <div class="card-header">
                                                                                            <div class="card-title">
                                                                                                <h2>Billing Address</h2>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="card-body pt-0">
                                                                                            {% if order_item.order.invoice.customer.street %}{{ order_item.order.invoice.customer.street}} ,<br> {% endif %}
                                                                                            {% if order_item.order.invoice.customer.city %} {{ order_item.order.invoice.customer.city}} ,<br>  {% endif %}
                                                                                            {% if order_item.order.invoice.customer.state %} {{ order_item.order.invoice.customer.state}} ,<br>  {% endif %}
                                                                                            {% if order_item.order.invoice.customer.country %}{{ order_item.order.invoice.customer.country}}  {% endif %}  {% if order_item.order.invoice.customer.post_code %}{{ order_item.order.invoice.customer.post_code}}  {% endif %}.
                                                                                        </div> 
                                                                                    </div>
                                                                                    <div class="card card-flush py-4 flex-row-fluid position-relative"> 
                                                                                        <div class="position-absolute top-0 end-0 bottom-0 opacity-10 d-flex align-items-center me-5">
                                                                                            <i class="ki-solid ki-delivery"
                                                                                                style="font-size: 13em">
                                                                                            </i>
                                                                                        </div>
                                                                                        <div class="card-header">
                                                                                            <div class="card-title">
                                                                                                <h2>Shipping Address</h2>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="card-body pt-0">
                                                                                            {% if order_item.order.invoice.customer.street %}{{ order_item.order.invoice.customer.street}} ,<br> {% endif %}
                                                                                            {% if order_item.order.invoice.customer.city %} {{ order_item.order.invoice.customer.city}} ,<br>  {% endif %}
                                                                                            {% if order_item.order.invoice.customer.state %} {{ order_item.order.invoice.customer.state}} ,<br>  {% endif %}
                                                                                            {% if order_item.order.invoice.customer.country %}{{ order_item.order.invoice.customer.country}}  {% endif %}  {% if order_item.order.invoice.customer.post_code %}{{ order_item.order.invoice.customer.post_code}}  {% endif %}.
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div> 
                                                                </div> 
                                                            </div>
                                                            <div id="kt_activity_month_order{{order_item.id}}" class="card-body p-0 tab-pane fade show"  role="tabpanel" aria-labelledby="kt_activity_month_tab">
                                                                <div class="cards mt-9"> 
                                                                    <div class="card-body"> 
                                                                        <div class="d-flex flex-column flex-xl-row"> 
                                                                            <div class="flex-lg-row-fluid me-xl-10 mb-10 mb-xl-0"> 
                                                                                <div class="mt-n1"> 
                                                                                    <div class="m-0"> 
                                                                                        <div class="fw-bold fs-3 text-gray-800 mb-8"> Invoice ID: {{ order_item.order.invoice.id}}</div>
                                                                                         
                                                                                        <div class="row g-5 mb-11"> 
                                                                                            <div class="col-sm-6"> 
                                                                                                <div class="fw-semibold fs-7 text-gray-600 mb-1"> Issue Date:</div> 
                                                                                                <div class="fw-bold fs-6 text-gray-800">
                                                                                                    {{ order_item.order.invoice.invoice_date}}</div> 
                                                                                            </div> 
                                                                                            <div class="col-sm-6"> 
                                                                                                <div class="fw-semibold fs-7 text-gray-600 mb-1"> Due Date:</div> 
                                                                                                <div class="fw-bold fs-6 text-gray-800 d-flex align-items-center flex-wrap">
                                                                                                    <span class="pe-2">{{ order_item.order.invoice.due_date}}</span>
                                                                                                </div> 
                                                                                            </div> 
                                                                                        </div> 
                                                                                        <div class="row g-5 mb-12"> 
                                                                                            <div class="col-sm-6"> 
                                                                                                <div class="fw-semibold fs-7 text-gray-600 mb-1"> Issue For:</div> 
                                                                                                <div class="fw-bold fs-6 text-gray-800">
                                                                                                {% 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 %} 
                                                                                                </div>
                                                                                                <div class="fw-semibold fs-7 text-gray-600">
                                                                                                    {% if order_item.order.invoice.customer.street %}{{ order_item.order.invoice.customer.street}} ,<br> {% endif %}
                                                                                                    {% if order_item.order.invoice.customer.city %} {{ order_item.order.invoice.customer.city}} ,<br>  {% endif %}
                                                                                                    {% if order_item.order.invoice.customer.state %} {{ order_item.order.invoice.customer.state}} ,<br>  {% endif %}
                                                                                                    {% if order_item.order.invoice.customer.country %}{{ order_item.order.invoice.customer.country}}  {% endif %}  {% if order_item.order.invoice.customer.post_code %}{{ order_item.order.invoice.customer.post_code}}  {% endif %}.
                                                                                             </div>
                                                                                            </div>
                                                                                            <div class="col-sm-6">
                                                                                                <div class="fw-semibold fs-7 text-gray-600 mb-1"> Issued By:</div>
                                                                                               
                                                                                                <div class="fw-bold fs-6 text-gray-800">
                                                                                                  Excitech Team.
                                                                                                 </div>
                                                                                                <div
                                                                                                    class="fw-semibold fs-7 text-gray-600">
                                                                                                    {% if order_item.order.invoice.created_by.street %}{{ order_item.order.invoice.created_by.street}} ,<br> {% endif %}
                                                                                                    {% if order_item.order.invoice.created_by.city %} {{ order_item.order.invoice.created_by.city}} ,<br>  {% endif %}
                                                                                                    {% if order_item.order.invoice.created_by.state %} {{ order_item.order.invoice.created_by.state}} ,<br>  {% endif %}
                                                                                                    {% if order_item.order.invoice.created_by.country %}{{ order_item.order.invoice.created_by.country}}  {% endif %}  {% if order_item.order.invoice.created_by.post_code %}{{ order_item.order.invoice.customer.post_code}}  {% endif %}.
                                                                                            </div>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="flex-grow-1">
                                                                                            <div class="table-responsive border-bottom mb-9">
                                                                                                <table class="table mb-3">
                                                                                                    <thead>
                                                                                                        <tr class="border-bottom fs-6 fw-bold text-muted">
                                                                                                            <th class="min-w-175px pb-2"> Order ID</th>
                                                                                                            <th class="min-w-150px pb-2"> Total Amount </th>
                                                                                                            <th class="min-w-120px pb-2"> Paid</th>
                                                                                                            <th class="min-w-120px pb-2"> Balance</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.id }}
                                                                                                            </td> 
                                                                                                            {% if order_item.order.invoice %} 
                                                                                                            <td class="pt-6 text-gray-900 fw-bolder">  ${{ order_item.order.invoice.total }}</td>
                                                                                                            <td class="pt-6 text-gray-900 fw-bolder"> ${{ order_item.order.invoice.total_paid_amount }}</td>

                                                                                                            <td class="pt-6 text-gray-900 fw-bolder">  ${{order_item.order.invoice.payable_amount }}</td> 

                                                                                                            {% endif %}
                                                                                                        </tr>
            
                                                                                                    </tbody>
                                                                                                </table>
                                                                                            </div> 
                                                                                            <div class="d-flex justify-content-end"> 
                                                                                            </div> 
                                                                                        </div> 
                                                                                    </div> 
                                                                                </div> 
                                                                            </div> 
                                                                            <div class="m-0"> 
                                                                                <div class="d-print-none border border-dashed border-gray-300 card-rounded h-lg-100 min-w-md-350px p-9 bg-lighten"> 
                                                                                    <div class="mb-8">

                                                                                       
                                                                                        
                                                                                        <span class="badge badge-light-warning">{% if order_item.order.invoice.payable_amount == order_item.order.invoice.total %}UnPaid {% elif  order_item.order.invoice.total_paid_amount != order_item.order.invoice.total %}Partial Paid{% elif  order_item.order.invoice.total == order_item.order.invoice.total_paid_amount  %}Paid{% endif %} </span>
                                                                                        
                                                                                        

                                                                                    </div> 
                                                                                    <h6 class="mb-8 fw-bolder text-gray-600 text-hover-primary"> LAST PAYMENT DETAILS</h6> 
                                                                                    {% if order_item.order.invoice.get_invoice_payment_records %}
                                                                                    {% for i_pay in order_item.order.invoice.get_invoice_payment_records %}
                                                                                    {% if forloop.counter == 1 %} 

                                                                                    <!--<div class="mb-6">-->
                                                                                    <!--    <div class="fw-semibold text-gray-600 fs-7">Payment Type</div>-->
                                                                                    <!--    <div class="fw-bold text-gray-800 fs-6">  Paypal </div>-->
                                                                                    <!--</div> -->

                                                                                    <div class="mb-6">
                                                                                        <div class="fw-semibold text-gray-600 fs-7"> Payment Date</div>
                                                                                        <div class="fw-bold text-gray-800 fs-6"> {{i_pay.paydate}} </div>
                                                                                    </div> 
                                                                                    <div class="mb-6">
                                                                                        <div class="fw-semibold text-gray-600 fs-7">  Amount</div>
                                                                                        <div class="fw-bold text-gray-800 fs-6">  ${{i_pay.paid_amount}} </div>
                                                                                    </div> 
                                                                                    <div class="mb-13">
                                                                                        <div class="fw-semibold text-gray-600 fs-7"> Payment Term:</div> 
                                                                                        <div class="fw-bold fs-6 text-gray-800 d-flex align-items-center">
                                                                                            14 days
                                                                                            <span class="fs-7 text-danger d-flex align-items-center">
                                                                                                <span class="bullet bullet-dot bg-danger mx-2"></span>
                                                                                                Due in 7 days
                                                                                            </span>
                                                                                        </div>
                                                                                    </div>
                                                                                    {% endif %}
                                                                                    {% endfor %}
                                                                                    {% endif %} 
                                                                                    <h6 class="mb-4 fw-bolder text-gray-600 text-hover-primary"> PAYMENT HISTORY</h6> 
                                                                                    <div class="flex-grow-1"> 
                                                                                        <div
                                                                                            class="table-responsive border-bottom mb-4">
                                                                                            <table class="table mb-3">
                                                                                                <thead>
                                                                                                    <tr class="border-bottom fs-6 fw-bold text-muted">
                                                                                                        <th class="min-w-120px pb-2">  Date</th>
                                                                                                        <th class="min-w-120px pb-2">  Amount</th>
                                                                                                    </tr>
                                                                                                </thead>
                                                                                                <tbody>
                                                                                                    {% if order_item.order.invoice.get_invoice_payment_records %}
                                                                                                        {% for i_pay in order_item.order.invoice.get_invoice_payment_records %}
                                                                                                        <tr class="fw-bold text-gray-700 fs-5">
                                                                                                            <td class="pt-6 text-gray-900 fw-bolder"> {{i_pay.paydate}}</td>
                                                                                                            <td class="pt-6 text-gray-900 fw-bolder"> ${{i_pay.paid_amount}}</td>
                                                                                                        </tr>
                                                                                                        {% endfor %}
                                                                                                    {% endif %}
                                                                                                </tbody>
                                                                                            </table>
                                                                                        </div>
                                                                                        <div class="d-flex justify-content-end">
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer"></div>
                            </div>
                        </div>
                    </span>

                    {% endif %}
                {% endfor %}
                </span>
            </div>
        </div>
    </div>
    <form method="post" action="" id="updateOrderForm">
        {% csrf_token %}
        <div class="modal fades" tabindex="-1" id="kt_modal_stacked_1" data-bs-backdrop="static" data-bs-keyboard="false">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title">Assign Technician</h3>
                        <!--<div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">-->
                            <!--<i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>-->
                        <!--</div>-->
                    </div>
                    <div class="modal-body">
                        <p><b>Orderitem Id:</b> <span id="orderItemIdPlaceholder"></span></p>
                        <p><b>Customer Name:-</b><span id="ordercustname"></span></p>
                        <!-- <div>
                            <p><b>Order Status:-</b>{{order_item.get_status_display}}</span></p>
                        </div> -->
                        <div>
                            <label class="required form-label mb-2 mt-3" for="technician"><strong>Select Technician:</strong></label>
                            <select class="form-select" data-placeholder="Select Technician" name="technician" id="technician" required>
                                <option disabled selected value="">Technician</option>
                                {% for technician in technicians %}
                                    <option value="{{ technician.id }}" >{{ technician.userinfo.first_name }} {{ technician.userinfo.last_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div>
                            <label class="required form-label mb-2 mt-3" for="installationDate"><strong>Select <span class="changeforpickupdate">Installation</span> Date:</strong></label>
                            <!--<input type="date" class="form-control" name="installation_date" id="installation_date" required>-->
                            
                             <div class="input-group" id="kt_td_picker_localization" data-td-target-input="nearest" data-td-target="#kt_td_picker_localization" data-td-toggle="datetimepicker">
                                <input type="text" class="form-control start_date" data-td-target="#kt_td_picker_localization" readonly name="installation_date"  value="{% now 'd-m-Y' %}" required />
            
                                <span class="input-group-text" data-td-target="#kt_td_picker_localization" data-td-toggle="datetimepicker">
                                    <i class="ki-duotone ki-calendar fs-2"><span class="path1"></span><span class="path2"></span></i>
                                </span>
                            </div>
                        </div>
                         <div>
                        <label class="required form-label mb-2 mt-3" for="technician"><strong>Select Time:</strong></label>
                        <select class="form-select" data-placeholder="Select Installation Time" name="installation_time" id="installation_time" required>
                            <option disabled selected value="">Select Time</option>
                            <option value="00:00">00:00</option>
                            <option value="00:30">00:30</option>
                            <option value="01:00">01:00</option>
                            <option value="01:30">01:30</option>
                            <option value="02:00">02:00</option>
                            <option value="02:30">02:30</option>
                            <option value="03:00">03:00</option>
                            <option value="03:30">03:30</option>
                            <option value="04:00">04:00</option>
                            <option value="04:30">04:30</option>
                            <option value="05:00">05:00</option>
                            <option value="05:30">05:30</option>
                            <option value="06:00">06:00</option>
                            <option value="06:30">06:30</option>
                            <option value="07:00">07:00</option>
                            <option value="07:30">07:30</option>
                            <option value="08:00">08:00</option>
                            <option value="08:30">08:30</option>
                            <option value="08:00">08:00</option>
                            <option value="08:30">08:30</option>
                            <option value="09:00">09:00</option>
                            <option value="09:30">09:30</option>
                            <option value="10:00">10:00</option>
                            <option value="10:30">10:30</option>
                            <option value="11:00">11:00</option>
                            <option value="11:30">11:30</option>
                            <option value="12:00">12:00</option>
                            <option value="12:30">12:30</option>
                            <option value="13:00">13:00</option>
                            <option value="13:30">13:30</option>
                            <option value="14:00">14:00</option>
                            <option value="14:30">14:30</option>
                            <option value="15:00">15:00</option>
                            <option value="15:30">15:30</option>
                            <option value="16:00">16:00</option>
                            <option value="16:30">16:30</option>
                            <option value="17:00">17:00</option>
                            <option value="17:30">17:30</option>
                            <option value="18:00">18:00</option>
                            <option value="18:30">18:30</option>
                            <option value="19:00">19:00</option>
                            <option value="19:30">19:30</option>
                            <option value="20:00">20:00</option>
                            <option value="20:30">20:30</option>
                            <option value="21:00">21:00</option>
                            <option value="21:30">21:30</option>
                            <option value="22:00">22:00</option>
                            <option value="22:30">22:30</option>
                            <option value="23:00">23:00</option>
                            <option value="23:30">23:30</option>
         </select>
                    </div>
                    </div>

                    <div class="modal-footer">
                        <!--<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>-->
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
            <input type="hidden" name="order_item_id" id="orderItemIdInput" value="">
            <input type="hidden" name="order_identifier" id="orderItemIdentifierInput" value="">
        </div>
    </form>

     <form method="post" action="" id="updateOrderFormETA">
        {% csrf_token %}
        <div class="modal fades" tabindex="-1" id="kt_modal_stacked_ETA"  data-bs-backdrop="static" data-bs-keyboard="false">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title">SET ETA</h3>
                        <!--<div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">-->
                            <!--<i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>-->
                        <!--</div>-->
                    </div>
                    <div class="modal-body">
                        <p><b class="replace_order_bill">Bill Id:</b> <span id="orderItemIdPlaceholderETA"></span></p>
                        <p><b><span id="ordercustorSuppliernameETA">Customer Name</span>:-</b><span id="ordercustnameETA"></span></p>
                       
                        <div>
                            <label class="required form-label mb-2 mt-3" for="installationDate"><strong>Select Arrival Date:</strong></label>
                            <!--<input type="date" class="form-control" name="arrival_eta_date" id="installation_date" required>-->
                             <div class="input-group" id="kt_td_picker_localizationeta" data-td-target-input="nearest" data-td-target="#kt_td_picker_localizationeta" data-td-toggle="datetimepicker">
                                <input type="text" class="form-control start_dateeta" data-td-target="#kt_td_picker_localizationeta" readonly name="arrival_eta_date"  value="{% now 'd-m-Y' %}" required />
            
                                <span class="input-group-text" data-td-target="#kt_td_picker_localizationeta" data-td-toggle="datetimepicker">
                                    <i class="ki-duotone ki-calendar fs-2"><span class="path1"></span><span class="path2"></span></i>
                                </span>
                            </div>
                        </div>
                        
                    </div>

                    <div class="modal-footer">
                        <!--<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>-->
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </div>
            </div>
            <input type="hidden" name="order_item_id" id="orderItemIdInputETA" value="">
            <input type="hidden" name="order_type" id="order_type" value="">
            <input type="hidden" name="order_identifier" id="orderItemIdentifierInputETA" value="">
        </div>
    </form>
<input type="hidden" class="form-control start_datetoday" value="{% now 'd-m-Y' %}" />
            
    <script>
    function updateModalContent(link) {
      
  console.log(link);
            // const updateOrderForm = document.getElementById("updateOrderForm");
            // if (updateOrderForm) {
            //     updateOrderForm.action = `/update/status/`;
            // }
        }
        
    document.getElementById("kt_modal_stacked_1").addEventListener("shown.bs.modal", function(event) {
        const link = event.relatedTarget;
        updateModalContent(link);
    });

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

 
</script>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
    function allowDrop(event) {
        event.preventDefault();
        const listElement = event.currentTarget;
        listElement.classList.add('drag-over');
    }
    
    function handleDrop(event) {
        event.preventDefault();
        const listElement = event.currentTarget;
        listElement.classList.remove('drag-over');
        const fromListId = event.dataTransfer.getData('text/plain');
        const toListStatus = parseInt(listElement.getAttribute('data-status'));
        const draggedCard = document.querySelector(`[draggable="true"][style="opacity: 0.5;"]`);
        const statusChangedType = draggedCard.getAttribute('data-type');
        const orderItemId = draggedCard.getAttribute('data-order-item-id');
        const billItemId = draggedCard.getAttribute('data-bill-item-id');

        const fromListStatus = fromListId.match(/\d+/)[0];
        console.log(fromListStatus,toListStatus,statusChangedType,orderItemId,billItemId);
        if(fromListStatus <= toListStatus)
        {
            if(statusChangedType=='serial_number')
            {
                if (toListStatus === 4) {
                     draggedCard.style.opacity = '1';
                    return false;
                }
                else if(toListStatus === 1)
                {
                    listElement.appendChild(draggedCard);
                    draggedCard.style.opacity = '1';
                    openUpdateModalETA(draggedCard.getAttribute('data-order-item-id'), toListStatus, draggedCard.getAttribute('data-supplier-name'));
                    // fetchOrderDetails(orderItemId,billItemId, toListStatus);
                    //     fetchOrderDetails(orderItemId, toListStatus,billItemId,'serial_number');
                //   alert('here'); 
                }
                else
                {
                     listElement.appendChild(draggedCard);
                    draggedCard.style.opacity = '1';
                        $.ajax({
                        async : 'false',
                        url: '/update/serial_number/status/',  // Replace with your actual URL for updating status
                        type: 'POST',
                        data: {
                        'order_item_id': orderItemId,
                        'bill_item_id': billItemId,
                        'serial_number_id':orderItemId,
                        'status': toListStatus,
                        'type': 'serial number'

                        },
                        success: function(data) {
                        // Handle success if needed
                        console.log('Status updated successfully');
                        draggedCard.style.opacity = '1';
                        // Fetch order details using AJAX and update modal content
                        fetchOrderDetails(orderItemId,billItemId, toListStatus);
                        fetchOrderDetails(orderItemId, toListStatus,billItemId,'serial_number');
                        },
                        error: function(error) {
                            draggedCard.style.opacity = '1';
                        // Handle error if needed
                        console.error('Error updating status:', error);
                        }
                        });
                }
            }
            if(statusChangedType=='order')
            {
                if (toListStatus === 4) {
                     $.ajax({
                        async : 'false',
                        url: '/checkpaymentstatus/',  // Replace with your actual URL for updating status
                        type: 'POST',
                        data: {
                            'order_item_id': orderItemId,
                        },
                        success: function(data) {
                            if(data.status == 0)
                            {
                                draggedCard.style.opacity = '1';
                                  alert('Payment Required');
                                  draggedCard.style.opacity = '1';
                                return false;
                            }
                             else
                            {
                                listElement.appendChild(draggedCard);
                                draggedCard.style.opacity = '1';
                                
                                 openUpdateModal(draggedCard.getAttribute('data-order-item-id'), toListStatus, draggedCard.getAttribute('data-customer-name'), draggedCard.getAttribute('is_pickup'));
                                  $.ajax({
                                    async : 'false',
                                    url: '/update/order/trackingstatus/',  // Replace with your actual URL for updating status
                                    type: 'POST',
                                    data: {
                                        'order_item_id': orderItemId,
                                        'bill_item_id': billItemId,
                                        'serial_number_id':orderItemId,
                                        'status': toListStatus,
                                        'type': 'order item'
                                    },
                                    success: function(data) {
                                        console.log('Status updated successfully');
                                        draggedCard.style.opacity = '1';
                                        fetchOrderDetails(orderItemId,billItemId, toListStatus,'order');
                                    },
                                    error: function(error) {
                                        draggedCard.style.opacity = '1';
                                        console.error('Error updating status:', error);
                                    }
                                });
                            }
                        },
                        error: function(error) {
                            console.error('Error While Fetching Payment Status:', error);
                        }
                        });
                }
                else if(toListStatus === 1)
                {
                    listElement.appendChild(draggedCard);
                    draggedCard.style.opacity = '1';
                    openUpdateModalETAOrder(draggedCard.getAttribute('data-order-item-id'), toListStatus, draggedCard.getAttribute('data-customer-name'));
                    fetchOrderDetails(orderItemId,billItemId, toListStatus);
                        fetchOrderDetails(orderItemId, toListStatus,billItemId,'serial_number');
                //   alert('here'); 
                }
                else
                {
                     listElement.appendChild(draggedCard);
                    draggedCard.style.opacity = '1';
                       $.ajax({
                        async : 'false',
                        url: '/update/order/trackingstatus/',  // Replace with your actual URL for updating status
                        type: 'POST',
                        data: {
                            'order_item_id': orderItemId,
                            'bill_item_id': billItemId,
                            'serial_number_id':orderItemId,
                            'status': toListStatus,
                            'type': 'order item'
                        },
                        success: function(data) {
                            console.log('Status updated successfully');
                            draggedCard.style.opacity = '1';
                            fetchOrderDetails(orderItemId,billItemId, toListStatus,'order');
                           
                        },
                        error: function(error) {
                            draggedCard.style.opacity = '1';
                            console.error('Error updating status:', error);
                        }
                    });
                }
            }
        }
        else
        {
            draggedCard.style.opacity = '1';
            alert("Sorry You can't change state to Downward state");
        }

    }

    function handleDragStart(event) {
        event.dataTransfer.setData('text/plain', event.target.closest('.list').id);
        event.target.style.opacity = '0.5';
    }

    function openUpdateModal(orderItemId, status, cust_name,is_pickup=0) {
        // Set the order item ID in the hidden input field of the form
        document.getElementById('orderItemIdInput').value = orderItemId;
        document.getElementById('ordercustname').innerHTML = cust_name;
        document.getElementById('orderItemIdentifierInput').value = ''; // Clear order identifier
        document.getElementById('orderItemIdPlaceholder').innerHTML = orderItemId;

        const updateOrderForm = document.getElementById("updateOrderForm");
        if (updateOrderForm) {
            console.log(updateOrderForm);
            updateOrderForm.action = `/update/technician_order/`;
            // let is_pickup=$('.changeforpickupdate').attr("pickup");
            console.log('is_pickup',is_pickup);
            if(is_pickup == 1)
            {
            $('.changeforpickupdate').html("pickup");
            }
        }
        // Trigger the modal opening
        $('#kt_modal_stacked_1').modal('show');

        // Fetch order details using AJAX and update modal content
      //  fetchOrderDetails(orderItemId, status);
    }
    function openUpdateModalETA(billItemId, status, cust_name) {
        // Set the order item ID in the hidden input field of the form
        document.getElementById('orderItemIdInputETA').value = billItemId;
        document.getElementById('order_type').value = 2;
        document.getElementById('ordercustnameETA').innerHTML = cust_name;
        document.getElementById('ordercustorSuppliernameETA').innerHTML = 'Supplier Name';
        document.getElementById('orderItemIdentifierInputETA').value = ''; // Clear order identifier
        document.getElementById('orderItemIdPlaceholderETA').innerHTML = billItemId;
        const updateOrderFormETA = document.getElementById("updateOrderFormETA");
        if (updateOrderFormETA) {
            console.log(updateOrderFormETA);
            updateOrderFormETA.action = `/update/Bill-ETA/`;
        }
        // Trigger the modal opening
        $('#kt_modal_stacked_ETA').modal('show');
        // Fetch order details using AJAX and update modal content
      //  fetchOrderDetails(orderItemId, status);
    }
     function openUpdateModalETAOrder(billItemId, status, cust_name) {
        // Set the order item ID in the hidden input field of the form
        document.getElementById('orderItemIdInputETA').value = billItemId;
        document.getElementById('order_type').value = 1;
        document.getElementById('ordercustnameETA').innerHTML = cust_name;
        document.getElementById('ordercustorSuppliernameETA').innerHTML = 'Customer Name';
        document.getElementById('orderItemIdentifierInputETA').value = ''; // Clear order identifier
        document.getElementById('orderItemIdPlaceholderETA').innerHTML = billItemId;
        const updateOrderFormETA = document.getElementById("updateOrderFormETA");
        if (updateOrderFormETA) {
            console.log(updateOrderFormETA);
            updateOrderFormETA.action = `/update/Bill-ETA/`;
        }
        // Trigger the modal opening
        $('#kt_modal_stacked_ETA').modal('show');
        // Fetch order details using AJAX and update modal content
      //  fetchOrderDetails(orderItemId, status);
    }
    

//fetchOrderDetails(orderItemId,billItemId, toListStatus,'order');
    function fetchOrderDetails(orderItemId, billItemId,status,ordertype) {
        var token = '{{csrf_token}}';
        $.ajax({
            headers: { "X-CSRFToken": token },
            url: `/getOrderDetails/`,  // Replace with your actual URL for fetching order details
            type: 'POST',
            data: {
                'order_item_id': orderItemId,
                'status': status,
                'billItemId':billItemId,
                'ordertype':ordertype
            },
            success: function(data) {
                //$('#replace_modal_order_' + orderItemId).html(data);
                if(ordertype=='serial_number')
                {
                    $('#replace_modal_serial_number_'+orderItemId).html(data);
                }
                else
                {
                    $('#replace_modal_order_'+orderItemId).html(data);
                }
            },
            error: function(error) {
                console.error('Error fetching order details:', error);
            }
        });
    }

    function addTask(listId, inputId) {
        const taskText = document.getElementById(inputId).value;
        if (taskText.trim() === "") {
            return;
        }

        const card = document.createElement('div');
        card.className = 'card';
        card.textContent = taskText;

        document.getElementById(listId).appendChild(card);
        document.getElementById(inputId).value = "";
    }
   

    // Function to open the modal
    function openModal(id,typeoforder) {
            // Get references to modal and buttons
    var modal = document.getElementById("myModal_"+typeoforder+"_"+id);
    //var modal = document.getElementById("myModal");
    //var triggerButtons = document.querySelectorAll(".modal-trigger");
    var closeBtn = document.getElementById("closeModalBtn");
        modal.style.display = "flex";
    }

    // Function to close the modal
    function closeModal(id,typeoforder) {
        console.log(id,typeoforder);
        var modal = document.getElementById("myModal_"+typeoforder+"_"+id);
        //var modal = document.getElementById("myModal");
    //var triggerButtons = document.querySelectorAll(".modal-trigger");
    var closeBtn = document.getElementById("closeModalBtn");
        modal.style.display = "none";
    }
  
    $(document).ready(function(){
        // $('#search').on('keyup',function(){
        //     console.log($(this).val());
        // })
        $(document).on('keypress','#search',function(e) {
        if(e.which == 13) {
            console.log($(this).val());
            window.location = "/order/tracking-order-status/"+$(this).val();
        }
        });
    })
    </script>
</div>

{% endblock content %}
{% block script %}
<script>

const clockoinstall=new tempusDominus.TempusDominus(document.getElementById("kt_td_picker_localization"), {
    display: {
        icons: { close: "ki-outline ki-cross fs-1",  },
        buttons: {   close: true,  },
    },
    localization: {
       locale: "en",
       startOfTheWeek: 1,
       format: "dd-MM-yyyy",
   },
   restrictions: {  minDate: $(".start_datetoday").val(),  },
});
const clocketa=new tempusDominus.TempusDominus(document.getElementById("kt_td_picker_localizationeta"), {
    display: {
        icons: { close: "ki-outline ki-cross fs-1",  },
        buttons: {   close: true,  },
    },
    localization: {
       locale: "en",
       startOfTheWeek: 1,
       format: "dd-MM-yyyy",
   },
   restrictions: {  minDate: $(".start_datetoday").val(),  },
});
{% for order_item in order_items %}
                
    {% if  order_item.serial_number.id %}
        {% if  order_item.status == 4 or order_item.product.is_product == 1 and order_item.order %}
            const clock{{order_item.id}}=new tempusDominus.TempusDominus(document.getElementById("kt_td_picker_localization{{order_item.id}}"), {
            display: {
                icons: { close: "ki-outline ki-cross fs-1",  },
                buttons: {   close: true,  },
            },
            localization: {
               locale: "en",
               startOfTheWeek: 1,
               format: "dd-MM-yyyy",
           },
           restrictions: {  minDate: $(".start_datetoday").val(),  },
        });
        {% endif %}
    {% endif %}
{% endfor %}

</script>
{% endblock script %}