{% 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;
    }
    .boi-date.date-s{
        width: fit-content;
    padding: 6px 6px;
    line-height: 15px;
    font-size: 11px !important;
    border-radius: 5px;
    background: #f1416c1a;
    color: #4c4949 !important;
    margin-left:auto;
    }
    .card.ind-card table td.cus-t{
        vertical-align: top;
    }
    .card.ind-card table td.cus-t .fs-8.fw-bold.text-muted{
        background: #f7700130;
    width: max-content;
    margin-left: auto;
    color: #000 !important;
    padding: 3px 7px;
    font-size: 13px !important;
    border-radius: 5px;
    }
    
   .card.ind-card .ind-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
    .serial-all-star .fa-star{
        font-size:14px !important;
        color: #17C653;
        padding: 2px;
        
    }
    .card.ind-card .ind-card-footer span{
        display:flex;
        align-items:center;
    }
    .serial-unall-star .fa-star{
        font-size:14px !important;
        color: #ff0000;
        padding: 2px;
    }
    .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;
    padding-bottom:10px;
   
}
.tracking-table td, .modal-content .tracking-table td div{
    font-size: 13px !important;
    letter-spacing: 0.3px !important;
    color: #4c4949 !important;
}
.tracking-table th, .modal-content .tracking-table th div{
    font-size: 13px !important;
    letter-spacing: 0.3px !important;
    color: #b5b5c3 !important;
}
    #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:max-content;
        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;
    }
.custom .cards .card-body.ex-b, .custom .cards .card-body.ex-b .card-body {
        padding-top: 0px !important;
    }

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

    .orders-details .track-card.cus-card .card-header.track-head {
        background: #3e97ff26 !important;
    }
    .orders-details .track-card.bill-card .card-header.track-head {
        background: #ff88001c !important;
    }
    .orders-details .track-card.invoice-card  .card-header.track-head{
        background: #00800014 !important;
    }

    .orders-details .card .text-muted,
    .orders-details .card .text-muted i {
        color: #4c4949 !important;
    }
.orders-details .card.track-card .table.gy-5 th, .table.gy-5 td{
    padding-top: 10px;
    padding-bottom: 10px;
}

.custom .modal-content .orders-details  .cards{
    padding-left:0px;
    padding-right:0px;
}
.custom .modal-content .orders-details  .cards .card-header{
   background: #e8e8e89e;
    padding: 10px 10px !important;
    border-radius: 5px;
    min-height:50px;
}
.custom .modal-content .orders-details  .cards .card-title .card-label{
    color:#000 !important;
    line-height:20px;
    font-size:15px;
}
.custom .modal-content .orders-details .cards .card-body .table-responsive{
    margin-left:7px;
    margin-right:7px;
}
.orders-details .card.track-card .card-header.track-head, .orders-details .card.track-card .cus-body  {
        padding-left: 10px !important;
        padding-right: 10px !important;
}
.orders-details .card.track-card .card-header.track-head .card-title .d-flex.align-items-center, .orders-details .card.track-card .card-header.track-head .card-title{
    width:100% !important;
}
.orders-details .card.track-card .table-responsive {
        
        min-height: 120px;
    }
    .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, .card.ind-card .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;
}
.orders-details .card.track-card .d-flex.align-items-center, .orders-details .card.track-card .d-flex.align-items-center i, .orders-details .card.track-card .d-flex.align-items-center a{
    color:#000 !important;
}
.orders-details .card.track-card .d-flex.align-items-center i{
width:10%;
    max-width:10%;
    text-align: left;
}
.orders-details .card.track-card .d-flex.align-items-center a{
    width:80%;
    max-width:80%;
    text-align: left;
    text-transform: initial;
}
.ki-profile-circle.ki-outline:before{
    font-size:28px;
}
.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 %} mt-4" 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-bill-id="{{ order_item.bill.id }}" data-order-id="{{ order_item.bill.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 cus-t">
                                                       <!--<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">
                                                <span><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"></div></span>
                                                {% if order_item.serial_number != ' ' and order_item.serial_number != None %}
                                                    <div class="serial-all-star"  title="{{order_item.serial_number}}"> <i class="fa-solid fa-star"></i> </div>
                                                {% else %}
                                                    <div class="serial-unall-star" > <i class="fa-solid fa-star"></i> </div>
                                                {% endif %}
                                            </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-order-id="{{ order_item.order.id }}"   data-bill-id="{{order_item.serial_number.bill.id }}"  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 }}" data-serial-number="{% if order_item.serial_number.serial_number == ' ' or order_item.serial_number.serial_number == None or order_item.serial_number.serial_number == '' %}0{% else %}1{% endif %}">
                                        <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 cus-t">
                                                            <div class="fs-8 fw-bold text-muted">{{ order_item.order.invoice.customer }}</div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                            <div class="ind-card-footer">
                                                <span><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 </span>"> | {% if order_item.order.invoice.id %}INV ID: {{ order_item.order.invoice.id }}{% endif %}</div>
                                                    <div class="mb-1 fs-7 text-muted fw-bold inv-id"></div>
                                                </span>
                                                {% if order_item.serial_number.serial_number == ' ' or order_item.serial_number.serial_number == None or order_item.serial_number.serial_number == '' %}
                                                    <div class="serial-unall-star"> <i class="fa-solid fa-star"></i> </div>
                                                {% else %}
                                                    <div class="serial-all-star"  title="{{order_item.serial_number.serial_number}}"><i class="fa-solid fa-star"></i></div>
                                                {% endif %}
                                            </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-supplier-name="{{ order_item.bill.supplier }}" data-customer-name="{{ order_item.order.invoice.customer }}"  data-order-item-id="{{ order_item.id }}" data-bill-id="{{ order_item.bill.id }}" data-order-id="{{ order_item.bill.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>
                                                                <a href="#" class="mb-1 text-gray-900 text-hover-primary fw-bold">Arrival Date: {{ order_item.Arrival_ETA_date|date:"d b Y" }}</a>
                                                            </div>
                                                        </td>
                                                        <td class="min-w-100px cus-t">
                                                           <!--<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">
                                                <span><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"></div>
                                                </span>
                                                {% if order_item.serial_number != ' ' and order_item.serial_number != None %}
                                                    <div class="serial-all-star"  title="{{order_item.serial_number}}"> <i class="fa-solid fa-star"></i> </div>
                                                {% else %}
                                                    <div class="serial-unall-star"> <i class="fa-solid fa-star"></i> </div>
                                                {% endif %}
                                            </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-order-id="{{ order_item.order.id }}" data-bill-id="{{order_item.serial_number.bill.id }}"  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 }}"  data-serial_number="{% if order_item.serial_number.serial_number == ' ' or order_item.serial_number.serial_number == None or order_item.serial_number.serial_number == '' %}0{% else %}1{% endif %}">
                                        <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>
                                                                    <a href="#" class="mb-1 text-gray-900 text-hover-primary fw-bold">Arrival Date: {{ order_item.serial_number.Arrival_ETA_date|date:"d b Y" }}</a>
                                                                </div>
                                                            </td>
                                                            <td class="min-w-100px cus-t">
                                                                <div class="fs-8 fw-bold text-muted">{{ order_item.order.invoice.customer }}</div>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </div>
                                            <div class="ind-card-footer">
                                                <span><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="mb-1 fs-7 text-muted fw-bold inv-id"></div>
                                                </span>
                                                     {% if order_item.serial_number.serial_number == ' ' or order_item.serial_number.serial_number == None or order_item.serial_number.serial_number == '' %}
                                                <div class="serial-unall-star"> <i class="fa-solid fa-star"></i> </div>
                                                {% else %}
                                                <div class="serial-all-star"  title="{{order_item.serial_number.serial_number}}"> <i class="fa-solid fa-star"></i>  </div>
                                                {% endif %}
                                            </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-id="{{ order_item.bill.id }}"  data-order-id="{{ order_item.bill.id }}" 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.arrived_date|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 cus-t">
                                                           <!--<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">
                                                <span><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"></div></span>
                                                {% if order_item.serial_number != ' ' and order_item.serial_number != None %}
                                                <div class="serial-all-star"  title="{{order_item.serial_number}}">
                                                            <i class="fa-solid fa-star"></i>
                                                </div>
                                                {% else %}
                                                        <div class="serial-unall-star">
                                                            <i class="fa-solid fa-star"></i>
                                                </div>
                                                {% endif %}
                                            </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-id="{{order_item.serial_number.bill.id }}"   data-order-id="{{ order_item.order.id }}"  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 }}"  data-serial_number="{% if order_item.serial_number.serial_number == ' ' or order_item.serial_number.serial_number == None or order_item.serial_number.serial_number == '' %}0{% else %}1{% endif %}">
                                        <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.serial_number.arrived_date|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 cus-t">
                                                            <div class="fs-8 fw-bold text-muted">{{ order_item.order.invoice.customer }}</div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                            <div class="ind-card-footer">
                                                <span><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="mb-1 fs-7 text-muted fw-bold inv-id"></div>
                                                </span>
                                                {% if order_item.serial_number.serial_number == ' ' or order_item.serial_number.serial_number == None or order_item.serial_number.serial_number == '' %}
                                                    <div class="serial-unall-star"><i class="fa-solid fa-star"></i></div>
                                                {% else %}
                                                    <div class="serial-all-star"  title="{{order_item.serial_number.serial_number}}"><i class="fa-solid fa-star"></i></div>
                                                {% endif %}
                                            </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.is_trade == 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-id="{{order_item.serial_number.bill.id }}"   data-order-id="{{ order_item.order.id }}"   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 }}"  data-serial_number="{% if order_item.serial_number.serial_number == ' ' or order_item.serial_number.serial_number == None or order_item.serial_number.serial_number == '' %}0{% else %}1{% endif %}">
                                        <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>
                                                                    {% if order_item.ordered_technician %}Tech: {{ order_item.ordered_technician.technician.userinfo.first_name }} {{ order_item.ordered_technician.technician.userinfo.last_name }}<br>{% endif %}
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="min-w-100px cus-t ">
                                                            <div class="fs-8 fw-bold text-muted mb-2">{{ order_item.order.invoice.customer }}</div>
                                                            <div class="fs-7 text-muted fw-bold date-s mb-3 boi-date">{% if order_item.installation_date %}{{order_item.installation_date|date:"d-m-Y"}}{% else %} - {% endif %}  {% if order_item.installation_date %}<br/>{{order_item.installation_time|date:"g A"}}{% else %} - {% endif %}</div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                            <div class="ind-card-footer">
                                                <span><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 </span>"> | {% if order_item.order.invoice.id %} INV ID: {{ order_item.order.invoice.id }} {% endif %}</div>
                                                    <div class="mb-1 fs-7 text-muted fw-bold inv-id"></div>
                                                </span>
                                                {% if order_item.serial_number.serial_number == ' ' or order_item.serial_number.serial_number == None or order_item.serial_number.serial_number == '' %}
                                                    <div class="serial-unall-star"><i class="fa-solid fa-star"></i></div>
                                                {% else %}
                                                    <div class="serial-all-star"  title="{{order_item.serial_number.serial_number}}"><i class="fa-solid fa-star"></i></div>
                                                {% endif %}
                                            </div>               
                                        </div>
                                    </div>
                                {% endif %}
                                {% if order_item.status == 4 and order_item.is_trade == 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-id="{{order_item.serial_number.bill.id }}"   data-order-id="{{ order_item.order.id }}"  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 }}"  data-serial_number="1">
                                        <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}}{% if order_item.product.sku != None %}-{{order_item.product.sku}}{% endif %}</a><br>
                                                                 <div class="fs-7 text-muted fw-bold">  <a href="#" class="mb-1 text-gray-900 text-hover-primary fw-bold"></a> {% if order_item.ordered_technician %}Tech: {{ order_item.ordered_technician.technician.userinfo.first_name }} {{ order_item.ordered_technician.technician.userinfo.last_name }}<br>{% endif %}
                                                                 </div>
                                                            </div>
                                                        </td>
                                                        <td class="min-w-100px cus-t">
                                                             <div class="fs-8 fw-bold text-muted mb-2">{{ order_item.order.invoice.customer }}</div>
                                                            <div class="fs-7 text-muted fw-bold date-s mb-3 boi-date">{% if order_item.installation_date %}{{order_item.installation_date|date:"d-m-Y"}}{% else %} - {% endif %}  {% if order_item.installation_date %}<br/>{{order_item.installation_time|date:"g A"}}{% else %} - {% endif %}</div>
                                                           
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                            <div class="ind-card-footer">
                                                <span><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 </span>"> | {% if order_item.order.invoice.id %}INV ID: {{ order_item.order.invoice.id }} {% endif %}</div>
                                                <div class="mb-1 fs-7 text-muted fw-bold inv-id"></div></span>
                                                    {% if order_item.serial_number.serial_number == ' ' or order_item.serial_number.serial_number == None or order_item.serial_number.serial_number == '' %}
                                                <div class="serial-unall-star">
                                                            <i class="fa-solid fa-star"></i>
                                                </div>
                                                {% else %}
                                                        <div class="serial-all-star" title="{{order_item.serial_number.serial_number}}">
                                                            <i class="fa-solid fa-star"></i>
                                                </div>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}
                        {% endfor %}
                    </div>
                </div>
                <span id="modalreplace">
                {% for order_item in order_items %}
                    {% if not order_item.subtotal %}
                        <span id="replace_modal_serial_number_{{order_item.id}}">
                            <div id="myModal_serial_number_{{order_item.id}}" class="modal">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h2> &nbsp;
                                            <span class=" fw-bold badge py-3 px-4 fs-7  {% if  order_item.tracking_status ==  0 %} ordered {% endif %}  {% if  order_item.tracking_status ==  1  %} shipped {% endif %}  {% if order_item.tracking_status ==  3%} arrived {% endif %}">
                                                  {{order_item.get_tracking_status}}
                                            </span>
                                            <span class="serialStatus-{{order_item.get_self_status}}">{{order_item.get_self_status}}</span>
                                        </h2>
                                         <span style="display:flex;">
                                        <div class="card-toolbar mr-3">
                                            <div class="d-flex flex-stack flex-wrap gap-4">
                                             <form method="POST" action="{% url 'quotation:update_bill_trackingstatus' %}" class="d-flex align-items-center">
                                                {% csrf_token %}
                                             <select name="status" id="billstatus"  aria-label="Status" data-control="select2" data-placeholder="Status"  class="form-select form-select-lg fw-semibold" required>
                                               {% if order_item.tracking_status == 0 %} 
                                                <option value="0" {% if order_item.tracking_status == 0 %} selected{% endif %}>Ordered</option>
                                                <option value="1" {% if order_item.tracking_status == 1 %} selected{% endif %}>Shipped</option>
                                                <option value="3" {% if order_item.tracking_status == 3 %} selected{% endif %}>Arrived</option>
                                                <option value="4" {% if order_item.tracking_status == 4 %} selected{% endif %}>Book for Install</option>
                                                {%endif%}
                                                {% if order_item.tracking_status == 1 %} 
                                                <option value="1" {% if order_item.tracking_status == 1 %} selected{% endif %}>Shipped</option>
                                                <option value="3" {% if order_item.tracking_status == 3 %} selected{% endif %}>Arrived</option>
                                                <option value="4" {% if order_item.tracking_status == 4 %} selected{% endif %}>Book for Install</option>
                                                {%endif%}
                                                {% if order_item.tracking_status == 3 %} 
                                                <option value="3" {% if order_item.tracking_status == 3 %} selected{% endif %}>Arrived</option>
                                                <option value="4" {% if order_item.tracking_status == 4 %} selected{% endif %}>Book for Install</option>
                                                {%endif%}
                                            </select> 
                                             <input type="hidden" name="order_item_id" id="order_item_id" value="{{order_item.id}}">
                                             
                                            <button type="submit" style="margin-left:5px;" class="btn btn-primary ml-2">Update</button>
                                            </form>
                                            </div>
                                        </div>
                                        <button id="closeModalBtn" style="margin-left:15px;" onclick="closeModal('{{order_item.id}}','serial_number')">X</button>
                                        </span>
                                        
                                    </div>
                                    <div class="modal-body">
                                        <div class="orders-details mt-5">
                                            <div class="row g-5">
                                                {% if order_item.bill %}
                                                <div class="col-md-4">
                                                    <div class="card track-card cus-card card-flush flex-row-fluid position-relative"> 
                                                        <div class="card-header track-head">
                                                            <div class="card-title">
                                                                <div class="d-flex align-items-center">
                                                                    <i  class="ki-outline ki-profile-circle fs-1 me-2 text-b"></i> 
                                                                     <a href="#"  class="text-gray-800 text-hover-primary text-b">
                                                                        {% if order_item.bill.supplier.company_name %}
                                                                            {{ order_item.bill.supplier.company_name }}({{order_item.bill.supplier.supplier_code}})
                                                                        {% else %}
                                                                            {{ order_item.bill.supplier.first_name}}   {{ order_item.bill.supplier.last_name}}({{order_item.bill.supplier.supplier_code}})
                                                                        {% endif %}
                                                                        </a> 
                                                                </div>
                                                            </div>
                                                        </div> 
                                                        <div class="pt-0 cus-body">
                                                            <div class="table-responsive"> 
                                                                <table  class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                        <tr>
                                                                            <td class="text-gray-800">
                                                                                <div class="d-flex align-items-center">
                                                                                    <i class="ki-outline ki-sms fs-2 me-2 text-b"></i>
                                                                                    <a href="#" class="text-gray-600 text-hover-primary text-b"> {{ order_item.bill.supplier.email}} </a>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="text-gray-800">
                                                                                <div class="d-flex align-items-center text-b">
                                                                                    <i  class="ki-outline ki-phone fs-2 me-2 text-b"></i>{{ order_item.bill.supplier.phone1}}
                                                                                </div>
                                                                            </td>
                                                                        </tr> 
                                                                </table> 
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="card track-card bill-card card-flush mb-5 order-card position-relative">
                                                        <div class="card-header track-head">
                                                            <div class="card-title">
                                                                <div class="d-flex align-items-center">
                                                                    <i  class="ki-outline ki-notepad-bookmark fs-1 me-2 text-b"></i> 
                                                                     <a href="#"  class="text-gray-800 text-hover-primary text-b">Bill ID: #{{ order_item.bill.id}}</a> 
                                                                </div>
                                                            </div>
                                                        </div> 
                                                        <div class="pt-0 cus-body">
                                                            <div class="table-responsive"> 
                                                                <table  class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                    <tr>
                                                                        <td class="text-gray-800">
                                                                            <div class="d-flex align-items-center">
                                                                                <i class="ki-outline ki-calendar fs-2 me-2 text-b"></i>
                                                                                <a href="#" class="text-gray-600 text-hover-primary text-b"> {{ order_item.bill.created_at }} </a>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                </table> 
                                                            </div>
                                                        </div>                                
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="card track-card card-flush invoice-card track-card flex-row-fluid position-relative"> 
                                                        <div class="card-header track-head">
                                                            <div class="card-title">
                                                                <div class="d-flex align-items-center">
                                                                    <i  class="ki-outline ki-document fs-1 me-2 text-b"></i> 
                                                                     <a href="#"  class="text-gray-800 text-hover-primary text-b">Supplier Inv ID: #{{ order_item.bill.invoice_number}}</a> 
                                                                </div>
                                                            </div>
                                                        </div> 
                                                        <div class="pt-0 cus-body">
                                                            <div class="table-responsive"> 
                                                                <table  class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                    <tr>
                                                                        <td class="text-gray-800">
                                                                            <div class="d-flex align-items-center">
                                                                                <i class="ki-outline ki-calendar fs-2 me-2 text-b"></i>
                                                                                <a href="#" class="text-gray-600 text-hover-primary text-b">{{ order_item.bill.created_at }}</a>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="text-gray-800">
                                                                            <div class="d-flex align-items-center">
                                                                                <i class="ki-outline ki-save-deposit fs-2 me-2 text-b"></i>
                                                                                <a href="#" class="text-gray-600 text-hover-primary text-b">Balance {% if order_item.bill.payable_amount %} ${{ order_item.bill.payable_amount  }}{% else %}$0.00{% endif %}  </a>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                 </table> 
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                {% endif %}
                                                <div class="col-md-12">
                                                    <div class="cards p-0">
                                                        <div class="card-body ex-b">
                                                            <div id="kt_activity_today_serial{{order_item.id}}" class="card-body p-0 tab-pane fade show active" role="tabpanel"  aria-labelledby="kt_activity_today_tab">
                                                                <div class="cards card-flush h-xl-100" data-select2-id="select2-data-124-p5cu">
                                                                    <div class="card-header p-0" data-select2-id="select2-data-123-flzv">
                                                                        <!--begin::Title-->
                                                                        <h3 class="card-title align-items-start flex-column">
                                                                            <span  class="card-label fw-bold text-gray-800 text-b">Bill Product</span>
                                                                            <span class="text-gray-500 mt-1 fw-semibold fs-6 text-b"></span>
                                                                        </h3>
                                                                        <div class="card-toolbar">
                                                                            <div class="d-flex flex-stack flex-wrap gap-4">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="card-body pt-2">
                                                                        <div>
                                                                            <div class="table-responsive">
                                                                                <table class="table align-middle table-row-dashed fs-6 gy-3  no-footer tracking-table"  >
                                                                                    <thead>
                                                                                        <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                                                                            <th colspan="2" class="min-w-100px sorting_disabled"  rowspan="1" style="">Product </th>
                                                                                            <th class="min-w-100px sorting_disabled" rowspan="1" style="">Serial Number </th>
                                                                                            <th class="min-w-100px sorting_disabled" rowspan="1"  style="">Supplier</th>
                                                                                            <th class="min-w-100px sorting_disabled" rowspan="1"  style="">Quantity</th>
                                                                                            <th class="min-w-100px sorting_disabled"  rowspan="1"  style="">Tracking Status</th>
                                                                                            <th class="min-w-50px sorting_disabled"  rowspan="1"  style="">Allocation Status</th>
                                                                                        </tr>
                                                                                    </thead>
                                                                                    <tbody class="fw-bold text-gray-600">
                                                                                        <tr data-kt-table-widget-4="subtable_template" class="">
                                                                                            <td colspan="2">
                                                                                                <div  class="d-flex align-items-center gap-3">
                                                                                                    <a href="#" class="symbol symbol-50px bg-secondary bg-opacity-25 rounded ">
                                                                                                        <img src="https://ea.stagingstorm.com/media/product_images/main_images/4.jpg" data-kt-src-path="https://ea.stagingstorm.com/media/product_images/main_images/4.jpg" alt=""  data-kt-table-widget-4="template_image">
                                                                                                    </a>
                                                                                                    <div class="d-flex flex-column">
                                                                                                        <a href="#" class="text-gray-800 text-hover-primary fw-bold"   data-kt-table-widget-4="template_name">{{order_item.product.product_name}}-({{order_item.product.sku}})
                                                                                                          </a>                                                                                           
                                                                                                    </div>
                                                                                                </div>
                                                                                            </td>
                                                                                            <td class="text-start">
                                                                                                <div class=" fs-7 fw-bold"  data-kt-table-widget-4="template_cost">{% if order_item.serial_number != ' ' %} {{order_item.serial_number}} {% else %} - {% endif %}</div>
                                                                                            </td>
                                                                                            <td class="text-start">
                                                                                                <div class="fs-7 fw-bold"  data-kt-table-widget-4="template_cost">{% if order_item.supplier != None %}{{order_item.supplier}}{% else %} - {% endif %}</div>
                                                                                            </td>
                                                                                            <td class="text-start">
                                                                                                <div class="fs-7 fw-bold"
                                                                                                    data-kt-table-widget-4="template_qty">
                                                                                                   1</div>
                                                                                            </td>
                                                                                            <td class="text-start">
                                                                                                <div class="fs-7 fw-bold"  data-kt-table-widget-4="template_stock">
                                                                                                    <div class="badge  {% if order_item.tracking_status == 0 %} ordered {% endif %}  {% if order_item.tracking_status == 1 %} shipped {% endif %}  {% if order_item.tracking_status == 3 %} arrived {% endif %}  {% if order_item.tracking_status == 4 %} booked {% endif %} {% if order_item.tracking_status != 4 and order_item.tracking_status != 0 and order_item.tracking_status != 1 and order_item.tracking_status != 3 %} installed {% endif %}">
                                                                                                       {{order_item.get_tracking_status}}
                                                                                                    </div>
                                                                                                </div>
                                                                                            </td>
                                                                                             <td class="text-start">
                                                                                                <div class="fs-7 fw-bold"  data-kt-table-widget-4="template_stock">
                                                                                                    <div class="badge  {% if order_item.tracking_status == 0 %} ordered {% endif %}  {% if order_item.tracking_status == 1 %} shipped {% endif %}  {% if order_item.tracking_status == 3 %} arrived {% endif %}  {% if order_item.tracking_status == 4 %} booked {% endif %} {% if order_item.tracking_status != 4 and order_item.tracking_status != 0 and order_item.tracking_status != 1 and order_item.tracking_status != 3 %} installed {% endif %}">
                                                                                                        {{order_item.get_self_status}}
                                                                                                    </div>
                                                                                                    </div>
                                                                                                </td>
                                                                                            </tr>
                                                                                    </tbody>
                                                                                </table>
                                                                            </div>
                                                                            <div class="row">
                                                                                <div
                                                                                    class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start">
                                                                                </div>
                                                                                <div
                                                                                    class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                           
                                                            {% if order_item.supplier != None %}
                                                            <div class="card-header p-0">
                                                                <h3 class="card-title align-items-start flex-column">
                                                                    <span  class="card-label fw-bold text-gray-800">Payment Details </span>
                                                                    <span class="text-gray-500 mt-1 fw-semibold fs-6"></span>
                                                                </h3>
                                                            </div>
                                                            <div id="kt_activity_month_serial{{order_item.id}}" class="card-body p-0 tab-pane fade show active ex-b" role="tabpanel" aria-labelledby="kt_activity_month_tab">
                                                                <div class="cards p-0">
                                                                    <div class="card-body">
                                                                        <div class="d-flex flex-column flex-xl-row">
                                                                            <div class="flex-grow-1">
                                                                                <div class="table-responsive border-bottom mb-9">
                                                                                    <table class="table mb-3 tracking-table">
                                                                                        <thead>
                                                                                            <tr class="border-bottom fs-6 fw-bold text-muted">
                                                                                                <th class="min-w-50px sorting_disabled"> Bill ID</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Total Amount</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Paid</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Balance</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Due Date</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Last Payment Date</th>
                                                                                                {% if order_item.bill.attachment %}
                                                                                                <th class="min-w-50px sorting_disabled"> Supplier Invoice</th>
                                                                                                {% endif %}
                                                                                            </tr>
                                                                                        </thead>
                                                                                        <tbody>
                                                                                            <tr class="fw-bold text-gray-700 fs-5">
                                                                                                <td class="d-flex align-items-center pt-6"> <i class="fa fa-genderless text-danger fs-2 me-2"></i>{{ order_item.bill.id }} </td>
                                                                                                    <td class="pt-6 fw-bolder">${{ order_item.bill.total }}</td>
                                                                                                    <td class="pt-6 fw-bolder"> {% if order_item.bill.total_paid_amount %} ${{ order_item.bill.total_paid_amount }}{% else %}$0.00{% endif %}</td>
                                                                                                    <td class="pt-6 fw-bolder"> {% if order_item.bill.payable_amount %} ${{ order_item.bill.payable_amount  }}{% else %}$0.00{% endif %}</td>
                                                                                                    <td class="pt-6 fw-bolder"> {{ order_item.bill.due_date  }} </td>
                                                                                                    <td class="pt-6 fw-bolder"> 
                                                                                                    {% if order_item.bill.get_bill_payment_records %}
                                                                                                        {% for i_pay in order_item.bill.get_bill_payment_records %}
                                                                                                            {% if forloop.counter == 1 %}
                                                                                                                {{i_pay.pay_date}}
                                                                                                            {% endif %}
                                                                                                        {% endfor %}
                                                                                                    {% else %}
                                                                                                            -
                                                                                                    {% endif %}</td>
                                                                                                    {% if order_item.bill.attachment %}
                                                                                                    <td class="pt-6 fw-bolder"> <a href="/media/{{order_item.bill.attachment}}" target="_blank" title="View Supplier Invoice PDF" class="pdf-icon"> <i class="fa-solid fa-file-pdf"></i></a></td>
                                                                                                    {% endif %}
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                </div>
                                                                                <div class="d-flex justify-content-end"> </div>
                                                                                <div class="flex-lg-row-fluid me-xl-10 mb-10 mb-xl-0"> </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </span>
                    {% else %}
                        <span id="replace_modal_order_{{order_item.id}}">
                            <div id="myModal_order_{{order_item.id}}" class="modal">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h2> &nbsp;
                                            <span class=" fw-bold badge py-3 px-4 fs-7  {% if order_item.status == 0   or  order_item.tracking_status ==  0 %} ordered {% endif %}  {% if order_item.status == 1   or  order_item.tracking_status ==  1  %} shipped {% endif %}  {% if order_item.status == 3   or  order_item.tracking_status ==  3%} arrived {% endif %}  {% if order_item.status == 4   %} booked {% endif %} {% if order_item.status != 4 and order_item.status != 0 and order_item.status != 1 and order_item.status != 3 %} installed {% endif %}">
                                                    {% if order_item.status == 0 %} Ordered {% endif %}  {% if order_item.status == 1 %} Shipped {% endif %}  {% if order_item.status == 3 %} Arrived {% endif %}  {% if order_item.status == 4 %} Booked For {% if order_item.is_trade != 1 %} Install {% else %} Pickup {% endif %} {% endif %} 
                                            </span>
                                        </h2>
                                        <span style="display:flex;">
                                        {% if order_item.is_trade != 1 %}
                                        <div class="card-toolbar mr-3">
                                            <div class="d-flex flex-stack flex-wrap gap-4">
                                             <form method="POST" action="{% 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" required>
                                               {% if order_item.status == 0 %} <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> 
                                                {% endif %}
                                                {% if order_item.status == 1 %} 
                                                    <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> 
                                                {% endif %}
                                                 {% if order_item.status == 3 %} 
                                                    <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> 
                                                {% endif %}
                                            </select> 
                                             <input type="hidden" name="order_item_id" id="order_item_id" value="{{order_item.id}}">
                                            <button type="submit" style="margin-left:5px;" class="btn btn-primary ml-2">Update</button>
                                            </form>
                                            </div>
                                        </div>
                                        {% endif %}
                                        <button id="closeModalBtn" style="margin-left:15px;" onclick="closeModal('{{order_item.id}}','order')">X</button>
                                        </span>
                                    </div>
                                    <div class="modal-body">
                                        <div class="orders-details mt-5">
                                            <div class="row g-5">
                                                <div class="col-md-4">
                                                    <div class="card track-card cus-card card-flush flex-row-fluid position-relative"> 
                                                        <div class="card-header track-head">
                                                            <div class="card-title">
                                                                <div class="d-flex align-items-center">
                                                                    <i  class="ki-outline ki-profile-circle fs-1 me-2 text-b"></i> 
                                                                     <a href="#"  class="text-gray-800 text-hover-primary text-b">
                                                                        {% if order_item.order.invoice.customer.company_name %}
                                                                            {{ order_item.order.invoice.customer..company_name }}
                                                                        {% else %}
                                                                            {{ order_item.order.invoice.customer.first_name}}   {{ order_item.order.invoice.customer.last_name}}
                                                                        {% endif %}
                                                                        </a> 
                                                                </div>
                                                            </div>
                                                        </div> 
                                                        <div class="pt-0 cus-body">
                                                            <div class="table-responsive"> 
                                                                <table  class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                        <tr>
                                                                            <td class="text-gray-800">
                                                                                <div class="d-flex align-items-center">
                                                                                    <i class="ki-outline ki-sms fs-2 me-2 text-b"></i>
                                                                                    <a href="#" class="text-gray-600 text-hover-primary text-b"> {{ order_item.order.invoice.customer.email}} </a>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="text-gray-800">
                                                                                <div class="d-flex align-items-center text-b">
                                                                                    <i  class="ki-outline ki-phone fs-2 me-2 text-b"></i>{{ order_item.order.invoice.customer.phone1}}
                                                                                </div>
                                                                            </td>
                                                                        </tr> 
                                                                </table> 
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="card track-card bill-card card-flush mb-5 order-card position-relative">
                                                        <div class="card-header track-head">
                                                            <div class="card-title">
                                                                <div class="d-flex align-items-center">
                                                                    <i  class="ki-outline ki-notepad-bookmark fs-1 me-2 text-b"></i> 
                                                                     <a href="#"  class="text-gray-800 text-hover-primary text-b">Order ID: #{{ order_item.order.id }}</a> 
                                                                </div>
                                                            </div>
                                                        </div> 
                                                        <div class="pt-0 cus-body">
                                                            <div class="table-responsive"> 
                                                                <table  class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                    <tr>
                                                                        <td class="text-gray-800">
                                                                            <div class="d-flex align-items-center">
                                                                                <i class="ki-outline ki-calendar fs-2 me-2 text-b"></i>
                                                                                <a href="#" class="text-gray-600 text-hover-primary text-b"> {{ order_item.order.created_at }} </a>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                </table> 
                                                            </div>
                                                        </div>                                
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="card track-card card-flush invoice-card track-card flex-row-fluid position-relative"> 
                                                        <div class="card-header track-head">
                                                            <div class="card-title">
                                                                <div class="d-flex align-items-center">
                                                                    <i  class="ki-outline ki-document fs-1 me-2 text-b"></i> 
                                                                     <a href="#"  class="text-gray-800 text-hover-primary text-b">Inv ID: #{{ order_item.order.invoice.id }}</a> 
                                                                </div>
                                                            </div>
                                                        </div> 
                                                        <div class="pt-0 cus-body">
                                                            <div class="table-responsive"> 
                                                                <table  class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                    <tr>
                                                                        <td class="text-gray-800">
                                                                            <div class="d-flex align-items-center">
                                                                                <i class="ki-outline ki-calendar fs-2 me-2 text-b"></i>
                                                                                <a href="#" class="text-gray-600 text-hover-primary text-b"> {{ order_item.order.invoice.created_at }} </a>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="text-gray-800">
                                                                            <div class="d-flex align-items-center">
                                                                                <i class="ki-outline ki-save-deposit fs-2 me-2 text-b"></i>
                                                                                <a href="#" class="text-gray-600 text-hover-primary text-b">Balance  ${{order_item.order.invoice.payable_amount }}  </a>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                 </table> 
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="cards p-0">
                                                        <div class="card-body ex-b">
                                                            <div id="kt_activity_today_serial{{order_item.id}}" class="card-body p-0 tab-pane fade show active" role="tabpanel"  aria-labelledby="kt_activity_today_tab">
                                                                <div class="cards card-flush h-xl-100" data-select2-id="select2-data-124-p5cu">
                                                                    <div class="card-header p-0" data-select2-id="select2-data-123-flzv">
                                                                        <!--begin::Title-->
                                                                        <h3 class="card-title align-items-start flex-column">
                                                                            <span  class="card-label fw-bold text-gray-800 text-b">Bill Product</span>
                                                                            <span class="text-gray-500 mt-1 fw-semibold fs-6 text-b"></span>
                                                                        </h3>
                                                                        <div class="card-toolbar">
                                                                            <div class="d-flex flex-stack flex-wrap gap-4">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="card-body pt-2">
                                                                        <div>
                                                                            <div class="table-responsive">
                                                                                <table class="table align-middle table-row-dashed fs-6 gy-3  no-footer tracking-table"  >
                                                                                    <thead>
                                                                                        <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                                                                            <th colspan="2" class="min-w-100px sorting_disabled"  rowspan="1" style="">Product </th>
                                                                                            <th class="min-w-100px sorting_disabled" rowspan="1" style="">Serial Number </th>
                                                                                            <th class="min-w-100px sorting_disabled" rowspan="1"  style="">Supplier</th>
                                                                                            <th class="min-w-100px sorting_disabled" rowspan="1"  style="">Quantity</th>
                                                                                            <th class="min-w-100px sorting_disabled"  rowspan="1"  style="">Tracking Status</th>
                                                                                        </tr>
                                                                                    </thead>
                                                                                    <tbody class="fw-bold text-gray-600">
                                                                                        <tr data-kt-table-widget-4="subtable_template" class="">
                                                                                            <td colspan="2">
                                                                                                <div  class="d-flex align-items-center gap-3">
                                                                                                    <a href="#" class="symbol symbol-50px bg-secondary bg-opacity-25 rounded ">
                                                                                                        <img src="https://ea.stagingstorm.com/media/product_images/main_images/4.jpg" data-kt-src-path="https://ea.stagingstorm.com/media/product_images/main_images/4.jpg" alt=""  data-kt-table-widget-4="template_image">
                                                                                                    </a>
                                                                                                    <div class="d-flex flex-column">
                                                                                                        <a href="#" class="text-gray-800 text-hover-primary fw-bold"   data-kt-table-widget-4="template_name">{{order_item.product.product_name}}-({{order_item.product.sku}})
                                                                                                          </a>                                                                                           
                                                                                                    </div>
                                                                                                </div>
                                                                                            </td>
                                                                                            <td class="text-start">
                                                                                                <div class=" fs-7 fw-bold"  data-kt-table-widget-4="template_cost"> {{order_item.serial_number}}</div>
                                                                                            </td>
                                                                                            <td class="text-start">
                                                                                                <div class="fs-7 fw-bold"  data-kt-table-widget-4="template_cost">{% if order_item.serial_number.bill.supplier != None %}{{order_item.serial_number.bill.supplier}}{% else %} - {% endif %}</div>
                                                                                            </td>
                                                                                            <td class="text-start">
                                                                                                <div class="fs-7 fw-bold"
                                                                                                    data-kt-table-widget-4="template_qty">
                                                                                                   1</div>
                                                                                            </td>
                                                                                            <td class="text-start">
                                                                                                <div class="fs-7 fw-bold"  data-kt-table-widget-4="template_stock">
                                                                                                    <div class="badge   {% if order_item.status == 0   or  order_item.tracking_status ==  0 %} ordered {% endif %}  {% if order_item.status == 1   or  order_item.tracking_status ==  1  %} shipped {% endif %}  {% if order_item.status == 3   or  order_item.tracking_status ==  3%} arrived {% endif %}  {% if order_item.status == 4   %} booked {% endif %} {% if order_item.status != 4 and order_item.status != 0 and order_item.status != 1 and order_item.status != 3 %} installed {% endif %}">
                                                                                                        {% if order_item.status == 0 %} Ordered {% endif %}  {% if order_item.status == 1 %} Shipped {% endif %}  {% if order_item.status == 3 %} Arrived {% endif %}  {% if order_item.status == 4 %} Booked For {% if order_item.is_trade != 1 %} Install {% else %} Pickup {% endif %} {% endif %} 
                                                                                                    </div>
                                                                                                    </div>
                                                                                                </td>
                                                                                             
                                                                                            </tr>
                                                                                    </tbody>
                                                                                </table>
                                                                            </div>
                                                                            <div class="row">
                                                                                <div
                                                                                    class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start">
                                                                                </div>
                                                                                <div
                                                                                    class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                           
                                                            {% if order_item.order.invoice != None %}
                                                            <div class="card-header p-0">
                                                                <h3 class="card-title align-items-start flex-column">
                                                                    <span  class="card-label fw-bold text-gray-800">Payment Details </span>
                                                                    <span class="text-gray-500 mt-1 fw-semibold fs-6"></span>
                                                                </h3>
                                                            </div>
                                                            <div id="kt_activity_month_serial{{order_item.id}}" class="card-body p-0 tab-pane fade show active ex-b" role="tabpanel" aria-labelledby="kt_activity_month_tab">
                                                                <div class="cards p-0">
                                                                    <div class="card-body">
                                                                        <div class="d-flex flex-column flex-xl-row">
                                                                            <div class="flex-grow-1">
                                                                                <div class="table-responsive border-bottom mb-9">
                                                                                    <table class="table mb-3 tracking-table">
                                                                                        <thead>
                                                                                            <tr class="border-bottom fs-6 fw-bold text-muted">
                                                                                                <th class="min-w-50px sorting_disabled"> Invoice ID</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Total Amount</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Paid</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Balance</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Due Date</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Last Payment Date</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Invoice</th>
                                                                                            </tr>
                                                                                        </thead>
                                                                                        <tbody>
                                                                                            <tr class="fw-bold text-gray-700 fs-5">
                                                                                                <td class="d-flex align-items-center pt-6"> <i class="fa fa-genderless text-danger fs-2 me-2"></i>{{ order_item.order.invoice.id }} </td>
                                                                                                    <td class="pt-6 fw-bolder"> ${{ order_item.order.invoice.total }}</td>
                                                                                                    <td class="pt-6 fw-bolder"> ${{ order_item.order.invoice.total_paid_amount }}</td>
                                                                                                    <td class="pt-6 fw-bolder"> ${{order_item.order.invoice.payable_amount }}</td>
                                                                                                    <td class="pt-6 fw-bolder">{{order_item.order.invoice.due_date }}</td>
                                                                                                    
                                                                                                     <td class="pt-6 fw-bolder"> 
                                                                                                    {% if order_item.order.invoice.total !=  order_item.order.invoice.payable_amount %}
                                                                                                             {{order_item.order.invoice.get_invoice_last_payment_record.created_at}}
                                                                                                    {% else %}
                                                                                                            -
                                                                                                    {% endif %}</td>
                                                                                                    {% if order_item.order.invoice.myob_invoice_pdf %}
                                                                                                    <td class="pt-6 fw-bolder"> <a href="/media/{{order_item.order.invoice.myob_invoice_pdf}}" target="_blank" title="Myob Invoice PDF" class="pdf-icon"> <i class="fa-solid fa-file-pdf"></i></a></td>
                                                                                                    {% endif %}
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                </div>
                                                                                <div class="d-flex justify-content-end"> </div>
                                                                                <div class="flex-lg-row-fluid me-xl-10 mb-10 mb-xl-0"> </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            {% endif %}
                                                            
                                                            {% if order_item.status == 4 %}
                                                            <div class="card-header p-0">
                                                                <h3 class="card-title align-items-start flex-column">
                                                                    <span  class="card-label fw-bold text-gray-800">Assigned Technician Details </span>
                                                                    <span class="text-gray-500 mt-1 fw-semibold fs-6"></span>
                                                                </h3>
                                                            </div>
                                                            <div id="kt_activity_month_serial{{order_item.id}}" class="card-body p-0 tab-pane fade show active ex-b" role="tabpanel" aria-labelledby="kt_activity_month_tab">
                                                                <div class="cards p-0">
                                                                    <div class="card-body">
                                                                        <div class="d-flex flex-column flex-xl-row">
                                                                            <div class="flex-grow-1">
                                                                                <div class="table-responsive border-bottom mb-9">
                                                                                    <form action="/update/technician_order/" method="post">
                                                                                    {% csrf_token %}
                                                                                    <table class="table mb-3 tracking-table">
                                                                                        <thead>
                                                                                            <tr class="border-bottom fs-6 fw-bold text-muted">
                                                                                                <th class="min-w-50px sorting_disabled"> Technician</th>
                                                                                                <th class="min-w-50px sorting_disabled"> {% if order_item.is_trade != 1 %}Installation Date{% else %}Pickup Date{% endif %}</th>
                                                                                                <th class="min-w-50px sorting_disabled"> {% if order_item.is_trade != 1 %}Installation Time{% else %}Pickup Time{% endif %}</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Action</th>
                                                                                            </tr>
                                                                                        </thead>
                                                                                        <tbody>
                                                                                            <tr class="fw-bold text-gray-700 fs-5">
                                                                                                <td class="d-flex align-items-center pt-6"> <i class="fa fa-genderless text-danger fs-2 me-2"></i>
                                                                                                    <select class="form-select" data-placeholder="Select Technician" name="technician" id="technician" required>
                                                                                                        <option disabled selected value="">Select Technician</option>
                                                                                                        {% for technician in technicians %}
                                                                                                            <option value="{{ technician.id }}" {% if order_item.ordered_technician.technician == technician %} selected {% endif %}>{{ technician.userinfo.first_name }} {{ technician.userinfo.last_name }}</option>
                                                                                                        {% endfor %}
                                                                                                    </select>
                                                                                                    <input type="hidden" name="order_item_id" class="orderItemIdInput" value="{{order_item.id}}">
                                                                                                    <input type="hidden" name="order_identifier" class="orderItemIdentifierInput" value="{{order_item.order_identifier}}">
                                                                                                </td>
                                                                                                <td class="pt-6 fw-bolder">
                                                                                                    <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_cost">
                                                                                                        <div class="input-group" id="kt_td_picker_localization{{order_item.id}}" data-td-target-input="nearest" data-td-target="#kt_td_picker_localization{{order_item.id}}" data-td-toggle="datetimepicker">
                                                                                                            <input type="text" class="form-control start_date{{order_item.id}}" data-td-target="#kt_td_picker_localization{{order_item.id}}" readonly name="installation_date"  value="{% if order_item.installation_date %}{{order_item.installation_date|date:"d-m-Y"}}{% else %}{% now 'd-m-Y' %}{% endif %}" required />
                                                                                        
                                                                                                            <span class="input-group-text" data-td-target="#kt_td_picker_localization{{order_item.id}}" data-td-toggle="datetimepicker">
                                                                                                                <i class="ki-duotone ki-calendar fs-2"><span class="path1"></span><span class="path2"></span></i>
                                                                                                            </span>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </td>
                                                                                                <td class="pt-6 fw-bolder"> 
                                                                                                    <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_cost">
                                                                                                     <select class="form-select" data-placeholder="Select Installation Time" name="installation_time" id="installation_time" required>
                                                                                                        <option disabled selected value="">Select {% if order_item.is_trade != 1 %}Installation{% else %}Pickup{% endif %} Time</option>

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

                                                                                                        <option  {% if order_item.installation_time|time:"h:i" == '01:00' %} selected {% endif %} value="01:00">01:00</option>
                                                                                                        <option  {% if order_item.installation_time|time:"h:i" == '01:30' %} selected {% endif %} value="01:30">01:30</option>
                                                                                                        <option  {% if order_item.installation_time|time:"h:i" == '02:00' %} selected {% endif %} value="02:00">02:00</option>
                                                                                                        <option  {% if order_item.installation_time|time:"h:i" == '02:30' %} selected {% endif %} value="02:30">02:30</option>
                                                                                                        <option  {% if order_item.installation_time|time:"h:i" == '03:00' %} selected {% endif %} value="03:00">03:00</option>
                                                                                                        <option  {% if order_item.installation_time|time:"h:i" == '03:30' %} selected {% endif %} value="03:30">03:30</option>
                                                                                                        <option  {% if order_item.installation_time|time:"h:i" == '04:00' %} selected {% endif %} value="04:00">04:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '04:30' %} selected {% endif %}  value="04:30">04:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '05:00' %} selected {% endif %} value="05:00">05:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '05:30' %} selected {% endif %} value="05:30">05:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '06:00' %} selected {% endif %} value="06:00">06:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '06:30' %} selected {% endif %} value="06:30">06:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '07:00' %} selected {% endif %} value="07:00">07:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '07:30' %} selected {% endif %} value="07:30">07:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '08:00' %} selected {% endif %} value="08:00">08:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '08:30' %} selected {% endif %} value="08:30">08:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '09:00' %} selected {% endif %} value="09:00">09:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '09:30' %} selected {% endif %} value="09:30">09:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '10:00' %} selected {% endif %} value="10:00">10:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '10:30' %} selected {% endif %} value="10:30">10:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '11:00' %} selected {% endif %} value="11:00">11:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '11:30' %} selected {% endif %} value="11:30">11:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '12:00' %} selected {% endif %} value="12:00">12:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '12:30' %} selected {% endif %} value="12:30">12:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '13:00' %} selected {% endif %} value="13:00">13:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '13:30' %} selected {% endif %} value="13:30">13:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '14:00' %} selected {% endif %} value="14:00">14:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '14:30' %} selected {% endif %} value="14:30">14:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '15:00' %} selected {% endif %} value="15:00">15:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '15:30' %} selected {% endif %} value="15:30">15:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '16:00' %} selected {% endif %} value="16:00">16:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '16:30' %} selected {% endif %} value="16:30">16:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '17:00' %} selected {% endif %} value="17:00">17:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '17:30' %} selected {% endif %} value="17:30">17:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '18:00' %} selected {% endif %} value="18:00">18:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '18:30' %} selected {% endif %} value="18:30">18:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '19:00' %} selected {% endif %} value="19:00">19:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '19:30' %} selected {% endif %} value="19:30">19:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '20:00' %} selected {% endif %} value="20:00">20:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '20:30' %} selected {% endif %} value="20:30">20:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '21:00' %} selected {% endif %} value="21:00">21:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '21:30' %} selected {% endif %} value="21:30">21:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '22:00' %} selected {% endif %} value="22:00">22:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '22:30' %} selected {% endif %} value="22:30">22:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '23:00' %} selected {% endif %} value="23:00">23:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '23:30' %} selected {% endif %} value="23:30">23:30</option>
                                                                                                     </select>
                                                                                                    </div>
                                                                                                </td>
                                                                                                <td class="pt-6 fw-bolder">
                                                                                                    <button type="submit" class="btn tech-btn">Update</button>
                                                                                                </td>
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                    </form>
                                                                                </div>
                                                                                <div class="d-flex justify-content-end"> </div>
                                                                                <div class="flex-lg-row-fluid me-xl-10 mb-10 mb-xl-0"> </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </span>
                    {% endif %}
                {% endfor %}
                </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>
                    <div class="modal-body">
                        <p><b>Order Id:</b> <span id="orderIdPlaceholder"></span></p>
                        <p><b>Orderitem Id:</b> <span id="orderItemIdPlaceholder"></span></p>
                        <p><b>Customer Name: </b><span id="ordercustname"></span></p>
                        <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>
                             <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 Arrival Date</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="orderIdPlaceholderETA"></span></p>
                        <p><b class="replace_order_bill">Bill Item 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);
    }
    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(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'),draggedCard.getAttribute('data-bill-id'));
                    // 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(fromListStatus==4 && toListStatus < 4)
                {
                    console.log('out');
                    draggedCard.style.opacity = '1';
                    if(fromListStatus == 4 && toListStatus != 4 )
                    {
                        alert("Sorry, this order is already assigned to a technician so order status can’t be reverted");
                    }
               
                }
                else
                {
                    var isSerialNumber = parseFloat(draggedCard.getAttribute('data-serial_number'));
                    console.log('isSerialNumber',isSerialNumber);
                    if (toListStatus === 4 && isSerialNumber == 0)
                    {
                         draggedCard.style.opacity = '1';
                         alert("Sorry, this order have unallocated serial number.");
                         return false;
                    }
                    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'),draggedCard.getAttribute('data-order-id'));
                                      $.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'),draggedCard.getAttribute('data-bill-id'));
                        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);
                                }
                            });
                        
                    }
                }
               
            }
        }

    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,orderId) {
        // 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;
        document.getElementById('orderIdPlaceholder').innerHTML = orderId;

        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,billId) {
        // 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;
        document.getElementById('orderIdPlaceholderETA').innerHTML = billId;
        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,billId) {
        // 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;
        document.getElementById('orderIdPlaceholderETA').innerHTML = billId;
        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,  },
        components: { clock: false, },
    },
    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,  },
        components: { clock: false, },
        
    },
    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.is_trade == 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,  },
                components: { clock: false, },
            },
            localization: {
               locale: "en",
               startOfTheWeek: 1,
               format: "dd-MM-yyyy",
           },
           restrictions: {  minDate: $(".start_datetoday").val(),  },
        });
        {% endif %}
    {% endif %}
{% endfor %}

</script>
{% endblock script %}