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

{% load i18n %}

{% block title %}{% translate "Tracking Status" %}{% endblock %}
{% block addjshead %}
<!--<script src="https://cdn.ckeditor.com/ckeditor5/39.0.2/classic/ckeditor.js"></script>-->
{% 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: 12px;
        overflow-x: scroll;
    }
    .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: 11px !important;
    border-radius: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px !important;
    text-align: left;
    }
     .card.ind-card table td.supplier-text .fs-8.fw-bold.text-muted{
        background: #e2f0ff;
    width: max-content;
    margin-left: auto;
    color: #000 !important;
    padding: 3px 7px;
    font-size: 11px !important;
    border-radius: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px !important;
    text-align: left;
    }
    #top-scrollbar {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
      margin-bottom: 8px;
              scrollbar-color: #dddddd transparent;
}

#top-scrollbar div {
  height: 1px;
}

/* Optional: nicer scrollbar */
#top-scrollbar::-webkit-scrollbar {
  height: 8px;
  color: #d5d5d5 !important;
}

#top-scrollbar::-webkit-scrollbar-track {
  background: #c7c7c9; /* your color */
}

#top-scrollbar::-webkit-scrollbar-thumb {
  background: #a8a8aa; /* draggable part */
  border-radius: 10px;
scrollbar-color: #d5d5d5 transparent;
}

#top-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #a8a8aa;
}
   .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: 23%;
        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;
    }
    #list12 {
        background: #c57f001f;
        border-radius: 8px;
    }

    #list4 {
        background: #3e008014;
        border-radius: 8px;
    }
        #list5 {
        background: #ff005021;
        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;
    }
     #list5 .list-title {
        background: #ff00503b;
    }
 #list12 .list-title {
        background: #fde6bf;
    }
    .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
    }
 .modal .modal-content{
          max-height: 90%;
           height: max-content;
    }
.modal .modal-content .modal-body{
       
        height: max-content;
        overflow-y:scroll;
        max-height:500px;
      
    }
.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;
    }
    
    #board .min-w-200px a.text-gray-900{
        font-size:12px;
    }
    .card.ind-card .ind-card-footer .ind-card-fdiv a.workorder-pdf i.fa-solid.fa-file-pdf{
        padding:0px;
        background:transparent;
        margin-right:5px;
        font-size: 16px !important;
    margin-top: 3px;
    }
    
    
     @media screen and (max-width: 1400px) {
    .orders-details .card.track-card .d-flex.align-items-center a {
    width: 87%;
    max-width: 87%;
    
    }
</style>
<div class="custom mt-3 create-cust cal2 track-card">
    <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 tracking-sebar">
                            <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="top-scrollbar">
                <div></div>
                </div>
                <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">
                                                             {% if order_item.updated_at %}<div class="fs-7 text-muted fw-bold date-s mb-3">{{ order_item.updated_at|date:"d b Y" }}</div>{% endif %}
                                                            <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  supplier-text">
                                                       <!--<span class="serialStatus-{{order_item.get_status_display}}">{{order_item.get_status_display}}</span>-->
                                                        
                                                        {% if order_item.bill.supplier.supplier_code %}<div class="fs-8 fw-bold text-muted">{{ order_item.bill.supplier.supplier_code}}{% if order_item.bill.invoice_number %}{% endif %}</div> {% endif %}
                                                    </td>
                                                </tr>
                                            </table>
                                            </div>
                                            <div class="ind-card-footer">
                                                <!--<span><a href="#" class="mb-1 fs-7 text-muted fw-bold"> {% if order_item.bill.id %}BILL ID: {{ order_item.bill.id }}{% endif %}</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-work_order="0" 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">
                                                                 {% if order_item.updated_at %} <div class="fs-7 text-muted fw-bold date-s mb-3">{{ order_item.updated_at|date:"d b Y" }}</div>{% endif %}
                                                                <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 supplier-text">
                                                           <!--<span class="serialStatus-{{order_item.get_status_display}}">{{order_item.get_status_display}}</span>-->
                                                            
                                                           {% if order_item.bill.supplier.supplier_code %} <div class="fs-8 fw-bold text-muted ">{{ order_item.bill.supplier.supplier_code}}{% if order_item.bill.invoice_number %}{% endif %}</div>{% endif %}
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                            <div class="ind-card-footer">
                                                <span><a href="#" class="mb-1 fs-7 text-muted fw-bold"> {% if order_item.bill.id %}BILL ID: {{ order_item.bill.id }}{% endif %}</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-work_order="0"  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">
                                                                {% if order_item.arrived_date %}<div class="fs-7 text-muted fw-bold date-s mb-3">{{ order_item.arrived_date|date:"d b Y" }}</div> {% endif %}
                                                                <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 supplier-text">
                                                           <!--<span class="serialStatus-{{order_item.get_status_display}}">{{order_item.get_status_display}}</span>-->
                                                            
                                                            {% if order_item.bill.supplier.supplier_code %}<div class="fs-8 fw-bold text-muted">{{ order_item.bill.supplier.supplier_code}}</div>{% endif %}
                                                            
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                            <div class="ind-card-footer">
                                                <span><a href="#" class="mb-1 fs-7 text-muted fw-bold">{% if order_item.bill.id %}BILL ID: {{ order_item.bill.id }}{% endif %}</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-work_order="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.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="list12" data-status="12" ondrop="handleDrop(event)" ondragover="allowDrop(event)">
                        <div class="list-title">
                            <h2 class="list-title-text">Ready For Install</h2>
                            <i class="ki-duotone ki-abstract-42">
                            <span class="path1"></span>
                            <span class="path2"></span>
                            </i>
                        </div>
                        {% for order_item in order_items %}   
                            {% if order_item.serial_number.id %}
                                {% if order_item.status == 12 %}
                                    <div class="card ind-card"  draggable="true" ondragstart="handleDragStart(event)" is_pickup="0" data-customer-name="{{ order_item.order.invoice.customer }}" data-customer-address="({% if order_item.order.invoice.customer.street %} {{order_item.order.invoice.customer.street}}{% endif%}
                                          {% if order_item.order.invoice.customer.city %}, {{order_item.order.invoice.customer.city}}{% endif%}
                                           {% if order_item.order.invoice.customer.state %}, {{order_item.order.invoice.customer.state}}{% endif%}
                                            {% if order_item.order.invoice.customer.country %}, {{order_item.order.invoice.customer.country}}{% endif%}
                                             {% if order_item.order.invoice.customer.post_code %}, {{order_item.order.invoice.customer.post_code}} {% endif%})" data-work_order="{% if order_item.installation_job.work_order_pdf %}1{% else %}0{% endif %}"  data-order-item-id="{{ order_item.id }}"  data-type="order"   data-work-order="{% if order_item.installation_job.work_order_pdf %}1{% else %}0{% endif %}" 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 </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>
                                                <span class="ind-card-fdiv">
                                                 {% if order_item.installation_job.work_order_pdf %}
                                                    <a href="{{ order_item.installation_job.work_order_pdf.url }}" target="_blank" title="View WorkOrder"  class="pdf-icon workorder-pdf" > <i class="fa-solid fa-file-pdf"></i> </a>
                                                    <a href="javascript:void(0)" onclick="event.stopPropagation(); openModal('{{ order_item.id }}','workorder_edit')" title="Edit WorkOrder"  class="pdf-icon workorder-pdf" > <i class="fa-solid fa-file-pen"></i> </a>
                                                    {% else %}
                                                     <a href="javascript:void(0)" onclick="event.stopPropagation(); openModalwork_order('{{ order_item.id }}','work_order')" title="Add WorkOrder"  class="pdf-icon workorder-pdf" > <i class="fa-solid fa-plus"></i> </a>
                                                 {% endif %}
                                                {% 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 %}
                                                </span>
                                                
                                                
                                                
                                            </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</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 }}" data-customer-address="({% if order_item.order.invoice.customer.street %} {{order_item.order.invoice.customer.street}}{% endif%}
                                          {% if order_item.order.invoice.customer.city %}, {{order_item.order.invoice.customer.city}}{% endif%}
                                           {% if order_item.order.invoice.customer.state %}, {{order_item.order.invoice.customer.state}}{% endif%}
                                            {% if order_item.order.invoice.customer.country %}, {{order_item.order.invoice.customer.country}}{% endif%}
                                             {% if order_item.order.invoice.customer.post_code %}, {{order_item.order.invoice.customer.post_code}} {% endif%})"  data-start-date="{% if order_item.ordered_technician %}{{order_item.installation_date|date:"d-m-Y"}}{% else %}{% now 'd-m-Y' %}{% endif %}"
                                data-end-date="{% if order_item.ordered_technician %}{{order_item.installation_end_date|date:"d-m-Y"}}{% else %}{% now 'd-m-Y' %}{% endif %}"
                                data-time="{% if order_item.ordered_technician %}{{ order_item.installation_time|time:'h:i' }}{% else %}0{% endif %}" is_pickup="0" data-tech="{% if order_item.ordered_technician %}{{ order_item.ordered_technician.technician.id }}{% else %}0{% endif %}"  data-sec-tech="{% if order_item.ordered_technician %}{{ order_item.ordered_technician.secondary_technician.id }}{% else %}0{% endif %}" 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_time %}<br/>{{order_item.installation_time|date:"g A"}}{% else %} - {% endif %} {% if order_item.installation_end_date %}<br>{{order_item.installation_end_date|date:"d-m-Y"}}{% 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>
                                                <span class="ind-card-fdiv">
                                                 {% if order_item.installation_job.work_order_pdf %}
                                                    <a href="{{ order_item.installation_job.work_order_pdf.url }}" target="_blank" title="View WorkOrder"  class="pdf-icon workorder-pdf" > <i class="fa-solid fa-file-pdf"></i> </a>
                                                      <a href="javascript:void(0)" onclick="event.stopPropagation(); openModal('{{ order_item.id }}','workorder_edit')" title="Edit WorkOrder"  class="pdf-icon workorder-pdf" > <i class="fa-solid fa-file-pen"></i> </a>
                                                    {% else %}
                                                     <a href="javascript:void(0)" onclick="event.stopPropagation(); openModalwork_order('{{ order_item.id }}','work_order')" title="Add WorkOrder"  class="pdf-icon workorder-pdf" > <i class="fa-solid fa-plus"></i> </a>
                                                 {% endif %}
                                                {% 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 %}
                                                </span>
                                            </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 }}" data-customer-address="({% if order_item.order.invoice.customer.street %} {{order_item.order.invoice.customer.street}}{% endif%}
                                          {% if order_item.order.invoice.customer.city %}, {{order_item.order.invoice.customer.city}}{% endif%}
                                           {% if order_item.order.invoice.customer.state %}, {{order_item.order.invoice.customer.state}}{% endif%}
                                            {% if order_item.order.invoice.customer.country %}, {{order_item.order.invoice.customer.country}}{% endif%}
                                             {% if order_item.order.invoice.customer.post_code %}, {{order_item.order.invoice.customer.post_code}} {% endif%})" is_pickup="1"  data-start-date="{% if order_item.ordered_technician %}{{order_item.installation_date|date:"d-m-Y"}}{% else %}{% now 'd-m-Y' %}{% endif %}"
                                data-end-date="{% if order_item.ordered_technician %}{{order_item.installation_end_date|date:"d-m-Y"}}{% else %}{% now 'd-m-Y' %}{% endif %}"
                                data-time="{% if order_item.ordered_technician %}{{ order_item.installation_time|time:'h:i' }}{% else %}0{% endif %}"   data-tech="{% if order_item.ordered_technician %}{{ order_item.ordered_technician.technician.id }}{% else %}0{% endif %}"  data-sec-tech="{% if order_item.ordered_technician %}{{ order_item.ordered_technician.secondary_technician.id }}{% else %}0{% endif %}" 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>
                                                <span class="ind-card-fdiv">
                                                 {% if order_item.installation_job.work_order_pdf %}
                                                    <a href="{{ order_item.installation_job.work_order_pdf.url }}" target="_blank" title="View WorkOrder"  class="pdf-icon workorder-pdf" > <i class="fa-solid fa-file-pdf"></i> </a>
                                                      <a href="javascript:void(0)" onclick="event.stopPropagation(); openModal('{{ order_item.id }}','workorder_edit')" title="Edit WorkOrder"  class="pdf-icon workorder-pdf" > <i class="fa-solid fa-file-pen"></i> </a>
                                                    {% else %}
                                                     <a href="javascript:void(0)" onclick="event.stopPropagation(); openModalwork_order('{{ order_item.id }}','work_order')" title="Add WorkOrder"  class="pdf-icon workorder-pdf" > <i class="fa-solid fa-plus"></i> </a>
                                                 {% endif %}
                                                    {% 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 %}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}
                        {% endfor %}
                    </div>
                    <div class="list" id="list5"   data-status="4" ondrop="handleDrop(event)" ondragover="allowDrop(event)">
                        <div class="list-title">
                            <h2 class="list-title-text">Service Ticket</h2>
                           <i class="ki-outline ki-wrench fs-2x"></i>
                        </div>
                        {% for order_item in services %}   
                            <div class="card ind-card"  draggable="true" ondragstart="handleDragStart(event)" data-customer-name="{{ order_item.order_item.order.invoice.customer }}" data-customer-address="({% if order_item.order_item.order.invoice.customer.street %} {{order_item.order_item.order.invoice.customer.street}}{% endif%}
                                          {% if order_item.order_item.order.invoice.customer %}, {{order_item.order_item.order.invoice.customer}}{% endif%}
                                           {% if order_item.order_item.order.invoice.customer.state %}, {{ order_item.order_item.order.invoice.customer.state}}{% endif%}
                                            {% if order_item.order_item.order.invoice.customer.country %}, {{ order_item.order_item.order.invoice.customer.country}}{% endif%}
                                             {% if order_item.order_item.order.invoice.customer.post_code %}, {{ order_item.order_item.order.invoice.customer.post_code}} {% endif%})"  data-start-date="{% if order_item.order_item.ordered_technician %}{{order_item.order_item.installation_date|date:"d-m-Y"}}{% else %}{% now 'd-m-Y' %}{% endif %}"
                                data-end-date="{% if order_item.order_item.ordered_technician %}{{order_item.order_item.installation_end_date|date:"d-m-Y"}}{% else %}{% now 'd-m-Y' %}{% endif %}"
                                data-time="{% if order_item.ordered_technician %}{{ order_item.installation_time|time:'h:i' }}{% else %}0{% endif %}" is_pickup="0" data-tech="{% if order_item.order_item.ordered_technician %}{{ order_item.order_item.ordered_technician.technician.id }}{% else %}0{% endif %}"  data-sec-tech="{% if order_item.order_item.ordered_technician %}{{ order_item.order_item.ordered_technician.secondary_technician.id }}{% else %}0{% endif %}" data-order-item-id="{{ order_item.order_item.id }}"  data-type="order"  data-bill-id="{{order_item.order_item.serial_number.bill.id }}"   data-order-id="{{ order_item.order_item.order.id }}"   data-bill-item-id="{{order_item.order_item.serial_number.bill.id }}" data-order-identifier="{{ order_item.order_item.order_identifier }}"  data-bill-identifier="{{ order_item.order_item.bill_identifier }}"       data-order-status="{{ order_item.order_item.status }}" data-bill-status="{{ order_item.order_item.tracking_status }}"  data-serial_number="{% if order_item.order_item.serial_number.serial_number == ' ' or order_item.order_item.serial_number.serial_number == None or order_item.order_item.serial_number.serial_number == '' %}0{% else %}1{% endif %}">
                                        <div class="card-title modal-trigger"  onclick="openModal('{{order_item.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.order_item.product}}({{order_item.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.technician.userinfo %}Tech: {{ order_item.technician.userinfo.get_full_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_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_time %}<br/>{{order_item.installation_time|date:"g A"}}{% else %} - {% endif %} {% if order_item.installation_end_date %}<br>{{order_item.installation_end_date|date:"d-m-Y"}}{% else %} - {% endif %}  </div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                            <div class="ind-card-footer">
                                                <span>
                                                    <!--<a href="#" class="mb-1 fs-7 text-muted fw-bold">Job ID: {{order_item.id}}</a> <div class="mb-1 fs-7 text-muted fw-bold"> </div>-->
                                                    <div class="mb-1 fs-7 text-muted fw-bold inv-id"></div>
                                                </span>
                                                <span class="ind-card-fdiv">
                                                 {% if order_item.work_order_pdf %}
                                                    <a href="{{ order_item.work_order_pdf.url }}" target="_blank" title="View WorkOrder"  class="pdf-icon workorder-pdf" > <i class="fa-solid fa-file-pdf"></i> </a>
                                                      <a href="javascript:void(0)" onclick="event.stopPropagation(); openModal('{{ order_item.id }}','service_workorder_edit')" title="Edit WorkOrder"  class="pdf-icon workorder-pdf" > <i class="fa-solid fa-file-pen"></i> </a>
                                                    {% else %}
                                                 <!--    <a href="javascript:void(0)" onclick="event.stopPropagation(); openModalservice_work_order('{{ order_item.id }}','service_work_order')" title="Add WorkOrder"  class="pdf-icon workorder-pdf" > <i class="fa-solid fa-plus"></i> </a>-->
                                                 {% endif %}
                                                </span>
                                            </div>               
                                        </div>
                                    </div>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <div id="myModal_order_{{order_item.order_item.id}}" class="modal service-job-modal">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h2> &nbsp;
                                            <span class=" fw-bold badge py-3 px-4 fs-7  {% if order_item.order_item.status == 0   or  order_item.order_item.tracking_status ==  0 %} ordered {% endif %}  {% if order_item.order_item.status == 1   or  order_item.order_item.tracking_status ==  1  %} shipped {% endif %}  {% if order_item.order_item.status == 3   or  order_item.order_item.tracking_status ==  3%} arrived {% endif %}  {% if order_item.order_item.status == 4   %} booked {% endif %} {% if order_item.order_item.status != 4 and order_item.order_item.status != 0 and order_item.order_item.status != 1 and order_item.order_item.status != 3 %} installed {% endif %}">
                                                    {% if order_item.order_item.status == 0 %} Ordered {% endif %}  {% if order_item.order_item.status == 1 %} Shipped {% endif %}  {% if order_item.order_item.status == 3 %} Arrived {% endif %}  {% if order_item.working_status == 4 %} Service Requested {% endif %}
                                            </span>
                                        </h2>
                                        <span style="display:flex;">
                                        {% if order_item.order_item.is_trade != 1 %}
                                        <div class="card-toolbar mr-3">
                                            <div class="d-flex flex-stack flex-wrap gap-4">
                                             <form method="POST" action="{% if order_item.working_status == 4 %} {% url 'quotation:cancel_service_job' %} {% endif %}" class="d-flex align-items-center cancel-form">
                                                {% csrf_token %}
                                                {% if order_item.order_item.status != 4 and  order_item.order_item.status < 3 %} 
                                                <select name="status" id="status" aria-label="Status" data-control="select2" data-placeholder="Status"  class="form-select form-select-lg fw-semibold" required>
                                                   {% if order_item.order_item.status == 0 %} <option value="0" {% if order_item.order_item.status == 0 %} selected{% endif %}>Ordered</option>
                                                        <option value="1" {% if order_item.order_item.status == 1 %} selected{% endif %}>Shipped</option>
                                                        <option value="3" {% if order_item.order_item.status == 3 %} selected{% endif %}>Arrived</option>
                                                        <option value="4" {% if order_item.order_item.status == 4 %} selected{% endif %}>Book for Install</option> 
                                                    {% endif %}
                                                    {% if order_item.order_item.status == 1 %} 
                                                        <option value="1" {% if order_item.order_item.status == 1 %} selected{% endif %}>Shipped</option>
                                                        <option value="3" {% if order_item.order_item.status == 3 %} selected{% endif %}>Arrived</option>
                                                        <!--<option value="4" {% if order_item.order_item.status == 4 %} selected{% endif %}>Book for Install</option> -->
                                                    {% endif %}
                                                     {% if order_item.order_item.status == 3 %} 
                                                        <option value="3" {% if order_item.order_item.status == 3 %} selected{% endif %}>Arrived</option>
                                                        <option value="4" {% if order_item.order_item.status == 4 %} selected{% endif %}>Book for Install</option> 
                                                    {% endif %}
                                                </select> 
                                                {% endif %}
                                           <input type="hidden" name="cancel_reason" class="cancel-reason">
                                             <input type="hidden" name="order_item_id" id="order_item_id" value="{{order_item.order_item.id}}">
                                             <input type="hidden" name="job_id" id="job_id" value="{{order_item.id}}">
                                           {% if  order_item.working_status == 4 %} <button type="button" style="margin-left:5px;" class="btn btn-primary ml-2 open-cancel-modal"> Cancel Job</button>{% endif %}
                                            </form>
                                            </div>
                                        </div>
                                        {% endif %}
                                        <button id="closeModalBtn"  type="button"  style="margin-left:15px;" onclick="closeModal('{{order_item.order_item.id}}','order')">X</button>
                                        </span>
                                    </div>
                                    <div class="modal-body">
                                        <div class="orders-details mt-1">
                                            <div class="row g-5">
                                                <div class="col-md-4">
                                                    <div class="card track-card cus-card card-flush flex-row-fluid position-relative"> 
                                                        <div class="card-header track-head">
                                                            <div class="card-title">
                                                                <div class="d-flex align-items-center">
                                                                    <i  class="ki-outline ki-profile-circle fs-1 me-2 text-b"></i> 
                                                                     <a href="#"  class="text-gray-800 text-hover-primary text-b">
                                                                        {% if order_item.order_item.order.invoice.customer.company_name %}
                                                                            {{ order_item.order_item.order.invoice.customer.company_name }}
                                                                        {% else %}
                                                                            {{ order_item.order_item.order.invoice.customer.first_name}}   {{ order_item.order_item.order.invoice.customer.last_name}}
                                                                        {% endif %}
                                                                        </a> 
                                                                </div>
                                                            </div>
                                                        </div> 
                                                        <div class="pt-0 cus-body">
                                                            <div class="table-responsives"> 
                                                                <table  class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                        <tr>
                                                                            <td class="text-gray-800">
                                                                                <div class="d-flex align-items-center">
                                                                                    <i class="ki-outline ki-sms fs-2 me-2 text-b"></i>
                                                                                    <a href="#" class="text-gray-600 text-hover-primary text-b"> {{ order_item.order_item.order.invoice.customer.email}} </a>
                                                                                </div>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="text-gray-800">
                                                                                <div class="d-flex align-items-center text-b">
                                                                                    <i  class="ki-outline ki-phone fs-2 me-2 text-b"></i>{{ order_item.order_item.order.invoice.customer.phone1}}
                                                                                </div>
                                                                            </td>
                                                                        </tr> 
                                                                        <!-- <tr>-->
                                                                        <!--    <td class="text-gray-800">-->
                                                                        <!--        <div class="d-flex align-items-center text-b">-->
                                                                        <!--            <i  class="ki-outline ki-notepad-bookmark fs-1 me-2 text-b"></i> Order ID: #{{ order_item.order_item.order.id }}  ({{ order_item.order_item.order.created_at }})-->
                                                                        <!--        </div>-->
                                                                        <!--    </td>-->
                                                                        <!--</tr>-->
                                                                        
                                                                </table> 
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                               
                                                <!--<div class="col-md-4">-->
                                                <!--    <div class="card track-card card-flush invoice-card track-card flex-row-fluid position-relative"> -->
                                                <!--        <div class="card-header track-head">-->
                                                <!--            <div class="card-title">-->
                                                <!--                <div class="d-flex align-items-center">-->
                                                <!--                    <i  class="ki-outline ki-document fs-1 me-2 text-b"></i> -->
                                                <!--                     <a href="#"  class="text-gray-800 text-hover-primary text-b">Inv ID: #{{ order_item.order_item.order.invoice.id }}</a> -->
                                                <!--                </div>-->
                                                <!--            </div>-->
                                                <!--        </div> -->
                                                <!--        <div class="pt-0 cus-body">-->
                                                <!--            <div class="table-responsives"> -->
                                                <!--                <table  class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">-->
                                                <!--                    <tr>-->
                                                <!--                        <td class="text-gray-800">-->
                                                <!--                            <div class="d-flex align-items-center">-->
                                                <!--                                <i class="ki-outline ki-calendar fs-2 me-2 text-b"></i>-->
                                                <!--                                <a href="#" class="text-gray-600 text-hover-primary text-b"> {{ order_item.order_item.order.invoice.created_at }} </a>-->
                                                <!--                            </div>-->
                                                <!--                        </td>-->
                                                <!--                    </tr>-->
                                                <!--                    <tr>-->
                                                <!--                        <td class="text-gray-800">-->
                                                <!--                            <div class="d-flex align-items-center">-->
                                                <!--                                <i class="ki-outline ki-save-deposit fs-2 me-2 text-b"></i>-->
                                                <!--                                <a href="#" class="text-gray-600 text-hover-primary text-b">Balance  ${{order_item.order_item.order.invoice.payable_amount }}  </a>-->
                                                <!--                            </div>-->
                                                <!--                        </td>-->
                                                <!--                    </tr>-->
                                                <!--                 </table> -->
                                                <!--            </div>-->
                                                <!--        </div>-->
                                                <!--    </div>-->
                                                <!--</div>-->
                                                <div class="col-md-4">
                                                    <div class="card track-card bill-card card-flush mb-5 order-card position-relative">
                                                        <div class="card-header track-head">
                                                            <div class="card-title">
                                                                <div class="d-flex align-items-center">
                                                                    <i  class="ki-outline ki-notepad-bookmark fs-1 me-2 text-b"></i> 
                                                                     <a href="#"  class="text-gray-800 text-hover-primary text-b">Product Details</a> 
                                                                </div>
                                                            </div>
                                                        </div> 
                                                        
                                                        
                                                        
                                                                                                
                                                        <div class="pt-0 cus-body">
                                                             <div class="table-responsives"> 
                                                                <table  class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                    <tr>
                                                                        <td class="text-gray-800">
                                                                            <div class="d-flex align-items-center">
                                                                               
                                                                                <i class="ki-outline ki-file-sheet fs-2"></i>
 

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


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

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

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

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

                                                                                                        <option  {% if order_item.order_item.installation_time|time:"h:i" == '01:00' %} selected {% endif %} value="01:00">01:00</option>
                                                                                                        <option  {% if order_item.order_item.installation_time|time:"h:i" == '01:30' %} selected {% endif %} value="01:30">01:30</option>
                                                                                                        <option  {% if order_item.order_item.installation_time|time:"h:i" == '02:00' %} selected {% endif %} value="02:00">02:00</option>
                                                                                                        <option  {% if order_item.order_item.installation_time|time:"h:i" == '02:30' %} selected {% endif %} value="02:30">02:30</option>
                                                                                                        <option  {% if order_item.order_item.installation_time|time:"h:i" == '03:00' %} selected {% endif %} value="03:00">03:00</option>
                                                                                                        <option  {% if order_item.order_item.installation_time|time:"h:i" == '03:30' %} selected {% endif %} value="03:30">03:30</option>
                                                                                                        <option  {% if order_item.order_item.installation_time|time:"h:i" == '04:00' %} selected {% endif %} value="04:00">04:00</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '04:30' %} selected {% endif %}  value="04:30">04:30</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '05:00' %} selected {% endif %} value="05:00">05:00</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '05:30' %} selected {% endif %} value="05:30">05:30</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '06:00' %} selected {% endif %} value="06:00">06:00</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '06:30' %} selected {% endif %} value="06:30">06:30</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '07:00' %} selected {% endif %} value="07:00">07:00</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '07:30' %} selected {% endif %} value="07:30">07:30</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '08:00' %} selected {% endif %} value="08:00">08:00</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '08:30' %} selected {% endif %} value="08:30">08:30</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '09:00' %} selected {% endif %} value="09:00">09:00</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '09:30' %} selected {% endif %} value="09:30">09:30</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '10:00' %} selected {% endif %} value="10:00">10:00</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '10:30' %} selected {% endif %} value="10:30">10:30</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '11:00' %} selected {% endif %} value="11:00">11:00</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '11:30' %} selected {% endif %} value="11:30">11:30</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '12:00' %} selected {% endif %} value="12:00">12:00</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '12:30' %} selected {% endif %} value="12:30">12:30</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '13:00' %} selected {% endif %} value="13:00">13:00</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '13:30' %} selected {% endif %} value="13:30">13:30</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '14:00' %} selected {% endif %} value="14:00">14:00</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '14:30' %} selected {% endif %} value="14:30">14:30</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '15:00' %} selected {% endif %} value="15:00">15:00</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '15:30' %} selected {% endif %} value="15:30">15:30</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '16:00' %} selected {% endif %} value="16:00">16:00</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '16:30' %} selected {% endif %} value="16:30">16:30</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '17:00' %} selected {% endif %} value="17:00">17:00</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '17:30' %} selected {% endif %} value="17:30">17:30</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '18:00' %} selected {% endif %} value="18:00">18:00</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '18:30' %} selected {% endif %} value="18:30">18:30</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '19:00' %} selected {% endif %} value="19:00">19:00</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '19:30' %} selected {% endif %} value="19:30">19:30</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '20:00' %} selected {% endif %} value="20:00">20:00</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '20:30' %} selected {% endif %} value="20:30">20:30</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '21:00' %} selected {% endif %} value="21:00">21:00</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '21:30' %} selected {% endif %} value="21:30">21:30</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '22:00' %} selected {% endif %} value="22:00">22:00</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '22:30' %} selected {% endif %} value="22:30">22:30</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '23:00' %} selected {% endif %} value="23:00">23:00</option>
                                                                                                        <option {% if order_item.order_item.installation_time|time:"h:i" == '23:30' %} selected {% endif %} value="23:30">23:30</option>
                                                                                                     </select>
                                                                                                    </div>
                                                                                                </td>
                                                                                                 <td class="pt-6 fw-bolder">
                                                                                                    <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_cost">
                                                                                                        <div class="input-group" id="kt_td_picker_localization_end{{order_item.order_item.id}}" data-td-target-input="nearest" data-td-target="#kt_td_picker_localization_end{{order_item.order_item.id}}" data-td-toggle="datetimepicker">
                                                                                                            <input type="text" class="form-control end_date{{order_item.order_item.id}}" data-td-target="#kt_td_picker_localization_end{{order_item.order_item.id}}" readonly name="installation_end_date"  value="{% if order_item.installation_end_date %}{{order_item.installation_end_date|date:"d-m-Y"}}{% else %}{% now 'd-m-Y' %}{% endif %}" required />
                                                                                        
                                                                                                            <span class="input-group-text" data-td-target="#kt_td_picker_localization_end{{order_item.order_item.id}}" data-td-toggle="datetimepicker">
                                                                                                                <i class="ki-duotone ki-calendar fs-2"><span class="path1"></span><span class="path2"></span></i>
                                                                                                            </span>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </td>
                                                                                                <td class="pt-6 fw-bolder">
                                                                                                    <input type="hidden" name='job_id' value="{{order_item.id}}">
                                                                                                    <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>
                                     {% if order_item.work_order_pdf %}
                             <form method="post" action="/update/service_work_order/" >
                                {% csrf_token %}
                                    <div class="modal fades" tabindex="-1" id="myModal_service_workorder_edit_{{order_item.id}}" data-bs-backdrop="static" data-bs-keyboard="false">
                                    <div class="modal-dialog modal-dialog-centered work-ordermodal">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h3 class="modal-title">Service Work Order Form</h3>
                                                 <button id="closeModalBtn"  type="button"  style="margin-left:15px;" onclick="closeModal('{{order_item.id}}','service_workorder_edit')">X</button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="row">
                                                     <div class="col-lg-4 col-md-4 col-xl-4 col-sm-6"><p><b>Job Id:</b> {{order_item.id}}</p></div>
                                                     <div class="col-lg-4 col-md-4 col-xl-4 col-sm-6"><p><b>Product:</b> {{order_item.order_item.product.product_name}}</p></div>
                                                     <div class="col-lg-4 col-md-4 col-xl-4 col-sm-6"><p><b>Machine:</b> {{order_item.order_item.serial_number.serial_number}}</p></div>
                                                      
                                                    <div class="col-lg-4 col-md-4 col-xl-4 col-sm-6"> <p><b>Customer Name: </b> {{order_item.order_item.order.invoice.customer}}</p></div>
                                                </div>
                                                
                                                
                                                <div class="row">
                                                <div class="col-lg-6 col-md-6 col-xl-6 col-sm-6">
                                                    <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 }}" {% if order_item.service_job_work_order.technician.id == technician.id  %} selected {% endif %} >{{ technician.userinfo.first_name }} {{ technician.userinfo.last_name }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                                 <div class="col-lg-6 col-md-6 col-xl-6 col-sm-6">
                                                    <label class="required form-label mb-2 mt-3" for="installationDate"><strong>Select  Date:</strong></label>
                                                     <div class="input-group" id="kt_td_picker_localization_end" data-td-target-input="nearest" data-td-target="#kt_td_picker_localization_end" data-td-toggle="datetimepicker">
                                                        <input type="text" class="form-control wc_date" data-td-target="#kt_td_picker_localization_end" readonly name="installation_start_date"  value="{% if order_item.service_job_work_order.installation_start_date %}{{ order_item.service_job_work_order.installation_start_date|date:'d-m-Y' }}{% else %}{% now 'd-m-Y' %}{% endif %}" required />
                                                        <span class="input-group-text" data-td-target="#kt_td_picker_localization_end" 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="row">-->
                                           <!--     <label class="required form-label mb-2 mt-3" for="business_hours_from_time"><strong>Select Business Hours:</strong></label>-->
                                           <!--     <div class="col-md-6">-->
                                                    
                                           <!--     <select class="form-select" data-placeholder="Select From" name="business_hours_from_time" id="business_hours_from_time" required>-->
                                           <!--         <option disabled selected value="">Select From</option>-->
                                           <!--         <option value="00:00" {% if order_item.service_job_work_order.business_hours_from_time == '12 AM' %}selected{% endif %}>00:00</option>-->
                                           <!--         <option value="00:30" {% if order_item.service_job_work_order.business_hours_from_time == '12:30 AM' %}selected{% endif %}>00:30</option>-->
                                           <!--         <option value="01:00" {% if order_item.service_job_work_order.business_hours_from_time == '1 AM' %}selected{% endif %}>01:00</option>-->
                                           <!--         <option value="01:30" {% if order_item.service_job_work_order.business_hours_from_time == '1:30 AM' %}selected{% endif %}>01:30</option>-->
                                           <!--         <option value="02:00" {% if order_item.service_job_work_order.business_hours_from_time == '2 AM' %}selected{% endif %}>02:00</option>-->
                                           <!--         <option value="02:30" {% if order_item.service_job_work_order.business_hours_from_time == '2:30 AM' %}selected{% endif %}>02:30</option>-->
                                           <!--         <option value="03:00" {% if order_item.service_job_work_order.business_hours_from_time == '3 AM' %}selected{% endif %}>03:00</option>-->
                                           <!--         <option value="03:30" {% if order_item.service_job_work_order.business_hours_from_time == '3:30 AM' %}selected{% endif %}>03:30</option>-->
                                           <!--         <option value="04:00" {% if order_item.service_job_work_order.business_hours_from_time == '4 AM' %}selected{% endif %}>04:00</option>-->
                                           <!--         <option value="04:30" {% if order_item.service_job_work_order.business_hours_from_time == '4:30 AM' %}selected{% endif %}>04:30</option>-->
                                           <!--         <option value="05:00" {% if order_item.service_job_work_order.business_hours_from_time == '5 AM' %}selected{% endif %}>05:00</option>-->
                                           <!--         <option value="05:30" {% if order_item.service_job_work_order.business_hours_from_time == '5:30 AM' %}selected{% endif %}>05:30</option>-->
                                           <!--         <option value="06:00" {% if order_item.service_job_work_order.business_hours_from_time == '6 AM' %}selected{% endif %}>06:00</option>-->
                                           <!--         <option value="06:30" {% if order_item.service_job_work_order.business_hours_from_time == '6:30 AM' %}selected{% endif %}>06:30</option>-->
                                           <!--         <option value="07:00" {% if order_item.service_job_work_order.business_hours_from_time == '7 AM' %}selected{% endif %}>07:00</option>-->
                                           <!--         <option value="07:30" {% if order_item.service_job_work_order.business_hours_from_time == '7:30 AM' %}selected{% endif %}>07:30</option>-->
                                           <!--         <option value="08:00" {% if order_item.service_job_work_order.business_hours_from_time == '8 AM' %}selected{% endif %}>08:00</option>-->
                                           <!--         <option value="08:30" {% if order_item.service_job_work_order.business_hours_from_time == '8:30 AM' %}selected{% endif %}>08:30</option>-->
                                           <!--         <option value="09:00" {% if order_item.service_job_work_order.business_hours_from_time == '9 AM' %}selected{% endif %}>09:00</option>-->
                                           <!--         <option value="09:30" {% if order_item.service_job_work_order.business_hours_from_time == '9:30 AM' %}selected{% endif %}>09:30</option>-->
                                           <!--         <option value="10:00" {% if order_item.service_job_work_order.business_hours_from_time == '10 AM' %}selected{% endif %}>10:00</option>-->
                                           <!--         <option value="10:30" {% if order_item.service_job_work_order.business_hours_from_time == '10:30 AM' %}selected{% endif %}>10:30</option>-->
                                           <!--         <option value="11:00" {% if order_item.service_job_work_order.business_hours_from_time == '11 AM' %}selected{% endif %}>11:00</option>-->
                                           <!--         <option value="11:30" {% if order_item.service_job_work_order.business_hours_from_time == '11:30 AM' %}selected{% endif %}>11:30</option>-->
                                           <!--         <option value="12:00" {% if order_item.service_job_work_order.business_hours_from_time == '12 PM' %}selected{% endif %}>12:00</option>-->
                                           <!--         <option value="12:30" {% if order_item.service_job_work_order.business_hours_from_time == '12:30 PM' %}selected{% endif %}>12:30</option>-->
                                           <!--         <option value="13:00" {% if order_item.service_job_work_order.business_hours_from_time == '1 PM' %}selected{% endif %}>13:00</option>-->
                                           <!--         <option value="13:30" {% if order_item.service_job_work_order.business_hours_from_time == '1:30 PM' %}selected{% endif %}>13:30</option>-->
                                           <!--         <option value="14:00" {% if order_item.service_job_work_order.business_hours_from_time == '2 PM' %}selected{% endif %}>14:00</option>-->
                                           <!--         <option value="14:30" {% if order_item.service_job_work_order.business_hours_from_time == '2:30 PM' %}selected{% endif %}>14:30</option>-->
                                           <!--         <option value="15:00" {% if order_item.service_job_work_order.business_hours_from_time == '3 PM' %}selected{% endif %}>15:00</option>-->
                                           <!--         <option value="15:30" {% if order_item.service_job_work_order.business_hours_from_time == '3:30 PM' %}selected{% endif %}>15:30</option>-->
                                           <!--         <option value="16:00" {% if order_item.service_job_work_order.business_hours_from_time == '4 PM' %}selected{% endif %}>16:00</option>-->
                                           <!--         <option value="16:30" {% if order_item.service_job_work_order.business_hours_from_time == '4:30 PM' %}selected{% endif %}>16:30</option>-->
                                           <!--         <option value="17:00" {% if order_item.service_job_work_order.business_hours_from_time == '5 PM' %}selected{% endif %}>17:00</option>-->
                                           <!--         <option value="17:30" {% if order_item.service_job_work_order.business_hours_from_time == '5:30 PM' %}selected{% endif %}>17:30</option>-->
                                           <!--         <option value="18:00" {% if order_item.service_job_work_order.business_hours_from_time == '6 PM' %}selected{% endif %}>18:00</option>-->
                                           <!--         <option value="18:30" {% if order_item.service_job_work_order.business_hours_from_time == '6:30 PM' %}selected{% endif %}>18:30</option>-->
                                           <!--         <option value="19:00" {% if order_item.service_job_work_order.business_hours_from_time == '7 PM' %}selected{% endif %}>19:00</option>-->
                                           <!--         <option value="19:30" {% if order_item.service_job_work_order.business_hours_from_time == '7:30 PM' %}selected{% endif %}>19:30</option>-->
                                           <!--         <option value="20:00" {% if order_item.service_job_work_order.business_hours_from_time == '8 PM' %}selected{% endif %}>20:00</option>-->
                                           <!--         <option value="20:30" {% if order_item.service_job_work_order.business_hours_from_time == '8:30 PM' %}selected{% endif %}>20:30</option>-->
                                           <!--         <option value="21:00" {% if order_item.service_job_work_order.business_hours_from_time == '9 PM' %}selected{% endif %}>21:00</option>-->
                                           <!--         <option value="21:30" {% if order_item.service_job_work_order.business_hours_from_time == '9:30 PM' %}selected{% endif %}>21:30</option>-->
                                           <!--         <option value="22:00" {% if order_item.service_job_work_order.business_hours_from_time == '10 PM' %}selected{% endif %}>22:00</option>-->
                                           <!--         <option value="22:30" {% if order_item.service_job_work_order.business_hours_from_time == '10:30 PM' %}selected{% endif %}>22:30</option>-->
                                           <!--         <option value="23:00" {% if order_item.service_job_work_order.business_hours_from_time == '11 PM' %}selected{% endif %}>23:00</option>-->
                                           <!--         <option value="23:30" {% if order_item.service_job_work_order.business_hours_from_time == '11:30 PM' %}selected{% endif %}>23:30</option>-->
                                           <!--     </select>-->
                                           <!--      </div>-->
                                                 
                                           <!--      <div class="col-md-6">-->
                                                
                                           <!--      <select class="form-select" data-placeholder="Select To" name="business_hours_to_time" id="business_hours_to_time" required>-->
                                           <!--         <option disabled selected value="">Select To</option>-->
                                           <!--         <option value="00:00" {% if order_item.service_job_work_order.business_hours_to_time == '12 AM' %}selected{% endif %}>00:00</option>-->
                                           <!--         <option value="00:30" {% if order_item.service_job_work_order.business_hours_to_time == '12:30 AM' %}selected{% endif %}>00:30</option>-->
                                           <!--         <option value="01:00" {% if order_item.service_job_work_order.business_hours_to_time == '1 AM' %}selected{% endif %}>01:00</option>-->
                                           <!--         <option value="01:30" {% if order_item.service_job_work_order.business_hours_to_time == '1:30 AM' %}selected{% endif %}>01:30</option>-->
                                           <!--         <option value="02:00" {% if order_item.service_job_work_order.business_hours_to_time == '2 AM' %}selected{% endif %}>02:00</option>-->
                                           <!--         <option value="02:30" {% if order_item.service_job_work_order.business_hours_to_time == '2:30 AM' %}selected{% endif %}>02:30</option>-->
                                           <!--         <option value="03:00" {% if order_item.service_job_work_order.business_hours_to_time == '3 AM' %}selected{% endif %}>03:00</option>-->
                                           <!--         <option value="03:30" {% if order_item.service_job_work_order.business_hours_to_time == '3:30 AM' %}selected{% endif %}>03:30</option>-->
                                           <!--         <option value="04:00" {% if order_item.service_job_work_order.business_hours_to_time == '4 AM' %}selected{% endif %}>04:00</option>-->
                                           <!--         <option value="04:30" {% if order_item.service_job_work_order.business_hours_to_time == '4:30 AM' %}selected{% endif %}>04:30</option>-->
                                           <!--         <option value="05:00" {% if order_item.service_job_work_order.business_hours_to_time == '5 AM' %}selected{% endif %}>05:00</option>-->
                                           <!--         <option value="05:30" {% if order_item.service_job_work_order.business_hours_to_time == '5:30 AM' %}selected{% endif %}>05:30</option>-->
                                           <!--         <option value="06:00" {% if order_item.service_job_work_order.business_hours_to_time == '6 AM' %}selected{% endif %}>06:00</option>-->
                                           <!--         <option value="06:30" {% if order_item.service_job_work_order.business_hours_to_time == '6:30 AM' %}selected{% endif %}>06:30</option>-->
                                           <!--         <option value="07:00" {% if order_item.service_job_work_order.business_hours_to_time == '7 AM' %}selected{% endif %}>07:00</option>-->
                                           <!--         <option value="07:30" {% if order_item.service_job_work_order.business_hours_to_time == '7:30 AM' %}selected{% endif %}>07:30</option>-->
                                           <!--         <option value="08:00" {% if order_item.service_job_work_order.business_hours_to_time == '8 AM' %}selected{% endif %}>08:00</option>-->
                                           <!--         <option value="08:30" {% if order_item.service_job_work_order.business_hours_to_time == '8:30 AM' %}selected{% endif %}>08:30</option>-->
                                           <!--         <option value="09:00" {% if order_item.service_job_work_order.business_hours_to_time == '9 AM' %}selected{% endif %}>09:00</option>-->
                                           <!--         <option value="09:30" {% if order_item.service_job_work_order.business_hours_to_time == '9:30 AM' %}selected{% endif %}>09:30</option>-->
                                           <!--         <option value="10:00" {% if order_item.service_job_work_order.business_hours_to_time == '10 AM' %}selected{% endif %}>10:00</option>-->
                                           <!--         <option value="10:30" {% if order_item.service_job_work_order.business_hours_to_time == '10:30 AM' %}selected{% endif %}>10:30</option>-->
                                           <!--         <option value="11:00" {% if order_item.service_job_work_order.business_hours_to_time == '11 AM' %}selected{% endif %}>11:00</option>-->
                                           <!--         <option value="11:30" {% if order_item.service_job_work_order.business_hours_to_time == '11:30 AM' %}selected{% endif %}>11:30</option>-->
                                           <!--         <option value="12:00" {% if order_item.service_job_work_order.business_hours_to_time == '12 PM' %}selected{% endif %}>12:00</option>-->
                                           <!--         <option value="12:30" {% if order_item.service_job_work_order.business_hours_to_time == '12:30 PM' %}selected{% endif %}>12:30</option>-->
                                           <!--         <option value="13:00" {% if order_item.service_job_work_order.business_hours_to_time == '1 PM' %}selected{% endif %}>13:00</option>-->
                                           <!--         <option value="13:30" {% if order_item.service_job_work_order.business_hours_to_time == '1:30 PM' %}selected{% endif %}>13:30</option>-->
                                           <!--         <option value="14:00" {% if order_item.service_job_work_order.business_hours_to_time == '2 PM' %}selected{% endif %}>14:00</option>-->
                                           <!--         <option value="14:30" {% if order_item.service_job_work_order.business_hours_to_time == '2:30 PM' %}selected{% endif %}>14:30</option>-->
                                           <!--         <option value="15:00" {% if order_item.service_job_work_order.business_hours_to_time == '3 PM' %}selected{% endif %}>15:00</option>-->
                                           <!--         <option value="15:30" {% if order_item.service_job_work_order.business_hours_to_time == '3:30 PM' %}selected{% endif %}>15:30</option>-->
                                           <!--         <option value="16:00" {% if order_item.service_job_work_order.business_hours_to_time == '4 PM' %}selected{% endif %}>16:00</option>-->
                                           <!--         <option value="16:30" {% if order_item.service_job_work_order.business_hours_to_time == '4:30 PM' %}selected{% endif %}>16:30</option>-->
                                           <!--         <option value="17:00" {% if order_item.service_job_work_order.business_hours_to_time == '5 PM' %}selected{% endif %}>17:00</option>-->
                                           <!--         <option value="17:30" {% if order_item.service_job_work_order.business_hours_to_time == '5:30 PM' %}selected{% endif %}>17:30</option>-->
                                           <!--         <option value="18:00" {% if order_item.service_job_work_order.business_hours_to_time == '6 PM' %}selected{% endif %}>18:00</option>-->
                                           <!--         <option value="18:30" {% if order_item.service_job_work_order.business_hours_to_time == '6:30 PM' %}selected{% endif %}>18:30</option>-->
                                           <!--         <option value="19:00" {% if order_item.service_job_work_order.business_hours_to_time == '7 PM' %}selected{% endif %}>19:00</option>-->
                                           <!--         <option value="19:30" {% if order_item.service_job_work_order.business_hours_to_time == '7:30 PM' %}selected{% endif %}>19:30</option>-->
                                           <!--         <option value="20:00" {% if order_item.service_job_work_order.business_hours_to_time == '8 PM' %}selected{% endif %}>20:00</option>-->
                                           <!--         <option value="20:30" {% if order_item.service_job_work_order.business_hours_to_time == '8:30 PM' %}selected{% endif %}>20:30</option>-->
                                           <!--         <option value="21:00" {% if order_item.service_job_work_order.business_hours_to_time == '9 PM' %}selected{% endif %}>21:00</option>-->
                                           <!--         <option value="21:30" {% if order_item.service_job_work_order.business_hours_to_time == '9:30 PM' %}selected{% endif %}>21:30</option>-->
                                           <!--         <option value="22:00" {% if order_item.service_job_work_order.business_hours_to_time == '10 PM' %}selected{% endif %}>22:00</option>-->
                                           <!--         <option value="22:30" {% if order_item.service_job_work_order.business_hours_to_time == '10:30 PM' %}selected{% endif %}>22:30</option>-->
                                           <!--         <option value="23:00" {% if order_item.service_job_work_order.business_hours_to_time == '11 PM' %}selected{% endif %}>23:00</option>-->
                                           <!--         <option value="23:30" {% if order_item.service_job_work_order.business_hours_to_time == '11:30 PM' %}selected{% endif %}>23:30</option>-->
                                           <!--     </select>-->
                                           <!--     </div>-->
                                           <!-- </div>-->
                                           <!--  <div class="row">-->
                                           <!--  <div class="col-lg-6 col-md-6 col-xl-6 col-sm-6">-->
                                           <!--         <label class="required form-label mb-2 mt-3" for="forklift_available"><strong> Forklift Available:</strong></label>-->
                                           <!--         <select class="form-select" data-placeholder="Select Forklift Available or Not" name="forklift_available" id="forklift_available" required>-->
                                           <!--                 <option {% if order_item.service_job_work_order.forklift_available == 0 %} selected {% endif %} value="0" >No</option>-->
                                           <!--                 <option {% if order_item.service_job_work_order.forklift_available == 1 %} selected {% endif %} value="1" >Yes</option>-->
                                           <!--         </select>-->
                                           <!--     </div>-->
                                           <!--  <div class="col-lg-6 col-md-6 col-xl-6 col-sm-6">-->
                                           <!--         <label class="required form-label mb-2 mt-3" for="Size"><strong> Size:</strong></label>-->
                                           <!--         <input type="text" name="Size" class="form-control" value="{{order_item.service_job_work_order.size}}"  required placeholder="Enter Product Size"> -->
                                           <!--     </div>-->
                                           <!--</div>-->
                                            <div class="row">
                                                <div class="col-md-6">
                                                <label class="form-label  mt-3">Note</label>
                                                <textarea name="note_by_admin" id="description"   class="editor"  placeholder="Enter Note"> {% if order_item.service_job_work_order.note_by_admin and order_item.service_job_work_order.note_by_admin != ""  and order_item.service_job_work_order.note_by_admin != "None" %}{{order_item.service_job_work_order.note_by_admin}}{% endif %}</textarea>
                                                     </div>  
                                                <div class="col-md-6">
                                                <label class="form-label  mt-3">Service Issue Description</label>
                                                <textarea name="note_by_customer" id="description1" class="editor" placeholder="Enter Note">{% if order_item.service_job_work_order.note_by_customer and order_item.service_job_work_order.note_by_customer != ""  and order_item.service_job_work_order.note_by_customer != "None" %}{{order_item.service_job_work_order.note_by_customer}}{% endif %}</textarea>
                                                 </div>
                                                
                                            </div>
                                           <div class="row mt-3">
                                                        <label class="form-label"><strong>Installation Address:</strong></label>
                                                        <div class="col-md-12">
                                                            <div class="form-check">
                                                                <input class="form-check-input address-radio" data-id="{{order_item.id}}" id="same_address_type{{order_item.id}}" type="radio" name="address_type" value="same" {% if  order_item.service_job_work_order.address_type == 'same' %} checked {% endif %}>
                                                                <label class="form-check-label" for="same_address_type{{order_item.id}}">Select Billing Address</label>
                                                                ({% if order_item.order_item.order.invoice.customer.street %} {{order_item.order_item.order.invoice.customer.street}}{% endif%}
                                          {% if order_item.order_item.order.invoice.customer.city %}, {{order_item.order_item.order.invoice.customer.city}}{% endif%}
                                           {% if order_item.order_item.order.invoice.customer.state %}, {{order_item.order_item.order.invoice.customer.state}}{% endif%}
                                            {% if order_item.order_item.order.invoice.customer.country %}, {{order_item.order_item.order.invoice.customer.country}}{% endif%}
                                             {% if order_item.order_item.order.invoice.customer.post_code %}, {{order_item.order_item.order.invoice.customer.post_code}} {% endif%})
                                                            </div>
                                                            <div class="form-check">
                                                                <input class="form-check-input address-radio" data-id="{{order_item.id}}"  type="radio" id="diff_address_type{{order_item.id}}" name="address_type" value="different" {% if  order_item.service_job_work_order.address_type == 'different' %} checked {% endif %}>
                                                                <label class="form-check-label" for="diff_address_type{{order_item.id}}">Add New Address</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- Hidden until "Different Address" selected -->
                                                    <div id="different_address_fields{{order_item.id}}" {% if  order_item.service_job_work_order.address_type == 'different' %}  {% else %} style="display:none; margin-top:10px;" {% endif %} >
                                                        <div class="row mt-2">
                                                            <div class="col-md-6">
                                                                <label class="form-label">Street</label>
                                                                <input type="text" name="street" value="{% if order_item.service_job_work_order.street %} {{order_item.service_job_work_order.street}} {% endif %}" class="form-control">
                                                            </div>
                                                            <div class="col-md-6">
                                                                <label class="form-label">Suburb</label>
                                                                <input type="text" name="suburb" value="{% if order_item.service_job_work_order.suburb %} {{order_item.service_job_work_order.suburb}} {% endif %}" class="form-control">
                                                            </div>
                                                        </div>
                                                        <div class="row mt-2">
                                                            <div class="col-md-4">
                                                                <label class="form-label">State</label>
                                                                <select  class="form-select "  data-placeholder="Select State"  tabindex="0"  name="state" id="state{{order_item.id}}" >
                                                                    <option > Select State</option>
                                                                    <option value="ACT"  {% if order_item.service_job_work_order.state == 'ACT' %} selected {% endif %}>Australian Capital Territory</option>
                                                                    <option value="NSW" {% if order_item.service_job_work_order.state == 'NSW' %} selected {% endif %}>New South Wales </option>
                                                                    <option value="NT" {% if order_item.service_job_work_order.state == 'NT' %} selected {% endif %}>Northern Territory</option>
                                                                    <option value="QLD" {% if order_item.service_job_work_order.state == 'QLD' %} selected {% endif %}>Queensland </option>
                                                                    <option value="SA" {% if order_item.service_job_work_order.state == 'SA' %} selected {% endif %}>South Australia</option>
                                                                    <option value="TAS" {% if order_item.service_job_work_order.state == 'TAS' %} selected {% endif %}>Tasmania </option>
                                                                    <option value="VIC" {% if order_item.service_job_work_order.state == 'VIC' %} selected {% endif %}>Victoria </option>
                                                                    <option value="WA" {% if order_item.service_job_work_order.state == 'WA' %} selected {% endif %}>Western Australia </option>
                                                                  </select>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <label class="form-label">Postcode</label>
                                                                <input type="text" name="postcode" value="{% if order_item.service_job_work_order.postcode %} {{order_item.service_job_work_order.postcode}} {% endif %}" class="form-control">
                                                            </div>
                                                            <div class="col-md-4">
                                                                <label class="form-label">Country</label>
                                                                 <select  class="form-select "  data-placeholder="Select Country"   tabindex="0" name="country" id="country{{order_item.id}}"  >
                                                                    <option value="Australia"  selected >Australia</option>
                                                                </select>
                                                            </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 Workorder</button>
                                            </div>
                                        </div>
                                    </div>
                                    <input type="hidden" name="order_item_id"  value="{{order_item.order_item.id}}">
                                    <input type="hidden" name="tech_assign_order_item_id"  value="{{order_item.id}}">
                                    <input type="hidden" name="order_identifier" value="">
                                </div>
                                </div>
                                </form>
                            {% 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">
                                                 {% if order_item.tracking_status < 3 %} 
                                             <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>
                                            {%endif%}
                                            </div>
                                        </div>
                                        <button id="closeModalBtn" type="button" 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="{% if order_item.status != 4 %} {% url 'quotation:update_order_status' %} {% else %} {% url 'quotation:cancel_job' %} {% endif %}" class="d-flex align-items-center cancel-form">
                                                {% csrf_token %}
                                                {% if order_item.status != 4 and  order_item.status < 3 %} 
                                                <select name="status" id="status" aria-label="Status" data-control="select2" data-placeholder="Status"  class="form-select form-select-lg fw-semibold" required>
                                                   {% if order_item.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> 
                                                {% endif %}
                                           <input type="hidden" name="cancel_reason" class="cancel-reason">
                                             <input type="hidden" name="order_item_id" id="order_item_id" value="{{order_item.id}}">
                                           {% if order_item.status == 1  or order_item.status == 2 or order_item.status == 4 %} <button type="button" style="margin-left:5px;" class="btn btn-primary ml-2 open-cancel-modal">{% if order_item.status != 4 %} Update {% else %} Cancel Job {% endif %}</button>{% endif %}
                                            </form>
                                            </div>
                                        </div>
                                        {% endif %}
                                        <button id="closeModalBtn"  type="button"  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">Secondary Technician</th>
                                                                                                <th class="min-w-50px sorting_disabled"> {% if order_item.is_trade != 1 %}Installation Start Date{% else %}Pickup  Start 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"> {% if order_item.is_trade != 1 %}Installation End Date{% else %}Pickup  ENd Date{% endif %}</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Action</th>
                                                                                            </tr>
                                                                                        </thead>
                                                                                        <tbody>
                                                                                            <tr class="fw-bold text-gray-700 fs-5">
                                                                                                <td class="d-flex align-items-center pt-6"> <i class="fa fa-genderless text-danger fs-2 me-2"></i>
                                                                                                    <select class="form-select" data-placeholder="Select Technician" name="technician" id="technician" required>
                                                                                                        <option disabled selected value="">Select Technician</option>
                                                                                                        {% for technician in technicians %}
                                                                                                            <option value="{{ technician.id }}" {% if order_item.ordered_technician.technician == technician %} selected {% endif %}>{{ technician.userinfo.first_name }} {{ technician.userinfo.last_name }}</option>
                                                                                                        {% endfor %}
                                                                                                    </select>
                                                                                                    <input type="hidden" name="order_item_id" class="orderItemIdInput" value="{{order_item.id}}">
                                                                                                    <input type="hidden" name="order_identifier" class="orderItemIdentifierInput" value="{{order_item.order_identifier}}">
                                                                                                </td>
                                                                                                <td class="pt-6 fw-bolder"> 
                                                                                                    <select class="form-select" data-placeholder="Select Secondary Technician" name="secondary_technician" id="secondary_technician" >
                                                                                                        <option  selected value="">Select Secondary Technician</option>
                                                                                                        {% for technician in technicians %}
                                                                                                            <option value="{{ technician.id }}" {% if order_item.ordered_technician.secondary_technician == technician %} selected {% endif %}>{{ technician.userinfo.first_name }} {{ technician.userinfo.last_name }}</option>
                                                                                                        {% endfor %}
                                                                                                    </select>
                                                                                                </td>
                                                                                                <td class="pt-6 fw-bolder">
                                                                                                    <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_cost">
                                                                                                        <div class="input-group" id="kt_td_picker_localization{{order_item.id}}" data-td-target-input="nearest" data-td-target="#kt_td_picker_localization{{order_item.id}}" data-td-toggle="datetimepicker">
                                                                                                            <input type="text" class="form-control start_date0 start_date{{order_item.id}}" data-td-target="#kt_td_picker_localization{{order_item.id}}" readonly name="installation_start_date"  value="{% if order_item.installation_date %}{{order_item.installation_date|date:"d-m-Y"}}{% else %}{% now 'd-m-Y' %}{% endif %}" required />
                                                                                        
                                                                                                            <span class="input-group-text" data-td-target="#kt_td_picker_localization{{order_item.id}}" data-td-toggle="datetimepicker">
                                                                                                                <i class="ki-duotone ki-calendar fs-2"><span class="path1"></span><span class="path2"></span></i>
                                                                                                            </span>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </td>
                                                                                                <td class="pt-6 fw-bolder"> 
                                                                                                    <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_cost">
                                                                                                     <select class="form-select" data-placeholder="Select Installation Time" name="installation_time" id="installation_time" required>
                                                                                                        <option disabled selected value="">Select {% if order_item.is_trade != 1 %}Installation{% else %}Pickup{% endif %} Time</option>

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

                                                                                                        <option  {% if order_item.installation_time|time:"h:i" == '01:00' %} selected {% endif %} value="01:00">01:00</option>
                                                                                                        <option  {% if order_item.installation_time|time:"h:i" == '01:30' %} selected {% endif %} value="01:30">01:30</option>
                                                                                                        <option  {% if order_item.installation_time|time:"h:i" == '02:00' %} selected {% endif %} value="02:00">02:00</option>
                                                                                                        <option  {% if order_item.installation_time|time:"h:i" == '02:30' %} selected {% endif %} value="02:30">02:30</option>
                                                                                                        <option  {% if order_item.installation_time|time:"h:i" == '03:00' %} selected {% endif %} value="03:00">03:00</option>
                                                                                                        <option  {% if order_item.installation_time|time:"h:i" == '03:30' %} selected {% endif %} value="03:30">03:30</option>
                                                                                                        <option  {% if order_item.installation_time|time:"h:i" == '04:00' %} selected {% endif %} value="04:00">04:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '04:30' %} selected {% endif %}  value="04:30">04:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '05:00' %} selected {% endif %} value="05:00">05:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '05:30' %} selected {% endif %} value="05:30">05:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '06:00' %} selected {% endif %} value="06:00">06:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '06:30' %} selected {% endif %} value="06:30">06:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '07:00' %} selected {% endif %} value="07:00">07:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '07:30' %} selected {% endif %} value="07:30">07:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '08:00' %} selected {% endif %} value="08:00">08:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '08:30' %} selected {% endif %} value="08:30">08:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '09:00' %} selected {% endif %} value="09:00">09:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '09:30' %} selected {% endif %} value="09:30">09:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '10:00' %} selected {% endif %} value="10:00">10:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '10:30' %} selected {% endif %} value="10:30">10:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '11:00' %} selected {% endif %} value="11:00">11:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '11:30' %} selected {% endif %} value="11:30">11:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '12:00' %} selected {% endif %} value="12:00">12:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '12:30' %} selected {% endif %} value="12:30">12:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '13:00' %} selected {% endif %} value="13:00">13:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '13:30' %} selected {% endif %} value="13:30">13:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '14:00' %} selected {% endif %} value="14:00">14:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '14:30' %} selected {% endif %} value="14:30">14:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '15:00' %} selected {% endif %} value="15:00">15:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '15:30' %} selected {% endif %} value="15:30">15:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '16:00' %} selected {% endif %} value="16:00">16:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '16:30' %} selected {% endif %} value="16:30">16:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '17:00' %} selected {% endif %} value="17:00">17:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '17:30' %} selected {% endif %} value="17:30">17:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '18:00' %} selected {% endif %} value="18:00">18:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '18:30' %} selected {% endif %} value="18:30">18:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '19:00' %} selected {% endif %} value="19:00">19:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '19:30' %} selected {% endif %} value="19:30">19:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '20:00' %} selected {% endif %} value="20:00">20:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '20:30' %} selected {% endif %} value="20:30">20:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '21:00' %} selected {% endif %} value="21:00">21:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '21:30' %} selected {% endif %} value="21:30">21:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '22:00' %} selected {% endif %} value="22:00">22:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '22:30' %} selected {% endif %} value="22:30">22:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '23:00' %} selected {% endif %} value="23:00">23:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '23:30' %} selected {% endif %} value="23:30">23:30</option>
                                                                                                     </select>
                                                                                                    </div>
                                                                                                </td>
                                                                                                 <td class="pt-6 fw-bolder">
                                                                                                    <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_cost">
                                                                                                        <div class="input-group" id="kt_td_picker_localization_end{{order_item.id}}" data-td-target-input="nearest" data-td-target="#kt_td_picker_localization_end{{order_item.id}}" data-td-toggle="datetimepicker">
                                                                                                            <input type="text" class="form-control end_date{{order_item.id}}" data-td-target="#kt_td_picker_localization_end{{order_item.id}}" readonly name="installation_end_date"  value="{% if order_item.installation_end_date %}{{order_item.installation_end_date|date:"d-m-Y"}}{% else %}{% now 'd-m-Y' %}{% endif %}" required />
                                                                                        
                                                                                                            <span class="input-group-text" data-td-target="#kt_td_picker_localization_end{{order_item.id}}" data-td-toggle="datetimepicker">
                                                                                                                <i class="ki-duotone ki-calendar fs-2"><span class="path1"></span><span class="path2"></span></i>
                                                                                                            </span>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </td>
                                                                                                <td class="pt-6 fw-bolder">
                                                                                                    <button type="submit" class="btn tech-btn">Update</button>
                                                                                                </td>
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                    </form>
                                                                                </div>
                                                                                <div class="d-flex justify-content-end"> </div>
                                                                                <div class="flex-lg-row-fluid me-xl-10 mb-10 mb-xl-0"> </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                             {% if order_item.installation_job.work_order_pdf %}
                             <form method="post" action="/update/work_order/" >
                                {% csrf_token %}
                                    <div class="modal fades" tabindex="-1" id="myModal_workorder_edit_{{order_item.id}}" data-bs-backdrop="static" data-bs-keyboard="false">
                                    <div class="modal-dialog modal-dialog-centered work-ordermodal">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h3 class="modal-title">Work Order Form</h3>
                                                 <button id="closeModalBtn"  type="button"  style="margin-left:15px;" onclick="closeModal('{{order_item.id}}','workorder_edit')">X</button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="row">
                                                    <div class="col-lg-4 col-md-4 col-xl-4 col-sm-6"><p><b>Order Id:</b> {{order_item.order.id}}</p></div>
                                                     <div class="col-lg-4 col-md-4 col-xl-4 col-sm-6"><p><b>Orderitem Id:</b> {{order_item.id}}</p></div>
                                                    <div class="col-lg-4 col-md-4 col-xl-4 col-sm-6"> <p><b>Customer Name: </b> {{order_item.order.invoice.customer}}</p></div>
                                                </div>
                                                
                                                
                                                <div class="row">
                                                <div class="col-lg-6 col-md-6 col-xl-6 col-sm-6">
                                                    <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 }}" {% if order_item.work_order.technician.id == technician.id  %} selected {% endif %} >{{ technician.userinfo.first_name }} {{ technician.userinfo.last_name }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                                 <div class="col-lg-6 col-md-6 col-xl-6 col-sm-6">
                                                    <label class="required form-label mb-2 mt-3" for="installationDate"><strong>Select  Date:</strong></label>
                                                     <div class="input-group" id="kt_td_picker_localization_end" data-td-target-input="nearest" data-td-target="#kt_td_picker_localization_end" data-td-toggle="datetimepicker">
                                                        <input type="text" class="form-control wc_date" data-td-target="#kt_td_picker_localization_end" readonly name="installation_start_date"  value="{% if order_item.work_order.installation_start_date %}{{ order_item.work_order.installation_start_date|date:'d-m-Y' }}{% else %}{% now 'd-m-Y' %}{% endif %}" required />
                                                        <span class="input-group-text" data-td-target="#kt_td_picker_localization_end" 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="row">
                                                <label class="required form-label mb-2 mt-3" for="business_hours_from_time"><strong>Select Business Hours:</strong></label>
                                                <div class="col-md-6">
                                                    
                                                <select class="form-select" data-placeholder="Select From" name="business_hours_from_time" id="business_hours_from_time" required>
                                                    <option disabled selected value="">Select From</option>
                                                    <option value="00:00" {% if order_item.work_order.business_hours_from_time == '12 AM' %}selected{% endif %}>00:00</option>
                                                    <option value="00:30" {% if order_item.work_order.business_hours_from_time == '12:30 AM' %}selected{% endif %}>00:30</option>
                                                    <option value="01:00" {% if order_item.work_order.business_hours_from_time == '1 AM' %}selected{% endif %}>01:00</option>
                                                    <option value="01:30" {% if order_item.work_order.business_hours_from_time == '1:30 AM' %}selected{% endif %}>01:30</option>
                                                    <option value="02:00" {% if order_item.work_order.business_hours_from_time == '2 AM' %}selected{% endif %}>02:00</option>
                                                    <option value="02:30" {% if order_item.work_order.business_hours_from_time == '2:30 AM' %}selected{% endif %}>02:30</option>
                                                    <option value="03:00" {% if order_item.work_order.business_hours_from_time == '3 AM' %}selected{% endif %}>03:00</option>
                                                    <option value="03:30" {% if order_item.work_order.business_hours_from_time == '3:30 AM' %}selected{% endif %}>03:30</option>
                                                    <option value="04:00" {% if order_item.work_order.business_hours_from_time == '4 AM' %}selected{% endif %}>04:00</option>
                                                    <option value="04:30" {% if order_item.work_order.business_hours_from_time == '4:30 AM' %}selected{% endif %}>04:30</option>
                                                    <option value="05:00" {% if order_item.work_order.business_hours_from_time == '5 AM' %}selected{% endif %}>05:00</option>
                                                    <option value="05:30" {% if order_item.work_order.business_hours_from_time == '5:30 AM' %}selected{% endif %}>05:30</option>
                                                    <option value="06:00" {% if order_item.work_order.business_hours_from_time == '6 AM' %}selected{% endif %}>06:00</option>
                                                    <option value="06:30" {% if order_item.work_order.business_hours_from_time == '6:30 AM' %}selected{% endif %}>06:30</option>
                                                    <option value="07:00" {% if order_item.work_order.business_hours_from_time == '7 AM' %}selected{% endif %}>07:00</option>
                                                    <option value="07:30" {% if order_item.work_order.business_hours_from_time == '7:30 AM' %}selected{% endif %}>07:30</option>
                                                    <option value="08:00" {% if order_item.work_order.business_hours_from_time == '8 AM' %}selected{% endif %}>08:00</option>
                                                    <option value="08:30" {% if order_item.work_order.business_hours_from_time == '8:30 AM' %}selected{% endif %}>08:30</option>
                                                    <option value="09:00" {% if order_item.work_order.business_hours_from_time == '9 AM' %}selected{% endif %}>09:00</option>
                                                    <option value="09:30" {% if order_item.work_order.business_hours_from_time == '9:30 AM' %}selected{% endif %}>09:30</option>
                                                    <option value="10:00" {% if order_item.work_order.business_hours_from_time == '10 AM' %}selected{% endif %}>10:00</option>
                                                    <option value="10:30" {% if order_item.work_order.business_hours_from_time == '10:30 AM' %}selected{% endif %}>10:30</option>
                                                    <option value="11:00" {% if order_item.work_order.business_hours_from_time == '11 AM' %}selected{% endif %}>11:00</option>
                                                    <option value="11:30" {% if order_item.work_order.business_hours_from_time == '11:30 AM' %}selected{% endif %}>11:30</option>
                                                    <option value="12:00" {% if order_item.work_order.business_hours_from_time == '12 PM' %}selected{% endif %}>12:00</option>
                                                    <option value="12:30" {% if order_item.work_order.business_hours_from_time == '12:30 PM' %}selected{% endif %}>12:30</option>
                                                    <option value="13:00" {% if order_item.work_order.business_hours_from_time == '1 PM' %}selected{% endif %}>13:00</option>
                                                    <option value="13:30" {% if order_item.work_order.business_hours_from_time == '1:30 PM' %}selected{% endif %}>13:30</option>
                                                    <option value="14:00" {% if order_item.work_order.business_hours_from_time == '2 PM' %}selected{% endif %}>14:00</option>
                                                    <option value="14:30" {% if order_item.work_order.business_hours_from_time == '2:30 PM' %}selected{% endif %}>14:30</option>
                                                    <option value="15:00" {% if order_item.work_order.business_hours_from_time == '3 PM' %}selected{% endif %}>15:00</option>
                                                    <option value="15:30" {% if order_item.work_order.business_hours_from_time == '3:30 PM' %}selected{% endif %}>15:30</option>
                                                    <option value="16:00" {% if order_item.work_order.business_hours_from_time == '4 PM' %}selected{% endif %}>16:00</option>
                                                    <option value="16:30" {% if order_item.work_order.business_hours_from_time == '4:30 PM' %}selected{% endif %}>16:30</option>
                                                    <option value="17:00" {% if order_item.work_order.business_hours_from_time == '5 PM' %}selected{% endif %}>17:00</option>
                                                    <option value="17:30" {% if order_item.work_order.business_hours_from_time == '5:30 PM' %}selected{% endif %}>17:30</option>
                                                    <option value="18:00" {% if order_item.work_order.business_hours_from_time == '6 PM' %}selected{% endif %}>18:00</option>
                                                    <option value="18:30" {% if order_item.work_order.business_hours_from_time == '6:30 PM' %}selected{% endif %}>18:30</option>
                                                    <option value="19:00" {% if order_item.work_order.business_hours_from_time == '7 PM' %}selected{% endif %}>19:00</option>
                                                    <option value="19:30" {% if order_item.work_order.business_hours_from_time == '7:30 PM' %}selected{% endif %}>19:30</option>
                                                    <option value="20:00" {% if order_item.work_order.business_hours_from_time == '8 PM' %}selected{% endif %}>20:00</option>
                                                    <option value="20:30" {% if order_item.work_order.business_hours_from_time == '8:30 PM' %}selected{% endif %}>20:30</option>
                                                    <option value="21:00" {% if order_item.work_order.business_hours_from_time == '9 PM' %}selected{% endif %}>21:00</option>
                                                    <option value="21:30" {% if order_item.work_order.business_hours_from_time == '9:30 PM' %}selected{% endif %}>21:30</option>
                                                    <option value="22:00" {% if order_item.work_order.business_hours_from_time == '10 PM' %}selected{% endif %}>22:00</option>
                                                    <option value="22:30" {% if order_item.work_order.business_hours_from_time == '10:30 PM' %}selected{% endif %}>22:30</option>
                                                    <option value="23:00" {% if order_item.work_order.business_hours_from_time == '11 PM' %}selected{% endif %}>23:00</option>
                                                    <option value="23:30" {% if order_item.work_order.business_hours_from_time == '11:30 PM' %}selected{% endif %}>23:30</option>
                                                </select>
                                                 </div>
                                                 
                                                 <div class="col-md-6">
                                                
                                                 <select class="form-select" data-placeholder="Select To" name="business_hours_to_time" id="business_hours_to_time" required>
                                                    <option disabled selected value="">Select To</option>
                                                    <option value="00:00" {% if order_item.work_order.business_hours_to_time == '12 AM' %}selected{% endif %}>00:00</option>
                                                    <option value="00:30" {% if order_item.work_order.business_hours_to_time == '12:30 AM' %}selected{% endif %}>00:30</option>
                                                    <option value="01:00" {% if order_item.work_order.business_hours_to_time == '1 AM' %}selected{% endif %}>01:00</option>
                                                    <option value="01:30" {% if order_item.work_order.business_hours_to_time == '1:30 AM' %}selected{% endif %}>01:30</option>
                                                    <option value="02:00" {% if order_item.work_order.business_hours_to_time == '2 AM' %}selected{% endif %}>02:00</option>
                                                    <option value="02:30" {% if order_item.work_order.business_hours_to_time == '2:30 AM' %}selected{% endif %}>02:30</option>
                                                    <option value="03:00" {% if order_item.work_order.business_hours_to_time == '3 AM' %}selected{% endif %}>03:00</option>
                                                    <option value="03:30" {% if order_item.work_order.business_hours_to_time == '3:30 AM' %}selected{% endif %}>03:30</option>
                                                    <option value="04:00" {% if order_item.work_order.business_hours_to_time == '4 AM' %}selected{% endif %}>04:00</option>
                                                    <option value="04:30" {% if order_item.work_order.business_hours_to_time == '4:30 AM' %}selected{% endif %}>04:30</option>
                                                    <option value="05:00" {% if order_item.work_order.business_hours_to_time == '5 AM' %}selected{% endif %}>05:00</option>
                                                    <option value="05:30" {% if order_item.work_order.business_hours_to_time == '5:30 AM' %}selected{% endif %}>05:30</option>
                                                    <option value="06:00" {% if order_item.work_order.business_hours_to_time == '6 AM' %}selected{% endif %}>06:00</option>
                                                    <option value="06:30" {% if order_item.work_order.business_hours_to_time == '6:30 AM' %}selected{% endif %}>06:30</option>
                                                    <option value="07:00" {% if order_item.work_order.business_hours_to_time == '7 AM' %}selected{% endif %}>07:00</option>
                                                    <option value="07:30" {% if order_item.work_order.business_hours_to_time == '7:30 AM' %}selected{% endif %}>07:30</option>
                                                    <option value="08:00" {% if order_item.work_order.business_hours_to_time == '8 AM' %}selected{% endif %}>08:00</option>
                                                    <option value="08:30" {% if order_item.work_order.business_hours_to_time == '8:30 AM' %}selected{% endif %}>08:30</option>
                                                    <option value="09:00" {% if order_item.work_order.business_hours_to_time == '9 AM' %}selected{% endif %}>09:00</option>
                                                    <option value="09:30" {% if order_item.work_order.business_hours_to_time == '9:30 AM' %}selected{% endif %}>09:30</option>
                                                    <option value="10:00" {% if order_item.work_order.business_hours_to_time == '10 AM' %}selected{% endif %}>10:00</option>
                                                    <option value="10:30" {% if order_item.work_order.business_hours_to_time == '10:30 AM' %}selected{% endif %}>10:30</option>
                                                    <option value="11:00" {% if order_item.work_order.business_hours_to_time == '11 AM' %}selected{% endif %}>11:00</option>
                                                    <option value="11:30" {% if order_item.work_order.business_hours_to_time == '11:30 AM' %}selected{% endif %}>11:30</option>
                                                    <option value="12:00" {% if order_item.work_order.business_hours_to_time == '12 PM' %}selected{% endif %}>12:00</option>
                                                    <option value="12:30" {% if order_item.work_order.business_hours_to_time == '12:30 PM' %}selected{% endif %}>12:30</option>
                                                    <option value="13:00" {% if order_item.work_order.business_hours_to_time == '1 PM' %}selected{% endif %}>13:00</option>
                                                    <option value="13:30" {% if order_item.work_order.business_hours_to_time == '1:30 PM' %}selected{% endif %}>13:30</option>
                                                    <option value="14:00" {% if order_item.work_order.business_hours_to_time == '2 PM' %}selected{% endif %}>14:00</option>
                                                    <option value="14:30" {% if order_item.work_order.business_hours_to_time == '2:30 PM' %}selected{% endif %}>14:30</option>
                                                    <option value="15:00" {% if order_item.work_order.business_hours_to_time == '3 PM' %}selected{% endif %}>15:00</option>
                                                    <option value="15:30" {% if order_item.work_order.business_hours_to_time == '3:30 PM' %}selected{% endif %}>15:30</option>
                                                    <option value="16:00" {% if order_item.work_order.business_hours_to_time == '4 PM' %}selected{% endif %}>16:00</option>
                                                    <option value="16:30" {% if order_item.work_order.business_hours_to_time == '4:30 PM' %}selected{% endif %}>16:30</option>
                                                    <option value="17:00" {% if order_item.work_order.business_hours_to_time == '5 PM' %}selected{% endif %}>17:00</option>
                                                    <option value="17:30" {% if order_item.work_order.business_hours_to_time == '5:30 PM' %}selected{% endif %}>17:30</option>
                                                    <option value="18:00" {% if order_item.work_order.business_hours_to_time == '6 PM' %}selected{% endif %}>18:00</option>
                                                    <option value="18:30" {% if order_item.work_order.business_hours_to_time == '6:30 PM' %}selected{% endif %}>18:30</option>
                                                    <option value="19:00" {% if order_item.work_order.business_hours_to_time == '7 PM' %}selected{% endif %}>19:00</option>
                                                    <option value="19:30" {% if order_item.work_order.business_hours_to_time == '7:30 PM' %}selected{% endif %}>19:30</option>
                                                    <option value="20:00" {% if order_item.work_order.business_hours_to_time == '8 PM' %}selected{% endif %}>20:00</option>
                                                    <option value="20:30" {% if order_item.work_order.business_hours_to_time == '8:30 PM' %}selected{% endif %}>20:30</option>
                                                    <option value="21:00" {% if order_item.work_order.business_hours_to_time == '9 PM' %}selected{% endif %}>21:00</option>
                                                    <option value="21:30" {% if order_item.work_order.business_hours_to_time == '9:30 PM' %}selected{% endif %}>21:30</option>
                                                    <option value="22:00" {% if order_item.work_order.business_hours_to_time == '10 PM' %}selected{% endif %}>22:00</option>
                                                    <option value="22:30" {% if order_item.work_order.business_hours_to_time == '10:30 PM' %}selected{% endif %}>22:30</option>
                                                    <option value="23:00" {% if order_item.work_order.business_hours_to_time == '11 PM' %}selected{% endif %}>23:00</option>
                                                    <option value="23:30" {% if order_item.work_order.business_hours_to_time == '11:30 PM' %}selected{% endif %}>23:30</option>
                                                </select>
                                                </div>
                                            </div>
                                             <div class="row">
                                             <div class="col-lg-6 col-md-6 col-xl-6 col-sm-6">
                                                    <label class="required form-label mb-2 mt-3" for="forklift_available"><strong> Forklift Available:</strong></label>
                                                    <select class="form-select" data-placeholder="Select Forklift Available or Not" name="forklift_available" id="forklift_available" required>
                                                            <option {% if order_item.work_order.forklift_available == 0 %} selected {% endif %} value="0" >No</option>
                                                            <option {% if order_item.work_order.forklift_available == 1 %} selected {% endif %} value="1" >Yes</option>
                                                    </select>
                                                </div>
                                             <div class="col-lg-6 col-md-6 col-xl-6 col-sm-6">
                                                    <label class="required form-label mb-2 mt-3" for="Size"><strong> Size:</strong></label>
                                                    <input type="text" name="Size" class="form-control" value="{{order_item.work_order.size}}"  required placeholder="Enter Product Size"> 
                                                </div>
                                           </div>
                                            <div>
                                                <label class="form-label  mt-3">Note</label>
                                                <textarea name="note" id="description"   class="editor"  placeholder="Enter Note">{{order_item.work_order.note}}</textarea>
                                            </div>
                                           <div class="row mt-3">
                                                        <label class="form-label"><strong>Installation Address:</strong></label>
                                                        <div class="col-md-12">
                                                            <div class="form-check">
                                                                <input class="form-check-input address-radio" data-id="{{order_item.id}}" id="same_address_type{{order_item.id}}" type="radio" name="address_type" value="same" {% if  order_item.work_order.address_type == 'same' %} checked {% endif %}>
                                                                <label class="form-check-label" for="same_address_type{{order_item.id}}">Select Billing Address</label>
                                                                ({% if order_item.order.invoice.customer.street %} {{order_item.order.invoice.customer.street}}{% endif%}
                                          {% if order_item.order.invoice.customer.city %}, {{order_item.order.invoice.customer.city}}{% endif%}
                                           {% if order_item.order.invoice.customer.state %}, {{order_item.order.invoice.customer.state}}{% endif%}
                                            {% if order_item.order.invoice.customer.country %}, {{order_item.order.invoice.customer.country}}{% endif%}
                                             {% if order_item.order.invoice.customer.post_code %}, {{order_item.order.invoice.customer.post_code}} {% endif%})
                                                            </div>
                                                            <div class="form-check">
                                                                <input class="form-check-input address-radio" data-id="{{order_item.id}}"  type="radio" id="diff_address_type{{order_item.id}}" name="address_type" value="different" {% if  order_item.work_order.address_type == 'different' %} checked {% endif %}>
                                                                <label class="form-check-label" for="diff_address_type{{order_item.id}}">Add New Address</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- Hidden until "Different Address" selected -->
                                                    <div id="different_address_fields{{order_item.id}}" {% if  order_item.work_order.address_type == 'different' %}  {% else %} style="display:none; margin-top:10px;" {% endif %} >
                                                        <div class="row mt-2">
                                                            <div class="col-md-6">
                                                                <label class="form-label">Street</label>
                                                                <input type="text" name="street" value="{% if order_item.work_order.street %} {{order_item.work_order.street}} {% endif %}" class="form-control">
                                                            </div>
                                                            <div class="col-md-6">
                                                                <label class="form-label">Suburb</label>
                                                                <input type="text" name="suburb" value="{% if order_item.work_order.suburb %} {{order_item.work_order.suburb}} {% endif %}" class="form-control">
                                                            </div>
                                                        </div>
                                                        <div class="row mt-2">
                                                            <div class="col-md-4">
                                                                <label class="form-label">State</label>
                                                                <select  class="form-select "  data-placeholder="Select State"  tabindex="0"  name="state" id="state{{order_item.id}}" >
                                                                    <option > Select State</option>
                                                                    <option value="ACT"  {% if order_item.work_order.state == 'ACT' %} selected {% endif %}>Australian Capital Territory</option>
                                                                    <option value="NSW" {% if order_item.work_order.state == 'NSW' %} selected {% endif %}>New South Wales </option>
                                                                    <option value="NT" {% if order_item.work_order.state == 'NT' %} selected {% endif %}>Northern Territory</option>
                                                                    <option value="QLD" {% if order_item.work_order.state == 'QLD' %} selected {% endif %}>Queensland </option>
                                                                    <option value="SA" {% if order_item.work_order.state == 'SA' %} selected {% endif %}>South Australia</option>
                                                                    <option value="TAS" {% if order_item.work_order.state == 'TAS' %} selected {% endif %}>Tasmania </option>
                                                                    <option value="VIC" {% if order_item.work_order.state == 'VIC' %} selected {% endif %}>Victoria </option>
                                                                    <option value="WA" {% if order_item.work_order.state == 'WA' %} selected {% endif %}>Western Australia </option>
                                                                  </select>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <label class="form-label">Postcode</label>
                                                                <input type="text" name="postcode" value="{% if order_item.work_order.postcode %} {{order_item.work_order.postcode}} {% endif %}" class="form-control">
                                                            </div>
                                                            <div class="col-md-4">
                                                                <label class="form-label">Country</label>
                                                                 <select  class="form-select "  data-placeholder="Select Country"   tabindex="0" name="country" id="country{{order_item.id}}"  >
                                                                    <option value="Australia"  selected >Australia</option>
                                                                </select>
                                                            </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 Workorder</button>
                                            </div>
                                        </div>
                                    </div>
                                    <input type="hidden" name="order_item_id"  value="{{order_item.id}}">
                                    <input type="hidden" name="order_identifier" value="">
                                </div>
                                </div>
                                </form>
                            {% endif %}
                        </span>
                    {% endif %}
                {% endfor %}
                </span>
            </div>
        </div>
    </div>
    
    <form method="post" action="" id="updateworkOrderForm">
        {% csrf_token %}
        <div class="modal fades" tabindex="-1" id="myModal_work_order_" data-bs-backdrop="static" data-bs-keyboard="false">
            <div class="modal-dialog modal-dialog-centered work-ordermodal">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title">Work Order Form</h3>
                         <button id="closeModalBtn"  type="button"  style="margin-left:15px;" onclick="closeModal('','work_order')">X</button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                        <div class="col-lg-4 col-md-4 col-xl-4 col-sm-6"><p><b>Order Id:</b> <span id="orderIdPlaceholderWC"></span></p></div>
                        <div class="col-lg-4 col-md-4 col-xl-4 col-sm-6"><p><b>Orderitem Id:</b> <span id="orderItemIdPlaceholderWC"></span></p></div>
                        <div class="col-lg-4 col-md-4 col-xl-4 col-sm-6"><p><b>Customer Name: </b><span id="ordercustnameWC"></span></p></div>
                        </div>
                        <div class="row">
                        <div class="col-lg-6 col-md-6 col-xl-6 col-sm-6">
                            <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 class="col-lg-6 col-md-6 col-xl-6 col-sm-6">
                            <label class="required form-label mb-2 mt-3" for="installationDate"><strong>Select  Date:</strong></label>
                             <div class="input-group" id="kt_td_picker_localization_Datewc_date" data-td-target-input="nearest" data-td-target="#kt_td_picker_localization_Datewc_date" data-td-toggle="datetimepicker">
                                <input type="text" class="form-control wc_date" data-td-target="#kt_td_picker_localization_Datewc_date" readonly name="installation_start_date"  value="{% now 'd-m-Y' %}" required />
                                <span class="input-group-text" data-td-target="#kt_td_picker_localization_Datewc_date" 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="row">
                        <label class="required form-label mb-2 mt-3" for="business_hours_from_time"><strong>Select Business Hours:</strong></label>
                        <div class="col-md-6">
                        <select class="form-select" data-placeholder="Select From" name="business_hours_from_time" id="business_hours_from_time" required>
                            <option disabled selected value="">Select From</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 class="col-md-6">
                        
                         <select class="form-select" data-placeholder="Select To" name="business_hours_to_time" id="business_hours_to_time" required>
                            <option disabled selected value="">Select To</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="row">
                    <div class="col-lg-6 col-md-6 col-xl-6 col-sm-6">
                            <label class="required form-label mb-2 mt-3" for="forklift_available"><strong> Forklift Available:</strong></label>
                            <select class="form-select" data-placeholder="Select Forklift Available or Not" name="forklift_available" id="forklift_available" required>
                                    <option value="0" >No</option>
                                    <option value="1" >Yes</option>
                            </select>
                        </div>
                    <div class="col-lg-6 col-md-6 col-xl-6 col-sm-6">
                            <label class="required form-label mb-2 mt-3" for="Size"><strong> Size:</strong></label>
                            <input type="text" name="Size" class="form-control"  required placeholder="Enter Product Size"> 
                        </div>
                   </div>
                    <div>
                        <label class="form-label mt-3">Note</label>
                        <textarea name="note" id="description"   class="editor"  placeholder="Enter Note"></textarea>
                    </div>
                    
                     <div class="row mt-3">
                                                        <label class="form-label"><strong>Installation Address:</strong></label>
                                                        <div class="col-md-12">
                                                            <div class="form-check">
                                                                <input class="form-check-input address-radio" data-id="{{order_item.id}}" id="same_address_type{{order_item.id}}" type="radio" name="address_type" value="same" checked >
                                                                <label class="form-check-label" for="same_address_type{{order_item.id}}">Select Billing Address</label><span id="ordercustaddressWC"></span>
                                                            </div>
                                                            <div class="form-check">
                                                                <input class="form-check-input address-radio" data-id="{{order_item.id}}"  type="radio" id="diff_address_type{{order_item.id}}" name="address_type" value="different" >
                                                                <label class="form-check-label" for="diff_address_type{{order_item.id}}">Add New Address</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- Hidden until "Different Address" selected -->
                                                    <div id="different_address_fields{{order_item.id}}" style="display:none; margin-top:10px;" >
                                                        <div class="row mt-2">
                                                            <div class="col-md-6">
                                                                <label class="form-label">Street</label>
                                                                <input type="text" name="street" value="" class="form-control">
                                                            </div>
                                                            <div class="col-md-6">
                                                                <label class="form-label">Suburb</label>
                                                                <input type="text" name="suburb" value="" class="form-control">
                                                            </div>
                                                        </div>
                                                        <div class="row mt-2">
                                                            <div class="col-md-4">
                                                                <label class="form-label">State</label>
                                                                  <select  class="form-select "  data-placeholder="Select State"  tabindex="0"  name="state" id="state{{order_item.id}}" >
                                                                    <option >Select State</option>
                                                                    <option value="ACT"  >Australian Capital Territory</option>
                                                                    <option value="NSW" >New South Wales </option>
                                                                    <option value="NT" >Northern Territory</option>
                                                                    <option value="QLD" >Queensland </option>
                                                                    <option value="SA" >South Australia</option>
                                                                    <option value="TAS" >Tasmania </option>
                                                                    <option value="VIC" >Victoria </option>
                                                                    <option value="WA" >Western Australia </option>
                                                                  </select>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <label class="form-label">Postcode</label>
                                                                <input type="text" name="postcode" value="" class="form-control">
                                                            </div>
                                                            <div class="col-md-4">
                                                                <label class="form-label">Country</label>
                                                                 <select  class="form-select "   data-placeholder="Select Country"   tabindex="0" name="country" id="country{{order_item.id}}"  >
                                                                    <option value="Australia"  selected >Australia</option>
                                                                </select>
                                                            </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">Add Workorder</button>
                    </div>
                </div>
            </div>
            <input type="hidden" name="order_item_id" id="orderItemIdInputWC" value="">
            <input type="hidden" name="order_identifier" id="orderItemIdentifierInputWC" value="">
        </div>
        </div>
    </form>
    <form method="post" action="" id="updateserviceworkOrderForm">
        {% csrf_token %}
        <div class="modal fades" tabindex="-1" id="myModal_service_work_order_" data-bs-backdrop="static" data-bs-keyboard="false">
            <div class="modal-dialog modal-dialog-centered work-ordermodal">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title">Work Order Form</h3>
                         <button id="closeModalBtn"  type="button"  style="margin-left:15px;" onclick="closeModal('','service_work_order')">X</button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                        <div class="col-lg-4 col-md-4 col-xl-4 col-sm-6"><p><b>Order Id:</b> <span id="orderIdPlaceholderSWC"></span></p></div>
                        <div class="col-lg-4 col-md-4 col-xl-4 col-sm-6"><p><b>Orderitem Id:</b> <span id="orderItemIdPlaceholderSWC"></span></p></div>
                        <div class="col-lg-4 col-md-4 col-xl-4 col-sm-6"><p><b>Customer Name: </b><span id="ordercustnameSWC"></span></p></div>
                        </div>
                        <div class="row">
                        <div class="col-lg-6 col-md-6 col-xl-6 col-sm-6">
                            <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 class="col-lg-6 col-md-6 col-xl-6 col-sm-6">
                            <label class="required form-label mb-2 mt-3" for="installationDate"><strong>Select  Date:</strong></label>
                             <div class="input-group" id="kt_td_picker_localization_Datewc_date" data-td-target-input="nearest" data-td-target="#kt_td_picker_localization_Datewc_date" data-td-toggle="datetimepicker">
                                <input type="text" class="form-control wc_date" data-td-target="#kt_td_picker_localization_Datewc_date" readonly name="installation_start_date"  value="{% now 'd-m-Y' %}" required />
                                <span class="input-group-text" data-td-target="#kt_td_picker_localization_Datewc_date" 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="row">
                        <label class="required form-label mb-2 mt-3" for="business_hours_from_time"><strong>Select Business Hours:</strong></label>
                        <div class="col-md-6">
                        <select class="form-select" data-placeholder="Select From" name="business_hours_from_time" id="business_hours_from_time" required>
                            <option disabled selected value="">Select From</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 class="col-md-6">
                        
                         <select class="form-select" data-placeholder="Select To" name="business_hours_to_time" id="business_hours_to_time" required>
                            <option disabled selected value="">Select To</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="row">
                    <div class="col-lg-6 col-md-6 col-xl-6 col-sm-6">
                            <label class="required form-label mb-2 mt-3" for="forklift_available"><strong> Forklift Available:</strong></label>
                            <select class="form-select" data-placeholder="Select Forklift Available or Not" name="forklift_available" id="forklift_available" required>
                                    <option value="0" >No</option>
                                    <option value="1" >Yes</option>
                            </select>
                        </div>
                    <div class="col-lg-6 col-md-6 col-xl-6 col-sm-6">
                            <label class="required form-label mb-2 mt-3" for="Size"><strong> Size:</strong></label>
                            <input type="text" name="Size" class="form-control"  required placeholder="Enter Product Size"> 
                        </div>
                   </div>
                    <div>
                        <label class="form-label mt-3">Note</label>
                        <textarea name="note_by_admin" id="description"   class="editor"  placeholder="Enter Note"></textarea>
                    </div>
                    
                     <div class="row mt-3">
                                                        <label class="form-label"><strong>Installation Address:</strong></label>
                                                        <div class="col-md-12">
                                                            <div class="form-check">
                                                                <input class="form-check-input address-radio" data-id="{{order_item.id}}" id="same_address_type{{order_item.id}}" type="radio" name="address_type" value="same" checked >
                                                                <label class="form-check-label" for="same_address_type{{order_item.id}}">Select Billing Address</label><span id="ordercustaddressSWC"></span>
                                                            </div>
                                                            <div class="form-check">
                                                                <input class="form-check-input address-radio" data-id="{{order_item.id}}"  type="radio" id="diff_address_type{{order_item.id}}" name="address_type" value="different" >
                                                                <label class="form-check-label" for="diff_address_type{{order_item.id}}">Add New Address</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- Hidden until "Different Address" selected -->
                                                    <div id="different_address_fields{{order_item.id}}" style="display:none; margin-top:10px;" >
                                                        <div class="row mt-2">
                                                            <div class="col-md-6">
                                                                <label class="form-label">Street</label>
                                                                <input type="text" name="street" value="" class="form-control">
                                                            </div>
                                                            <div class="col-md-6">
                                                                <label class="form-label">Suburb</label>
                                                                <input type="text" name="suburb" value="" class="form-control">
                                                            </div>
                                                        </div>
                                                        <div class="row mt-2">
                                                            <div class="col-md-4">
                                                                <label class="form-label">State</label>
                                                                  <select  class="form-select "  data-placeholder="Select State"  tabindex="0"  name="state" id="state{{order_item.id}}" >
                                                                    <option >Select State</option>
                                                                    <option value="ACT"  >Australian Capital Territory</option>
                                                                    <option value="NSW" >New South Wales </option>
                                                                    <option value="NT" >Northern Territory</option>
                                                                    <option value="QLD" >Queensland </option>
                                                                    <option value="SA" >South Australia</option>
                                                                    <option value="TAS" >Tasmania </option>
                                                                    <option value="VIC" >Victoria </option>
                                                                    <option value="WA" >Western Australia </option>
                                                                  </select>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <label class="form-label">Postcode</label>
                                                                <input type="text" name="postcode" value="" class="form-control">
                                                            </div>
                                                            <div class="col-md-4">
                                                                <label class="form-label">Country</label>
                                                                 <select  class="form-select "   data-placeholder="Select Country"   tabindex="0" name="country" id="country{{order_item.id}}"  >
                                                                    <option value="Australia"  selected >Australia</option>
                                                                </select>
                                                            </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">Add Workorder</button>
                    </div>
                </div>
            </div>
            <input type="hidden" name="tech_assign_order_item_id" id="orderItemIdInputSWC" value="">
            <input type="hidden" name="order_identifier" id="orderItemIdentifierInputSWC" value="">
        </div>
        </div>
    </form>
    
  
    
    <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 select-tech" 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="form-label mb-2 mt-3" for="technician"><strong>Select Secondary Technician:</strong></label>
                            <select class="form-select select-sec-tech" data-placeholder="Select Secondary Technician" name="secondary_technician" id="secondary_technician" >
                                <option  selected value="">Select Secondary Technician</option>
                                {% for technician in technicians %}
                                    <option value="{{ technician.id }}" >{{ 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> Start 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 select-start-date" data-td-target="#kt_td_picker_localization" readonly name="installation_start_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 select-time" 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>
                            <label class="required form-label mb-2 mt-3" for="installationendDate"><strong>Select <span class="changeforpickupdate">Installation</span> End  Date:</strong></label>
                             <div class="input-group" id="kt_td_picker_localization_end" data-td-target-input="nearest" data-td-target="#kt_td_picker_localization_end" data-td-toggle="datetimepicker">
                                <input type="text" class="form-control end_date select-end-date" data-td-target="#kt_td_picker_localization_end" readonly name="installation_end_date"  value="{% now 'd-m-Y' %}" required />
                                <span class="input-group-text" data-td-target="#kt_td_picker_localization_end" 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">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' %}" />
    <div class="modal fade" id="cancelModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title">Cancel Job</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <label>Enter Reason</label>
        <textarea id="cancelReasonInput" class="form-control" rows="3" placeholder="Enter reason"></textarea>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" id="confirmCancelBtn" class="btn btn-danger">Submit</button>
      </div>

    </div>
  </div>
</div>
<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');
        console.log(orderItemId,'orderItemId')
        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 || toListStatus === 12) {
                     draggedCard.style.opacity = '1';
                      alert("Sorry, Product card could not move to next");
                    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 === 12 && isSerialNumber == 0)
                    {
                         draggedCard.style.opacity = '1';
                         alert("Sorry, this order have unallocated serial number.");
                         return false;
                    }
                    if (toListStatus === 4 || toListStatus === 12 ) {
                        console.log('fromListStatus',fromListStatus);
                        if(fromListStatus == 4 && toListStatus === 12  )
                        {
                             draggedCard.style.opacity = '1';
                            alert("Sorry, this order is already assigned to a technician so order status can’t be reverted");
                            return false;
                        }
                        if(toListStatus === 4  )
                        {
                           if(draggedCard.getAttribute('data-work_order') == 0)
                           {
                             draggedCard.style.opacity = '1';
                            alert("Sorry, this order is not having Work Order");
                            return false;
                           }
                        }
                    //   if( fromListStatus == 12 )
                    //   {
                    //       var isWC=draggedCard.getAttribute('data-work-order');
                    //       console.log('isWC',isWC,draggedCard);
                    //       if(isWC==0)
                    //       {
                    //                 listElement.appendChild(draggedCard);
                    //                 draggedCard.style.opacity = '1';
                    //                 var status= toListStatus;
                    //               var cust_name= draggedCard.getAttribute('data-customer-name');
                    //               var is_pickup=draggedCard.getAttribute('is_pickup');
                    //               var orderId=draggedCard.getAttribute('data-order-id');
                    //                  document.getElementById('orderItemIdInputWC').value = orderItemId;
                    //             document.getElementById('ordercustnameWC').innerHTML = cust_name;
                    //             document.getElementById('orderItemIdentifierInputWC').value = ''; // Clear order identifier
                    //             document.getElementById('orderItemIdPlaceholderWC').innerHTML = orderItemId;
                    //             document.getElementById('orderIdPlaceholderWC').innerHTML = orderId;
                    //             const updateworkOrderForm = document.getElementById("updateworkOrderForm");
                    //             if (updateworkOrderForm) {
                                    
                    //                 updateworkOrderForm.action = `/update/work_order/`;
                    //                 if(is_pickup == 1)
                    //                 {
                    //                 $('.changeforpickupdate').html("pickup");
                    //                 }
                    //             }
                    //             $('#myModal_work_order_').modal('show');   
                    //             // return false;
                    //       }
                    //   }
                    //   else
                    //   {
                    //         draggedCard.style.opacity = '1';
                    //       alert('Please for moving to Ready to Install & create work order First.');
                    //       return false;
                    //   }
                         $.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';
                                    
                                     {% if  '1' in request.user.get_role   %}
                                      if (!confirm('Payment is required. Do you want to continue?')) {
                                            // user clicked Cancel
                                            draggedCard.style.opacity = '1';
                                            return false;
                                        }
                                        else
                                             {
                                    listElement.appendChild(draggedCard);
                                    draggedCard.style.opacity = '1';
                                    if (toListStatus === 4 ) {
                                     openUpdateModal(draggedCard.getAttribute('data-order-item-id'), toListStatus, draggedCard.getAttribute('data-customer-name'), draggedCard.getAttribute('is_pickup'),draggedCard.getAttribute('data-order-id'),draggedCard.getAttribute('data-tech'),draggedCard.getAttribute('data-sec-tech'),draggedCard.getAttribute('data-start-date'),draggedCard.getAttribute('data-end-date'),draggedCard.getAttribute('data-time'));
                                    }
                                      $.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');
                                             if (toListStatus === 12 ) {
                                                    location.reload();
                                                }
                                        },
                                        error: function(error) {
                                            draggedCard.style.opacity = '1';
                                            console.error('Error updating status:', error);
                                        }
                                    });
                                    
                                   
                                }
                                       
                                     {% else %}
                                     alert('Payment Required');
                                      draggedCard.style.opacity = '1';
                                    return false;
                                     {% endif %}
                                      
                                }
                                 else
                                {
                                    listElement.appendChild(draggedCard);
                                    draggedCard.style.opacity = '1';
                                     if (toListStatus === 4 ) {
                                     openUpdateModal(draggedCard.getAttribute('data-order-item-id'), toListStatus, draggedCard.getAttribute('data-customer-name'), draggedCard.getAttribute('is_pickup'),draggedCard.getAttribute('data-order-id'),draggedCard.getAttribute('data-tech'),draggedCard.getAttribute('data-sec-tech'),draggedCard.getAttribute('data-start-date'),draggedCard.getAttribute('data-end-date'),draggedCard.getAttribute('data-time'));
                                     }
                                      $.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');
                                            if (toListStatus === 12 ) {
                                                location.reload();
                                            }
                                        },
                                        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 === 12 ) {
                         if(fromListStatus == 4  )
                    {
                        draggedCard.style.opacity = '1';
                        alert("Sorry, this order is already assigned to a technician so order status can’t be reverted");
                        return false;
                    }
                        //  $.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'));
                                   // function openWorkOrderModal(orderItemId, status, cust_name,is_pickup=0,orderId) {
                                //  var orderItemId=draggedCard.getAttribute('data-order-item-id');
                                   var status= toListStatus;
                                   var cust_name= draggedCard.getAttribute('data-customer-name');
                                   var is_pickup=draggedCard.getAttribute('is_pickup');
                                   var orderId=draggedCard.getAttribute('data-order-id');
                                 console.log('work order form');
                                // Set the order item ID in the hidden input field of the form
                                document.getElementById('orderItemIdInputWC').value = orderItemId;
                                document.getElementById('ordercustnameWC').innerHTML = cust_name;
                                document.getElementById('orderItemIdentifierInputWC').value = ''; // Clear order identifier
                                document.getElementById('orderItemIdPlaceholderWC').innerHTML = orderItemId;
                                document.getElementById('orderIdPlaceholderWC').innerHTML = orderId;
                        
                                const updateworkOrderForm = document.getElementById("updateworkOrderForm");
                                if (updateworkOrderForm) {
                                    console.log(updateworkOrderForm);
                                    updateworkOrderForm.action = `/update/work_order/`;
                                    // let is_pickup=$('.changeforpickupdate').attr("pickup");
                                    console.log('is_pickup',is_pickup);
                                    if(is_pickup == 1)
                                    {
                                    $('.changeforpickupdate').html("pickup");
                                    }
                                }
                                // Trigger the modal opening
                                $('#myModal_work_order_').modal('show');
                        
                                // Fetch order details using AJAX and update modal content
                              //  fetchOrderDetails(orderItemId, status);
                            //}
                    //                 openworkOrderModal(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 openWorkOrderModal(orderItemId, status, cust_name,is_pickup=0,orderId) {
    //      console.log('work order form');
    //     // 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("updateworkOrderForm");
    //     if (updateOrderForm) {
    //         console.log(updateOrderForm);
    //         updateOrderForm.action = `/update/work_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_work_order').modal('show');

    //     // Fetch order details using AJAX and update modal content
    //   //  fetchOrderDetails(orderItemId, status);
    // }
    function openUpdateModal(orderItemId, status, cust_name,is_pickup=0,orderId,tech_id=0,sec_tech_id=0,startdate,enddate,instime) {
        console.log('openUpdateModal',orderItemId, status, cust_name,is_pickup,orderId,tech_id,startdate,enddate,instime);
        // 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;
        sec_tech_id =parseInt(sec_tech_id);
        tech_id =parseInt(tech_id);
        if(sec_tech_id != 0)
        {
            $('.select-sec-tech').val(sec_tech_id);
        }
        else{
            $('.select-sec-tech').val("");
        }
        if(tech_id != 0)
        {
            $('.select-tech').val(tech_id);
            $('.select-start-date').val(startdate);
            $('.select-end-date').val(enddate);
            $('.select-time').val(instime);
        }
        else
        {
            $('.select-tech').val('');
             $('.select-start-date').val(startdate);
            $('.select-end-date').val(enddate);
            $('.select-time').val('');
        }
        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) {
    var modal = document.getElementById("myModal_"+typeoforder+"_"+id);
    
    var closeBtn = document.getElementById("closeModalBtn");
        modal.style.display = "flex";
    }
function openModalwork_order(id,typeoforder) {
 var card = event.target.closest('.ind-card')
    // draggedCard.style.opacity = '1';
    var status= 12;
    var cust_name= card.getAttribute('data-customer-name');
    var cust_address= card.getAttribute('data-customer-address');
    var is_pickup=card.getAttribute('is_pickup');
    var orderId=card.getAttribute('data-order-id');
     document.getElementById('orderItemIdInputWC').value = id;
    document.getElementById('ordercustnameWC').innerHTML = cust_name;
    document.getElementById('ordercustaddressWC').innerHTML = cust_address;
    document.getElementById('orderItemIdentifierInputWC').value = ''; // Clear order identifier
    document.getElementById('orderItemIdPlaceholderWC').innerHTML = id;
    document.getElementById('orderIdPlaceholderWC').innerHTML = orderId;
    const updateworkOrderForm = document.getElementById("updateworkOrderForm");
    updateworkOrderForm.action = `/update/work_order/`;
    var modal = document.getElementById("myModal_"+typeoforder+"_");
    var closeBtn = document.getElementById("closeModalBtn");
    modal.style.display = "flex";
    
   
    }
    
    function openModalservice_work_order(id,typeoforder) {
 var card = event.target.closest('.ind-card')
    // draggedCard.style.opacity = '1';
    var status= 12;
    var cust_name= card.getAttribute('data-customer-name');
    var cust_address= card.getAttribute('data-customer-address');
    var is_pickup=card.getAttribute('is_pickup');
    var orderId=card.getAttribute('data-order-id');
     document.getElementById('orderItemIdInputSWC').value = id;
    document.getElementById('ordercustnameSWC').innerHTML = cust_name;
    document.getElementById('ordercustaddressSWC').innerHTML = cust_address;
    document.getElementById('orderItemIdentifierInputSWC').value = ''; // Clear order identifier
    document.getElementById('orderItemIdPlaceholderSWC').innerHTML = id;
    document.getElementById('orderIdPlaceholderSWC').innerHTML = orderId;
    const updateworkOrderForm = document.getElementById("updateserviceworkOrderForm");
    updateworkOrderForm.action = `/update/service_work_order/`;
    var modal = document.getElementById("myModal_"+typeoforder+"_");
    var closeBtn = document.getElementById("closeModalBtn");
    modal.style.display = "flex";
    
   
    }
    // Function to close the modal
    function closeModal(id,typeoforder) {
        console.log(id,typeoforder,"myModal_"+typeoforder+"_"+id);
        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";
//   var closeBtns = document.getElementsByClassName("closeModalBtn");

// for (var i = 0; i < closeBtns.length; i++) {
//     closeBtns[i].addEventListener("click", function() {
//         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(),  },
});
const clockwc_date=new tempusDominus.TempusDominus(document.getElementById("kt_td_picker_localization_Datewc_date"), {
    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: $(".wc_date").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 %}
 document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll("[id^='kt_td_picker_localization']").forEach(function (targetEl) {
            new tempusDominus.TempusDominus(targetEl, {
                display: {
                    icons: { close: "ki-outline ki-cross fs-1" },
                    buttons: { close: true },
                    components: { clock: false },
                },
                localization: {
                    locale: "en",
                    startOfTheWeek: 1,
                    format: "dd-MM-yyyy",
                }
            });
        });
        });
//   document.addEventListener("DOMContentLoaded", function() {
//             // Initialize CKEditor 5 with custom configuration
//             ClassicEditor
//                 .create(document.querySelector('#description'), {
//                     toolbar: {
//                         items: [
//                             'bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript',
//                             'numberedList', 'bulletedList', 'outdent', 'indent', 'blockQuote', 'undo', 'redo', 'removeFormat', 'sourceEditing'
//                         ]
//                     },
//                     // removePlugins: ['Image']    from items link
//                 })
//                 .catch(error => {
//                     console.error(error);
//                 });
                
//         });
</script>
<script>
$(document).on("change", ".address-radio", function () {
    var id=$(this).attr('data-id');
    if ($(this).val() === "different") {
        $("#different_address_fields"+id).slideDown();
    } else {
        $("#different_address_fields"+id).slideUp();
    }
});

</script>
<script>
let currentForm = null;

document.querySelectorAll('.open-cancel-modal').forEach(btn => {

    btn.addEventListener('click', function () {
        currentForm = this.closest('form');

        // clear old value
        document.getElementById('cancelReasonInput').value = '';

        let modal = new bootstrap.Modal(document.getElementById('cancelModal'));
        modal.show();
    });

});


document.getElementById('confirmCancelBtn').addEventListener('click', function () {

    let reason = document.getElementById('cancelReasonInput').value.trim();

    if (!reason) {
        alert("Reason is required!");
        return;
    }

    // set reason to correct form
    currentForm.querySelector('.cancel-reason').value = reason;

    currentForm.submit();
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
  const top = document.getElementById("top-scrollbar");
  const board = document.getElementById("board");

  if (!top || !board) return;

  // Match scroll width
  top.firstElementChild.style.width = board.scrollWidth + "px";

  // Sync scroll positions
  top.addEventListener("scroll", () => {
    board.scrollLeft = top.scrollLeft;
  });

  board.addEventListener("scroll", () => {
    top.scrollLeft = board.scrollLeft;
  });
});
</script>
{% endblock script %}