@extends('backend.layouts.app')
@section('content')
    <style>
        body {
            font-size: 13px;
        }

        .extra-content {
            display: none;
        }

        .ec-content-wrapper {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
        }

        .content {
            margin-right: auto;
            margin-left: auto;
            padding: 30px;
            width: 100%;
        }

        .breadcrumb-wrapper {
            margin-bottom: 30px;
        }

        .align-items-center {
            -webkit-box-align: center !important;
            -ms-flex-align: center !important;
            align-items: center !important;
        }

        .justify-content-between {
            -webkit-box-pack: justify !important;
            -ms-flex-pack: justify !important;
            justify-content: space-between !important;
        }

        .breadcrumb-wrapper h1,
        .breadcrumb-wrapper .h1 {
            color: #56606e;
            font-size: 25px;
            font-weight: 500;
        }

        .breadcrumb-wrapper .breadcrumbs {
            margin-top: 5px;
        }

        p,
        li,
        span {
            letter-spacing: 0.02rem;
        }

        p {
            font-weight: 400;
            margin-bottom: 0;
            /* font-size: 15px; */
            line-height: 1.2;
        }

        .breadcrumb-wrapper .breadcrumbs span i {
            margin: 0 5px;
            font-size: 18px;
        }



        .breadcrumb-wrapper .btn {
            border-radius: 15px;
        }

        .card {
            border-radius: 15px;
            -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.03);
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.03);
        }

        .card {
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            background-color: #ffffff;
            background-clip: border-box;
            border: 1px solid #f3f3f3;
            border-radius: 0.25rem;
        }

        .card-default .card-header-border-bottom {
            border-bottom: 1px solid #f3f3f3;
        }

        @media (min-width: 1500px) {
            .card-default .card-header {
                padding-left: 30px;
                padding-right: 30px;
            }
        }

        .card-default .card-header {
            /* padding: 20px; */
            padding-left: 15px;
            padding-right: 15px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            background-color: #ffffff;
            border-radius: 15px 15px 0 0;
        }

        .card .card-header {
            min-height: 30px;
            padding: 6px 25px;
        }

        .card-header:first-child {
            border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
        }

        .card-header {
            padding: 0.5rem 1rem;
            margin-bottom: 0;
            background-color: rgba(0, 0, 0, 0.03);
            border-bottom: 1px solid #f3f3f3;
        }

        .card-default .card-header-border-bottom h2,
        .card-default .card-header-border-bottom .h2 {
            margin-bottom: 0;
        }

        .card-default .card-header h2,
        .card-default .card-header .h2 {
            color: #56606e;
            margin-bottom: 0;
            font-size: 18px;
            line-height: 1;
        }

        .card .card-header h2,
        .card .card-header .h2 {
            color: #56606e;
            margin-bottom: 0.312rem;
            font-size: 20px;
            line-height: 1;
        }


        .card-body {
            -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            padding: 1rem 1rem;
        }

        .single-pro-img {
            position: relative;
            width: 100%;
        }

        .single-pro-img .single-product-scroll {
            position: sticky;
            top: 30px;
        }

        .single-product-cover {
            overflow: hidden;
            cursor: -webkit-zoom-in;
            cursor: zoom-in;
            border-radius: 15px;
        }

        .slick-slider {
            position: relative;
            display: block;
            box-sizing: border-box;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
            -khtml-user-select: none;
            -ms-touch-action: pan-y;
            touch-action: pan-y;
            -webkit-tap-highlight-color: transparent;
        }

        .slick-slider .slick-list,
        .slick-slider .slick-track {
            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        .slick-list {
            position: relative;
            display: block;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }

        .slick-slider .slick-list,
        .slick-slider .slick-track {
            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        .slick-track {
            position: relative;
            top: 0;
            left: 0;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        .slick-track:after,
        .slick-track:before {
            display: table;
            content: '';
        }

        .single-nav-thumb {
            width: 100%;
        }

        .slick-slider {
            position: relative;
            display: block;
            box-sizing: border-box;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
            -khtml-user-select: none;
            -ms-touch-action: pan-y;
            touch-action: pan-y;
            -webkit-tap-highlight-color: transparent;
        }

        .single-nav-thumb .slick-arrow.slick-prev {
            right: auto;
            left: -11px;
        }

        .single-nav-thumb .slick-arrow {
            top: 40%;
        }

        .single-nav-thumb .slick-arrow {
            opacity: 0.5;
        }

        .single-nav-thumb .slick-arrow {
            position: absolute;
            top: 37%;
            left: auto;
            right: auto;
            margin: 0 auto;
            font-size: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            width: 30px;
            height: 30px;
            padding: 0;
            z-index: 1;
        }

        button:not(:disabled),
        [type=button]:not(:disabled),
        [type=reset]:not(:disabled),
        [type=submit]:not(:disabled) {
            cursor: pointer;
        }

        button,
        [type=button],
        [type=reset],
        [type=submit] {
            -webkit-appearance: button;
        }

        .single-nav-thumb .slick-list {
            margin: 0 -8px;
        }

        .slick-slider .slick-list,
        .slick-slider .slick-track {
            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        .slick-list {
            position: relative;
            display: block;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }

        .single-nav-thumb .slick-arrow {
            top: 40%;
        }

        .single-nav-thumb .slick-arrow {
            opacity: 0.5;
        }

        .single-nav-thumb .slick-arrow {
            position: absolute;
            top: 37%;
            left: auto;
            right: auto;
            margin: 0 auto;
            font-size: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            width: 30px;
            height: 30px;
            padding: 0;
            z-index: 1;
        }

        button:not(:disabled),
        [type=button]:not(:disabled),
        [type=reset]:not(:disabled),
        [type=submit]:not(:disabled) {
            cursor: pointer;
        }

        button,
        [type=button],
        [type=reset],
        [type=submit] {
            -webkit-appearance: button;
        }


        .product-detail h5,
        .product-detail .h5 {
            color: #56606e;
        }

        .product-detail .product-rate .is-rated {
            color: #ffd481;
        }

        .product-detail .product-rate i {
            font-size: 22px;
            padding: 0 2px 0 0;
        }

        .card-default .card-body p {
            line-height: 1.5;
            color: #777777;
            font-size: 13px;
        }

        .product-detail .product-desc {
            padding-bottom: 15px;
        }

        p,
        li,
        span {
            letter-spacing: 0.02rem;
        }

        .product-detail .product-price {
            /* padding-bottom: 15px; */
            padding-bottom: 4px;
            font-weight: 700;
            font-size: 16px;
        }

        .product-detail .product-sku {
            /* padding-bottom: 15px; */
            padding-bottom: 8px;
        }

        .product-detail .product-size,
        .product-detail .product-color {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding-bottom: 15px;
        }

        .product-detail .product-size li {
            width: auto;
            height: auto;
            line-height: 18px;
            padding: 0px 7px;
            border-radius: 10px;
        }

        .product-detail .product-size li,
        .product-detail .product-color li {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding: 2px;
            border-radius: 30px;
            opacity: 0.7;
            background-color: transparent;
            -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
            width: 25px;
            height: 25px;
            cursor: pointer;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            font-size: 12px;
            line-height: 22px;
            padding: 0;
            border: 1px solid #eeeeee;
            float: left;
            margin-right: 10px;

        }

        .product-detail .product-size,
        .product-detail .product-color {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding-bottom: 15px;
        }

        .product-detail .product-color .color {
            border-radius: 30px;
        }

        .product-detail .product-size li,
        .product-detail .product-color li {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding: 2px;
            border-radius: 30px;
            opacity: 0.7;
            background-color: transparent;
            -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
            width: 25px;
            height: 25px;
            cursor: pointer;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            font-size: 12px;
            line-height: 22px;
            padding: 0;
            border: 1px solid #eeeeee;
            float: left;
            margin-right: 10px;
            border-radius: 0;
        }

        .product-detail .product-stock {
            display: -webkit-inline-box;
            display: -ms-inline-flexbox;
            display: inline-flex;
        }

        .product-detail .product-stock .stock {
            border: 1px solid #f3f3f3;
            margin: 0 20px 5px 0;
            padding: 10px;
            text-align: center;
            border-radius: 15px;
        }

        .product-detail .product-stock .stock .title {
            font-weight: 500;
            font-size: 14px;
        }

        .card-default .card-body p {
            line-height: 1.5;
            color: #777777;
        }

        .card-default .card-body p {
            line-height: 1.5;
            color: #777777;
        }

        .product-detail .seller-card {
            overflow: inherit;
        }

        .card-default .card-body {
            padding: 15px 25px !important;
            /* padding: 15px; */
        }

        .text-center {
            text-align: center !important;
        }

        .text-secondary {
            color: #8a909d !important;
        }

        .d-inline-block {
            display: inline-block !important;
        }

        .rounded-circle {
            border-radius: 15px !important;
        }

        .product-detail h5,
        .product-detail .h5 {
            color: #56606e;
        }

        .text-dark {
            color: #56606e !important;
        }

        .card-default .card-body p {
            line-height: 1.5;
            color: #777777;
        }

        .product-detail .product-rate {
            padding: 5px 0;
        }

        .list-unstyled {
            padding-left: 0;
            list-style: none;
        }

        .mt-4,
        .my-4 {
            margin-top: 30px !important;
        }

        .product-detail .nav-tabs {
            border: none;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
        }

        .nav-tabs {
            border-bottom: 1px solid #dee2e6;
        }

        .custom-tab {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            padding-left: 0;
            margin-bottom: 0;
            list-style: none;
        }

        .nav-tabs .customer-item .order-btn.active {
            color: #88aaf3;
        }

        .nav-tabs .customer-item .order-btn {
            color: #56606e;
            font-weight: 500;
            padding: 8px 20px;
        }

        .product-detail .nav-tabs .order-btn {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .nav-tabs .customer-item .order-btn.active,
        .nav-tabs .customer-item.show .order-btn {
            color: #495057;
            background-color: #fdfdfd;
            border-color: #dee2e6 #dee2e6 #fdfdfd;
        }

        .nav-tabs .order-btn {
            margin-bottom: -1px;
            background: none;
            border: 1px solid transparent;
            border-top-left-radius: 0.25rem;
            border-top-right-radius: 0.25rem;
        }

        .order-btn {
            display: block;
            padding: 0.5rem 1rem;
            color: #88aaf3;
            text-decoration: none;
            -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
        }

        .product-detail .nav-tabs .order-btn i {
            font-size: 16px;
        }

        .nav-tabs .customer-item .order-btn {
            color: #56606e;
            font-weight: 500;
            padding: 8px 20px;
        }

        .product-detail .nav-tabs .order-btn {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .nav-tabs .order-btn {
            margin-bottom: -1px;
            background: none;
            border: 1px solid transparent;
            border-top-left-radius: 0.25rem;
            border-top-right-radius: 0.25rem;
        }

        .order-btn {
            display: block;
            padding: 0.5rem 1rem;
            color: #88aaf3;
            text-decoration: none;
            -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
        }

        .product-detail .tab-content {
            overflow: hidden;
            background-color: #fff;
            text-align: left;
            padding: 35px 30px 21px 30px;
            border: 1px solid #eeeeee;
            border-radius: 0;
            color: #202020;
            font-size: 18px;
            letter-spacing: 0;
            line-height: 1.6;
            border-radius: 15px;
            height: auto;
        }

        .product-detail .tab-content .tab-pane {
            padding: 0 !important;
        }


        .tab-content>.tab-pane {
            display: none;
        }

        .tab-content>.active {
            display: block;
        }

        .tab-pane {
            line-height: 1.8;
        }

        .card-default .card-body p {
            line-height: 1.5;
            color: #777777;
        }

        .product-detail .tab-content .tab-pane ul li {
            list-style-type: disclosure-closed;
            color: #777777;
        }

        h6,
        .h6 {
            font-size: 0.93625rem;
        }

        .product-detail .ec-ofr ul li {
            margin: 10px 0;
        }

        .product-detail .ec-ofr ul li b {
            font-weight: 500;
        }

        button,
        a {
            text-decoration: none;

        }

        /* a {
            color: #88aaf3;

        } */

        ul {
            margin: 0;
            padding: 0;
        }

        .product-detail .product-size li {
            width: auto;
            height: auto;
            line-height: 18px;
            padding: 0px 7px;
            border-radius: 10px;
        }

        .product-detail .product-size li,
        .product-detail .product-color li {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding: 2px;
            border-radius: 30px;
            opacity: 0.7;
            background-color: transparent;
            -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
            width: 25px;
            height: 25px;
            cursor: pointer;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            font-size: 12px;
            line-height: 22px;
            padding: 0;
            border: 1px solid #eeeeee;
            float: left;
            margin-right: 10px;
            border-radius: 0;
        }

        ul li {
            list-style-type: none;
        }

        .slick-slide img {
            display: block;
            /* height: 550px; */
            border-radius: 15px;
        }

        .carousel-box {
            padding: 11px 11px 0 11px;
            display: block !important;
        }

        .product-gallery-thumb .slick-slide img {
            width: 100px;
            height: 100px;
            border: 1px solid transparent;
            -webkit-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
            cursor: pointer;
            border-radius: 10px;
            border-color: #f3f3f3;
        }

        .product-detail .tab-content .tab-pane ul {
            padding-left: 16px;
            font-size: 15px;
        }

        .carousel-box1 img {
            height: 100%;
            /* max-height: 400px; */
            max-height: 360px;
            width: auto;
            object-fit: cover;
        }

        .slick-arrow {
            display: none;
        }

        .single-nav-thumb .slick-arrow.slick-prev {
            display: none !important;
        }

        .single-nav-thumb .slick-arrow {
            display: none !important;
        }

        .ec-odr-dtl .small {
            font-weight: 300;
            text-align: right;
        }

        .ec-odr-dtl h2,
        .ec-odr-dtl .h2 {
            margin-top: 0px;
            line-height: 0.8em;
            display: -webkit-inline-box;
            display: -ms-inline-flexbox;
            display: inline-flex;
            width: 100%;
        }

        .info-grid {
            font-style: normal;
            line-height: inherit;
            border: 1px solid #e1e2e6;
            height: 100%;
            border-radius: 15px;
            overflow: hidden;
        }

        address {
            margin-bottom: 1rem;
            font-style: normal;
            line-height: inherit;
        }

        .info-title {
            width: 100%;
            text-align: center;
            display: inline-block;
            background: #f7f7f7;
            padding: 10px;
            color: #56606e;
        }

        .info-title strong {
            font-weight: 500;
        }

        .info-content {
            padding: 20px;
            color: #8a909d;
        }

        .tbl-title {
            margin-top: 30px;
            border: 1px solid #f7f7f7;
            text-align: center;
            padding: 10px;
            margin-bottom: 20px;
            background: #f7f7f7;
            color: #2b2b2b;
            font-size: 15px;
        }

        .info-content p {
            margin-bottom: 8px;
            font-size: 15px;
        }

        .info-content strong {
            color: #333;
            min-width: 120px;
            display: inline-block;
        }

        .text-muted {
            color: #555;
        }

        .table th {
            text-align: center;
            /* background: #f7f7f7; */
            /* border-top: 2px solid #dee2e6 !important; */
            padding: 10px;
            color: #56606e;
            border: none;
            /* Remove border from <th> */
        }

        .table td {
            text-align: center;
            align-content: center;
            padding: 10px;
            border-bottom: 1px solid #ddd;
            /* Apply border only to the bottom of <td> */
        }

        .select2-container--default .select2-selection--single[aria-disabled="true"] {
            background-color: #f7f8fa !important;
            opacity: 1 !important;
            border-color: #dfdfe6 !important;
            cursor: not-allowed;
        }

        .bootstrap-select .disabled {
            background-color: #f7f8fa !important;
            opacity: 1 !important;
            border-color: #dfdfe6 !important;
            cursor: not-allowed;
        }

        #addquotationModal .modal-content .modal-body {
            overflow: visible !important;
        }

        .btn-close {
            background-color: #fff;
            color: red;
            border: none;
            font-size: x-large;
        }

        .btn-soft-download {
            background-color: #92adff57;
            color: #003fffa8;
        }

        .btn-soft-download:hover {
            background-color: #1f6dc2;
            border-color: #1f6dc2;
            color: white;
            /* Or use var(--white) if you have it defined */
        }

        .bootstrap-timepicker-widget table td a {
            text-decoration: none !important;
            background-color: #eee !important;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            border-color: #ddd !important;
        }

        .product-detail h5,
        .product-detail .h5 {
            margin-bottom: 3px !important;
        }

        .description-container {
            position: relative;
        }

        .description {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            /* Limit to 2 lines */
            -webkit-box-orient: vertical;
            overflow: hidden;
            position: relative;
            position: relative;

        }

        .read-more {
            color: #704594;
            cursor: pointer;
            display: block;
            margin-top: 5px;
            font-size: 15px;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 40px;
            height: 22px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked+.slider {
            background-color: #704594;
        }

        input:checked+.slider:before {
            transform: translateX(18px);
        }

        .datepicker table tr th {
            font-weight: 500;
        }

        .datepicker .datepicker-switch,
        .datepicker .next,
        .datepicker .prev,
        .datepicker tfoot tr th {
            cursor: pointer;
        }

        .datepicker {
            border: 1px solid #eff2f7;
            padding: 15px !important;
            z-index: 999 !important;
        }

        .table-condensed>tbody>tr>td,
        .table-condensed>thead>tr>th {
            padding: 7px;
            cursor: pointer;
        }

        .datepicker table tr td.today,
        .datepicker table tr td.today.disabled,
        .datepicker table tr td.today.disabled:hover,
        .datepicker table tr td.today:hover {
            background-image: none !important;
            background-color: #704594 !important;
            color: #fff !important;
        }

        .input-group>.custom-select:not(:last-child),
        .input-group>.form-control:not(:last-child) {
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }

        .datepicker {
            border: 1px solid #eff2f7;
            padding: 15px !important;
            z-index: 1055 !important;
        }

        .img-thumbnail {
            height: 60px !important;
        }

        .card .card-header h2,
        .card .card-header .h2 {
            font-size: 15px;
            font-weight: bold;
            margin-bottom: 0px;
        }

        .card .card-header {
            min-height: 30px;
            padding: 6px 25px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        p.details {
            color: #141212 !important;
        }


        .order-btn {
            cursor: pointer;
            font-size: 12px;
        }

        .order-btn-index {
            cursor: pointer;
            font-size: 12px;
        }

        .pipeline-wrapper {
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            background: #fff;
            padding: 5px 0;
            white-space: nowrap;
        }

        .pipeline-inner {
            display: inline-flex;
            align-items: center;
            min-width: max-content;
            border: 1px solid #dcdcdc;
            border-radius: 5px;
            overflow: hidden;
        }

        .pipeline-step-wrapper {
            display: inline-flex;
            align-items: center;
            position: relative;
        }

        .pipeline-step {
            /* padding: 7px 14px; */
            padding: 7px 45px;
            /* background: #f9f9f9; */
            color: #333;
            font-weight: 500;
            white-space: nowrap;
            text-align: center;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            position: relative;
            flex-shrink: 0;
            /* border-right: 1px solid #dcdcdc; */
        }

        .pipeline-step.active {
            background: var(--success-color);
            color: #fff;
            font-weight: 600;
        }

        .pipeline-step::after {
            content: "";
            position: absolute;
            right: -17px;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            /* border-top: 18px solid transparent;
                                                                                                                border-bottom: 17px solid transparent;
                                                                                                                border-left: 15px solid #ffffff;  */
            border-top: 21px solid transparent;
            border-bottom: 21px solid transparent;
            border-left: 17px solid #ffffff;
        }

        .pipeline-step.active::after {
            border-left-color: var(--success-color);
        }

        .pipeline-arrow {
            width: 0;
            height: 0;
            /* border-top: 18px solid transparent;
                                                                                                                border-bottom: 17px solid transparent; */
            border-left: 15px solid #ffffff;
            flex-shrink: 0;
            margin-left: -1px;
        }

        .pipeline-step.active+.pipeline-arrow {
            border-left-color: var(--success-color);

        }


        .pipeline-step.active::before {
            content: "";
            position: absolute;
            left: 0;
            /* align to the left edge */
            top: 50%;
            transform: translate(-100%, -50%);
            /* move left out of the box and vertically center */
            width: 0;
            height: 0;
            border-top: 20px solid var(--success-color);
            border-bottom: 21px solid var(--success-color);
            border-left: 15px solid transparent;
            /* make a left-pointing triangle */
            z-index: 1;
        }

        .step-content {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .step-content i {
            font-size: 14px;
        }

        .enquiry-row {
            /* height: calc(92vh - 90px); */
            height: calc(92vh - 91px);
            overflow: hidden;
        }

        @media (max-width: 1432px) {
            .pipeline-step {
                padding: 7px 20px;
            }
        }

        ` @media only screen and (max-width: 991px) {
            .enquiry-row {
                height: auto;
                overflow: auto;
            }
        }

        .nav {
            border-radius: 999px;
            /* border: 1px solid #d3d9e3; */
            border: 1px solid #999999 !important;

        }

        .custom-tab .order-btn.active {
            color: #000;
            background-color: #f0f7ff;
            border: 1px solid #f4effe;
            box-shadow: none;
        }

        .customer-item {
            padding: 3px;
        }

        @media (min-width: 992px) {
            .aiz-content-wrapper {
                padding-top: 67px;
            }
        }

        .aiz-main-content {
            background: #EDF0F4;
        }

        .order-btn:hover,
        .customer-item .order-btn.active {
            background: linear-gradient(to bottom, var(--primary-color), color-mix(in srgb, var(--primary-color) 80%, black)) !important;
            color: #fff !important;
        }

        .custom-tab .order-btn {
            border-radius: 999px;
            font-weight: 500;
            padding: 7px 40px;
            /* color: #6c757d; */
            color: #000;
            background-color: transparent;
            border: none;
        }

        .custom-tab .order-btn.active {
            color: #000;
            background-color: #f0f7ff;
            border: 1px solid #f4effe;
            box-shadow: none;
        }

        /* .table thead th {
                    padding: 8px 5px;
                    position: sticky;
                    top: 0;
                    z-index: 10;
                    white-space: nowrap;
                } */

        .form-control {
            border-radius: 5px;
            height: calc(1.3125rem + 0.2rem + 10px);
        }

        .bootstrap-select .dropdown-toggle {
            border-radius: 5px;
        }

        .bootstrap-select>.dropdown-toggle {
            padding: 0.4rem 1.2rem !important;
        }



        .all-product-order-row.active {
            background-color: #ececec !important;
            font-weight: bold;
            border-left: 4px solid var(--primary-color) !important;
        }

        .all-product-order-row {
            cursor: pointer;
        }

        .custom-select {
            border-radius: 5px;
            height: calc(0.5em + .75rem + 13px);
        }

        .card {
            border-radius: 10px;
            margin-bottom: 10px !important;
        }

        /* .card .card-header {
                                        border-radius: 10px;
                                    } */

        .sticky-left {
            /* position: sticky; */
            top: 80px;
            /* height of your fixed header */
            height: calc(100vh - 80px);
            /* full screen height minus header */
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }



        .card.h-100 {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .scrollable-table {
            flex: 1 1 auto;
            overflow-y: auto;
        }

        .text-end {
            text-align: right;
        }

        @media (max-width: 1399px) {
            .all_search {
                width: 150px !important;
            }
        }

        .badges {
            height: auto !important;
            width: auto !important;
        }

       

        .card .card-header h2,
        .card .card-header .h2 {
            font-size: 14px !important;
        }

       

        
        .timeline-marker:before {
            background: var(--soft-info);
            z-index: 1;
            border: 3px solid transparent;
            border-radius: 100%;
            content: "";
            display: block;
            height: 25px;
            position: absolute;
            top: -3px;
            left: -5px;
            width: 25px;
            transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
            background-position: center;
            background-repeat: no-repeat;
            background-size: 18px 14px;
            background-image: url('{{ asset('assets/img/icons/files.png') }}');
        }

        .text-right {
            text-align: right !important;
        }

        .modal-content .modal-body {
            /* overflow-y: visible; */
        }

        @media (max-width: 991px) {
            .sticky-left {
                position: static !important;
                top: auto !important;
                height: auto !important;
            }
        }

        @media (min-width: 1300px) {
            .sidebar {
                transform: translateX(-100%);
                transition: transform 0.3s ease;
            }

            .main-content {
                margin-left: 0 !important;
                width: 100% !important;
            }

            .sticky-left {
                width: 25% !important;
            }

            .content-right {
                width: 75% !important;
            }
        }

        .text-danger-color {
            color: #f0416c !important;
        }

        .border-info {
            border-color: var(--info) !important;
        }

        .aiz-table {
            opacity: 1;
        }

        .sticky-left .card {
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        #order-listing {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            padding: 0;
        }

        #order-listing .list-scroll {
            flex: 1 1 auto;
            min-height: 0;
            overflow: auto;
        }

        #order-listing .pagination-footer {
            margin-top: auto;
            border-top: 1px solid #dee2e6;
            padding: 8px 12px;
            background: #fff;
        }

        #order-listing table td {
            vertical-align: middle;
        }

        .page-wrapper .page-header {
            display: none !important;
        }

        .page-body {
            margin-top: 0px !important;
        }

        .container-xl {
            max-width: inherit !important;
        }

        * {
            scrollbar-width: none !important;
            ;
        }

        .alert-license {
            display: none !important;
        }

        .page-wrapper {
            background: #EDF0F4;
        }

        .border-l-warning {
            border-left-color: var(--primary-color) !important;
            border-left-style: solid !important;
            border-left-width: 4px !important;
        }

        .list-title {
            color: var(--primary-color) !important;
        }

        /* Common badges styling */
        .badges {
            display: inline-block;
            padding: 0.25em 0.5em;
            font-size: 0.75rem;
            font-weight: 600;
            line-height: 1;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: 0.25rem;
            color: #fff;
        }

        /* Specific payment status colors */
        .badges-warning {
            background-color: #f0ad4e;
            /* Orange */
        }

        .badges-success {
            background-color: #28a745;
            /* Green */
        }

        .badges-info {
            background-color: #17a2b8;
            /* Blue */
        }

        .badges-primary {
            background-color: #007bff;
            /* Primary Blue */
        }

        .badges-dark {
            background-color: #343a40;
            /* Dark Gray/Black */
        }

        .badges-danger {
            background-color: #dc3545;
            /* Red */
        }

        .badges-secondary {
            background-color: #6c757d;
            /* Gray */
        }
        .aiz-pagination .pagination {
            flex-wrap: wrap;
            justify-content: center;
            gap: 4px;
        }
    </style>

    <div class="row">
        <div class="col-lg-3 pt-3 sticky-left">
            <div class="card h-100 d-flex flex-column">
                <form id="all_search_form" method="get">
                    <div class="card-header" style="padding: 15px 6px;">
                        <div class="d-flex align-items-center flex-nowrap gap-2">
                            <select id="all_entries" class="form-select form-select-sm custom-select" name="all_entries">
                                <option value="10" {{ request('all_entries', 10) == 10 ? 'selected' : '' }}>10</option>
                                <option value="20" {{ request('all_entries') == 20 ? 'selected' : '' }}>20</option>
                                <option value="30" {{ request('all_entries') == 30 ? 'selected' : '' }}>30</option>
                                <option value="50" {{ request('all_entries') == 50 ? 'selected' : '' }}>50</option>
                                <option value="all" {{ request('all_entries') == 'all' ? 'selected' : '' }}>All</option>
                            </select>
                        </div>
                        <div class="col-md-8 pr-2">
                            <div class="form-group mb-0">
                                <input type="text" class="form-control  all_search" id="all_search" name="all_search"
                                    value="{{ request('all_search') }}" placeholder="Type Order No & Name">
                            </div>
                        </div>
                    </div>
                </form>
                <div class="card-body table-container scrollable-table" style="padding: 20px 15px;" id="order-listing">
                    @include('backend.purchase.order_list')
                </div>
            </div>
        </div>

        <div class="col-lg-9 pt-4 mx-auto pl-0 pr-0">
            {{-- <div class="ec-content-wrapper" style="height: calc(100vh - 100px);display: flex; flex-direction: column;">
                --}}
                <div class="ec-content-wrapper" style="display: flex; flex-direction: column;">
                    {{-- <div class="sticky-tab-section" style="position: sticky !important; top: 0; z-index: 10;"> --}}
                        <div class="sticky-tab-section" style="top: 0; z-index: 10;">
                              <div id="order-info" class="d-flex align-items-center gap-2 mb-2"
                                    style="font-weight: bold;color: #1B1B27 !important;">
                                    <h6 class="mb-0 text-muted"><span id="order-show-id" class="badge bg-primary text-white"
                                            style="font-size: medium;"></span></h6>
                                    <h5 id="order-show-code" class="fw-bold text-dark text-capitalize mb-0"
                                        style="color: #1B1B27 !important;"></h5>
                                </div>
                            <div class="row align-items-center pb-2 pl-3">
                                <div class="col-auto pl-0">
                                    <ul class="nav nav-pills custom-tab" id="pills-tab" role="tablist">
                                        <li class="nav-item customer-item" role="presentation">
                                            <a class="nav-link active order-btn" data-bs-toggle="pill" href="#overview-tab"
                                                data-tab="overview-tab" data-type="1">Overview</a>
                                        </li>
                                        @if (Auth::user()->hasPermission('purchase.orders.status.print'))
                                            <li class="nav-item customer-item" role="presentation">
                                                <a class="nav-link order-btn" data-bs-toggle="pill" href="#printview-tab"
                                                    data-tab="printview-tab" data-type="2">Print Preview</a>
                                            </li>
                                        @endif
                                            @if (Auth::user()->hasPermission('purchase.orders.payment'))
                                                <li class="nav-item customer-item" role="presentation">
                                                    <a class="nav-link order-btn" data-bs-toggle="pill" href="#payment-tab"
                                                        data-tab="payment-tab" data-type="3">Payment</a>
                                                </li>
                                            @endif
                                            <li class="nav-item customer-item" role="presentation">
                                                <a class="nav-link order-btn" data-bs-toggle="pill" href="#timeline-tab"
                                                    data-tab="timeline-tab" data-type="4">Timeline</a>
                                            </li>
                                            <li class="nav-item customer-item" role="presentation">
                                                <a class="nav-link order-btn" data-bs-toggle="pill" href="#note-tab"
                                                    data-tab="note-tab" data-type="5">Note</a>
                                            </li>

                                        </ul>
                                    </div>

                                    <div class="col ms-auto text-end pe-4 d-flex justify-content-end align-items-center"
                                        style="padding-right: 30px;">
                                        @if (Auth::user()->hasPermission('purchase.orders.status.print'))
                                            <a href="#" id="print-btn" class="btn btn-circle btn-primary me-2"
                                                style="display: none;">
                                                <span class="mdi mdi-printer-outline"></span>
                                            </a>
                                            <a href="#" id="print-preview-btn" class="btn btn-circle btn-primary me-2"
                                                style="display: none;">
                                                <span class="mdi mdi-arrow-down"></span>
                                            </a>
                                        @endif
                                        @if (Auth::user()->hasPermission('purchase.orders.create'))
                                            <a href="{{ route('purchase.orders.create') }}" class="btn btn-circle btn-primary ">
                                                <span>Add New Order</span>
                                            </a>
                                        @endif
                                    </div>
                                </div>

                                <div class="row pb-2 pl-3">
                                    <div class="col-auto pl-0">
                                        <div class="bg-light border border-info rounded" style="padding: 4px 24px;">
                                            <div class="row text-center text-md-start">
                                                <div class="col-12 col-md-auto mb-2 mb-md-0 border-md-end pe-md-3">
                                                    <span class="text-primary fw-semibold">Total Amount:
                                                        <span
                                                            id="total-amount">{{ number_format($selected_order->sub_total ?? 0, 2) }}</span>
                                                    </span>
                                                </div>
                                                <div class="col-12 col-md-auto mb-2 mb-md-0 border-md-end pe-md-3">
                                                    <span class="text-success fw-semibold">Paid Amount:
                                                        <span
                                                            id="paid-amount">{{ number_format($TotalPaymentAmount, 2) }}</span>
                                                    </span>
                                                </div>
                                                <div class="col-12 col-md-auto mb-2 mb-md-0 border-md-end pe-md-3">
                                                    <span class="text-danger fw-semibold">Pending Amount:
                                                        <span
                                                            id="pending-amount">{{ number_format($PendingPaymentAmount, 2) }}</span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- <div class="tab-content-wrapper" style="overflow-y: auto; flex: 1;overflow-x: hidden"> --}}
                                <div class="tab-content-wrapper" style="">
                                    <div id="section_loader" class="c-preloader text-center p-3" style="display: none;">
                                        <i class="las la-spinner la-spin la-3x"></i>
                                    </div>

                                    <div class="tab-content" id="pills-tabContent">
                                        <div class="tab-pane fade show active" id="overview-tab" role="tabpanel">
                                            <!-- Content loaded via AJAX -->
                                        </div>
                                        <div class="tab-pane fade" id="timeline-tab" role="tabpanel">
                                            <!-- Content loaded via AJAX -->
                                        </div>
                                        <div class="tab-pane fade" id="payment-tab" role="tabpanel">
                                            <!-- Content loaded via AJAX -->
                                        </div>
                                        <div class="tab-pane fade" id="printview-tab" role="tabpanel">
                                            <!-- Content loaded via AJAX -->
                                        </div>
                                        <div class="tab-pane fade" id="note-tab" role="tabpanel">

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
@endsection

            @section('javascript')
                <script>
                    let selectedOrderId = "{{ $orderid ?? '' }}";
                    const printRouteTemplate = "{{ route('purchase.orders.download.pdf', ['id' => '__ID__']) }}";

                    $(document).ready(function () {

                        if (selectedOrderId) {
                            // Use the selected order from URL parameter
                            const selectedRow = $('.all-product-order-row[data-id="' + selectedOrderId + '"]');
                            if (selectedRow.length) {
                                const orderShowId = selectedRow.data('id');
                                const orderShowCode = selectedRow.data('order-code');
                                $('#order-show-id').text('#' + orderShowId);
                                $('#order-show-code').text(orderShowCode);
                                selectedRow.addClass('active');
                            } else {
                                // Fallback to first row if selected order not found
                                const firstRow = $('.all-product-order-row').first();
                                const orderShowId = firstRow.data('id');
                                const orderShowCode = firstRow.data('order-code');
                                $('#order-show-id').text('#' + orderShowId);
                                $('#order-show-code').text(orderShowCode);
                            }
                            loadOverviewTab(selectedOrderId);
                        } else {
                            // No specific order selected, use first row
                            const firstRow = $('.all-product-order-row').first();
                            const orderShowId = firstRow.data('id');
                            const orderShowCode = firstRow.data('order-code');
                            selectedOrderId = orderShowId;
                            $('#order-show-id').text('#' + orderShowId);
                            $('#order-show-code').text(orderShowCode);
                            firstRow.addClass('active');
                            if (selectedOrderId) {
                                loadOverviewTab(selectedOrderId);
                            }
                        }

                        // Search functionality
                        $('#all_search').on('input', function () {
                            loadorderlist($('#all_search_form').serialize());
                        });

                        $('#all_entries').on('change', function () {
                            loadorderlist($('#all_search_form').serialize());
                        });

                        $(document).on('click', '#savePaymentBtn', function (e) {
                            e.preventDefault();

                            let formData = {
                                order_id: $('#payment_order_id').val(),
                                user_id: $('#payment_user_id').val(),
                                total_payment: $('#total_payment').val(),
                                pending_payment: $('#pending_payment').val(),
                                payment_method: $('#payment_method').val(),
                                payable_amount: $('#payable_amount').val(),
                                description: $('#payment_description').val(),
                                _token: '{{ csrf_token() }}'
                            };

                            if (!formData.payable_amount || formData.payable_amount <= 0) {
                                Botble.showError("Payable amount is required and must be greater than 0");
                                return;
                            }

                            let pendingAmount = parseFloat($('#pending_payment').val());
                            if (parseFloat(formData.payable_amount) > pendingAmount) {
                                Botble.showError("Payable amount cannot exceed pending payment amount of " + pendingAmount.toFixed(2));
                                return;
                            }

                            $.ajax({
                                url: '{{ route('purchase.orders.payment.save') }}',
                                method: 'POST',
                                data: formData,
                                beforeSend: function () {
                                    $('#savePaymentBtn').prop('disabled', true).text('Saving...');
                                },
                                success: function (response) {
                                    if (response.success) {
                                        Botble.showSuccess('Payment saved successfully.');
                                        $('#paymentModal').modal('hide');
                                        const orderId = $('#payment_order_id').val();
                                        loadPaymentTab(orderId);
                                        updateSummaryBox(orderId);
                                    } else {
                                        Botble.showError(response.message ||
                                            'Something went wrong.');
                                    }
                                },
                                error: function (xhr) {
                                    Botble.showError('Payment failed. Try again.');
                                },
                                complete: function () {
                                    $('#savePaymentBtn').prop('disabled', false).text('Save');
                                }
                            });
                        });

                        // Real-time validation for payable amount input
                        $(document).on('input', '#payable_amount', function () {
                            let pendingAmount = parseFloat($('#pending_payment').val());
                            let enteredAmount = parseFloat($(this).val());

                            if (enteredAmount > pendingAmount) {
                                $(this).val(pendingAmount.toFixed(2));
                                Botble.showError('Amount cannot exceed pending payment of ' + pendingAmount.toFixed(2));
                            }
                        });

                        // Delivery status confirmation
                        window.confirmDeliveryStatusUpdate = function(orderId, newValue) {
                            const currentValue = document.getElementById(`delivery-status-select-${orderId}`).value;
                            
                            if (newValue === 'delivered') {
                                // Store the pending update
                                window.pendingDeliveryUpdate = { orderId, newValue };
                                // Show confirmation modal
                                $('#confirm-delivery-status').modal('show');
                            } else {
                                // Direct update for non-delivered status
                                updateOrderStatus(orderId, 'delivery_status', newValue);
                            }
                        };

                        window.resetDeliveryStatus = function() {
                            if (window.pendingDeliveryUpdate) {
                                // Reset the select to previous value
                                const select = document.getElementById(`delivery-status-select-${window.pendingDeliveryUpdate.orderId}`);
                                const currentSelected = select.querySelector('option[selected]');
                                if (currentSelected) {
                                    select.value = currentSelected.value;
                                }
                                window.pendingDeliveryUpdate = null;
                            }
                        };

                        window.confirmDeliveryUpdate = function() {
                            if (window.pendingDeliveryUpdate) {
                                updateOrderStatus(window.pendingDeliveryUpdate.orderId, 'delivery_status', window.pendingDeliveryUpdate.newValue);
                                $('#confirm-delivery-status').modal('hide');
                                window.pendingDeliveryUpdate = null;
                            }
                        };

                        window.updateOrderStatus = function(orderId, field, value) {
                            $.ajax({
                                url: '{{ route('purchase.orders.update.status') }}',
                                method: 'POST',
                                data: {
                                    order_id: orderId,
                                    field: field,
                                    value: value,
                                    _token: '{{ csrf_token() }}'
                                },
                                success: function(response) {
                                    Botble.showSuccess(response.message);
                                        handleStatusUpdateUI(orderId, field, value);
                                    // If delivery status was changed to delivered, disable both selects and update order status
                                    if (field === 'delivery_status' && value === 'delivered') {
                                        const deliverySelect = document.getElementById(`delivery-status-select-${orderId}`);
                                        const orderSelect = document.getElementById(`order-status-select-${orderId}`);
                                        if (deliverySelect) deliverySelect.disabled = true;
                                        if (orderSelect) {
                                            orderSelect.disabled = true;
                                            orderSelect.value = 'received';
                                        }
                                    }
                                },
                                error: function(xhr) {
                                    Botble.showError('Failed to update status');
                                    // Reset the select value on error
                                    location.reload();
                                }
                            });
                        };

                        $(document).on('click', '#addNoteForm button', function (e) {
                            e.preventDefault();

                            let form = $('#addNoteForm');
                            let formData = form.serialize();

                            $.ajax({
                                url: "{{ route('purchase.orders.notes.save') }}",
                                type: "POST",
                                data: formData,
                                success: function (response) {
                                    if (response.success) {
                                        form.trigger('reset');
                                        Botble.showSuccess('Note saved successfully.');
                                        loadNoteTab(selectedOrderId);
                                    } else {
                                        Botble.showError(response.message || 'Something went wrong.');
                                    }
                                },
                                error: function (xhr) {
                                    console.log(xhr.responseText);
                                    Botble.showError('Failed to save note.');
                                }
                            });
                        });
                    });

                    function loadOverviewTab(orderId) {
                        const url = "{{ route('purchase.orders.detail', ['id' => 'ORDER_ID']) }}".replace('ORDER_ID', orderId);
                        $('#section_loader').show();
                        $.ajax({
                            url: url,
                            type: 'GET',
                            success: function (response) {
                                $('#overview-tab').html(response);
                                $('#section_loader').hide();
                            },
                            error: function () {
                                $('#section_loader').hide();
                            }
                        });
                    }

                    function loadTimelineTab(orderId) {
                        const url = "{{ route('purchase.orders.vendor.detail.timeline', ['id' => 'ORDER_ID']) }}".replace('ORDER_ID', orderId);
                        $('#section_loader').show();
                        $.ajax({
                            url: url,
                            type: 'GET',
                            success: function (response) {
                                $('#timeline-tab').html(response);
                                $('#section_loader').hide();
                            },
                            error: function () {
                                $('#section_loader').hide();
                            }
                        });
                    }

                    function loadPrintViewTab(orderId) {
                        const url = "{{ route('purchase.orders.vendor.detail.print', ['id' => 'ORDER_ID']) }}".replace('ORDER_ID', orderId);
                        $('#section_loader').show();
                        $.ajax({
                            url: url,
                            type: 'GET',
                            success: function (response) {
                                $('#printview-tab').html(response);
                                $('#section_loader').hide();
                            },
                            error: function () {
                                $('#section_loader').hide();
                            }
                        });
                    }

                    function loadNoteTab(orderId) {
                        const url = "{{ route('purchase.orders.notes', ['id' => 'ORDER_ID']) }}".replace('ORDER_ID', orderId);
                        $('#section_loader').show();
                        $.ajax({
                            url: url,
                            type: 'GET',
                            success: function (response) {
                                $('#note-tab').html(response);
                                $('#section_loader').hide();
                            },
                            error: function () {
                                $('#section_loader').hide();
                            }
                        });
                    }

                    function loadPaymentTab(orderId) {
                        const url = "{{ route('purchase.orders.vendor.detail.payment', ['id' => 'ORDER_ID']) }}".replace('ORDER_ID', orderId);
                        $('#section_loader').show();
                        $.ajax({
                            url: url,
                            type: 'GET',
                            success: function (response) {
                                $('#payment-tab').html(response);
                                $('#section_loader').hide();
                            },
                            error: function () {
                                $('#section_loader').hide();
                            }
                        });
                    }

                    function openPaymentModal() {
                        $('#paymentModal').modal('show');
                    }
                    // Tab click handlers
                    $('.order-btn').on('click', function (e) {
                        e.preventDefault();
                        $('.order-btn').removeClass('active');
                        $(this).addClass('active');

                        const tab = $(this).data('tab');
                        if (!selectedOrderId) return;

                        if (tab === 'overview-tab') {
                            loadOverviewTab(selectedOrderId);
                        } else if (tab === 'timeline-tab') {
                            loadTimelineTab(selectedOrderId);
                        } else if (tab === 'printview-tab') {
                            loadPrintViewTab(selectedOrderId);
                        } else if (tab === 'payment-tab') {
                            loadPaymentTab(selectedOrderId);
                        } else if (tab === 'note-tab') {
                            loadNoteTab(selectedOrderId);
                        }
                    });

                    // Order row click handler
                    $(document).on('click', '.all-product-order-row', function () {
                        const orderId = $(this).data('id');
                        selectedOrderId = orderId;
                        updateSummaryBox(selectedOrderId);
                        const orderCode = $(this).data('order-code');
                        $('#order-show-id').text('#' + orderId);
                        $('#order-show-code').text(orderCode);

                        $('.all-product-order-row').removeClass('active');
                        $(this).addClass('active');

                        const activeTab = $('.order-btn.active').data('tab');

                        if (activeTab === 'overview-tab') {
                            loadOverviewTab(orderId);
                        } else if (activeTab === 'payment-tab') {
                            loadPaymentTab(orderId);
                        } else if (activeTab === 'timeline-tab') {
                            loadTimelineTab(orderId);
                        } else if (activeTab === 'printview-tab') {
                            loadPrintViewTab(orderId);
                            const printBtn = document.getElementById('print-preview-btn');
                            if (printBtn.style.display !== 'none') {
                                const finalUrl = printRouteTemplate.replace('__ID__', selectedOrderId);
                                printBtn.setAttribute('href', finalUrl);
                            }
                        } else if (activeTab === 'note-tab') {
                            loadNoteTab(orderId);
                        }
                    });

                    function loadorderlist(params) {
                        $.ajax({
                            url: "{{ route('purchase.orders.listing.data') }}",
                            type: "GET",
                            data: params,
                            success: function (response) {
                                $('#order-listing').html(response);
                            },
                            error: function (xhr) {
                                console.error("Error loading orders:", xhr.responseText);
                            }
                        });
                    }

                    function updateSummaryBox(orderId) {
                        const url = "{{ route('purchase.orders.payment.summary', ['id' => 'ORDER_ID']) }}".replace('ORDER_ID', orderId);

                        $.ajax({
                            url: url,
                            type: 'GET',
                            success: function (data) {
                                $('#total-amount').text(data.net_amount);
                                $('#paid-amount').text(data.paid_amount);
                                $('#pending-amount').text(data.pending_amount);
                            },
                            error: function () {
                                console.error("Failed to update summary box.");
                            }
                        });
                    }

                    function loadproductdetails(purchaseId, page = 1) {
                        let entries = document.getElementById("productdetails_entries").value;
                        let searchInput = document.getElementById("productdetails_search");
                        let searchValue = searchInput.value;

                        document.getElementById("productdetails_loader").style.display = "block";
                        const url = "{{ route('purchase.orders.detail', ['id' => 'ORDER_ID']) }}".replace('ORDER_ID', purchaseId);
                        $.ajax({
                            url: url,
                            type: "GET",
                            data: {
                                entries: entries,
                                search: searchValue,
                                page: page
                            },
                            success: function (response) {

                                if ($("#product-details-card").html() !== $(response).find("#product-details-card")
                                    .html()) {
                                    $("#product-details-card").html($(response).find("#product-details-card").html());
                                }

                                let loader = document.getElementById("productdetails_loader");
                                if (loader) {
                                    loader.style.display = "none";
                                }

                            },
                            error: function (xhr, status, error) {
                                console.error("XHR:", xhr);
                                console.error("Status:", status);
                                console.error("Error:", error);
                                Botble.showError('Failed to load Product Detail.');
                                document.getElementById("productdetails_loader").style.display = "none";
                            }
                        });
                    }

                    $(document).on("click", "#productdetails_pagination a", function (e) {
                        e.preventDefault();
                        let url = $(this).attr("href");
                        let page = url.split("page=")[1];
                        loadproductdetails(selectedOrderId, page);
                    });

                    // function updateOrderStatus(orderId, field, value) {
                    //     $.ajax({
                    //         url: "{{ route('purchase.orders.update.status') }}",
                    //         type: "POST",
                    //         data: {
                    //             _token: '{{ csrf_token() }}',
                    //             order_id: orderId,
                    //             field: field,
                    //             value: value
                    //         },

                    //         success: function (response) {
                    //             handleStatusUpdateUI(orderId, field, value);
                    //             Botble.showSuccess(response.message);
                    //         },
                    //         error: function (xhr) {
                    //             Botble.showError(xhr.responseJSON?.message || 'Failed to update status.');
                    //         }
                    //     });
                    // }

                    function handleStatusUpdateUI(orderId, field, value) {
                        if (field === 'delivery_status') {
                            updateDeliveryStepsUI(value);
                        }

                        if (field === 'status') {
                            const badges = $('#order-status-' + orderId); // use a proper unique ID selector
                            const formattedValue = value.charAt(0).toUpperCase() + value.slice(1);

                            // Reset old classes
                            badges.removeClass().addClass('badges');

                            // Define order status color mapping
                            const statusColors = {
                                pending: 'warning',
                                received: 'success',
                                confirmed: 'info',
                            };

                            // Set badge text
                            badges.text(formattedValue);

                            // Get color class or fallback
                            const colorClass = statusColors[value] || 'secondary';
                            badges.addClass(`badges-${colorClass}`);
                            badges.addClass(`text-white`);
                        }

                    }

                    function updateDeliveryStepsUI(value) {
                        const steps = {
                            'pending': 1,
                            'confirmed': 2,
                            'picked_up': 3,
                            'on_the_way': 4,
                            'delivered': 5,
                            'cancelled': 0
                        };
                        const currentStep = steps[value] ?? 0;

                        $('.custom-steps .step').each(function (index) {
                            const stepIndex = index + 1;
                            $(this).toggleClass('completed', stepIndex <= currentStep && currentStep > 0);
                        });
                    }
                    document.addEventListener('DOMContentLoaded', function () {
                        const printBtn = document.getElementById('print-preview-btn');

                        const tabLinks = document.querySelectorAll('.order-btn');

                        tabLinks.forEach(tab => {
                            tab.addEventListener('click', function () {
                                const targetTab = this.getAttribute('data-tab');

                                if (targetTab === 'printview-tab') {
                                    printBtn.style.display = 'inline-block';
                                } else {
                                    printBtn.style.display = 'none';
                                }
                            });
                        });
                    });

                    document.addEventListener('DOMContentLoaded', function () {
                        const printBtn = document.getElementById('print-preview-btn');
                        const tabLinks = document.querySelectorAll('.order-btn');

                        tabLinks.forEach(tab => {
                            tab.addEventListener('click', function () {
                                const targetTab = this.getAttribute('data-tab');

                                if (targetTab === 'printview-tab' && selectedOrderId) {
                                    const finalUrl = printRouteTemplate.replace('__ID__', selectedOrderId);
                                    printBtn.setAttribute('href', finalUrl);
                                    printBtn.style.display = 'inline-block';
                                } else {
                                    printBtn.style.display = 'none';
                                    printBtn.removeAttribute('href');
                                }
                            });
                        });
                    });
                    document.addEventListener('DOMContentLoaded', function () {
                        const printInvoiceBtn = document.getElementById('print-btn');
                        const tabLinks = document.querySelectorAll('.order-btn');

                        tabLinks.forEach(tab => {
                            tab.addEventListener('click', function () {
                                const targetTab = this.getAttribute('data-tab');

                                if (targetTab === 'printview-tab' && selectedOrderId) {
                                    printInvoiceBtn.style.display = 'inline-block';
                                } else {
                                    printInvoiceBtn.style.display = 'none';
                                }
                            });
                        });
                        
                        // Print button click handler
                        if (printInvoiceBtn) {
                            printInvoiceBtn.addEventListener('click', function(e) {
                                e.preventDefault();
                                if (selectedOrderId) {
                                    const printUrl = "{{ route('purchase.orders.print.invoice', '__ID__') }}".replace('__ID__', selectedOrderId);
                                    const printWindow = window.open(printUrl);
                                    printWindow.onload = function() {
                                        printWindow.print();
                                        printWindow.onafterprint = function() {
                                            printWindow.close();
                                        };
                                    };
                                }
                            });
                        }
                    });
                </script>

                <!-- Delivery Status Confirmation Modal -->
                <div id="confirm-delivery-status" class="modal fade">
                    <div class="modal-dialog modal-md modal-dialog-centered" style="max-width: 540px;">
                        <div class="modal-content p-2rem">
                            <div class="modal-body text-center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="72" height="64" viewBox="0 0 72 64">
                                    <g id="Octicons" transform="-0.14 -1.02">
                                        <g id="alert" transform="0.14 1.02">
                                            <path id="Shape"
                                                d="M40.159,3.309a4.623,4.623,0,0,0-7.981,0L.759,58.153a4.54,4.54,0,0,0,0,4.578A4.718,4.718,0,0,0,4.75,65.02H67.587a4.476,4.476,0,0,0,3.945-2.289,4.773,4.773,0,0,0,.046-4.578Zm.6,52.555H31.582V46.708h9.173Zm0-13.734H31.582V23.818h9.173Z"
                                                transform="-0.14 -1.02" fill="#ffc700" fill-rule="evenodd" />
                                        </g>
                                    </g>
                                </svg>
                                <p class="mt-3 mb-3 fs-16 fw-700">
                                    Are you sure you want to change the delivery status? This will add stock and make the order received.</p>
                                <button type="button" class="btn btn-light rounded-2 mt-2 fs-13 fw-700 w-150px"
                                    data-bs-dismiss="modal" onclick="resetDeliveryStatus()">Cancel</button>
                                <button type="button" onclick="confirmDeliveryUpdate()"
                                    class="btn btn-success rounded-2 mt-2 fs-13 fw-700 w-150px">Confirm</button>
                            </div>
                        </div>
                    </div>
                </div>
            @endsection