{% extends "layout/default.html" %}
{% block addcss %}
<style>
	@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700;800&display=swap");
	* {
    	margin: 0;
    	padding: 0;
    	/*font-family: Inter, Helvetica, "sans-serif";*/
	}
	body {
    	width: 100vw;
    	height: 100vh;
    	background-color: #ff5252;
    	display: grid;
    	place-items: center;
	}
    /*div#kt_app_toolbar_container {*/
    /*    justify-content: flex-start;*/
    /*}*/
    #kt_app_toolbar .breadcrumb{
        /*background:#fff;*/
        padding:0;
    }
	.container {
    	width: 770px;
    	background-color: #fff;
	}
	.custom.mt-3>.d-flex >.card>.card-body.calendercardbody{
	    background:#fff;
	    padding:35px 0 0 !important;
	}
	.header {
    	padding: 0 30px;
    	display: flex;
    	margin:0 0 35px;
    	display:flex;
    	justify-content: space-between;
    	align-items:center;
	}
    .header #month {
        color: #000;
        font-size: 16px;
        font-weight: 600;
        padding: 15px 35px;
        background: #f3f4f6;
        border-radius: 100px;
    }
	button {
    	width: 75px;
    	cursor: pointer;
    	border: none;
    	outline: none;
    	padding: 5px;
    	border-radius: 3px;
    	color: white;
	}
	.header button {
	    background-color: #ff5252;
	}
	.weekdays {
    	width: 100%;
    	display: flex;
    	background-color: #fff;
    	font-size: 20px;
    	color: #000;
    	font-weight: 800;
	}
	.weekdays div {
    	/*width: 300px;*/
    	width: calc((100% - 70px)/7);
    	padding: 10px 10px 25px;
    	text-align: center;
    	text-transform: uppercase;
    	margin:0 5px;
	}
	#calendar {
    	width: 100%;
    	margin: auto;
    	display: flex;
    	flex-wrap: wrap;
    	background-image: linear-gradient(to bottom, #f3f4f6, #fff);
    	padding:35px 20px 0;
	}
	.header .calbtncust button{
        width: 45px;
        height: 45px;
        border-radius:100%;
        background:#f3f4f6;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        margin:0 0 0 10px
    }
    .header .calbtncust button i{
        font-size:20px;
        color:#000;
        line-height: 35px;
    }
	.day {
    	/*  width: 143px;
    	height: 143px;*/
    	width: calc((100% - 70px)/7);
    	height: 250px;
    	padding: 15px 15px;
    	cursor: pointer;
    	margin: 5px;
    	box-sizing: border-box;
    	/*box-shadow: 0px 0px 3px #cbd4c2;*/
    	color: #000;
    	font-size:16px;
    	font-weight: 700;
    	/*display: flex;*/
    	/*flex-direction: column;*/
    	/*justify-content: space-between;*/
    	border-radius:20px;
    	border:1px solid #ddd;
    	text-align:right;
    	background:#fff;
	}
    .day:hover {
    	background-color: rgba(112, 111, 211, 0.1);
    	color: #706fd3;
    	background:#fff;
        box-shadow: 0 2px 0 rgba(71, 134, 255, 0.4);
    	color:#000;
	}
	.eventdiv {
        height: calc( 250px - 60px);
        overflow: scroll;
        padding: 0 5px 0 0px;
        margin:10px 0 0;
    }
	/*#currentDay {*/
 /*   	background-color: #706fd3;*/
 /*   	color: #fff;*/
	/*}*/
	#currentDay {
        /*background-color: #4786ff;*/
        /*color: #ffffff;*/
        box-shadow: 0 2px 0 rgba(71, 134, 255, 0.4);
        border-color: #4786ff;
    }
	.event {
    	font-size: 12px;
    	padding: 5px 5px 5px 10px;
    	background-color: #3d3d3d;
    	color: #fff;
    	border-radius: 5px;
    	max-height: 55px;
    	overflow: hidden;
    	border-left:5px solid #000;
    	text-align:left;
    	font-weight:500;
	}
	.event:not(:last-child){
	    margin:0 0 5px;
	}
	.event:first-child{
	    margin-top:0px;
	}
	
    .event.ServiceRequested {
        color: #164863;
        border-left-color: #fdb44da3;
        background-color: #fef0db;
    }
    
    .event.InstallationInProgress{
       color: #164863;
       border-left-color:#50cd8954;
        background:#50cd892e;
    }
    .event.Installed{
        color:#164863;
        border-left-color:#4786ff;
        background:#4786ff61;
	}
  
    
    .event.Ordered {
        color:#164863;
        border-left-color:#ffe586;
        background:#fdf3cf;
    }
	
	.event.Shipped {
        color:#164863;
        border-left-color:#3e97ff26;
        background:#dceaf9;
    }
    

	.event.Arrived{
	    color: #164863;
	    border-left-color: #d8ead8;
         background: #eaf4ea;
    }
    
    .event.Bookedforinstall{
        color:#164863;
        border-left-color:#d2c7dd;
        background:#f0ebf5;
    }
    
	
	.plain {
    	cursor: default;
    	box-shadow: none;
	}
	#modal {
    	display: none;
    	position: fixed;
    	top: 0px;
    	left: 0px;
    	width: 100vw;
    	height: 100vh;
    	z-index:9999;
    	background-color: rgba(0, 0, 0, 0.8);
	}
	#kt_app_main{
	    width:100% !important;
	    background:#eaedf2;
	}
	
	#addEvent,
	#viewEvent {
    	display: none;
    	width: 350px;
    	background-color: #fff;
    	padding: 25px;
    	position: absolute;
    	z-index: 20;
	}
	#addEvent h2,
	#viewEvent h2 {
    	font-weight: 500;
    	margin-bottom: 10px;
	}
	#txtTitle {
    	padding: 10px;
    	width: 100%;
    	box-sizing: border-box;
    	margin-bottom: 25px;
    	border-radius: 3px;
    	outline: none;
    	border: 1px solid #cbd4c2;
    	font-size: 16px;
	}
	.cont-cal{
    	max-width: 51%;
    	margin: auto;
	}
	#btnSave {
    	background-color: #2ed573;
	}
	.btnClose {
	    background-color: #2f3542;
	}
	#viewEvent p {
	    margin-bottom: 20px;
	}
	#btnDelete {
	    background-color: #ea2027;
	}
	.error {
	    border-color: #ea2027 !important;
	}

	.modalflex{
	    width:100%;
	    height:100%;
	    display:flex;
	    align-items:center;
	    justify-content:center;
	}

	.modalcontent{
	    width:65%;
	    background:#fff;
	    border-radius:15px;
	    padding:35px;
	}

	.modal-content{
	    margin:0 auto;
	}

	.modal-content .modal-header:before,
	.modal-content .modal-header:after{
	    display:none !important;
	}

    #board {
        display: flex;
        /*padding: 20px;*/
        gap: 20px;
    }
    .arrived{
        background: #50cd89;
        border-radius: 8px;
    }
    .installed{
        background: #f5c71a36;
        border-radius: 8px;
    }
    .ordered{
        background: #f5c71a36;
        border-radius: 8px;
    }
    .shipped{
        background: #3e97ff;
        border-radius: 8px;
    }
    .booked
    {
        background: #7239ea;
        border-radius: 8px;
    }
    .list {
        /* background-color: #e2e4e6;*/
        /*border-radius: 8px;*/
        /*padding: 15px 12px;*/
        min-width: 24%;
        padding-bottom: 8px;
    }

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

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

    div.watered {
        background: #ffa5002e;
    }

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

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

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

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

    #board .list .card {
        margin-bottom: 10px;
        margin-right: 10px;
        margin-left: 10px;
    }

    #list0 .list-title {
        background: #ffe586;
    }

    #list1 .list-title {
        background: #3e97ff26;
    }
    /*.badge {*/
    /*    color: ;*/
    /*}*/
    #list3 .list-title {
        background: #77ad7729;
    }

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

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

    .card {
        background-color: #fff;
        border-radius: 8px;
        /*padding: 10px;*/
        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-content {
        display: none;
        margin-top: 10px;
    }

    .card-content p {
        margin: 0;
    }

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

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

    .modal-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;
    }

   

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

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



    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
    }

  

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

    tr {
        font-size: 13px
    }

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

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

    .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;
    }
    
    .modal-content .modal-header h2{
        margin:0;
    }
    
    .modal-content .modal-header h2 span.ordered{
        color: #fff;
        border-left:5px solid #ED2B2A;
        background: #FA9884;
        padding:10px 10px 10px 10px !important;
        border-radius:5px;
        font-size: 14px !important;
    }
    
    .modal-content .modal-header h2 span.installed{
        color:#fff;
        border-left:5px solid #4786ff;
        background:#4786ff;
        padding:10px 10px 10px 10px !important;
        border-radius:5px;
        font-size: 14px !important;
	}
	
	.show {
        display: block!important;
    }
    
    .modal.show{
        display:flex !important;
    }
    
    .tab-content > .tab-pane.show{
        display:none !important;
    }
    
    .tab-content > .tab-pane.show.active{
        display:block !important;
    }
	
	.orders-details .card-title h2 {
        color: #4c4949 !important;
    }
    
    .card-body.tab-pane.fade.show.active{
        opacity:1 !important
    }
    
    .cards .card-body {
        padding: 0px;
    }

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

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

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

    .cards {
        padding: 10px;
    }

    .orders-details .card-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;
    }
    
    #closeModalBtn, .modal-header .close {
        background: transparent;
        border: 0px solid #cccc;
        font-size: 16px;
        width: fit-content;
        color: #4c4949;
    }
    
    .timeline .timeline-line {
        left: 12px;
        border-left-color: #0000007d;
    }
    
    
    .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;
}
.min-w-200px .date-s{
        width: fit-content;
    padding: 6px 6px;
    line-height: 11px;
    font-size: 11px !important;
    border-radius: 5px;
    background: #ededed;
    color: #4c4949 !important;
    }
    .boi-date.date-s{
        width: fit-content;
    padding: 6px 6px;
    line-height: 15px;
    font-size: 11px !important;
    border-radius: 5px;
    background: #f1416c1a;
    color: #4c4949 !important;
    margin-left:auto;
    }
    .card.ind-card table td.cus-t{
        vertical-align: top;
    }
    .card.ind-card table td.cus-t .fs-8.fw-bold.text-muted{
        background: #f7700130;
    width: max-content;
    margin-left: auto;
    color: #000 !important;
    padding: 3px 7px;
    font-size: 13px !important;
    border-radius: 5px;
    }
    
   .card.ind-card .ind-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
    .serial-all-star .fa-star{
        font-size:14px !important;
        color: #17C653;
        padding: 2px;
        
    }
    .card.ind-card .ind-card-footer span{
        display:flex;
        align-items:center;
    }
    .serial-unall-star .fa-star{
        font-size:14px !important;
        color: #ff0000;
        padding: 2px;
    }
     .list-title {
        font-size: 15px;
        margin-bottom: 20px;
        padding: 14px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    
    .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.ind-card{
    padding-bottom:0px;
}
    .card-content {
        display: none;
        margin-top: 10px;
    }

    .card-content p {
        margin: 0;
    }
    
    .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;
        background:#fff;
}
.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;
    }
 .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;
    }
.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;
    }
     .card.ind-card table td {
        border-bottom: 0px;
    }
.orders-details .table.table-borderless tr.sub-t {
        border-bottom: 0px !important;
    }
 .solditems {
        font-size: 13px;
        color: #9FA8DA
    }

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

.card.ind-card a.text-muted, .card.ind-card .text-muted {
    color: #4c4949 !important;
}
.card.ind-card .inv-id.text-muted {
    color: #4c4949 !important;
}
.card.ind-card .ind-card-footer .inv-id {
    display: inline-block;
}
.card.ind-card .ind-card-footer {
    padding: 5px 10px;
    background: #f6f6f6;
}
.orders-details .card.track-card .d-flex.align-items-center, .orders-details .card.track-card .d-flex.align-items-center i, .orders-details .card.track-card .d-flex.align-items-center a{
    color:#000 !important;
}
.orders-details .card.track-card .d-flex.align-items-center i{
width:10%;
    max-width:10%;
    text-align: left;
}
.orders-details .card.track-card .d-flex.align-items-center a{
    width:80%;
    max-width:80%;
    text-align: left;
    text-transform: initial;
}
.ki-profile-circle.ki-outline:before{
    font-size:28px;
}
.card.ind-card .ind-card-footer .symbol.symbol-25px .symbol-label{
    text-transform:uppercase;
}
.card.ind-card .ind-card-footer .symbol.symbol-circle{
    position: absolute;
    right: 8px;
    bottom: 11px;
}
.card.ind-card .ind-card-footer .text-muted{
    font-size:11px !important;
}
td.min-w-200px{
    padding:0px;
}
td.min-w-100px{
    padding:0px;
}
    .account {
        margin-bottom: 36px !important;
        font-size: 16px;
        color: #1A237E
    }

    .transaction {
        font-size: 13px
    }

    .progress {
        height: 3px !important
    }

    .money {
        color: #9FA8DA
    }

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

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

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

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

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

    .comment {
        margin-bottom: 10px;
    }

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

        height: max-content;
    }

    .comment small {
        color: #888;
    }
    .cal-forms {
    width: 330px;
}
.cal-update#Status{
    width:100%;
}
     .cal-forms button {
    width: 80%;
    margin-right:12px;
} 
    
</style>
 

{% endblock addcss %}

{% load i18n %}
{% block title %}{% translate "Calendar" %}{% endblock %}
{% block breadcumbheading %}
{% translate "Calendar" %}
{% endblock  %}
{% block breadcumbfirst %}
<a href="/calendar/" class="text-muted text-hover-primary" style="text-transform: capitalize;">Calendar</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;">Calendar</li>
<!--end::Item-->
{% endblock  %}
{% block content %}
<div class="custom mt-3 create-cust cal2 w-100">
	<div class="d-flex flex-column flex-lg-row-fluid gap-7 gap-lg-10" data-select2-id="select2-data-129-yayj">
		<!--begin::Order details-->
		<div class="card card-flush py-4">
			<!--begin::Card header-->

			<div class="w-100 ps-10 pe-10 pt-10">   
			    <div class="row">
			        <form>
                        <div class="row w-100 align-items-center">
                            <p>Selected event types: {{ ev_type }}</p> 
                            <div class="col-lg-2">
                                <select name="event_type" aria-label="Type" id="event_type" data-control="select2"  data-placeholder="Select Type" class="form-select form-select-lg fw-semibold">
    								<option value="">Select Type</option>
                                    <option value="1" {% if  request.GET.event_type == '1' %} selected {% endif %} >Order</option>
                                    <option value="2"  {% if  request.GET.event_type == '2' %} selected {% endif %} >Job</option>
                                    <option value="3"  {% if  request.GET.event_type == '3' %} selected {% endif %} >Bill</option>
    							</select>
                            </div>

                            <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-2">
                               <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-2">
                               <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-1" style="display:none;">
                                 <input type="hidden"  name="event_status" >
           <!--                    <select name="event_status" aria-label="Status" data-control="select2" data-placeholder="Status" class="form-select  form-select-lg fw-semibold">-->
    							<!--	<option value="">Status</option>-->
           <!--                         <option value="1">Bill Item-Open</option>-->
           <!--                         <option value="2">Order Item-Ordered</option>-->
           <!--                         <option value="3">Order Item-Shipped</option>-->
           <!--                         <option value="4">Order Item-Arrived</option>-->
           <!--                         <option value="5">Order Item-Book For Install</option>-->
           <!--                         <option value="6">Job-Inprogress</option>-->
           <!--                         <option value="7">Job-Completed</option>-->
           <!--                         <option value="8">Job-Parts Requested</option>-->
           <!--                         <option value="9">Job-Parts Received</option>-->
    							<!--</select>-->
                            </div>
                            <div class="col-lg-1">
                                <input type="number" name="orderno" value="{{request.GET.orderno}}" class="form-control form-control-lg  m-0" placeholder=" Number Order/Bill/Job">
                            </div>
                            <!--<div class="col-lg-1">-->
                            <!--    <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="/calendar/">Reset</a></button>

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

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

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

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

                                                                                                        <option  {% if order_item.installation_time|time:"h:i" == '01:00' %} selected {% endif %} value="01:00">01:00</option>
                                                                                                        <option  {% if order_item.installation_time|time:"h:i" == '01:30' %} selected {% endif %} value="01:30">01:30</option>
                                                                                                        <option  {% if order_item.installation_time|time:"h:i" == '02:00' %} selected {% endif %} value="02:00">02:00</option>
                                                                                                        <option  {% if order_item.installation_time|time:"h:i" == '02:30' %} selected {% endif %} value="02:30">02:30</option>
                                                                                                        <option  {% if order_item.installation_time|time:"h:i" == '03:00' %} selected {% endif %} value="03:00">03:00</option>
                                                                                                        <option  {% if order_item.installation_time|time:"h:i" == '03:30' %} selected {% endif %} value="03:30">03:30</option>
                                                                                                        <option  {% if order_item.installation_time|time:"h:i" == '04:00' %} selected {% endif %} value="04:00">04:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '04:30' %} selected {% endif %}  value="04:30">04:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '05:00' %} selected {% endif %} value="05:00">05:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '05:30' %} selected {% endif %} value="05:30">05:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '06:00' %} selected {% endif %} value="06:00">06:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '06:30' %} selected {% endif %} value="06:30">06:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '07:00' %} selected {% endif %} value="07:00">07:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '07:30' %} selected {% endif %} value="07:30">07:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '08:00' %} selected {% endif %} value="08:00">08:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '08:30' %} selected {% endif %} value="08:30">08:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '09:00' %} selected {% endif %} value="09:00">09:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '09:30' %} selected {% endif %} value="09:30">09:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '10:00' %} selected {% endif %} value="10:00">10:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '10:30' %} selected {% endif %} value="10:30">10:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '11:00' %} selected {% endif %} value="11:00">11:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '11:30' %} selected {% endif %} value="11:30">11:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '12:00' %} selected {% endif %} value="12:00">12:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '12:30' %} selected {% endif %} value="12:30">12:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '13:00' %} selected {% endif %} value="13:00">13:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '13:30' %} selected {% endif %} value="13:30">13:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '14:00' %} selected {% endif %} value="14:00">14:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '14:30' %} selected {% endif %} value="14:30">14:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '15:00' %} selected {% endif %} value="15:00">15:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '15:30' %} selected {% endif %} value="15:30">15:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '16:00' %} selected {% endif %} value="16:00">16:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '16:30' %} selected {% endif %} value="16:30">16:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '17:00' %} selected {% endif %} value="17:00">17:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '17:30' %} selected {% endif %} value="17:30">17:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '18:00' %} selected {% endif %} value="18:00">18:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '18:30' %} selected {% endif %} value="18:30">18:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '19:00' %} selected {% endif %} value="19:00">19:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '19:30' %} selected {% endif %} value="19:30">19:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '20:00' %} selected {% endif %} value="20:00">20:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '20:30' %} selected {% endif %} value="20:30">20:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '21:00' %} selected {% endif %} value="21:00">21:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '21:30' %} selected {% endif %} value="21:30">21:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '22:00' %} selected {% endif %} value="22:00">22:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '22:30' %} selected {% endif %} value="22:30">22:30</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '23:00' %} selected {% endif %} value="23:00">23:00</option>
                                                                                                        <option {% if order_item.installation_time|time:"h:i" == '23:30' %} selected {% endif %} value="23:30">23:30</option>
                                                                                                     </select>
                                                                                                    </div>
                                                                                                </td>
                                                                                                <td class="pt-6 fw-bolder">
                                                                                                    <button type="submit" class="btn tech-btn">Update</button>
                                                                                                </td>
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                    </form>
                                                                                </div>
                                                                                <div class="d-flex justify-content-end"> </div>
                                                                                <div class="flex-lg-row-fluid me-xl-10 mb-10 mb-xl-0"> </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        </div>
  {% endfor %}
  	{% for order_item in serial_numbers %}				

    <div  id="myModals{{order_item.id}}" class="modal fade myModal">
        <div class="modal-content">
                                    <div class="modal-header">
                                        <h2> &nbsp;
                                            <span class=" fw-bold badge py-3 px-4 fs-7  {% if  order_item.tracking_status ==  0 %} ordered {% endif %}  {% if  order_item.tracking_status ==  1  %} shipped {% endif %}  {% if order_item.tracking_status ==  3%} arrived {% endif %}">
                                                  {{order_item.get_tracking_status}}
                                            </span>
                                            <span class="serialStatus-{{order_item.get_self_status}}">{{order_item.get_self_status}}</span>
                                        </h2>
                                        <button  class="close" data-id="s{{order_item.id}}" >X</button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="orders-details mt-5">
                                            <div class="row g-5">
                                                {% if order_item.bill %}
                                                <div class="col-md-4">
                                                    <div class="card track-card cus-card card-flush flex-row-fluid position-relative"> 
                                                        <div class="card-header track-head">
                                                            <div class="card-title">
                                                                <div class="d-flex align-items-center">
                                                                    <i  class="ki-outline ki-profile-circle fs-1 me-2 text-b"></i> 
                                                                     <a href="/metronic8/demo42/../demo42/apps/ecommerce/customers/details.html"  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="/metronic8/demo42/../demo42/apps/user-management/users/view.html" 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="/metronic8/demo42/../demo42/apps/user-management/users/view.html" 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="/metronic8/demo42/../demo42/apps/user-management/users/view.html" 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="/metronic8/demo42/../demo42/apps/user-management/users/view.html" class="text-gray-600 text-hover-primary text-b">Balance {% if order_item.bill.payable_amount %} ${{ order_item.bill.payable_amount  }}{% else %}$0.00{% endif %}  </a>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                 </table> 
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                {% endif %}
                                                <div class="col-md-12">
                                                    <div class="cards p-0">
                                                        <div class="card-body ex-b">
                                                            <div id="kt_activity_today_serial{{order_item.id}}" class="card-body p-0 tab-pane fade show active" role="tabpanel"  aria-labelledby="kt_activity_today_tab">
                                                                <div class="cards card-flush h-xl-100" data-select2-id="select2-data-124-p5cu">
                                                                    <div class="card-header p-0" data-select2-id="select2-data-123-flzv">
                                                                        <!--begin::Title-->
                                                                        <h3 class="card-title align-items-start flex-column">
                                                                            <span  class="card-label fw-bold text-gray-800 text-b">Bill Product</span>
                                                                            <span class="text-gray-500 mt-1 fw-semibold fs-6 text-b"></span>
                                                                        </h3>
                                                                        <div class="card-toolbar">
                                                                            <div class="d-flex flex-stack flex-wrap gap-4">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="card-body pt-2">
                                                                        <div>
                                                                            <div class="table-responsive">
                                                                                <table class="table align-middle table-row-dashed fs-6 gy-3  no-footer tracking-table"  >
                                                                                    <thead>
                                                                                        <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                                                                            <th colspan="2" class="min-w-100px sorting_disabled"  rowspan="1" style="">Product </th>
                                                                                            <th class="min-w-100px sorting_disabled" rowspan="1" style="">Serial Number </th>
                                                                                            <th class="min-w-100px sorting_disabled" rowspan="1"  style="">Supplier</th>
                                                                                            <th class="min-w-100px sorting_disabled" rowspan="1"  style="">Quantity</th>
                                                                                            <th class="min-w-100px sorting_disabled"  rowspan="1"  style="">Tracking Status</th>
                                                                                            <th class="min-w-50px sorting_disabled"  rowspan="1"  style="">Allocation Status</th>
                                                                                        </tr>
                                                                                    </thead>
                                                                                    <tbody class="fw-bold text-gray-600">
                                                                                        <tr data-kt-table-widget-4="subtable_template" class="">
                                                                                            <td colspan="2">
                                                                                                <div  class="d-flex align-items-center gap-3">
                                                                                                    <a href="#" class="symbol symbol-50px bg-secondary bg-opacity-25 rounded ">
                                                                                                        <img src="https://ea.stagingstorm.com/media/product_images/main_images/4.jpg" data-kt-src-path="https://ea.stagingstorm.com/media/product_images/main_images/4.jpg" alt=""  data-kt-table-widget-4="template_image">
                                                                                                    </a>
                                                                                                    <div class="d-flex flex-column">
                                                                                                        <a href="#" class="text-gray-800 text-hover-primary fw-bold"   data-kt-table-widget-4="template_name">{{order_item.product.product_name}}-({{order_item.product.sku}})
                                                                                                          </a>                                                                                           
                                                                                                    </div>
                                                                                                </div>
                                                                                            </td>
                                                                                            <td class="text-start">
                                                                                                <div class=" fs-7 fw-bold"  data-kt-table-widget-4="template_cost">{% if order_item.serial_number != ' ' %} {{order_item.serial_number}} {% else %} - {% endif %}</div>
                                                                                            </td>
                                                                                            <td class="text-start">
                                                                                                <div class="fs-7 fw-bold"  data-kt-table-widget-4="template_cost">{% if order_item.supplier != None %}{{order_item.supplier}}{% else %} - {% endif %}</div>
                                                                                            </td>
                                                                                            <td class="text-start">
                                                                                                <div class="fs-7 fw-bold"
                                                                                                    data-kt-table-widget-4="template_qty">
                                                                                                   1</div>
                                                                                            </td>
                                                                                            <td class="text-start">
                                                                                                <div class="fs-7 fw-bold"  data-kt-table-widget-4="template_stock">
                                                                                                    <div class="badge  {% if order_item.tracking_status == 0 %} ordered {% endif %}  {% if order_item.tracking_status == 1 %} shipped {% endif %}  {% if order_item.tracking_status == 3 %} arrived {% endif %}  {% if order_item.tracking_status == 4 %} booked {% endif %} {% if order_item.tracking_status != 4 and order_item.tracking_status != 0 and order_item.tracking_status != 1 and order_item.tracking_status != 3 %} installed {% endif %}">
                                                                                                       {{order_item.get_tracking_status}}
                                                                                                    </div>
                                                                                                </div>
                                                                                            </td>
                                                                                             <td class="text-start">
                                                                                                <div class="fs-7 fw-bold"  data-kt-table-widget-4="template_stock">
                                                                                                    <div class="badge  {% if order_item.tracking_status == 0 %} ordered {% endif %}  {% if order_item.tracking_status == 1 %} shipped {% endif %}  {% if order_item.tracking_status == 3 %} arrived {% endif %}  {% if order_item.tracking_status == 4 %} booked {% endif %} {% if order_item.tracking_status != 4 and order_item.tracking_status != 0 and order_item.tracking_status != 1 and order_item.tracking_status != 3 %} installed {% endif %}">
                                                                                                        {{order_item.get_self_status}}
                                                                                                    </div>
                                                                                                    </div>
                                                                                                </td>
                                                                                            </tr>
                                                                                    </tbody>
                                                                                </table>
                                                                            </div>
                                                                            <div class="row">
                                                                                <div
                                                                                    class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start">
                                                                                </div>
                                                                                <div
                                                                                    class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                           
                                                            {% if order_item.supplier != None %}
                                                            <div class="card-header p-0">
                                                                <h3 class="card-title align-items-start flex-column">
                                                                    <span  class="card-label fw-bold text-gray-800">Payment Details </span>
                                                                    <span class="text-gray-500 mt-1 fw-semibold fs-6"></span>
                                                                </h3>
                                                            </div>
                                                            <div id="kt_activity_month_serial{{order_item.id}}" class="card-body p-0 tab-pane fade show active ex-b" role="tabpanel" aria-labelledby="kt_activity_month_tab">
                                                                <div class="cards p-0">
                                                                    <div class="card-body">
                                                                        <div class="d-flex flex-column flex-xl-row">
                                                                            <div class="flex-grow-1">
                                                                                <div class="table-responsive border-bottom mb-9">
                                                                                    <table class="table mb-3 tracking-table">
                                                                                        <thead>
                                                                                            <tr class="border-bottom fs-6 fw-bold text-muted">
                                                                                                <th class="min-w-50px sorting_disabled"> Bill ID</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Total Amount</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Paid</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Balance</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Due Date</th>
                                                                                                <th class="min-w-50px sorting_disabled"> Last Payment Date</th>
                                                                                                {% if order_item.bill.attachment %}
                                                                                                <th class="min-w-50px sorting_disabled"> Supplier Invoice</th>
                                                                                                {% endif %}
                                                                                            </tr>
                                                                                        </thead>
                                                                                        <tbody>
                                                                                            <tr class="fw-bold text-gray-700 fs-5">
                                                                                                <td class="d-flex align-items-center pt-6"> <i class="fa fa-genderless text-danger fs-2 me-2"></i>{{ order_item.bill.id }} </td>
                                                                                                    <td class="pt-6 fw-bolder">${{ order_item.bill.total }}</td>
                                                                                                    <td class="pt-6 fw-bolder"> {% if order_item.bill.total_paid_amount %} ${{ order_item.bill.total_paid_amount }}{% else %}$0.00{% endif %}</td>
                                                                                                    <td class="pt-6 fw-bolder"> {% if order_item.bill.payable_amount %} ${{ order_item.bill.payable_amount  }}{% else %}$0.00{% endif %}</td>
                                                                                                    <td class="pt-6 fw-bolder"> {{ order_item.bill.due_date  }} </td>
                                                                                                    <td class="pt-6 fw-bolder"> 
                                                                                                    {% if order_item.bill.get_bill_payment_records %}
                                                                                                        {% for i_pay in order_item.bill.get_bill_payment_records %}
                                                                                                            {% if forloop.counter == 1 %}
                                                                                                                {{i_pay.pay_date}}
                                                                                                            {% endif %}
                                                                                                        {% endfor %}
                                                                                                    {% else %}
                                                                                                            -
                                                                                                    {% endif %}</td>
                                                                                                    {% if order_item.bill.attachment %}
                                                                                                    <td class="pt-6 fw-bolder"> <a href="/media/{{order_item.bill.attachment}}" target="_blank" title="View Supplier Invoice PDF" class="pdf-icon"> <i class="fa-solid fa-file-pdf"></i></a></td>
                                                                                                    {% endif %}
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                </div>
                                                                                <div class="d-flex justify-content-end"> </div>
                                                                                <div class="flex-lg-row-fluid me-xl-10 mb-10 mb-xl-0"> </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>                         
    </div>
  {% endfor %}
  
			</div>
			<script>

			let querystring = window.location.search.substring(1);
console.log(querystring);

// if (querystring){
// 				const holidaystest =$.parseJSON($.ajax({
// 				       url:  '/get-events/?'+querystring,
// 				       dataType: "json", 
// 				       async: false
// 				   }).responseText);
				   
// 				   	const serialtest =	$.parseJSON($.ajax({
// 				       url:  '/get-serial-numbers/?'+querystring,
// 				       dataType: "json", 
// 				       async: false
// 				   }).responseText);
				   
				   
// 				const jobtest =	$.parseJSON($.ajax({
// 				       url:  '/get-job-numbers/?'+querystring,
// 				       dataType: "json", 
// 				       async: false
// 				   }).responseText);  
				   
				   
				   
				   
// }
// else{
    const holidaystest =
					$.parseJSON($.ajax({
				       url:  '/get-events/?'+querystring,

				       dataType: "json", 
				       async: false
				   }).responseText);
				   
				   	const serialtest =
				$.parseJSON($.ajax({

				       url:  '/get-serial-numbers/?'+querystring,

				       dataType: "json", 
				       async: false
				   }).responseText);
				   
				   
				   
				   	const jobtest =
				$.parseJSON($.ajax({

				       url:  '/get-job-numbers/?'+querystring,
				       dataType: "json", 
				       async: false
				   }).responseText);  
// }
				
		

				
				const holidays =holidaystest.test;
			    const serialNmubers =serialtest.test;
			    const jobNmubers =jobtest.test;
			    
				const calendar = document.querySelector("#calendar");
				const monthBanner = document.querySelector("#month");
				let navigation = 0;
				let clicked = null;
				let events = localStorage.getItem("events") ? JSON.parse(localStorage.getItem("events")) : [];
				//console.log('events',events);
				const weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
				
				function loadCalendar() {
				 const dt = new Date();
				
				 if (navigation != 0) {
				   dt.setMonth(new Date().getMonth() + navigation);
				 }
				 const day = dt.getDate();
				 const month = dt.getMonth();
				 const year = dt.getFullYear();
				 monthBanner.innerText = `${dt.toLocaleDateString("en-us", {
				   month: "long",
				 })} ${year}`;
				 calendar.innerHTML = "";
				 const dayInMonth = new Date(year, month + 1, 0).getDate();
				 const firstDayofMonth = new Date(year, month, 1);
				 const dateText = firstDayofMonth.toLocaleDateString("en-us", {
				   weekday: "long",
				   year: "numeric",
				   month: "numeric",
				   day: "numeric",
				 });
				
				 const dayString = dateText.split(", ")[0];
				 const emptyDays = weekdays.indexOf(dayString);
				
				 for (let i = 1; i <= dayInMonth + emptyDays; i++) {
				      const eventdivmain = document.createElement("div");
				   const dayBox = document.createElement("div");
				   
				   dayBox.classList.add("day");
				   const monthVal = month + 1 < 10 ? "0" + (month + 1) : month + 1;
				   const dateVal = i - emptyDays < 10 ? "0" + (i - emptyDays) : i - emptyDays;
				   const dateText = `${dateVal}-${monthVal}-${year}`;
				//   console.log('emptyDays',emptyDays);
				   if (i > emptyDays) {
				     dayBox.innerText = i - emptyDays;
				     //Event Day
				     const eventOfTheDay = events.find((e) => e.date == dateText);
				     //Holiday
				      var holidayOfTheDay =[];
				      var k1=0;
				       for (let k = 0; k < holidays.length; k++) {
				        //   console.log(holidays[0].hdate);
				           if(holidays[k].hdate==dateText)
				           {
				            holidayOfTheDay[k1] = holidays[k];
				            k1=k1+1;
				           }
				       }
				       
				        var SerialOfTheDay =[];
				      var k1=0;
				       for (let k = 0; k < serialNmubers.length; k++) {
				        //   console.log(holidays[0].hdate);
				           if(serialNmubers[k].hdate==dateText)
				           {
				            SerialOfTheDay[k1] = serialNmubers[k];
				            k1=k1+1;
				           }
				       }
				       
				     //const holidayOfTheDay = holidays.find((e) => e.hdate == dateText);
				//console.log('holidayOfTheDay356',holidayOfTheDay);
				     if (i - emptyDays === day && navigation == 0) {
				       dayBox.id = "currentDay";
				     }
				     eventdivmain.classList.add("eventdiv");
				dayBox.appendChild(eventdivmain);
				     if (SerialOfTheDay) {
				         for(j=0;j<SerialOfTheDay.length;j++){
				        //   console.log('holidayOfTheDay',holidayOfTheDay);
				           const eventDiv = document.createElement("div");
				           eventDiv.classList.add("event");
				           eventDiv.classList.add("holiday");
				           var statusname=null;
				            if(SerialOfTheDay[j].statusofitem==0)
				           {
				           eventDiv.classList.add("Ordered");
				           statusname='Ordered';
				           }
				           if(SerialOfTheDay[j].statusofitem==1)
				           {
				           eventDiv.classList.add("Shipped");
				           statusname='Shipped';
				           }
				             if(SerialOfTheDay[j].statusofitem==2)
				           {
				           eventDiv.classList.add("Watered");
				           statusname='Shipped';
				           }
				            if(SerialOfTheDay[j].statusofitem==3)
				           {
				           eventDiv.classList.add("Arrived");
				           statusname='Arrived';
				           }
				             if(SerialOfTheDay[j].statusofitem==4)
				           {
				           eventDiv.classList.add("Bookedforinstall");
				           statusname='Booked';
				           }
				           if(SerialOfTheDay[j].statusofitem==5)
				           {
				           eventDiv.classList.add("InstallationInProgress");
				           statusname='Installation In Progress';
				           }
				           if(SerialOfTheDay[j].statusofitem==6)
				           {
				           eventDiv.classList.add("Installed");
				           statusname='Installed';
				           }
				           if(SerialOfTheDay[j].statusofitem==7)
				           {
				           eventDiv.classList.add("Installed");
				           statusname='Installed';
				           }
				            if(SerialOfTheDay[j].statusofitem==8)
				           {
				           eventDiv.classList.add("ServiceRequested");
				           statusname='Service Requested';
				           }
				            if(SerialOfTheDay[j].statusofitem==9)
				           {
				           eventDiv.classList.add("PartRequested");
				           statusname='Part Requested';
				           }if(SerialOfTheDay[j].statusofitem==10)
				           {
				           eventDiv.classList.add("ServiceCompleted");
				           statusname='Service Completed';
				           }
				           eventDiv.setAttribute("id", 's'+SerialOfTheDay[j].id);
				           //eventDiv.innerText = 'Order Id:'+SerialOfTheDay[j].order_id+'-'+SerialOfTheDay[j].product_id+'('+statusname+')';
				           eventDiv.innerText = 'Bill Id:'+SerialOfTheDay[j].bill_id;
				           eventdivmain.appendChild(eventDiv);
				           const modal="."+SerialOfTheDay[j].id;
				         //  console.log(modal);
				        //   eventDiv.addEventListener("click", () => {
				        //       console.log($(this).attr('class'));
    				    //   showModal(modal);
    				    //  });
				         }
				         
				         
				       
				       
				     }
				     
				     //console.log('job',jobNmubers);
				       var JobOfTheDay =[];
				      var k1=0;
				       for (let k = 0; k < jobNmubers.length; k++) {
				        //   console.log(holidays[0].hdate);
				           if(jobNmubers[k].hdate==dateText)
				           {
				            JobOfTheDay[k1] = jobNmubers[k];
				            k1=k1+1;
				           }
				       }
				       
				     //const holidayOfTheDay = holidays.find((e) => e.hdate == dateText);
				//console.log('holidayOfTheDay356',holidayOfTheDay);
				     if (i - emptyDays === day && navigation == 0) {
				       dayBox.id = "currentDay";
				     }
				     eventdivmain.classList.add("eventdiv");
				     dayBox.appendChild(eventdivmain);
				     
				     
				     
				     if (JobOfTheDay) {
				         for(j=0;j<JobOfTheDay.length;j++){
				       
				           const eventDiv = document.createElement("div");
				           eventDiv.classList.add("event");
				           eventDiv.classList.add("holiday");
				           var statusname=null;
				            if(JobOfTheDay[j].statusofitem==0)
				          {
				          eventDiv.classList.add("Ordered");
				          statusname='Not Started';
				          }
				    
				            if(JobOfTheDay[j].statusofitem==3)
				          {
				          eventDiv.classList.add("Arrived");
				          statusname='Part Received';
				          }
				        if(JobOfTheDay[j].statusofitem==4)
				          {
				          eventDiv.classList.add("Installed");
				          statusname='Completed';
				          }
				          
				          if(JobOfTheDay[j].statusofitem==1)
				          {
				          eventDiv.classList.add("InstallationInProgress");
				          statusname='In Progress';
				          }
				        //   if(SerialOfTheDay[j].statusofitem==6)
				        //   {
				        //   eventDiv.classList.add("Installed");
				        //   statusname='Installed';
				        //   }
				        //   if(SerialOfTheDay[j].statusofitem==7)
				        //   {
				        //   eventDiv.classList.add("Installed");
				        //   statusname='Installed';
				        //   }
				        //     if(SerialOfTheDay[j].statusofitem==8)
				        //   {
				        //   eventDiv.classList.add("ServiceRequested");
				        //   statusname='Service Requested';
				        //   }
				            if(JobOfTheDay[j].statusofitem==2)
				          {
				          eventDiv.classList.add("PartRequested");
				          statusname='Part Requested';
				          }
				          //if(SerialOfTheDay[j].statusofitem==10)
				        //   {
				        //   eventDiv.classList.add("ServiceCompleted");
				        //   statusname='Service Completed';
				        //   }
				           eventDiv.setAttribute("id", 'j'+JobOfTheDay[j].id);
				           //eventDiv.innerText = 'Order Id:'+SerialOfTheDay[j].order_id+'-'+SerialOfTheDay[j].product_id+'('+statusname+')';
				           eventDiv.innerText = 'Job Id:'+JobOfTheDay[j].id;
				           eventdivmain.appendChild(eventDiv);
				           const modal="."+JobOfTheDay[j].id;
				          // console.log(modal);
				        //   eventDiv.addEventListener("click", () => {
				        //       console.log($(this).attr('class'));
    				    //   showModal(modal);
    				    //  });
				         }
				         
				         
				       
				       
				     }
				   
				     if (holidayOfTheDay) {
				         for(j=0;j<holidayOfTheDay.length;j++){
				       
				           const eventDiv = document.createElement("div");
				           eventDiv.classList.add("event");
				           eventDiv.classList.add("holiday");
				           var statusname=null;
				            if(holidayOfTheDay[j].statusofitem==0)
				           {
				           eventDiv.classList.add("Ordered");
				           statusname='Ordered';
				           }
				           if(holidayOfTheDay[j].statusofitem==1)
				           {
				           eventDiv.classList.add("Shipped");
				           statusname='Shipped';
				           }
				             if(holidayOfTheDay[j].statusofitem==2)
				           {
				           eventDiv.classList.add("Watered");
				           statusname='Shipped';
				           }
				            if(holidayOfTheDay[j].statusofitem==3)
				           {
				           eventDiv.classList.add("Arrived");
				           statusname='Arrived';
				           }
				             if(holidayOfTheDay[j].statusofitem==4)
				           {
				           eventDiv.classList.add("Bookedforinstall");
				           statusname='Booked';
				           }
				           if(holidayOfTheDay[j].statusofitem==5)
				           {
				           eventDiv.classList.add("InstallationInProgress");
				           statusname='Installation In Progress';
				           }
				           if(holidayOfTheDay[j].statusofitem==6)
				           {
				           eventDiv.classList.add("Installed");
				           statusname='Installed';
				           }
				           if(holidayOfTheDay[j].statusofitem==7)
				           {
				           eventDiv.classList.add("Installed");
				           statusname='Installed';
				           }
				            if(holidayOfTheDay[j].statusofitem==8)
				           {
				           eventDiv.classList.add("ServiceRequested");
				           statusname='Service Requested';
				           }
				            if(holidayOfTheDay[j].statusofitem==9)
				           {
				           eventDiv.classList.add("PartRequested");
				           statusname='Part Requested';
				           }if(holidayOfTheDay[j].statusofitem==10)
				           {
				           eventDiv.classList.add("ServiceCompleted");
				           statusname='Service Completed';
				           }
				           eventDiv.setAttribute("id", 'o'+holidayOfTheDay[j].id);
				           //eventDiv.innerText = 'Order Id:'+holidayOfTheDay[j].order_id+'-'+holidayOfTheDay[j].product_id+'('+statusname+')';
				           eventDiv.innerText = 'Order Id:'+holidayOfTheDay[j].order_id;
				           eventdivmain.appendChild(eventDiv);
				           const modal="."+holidayOfTheDay[j].id;
				          // console.log(modal);
				        //   eventDiv.addEventListener("click", () => {
				        //       console.log($(this).attr('class'));
    				    //   showModal(modal);
    				    //  });
				         }
				         
				         
				     }
				    
				
				    //  dayBox.addEventListener("click", () => {
				    //   //showModal(dateText);
				    //  });
				   } else {
				     dayBox.classList.add("plain");
				   }
				   calendar.append(dayBox);
				   
				   
                    
				 }
				 
				 
				}
				// $(document).on('click','.holiday',function(){
				//   var id= $(this).attr('id');
				//   // modal.style.display = "block";
				//     //$('.modal_'+id).css('display','block');
				//     console.log('here'+id);
				//      $('#modal').show();
				// });
				
				$(document).ready(function(){
				   $('.event').click(function(){
				       var id= $(this).attr('id');
				      // console.log('show'+id);
				       
				        $('#myModal'+id).removeClass('fade').addClass('show');
				   }) 
				    $('.close').click(function(){
				       var id=$(this).attr('data-id');
				        //$('#myModal'+id).css({'display':'block','opacity':'1'});
				        $('#myModal'+id).removeClass('show').addClass('fade');
				   }) 

				});
					
				
				function buttons() {
				 const btnBack = document.querySelector("#btnBack");
				 const btnNext = document.querySelector("#btnNext");
				 const btnDelete = document.querySelector("#btnDelete");
				 const btnSave = document.querySelector("#btnSave");
				 const closeButtons = document.querySelectorAll(".btnClose");
				 const txtTitle = document.querySelector("#txtTitle");
				 
				
				 btnBack.addEventListener("click", () => {
				   navigation--;
				   loadCalendar();
				 });
				 btnNext.addEventListener("click", () => {
				   navigation++;
				   loadCalendar();
				 });
				 
				 
				 
				//  modal.addEventListener("click", closeModal);
				//  closeButtons.forEach((btn) => {
				//   btn.addEventListener("click", closeModal);
				//  });
				//  btnDelete.addEventListener("click", function () {
				//   events = events.filter((e) => e.date !== clicked);
				//   localStorage.setItem("events", JSON.stringify(events));
				//   closeModal();
				//  });
				
				//  btnSave.addEventListener("click", function () {
				//   if (txtTitle.value) {
				//      txtTitle.classList.remove("error");
				//      events.push({
				//       date: clicked,
				//       title: txtTitle.value.trim(),
				//      });
				//      txtTitle.value = "";
				//      localStorage.setItem("events", JSON.stringify(events));
				//      closeModal();
				//   } else {
				//      txtTitle.classList.add("error");
				//   }
				//  });
				}
			
				
				const modal = document.querySelector("#modal");
				const viewEventForm = document.querySelector("#viewEvent");
				const addEventForm = document.querySelector("#addEvent");
			
				
				function showModal(dateText) {
				 clicked = dateText;
				 const eventOfTheDay = events.find((e) => e.date == dateText);
				 if (eventOfTheDay) {
				   //Event already Preset
				   document.querySelector("#eventText").innerText = eventOfTheDay.title;
				   viewEventForm.style.display = "none";
				 } else {
				   //Add new Event
				   addEventForm.style.display = "none";
				 }
				 modal.style.display = "block";
				}
				
				//Close Modal
				function closeModal() {
				 viewEventForm.style.display = "none";
				 addEventForm.style.display = "none";
				 modal.style.display = "none";
				 clicked = null;
				 loadCalendar();
				}
				
				buttons();
				loadCalendar();
				
				
				   
			</script>
		</div>
		<!--Skye-->
	</div>
</div>

{% endblock %}

{% block script %}

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

{% endblock script %}