@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-stock-row.active {
            background-color: #ececec !important;
            font-weight: bold;
            border-left: 4px solid var(--primary-color) !important;
        }

        .all-product-stock-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;
        }

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

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

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

        #stock-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 Stock No">
                            </div>
                        </div>
                    </div>
                </form>
                <div class="card-body table-container scrollable-table" style="padding: 20px 15px;" id="stock-listing">
                    @include('backend.opening_stock.stock_list')
                </div>
            </div>
        </div>

        <div class="col-lg-9 pt-4 mx-auto pl-0 pr-0">
            <div class="ec-content-wrapper" style="display: flex; flex-direction: column;">
                <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="stockshowid" class="badge bg-primary text-white"
                                style="font-size: medium;"></span></h6>
                        <h5 id="stockshowcode" 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="#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('opening.stock.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('opening.stock.create'))
                                <a href="{{ route('opening.stock.create') }}" class="btn btn-circle btn-primary">
                                    <span>Add New Stock</span>
                                </a>
                            @endif
                        </div>
                    </div>

                   
                </div>

                <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="printview-tab" role="tabpanel">
                            <!-- Content loaded via AJAX -->
                        </div>
                        <div class="tab-pane fade" id="note-tab" role="tabpanel">
                            <!-- Content loaded via AJAX -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
    <script>
        let selectedStockId = "{{ $stockid ?? '' }}";
        const printRouteTemplate = "{{ route('opening.stock.download.pdf', ['id' => '__ID__']) }}";

        $(document).ready(function() {
             const stockShowId = $('.all-product-stock-row').first().data('id');
             const stockShowCode = $('.all-product-stock-row').first().data('stock-code');

            $('#stockshowid').text('#' + stockShowId);
            $('#stockshowcode').text(stockShowCode);
            if (selectedStockId) {
                loadOverviewTab(selectedStockId);
                $('.all-product-stock-row[data-id="' + selectedStockId + '"]').addClass('active');
            }

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

            $('#all_entries').on('change', function() {
                loadStockList($('#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;
                }
                loadStockList(formData);
            });

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

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

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

        function loadOverviewTab(stockId) {
            const url = "{{ route('opening.stock.detail', ['id' => 'STOCK_ID']) }}".replace('STOCK_ID', stockId);
            $('#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(stockId) {
            const url = "{{ route('opening.stock.timeline', ['id' => 'STOCK_ID']) }}".replace('STOCK_ID', stockId);
            $('#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(stockId) {
            const url = "{{ route('opening.stock.print', ['id' => 'STOCK_ID']) }}".replace('STOCK_ID', stockId);
            $('#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(stockId) {
            const url = "{{ route('opening.stock.notes', ['id' => 'STOCK_ID']) }}".replace('STOCK_ID', stockId);
            $('#section_loader').show();
            $.ajax({
                url: url,
                type: 'GET',
                success: function(response) {
                    $('#note-tab').html(response);
                    $('#section_loader').hide();
                },
                error: function() {
                    $('#section_loader').hide();
                }
            });
        }

        // Tab click handlers
        $('.order-btn').on('click', function(e) {
            e.preventDefault();
            $('.order-btn').removeClass('active');
            $(this).addClass('active');

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

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

        // Stock row click handler
        $(document).on('click', '.all-product-stock-row', function() {
            const stockId = $(this).data('id');
            selectedStockId = stockId;
            const stockShowId = $(this).data('id');
            const stockShowCode = $(this).data('stock-code');

            $('#stockshowid').text('#' + stockShowId);
            $('#stockshowcode').text(stockShowCode);

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

            // Update download button URL
            const printBtn = document.getElementById('print-preview-btn');
            if (printBtn) {
                const finalUrl = printRouteTemplate.replace('__ID__', selectedStockId);
                printBtn.setAttribute('href', finalUrl);
            }

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

            if (activeTab === 'overview-tab') {
                loadOverviewTab(stockId);
            } else if (activeTab === 'timeline-tab') {
                loadTimelineTab(stockId);
            } else if (activeTab === 'printview-tab') {
                loadPrintViewTab(stockId);
            } else if (activeTab === 'note-tab') {
                loadNoteTab(stockId);
            }
        });

        function loadStockList(params) {
            $.ajax({
                url: "{{ route('opening.stock.listing.data') }}",
                type: "GET",
                data: params,
                success: function(response) {
                    $('#stock-listing').html(response);
                    // Reapply active class to selected stock
                    if (selectedStockId) {
                        $('.all-product-stock-row[data-id="' + selectedStockId + '"]').addClass('active');
                    }
                },
                error: function(xhr) {
                    console.error("Error loading stocks:", xhr.responseText);
                }
            });
        }
         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' && selectedStockId) {
                        const finalUrl = printRouteTemplate.replace('__ID__', selectedStockId);
                        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' && selectedStockId) {
                        printInvoiceBtn.style.display = 'inline-block';
                    } else {
                        printInvoiceBtn.style.display = 'none';
                    }
                });
            });
            
            if (printInvoiceBtn) {
                printInvoiceBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    if (selectedStockId) {
                        const printUrl = "{{ route('opening.stock.print.invoice', '__ID__') }}".replace('__ID__', selectedStockId);
                        const printWindow = window.open(printUrl);
                        printWindow.onload = function() {
                            printWindow.print();
                            printWindow.onafterprint = function() {
                                printWindow.close();
                            };
                        };
                    }
                });
            }
        });
      
    </script>
@endsection