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

{% load i18n %}

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

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

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

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

{% block content %}
<style>
  #board {
      display: flex;
      /*padding: 20px;*/
      gap: 20px;
    }

    .list {
    /* background-color: #e2e4e6;*/
    /*border-radius: 8px;*/
    /*padding: 15px 12px;*/
    min-width: 24%;
    padding-bottom:8px;
    }
#list1 {
    background: #f5c71a36;
    border-radius:8px;
}
#list2  {
    background: #3e97ff26;
    border-radius:8px;
}
div.watered {
    background: #ffa5002e;
}
#list4 {
    background: #00800014;
    border-radius:8px;
}
#list5 {
    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;
}
#list1 .list-title{
    background: #ffe586;
}
#list2 .list-title{
    background: #3e97ff26;
}
#list4 .list-title{
    background: #77ad7729;
}
#list5 .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;
}
#board thead tr{
     border-top: 1px dashed #2221213d !important;
}

#closeModalBtn{
    background: transparent;
    border: 0px solid #cccc;
    font-size: 16px;
    color: #4c4949;
}
.timeline .timeline-line{
    left:12px;
    border-left-color: #0000007d;
}
.cards .card-body{
    padding:0px;
}
.timeline-icon i{
color:#000000ab !important;
}
.orders-details .order-card{
    background: #ff88001c;
}
.orders-details .card .text-muted, .orders-details .card .text-muted i {
    color: #4c4949 !important;
}
.cards{
    padding:10px;
}
.orders-details .card{
    padding:15px;
}
.orders-details .card-header, .orders-details .card-body {
    padding:0px;
}
.orders-details .card-title h2{
    color: #4c4949 !important;
}
section {
      max-width: 800px;
      margin: 20px auto;
      background-color: #fff;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

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

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

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

    .product-details {
      background-color: #e8f5e9;
      padding: 10px;
      border-radius: 5px;
    }
.status-ordered {
    background: #f5c71a36;
    color: #c59b00 !important;
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: 0.2px;
}
#list2 .bg-warning {
    
    background-color: #007bff8f !important;
}
#list1 .bg-warning {
    background-color: #ffc700 !important;
}
#list4 .bg-warning {
background-color: #9ec89e !important;
}
#list5 .bg-warning {
background-color: #b898d7 !important;
}
.cal2 .list-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.cal2 .list-title-text {
    font-size: 15px;
    color: #4c4949;
    margin-bottom:0px;
}
.cal2 .list-title i{
  color: #4c4949;
    font-size: 30px;
}

    h2 {
      color: #333;
    }
.card.ind-card table td{
    border-bottom:0px;
}
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
    }

    th, td {
      padding: 10px;
      border-bottom: 1px solid #ddd;
    }
.orders-details .table.table-borderless tr.sub-t{
    border-bottom:0px !important;
}
    th {
      background-color: #f2f2f2;
    }
    
    .heading1{font-size:16px;color: #1A237E}
    .days{font-size:15px;color:#9FA8DA}
    th{font-size:14px;color:#D50000}
    tr{font-size: 13px}
    .solditems{font-size:13px;color:#9FA8DA}
    .balance{font-size: 45px;color: green}
    .account{margin-bottom: 36px !important;font-size:16px;color: #1A237E}
    .transaction{font-size: 13px}.progress{height: 3px !important}
    .money{color:#9FA8DA}.goal{font-size:17px;color:#D50000;font-weight:400}
    .revenue{font-size:14px;color:#311B92;font-weight:500}
    .orders{font-size:14px;color:#311B92;font-weight:500}
    .customer{font-size:14px;color:#311B92;font-weight:500}
    
.comment-area {
    max-height: 200px;
    overflow-y: auto;
}

.comment {
    margin-bottom: 10px;
}
.symbol.symbol-50px > img {
    width: 70px;
  
    height: max-content;
}
.comment small {
    color: #888;
}

</style>
<div class="custom mt-3 create-cust cal2">

<div class="d-flex flex-column flex-lg-row-fluid gap-7 gap-lg-10" data-select2-id="select2-data-129-yayj">
        
<!--begin::Order details-->
<div class="card card-flush py-4">
    <!--begin::Card header-->
   <div class="card-header">
        <!--begin::Heading-->
        <div class="card-title">
            <h3></h3>
        </div>
        <!--end::Heading-->

        <!--begin::Toolbar-->
        <div class="card-toolbar">
            <div class="my-1 me-4" data-select2-id="select2-data-137-jnyq">
                <!--begin::Select-->
                <select class="form-select form-select-sm form-select-solid w-125px select2-hidden-accessible" data-control="select2" data-placeholder="Select Hours" data-hide-search="true" data-select2-id="select2-data-10-zgsa" tabindex="-1" aria-hidden="true" data-kt-initialized="1">                    
                    <option value="1" data-select2-id="select2-data-139-tfjz">Today</option>
                    <option value="2" data-select2-id="select2-data-140-04xl">Last 7 Days</option>
                    <option value="3" selected="" data-select2-id="select2-data-12-hsda">Last 2 weeks</option>
                    <option value="4" data-select2-id="select2-data-141-zh54">This month</option>
                </select><span class="select2 select2-container select2-container--bootstrap5 select2-container--open select2-container--focus select2-container--above" dir="ltr" data-select2-id="select2-data-11-4r0v" style="width: 100%;"><span class="selection"><span class="select2-selection select2-selection--single form-select form-select-sm form-select-solid w-125px" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-disabled="false" aria-labelledby="select2-55w7-container" aria-controls="select2-55w7-container" aria-owns="select2-55w7-results" aria-activedescendant="select2-55w7-result-e2zl-2"><span class="select2-selection__rendered" id="select2-55w7-container" role="textbox" aria-readonly="true" title="Filter by">Filter By</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>      
                <!--end::Select-->
            </div> 

            <a href="#" class="btn btn-sm btn-primary my-1">
                Notifications
            </a>
        </div>
        <!--end::Toolbar-->
    </div>
        <div class="card-body">
     
  <div id="board">
  <div class="list ordered" id="list1" ondrop="handleDrop(event)" ondragover="allowDrop(event)">
    
   
        <div class="list-title">
        <h2 class="list-title-text">Ordered</h2>
        <i class="ki-duotone ki-parcel">
 <span class="path1"></span>
 <span class="path2"></span>
 <span class="path3"></span>
 <span class="path4"></span>
 <span class="path5"></span>
</i>
   </div>
    <div class="card ind-card" draggable="true" ondragstart="handleDragStart(event)">
      <div class="card-title modal-trigger">
      <table>
      <tr class="even">
                        <td class="min-w-175px">
                            <div class="position-relative ps-6 pe-3 py-2">
                                <div class="position-absolute start-0 top-0 w-4px h-100 rounded-2 bg-warning"></div>
                                <a href="#" class="mb-1 text-gray-900 text-hover-primary fw-bold">Order #: 3893</a>
                                <div class="fs-7 text-muted fw-bold">12 Apr 2021</div>
                            </div>
                        </td>
                        
                        
                        <td class="min-w-125px">
                                                        <!--begin::Team members-->
                           <div class="symbol symbol-circle symbol-25px mb-1">
                                            <div class="symbol-label bg-danger">
                                                <span class="fs-8 text-inverse-danger">M</span>
                                            </div>
                                        </div>

                            <div class="fs-8 fw-bold text-muted">Maddy</div>
                        </td>
                        
                        
                        
                    </tr>
      </table>
      </div>
    </div>
    <div class="card ind-card" draggable="true" ondragstart="handleDragStart(event)">
      <div class="card-title modal-trigger">
      <table>
      <tr class="even">
                        <td class="min-w-175px">
                            <div class="position-relative ps-6 pe-3 py-2">
                                <div class="position-absolute start-0 top-0 w-4px h-100 rounded-2 bg-warning"></div>
                                <a href="#" class="mb-1 text-gray-900 text-hover-primary fw-bold">Order #: 3893</a>
                                <div class="fs-7 text-muted fw-bold">12 Apr 2021</div>
                            </div>
                        </td>
                        
                        
                        <td class="min-w-125px">
                                                        <!--begin::Team members-->
                           <div class="symbol symbol-circle symbol-25px mb-1">
                                            <div class="symbol-label bg-danger">
                                                <span class="fs-8 text-inverse-danger">M</span>
                                            </div>
                                        </div>

                            <div class="fs-8 fw-bold text-muted">Maddy</div>
                        </td>
                        
                        
                        
                    </tr>
      </table>
      </div>
    </div>
    <div class="card ind-card" draggable="true" ondragstart="handleDragStart(event)">
      <div class="card-title modal-trigger">
      <table>
      <tr class="even">
                        <td class="min-w-175px">
                            <div class="position-relative ps-6 pe-3 py-2">
                                <div class="position-absolute start-0 top-0 w-4px h-100 rounded-2 bg-warning"></div>
                                <a href="#" class="mb-1 text-gray-900 text-hover-primary fw-bold">Order #: 3899</a>
                                <div class="fs-7 text-muted fw-bold">12 Apr 2021</div>
                            </div>
                        </td>
                        
                        
                        <td class="min-w-125px">
                                                        <!--begin::Team members-->
                           <div class="symbol symbol-circle symbol-25px  mb-1">
                                            <div class="symbol-label bg-danger">
                                                <span class="fs-8 text-inverse-danger">M</span>
                                            </div>
                                        </div>

                            <div class="fs-8 fw-bold text-muted">Mac</div>
                        </td>
                        
                        
                        
                    </tr>
      </table>
      </div>
    </div>
    
  
  </div>

  <div class="list shipped " id="list2" ondrop="handleDrop(event)" ondragover="allowDrop(event)">
    
        <div class="list-title">
        <h2 class="list-title-text">Shipped</h2>
       <i class="ki-duotone ki-delivery">
 <span class="path1"></span>
 <span class="path2"></span>
 <span class="path3"></span>
 <span class="path4"></span>
 <span class="path5"></span>
</i>
   </div>
   <div class="card ind-card" draggable="true" ondragstart="handleDragStart(event)">
      <div class="card-title modal-trigger">
      <table>
      <tr class="even">
                        <td class="min-w-175px">
                            <div class="position-relative ps-6 pe-3 py-2">
                                <div class="position-absolute start-0 top-0 w-4px h-100 rounded-2 bg-warning"></div>
                                <a href="#" class="mb-1 text-gray-900 fw-bold">Order #: 3893</a>
                                <div class="fs-7 text-muted fw-bold">12 Apr 2021</div>
                            </div>
                        </td>
                        
                        
                        <td class="min-w-125px">
                                                        <!--begin::Team members-->
                           <div class="symbol symbol-circle symbol-25px  mb-1">
                                            <div class="symbol-label bg-danger">
                                                <span class="fs-8 text-inverse-danger">M</span>
                                            </div>
                                        </div>

                            <div class="fs-8 fw-bold text-muted">Maddy</div>
                        </td>
                        
                        
                        
                    </tr>
      </table>
      </div>
    </div>
    <div class="card ind-card" draggable="true" ondragstart="handleDragStart(event)">
      <div class="card-title modal-trigger">
      <table>
      <tr class="even">
                        <td class="min-w-175px">
                            <div class="position-relative ps-6 pe-3 py-2">
                                <div class="position-absolute start-0 top-0 w-4px h-100 rounded-2 bg-warning"></div>
                                <a href="#" class="mb-1 text-gray-900 text-hover-primary fw-bold">Order #: 3897</a>
                                <div class="fs-7 text-muted fw-bold">12 Apr 2021</div>
                            </div>
                        </td>
                        
                        
                        <td class="min-w-125px">
                                                        <!--begin::Team members-->
                           <div class="symbol symbol-circle symbol-25px  mb-1">
                                            <div class="symbol-label bg-danger">
                                                <span class="fs-8 text-inverse-danger">E</span>
                                            </div>
                                        </div>

                            <div class="fs-8 fw-bold text-muted">Esther</div>
                        </td>
                        
                        
                        
                    </tr>
      </table>
      </div>
    </div>
    
 
  </div>
  <div class="list arrived" id="list4" ondrop="handleDrop(event)" ondragover="allowDrop(event)">
    
   
        <div class="list-title">
        <h2 class="list-title-text">Arrived</h2>
       <i class="ki-duotone ki-delivery-door">
 <span class="path1"></span>
 <span class="path2"></span>
 <span class="path3"></span>
 <span class="path4"></span>
</i>
   </div>
    <div class="card ind-card" draggable="true" ondragstart="handleDragStart(event)">
      <div class="card-title modal-trigger">
      <table>
      <tr class="even">
                        <td class="min-w-175px">
                            <div class="position-relative ps-6 pe-3 py-2">
                                <div class="position-absolute start-0 top-0 w-4px h-100 rounded-2 bg-warning"></div>
                                <a href="#" class="mb-1 text-gray-900 text-hover-primary fw-bold">Order #: 3892</a>
                                <div class="fs-7 text-muted fw-bold">12 Apr 2021</div>
                            </div>
                        </td>
                        
                        
                        <td class="min-w-125px">
                                                        <!--begin::Team members-->
                           <div class="symbol symbol-circle symbol-25px  mb-1">
                                            <div class="symbol-label bg-danger">
                                                <span class="fs-8 text-inverse-danger">D</span>
                                            </div>
                                        </div>

                            <div class="fs-8 fw-bold text-muted">Danny</div>
                        </td>
                        
                        
                        
                    </tr>
      </table>
      </div>
    </div>
  
  </div>
  
  <div class="list booked-install " id="list5" ondrop="handleDrop(event)" ondragover="allowDrop(event)">
       <div class="list-title">
        <h2 class="list-title-text">Book for Install</h2>
        <i class="ki-duotone ki-setting-2">
 <span class="path1"></span>
 <span class="path2"></span>
</i>
   </div>
   <div class="card ind-card" draggable="true" ondragstart="handleDragStart(event)">
      <div class="card-title modal-trigger">
      <table>
      <tr class="even">
                        <td class="min-w-175px">
                            <div class="position-relative ps-6 pe-3 py-2">
                                <div class="position-absolute start-0 top-0 w-4px h-100 rounded-2 bg-warning"></div>
                                <a href="#" class="mb-1 text-gray-900 text-hover-primary fw-bold">Order #: 3891</a>
                                <div class="fs-7 text-muted fw-bold">12 Apr 2021</div>
                            </div>
                        </td>
                        
                        
                        <td class="min-w-125px">
                                                        <!--begin::Team members-->
                           <div class="symbol symbol-circle symbol-25px  mb-1">
                                            <div class="symbol-label bg-danger">
                                                <span class="fs-8 text-inverse-danger">S</span>
                                            </div>
                                        </div>

                            <div class="fs-8 fw-bold text-muted">Suzana</div>
                        </td>
                        
                        
                        
                    </tr>
      </table>
      </div>
    </div>
   
  </div>
</div>

<div id="myModal" class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <h2> &nbsp;<span class=" fw-bold badge py-3 px-4 fs-7 status-ordered"> Ordered </span>
        </h2>

        <button id="closeModalBtn">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">
    <!--begin::Card header-->
    <div class="card-header">
        <div class="card-title">
            <h2>Order Details (#14534)</h2>
        </div>
    </div>
    <!--end::Card header-->

    <!--begin::Card body-->
    <div class="card-body pt-0">
        <div class="table-responsive">
            <!--begin::Table-->
            <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">16/11/2023</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>
            <!--end::Table-->
        </div>
    </div>
    <!--end::Card body-->
</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">
                <!--begin::Timeline-->
                 <h3 class="card-label fw-bold text-gray-800 mb-7">Activity</h3>
<div class="timeline timeline-border-dashed mt-5">
    
 
    <!--begin::Timeline item-->
<div class="timeline-item">
    <!--begin::Timeline line-->
    <div class="timeline-line"></div>
    <!--end::Timeline line-->

    <!--begin::Timeline icon-->
    <div class="timeline-icon">
        <i class="ki-outline ki-pencil fs-2 text-gray-500"></i>    </div>
    <!--end::Timeline icon-->

    <!--begin::Timeline content-->
    <div class="timeline-content mb-6 mt-n1">
        <!--begin::Timeline heading-->
        <div class="pe-3 mb-5">
            <!--begin::Title-->
            <div class="fs-6 fw-semibold mb-2">3 new application design concepts added:</div>
            <!--end::Title-->

            <!--begin::Description-->
            <div class="d-flex align-items-center mt-1 fs-6">
                <!--begin::Info-->
                <div class="text-muted me-2 fs-7">Created at 4:23 PM by Abc</div>
                <!--end::Info-->

                <!--begin::User-->
                <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">
                    <!--<img src="/metronic8/demo42/assets/media/avatars/300-2.jpg" alt="img">-->
                </div>  
                <!--end::User--> 
            </div>
            <!--end::Description-->
        </div>
        <!--end::Timeline heading-->

        <!--begin::Timeline details-->
        <div class="overflow-auto pb-5">
           
        </div>
        <!--end::Timeline details-->
    </div>
    <!--end::Timeline content-->  
</div>
<!--end::Timeline item-->    
    <!--begin::Timeline item-->
<div class="timeline-item">
    <!--begin::Timeline line-->
    <div class="timeline-line"></div>
    <!--end::Timeline line-->

    <!--begin::Timeline icon-->
    <div class="timeline-icon">
        <i class="ki-outline ki-sms fs-2 text-gray-500"></i>    </div>
    <!--end::Timeline icon-->

    <!--begin::Timeline content-->
    <div class="timeline-content mb-6 mt-n1">
        <!--begin::Timeline heading-->
        <div class="pe-3 mb-5">
            <!--begin::Title-->
            <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>
            <!--end::Title-->

            <!--begin::Description-->
            <div class="overflow-auto pb-5">
                <!--begin::Wrapper-->
                <div class="d-flex align-items-center mt-1 fs-6">
                    <!--begin::Info-->
                    <div class="text-muted me-2 fs-7">Added at 4:23 PM by Abc</div>
                    <!--end::Info-->

                    <!--begin::User-->
                    <a href="#" class="text-primary fw-bold me-1">Alice Tan</a>
                    <!--end::User--> 
                </div>
                <!--end::Wrapper-->
            </div>
            <!--end::Description-->
        </div>
        <!--end::Timeline heading-->
    </div>
    <!--end::Timeline content-->           
</div>
<!--end::Timeline item-->
    <!--begin::Timeline item-->
<div class="timeline-item">
    <!--begin::Timeline line-->
    <div class="timeline-line"></div>
    <!--end::Timeline line-->

    <!--begin::Timeline icon-->
    <div class="timeline-icon">
        <i class="ki-outline ki-basket fs-2 text-gray-500"></i>    </div>
    <!--end::Timeline icon-->

    <!--begin::Timeline content-->
    <div class="timeline-content mt-n1">
        <!--begin::Timeline heading-->
        <div class="pe-3 mb-5">
            <!--begin::Title-->
            <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>
            <!--end::Title-->

            <!--begin::Description-->
            <div class="d-flex align-items-center mt-1 fs-6">
                <!--begin::Info-->
                <div class="text-muted me-2 fs-7">Placed at 4:23 PM by Abc</div>
                <!--end::Info-->

                <!--begin::User-->
                <a href="#" class="text-primary fw-bold me-1">Jimmy Bold</a>
                <!--end::User--> 
            </div>
            <!--end::Description-->
        </div>
        <!--end::Timeline heading-->
    </div>
    <!--end::Timeline content--> 
</div>
<!--end::Timeline item--> </div>
<!--end::Timeline-->            </div>
     
        </div>
            
           <div class="col-md-8" style=" border-left:1px dashed #b5b5c3;">

<!--New-->


<div class="cards">
    <!--begin::Card head-->
    <div class="card-header card-header-stretch">
        <!--begin::Title-->
        <div class="card-title d-flex align-items-center">            
            <!--<i class="ki-outline ki-calendar-8 fs-1 text-primary me-3 lh-0"></i> 	-->
<div class="my-1 me-4" data-select2-id="select2-data-137-jnyq">
                <!--begin::Select-->
                <select class="form-select form-select-sm form-select-solid w-125px select2-hidden-accessible" data-control="select2" data-placeholder="Select Hours" data-hide-search="true" data-select2-id="select2-data-10-zgsa" tabindex="-1" aria-hidden="true" data-kt-initialized="1">                    
                    <option value="1" data-select2-id="select2-data-139-tfjz">Shipping</option>
                    <option value="2" data-select2-id="select2-data-140-04xl">Arrived</option>
                    <option value="3" selected="" data-select2-id="select2-data-12-hsda">Book for Install</option>
                </select><span class="select2 select2-container select2-container--bootstrap5 select2-container--open select2-container--focus select2-container--above" dir="ltr" data-select2-id="select2-data-11-4r0v" style="width: 100%;"><span class="selection"><span class="select2-selection select2-selection--single form-select form-select-sm form-select-solid w-125px" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-disabled="false" aria-labelledby="select2-55w7-container" aria-controls="select2-55w7-container" aria-owns="select2-55w7-results" aria-activedescendant="select2-55w7-result-e2zl-2"><span class="select2-selection__rendered" id="select2-55w7-container" role="textbox" aria-readonly="true" title="Status">Status</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>      
                <!--end::Select-->
            </div>
            <!--<h3 class="fw-bold m-0 text-gray-800"> Order #279041 </h3>-->
        </div>
        <!--end::Title-->

        <!--begin::Toolbar-->
        <div class="card-toolbar m-0">
            <!--begin::Tab nav-->
            <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" 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" 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" aria-selected="false" tabindex="-1">
                        Payment Details
                    </a>
                </li>
                <!--<li class="nav-item" role="presentation">-->
                <!--    <a id="kt_activity_year_tab" class="nav-link justify-content-center text-active-gray-800 text-hover-gray-800" data-bs-toggle="tab" role="tab" href="#kt_activity_year" aria-selected="false" tabindex="-1">-->
                <!--        Other                   </a>-->
                <!--</li>-->
            </ul>
            <!--end::Tab nav-->
        </div>
        <!--end::Toolbar-->
    </div>
    <!--end::Card head-->

    <!--begin::Card body-->
    <div class="card-body">
        <!--begin::Tab Content-->
        <div class="tab-content">
            <!--begin::Tab panel-->
            <div id="kt_activity_today" 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">Subtitle</span>
        </h3>
        <!--end::Title-->

        <!--begin::Actions-->
        <div class="card-toolbar">
            <!--begin::Filters-->
            <div class="d-flex flex-stack flex-wrap gap-4">
               
                <!--begin::Status-->
               
                <!--end::Status-->

               
            </div>
            <!--begin::Filters-->
        </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" colspan="1" style="">Supplier</th>
                    <th class="text-end min-w-100px sorting_disabled" rowspan="1" colspan="1" style="">Quantity</th>
                    <th class="text-end min-w-100px sorting_disabled" rowspan="1" colspan="1" style="">Total</th>
                    <th class="text-end min-w-50px sorting_disabled" rowspan="1" colspan="1" style="">Status</th>
                    </tr>
                <!--end::Table row-->
            </thead>
            <!--end::Table head-->

            <!--begin::Table body-->
            <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">Edge Banders</a>
                                <!--<div class="fs-7" data-kt-table-widget-4="template_description">XYZ</div>-->
                            </div>
                        </div>
                    </td>
                    <td class="text-end">
                        <!--<div class="text-gray-800 fs-7">Cost</div>-->
                        <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_cost">Albert F</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">89.00</div>
                    </td>
                    <td class="text-end">
                        <!--<div class="text-gray-800 fs-7 me-3">On hand</div>-->
                        <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_stock"><div class="badge badge-light-success">Shipped</div></div>
                        
                    </td>
                   
                </tr>

 <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">Edge Banders</a>
                                <!--<div class="fs-7" data-kt-table-widget-4="template_description">XYZ</div>-->
                            </div>
                        </div>
                    </td>
                    <td class="text-end">
                        <!--<div class="text-gray-800 fs-7">Cost</div>-->
                        <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_cost">Albert F</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">89.00</div>
                    </td>
                    <td class="text-end">
                        <!--<div class="text-gray-800 fs-7 me-3">On hand</div>-->
                        
                        <div class="text-muted fs-7 fw-bold" data-kt-table-widget-4="template_stock"><div class="badge badge-light-warning">Processing</div></div>
                    </td>
                   
                </tr>

                <tr class="odd">
                       
                    </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>
            
            
</div>
            <!--end::Tab panel-->

            <!--begin::Tab panel-->
            <div id="kt_activity_week" 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">
   
    <!--begin::Order summary-->
    <div class="d-flex flex-column flex-xl-row gap-7 gap-lg-10">
        
<!--begin::Customer details-->
<div class="card card-flush py-4  flex-row-fluid">
    <!--begin::Card header-->
    <div class="card-header">
        <div class="card-title">
            <h2>Customer Details</h2>
        </div>
    </div>
    <!--end::Card header-->

    <!--begin::Card body-->
    <div class="card-body pt-0">
        <div class="table-responsive">
            <!--begin::Table-->
            <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">
                                <!--begin::Name-->
                                <a href="/metronic8/demo42/../demo42/apps/ecommerce/customers/details.html" class="text-gray-600 text-hover-primary">
                                    Dan Wilson                                </a>
                                <!--end::Name-->
                            </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">
                                dam@test.com                            </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">+6141 234 567</td>
                    </tr>
                     <tr>
                        <td class="text-muted">
                            <div class="d-flex align-items-center">
                                <i class="ki-outline ki-discount fs-2 me-2"></i>                                Reward Points

                                
<span class="ms-1" data-bs-toggle="tooltip" aria-label="Reward value earned by customer when purchasing this order" data-bs-original-title="Reward value earned by customer when purchasing this order" data-kt-initialized="1">
	<i class="ki-outline ki-information-5 text-gray-500 fs-6"></i></span>                            </div>
                        </td>
                        <td class="fw-bold text-end">600</td>
                    </tr>
                </tbody>
            </table>
            <!--end::Table-->
        </div>
    </div>
    <!--end::Card body-->
</div>
<!--end::Customer details-->
        <!--begin::Documents-->

<div class="card card-flush py-4 flex-row-fluid">
    <!--begin::Card header-->
    <div class="card-header">
        <div class="card-title">
            <h2>Order History</h2>
        </div>
    </div>
    <!--end::Card header-->

    <!--begin::Card body-->
    <div class="card-body pt-0">
        <div class="table-responsive">
            <!--begin::Table-->
            <table class="table align-middle table-row-dashed fs-6 gy-5 mb-0">
                <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">
                                            <tr>
                            <td>20/11/2023</td>
                            
                            <td>
                                <!--begin::Badges-->
                                <div class="badge badge-light-success">Completed</div>
                                <!--end::Badges-->
                            </td>
                           
                        </tr>
                        <tr>
                            <td>17/11/2023</td>
                            <td>
                                <!--begin::Badges-->
                                <div class="badge badge-light-primary">Processing</div>
                                <!--end::Badges-->
                            </td>
                           
                        </tr>
                                           
                                           
                                            <tr>
                            <td>13/11/2023</td>
                            <td>
                                <!--begin::Badges-->
                                <div class="badge badge-light-warning">Pending</div>
                                <!--end::Badges-->
                            </td>
                            
                        </tr>
                                       
                                    </tbody>
            </table>
            <!--end::Table-->
        </div>
    </div>
    <!--end::Card body-->
</div>
<!--end::Order history-->
                <!--begin::Order data-->

<!--end::Order data-->           
<!--end::Documents-->    </div>
    <!--end::Order summary-->

    <!--begin::Tab content-->
    <div class="tab-content">
        <!--begin::Tab pane-->
        <div class="tab-pane fade active show" id="kt_ecommerce_sales_order_summary" role="tab-panel">
            <!--begin::Orders-->
            <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">
                    <!--begin::Payment address-->
<div class="card card-flush py-4 flex-row-fluid position-relative">
    <!--begin::Background-->
    <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>
    <!--end::Background-->

    <!--begin::Card header-->
    <div class="card-header">
        <div class="card-title">
            <h2>Billing Address</h2>
        </div>
    </div>
    <!--end::Card header-->

    <!--begin::Card body-->
    <div class="card-body pt-0">
        Unit 1/23 Hastings Road,<br>
        Melbourne 3000,<br>
        Victoria,<br>
        Australia.
    </div>
    <!--end::Card body-->
</div>
<!--end::Payment address-->
                    <!--begin::Shipping address-->
<div class="card card-flush py-4 flex-row-fluid position-relative">
    <!--begin::Background-->
    <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>
    <!--end::Background-->

    <!--begin::Card header-->
    <div class="card-header">
        <div class="card-title">
            <h2>Shipping Address</h2>
        </div>
    </div>
    <!--end::Card header-->

    <!--begin::Card body-->
    <div class="card-body pt-0">
        Unit 1/23 Hastings Road,<br>
        Melbourne 3000,<br>
        Victoria,<br>
        Australia.
    </div>
    <!--end::Card body-->
</div>
<!--end::Shipping address-->                </div>
           </div>
            <!--end::Orders-->
        </div>
        <!--end::Tab pane-->

     
    </div>
    <!--end::Tab content-->
</div>
                   
                       
</div>
            <!--end::Tab panel-->

            <!--begin::Tab panel-->
            <div id="kt_activity_month" 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"> 
            <!--begin::Label-->
            <div class="fw-bold fs-3 text-gray-800 mb-8">Invoice #34782</div>                
            <!--end::Label-->  

            <!--begin::Row-->
            <div class="row g-5 mb-11">
                <!--end::Col-->
                <div class="col-sm-6">
                    <!--end::Label-->
                    <div class="fw-semibold fs-7 text-gray-600 mb-1">Issue Date:</div>                
                    <!--end::Label-->  

                    <!--end::Col-->
                    <div class="fw-bold fs-6 text-gray-800">12 Apr 2021</div>                
                    <!--end::Col-->  
                </div>                
                <!--end::Col-->  

                <!--end::Col-->
                <div class="col-sm-6">
                    <!--end::Label-->
                    <div class="fw-semibold fs-7 text-gray-600 mb-1">Due Date:</div>                
                    <!--end::Label-->  

                    <!--end::Info-->
                    <div class="fw-bold fs-6 text-gray-800 d-flex align-items-center flex-wrap">
                        <span class="pe-2">02 May 2021</span> 
                        
                        <span class="fs-7 text-danger d-flex align-items-center">
                            <span class="bullet bullet-dot bg-danger me-2"></span> 
                            
                            Due in 7 days
                        </span>
                    </div>                
                    <!--end::Info-->  
                </div>                
                <!--end::Col-->  
            </div>                
            <!--end::Row-->   

            <!--begin::Row-->
            <div class="row g-5 mb-12">
                <!--end::Col-->
                <div class="col-sm-6">
                    <!--end::Label-->
                    <div class="fw-semibold fs-7 text-gray-600 mb-1">Issue For:</div>                
                    <!--end::Label-->  

                    <!--end::Text-->
                    <div class="fw-bold fs-6 text-gray-800">KeenThemes Inc.</div>                
                    <!--end::Text-->  

                     <!--end::Description-->
                     <div class="fw-semibold fs-7 text-gray-600">
                        8692 Wild Rose Drive <br>
                        Livonia, MI 48150
                    </div>                
                    <!--end::Description-->  
                </div>                
                <!--end::Col-->  

                <!--end::Col-->
                <div class="col-sm-6">
                    <!--end::Label-->
                    <div class="fw-semibold fs-7 text-gray-600 mb-1">Issued By:</div>                
                    <!--end::Label-->  

                    <!--end::Text-->
                    <div class="fw-bold fs-6 text-gray-800">CodeLab Inc.</div>                
                    <!--end::Text-->  

                     <!--end::Description-->
                     <div class="fw-semibold fs-7 text-gray-600">                      
                        9858 South 53rd Ave.<br>
                        Matthews, NC 28104                         
                    </div>                
                    <!--end::Description-->   
                </div>                
                <!--end::Col-->  
            </div>                
            <!--end::Row-->   


            <!--begin::Content-->
            <div class="flex-grow-1">
                <!--begin::Table-->
                <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>                                           
                                    #14534
                                </td>

                                <td class="pt-6 text-gray-900 fw-bolder">$180</td>
                                <td class="pt-6 text-gray-900 fw-bolder">$40.00</td>
                                <td class="pt-6 text-gray-900 fw-bolder">$140.00</td>
                            </tr>

                        </tbody>
                    </table>
                </div>  
                <!--end::Table-->                     

                <!--begin::Container-->
                <div class="d-flex justify-content-end">
                    <!--begin::Section-->
                       
                    <!--end::Section-->                        
                </div>   
                <!--end::Container-->                 
            </div>
            <!--end::Content-->          
        </div>
        <!--end::Wrapper-->           
    </div>     
    <!--end::Invoice 2 content-->         
            </div>  
            <!--end::Content-->

            <!--begin::Sidebar-->
            <div class="m-0">
                <!--begin::Invoice 2 sidebar-->
<div class="d-print-none border border-dashed border-gray-300 card-rounded h-lg-100 min-w-md-350px p-9 bg-lighten">
    <!--begin::Labels-->
    <div class="mb-8">       
      
        <span class="badge badge-light-warning">Partial Paid</span>          
    </div>                
    <!--end::Labels-->   
    
    <!--begin::Title-->
    <h6 class="mb-8 fw-bolder text-gray-600 text-hover-primary">LAST PAYMENT DETAILS</h6>
    <!--end::Title-->   

    <!--begin::Item-->
    <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>                
    <!--end::Item-->   

    <!--begin::Item-->
    <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">
            12 Apr 2021
        </div>          
    </div>                
    <!--end::Item-->  
    <!--begin::Item-->
    <div class="mb-6">       
        <div class="fw-semibold text-gray-600 fs-7">Amount</div> 
      
        <div class="fw-bold text-gray-800 fs-6">
            $20
        </div>          
    </div>                
    <!--end::Item-->  

    <!--begin::Item-->
    <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>                
    <!--end::Item-->  

    <!--begin::Title-->
    <h6 class="mb-4 fw-bolder text-gray-600 text-hover-primary">PAYMENT HISTORY</h6>
    <!--end::Title-->   
<div class="flex-grow-1">
                <!--begin::Table-->
                <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>
                            <tr class="fw-bold text-gray-700 fs-5">
                               
                                <td class="pt-6 text-gray-900 fw-bolder">12 Feb 2022</td>
                                <td class="pt-6 text-gray-900 fw-bolder">$10.00</td>
                            </tr>
                            <tr class="fw-bold text-gray-700 fs-5">
                               
                                <td class="pt-6 text-gray-900 fw-bolder">12 Dec 2021</td>
                                <td class="pt-6 text-gray-900 fw-bolder">$10.00</td>
                            </tr>

                        </tbody>
                    </table>
                </div>  
                <!--end::Table-->                     

                <!--begin::Container-->
                <div class="d-flex justify-content-end">
                    <!--begin::Section-->
                       
                    <!--end::Section-->                        
                </div>   
                <!--end::Container-->                 
            </div>
    
</div>                
<!--end::Invoice 2 sidebar-->                  </div>  
            <!--end::Sidebar-->
        </div>
        <!--end::Layout-->         
    </div>
    <!--end::Body-->
</div>
                      
                       </div>
            <!--end::Tab panel-->

            <!--begin::Tab panel-->
            <!--<div id="kt_activity_year" class="card-body p-0 tab-pane fade show" role="tabpanel" aria-labelledby="kt_activity_year_tab">-->
                
            <!--     </div>-->
            <!--end::Tab panel-->
        </div>
        <!--end::Tab Content-->
    </div>
    <!--end::Card body-->
</div>



           <!-- <div class="p-3 bg-white">-->
           <!--  <div class="d-flex justify-content-between align-items-center">-->
                <!--<h6 class="heading1">Recently Sold Items</h6>-->
           <!--  </div>-->

           <!--  <div class="table-responsive">-->
           <!--  <table class="table table-borderless">-->
           <!--     <thead>-->
           <!--         <th></th>-->
           <!--         <th>Item</th>-->
           <!--         <th>Quantity</th>-->
           <!--         <th>Price</th>-->
           <!--     </thead>-->

           <!--     <tbody>-->
           <!--         <tr>-->
           <!--          <td><img src="https://i.imgur.com/VMsimw4.jpg" width="35"></td>-->
           <!--          <td>Air Jordon 1 Mis Shattered Backboard</td>-->
           <!--          <td>3</td>-->
           <!--          <td>$140.00</td> -->
           <!--         </tr>-->

           <!--         <tr><td><img src=" https://i.imgur.com/TsEgUVp.jpg" width="35"></td>-->
           <!--          <td>Air Jordon 1 Mis Shattered 'Red hunt'</td>-->
           <!--         <td>6</td>-->
           <!--          <td>$40.00</td>   -->
           <!--         </tr>-->

           <!--         <tr>-->
           <!--          <td><img src="https://i.imgur.com/DssMflK.jpg" width="35"></td>-->
           <!--          <td>Nike Sachi x LDWaffle 'Pine Green'</td>-->
           <!--          <td>2</td>-->
           <!--          <td>$80.00</td> -->
           <!--         <tr>-->
           <!--          <td><img src="https://i.imgur.com/eXYwGQO.jpg" width="35"></td>-->
           <!--          <td>Adidas Yazzi Boost 700 'Wave Runner'</td>-->
           <!--          <td>3</td>-->
           <!--          <td>$140.00</td>   -->
           <!--         </tr>-->
           <!--         <tr class="sub-t">-->
           <!--         <td></td>-->
           <!--          <td></td>-->
           <!--         <td>Subtotal</td>-->
           <!--          <td>$40.00</td>   -->
           <!--         </tr>-->

           <!--         <tr class="sub-t">-->
           <!--          <td></td>-->
           <!--          <td></td>-->
           <!--          <td>GST</td>-->
           <!--          <td>$8.00</td> -->
           <!--         <tr>-->
           <!--          <td></td>-->
           <!--          <td></td>-->
           <!--          <td>Total</td>-->
           <!--          <td>$140.00</td>   -->
           <!--         </tr>-->
                    

           <!--     </tbody>-->
                 

           <!--  </table>-->


           <!--  </div>-->


           <!--</div>-->
      </div>
           
        

    </div>
    </div>
      </div>
      <div class="modal-footer">
        
      </div>
    </div>
  </div>
  
  
  </div>
</div>
<!--Skye-->
</div>
  
    <script>
        
        function addTask(listId, inputId) {
    const taskText = document.getElementById(inputId).value;
    if (taskText.trim() === "") {
        return;
    }

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

    document.getElementById(listId).appendChild(card);
    document.getElementById(inputId).value = "";
}
    </script>
   

<script>
  function allowDrop(event) {
    event.preventDefault();
    const listElement = event.currentTarget;
    listElement.classList.add('drag-over');
  }

  function handleDrop(event) {
    event.preventDefault();
    const listElement = event.currentTarget;
    listElement.classList.remove('drag-over');

    const fromListId = event.dataTransfer.getData('text/plain');
    const toListId = listElement.id;

    console.log(`Move card from list ${fromListId} to list ${toListId}`);

    const draggedCard = document.querySelector(`[draggable="true"][style="opacity: 1;"]`);
    listElement.appendChild(draggedCard);
    draggedCard.style.opacity = '1';
  }

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

  
</script>

  <script>
    // Get references to modal and buttons
    var modal = document.getElementById("myModal");
    var triggerButtons = document.querySelectorAll(".modal-trigger");
    var closeBtn = document.getElementById("closeModalBtn");

    // Function to open the modal
    function openModal() {
      modal.style.display = "flex";
    }

    // Function to close the modal
    function closeModal() {
      modal.style.display = "none";
    }

    // Event listeners for each trigger button
    triggerButtons.forEach(function(button) {
      button.addEventListener("click", openModal);
    });

    // Event listener for the close button
    closeBtn.addEventListener("click", closeModal);

    // Close the modal if the user clicks outside of it
    window.addEventListener("click", function(event) {
      if (event.target === modal) {
        closeModal();
      }
    });
  </script>



    </div>
    <!--end::Card header-->

    {% if messages %}
        <div class="d-flex justify-content-center align-items-center">
            <div class="alert alert-danger" role="alert" style="width: 300px;">
                {% for message in messages %}
                    {{ message }}
                {% endfor %}
            </div>
        </div>
    {% endif %}
<!--end::Card header-->


{% endblock %}