@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;
        }

        /* .bg-primary,
        .hov-bg-primary:hover {
            background-color: #94ca9a !important;
        } */

        .bg-info,
        .hov-bg-info:hover {
            background-color: #7487c673 !important;
        }

        .bg-success,
        .hov-bg-success:hover {
            background-color: #bcc6bf !important;
        }

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

        .bg-secondary,
        .hov-bg-secondary:hover {
            background-color: #ffdc4b !important;
        }

        .bg-warning,
        {
        background-color: #ffc70063 !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.sales.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="stock-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="ordershowid" class="badge bg-primary text-white" style="font-size: medium;"></span>
                        </h6>
                        <h5 id="customer-show-name" 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>
                                <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>
                                <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>
                                <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('sales.orders.download-pdf'))
                                <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('sales.orders.create'))
                                <a href="{{ route('sales.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('sales.orders.download-pdf', ['id' => '__ID__']) }}";

        $(document).ready(function() {

            const customer_name = $('.all-product-order-row').first().data('customer');
            const customer_company = $('.all-product-order-row').first().data('company') || '-';

            $('#ordershowid').text('#' + selectedOrderId);
            $('#customer-show-name').text(customer_name + ' ('+ customer_company +') ');

            if (selectedOrderId) {
                loadOverviewTab(selectedOrderId);
                $('.all-product-order-row[data-id="' + selectedOrderId + '"]').addClass('active');
            }

            // 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', '.aiz-pagination a', function(e) {
                e.preventDefault();
                let url = $(this).attr('href');
                let urlParams = new URLSearchParams(url.split('?')[1]);
                let page = urlParams.get('page');
                let formData = $('#all_search_form').serialize();
                if (page) {
                    formData += '&page=' + page;
                }
                loadorderlist(formData);
            });

            $(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: 'CASH',
                    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('sales.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));
                }
            });

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

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

                $.ajax({
                    url: "{{ route('sales.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('order.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('customerDetail.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('customerDetail.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('sales.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('customerDetail.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');
            const customer_name = $(this).data('customer');
            const customer_company = $(this).data('company') || '-';

            selectedOrderId = orderId;
            updateSummaryBox(selectedOrderId);

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

            $('#ordershowid').text('#' + orderId);
            $('#customer-show-name').text(customer_name + ' ('+ customer_company +') ');

            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('orders.listing.data') }}",
                type: "GET",
                data: params,
                success: function(response) {
                    $('#order-listing').html(response);
                     if (selectedOrderId) {
                        $('.all-product-order-row[data-id="' + selectedOrderId + '"]').addClass('active');
                    }
                },
                error: function(xhr) {
                    console.error("Error loading orders:", xhr.responseText);
                }
            });
        }

        function updateSummaryBox(orderId) {
            const url = "{{ route('order.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('order.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) {
            // Show confirmation popup for delivered or canceled status
            if (field === 'status' && (value === 'delivered' || value === 'canceled')) {
                showStatusConfirmation(orderId, field, value);
                return;
            }
            
            performStatusUpdate(orderId, field, value);
        }
        
        function showStatusConfirmation(orderId, field, value) {
            const isDelivered = value === 'delivered';
            const title = isDelivered ? 'Delivered' : 'Canceled';
            const color = isDelivered ? '#28a745' : '#dc3545';
             const deliveredIcon = `
            <path d="M36 8c13.255 0 24 10.745 24 24S49.255 56 36 56 12 45.255 12 32 22.745 8 36 8zm-3.5 32.5L48 25l-3-3-12.5 12.5L26 28l-3 3 9.5 9.5z" fill="${color}"/>
                `;

                const cancelIcon = `
                    <path d="M36 8c13.255 0 24 10.745 24 24S49.255 56 36 56 12 45.255 12 32 22.745 8 36 8zm9.071 30.071l-4.242 4.242L36 36.242l-4.829 4.071-4.242-4.242L31.758 32l-4.829-4.071 4.242-4.242L36 27.758l4.829-4.071 4.242 4.242L40.242 32l4.829 4.071z" fill="${color}"/>
                `;

                const icon = isDelivered ? deliveredIcon : cancelIcon;
            const modal = `
                <div id="status-confirmation-modal" class="modal fade" tabindex="-1">
                    <div class="modal-dialog modal-md modal-dialog-centered">
                        <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 fill="${color}">
                                        <circle cx="36" cy="32" r="30" fill="${color}" opacity="0.1"/>
                                        ${icon}
                                    </g>
                                </svg>
                                <p class="mt-3 mb-3 fs-16 fw-700">
                                    Order will be marked as ${title}. After this status, the order cannot be edited or deleted.
                                </p>
                                <button type="button" class="btn btn-secondary rounded-2 mt-2 fs-13 fw-700 w-150px" onclick="closeStatusModal()">Cancel</button>
                                <button type="button" class="btn btn-${isDelivered ? 'success' : 'danger'} rounded-2 mt-2 fs-13 fw-700 w-150px" onclick="confirmStatusChange(${orderId}, '${field}', '${value}')">Confirm</button>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            $('body').append(modal);
            $('#status-confirmation-modal').modal('show');
        }
        
        function closeStatusModal() {
            $('#status-confirmation-modal').modal('hide');
            setTimeout(() => $('#status-confirmation-modal').remove(), 300);
            // Reset select to previous value without reload
            const activeTab = $('.order-btn.active').data('tab');
            if (activeTab === 'overview-tab' && selectedOrderId) {
                loadOverviewTab(selectedOrderId);
            }
        }
        
        function confirmStatusChange(orderId, field, value) {
            $('#status-confirmation-modal').modal('hide');
            setTimeout(() => $('#status-confirmation-modal').remove(), 300);
            performStatusUpdate(orderId, field, value);
        }
        
        function performStatusUpdate(orderId, field, value) {
            $.ajax({
                url: "{{ route('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);
                    
                    // Only disable delivery status select if status is canceled
                    if (field === 'status' && value === 'canceled') {
                        $('select[onchange*="updateOrderStatus"][onchange*="status"]').prop('disabled', true);
                        // Don't disable payment status for delivered orders
                        $('#payment-status-select-' + orderId).prop('disabled', true);
                    }
                },
                error: function(xhr) {
                    Botble.showError(xhr.responseJSON?.message || 'Failed to update status.');
                    const activeTab = $('.order-btn.active').data('tab');
                    if (activeTab === 'overview-tab' && selectedOrderId) {
                        loadOverviewTab(selectedOrderId);
                    }
                }
            });
        }

        function handleStatusUpdateUI(orderId, field, value) {
            if (field === 'status') {
                updateDeliveryStepsUI(value);
                
                // Update status badge if exists
                const statusBadge = $('#order-status-' + orderId);
                if (statusBadge.length) {
                    const formattedValue = value.replace(/_/g, ' ').replace(/\b\w/g, v => v.toUpperCase());
                    statusBadge.text(formattedValue);
                    statusBadge.removeClass().addClass('badges');
                    
                    switch (value) {
                        case 'pending':
                            statusBadge.addClass('badges-warning');
                            break;
                        case 'confirmed':
                            statusBadge.addClass('badges-info');
                            break;
                        case 'delivered':
                            statusBadge.addClass('badges-success');
                            break;
                        case 'canceled':
                            statusBadge.addClass('badges-danger');
                            break;
                        default:
                            statusBadge.addClass('badges-secondary');
                    }
                }
            }

            if (field === 'payment_status') {
                const badges = $('#payment-status-' + orderId);

                const formattedValue = value
                    .replace(/_/g, ' ')
                    .replace(/\b\w/g, v => v.toUpperCase());

                badges.text(formattedValue);
                badges.removeClass().addClass('badges');

                switch (value) {
                    case 'pending':
                        badges.addClass('badges-warning');
                        break;
                    case 'completed':
                        badges.addClass('badges-success');
                        break;
                    case 'refunding':
                        badges.addClass('badges-info');
                        break;
                    case 'part_completed':
                        badges.addClass('badges-info');
                        break;
                    case 'refunded':
                        badges.addClass('badges-primary');
                        break;
                    case 'fraud':
                        badges.addClass('badges-dark');
                        break;
                    case 'failed':
                        badges.addClass('badges-danger');
                        break;
                    case 'canceled':
                        badges.addClass('badges-secondary');
                        break;
                    default:
                        badges.addClass('badges-secondary');
                }
            }
        }


        function updateDeliveryStepsUI(value) {
            const steps = {
                'pending': 1,
                'confirmed': 2,
                'picked_up': 3,
                'on_the_way': 4,
                'delivered': 5,
                'canceled': 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';
                    }
                });
            });
            
            if (printInvoiceBtn) {
                printInvoiceBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    if (selectedOrderId) {
                        const printUrl = "{{ route('sales.orders.print.invoice', '__ID__') }}".replace('__ID__', selectedOrderId);
                        const printWindow = window.open(printUrl);
                        printWindow.onload = function() {
                            printWindow.print();
                            printWindow.onafterprint = function() {
                                printWindow.close();
                            };
                        };
                    }
                });
            }
        });
    </script>
@endsection