{% 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: 80%;
        border-radius: 5px;
    }

    .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 {
        padding: 15px;
    }

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

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

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

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

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

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

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

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

    #list1 .bg-warning {

        background-color: #007bff8f !important;
    }

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

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

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

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

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

    .cal2 .list-title i {
        color: #4c4949;
        font-size: 30px;
    }
    
    #closeModalBtn {
        background: transparent;
        border: 0px solid #cccc;
        font-size: 16px;
        color: #4c4949;
    }
    
    .timeline .timeline-line {
        left: 12px;
        border-left-color: #0000007d;
    }
    
</style>
 

{% endblock addcss %}
{% block script %}
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!--<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>-->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
{% endblock script %}
{% 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>
                    <!--<form action="/order/tracking-order-status/search" method="get">-->
                    <!--           {% csrf_token %}-->
                        <div class="row w-100 align-items-center">
                            <div class="col-lg-2">
                              <select name="product_id" aria-label="Product List" data-control="select2" data-placeholder="Product List" class="form-select form-select-lg fw-semibold">
    								<option value="">Product List</option>
    								 {% for product in products %} 
                                        <option value="{{product.id}}" {% if request.GET.product_id|slugify == product.id|slugify %} selected {% endif %} >{{product.product_name}}({{product.sku}})</option>
                                     {% endfor %} 
    							</select>
                            </div>
                            <div class="col-lg-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}} {% else %} {{supplier.company_name}}{% endif %}</option>
                                     {% endfor %}
    							</select>
                            </div>
                            <div class="col-lg-2">
                                <input type="number" name="orderno" value="{{request.GET.orderno}}" class="form-control form-control-lg  m-0" placeholder="Order No.">
                            </div>
                            <div class="col-lg-2">
                                <input type="number" name="billno"  value="{{request.GET.billno}}"  class="form-control form-control-lg m-0" placeholder="Bill No.">
                            </div>
                            <div class="col-lg-2">
                                <button type="submit" class="w-100px btn btn-primary" id="kt_account_profile_details_submit">Search</button>
                                <button type="reset" class="w-100px btn btn-light btn-active-light-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="modal">-->
				<!--    <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 %}
				<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 class="modal fade myModal" id="myModalo{{row.id}}" role="dialog">-->
  <!--   <div class="modal-dialog">-->
      <!-- Modal content-->
  <!--    <div class="modal-content">-->
  <!--      <div class="modal-header">-->
  <!--        <button type="button" class="close" data-id="o{{row.id}}" data-bs-dismiss="modal">&times;</button>-->
  <!--        <h4 class="modal-title">Modal Header order {{row.id}}</h4>-->
  <!--      </div>-->
  <!--      <div class="modal-body">-->
  <!--        <p>Some text in the modal.</p>-->
  <!--      </div>-->
  <!--      <div class="modal-footer">-->
  <!--        <button type="button" class="close btn btn-default" data-id="o{{row.id}}" data-bs-dismiss="modal">Close</button>-->
  <!--      </div>-->
  <!--    </div>-->
      
  <!--  </div>-->
  <!--</div>-->
    <div id="myModalo{{order_item.id}}" class="modal fade myModal">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h2> &nbsp;
                                        <span style="color:#141313;" class=" fw-bold badge py-3 px-4 fs-7  {% if order_item.status == 0   or  order_item.tracking_status ==  0 %} ordered {% endif %}  {% if order_item.status == 1   or  order_item.tracking_status ==  1  %} shipped {% endif %}  {% if order_item.status == 3   or  order_item.tracking_status ==  3%} arrived {% endif %}  {% if order_item.status == 4   %} booked {% endif %} {% if order_item.status != 4 and order_item.status != 0 and order_item.status != 1 and order_item.status != 3 %} installed {% endif %}">
                                            {% if order_item.status == 0 %} Ordered {% endif %}  {% if order_item.status == 1 %} Shipped {% endif %}  {% if order_item.status == 3 %} Arrived {% endif %}  {% if order_item.status == 4 %} Booked {% endif %} 
                                        </span>
                                    </h2> 
                                    <button id="closeModalBtn" class="close" data-id="o{{order_item.id}}" >X</button>
                                </div>
                                <div class="modal-body">
                                    <div class="orders-details mt-5 mb-5">
                                        <div class="row g-5">
                                            <div class="col-md-4" style="padding-right:20px;">
                                                <div class="card card-flush py-4 flex-row-fluid mb-5 order-card">
                                                    <div class="card-header">
                                                        <div class="card-title">
                                                            <h2>Order Details {{order_item.order.id}}</h2>
                                                        </div>
                                                    </div> 
                                                    <div class="card-body pt-0">
                                                        <div class="table-responsive"> 
                                                            <table class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                <tbody class="fw-semibold text-gray-600">
                                                                    <tr>
                                                                        <td class="text-muted">
                                                                            <div class="d-flex align-items-center">
                                                                                <i class="ki-outline ki-calendar fs-2 me-2"></i>
                                                                                Date Added
                                                                            </div>
                                                                        </td>
                                                                        <td class="fw-bold text-end">{{order_item.order.created_at|date:"M. d, Y, g:i A"}}</td>
                                                                    </tr>
                                                                    <!--<tr>-->
                                                                    <!--    <td class="text-muted">-->
                                                                    <!--        <div class="d-flex align-items-center">-->
                                                                    <!--            <i class="ki-outline ki-wallet fs-2 me-2"></i>-->
                                                                    <!--            Payment Method-->
                                                                    <!--        </div>-->
                                                                    <!--    </td>-->
                                                                    <!--    <td class="fw-bold text-end">  Online </td>-->
                                                                    <!--</tr>-->
                                                                    <!--<tr>-->
                                                                    <!--    <td class="text-muted">-->
                                                                    <!--        <div class="d-flex align-items-center">-->
                                                                    <!--            <i class="ki-outline ki-truck fs-2 me-2"></i>-->
                                                                    <!--            Shipping Method-->
                                                                    <!--        </div>-->
                                                                    <!--    </td>-->
                                                                    <!--    <td class="fw-bold text-end">Flat Shipping Rate</td>-->
                                                                    <!--</tr>-->
                                                                </tbody>
                                                            </table> 
                                                        </div>
                                                    </div> 
                                                </div>
            
                                                <div id="kt_activity_years"  class="card-body p-0 pt-5 tab-pane active show mt-6 kt_activity_comments"  role="tabpanel" aria-labelledby="kt_activity_year_tab"> 
                                                    <h3 class="card-label fw-bold text-gray-800 mb-7">Activity</h3>
                                                    <div class="timeline timeline-border-dashed mt-5"> 
                                                        <div class="timeline-item"> 
                                                            <div class="timeline-line"></div>
                                                            <div class="timeline-icon">
                                                                <i class="ki-outline ki-pencil fs-2 text-gray-500"></i>
                                                            </div>
                                                            <div class="timeline-content mb-6 mt-n1">
                                                                <div class="pe-3 mb-5">
                                                                    <div class="fs-6 fw-semibold mb-2">3 new application design concepts added:</div>
                                                                    <div class="d-flex align-items-center mt-1 fs-6">
                                                                        <div class="text-muted me-2 fs-7">Created at 4:23 PM by  Abc</div>
                                                                        <div class="symbol symbol-circle symbol-25px"  data-bs-toggle="tooltip" data-bs-boundary="window"  data-bs-placement="top" aria-label="Marcus Dotson"  data-bs-original-title="Marcus Dotson" data-kt-initialized="1"> 
                                                                        </div> 
                                                                    </div> 
                                                                </div>
                                                                <div class="overflow-auto pb-5">
                                                                </div>
                                                            </div>
                                                        </div> 
                                                        <div class="timeline-item">
                                                            <div class="timeline-line"></div>
                                                            <div class="timeline-icon">
                                                                <i class="ki-outline ki-sms fs-2 text-gray-500"></i>
                                                            </div>
                                                            <div class="timeline-content mb-6 mt-n1">
                                                                <div class="pe-3 mb-5">
                                                                    <div class="fs-6 fw-semibold mb-2"> New case <a href="#" class="text-primary fw-bold me-1">#67890</a>  is assigned to you in Multi-platform Database Design project
                                                                    </div>
                                                                    <div class="overflow-auto pb-5">
                                                                        <div class="d-flex align-items-center mt-1 fs-6"> 
                                                                            <div class="text-muted me-2 fs-7">Added at 4:23 PM  by Abc</div> 
                                                                            <a href="#" class="text-primary fw-bold me-1">Alice Tan</a> 
                                                                        </div> 
                                                                    </div> 
                                                                </div> 
                                                            </div> 
                                                        </div> 
                                                        <div class="timeline-item"> 
                                                            <div class="timeline-line"></div> 
                                                            <div class="timeline-icon">
                                                                <i class="ki-outline ki-basket fs-2 text-gray-500"></i>
                                                            </div>
                                                            <div class="timeline-content mt-n1">
                                                                <div class="pe-3 mb-5">
                                                                    <div class="fs-6 fw-semibold mb-2">
                                                                        New order <a href="#" class="text-primary fw-bold me-1">#67890</a> is placed for Workshow Planning &amp; Budget Estimation
                                                                    </div>
                                                                    <div class="d-flex align-items-center mt-1 fs-6">
                                                                        <div class="text-muted me-2 fs-7">Placed at 4:23 PM by Abc</div>
                                                                        <a href="#" class="text-primary fw-bold me-1">Jimmy Bold</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
            
                                            <div class="col-md-8" style=" border-left:1px dashed #b5b5c3;"> 
                                                <div class="cards"> 
                                                    <div class="card-header card-header-stretch">
                                                        <div class="card-title d-flex align-items-center">
                                                            <div class="my-1 me-4" data-select2-id="select2-data-137-jnyq" style="display:flex;">
                                                            </div>
                                                        </div> 
                                                        <div class="card-toolbar m-0"> 
                                                            <ul class="nav nav-tabs nav-line-tabs nav-stretch fs-6 border-0 fw-bold" role="tablist">
                                                                <li class="nav-item" role="presentation">
                                                                    <a id="kt_activity_today_tab" class="nav-link justify-content-center text-active-gray-800 active"  data-bs-toggle="tab" role="tab" href="#kt_activity_today_order{{order_item.id}}" aria-selected="true"> Order Details </a>
                                                                </li>
                                                                <li class="nav-item" role="presentation">
                                                                    <a id="kt_activity_week_tab" class="nav-link justify-content-center text-active-gray-800"  data-bs-toggle="tab" role="tab" href="#kt_activity_week_order{{order_item.id}}" aria-selected="false" tabindex="-1"> Account </a>
                                                                </li>
                                                                <li class="nav-item" role="presentation">
                                                                    <a id="kt_activity_month_tab"  class="nav-link justify-content-center text-active-gray-800"   data-bs-toggle="tab" role="tab" href="#kt_activity_month_order{{order_item.id}}" aria-selected="false"  tabindex="-1">  Payment Details </a>
                                                                </li> 
                                                            </ul> 
                                                        </div> 
                                                    </div> 
                                                    <div class="card-body">
                                                        <!--begin::Tab Content-->
                                                        <div class="tab-content">
                                                            <!--begin::Tab panel-->
                                                            <div id="kt_activity_today_order{{order_item.id}}"  class="card-body p-0 tab-pane show active" role="tabpanel"  aria-labelledby="kt_activity_today_tab">
                                                                <div class="cards card-flush h-xl-100"
                                                                    data-select2-id="select2-data-124-p5cu">
                                                                    <!--begin::Card header-->
                                                                    <div class="card-header pt-7 p-0"
                                                                        data-select2-id="select2-data-123-flzv">
                                                                        <!--begin::Title-->
                                                                        <h3 class="card-title align-items-start flex-column">
                                                                            <span class="card-label fw-bold text-gray-800">Order Product</span>
                                                                            <span class="text-gray-500 mt-1 fw-semibold fs-6"></span>
                                                                        </h3>
                                                                        <!--end::Title-->
            
                                                                        <!--begin::Actions-->
                                                                        <div class="card-toolbar">
                                                                            <div class="d-flex flex-stack flex-wrap gap-4">
                                                                            </div>
                                                                        </div>
                                                                        <!--end::Actions-->
                                                                    </div>
                                                                    <!--end::Card header-->
            
                                                                    <!--begin::Card body-->
                                                                    <div class="card-body pt-2">
                                                                        <!--begin::Table-->
                                                                        <div id="kt_table_widget_4_table_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                                                                            <div class="table-responsive">
                                                                                <table  class="table align-middle table-row-dashed fs-6 gy-3 dataTable no-footer tracking-table" id="kt_table_widget_4_table">
                                                                                    <thead>
                                                                                        <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                                                                            <th colspan="2"class="min-w-100px sorting_disabled" rowspan="1" style="">Product </th>
                                                                                            <th class="text-end min-w-125px sorting_disabled" rowspan="1"   style="">Supplier</th>
                                                                                            <th class="text-end min-w-100px sorting_disabled" rowspan="1"   style="">Quantity</th>
                                                                                            <th class="text-end min-w-100px sorting_disabled" rowspan="1"  style="">Total</th>
                                                                                            <th class="text-end min-w-50px sorting_disabled"  rowspan="1"  style="">Status</th>
                                                                                        </tr>
                                                                                    </thead>
                                                                                    <tbody class="fw-bold text-gray-600">
                                                                                        {% for o_i in order_items %}
                                                                                        {% if o_i.order_identifier == order_item.order_identifier and o_i.order.id == order_item.order.id %}
                                                                                        <tr data-kt-table-widget-4="subtable_template" class="">
                                                                                            <td colspan="2">
                                                                                                <div class="d-flex align-items-center gap-3">
                                                                                                    <a href="#"  class="symbol symbol-50px bg-secondary bg-opacity-25 rounded">
                                                                                                        <img src="https://ea.stagingstorm.com/media/product_images/main_images/4.jpg" data-kt-src-path="https://ea.stagingstorm.com/media/product_images/main_images/4.jpg" alt=""data-kt-table-widget-4="template_image"></a>
                                                                                                    <div class="d-flex flex-column text-muted">
                                                                                                        <a href="#" class="text-gray-800 text-hover-primary fw-bold" data-kt-table-widget-4="template_name">{{o_i.product.product_name}}-({{o_i.product.sku}})
                                                                                                          </a>                                                                                           
                                                                                                    </div>
                                                                                                </div>
                                                                                            </td>
                                                                                            <td class="text-end">
                                                                                                <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_cost"> {{o_i.supplier}}</div>
                                                                                            </td>
                                                                                            <td class="text-end">
                                                                                                <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_qty">  {{o_i.qty}}</div>
                                                                                            </td>
                                                                                            <td class="text-end">
                                                                                                <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_total">  {{o_i.subtotal}}</div>
                                                                                            </td>
                                                                                            <td class="text-end">
                                                                                                <!--<div class="text-gray-800 fs-7 me-3">On hand</div>-->
                                                                                                <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_stock">
                                                                                                    <div style="color:#141313;"  class="badge  {% if o_i.status == 0 %} ordered {% endif %}  {% if o_i.status == 1 %} shipped {% endif %}  {% if o_i.status == 3 %} arrived {% endif %}  {% if o_i.status == 4 %} booked {% endif %} {% if o_i.status != 4 and o_i.status != 0 and o_i.status != 1 and o_i.status != 3 %} installed {% endif %}">
                                                                                                        {% if o_i.status == 0 %} Ordered {% endif %}  {% if o_i.status == 1 %} Shipped {% endif %}  {% if o_i.status == 3 %} Arrived {% endif %}  {% if o_i.status == 4 %} Booked {% endif %} 
                                                                                                    </div>
                                                                                                    </div>
                                                                                                </td>
                                                                                            </tr>
                                                                                            {% endif %}
                                                                                        {% endfor %}
                                                                                    </tbody>
                                                                                    <!--end::Table body-->
                                                                                </table>
                                                                            </div>
                                                                            <div class="row">
                                                                                <div class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start">  </div>
                                                                                <div class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end"> </div>
                                                                            </div>
                                                                        </div>
                                                                        <!--end::Table-->
                                                                    </div>
                                                                    <!--end::Card body-->
                                                                </div>
                                                                 {% if  order_item.status == 4 %}
                                                                <div class="cards card-flush h-xl-100" data-select2-id="select2-data-124-p5cu">
                                                                    <!--begin::Card header-->
                                                                    <div class="card-header pt-7 p-0" data-select2-id="select2-data-123-flzv">
                                                                        <!--begin::Title-->
                                                                        <h3 class="card-title align-items-start flex-column">
                                                                            <span class="card-label fw-bold text-gray-800">Assigned Technician</span>
                                                                            <span class="text-gray-500 mt-1 fw-semibold fs-6"></span>
                                                                        </h3>
                                                                        <!--end::Title-->
            
                                                                        <!--begin::Actions-->
                                                                        <div class="card-toolbar">
                                                                            
                                                                            <div class="d-flex flex-stack flex-wrap gap-4">
                                                                            </div>
                                                                            
                                                                        </div> 
                                                                    </div> 
                                                                    <div class="card-body pt-2">
                                                                        <form action="/update/technician_order/" method="post">
                                                                            {% csrf_token %}
                                                                        <div id="kt_table_widget_4_table_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                                                                            <div class="table-responsive">
                                                                                <table class="table align-middle table-row-dashed fs-6 gy-3 dataTable no-footer tracking-table"  id="kt_table_widget_4_table">
                                                                                    <!--begin::Table head-->
                                                                                    <thead>
                                                                                        <!--begin::Table row-->
                                                                                        <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                                                                            <th colspan="3"  class="min-w-100px sorting_disabled" rowspan="1" style="">Technician </th>
                                                                                            <th class="text-start min-w-125px sorting_disabled"  rowspan="1"   style="">Installation Date</th>
                                                                                             <th class="text-start min-w-125px sorting_disabled"  rowspan="1"  style="">Installation Time</th>
                                                                                            <th class="text-start min-w-125px sorting_disabled" rowspan="1"  style="">Action</th>
                                                                                        </tr>
                                                                                    </thead>
                                                                                    <tbody class="fw-bold text-gray-600">
                                                                                        <tr data-kt-table-widget-4="subtable_template" class="">
                                                                                            <td colspan="3">
                                                                                                <div class="d-flex align-items-center gap-3">
                                                                                                     <select class="form-select" data-placeholder="Select Technician" name="technician" id="technician" required>
                                                                                                        <option disabled selected value="">Select Technician</option>
                                                                                                        {% for technician in technicians %}
                                                                                                            <option value="{{ technician.id }}" {% if order_item.ordered_technician.technician == technician %} selected {% endif %}>{{ technician.userinfo.first_name }} {{ technician.userinfo.last_name }}</option>
                                                                                                        {% endfor %}
                                                                                                    </select>
                                                                                                </div>
                                                                                                   <input type="hidden" name="order_id" class="orderItemIdInput" value="{{order_item.order.id}}">
                                                                                                    <input type="hidden" name="order_identifier" class="orderItemIdentifierInput" value="{{order_item.order_identifier}}">
                                                                                            </td>
                                                                                            <td class="text-start">
                                                                                                <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_cost">
                                                                                                        <input type="date" class="form-control" name="installation_date" id="installation_date" required value="{{order_item.ordered_technician.installation_date|date:"Y-m-d"}}">
                                                                                                    </div>
                                                                                            </td>
                                                                                            <td class="text-start">
                                                                                                <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_cost">
                                                                                                     <select class="form-select" data-placeholder="Select Installation Time" name="installation_time" id="installation_time" required>
                                                                                                        <option disabled selected value="">Select Installation Time</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == "00:00" %} selected {% endif %} value="00:00">00:00</option>
                                                                                                        <option  {% if order_item.ordered_technician.installation_time|time:"h:i" == '00:30' %} selected {% endif %} value="00:30">00:30</option>
                                                                                                        <option  {% if order_item.ordered_technician.installation_time|time:"h:i" == '01:00' %} selected {% endif %} value="01:00">01:00</option>
                                                                                                        <option  {% if order_item.ordered_technician.installation_time|time:"h:i" == '01:30' %} selected {% endif %} value="01:30">01:30</option>
                                                                                                        <option  {% if order_item.ordered_technician.installation_time|time:"h:i" == '02:00' %} selected {% endif %} value="02:00">02:00</option>
                                                                                                        <option  {% if order_item.ordered_technician.installation_time|time:"h:i" == '02:30' %} selected {% endif %} value="02:30">02:30</option>
                                                                                                        <option  {% if order_item.ordered_technician.installation_time|time:"h:i" == '03:00' %} selected {% endif %} value="03:00">03:00</option>
                                                                                                        <option  {% if order_item.ordered_technician.installation_time|time:"h:i" == '03:30' %} selected {% endif %} value="03:30">03:30</option>
                                                                                                        <option  {% if order_item.ordered_technician.installation_time|time:"h:i" == '04:00' %} selected {% endif %} value="04:00">04:00</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '04:30' %} selected {% endif %}  value="04:30">04:30</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '05:00' %} selected {% endif %} value="05:00">05:00</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '05:30' %} selected {% endif %} value="05:30">05:30</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '06:00' %} selected {% endif %} value="06:00">06:00</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '06:30' %} selected {% endif %} value="06:30">06:30</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '07:00' %} selected {% endif %} value="07:00">07:00</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '07:30' %} selected {% endif %} value="07:30">07:30</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '08:00' %} selected {% endif %} value="08:00">08:00</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '08:30' %} selected {% endif %} value="08:30">08:30</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '09:00' %} selected {% endif %} value="09:00">09:00</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '09:30' %} selected {% endif %} value="09:30">09:30</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '10:00' %} selected {% endif %} value="10:00">10:00</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '10:30' %} selected {% endif %} value="10:30">10:30</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '11:00' %} selected {% endif %} value="11:00">11:00</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '11:30' %} selected {% endif %} value="11:30">11:30</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '12:00' %} selected {% endif %} value="12:00">12:00</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '12:30' %} selected {% endif %} value="12:30">12:30</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '13:00' %} selected {% endif %} value="13:00">13:00</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '13:30' %} selected {% endif %} value="13:30">13:30</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '14:00' %} selected {% endif %} value="14:00">14:00</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '14:30' %} selected {% endif %} value="14:30">14:30</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '15:00' %} selected {% endif %} value="15:00">15:00</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '15:30' %} selected {% endif %} value="15:30">15:30</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '16:00' %} selected {% endif %} value="16:00">16:00</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '16:30' %} selected {% endif %} value="16:30">16:30</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '17:00' %} selected {% endif %} value="17:00">17:00</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '17:30' %} selected {% endif %} value="17:30">17:30</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '18:00' %} selected {% endif %} value="18:00">18:00</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '18:30' %} selected {% endif %} value="18:30">18:30</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '19:00' %} selected {% endif %} value="19:00">19:00</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '19:30' %} selected {% endif %} value="19:30">19:30</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '20:00' %} selected {% endif %} value="20:00">20:00</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '20:30' %} selected {% endif %} value="20:30">20:30</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '21:00' %} selected {% endif %} value="21:00">21:00</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '21:30' %} selected {% endif %} value="21:30">21:30</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '22:00' %} selected {% endif %} value="22:00">22:00</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '22:30' %} selected {% endif %} value="22:30">22:30</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '23:00' %} selected {% endif %} value="23:00">23:00</option>
                                                                                                        <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '23:30' %} selected {% endif %} value="23:30">23:30</option>
                                                                                                     </select>
                                                                                                </div>
                                                                                            </td>
                                                                                           
                                                                                           <td class="text-end" >
                                                                                               <button type="submit" class="btn tech-btn">Update</button>
                                                                                            </td>
                                                                                            </tr>
                                                                                    </tbody>
                                                                                    <!--end::Table body-->
                                                                                </table>
                                                                            </div>
                                                                            <div class="row">
                                                                                <div class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start"> </div>
                                                                                <div  class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end"> </div>
                                                                            </div>
                                                                        </div>
                                                                        </form>
                                                                        <!--end::Table-->
                                                                    </div>
                                                                    <!--end::Card body-->
                                                                </div>
                                                                {% endif %}
            
            
                                                            </div> 
                                                            <div id="kt_activity_week_order{{order_item.id}}"
                                                                class="card-body p-0 tab-pane fade show pt-10" role="tabpanel"
                                                                aria-labelledby="kt_activity_week_tab">
                                                                <div class="d-flex flex-column gap-7 gap-lg-10"> 
                                                                    <div class="d-flex flex-column flex-xl-row gap-7 gap-lg-10"> 
                                                                        <div class="card card-flush py-4  flex-row-fluid"> 
                                                                            <div class="card-header">
                                                                                <div class="card-title">
                                                                                    <h2>Customer Details</h2>
                                                                                </div>
                                                                            </div> 
                                                                            <div class="card-body pt-0">
                                                                                <div class="table-responsive"> 
                                                                                    <table  class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                                        <tbody class="fw-semibold text-gray-600">
                                                                                            <tr>
                                                                                                <td class="text-muted">
                                                                                                    <div  class="d-flex align-items-center">
                                                                                                        <i class="ki-outline ki-profile-circle fs-2 me-2"></i>  Customer
                                                                                                    </div>
                                                                                                </td> 
                                                                                                <td class="fw-bold text-end">
                                                                                                    <div class="d-flex align-items-center justify-content-end"> 
                                                                                                        <a href="/metronic8/demo42/../demo42/apps/ecommerce/customers/details.html"  class="text-gray-600 text-hover-primary">
                                                                                                            {% if order_item.order.invoice.customer.company_name %}
                                                                                                                {{ order_item.order.invoice.customer.company_name }}
                                                                                                            {% else %}
                                                                                                                {{ order_item.order.invoice.customer.first_name}}   {{ order_item.order.invoice.customer.last_name}}
                                                                                                            {% endif %}
                                                                                                        </a> 
                                                                                                    </div>
                                                                                                </td>
                                                                                            </tr>
                                                                                            <tr>
                                                                                                <td class="text-muted">
                                                                                                    <div class="d-flex align-items-center">
                                                                                                        <i class="ki-outline ki-sms fs-2 me-2"></i>  Email
                                                                                                    </div>
                                                                                                </td>
                                                                                                <td class="fw-bold text-end">
                                                                                                    <a href="/metronic8/demo42/../demo42/apps/user-management/users/view.html" class="text-gray-600 text-hover-primary"> {{ order_item.order.invoice.customer.email}} </a>
                                                                                                </td>
                                                                                            </tr>
                                                                                            <tr>
                                                                                                <td class="text-muted">
                                                                                                    <div class="d-flex align-items-center">
                                                                                                        <i  class="ki-outline ki-phone fs-2 me-2"></i>  Phone
                                                                                                    </div>
                                                                                                </td>
                                                                                                <td class="fw-bold text-end"> {{ order_item.order.invoice.customer.phone1}}</td>
                                                                                            </tr> 
                                                                                        </tbody>
                                                                                    </table> 
                                                                                </div>
                                                                            </div> 
                                                                        </div> 
                                                                        <div class="card card-flush py-4 flex-row-fluid"> 
                                                                            <div class="card-header">
                                                                                <div class="card-title">
                                                                                    <h2>Order History</h2>
                                                                                </div>
                                                                            </div> 
                                                                            <div class="card-body pt-0">
                                                                                <div class="table-responsive order-his"> 
                                                                                    <table class="table align-middle table-row-dashed fs-6 gy-5 mb-0 history-table">
                                                                                        <thead>
                                                                                            <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                                                                                <th class="min-w-100px">Date Added</th>
                                                                                                <th class="min-w-70px">Order Status</th>
                                                                                            </tr>
                                                                                        </thead>
                                                                                        <tbody
                                                                                            class="fw-semibold text-gray-600">
                                                                                            {% if order_item.get_order_history %}
                                                                                            {% for o_history in order_item.get_order_history%}
                                                                                            <tr>
                                                                                                <td>{{o_history.timestamp|date:"M. d, Y, g:i A" }}</td>
                                                                                                <td> 
                                                                                                    <div style="color:#141313;"  class="badge badge-light-success"> {{o_history.action}}</div>
                                                                                                </td>
                                                                                            </tr>
                                                                                            {% endfor %}
                                                                                            {% endif %}
                                                                                            <tr>
                                                                                                <td>20/11/2023</td>
                                                                                                <td> 
                                                                                                    <div class="badge badge-light-success" >Completed</div>
                                                                                                </td> 
                                                                                            </tr>
                                                                                            <tr>
                                                                                                <td>17/11/2023</td>
                                                                                                <td> 
                                                                                                    <div class="badge badge-light-primary"> Processing</div>
                                                                                                </td>
                                                                                            </tr>
                                                                                            <tr>
                                                                                                <td>13/11/2023</td>
                                                                                                <td>
                                                                                                    <div class="badge badge-light-warning">Pending</div>
                                                                                                </td>
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                     </div>
                                                                    <div class="tab-content">
                                                                        <div class="tab-pane fade active show" id="kt_ecommerce_sales_order_summary" role="tab-panel">
                                                                             <div class="d-flex flex-column gap-7 gap-lg-10">
                                                                                <div class="d-flex flex-column flex-xl-row gap-7 gap-lg-10">
                                                                                     <div class="card card-flush py-4 flex-row-fluid position-relative">
                                                                                         <div class="position-absolute top-0 end-0 bottom-0 opacity-10 d-flex align-items-center me-5">
                                                                                            <i class="ki-solid ki-two-credit-cart" style="font-size: 14em">
                                                                                            </i>
                                                                                        </div>
                                                                                       <div class="card-header">
                                                                                            <div class="card-title">
                                                                                                <h2>Billing Address</h2>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="card-body pt-0">
                                                                                            {% if order_item.order.invoice.customer.street %}{{ order_item.order.invoice.customer.street}} ,<br> {% endif %}
                                                                                            {% if order_item.order.invoice.customer.city %} {{ order_item.order.invoice.customer.city}} ,<br>  {% endif %}
                                                                                            {% if order_item.order.invoice.customer.state %} {{ order_item.order.invoice.customer.state}} ,<br>  {% endif %}
                                                                                            {% if order_item.order.invoice.customer.country %}{{ order_item.order.invoice.customer.country}}  {% endif %}  {% if order_item.order.invoice.customer.post_code %}{{ order_item.order.invoice.customer.post_code}}  {% endif %}.
                                                                                        </div> 
                                                                                    </div>
                                                                                    <div class="card card-flush py-4 flex-row-fluid position-relative"> 
                                                                                        <div class="position-absolute top-0 end-0 bottom-0 opacity-10 d-flex align-items-center me-5">
                                                                                            <i class="ki-solid ki-delivery"
                                                                                                style="font-size: 13em">
                                                                                            </i>
                                                                                        </div>
                                                                                        <div class="card-header">
                                                                                            <div class="card-title">
                                                                                                <h2>Shipping Address</h2>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="card-body pt-0">
                                                                                            {% if order_item.order.invoice.customer.street %}{{ order_item.order.invoice.customer.street}} ,<br> {% endif %}
                                                                                            {% if order_item.order.invoice.customer.city %} {{ order_item.order.invoice.customer.city}} ,<br>  {% endif %}
                                                                                            {% if order_item.order.invoice.customer.state %} {{ order_item.order.invoice.customer.state}} ,<br>  {% endif %}
                                                                                            {% if order_item.order.invoice.customer.country %}{{ order_item.order.invoice.customer.country}}  {% endif %}  {% if order_item.order.invoice.customer.post_code %}{{ order_item.order.invoice.customer.post_code}}  {% endif %}.
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div> 
                                                                </div> 
                                                            </div>
                                                            <div id="kt_activity_month_order{{order_item.id}}" class="card-body p-0 tab-pane show"  role="tabpanel" aria-labelledby="kt_activity_month_tab">
                                                                <div class="cards mt-9"> 
                                                                    <div class="card-body"> 
                                                                        <div class="d-flex flex-column flex-xl-row"> 
                                                                            <div class="flex-lg-row-fluid me-xl-10 mb-10 mb-xl-0"> 
                                                                                <div class="mt-n1"> 
                                                                                    <div class="m-0"> 
                                                                                        <div class="fw-bold fs-3 text-gray-800 mb-8"> Invoice ID: {{ order_item.order.invoice.id}}</div>
                                                                                         
                                                                                        <div class="row g-5 mb-11"> 
                                                                                            <div class="col-sm-6"> 
                                                                                                <div class="fw-semibold fs-7 text-gray-600 mb-1"> Issue Date:</div> 
                                                                                                <div class="fw-bold fs-6 text-gray-800">
                                                                                                    {{ order_item.order.invoice.invoice_date}}</div> 
                                                                                            </div> 
                                                                                            <div class="col-sm-6"> 
                                                                                                <div class="fw-semibold fs-7 text-gray-600 mb-1"> Due Date:</div> 
                                                                                                <div class="fw-bold fs-6 text-gray-800 d-flex align-items-center flex-wrap">
                                                                                                    <span class="pe-2">{{ order_item.order.invoice.due_date}}</span>
                                                                                                </div> 
                                                                                            </div> 
                                                                                        </div> 
                                                                                        <div class="row g-5 mb-12"> 
                                                                                            <div class="col-sm-6"> 
                                                                                                <div class="fw-semibold fs-7 text-gray-600 mb-1"> Issue For:</div> 
                                                                                                <div class="fw-bold fs-6 text-gray-800">
                                                                                                {% if order_item.order.invoice.customer.company_name %}
                                                                                                    {{ order_item.order.invoice.customer..company_name }}
                                                                                                {% else %}
                                                                                                    {{ order_item.order.invoice.customer.first_name}}   {{ order_item.order.invoice.customer.last_name}}
                                                                                                {% endif %} 
                                                                                                </div>
                                                                                                <div class="fw-semibold fs-7 text-gray-600">
                                                                                                    {% if order_item.order.invoice.customer.street %}{{ order_item.order.invoice.customer.street}} ,<br> {% endif %}
                                                                                                    {% if order_item.order.invoice.customer.city %} {{ order_item.order.invoice.customer.city}} ,<br>  {% endif %}
                                                                                                    {% if order_item.order.invoice.customer.state %} {{ order_item.order.invoice.customer.state}} ,<br>  {% endif %}
                                                                                                    {% if order_item.order.invoice.customer.country %}{{ order_item.order.invoice.customer.country}}  {% endif %}  {% if order_item.order.invoice.customer.post_code %}{{ order_item.order.invoice.customer.post_code}}  {% endif %}.
                                                                                             </div>
                                                                                            </div>
                                                                                            <div class="col-sm-6">
                                                                                                <div class="fw-semibold fs-7 text-gray-600 mb-1"> Issued By:</div>
                                                                                               
                                                                                                <div class="fw-bold fs-6 text-gray-800">
                                                                                                  Excitech Team.
                                                                                                 </div>
                                                                                                <div
                                                                                                    class="fw-semibold fs-7 text-gray-600">
                                                                                                    {% if order_item.order.invoice.created_by.street %}{{ order_item.order.invoice.created_by.street}} ,<br> {% endif %}
                                                                                                    {% if order_item.order.invoice.created_by.city %} {{ order_item.order.invoice.created_by.city}} ,<br>  {% endif %}
                                                                                                    {% if order_item.order.invoice.created_by.state %} {{ order_item.order.invoice.created_by.state}} ,<br>  {% endif %}
                                                                                                    {% if order_item.order.invoice.created_by.country %}{{ order_item.order.invoice.created_by.country}}  {% endif %}  {% if order_item.order.invoice.created_by.post_code %}{{ order_item.order.invoice.customer.post_code}}  {% endif %}.
                                                                                            </div>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="flex-grow-1">
                                                                                            <div class="table-responsive border-bottom mb-9">
                                                                                                <table class="table mb-3">
                                                                                                    <thead>
                                                                                                        <tr class="border-bottom fs-6 fw-bold text-muted">
                                                                                                            <th class="min-w-175px pb-2"> Order ID</th>
                                                                                                            <th class="min-w-150px pb-2"> Total Amount </th>
                                                                                                            <th class="min-w-120px pb-2"> Paid</th>
                                                                                                            <th class="min-w-120px pb-2"> Balance</th>
                                                                                                        </tr>
                                                                                                    </thead> 
                                                                                                    <tbody>
                                                                                                        <tr class="fw-bold text-gray-700 fs-5">
                                                                                                            <td class="d-flex align-items-center pt-6">
                                                                                                                <i class="fa fa-genderless text-danger fs-2 me-2"></i>
                                                                                                                    {{ order_item.order.id }}
                                                                                                            </td> 
                                                                                                            {% if order_item.order.invoice %} 
                                                                                                            <td class="pt-6 text-gray-900 fw-bolder">  ${{ order_item.order.invoice.total }}</td>
                                                                                                            <td class="pt-6 text-gray-900 fw-bolder"> ${{ order_item.order.invoice.total_paid_amount }}</td>
                                                                                                            <td class="pt-6 text-gray-900 fw-bolder">  ${{ order_item.order.invoice.total|subtract:order_item.order.invoice.total_paid_amount }}</td> 
                                                                                                            {% elif order_item.order.bill %} 
                                                                                                                <td class="pt-6 text-gray-900 fw-bolder"> ${{ order_item.order.bill.total }}</td>
                                                                                                                <td class="pt-6 text-gray-900 fw-bolder"> ${{ order_item.order.bill.total_paid_amount }}</td>
                                                                                                                <td class="pt-6 text-gray-900 fw-bolder">  ${{ order_item.order.bill.total|subtract:order_item.order.bill.total_paid_amount }}</td>
                                                                                                            {% endif %}
                                                                                                        </tr>
            
                                                                                                    </tbody>
                                                                                                </table>
                                                                                            </div> 
                                                                                            <div class="d-flex justify-content-end"> 
                                                                                            </div> 
                                                                                        </div> 
                                                                                    </div> 
                                                                                </div> 
                                                                            </div> 
                                                                            <div class="m-0"> 
                                                                                <div class="d-print-none border border-dashed border-gray-300 card-rounded h-lg-100 min-w-md-350px p-9 bg-lighten"> 
                                                                                    <div class="mb-8">
                                                                                        <span class="badge badge-light-warning">Partial Paid  </span>
                                                                                    </div> 
                                                                                    <h6 class="mb-8 fw-bolder text-gray-600 text-hover-primary"> LAST PAYMENT DETAILS</h6> 
                                                                                    {% if order_item.order.invoice.get_invoice_payment_records %}
                                                                                    {% for i_pay in order_item.order.invoice.get_invoice_payment_records %}
                                                                                    {% if forloop.counter == 1 %} 
                                                                                    <div class="mb-6">
                                                                                        <div class="fw-semibold text-gray-600 fs-7">Payment Type</div>
                                                                                        <div class="fw-bold text-gray-800 fs-6">  Paypal </div>
                                                                                    </div> 
                                                                                    <div class="mb-6">
                                                                                        <div class="fw-semibold text-gray-600 fs-7"> Payment Date</div>
                                                                                        <div class="fw-bold text-gray-800 fs-6"> {{i_pay.paydate}} </div>
                                                                                    </div> 
                                                                                    <div class="mb-6">
                                                                                        <div class="fw-semibold text-gray-600 fs-7">  Amount</div>
                                                                                        <div class="fw-bold text-gray-800 fs-6">  ${{i_pay.paid_amount}} </div>
                                                                                    </div> 
                                                                                    <div class="mb-13">
                                                                                        <div class="fw-semibold text-gray-600 fs-7"> Payment Term:</div> 
                                                                                        <div class="fw-bold fs-6 text-gray-800 d-flex align-items-center">
                                                                                            14 days
                                                                                            <span class="fs-7 text-danger d-flex align-items-center">
                                                                                                <span class="bullet bullet-dot bg-danger mx-2"></span>
                                                                                                Due in 7 days
                                                                                            </span>
                                                                                        </div>
                                                                                    </div>
                                                                                    {% endif %}
                                                                                    {% endfor %}
                                                                                    {% endif %} 
                                                                                    <h6 class="mb-4 fw-bolder text-gray-600 text-hover-primary"> PAYMENT HISTORY</h6> 
                                                                                    <div class="flex-grow-1"> 
                                                                                        <div
                                                                                            class="table-responsive border-bottom mb-4">
                                                                                            <table class="table mb-3">
                                                                                                <thead>
                                                                                                    <tr class="border-bottom fs-6 fw-bold text-muted">
                                                                                                        <th class="min-w-120px pb-2">  Date</th>
                                                                                                        <th class="min-w-120px pb-2">  Amount</th>
                                                                                                    </tr>
                                                                                                </thead>
                                                                                                <tbody>
                                                                                                    {% if order_item.order.invoice.get_invoice_payment_records %}
                                                                                                        {% for i_pay in order_item.order.invoice.get_invoice_payment_records %}
                                                                                                        <tr class="fw-bold text-gray-700 fs-5">
                                                                                                            <td class="pt-6 text-gray-900 fw-bolder"> {{i_pay.paydate}}</td>
                                                                                                            <td class="pt-6 text-gray-900 fw-bolder"> ${{i_pay.paid_amount}}</td>
                                                                                                        </tr>
                                                                                                        {% endfor %}
                                                                                                    {% endif %}
                                                                                                </tbody>
                                                                                            </table>
                                                                                        </div>
                                                                                        <div class="d-flex justify-content-end">
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer"></div>
                            </div>
                        </div>
  {% endfor %}
  	{% for order_item in serial_numbers %}				
  <!--  <div class="modal fade myModal" id="myModals{{row.id}}" role="dialog">-->
  <!--   <div class="modal-dialog">-->
      <!-- Modal content-->
  <!--    <div class="modal-content">-->
  <!--      <div class="modal-header">-->
  <!--        <button type="button" class="close" data-id="s{{row.id}}" data-bs-dismiss="modal">&times;</button>-->
  <!--        <h4 class="modal-title">Modal Header Serial Number {{row.id}}</h4>-->
  <!--      </div>-->
  <!--      <div class="modal-body">-->
  <!--        <p>Some text in the modal.</p>-->
  <!--      </div>-->
  <!--      <div class="modal-footer">-->
  <!--        <button type="button" class="close btn btn-default" data-id="s{{row.id}}" data-bs-dismiss="modal">Close</button>-->
  <!--      </div>-->
  <!--    </div>-->
      
  <!--  </div>-->
  <!--</div>-->
    <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 %}">
                                                    {% if order_item.tracking_status == 0 %} Ordered {% endif %}  {% if order_item.tracking_status == 1 %} Shipped {% endif %}  {% if order_item.tracking_status == 3 %} Arrived {% endif %} 
                                            </span>
                                            <span class="serialStatus-{{order_item.get_status_display}}">{{order_item.get_status_display}}</span>
                                        </h2>
                                        <button id="closeModalBtn" class="close" data-id="s{{order_item.id}}" >X</button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="orders-details mt-5 mb-5">
                                            <div class="row g-5">
                                                <div class="col-md-4" style="padding-right:20px;">
                                                    <div class="card card-flush py-4 flex-row-fluid mb-5 order-card">
                                                        <div class="card-header">
                                                            <div class="card-title">
                                                                 <h2>Bill Details {{order_item.bill.id}}</h2>
                                                            </div>
                                                        </div>
                                                        <div class="card-body pt-0">
                                                            <div class="table-responsive">
                                                                <table class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                    <tbody class="fw-semibold text-gray-600">
                                                                        <tr>
                                                                            <td class="text-muted">
                                                                                <div class="d-flex align-items-center">
                                                                                    <i class="ki-outline ki-calendar fs-2 me-2"></i>
                                                                                    Date Added
                                                                                </div>
                                                                            </td>
                                                                            <td class="fw-bold text-end">{{order_item.created_at|date:"M. d, Y, g:i A"}}</td>
                                                                        </tr>
                                                                       
                                                                       
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div id="kt_activity_years"  class="card-body p-0 pt-5 tab-pane fade active show mt-6 kt_activity_comments" role="tabpanel" aria-labelledby="kt_activity_year_tab">
                                                        <h3 class="card-label fw-bold text-gray-800 mb-7">Activity</h3>
                                                        <div class="timeline timeline-border-dashed mt-5">
                                                            <div class="timeline-item">
                                                                <div class="timeline-line"></div>
                                                                <div class="timeline-icon">
                                                                    <i class="ki-outline ki-pencil fs-2 text-gray-500"></i>
                                                                </div>
                                                                <div class="timeline-content mb-6 mt-n1">
                                                                    <div class="pe-3 mb-5">
                                                                        <div class="fs-6 fw-semibold mb-2">3 new application design concepts added:</div>
                                                                        <div class="d-flex align-items-center mt-1 fs-6">
                                                                            <div class="text-muted me-2 fs-7">Created at 4:23 PM by  Abc</div>
                                                                            <div class="symbol symbol-circle symbol-25px"   data-bs-toggle="tooltip" data-bs-boundary="window" data-bs-placement="top" aria-label="Marcus Dotson"  data-bs-original-title="Marcus Dotson" data-kt-initialized="1">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="overflow-auto pb-5">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="timeline-item">
                                                                <div class="timeline-line"></div>
                                                                <div class="timeline-icon">
                                                                    <i class="ki-outline ki-sms fs-2 text-gray-500"></i>
                                                                </div>
                                                                <div class="timeline-content mb-6 mt-n1">
                                                                    <div class="pe-3 mb-5">
                                                                        <div class="fs-6 fw-semibold mb-2">  New case <a href="#" class="text-primary fw-bold me-1">#67890</a> is assigned to you in Multi-platform Database Design project </div>
                                                                        <div class="overflow-auto pb-5">
                                                                            <div class="d-flex align-items-center mt-1 fs-6">
                                                                                <div class="text-muted me-2 fs-7">Added at 4:23 PM by Abc</div>
                                                                                <a href="#" class="text-primary fw-bold me-1">Alice Tan</a>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="timeline-item">
                                                                <div class="timeline-line"></div>
                                                                <div class="timeline-icon">
                                                                    <i class="ki-outline ki-basket fs-2 text-gray-500"></i>
                                                                </div>
                                                                <div class="timeline-content mt-n1">
                                                                    <div class="pe-3 mb-5">
                                                                        <div class="fs-6 fw-semibold mb-2">
                                                                            New order <a href="#"  class="text-primary fw-bold me-1">#67890</a> is placed for Workshow Planning &amp; Budget Estimation
                                                                        </div>
                                                                        <div class="d-flex align-items-center mt-1 fs-6">
                                                                            <div class="text-muted me-2 fs-7">Placed at 4:23 PM by Abc</div>
                                                                            <a href="#" class="text-primary fw-bold me-1">Jimmy Bold</a>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-8" style=" border-left:1px dashed #b5b5c3;">
                                                    <div class="cards">
                                                        <div class="card-header card-header-stretch">
                                                            <div class="card-title d-flex align-items-center">
                                                            </div>
                                                  
                                                            <div class="card-toolbar m-0">
                                                                <ul class="nav nav-tabs nav-line-tabs nav-stretch fs-6 border-0 fw-bold"
                                                                    role="tablist">
                                                                    <li class="nav-item" role="presentation">
                                                                        <a id="kt_activity_today_tab"  class="nav-link justify-content-center text-active-gray-800 active"  data-bs-toggle="tab" role="tab"  href="#kt_activity_today_serial{{order_item.id}}" aria-selected="true">  Order Details  </a>
                                                                    </li>
                                                                    <li class="nav-item" role="presentation">
                                                                        <a id="kt_activity_week_tab" class="nav-link justify-content-center text-active-gray-800" data-bs-toggle="tab" role="tab" href="#kt_activity_week_serial{{order_item.id}}" aria-selected="false" tabindex="-1">Account</a>
                                                                    </li>
                                                                    <li class="nav-item" role="presentation">
                                                                        <a id="kt_activity_month_tab" class="nav-link justify-content-center text-active-gray-800" data-bs-toggle="tab" role="tab" href="#kt_activity_month_serial{{order_item.id}}" aria-selected="false" tabindex="-1"> Payment Details</a>
                                                                    </li>
                                                                  
                                                                </ul>
                                                                <!--end::Tab nav-->
                                                            </div>
                                                            <!--end::Toolbar-->
                                                        </div>
                                                        <div class="card-body">
                                                            <div class="tab-content">
                                                                <!--begin::Order Detail Tab panel-->
                                                                <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">
                                                                        <!--begin::Card header-->
                                                                        <div class="card-header pt-7 p-0"
                                                                            data-select2-id="select2-data-123-flzv">
                                                                            <!--begin::Title-->
                                                                            <h3 class="card-title align-items-start flex-column">
                                                                                <span
                                                                                    class="card-label fw-bold text-gray-800">Product
                                                                                    Orders</span>
                                                                                <span
                                                                                    class="text-gray-500 mt-1 fw-semibold fs-6"></span>
                                                                            </h3>
                                                                            <!--end::Title-->
                
                                                                            <!--begin::Actions-->
                                                                            <div class="card-toolbar">
                                                                                
                                                                                <div class="d-flex flex-stack flex-wrap gap-4">
                                                                                </div>
                                                                                
                                                                            </div>
                                                                            <!--end::Actions-->
                                                                        </div>
                                                                        <!--end::Card header-->
                
                                                                        <!--begin::Card body-->
                                                                        <div class="card-body pt-2">
                                                                            <!--begin::Table-->
                                                                            <div id="kt_table_widget_4_table_wrapper"
                                                                                class="dataTables_wrapper dt-bootstrap4 no-footer">
                                                                                <div class="table-responsive">
                                                                                    <table
                                                                                        class="table align-middle table-row-dashed fs-6 gy-3 dataTable no-footer tracking-table"
                                                                                        id="kt_table_widget_4_table">
                                                                                        <!--begin::Table head-->
                                                                                        <thead>
                                                                                            <!--begin::Table row-->
                                                                                            <tr
                                                                                                class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                                                                                <th colspan="2"
                                                                                                    class="min-w-100px sorting_disabled"
                                                                                                    rowspan="1" style="">Product
                                                                                                </th>
                                                                                                <th class="text-end min-w-125px sorting_disabled"
                                                                                                    rowspan="1" 
                                                                                                    style="">Supplier</th>
                                                                                                <th class="text-end min-w-100px sorting_disabled"
                                                                                                    rowspan="1" 
                                                                                                    style="">Quantity</th>
                                                                                                <!--<th class="text-end min-w-100px sorting_disabled"-->
                                                                                                <!--    rowspan="1" -->
                                                                                                <!--    style="">Total</th>-->
                                                                                                <th class="text-end min-w-50px sorting_disabled"
                                                                                                    rowspan="1" 
                                                                                                    style=""> Tracking Status</th>
                                                                                                    
                                                                                                <th class="text-end min-w-50px sorting_disabled"
                                                                                                    rowspan="1" 
                                                                                                    style=""> Allocation Status</th>
                                                                                            </tr>
                                                                                        </thead>
                                                                                        <tbody class="fw-bold text-gray-600">
                                                                                            <tr data-kt-table-widget-4="subtable_template"
                                                                                                class="">
                                                                                                <td colspan="2">
                                                                                                    <div
                                                                                                        class="d-flex align-items-center gap-3">
                                                                                                        <a href="#"
                                                                                                            class="symbol symbol-50px bg-secondary bg-opacity-25 rounded">
                                                                                                            <img src="https://ea.stagingstorm.com/media/product_images/main_images/4.jpg"
                                                                                                                data-kt-src-path="https://ea.stagingstorm.com/media/product_images/main_images/4.jpg"
                                                                                                                alt=""
                                                                                                                data-kt-table-widget-4="template_image">
                                                                                                        </a>
                                                                                                        <div
                                                                                                            class="d-flex flex-column text-muted">
                                                                                                            <a href="#"
                                                                                                                class="text-gray-800 text-hover-primary fw-bold"
                                                                                                                data-kt-table-widget-4="template_name">{{order_item.product.product_name}}-({{order_item.product.sku}})
                                                                                                              </a>                                                                                           
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </td>
                                                                                                <td class="text-end">
                                                                                                    <div class="text-muted fs-7 fw-bold"
                                                                                                        data-kt-table-widget-4="template_cost">
                                                                                                        {{order_item.supplier}}</div>
                                                                                                </td>
                                                                                                <td class="text-end">
                                                                                                    <!--<div class="text-gray-800 fs-7">Qty</div>-->
                                                                                                    <div class="text-muted fs-7 fw-bold"
                                                                                                        data-kt-table-widget-4="template_qty">
                                                                                                       1</div>
                                                                                                </td>
                                                                                                <!--<td class="text-end">-->
                                                                                                    <!--<div class="text-gray-800 fs-7">Total</div>-->
                                                                                                <!--    <div class="text-muted fs-7 fw-bold"-->
                                                                                                <!--        data-kt-table-widget-4="template_total">-->
                                                                                                <!--        {{order_item.subtotal}}</div>-->
                                                                                                <!--</td>-->
                                                                                                <td class="text-end">
                                                                                                    <!--<div class="text-gray-800 fs-7 me-3">On hand</div>-->
                                                                                                    <div class="text-muted fs-7 fw-bold"
                                                                                                        data-kt-table-widget-4="template_stock">
                                                                                                        <div style="color:#141313;" 
                                                                                                            class="badge  {% if order_item.tracking_status == 0 %} ordered {% endif %}  {% if order_item.tracking_status == 1 %} shipped {% endif %}  {% if order_item.tracking_status == 3 %} arrived {% endif %}  {% if order_item.tracking_status == 4 %} booked {% endif %} {% if order_item.tracking_status != 4 and order_item.tracking_status != 0 and order_item.tracking_status != 1 and order_item.tracking_status != 3 %} installed {% endif %}">
                                                                                                            {% if order_item.tracking_status == 0 %} Ordered {% endif %}  {% if order_item.tracking_status == 1 %} Shipped {% endif %}  {% if order_item.tracking_status == 3 %} Arrived {% endif %}  {% if order_item.tracking_status == 4 %} Booked {% endif %} 
                                                                                                        </div>
                                                                                                        </div>
                                                                                                    </td>
                                                                                                    
                                                                                                    
                                                                                                     <td class="text-end">
                                                                                                    <!--<div class="text-gray-800 fs-7 me-3">On hand</div>-->
                                                                                                    <div class="text-muted fs-7 fw-bold"  data-kt-table-widget-4="template_stock">
                                                                                                        <div  style="color:#141313;" class="badge  {% if order_item.tracking_status == 0 %} ordered {% endif %}  {% if order_item.tracking_status == 1 %} shipped {% endif %}  {% if order_item.tracking_status == 3 %} arrived {% endif %}  {% if order_item.tracking_status == 4 %} booked {% endif %} {% if order_item.tracking_status != 4 and order_item.tracking_status != 0 and order_item.tracking_status != 1 and order_item.tracking_status != 3 %} installed {% endif %}">
                                                                                                            {% if order_item.get_status_display == 'Open' %} Open {% endif %}  {% if order_item.get_status_display == "Allocated" %} Allocated {% endif %}  {% if order_item.get_status_display == "Unallocated" %} Unallocated {% endif %}  
                                                                                                        </div>
                                                                                                        </div>
                                                                                                    </td>
                                                                                                    
                                                                                                    
                                                                                                </tr>
                                                                                        </tbody>
                                                                                        <!--end::Table body-->
                                                                                    </table>
                                                                                </div>
                                                                                <div class="row">
                                                                                    <div
                                                                                        class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start">
                                                                                    </div>
                                                                                    <div
                                                                                        class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end">
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <!--end::Table-->
                                                                        </div>
                                                                        <!--end::Card body-->
                                                                    </div>
                                                                     {% if  order_item.status == 4 %}
                                                                    <div class="cards card-flush h-xl-100"
                                                                        data-select2-id="select2-data-124-p5cu">
                                                                        <!--begin::Card header-->
                                                                        <div class="card-header pt-7 p-0"
                                                                            data-select2-id="select2-data-123-flzv">
                                                                            <!--begin::Title-->
                                                                            <h3 class="card-title align-items-start flex-column">
                                                                                <span
                                                                                    class="card-label fw-bold text-gray-800">Assigned Technician</span>
                                                                                <span
                                                                                    class="text-gray-500 mt-1 fw-semibold fs-6"></span>
                                                                            </h3>
                                                                            <!--end::Title-->
                
                                                                            <!--begin::Actions-->
                                                                            <div class="card-toolbar">
                                                                                
                                                                                <div class="d-flex flex-stack flex-wrap gap-4">
                                                                                </div>
                                                                                
                                                                            </div>
                                                                            <!--end::Actions-->
                                                                        </div>
                                                                        <!--end::Card header-->
                
                                                                        <!--begin::Card body-->
                                                                        <div class="card-body pt-2">
                                                                            <!--begin::Table-->
                                                                            <form action="/update/technician_order/" method="post">
                                                                                {% csrf_token %}
                                                                            <div id="kt_table_widget_4_table_wrapper"
                                                                                class="dataTables_wrapper dt-bootstrap4 no-footer">
                                                                                <div class="table-responsive">
                                                                                    <table class="table align-middle table-row-dashed fs-6 gy-3 dataTable no-footer tracking-table" id="kt_table_widget_4_table">
                                                                                        <thead>
                                                                                            <tr
                                                                                                class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                                                                                <th colspan="3"
                                                                                                    class="min-w-100px sorting_disabled"
                                                                                                    rowspan="1" style="">Technician
                                                                                                </th>
                                                                                                <th class="text-start min-w-125px sorting_disabled"
                                                                                                    rowspan="1" 
                                                                                                    style="">Installation Date</th>
                                                                                                 <th class="text-start min-w-125px sorting_disabled"
                                                                                                rowspan="1" 
                                                                                                style="">Installation Time</th>
                                                                                                <th class="text-start min-w-125px sorting_disabled"
                                                                                                rowspan="1" 
                                                                                                style="">Action</th>
                                                                                                
                                                                                              
                                                                                            </tr>
                                                                                        </thead>
                                                                                        <tbody class="fw-bold text-gray-600">
                                                                                         
                                                                                            <tr data-kt-table-widget-4="subtable_template"
                                                                                                class="">
                                                                                                <td colspan="3">
                                                                                                    <div class="d-flex align-items-center gap-3">
                                                                                                         <select class="form-select" data-placeholder="Select Technician" name="technician" id="technician" required>
                                                                                                            <option disabled selected value="">Select Technician</option>
                                                                                                            {% for technician in technicians %}
                                                                                                                <option value="{{ technician.id }}" {% if order_item.ordered_technician.technician == technician %} selected {% endif %}>{{ technician.userinfo.first_name }} {{ technician.userinfo.last_name }}</option>
                                                                                                            {% endfor %}
                                                                                                        </select>
                                                                                                    </div>
                                                                                                       <input type="hidden" name="order_id" class="orderItemIdInput" value="{{order_item.order.id}}">
                                                                                                        <input type="hidden" name="order_identifier" class="orderItemIdentifierInput" value="{{order_item.order_identifier}}">
                                                                                                </td>
                                                                                                  <td class="text-start">
                                                                                                    <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_cost">
                                                                                                    
                                                                                                          
                                                                                                         
                                                                                                            <input type="date" class="form-control" name="installation_date" id="installation_date" required value="{{order_item.ordered_technician.installation_date|date:"Y-m-d"}}">
                                                                                                        </div>
                                                                                                    </td>
                                                                                                <td class="text-start">
                                                                                                    <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_cost">
                                                                                                         <select class="form-select" data-placeholder="Select Installation Time" name="installation_time" id="installation_time" required>
                                                                                                            <option disabled selected value="">Select Installation Time</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '00:00' %} selected {% endif %} value="00:00">00:00</option>
                                                                                                            <option  {% if order_item.ordered_technician.installation_time|time:"h:i" == '00:30' %} selected {% endif %} value="00:30">00:30</option>
                                                                                                            <option  {% if order_item.ordered_technician.installation_time|time:"h:i" == '01:00' %} selected {% endif %} value="01:00">01:00</option>
                                                                                                            <option  {% if order_item.ordered_technician.installation_time|time:"h:i" == '01:30' %} selected {% endif %} value="01:30">01:30</option>
                                                                                                            <option  {% if order_item.ordered_technician.installation_time|time:"h:i" == '02:00' %} selected {% endif %} value="02:00">02:00</option>
                                                                                                            <option  {% if order_item.ordered_technician.installation_time|time:"h:i" == '02:30' %} selected {% endif %} value="02:30">02:30</option>
                                                                                                            <option  {% if order_item.ordered_technician.installation_time|time:"h:i" == '03:00' %} selected {% endif %} value="03:00">03:00</option>
                                                                                                            <option  {% if order_item.ordered_technician.installation_time|time:"h:i" == '03:30' %} selected {% endif %} value="03:30">03:30</option>
                                                                                                            <option  {% if order_item.ordered_technician.installation_time|time:"h:i" == '04:00' %} selected {% endif %} value="04:00">04:00</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '04:30' %} selected {% endif %}  value="04:30">04:30</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '05:00' %} selected {% endif %} value="05:00">05:00</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '05:30' %} selected {% endif %} value="05:30">05:30</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '06:00' %} selected {% endif %} value="06:00">06:00</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '06:30' %} selected {% endif %} value="06:30">06:30</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '07:00' %} selected {% endif %} value="07:00">07:00</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '07:30' %} selected {% endif %} value="07:30">07:30</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '08:00' %} selected {% endif %} value="08:00">08:00</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '08:30' %} selected {% endif %} value="08:30">08:30</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '09:00' %} selected {% endif %} value="09:00">09:00</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '09:30' %} selected {% endif %} value="09:30">09:30</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '10:00' %} selected {% endif %} value="10:00">10:00</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '10:30' %} selected {% endif %} value="10:30">10:30</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '11:00' %} selected {% endif %} value="11:00">11:00</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '11:30' %} selected {% endif %} value="11:30">11:30</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '12:00' %} selected {% endif %} value="12:00">12:00</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '12:30' %} selected {% endif %} value="12:30">12:30</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '13:00' %} selected {% endif %} value="13:00">13:00</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '13:30' %} selected {% endif %} value="13:30">13:30</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '14:00' %} selected {% endif %} value="14:00">14:00</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '14:30' %} selected {% endif %} value="14:30">14:30</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '15:00' %} selected {% endif %} value="15:00">15:00</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '15:30' %} selected {% endif %} value="15:30">15:30</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '16:00' %} selected {% endif %} value="16:00">16:00</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '16:30' %} selected {% endif %} value="16:30">16:30</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '17:00' %} selected {% endif %} value="17:00">17:00</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '17:30' %} selected {% endif %} value="17:30">17:30</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '18:00' %} selected {% endif %} value="18:00">18:00</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '18:30' %} selected {% endif %} value="18:30">18:30</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '19:00' %} selected {% endif %} value="19:00">19:00</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '19:30' %} selected {% endif %} value="19:30">19:30</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '20:00' %} selected {% endif %} value="20:00">20:00</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '20:30' %} selected {% endif %} value="20:30">20:30</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '21:00' %} selected {% endif %} value="21:00">21:00</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '21:30' %} selected {% endif %} value="21:30">21:30</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '22:00' %} selected {% endif %} value="22:00">22:00</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '22:30' %} selected {% endif %} value="22:30">22:30</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '23:00' %} selected {% endif %} value="23:00">23:00</option>
                                                                                                            <option {% if order_item.ordered_technician.installation_time|time:"h:i" == '23:30' %} selected {% endif %} value="23:30">23:30</option>
                                                                                                         </select>
                                                                                                    </div>
                                                                                                </td>
                                                                                               <td class="text-end" >
                                                                                                   <button type="submit" class="btn tech-btn">Update</button>
                                                                                                </td>
                                                                                                </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                </div>
                                                                                <div class="row">
                                                                                    <div
                                                                                        class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start">
                                                                                    </div>
                                                                                    <div
                                                                                        class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end">
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            </form>
                                                                        </div>
                                                                    </div>
                                                                    {% endif %}
                                                                </div>
                                                                <!--end::Order Deatil Tab panel-->
                
                                                                <!--begin::Account Tab panel-->
                                                                <div id="kt_activity_week_serial{{order_item.id}}" class="card-body p-0 tab-pane fade show pt-10" role="tabpanel"  aria-labelledby="kt_activity_week_tab">
                                                                    <div class="d-flex flex-column gap-7 gap-lg-10"> 
                                                                        <div class="d-flex flex-column flex-xl-row gap-7 gap-lg-10"> 
                                                                            <div class="card card-flush py-4  flex-row-fluid"> 
                                                                                <div class="card-header">
                                                                                    <div class="card-title">
                                                                                        <h2>Supplier Details</h2>
                                                                                    </div>
                                                                                </div> 
                                                                                <div class="card-body pt-0">
                                                                                    <div class="table-responsive"> 
                                                                                        <table  class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                                                            <tbody   class="fw-semibold text-gray-600">
                                                                                                <tr>
                                                                                                    <td class="text-muted">
                                                                                                        <div class="d-flex align-items-center">
                                                                                                            <i  class="ki-outline ki-profile-circle fs-2 me-2"></i>
                                                                                                            Supplier
                                                                                                        </div>
                                                                                                    </td> 
                                                                                                    <td class="fw-bold text-end">
                                                                                                        <div class="d-flex align-items-center justify-content-end"> 
                                                                                                            <a href="/metronic8/demo42/../demo42/apps/ecommerce/customers/details.html"  class="text-gray-600 text-hover-primary">
                                                                                                                {% if order_item.bill.supplier.company_name %}
                                                                                                                    {{ order_item.bill.supplier.company_name }}
                                                                                                                {% else %}
                                                                                                                    {{ order_item.bill.supplier.first_name}}   {{ order_item.bill.supplier.last_name}}
                                                                                                                {% endif %}
                                                                                                                </a> 
                                                                                                        </div>
                                                                                                    </td>
                                                                                                </tr>
                                                                                                <tr>
                                                                                                    <td class="text-muted">
                                                                                                        <div class="d-flex align-items-center">
                                                                                                            <i class="ki-outline ki-sms fs-2 me-2"></i>
                                                                                                            Email
                                                                                                        </div>
                                                                                                    </td>
                                                                                                    <td class="fw-bold text-end">
                                                                                                        <a href="/metronic8/demo42/../demo42/apps/user-management/users/view.html" class="text-gray-600 text-hover-primary"> {{ order_item.bill.supplier.email}} </a>
                                                                                                    </td>
                                                                                                </tr>
                                                                                                <tr>
                                                                                                    <td class="text-muted">
                                                                                                        <div class="d-flex align-items-center">
                                                                                                            <i  class="ki-outline ki-phone fs-2 me-2"></i>
                                                                                                            Phone
                                                                                                        </div>
                                                                                                    </td>
                                                                                                    <td class="fw-bold text-end">
                                                                                                        {{ order_item.bill.supplier.phone1}}</td>
                                                                                                </tr> 
                                                                                            </tbody>
                                                                                        </table> 
                                                                                    </div>
                                                                                </div> 
                                                                            </div> 
                                                                            <div class="card card-flush py-4 flex-row-fluid"> 
                                                                                <div class="card-header">
                                                                                    <div class="card-title">
                                                                                        <h2>Bill History</h2>
                                                                                    </div>
                                                                                </div> 
                                                                                <div class="card-body pt-0">
                                                                                    <div class="table-responsive order-his"> 
                                                                                        <table class="table align-middle table-row-dashed fs-6 gy-5 mb-0 history-table">
                                                                                            <thead>
                                                                                                <tr  class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                                                                                    <th class="min-w-100px">Date Added</th>
                                                                                                    <th class="min-w-70px">SERIAL NUMBER STATUS</th>
                                                                                                </tr>
                                                                                            </thead>
                                                                                              <tbody
                                                                                                class="fw-semibold text-gray-600">
                                                                                                {% if order_item.get_serial_history %}
                                                                                                {% for o_history in order_item.get_serial_history%}
                                                                                                <tr>
                                                                                                    <td>{{o_history.timestamp|date:"M. d, Y, g:i A" }}</td> 
                                                                                                    <td> 
                                                                                                        <div class="badge badge-light-success"> {{o_history.action}}</div> 
                                                                                                    </td> 
                                                                                                </tr>
                                                                                                {% endfor %}
                                                                                                {% endif %}
                                                                                                
                                                                                            </tbody>
                                                                                        </table> 
                                                                                    </div>
                                                                                </div> 
                                                                            </div> 
                                                                        </div> 
                                                                        <div class="tab-content"> 
                                                                            <div class="tab-pane fade active show"  id="kt_ecommerce_sales_order_summary" role="tab-panel"> 
                                                                                <div class="d-flex flex-column gap-7 gap-lg-10">
                                                                                    <div  class="d-flex flex-column flex-xl-row gap-7 gap-lg-10"> 
                                                                                        <div class="card card-flush py-4 flex-row-fluid position-relative"> 
                                                                                            <div  class="position-absolute top-0 end-0 bottom-0 opacity-10 d-flex align-items-center me-5">
                                                                                                <i class="ki-solid ki-two-credit-cart"  style="font-size: 14em">   </i>
                                                                                            </div>
                                                                                            <div class="card-header">
                                                                                                <div class="card-title">
                                                                                                    <h2>Billing Address</h2>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="card-body pt-0">
                                                                                                {% if order_item.bill.supplier.street %}{{ order_item.bill.supplier.street}} ,<br> {% endif %}
                                                                                                {% if order_item.bill.supplier.city %} {{ order_item.bill.supplier.city}} ,<br>  {% endif %}
                                                                                                {% if order_item.bill.supplier.state %} {{ order_item.bill.supplier.state}} ,<br>  {% endif %}
                                                                                                {% if order_item.bill.supplier.country %}{{ order_item.bill.supplier.country}}  {% endif %}  {% if order_item.bill.supplier.post_code %}{{ order_item.bill.supplier.post_code}}  {% endif %}.
                                                                                            </div> 
                                                                                        </div> 
                                                                                        <div class="card card-flush py-4 flex-row-fluid position-relative"> 
                                                                                            <div  class="position-absolute top-0 end-0 bottom-0 opacity-10 d-flex align-items-center me-5">
                                                                                                <i class="ki-solid ki-delivery"  style="font-size: 13em"></i>
                                                                                            </div>
                                                                                            <div class="card-header">
                                                                                                <div class="card-title">
                                                                                                    <h2>Shipping Address</h2>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="card-body pt-0">
                                                                                                {% if order_item.bill.supplier.street %}{{ order_item.bill.supplier.street}} ,<br> {% endif %}
                                                                                                {% if order_item.bill.supplier.city %} {{ order_item.bill.supplier.city}} ,<br>  {% endif %}
                                                                                                {% if order_item.bill.supplier.state %} {{ order_item.bill.supplier.state}} ,<br>  {% endif %}
                                                                                                {% if order_item.bill.supplier.country %}{{ order_item.bill.supplier.country}}  {% endif %}  {% if order_item.bill.supplier.post_code %}{{ order_item.bill.supplier.post_code}}  {% endif %}.
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <!--end::Account Detail Tab panel-->
                
                                                                <!--begin::Payment Detail Tab panel-->
                                                                <div id="kt_activity_month_serial{{order_item.id}}" class="card-body p-0 tab-pane fade show"
                                                                    role="tabpanel" aria-labelledby="kt_activity_month_tab">
                                                                    <div class="cards mt-9">
                                                                        <!--begin::Body-->
                                                                        <div class="card-body">
                                                                            <!--begin::Layout-->
                                                                            <div class="d-flex flex-column flex-xl-row">
                                                                                <!--begin::Content-->
                                                                                <div class="flex-lg-row-fluid me-xl-10 mb-10 mb-xl-0">
                                                                                    <!--begin::Invoice 2 content-->
                                                                                    <div class="mt-n1">
                                                                                        <!--begin::Wrapper-->
                                                                                        <div class="m-0">
                                                                                            <div class="fw-bold fs-3 text-gray-800 mb-8">Bill ID: {{ order_item.order.invoice.id}}</div>
                                                                                            <div class="row g-5 mb-11">
                                                                                                <div class="col-sm-6">
                                                                                                    <div class="fw-semibold fs-7 text-gray-600 mb-1"> Issue Date:</div>
                                                                                                    <div class="fw-bold fs-6 text-gray-800">{{ order_item.bill.created_at|date:"M. d, Y, g:i A"}}</div>
                                                                                                </div>
                                                                                                <div class="col-sm-6">
                                                                                                    <div class="fw-semibold fs-7 text-gray-600 mb-1"> Due Date:</div>
                                                                                                    <div class="fw-bold fs-6 text-gray-800 d-flex align-items-center flex-wrap">
                                                                                                        <span class="pe-2">{{ order_item.bill.due_date}}</span>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="row g-5 mb-12">
                                                                                                <div class="col-sm-6">
                                                                                                    <div class="fw-semibold fs-7 text-gray-600 mb-1"> Issue By:</div>
                                                                                                    <div class="fw-bold fs-6 text-gray-800">
                                                                                                        {% if order_item.bill.supplier.company_name %}
                                                                                                            {{ order_item.bill.supplier.company_name }}
                                                                                                        {% else %}
                                                                                                            {{ order_item.bill.supplier.first_name}}   {{ order_item.bill.supplier.last_name}}
                                                                                                        {% endif %} 
                                                                                                    </div>
                                                                                                    <div class="fw-semibold fs-7 text-gray-600">
                                                                                                        {% if order_item.bill.supplier.street %}{{ order_item.bill.supplier.street}} ,<br> {% endif %}
                                                                                                        {% if order_item.bill.supplier.city %} {{ order_item.bill.supplier.city}} ,<br>  {% endif %}
                                                                                                        {% if order_item.bill.supplier.state %} {{ order_item.bill.supplier.state}} ,<br>  {% endif %}
                                                                                                        {% if order_item.bill.supplier.country %}{{ order_item.bill.supplier.country}}  {% endif %}  {% if  order_item.bill.supplier.post_code %}{{  order_item.bill.supplier.post_code}}  {% endif %}.
                                                                                                 </div>
                                                                                                </div>
                                                                                                <div class="col-sm-6">
                                                                                                    <div class="fw-semibold fs-7 text-gray-600 mb-1">Issued For:</div>
                                                                                                    <div class="fw-bold fs-6 text-gray-800">
                                                                                                      Excitech Team.
                                                                                                     </div>
                                                                                                    <div class="fw-semibold fs-7 text-gray-600">
                                                                                                        {% if order_item.bill.created_by.street %}{{ order_item.bill.created_by.street}} ,<br> {% endif %}
                                                                                                        {% if order_item.bill.created_by.city %} {{ order_item.bill.created_by.city}} ,<br>  {% endif %}
                                                                                                        {% if order_item.bill.created_by.state %} {{ order_item.bill.created_by.state}} ,<br>  {% endif %}
                                                                                                        {% if order_item.bill.created_by.country %}{{ order_item.bill.created_by.country}}  {% endif %}  {% if order_item.bill.created_by.post_code %}{{ order_item.bill.created_by.post_code}}  {% endif %}.
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="flex-grow-1">
                                                                                                <div class="table-responsive border-bottom mb-9">
                                                                                                    <table class="table mb-3">
                                                                                                        <thead>
                                                                                                            <tr class="border-bottom fs-6 fw-bold text-muted">
                                                                                                                <th class="min-w-175px pb-2"> Order ID</th>
                                                                                                                <th class="min-w-150px pb-2"> Total Amount</th>
                                                                                                                <th class="min-w-120px pb-2"> Paid</th>
                                                                                                                <th class="min-w-120px pb-2"> Balance</th>
                                                                                                            </tr>
                                                                                                        </thead>
                                                                                                        <tbody>
                                                                                                            <tr class="fw-bold text-gray-700 fs-5">
                                                                                                                <td class="d-flex align-items-center pt-6"> <i class="fa fa-genderless text-danger fs-2 me-2"></i>{{ order_item.order.id }} </td>
                                                                                                               
                                                                                                                    <td class="pt-6 text-gray-900 fw-bolder">
                                                                                                                    ${{ order_item.bill.total }}</td>
                                                                                                                    <td class="pt-6 text-gray-900 fw-bolder">  ${{ order_item.bill.total_paid_amount }}</td>
                                                                                                                    <td class="pt-6 text-gray-900 fw-bolder">  ${{ order_item.bill.total | subtract:order_item.bill.total_paid_amount }}</td>
                                                                                                                
                                                                                                            </tr>
                                                                                                        </tbody>
                                                                                                    </table>
                                                                                                </div>
                                                                                                <div class="d-flex justify-content-end">
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="m-0">
                                                                                    <div class="d-print-none border border-dashed border-gray-300 card-rounded h-lg-100 min-w-md-350px p-9 bg-lighten"> 
                                                                                        <div class="mb-8">
                                                                                            <span class="badge badge-light-warning">Partial Paid  </span>
                                                                                        </div> 
                                                                                        <h6 class="mb-8 fw-bolder text-gray-600 text-hover-primary"> LAST PAYMENT DETAILS</h6> 
                                                                                        {% if order_item.order.invoice.get_invoice_payment_records %}
                                                                                        {% for i_pay in order_item.order.invoice.get_invoice_payment_records %}
                                                                                        {% if forloop.counter == 1 %} 
                                                                                        <div class="mb-6">
                                                                                            <div class="fw-semibold text-gray-600 fs-7">  Payment Type</div> 
                                                                                            <div class="fw-bold text-gray-800 fs-6">  Paypal </div>
                                                                                        </div> 
                                                                                        <div class="mb-6">
                                                                                            <div class="fw-semibold text-gray-600 fs-7">  Payment Date</div> 
                                                                                            <div class="fw-bold text-gray-800 fs-6"> {{i_pay.paydate}}  </div>
                                                                                        </div> 
                                                                                        <div class="mb-6">
                                                                                            <div class="fw-semibold text-gray-600 fs-7">  Amount</div> 
                                                                                            <div class="fw-bold text-gray-800 fs-6">    ${{i_pay.paid_amount}} </div>
                                                                                        </div> 
                                                                                        <div class="mb-13">
                                                                                            <div class="fw-semibold text-gray-600 fs-7"> Payment Term:</div>
                                                                                            <div class="fw-bold fs-6 text-gray-800 d-flex align-items-center">
                                                                                                14 days
                                                                                                <span class="fs-7 text-danger d-flex align-items-center">
                                                                                                    <span class="bullet bullet-dot bg-danger mx-2"></span>
                                                                                                    Due in 7 days
                                                                                                </span>
                                                                                            </div>
                                                                                        </div>
                                                                                        {% endif %}
                                                                                        {% endfor %}
                                                                                        {% endif %} 
                                                                                        <h6 class="mb-4 fw-bolder text-gray-600 text-hover-primary">  PAYMENT HISTORY</h6>
                                                                                        <!--end::Title-->
                                                                                        <div class="flex-grow-1"> 
                                                                                            <div class="table-responsive border-bottom mb-4">
                                                                                                <table class="table mb-3">
                                                                                                    <thead>
                                                                                                        <tr class="border-bottom fs-6 fw-bold text-muted">
                                                                                                            <th class="min-w-120px pb-2">Date</th>
                                                                                                            <th class="min-w-120px pb-2">Amount</th>
                                                                                                        </tr>
                                                                                                    </thead>
                                                                                                    <tbody>
                                                                                                      
                                                                                                        {% if order_item.bill.get_bill_payment_records %}
                                                                                                        {% for i_pay in order_item.bill.get_bill_payment_records %}
                                                                                                        <tr class="fw-bold text-gray-700 fs-5">
                                                                                                            <td class="pt-6 text-gray-900 fw-bolder">{{i_pay.pay_date}}</td>
                                                                                                            <td class="pt-6 text-gray-900 fw-bolder">${{i_pay.paid_amount}}</td>
                                                                                                        </tr>
                                                                                                        {% endfor %}
                                                                                                        {% endif %}
                                                                                                        
                                                                                                    </tbody>
                                                                                                </table>
                                                                                            </div> 
                                                                                            <div class="d-flex justify-content-end"> 
                                                                                            </div> 
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <!--end:: Payment Detail Tab panel-->
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer"></div>
                                </div>
                            </div>
  {% endfor %}
  
			</div>
			<script>
				const holidaystest =
				{% if request.GET.product_id or request.GET.billno or request.GET.customer_id or request.GET.supplier_id or request.GET.orderno %}
				$.parseJSON($.ajax({
				       url:  '/get-events/?product_id={{request.GET.product_id}}&billno={{request.GET.billno}}&customer_id={{request.GET.customer_id}}&supplier_id={{request.GET.supplier_id}}&orderno={{request.GET.orderno}}',
				       dataType: "json", 
				       async: false
				   }).responseText);
				   
				   	const serialtest =
				$.parseJSON($.ajax({
				       url:  '/get-serial-numbers/?product_id={{request.GET.product_id}}&billno={{request.GET.billno}}&customer_id={{request.GET.customer_id}}&supplier_id={{request.GET.supplier_id}}&orderno={{request.GET.orderno}}',
				       dataType: "json", 
				       async: false
				   }).responseText);
				{% else %}
					$.parseJSON($.ajax({
				       url:  '/get-events/',
				       dataType: "json", 
				       async: false
				   }).responseText);
				   
				   	const serialtest =
				$.parseJSON($.ajax({
				       url:  '/get-serial-numbers/',
				       dataType: "json", 
				       async: false
				   }).responseText);
				{% endif %}
				
			
				
				const holidays =holidaystest.test;
			    const serialNmubers =serialtest.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);
    				    //  });
				         }
				         
				         
				       
				       
				     }
				   
				     if (holidayOfTheDay) {
				         for(j=0;j<holidayOfTheDay.length;j++){
				        //   console.log('holidayOfTheDay',holidayOfTheDay);
				           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 %}