@extends('backend.layouts.app')
@section('content')

    <!-- Line Awesome CDN -->
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/line-awesome/1.3.0/line-awesome/css/line-awesome.min.css" />

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

        .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; */
        }

        .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-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-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;

        }

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

        
        .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: -15px !important;
        }

        
        .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-info,
        .hov-bg-info:hover {
            background-color: #e5f4f8 !important;
            color: #3b7eae;
        }

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

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

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

        .bg-warning
        {
            /* background-color: #fae4e8 !important; */
            color: #c13d50;
        }
        .bg-danger
        {
            /* background-color: #fae4e8 !important; */
            color: #c13d50;
        }

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

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

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

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

        #user-listing table users {
            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 */
        }

        .form-control:disabled,
        .form-control[readonly] {
            background-color: #f7f8fa;
            opacity: 1;
            border-color: #dfdfe6;
        }

        .no-drop {
            pointer-events: none;
            cursor: no-drop;
        }
        #userModal .modal-dialog {
            max-height: 90vh; 
        }

        #userModal .modal-body {
            overflow-y: auto !important;
            max-height: calc(90vh - 150px);
        }
        .customer-type-filter {
            border-radius: 0 !important;
        }
        .customer-type-filter.active {
            color: #fff;
            border-bottom: 3px solid var(--primary-color);
        }
         #user-listing {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            padding: 0;
        }

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

        #user-listing .pagination-footer {
            margin-top: auto;
            border-top: 1px solid #dee2e6;
            padding: 0;
            background: #fff;
        }
        .aiz-pagination .pagination {
            flex-wrap: wrap;
            justify-content: center;
            gap: 4px;
        }
        .small-btn {
            padding: 6px 12px;
            font-size: 12px;
            border-radius: 8px;
        }
    </style>

    <div class="row">
        <!-- LEFT: USER LIST + SEARCH -->
        <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 Username, First Name or Last Name">
                            </div>
                        </div>
                    </div>
                </form>
                @if ($module_type === 'customer')
                    <div class="card-header" style="padding: 0;">
                        <ul class="nav nav-pills nav-fill border-0 w-100" id="customer-type-tabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active customer-type-filter" id="all-tab" data-filter="all" type="button">
                                    All
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link customer-type-filter" id="retail-tab" data-filter="0" type="button">
                                    Retail
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link customer-type-filter" id="wholesaler-tab" data-filter="1" type="button">
                                    Wholesaler
                                </button>
                            </li>
                        </ul>
                    </div>
                @endif

                <div class="card-body table-container scrollable-table p-0" id="user-listing">
                    @include('backend.users.user_list')
                </div>
            </div>
        </div>

        <!-- RIGHT: USER DETAILS TABS -->
        <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="customer-info" class="d-flex align-items-center gap-2 mb-2 pt-3"
                        style="font-weight: bold;color: #1B1B27 !important;">
                        <h6 class="mb-0 text-muted"><span id="usershowid" class="badge bg-primary text-white"
                                style="font-size: medium;"></span></h6>
                        <h5 id="usershowname" class="fw-bold text-dark text-capitalize mb-0"
                            style="color: #1B1B27 !important;"></h5>
                        <span id="user_status_show"></span>
                    </div>
                    <div class="row align-items-center pb-2 pl-3">
                        <div class="col-auto pl-0">
                            <ul class="nav nav-pills custom-tab" id="pills-tab" role="tablist">
                                <li class="nav-item customer-item" role="presentation">
                                    <a class="nav-link active order-btn" data-bs-toggle="pill" href="#overview-tab"
                                        data-tab="overview-tab" data-type="1">Overview</a>
                                </li>
                                @if ($module_type === 'vendor')
                                    <li class="nav-item customer-item" role="presentation">
                                        <a class="nav-link order-btn" data-bs-toggle="pill" href="#purchase-tab"
                                            data-tab="purchase-tab" data-type="2">Purchase list</a>
                                    </li>
                                @endif
                                @if ($module_type === 'customer')
                                    <li class="nav-item customer-item" role="presentation">
                                        <a class="nav-link order-btn" data-bs-toggle="pill" href="#order-tab"
                                            data-tab="order-tab" data-type="3">Order list</a>
                                    </li>
                                @endif
                                <li class="nav-item customer-item" role="presentation">
                                    <a class="nav-link order-btn" data-bs-toggle="pill" href="#timeline-tab"
                                        data-tab="timeline-tab" data-type="4">Timeline</a>
                                </li>
                            </ul>
                        </div>

                        <div class="col ms-auto text-end pe-4 d-flex justify-content-end align-items-center"
                            style="padding-right: 30px;">
                            @php
                                $canUserCreate = Auth::check() &&
                                    (
                                        Auth::user()->hasPermission('admin.users.create') ||
                                        Auth::user()->hasPermission('vendor.users.create') ||
                                        Auth::user()->hasPermission('customer.users.create')
                                    );
                            @endphp

                            @if ($canUserCreate)
                                <a onclick="AddNewUser()" class="btn btn-circle btn-primary">
                                    <span>Add New User</span>
                                </a>
                            @endif
                        </div>
                    </div>

                </div>
                @if ($module_type !== 'admin')
                    <div class="row pb-2 pl-0">
                        <div class="col-auto">
                            <div class="bg-light p-2 border border-info rounded">
                                <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"></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"></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-color fw-semibold">Pending Amount:
                                            <span id="pending-amount"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                <div class="tab-content-wrapper">
                    <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"></div>
                        <div class="tab-pane fade" id="purchase-tab" role="tabpanel"></div>
                        <div class="tab-pane fade" id="order-tab" role="tabpanel"></div>
                        <div class="tab-pane fade" id="timeline-tab" role="tabpanel"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="userModal" aria-labelledby="userModalLabel" aria-hidden="true" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <header class="modal-header">
                    <h5 class="modal-title" id="userModalLabel">Create New User</h5>
                    <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close">X</button>
                </header>
                <form id="userForm">
                    @csrf
                    <input type="hidden" id="user_id" name="user_id">
                    <div class="modal-body modal-dialog-scrollable">
                        <div class="row">
                            <div class="col-6 mb-3">
                                <label for="first_name"  class="form-label {{ $module_type !== 'vendor' ? 'required' : '' }}">First Name</label>
                                <input type="text" class="form-control" id="first_name" name="first_name"
                                    placeholder="Enter First Name">
                            </div>
                            <div class="col-6 mb-3">
                                <label for="last_name" class="form-label">Last Name</label>
                                <input type="text" class="form-control" id="last_name" name="last_name"
                                    placeholder="Enter Last Name">
                            </div>
                             @if ($module_type !== 'vendor')
                            <div class="col-6 mb-3">
                                <label for="username" class="form-label required">Username</label>
                                <input type="text" class="form-control" id="username" name="username"
                                    placeholder="Enter Username">
                            </div>
                            @endif
                            <div class="col-6 mb-3">
                                <label for="email" class="form-label required">Email</label>
                                <input type="email" class="form-control" id="email" name="email" placeholder="Enter Email">
                            </div>
                            <div class="col-6 mb-3">
                                <label for="phone" class="form-label">Phone No</label>
                                <input type="number" class="form-control" id="phone" name="phone"
                                    placeholder="Enter Phone No">
                            </div>
                            @if ($module_type === 'admin')
                                <div class="col-6 mb-3">
                                    <label for="address" class="form-label">Address</label>
                                    <input type="text" class="form-control" id="admin_address" name="address"
                                        placeholder="Enter Address">
                                </div>
                            @endif
                            @if ($module_type === 'customer')
                                <div class="col-6 mb-3">
                                    <label for="customer_type" class="form-label">Customer Type</label>
                                    <select class="form-select" id="customer_type" name="customer_type" onchange="toggleWholesalerFields()">
                                        <option value="0">Retail</option>
                                        <option value="1">Wholesaler</option>
                                    </select>
                                </div>
                              
                                <div class="col-6 mb-3">
                                    <label class="form-label">Payment Terms</label>
                                    <div class="input-group">
                                        <input type="number" class="form-control" name="payment_terms" id="payment_terms" placeholder="Enter Payment Terms">
                                        <button class="btn btn-secondary small-btn" type="button">Days</button>
                                    </div>
                                </div>

                            @endif
                            @if ($module_type !== 'admin')
                                <div class="col-6 mb-3">
                                    <label for="company_name" class="form-label {{ $module_type == 'vendor' ? 'required' : '' }}">Company Name</label>
                                    <input type="text" class="form-control" id="company_name" name="company_name"
                                        placeholder="Enter Company Name">
                                </div>
                                <div class="col-6 mb-3">
                                    <label for="company_address" class="form-label">@if ($module_type !== 'vendor')Company @endif Address</label>
                                    <input type="text" class="form-control" id="company_address" name="company_address"
                                        placeholder="Enter Address">
                                </div>
                                @if ($module_type !== 'vendor')
                                <div class="col-6 mb-3">
                                    <label for="company_phone_no" class="form-label">Company Phone No</label>
                                    <input type="number" class="form-control" id="company_phone_no" name="company_phone_no"
                                        placeholder="Enter Company Phone No">
                                </div>
                                <div class="col-6 mb-3">
                                    <label for="company_email" class="form-label">Company Email</label>
                                    <input type="text" class="form-control" id="company_email" name="company_email"
                                        placeholder="Enter Company Email">
                                </div>
                                @endif
                                <div class="col-6 mb-3">
                                    <label for="company_website" class="form-label">@if ($module_type !== 'vendor')Company @endif Website</label>
                                    <input type="text" class="form-control" id="company_website" name="company_website"
                                        placeholder="Enter Website">
                                </div>
                                @if ($module_type === 'customer')
                                    <div class="col-6 mb-3">
                                        <label for="company_tax_code" class="form-label">Company ABN Code</label>
                                        <input type="text" class="form-control" id="company_tax_code" name="company_tax_code"
                                            placeholder="Enter Company Tax Code">
                                    </div>
                                    <div class="col-6 mb-3 wholesaler-field" style="display: none;">
                                        <label for="default_discount" class="form-label required">Product Discount</label>
                                        <input type="text" class="form-control" id="default_discount" name="default_discount"
                                            placeholder="Enter Default Discount Ex. +1 Or -1">
                                    </div>
                                    <div class="col-6 mb-3 wholesaler-field" style="display: none;">
                                        <label for="credit_limit" class="form-label">Credit Limit</label>
                                        <input type="number" class="form-control" id="credit_limit" name="credit_limit"
                                            placeholder="Enter Credit Limit" min="0">
                                    </div>
                                @endif
                            @endif
                            <div class="col-6 mb-3 position-relative">
                                <label class="form-label">Country</label>
                                @if ($module_type === 'vendor')
                                    <input type="text" class="form-control" id="user_country" name="user_country" placeholder="Enter Country">
                                @else
                                    <select class="form-select" id="user_country" name="user_country" style="width: 100%;">
                                        <option value="">Select country...</option>
                                    </select>
                                @endif
                            </div>
                            <div class="col-md-6 mb-3 position-relative">
                                <label class="form-label">State</label>
                                @if ($module_type === 'vendor')
                                    <input type="text" class="form-control" id="user_state" name="user_state" placeholder="Enter State">
                                @else
                                    <select class="form-select" id="user_state" name="user_state" style="width: 100%;">
                                        <option value="">Select state...</option>
                                    </select>
                                @endif
                            </div>
                            <div class="col-md-6 mb-3 position-relative">
                                <label class="form-label">City</label>
                                @if ($module_type === 'vendor')
                                    <input type="text" class="form-control" id="user_city" name="user_city" placeholder="Enter City">
                                @else
                                    <select class="form-select" id="user_city" name="user_city" style="width: 100%;">
                                        <option value="">Select city...</option>
                                    </select>
                                @endif
                            </div>
                           
                            <div class="col-md-6 mb-3 position-relative">
                                    <label for="zip_code" class="form-label">Zip Code</label>
                                    <input type="number" class="form-control" name="user_zip_code" id="user_zip_code" placeholder="Zip Code">
                            </div>

                            {{-- CUSTOMER: DYNAMIC DOCUMENT FIELDS --}}
                            @if ($module_type === 'customer')
                                @php
                                    $defaultDocs = \App\Models\MstDocumentType::where('is_default', true)->orderBy('name')->get();
                                @endphp


                                @foreach ($defaultDocs as $doc)
                                    @php
                                        $fieldId = 'doc_file_' . $doc->id;
                                    @endphp
                                    <div class="col-6 mb-3 document-row" data-doc-id="{{ $doc->id }}">
                                        <label for="{{ $fieldId }}" class="form-label">
                                            {{ $doc->name }}
                                        </label>
                                        <input type="file" id="{{ $fieldId }}" name="{{ $fieldId }}"
                                            class="form-control form-control-sm" accept=".jpg,.jpeg,.png,.pdf" required
                                            style="padding-top: 7px">
                                        <input type="hidden" name="existing_doc_id_{{ $doc->id }}" value="">
                                        <div class="mt-1" id="current-file-{{ $doc->id }}"></div>
                                    </div>

                                @endforeach

                            @endif

                            @if ($module_type === 'admin')
                                <div class="col-6 mb-3 pe-none">
                                    <label for="user_type" class="form-label">User Type <span style="font-size: 10px">(this
                                            value Not Editable)</span></label>
                                    <select class="form-select" id="user_type" name="user_type"
                                        style="pointer-events: none; cursor: no-drop;">
                                        <option value="">Select User Type</option>
                                        <option value="admin" {{ $module_type == 'admin' ? 'selected' : '' }}>Admin</option>
                                        <option value="manager">Manager</option>
                                        <option value="staff">Staff</option>
                                        <option value="customer">Customer</option>
                                    </select>
                                </div>
                                <div class="col-6 mb-3">
                                    <label for="user_role" class="form-label required">User Role</label>
                                    <select class="form-select" id="user_role" name="user_role">
                                    </select>
                                </div>
                            @endif
                            <div class="col-6 mb-3">
                                <label for="user_status" class="form-label">User Status</label>
                                <select class="form-select" id="user_status" name="user_status">
                                    <option value="activated">Active</option>
                                    <option value="deactivated">Inactive</option>
                                </select>
                            </div>

                            @if ($module_type !== 'vendor')
                                <div class="col-6 mb-3">
                                    <label for="password" class="form-label required">Password</label>
                                    <input type="password" class="form-control" id="password" name="password"
                                        placeholder="Enter Password">
                                    <div class="invalid-feedback">Please provide a valid password.</div>
                                </div>
                                <div class="col-6 mb-3">
                                    <label for="password_confirmation" class="form-label required">Confirm Password</label>
                                    <input type="password" class="form-control" id="password_confirmation"
                                        name="password_confirmation" placeholder="Enter Confirm Password">
                                    <div class="invalid-feedback">Please provide a valid password.</div>
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">Close</button>
                        <button id="savebtn" type="button" class="btn btn-primary" onclick="SaveUser()">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- DELETE CONFIRMATION MODAL -->
    <div class="modal fade" id="deleteUserModal" tabindex="-1" role="dialog" aria-labelledby="deleteUserModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-status bg-danger"></div>
                <div class="modal-body text-center py-4">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    <div class="mb-2">
                        <svg class="icon icon-lg text-danger" xmlns="http://www.w3.org/2000/svg" width="48" height="48"
                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                            stroke-linejoin="round">
                            <path d="M18 6L6 18"></path>
                            <path d="M6 6l12 12"></path>
                        </svg>
                    </div>
                    <h3 class="mt-3">Delete User?</h3>
                    <div class="text-muted text-break">
                        Are you sure you want to <strong>permanently delete</strong> user <strong
                            id="deleteUsername"></strong>?
                        <br><small class="text-danger">This action cannot be undone.</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="w-100">
                        <div class="row">
                            <div class="col">
                                <button type="button" class="w-100 btn btn-danger" id="confirmDeleteBtn">Yes,
                                    Delete</button>
                            </div>
                            <div class="col">
                                <button type="button" class="w-100 btn btn-secondary"
                                    data-bs-dismiss="modal">Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('javascript')
    <script>
        var UseroleList = '{{ route('admin.users.role.list', ['type' => $module_type]) }}';
        var Countrylist = '{{ route('admin.users.countries.list', ['type' => $module_type]) }}';
        var Statelist = '{{ route('admin.users.states.list', ['type' => $module_type]) }}';
        var Citylist = '{{ route('admin.users.cities.list', ['type' => $module_type]) }}';
        var loaduserlist = '{{ route('admin.users.index', ['type' => $module_type]) }}';

        $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

        // Customer type filter functionality
        $('.customer-type-filter').on('click', function() {
            $('.customer-type-filter').removeClass('active');
            $(this).addClass('active');
            
            const filterType = $(this).data('filter');
            
            $('input[name="customer_type_filter"]').remove();

            $('#all_search_form').append('<input type="hidden" name="customer_type_filter" value="' + filterType + '">');
            
            reloadUserList($('#all_search_form').serialize());

        });

        function InputReset() {
            $('#userForm')[0].reset();
            $('#userForm .is-invalid').removeClass('is-invalid');
            $('#userForm .invalid-feedback').remove();
            $('#userForm .form-control, #userForm .form-select').removeClass('is-valid is-invalid');
            $('#user_id').val('');
            $('#user_role').val('').trigger('change');
            $('#password, #password_confirmation').val('');
            $('.document-row').each(function () {
                const docId = $(this).data('doc-id');
                $(`#doc_file_${docId}`).prop('required', true);
                $(`#current-file-${docId}`).empty();
                $(`input[name="existing_doc_id_${docId}"]`).val('');
            });
        }

        function AddNewUser() {
            InputReset();
            $('#userModalLabel').text('Create new user');
            $('#userModal').modal('show');
            $('#customer_type').trigger('change');
            // $('#default_discount').val(0);
            // Pre-select the first role for admin users
            if ('{{ $module_type }}' === 'admin') {
                // Trigger a change to load the roles
                $('#user_role').trigger('change.select2');
            }
        }

        function editUserUrl(id) {
            return '{{ route("admin.users.edit", ["type" => $module_type, "id" => ":id"]) }}'.replace(':id', id);
        }
        function updateUserUrl(id) {
            return '{{ route("admin.users.update", ["type" => $module_type, "id" => ":id"]) }}'.replace(':id', id);
        }

        function EditUser(id) {
               isEditing = true;
            InputReset();

            $.get(editUserUrl(id), function (res) {
                
                const user = res.user;
                const userRole = res.user_role;
                const userRolename = res.user_name;
                const docs = res.documents || [];

                $('#user_id').val(user.id);
                $('#first_name').val(user.first_name);
                $('#last_name').val(user.last_name);
                $('#username').val(user.username);
                $('#email').val(user.email);
                $('#phone').val(user.phone);
                $('#user_zip_code').val(user.zip_code);

                @if ($module_type === 'admin')
                    $('#admin_address').val(user.address ?? '');
                @endif

               @if ($module_type === 'vendor')
                    // For vendors, use text fields
                    $('#user_country').val(res.country_name || res.country || '');
                    $('#user_state').val(res.state_name || res.state || '');
                    $('#user_city').val(res.city_name || res.city || '');
                @else
                    // For others, use dropdowns
                    if (res.country) {
                        const countryOption = new Option(res.country_name, res.country, true, true);
                        $('#user_country').append(countryOption).trigger('change');
                    } else {
                        $('#user_country').val(null).trigger('change');
                    }

                    // STATES
                    loaduserStates(res.country).then(() => {
                        if (res.state) {
                            const stateOption = new Option(res.state_name, res.state, true, true);
                            $('#user_state').append(stateOption).trigger('change');
                        } else {
                            $('#user_state').val(null).trigger('change');
                        }

                        return loaduserCities(res.state, res.country);
                    }).then(() => {
                        if (res.city) {
                            const cityOption = new Option(res.city_name, res.city, true, true);
                            $('#user_city').append(cityOption).trigger('change');
                        } else {
                            $('#user_city').val(null).trigger('change');
                        }
                    });
                @endif



                // Set status properly
                let statusValue = 'deactivated';
                if (typeof user.status === 'object' && user.status !== null) {
                    statusValue = user.status.value || 'deactivated';
                } else if (typeof user.status === 'string') {
                    statusValue = user.status;
                } else if (user.status === 1) {
                    statusValue = 'activated';
                }
                $('#user_status').val(statusValue).trigger('change');
                // Set role for admin users
                if ('{{ $module_type }}' === 'admin' && userRole) {
                    // Create option if it doesn't exist
                    if (!$('#user_role option[value="' + userRole + '"]').length) {
                        const newOption = new Option(userRolename, userRole, true, true);
                        $('#user_role').append(newOption);
                    }
                    $('#user_role').val(userRole).trigger('change');
                }

                $('#company_name').val(user.company_name ?? '');
                $('#company_address').val(user.company_address ?? '');
                $('#company_phone_no').val(user.company_phone_no ?? '');
                $('#company_email').val(user.company_email ?? '');
                $('#company_website').val(user.company_website ?? '');
                $('#default_discount').val(user.default_discount ?? '');
                $('#credit_limit').val(Number(user.credit_limit).toFixed(2) ?? '');
                $('#company_tax_code').val(user.company_tax_code ?? '');
                $('#customer_type').val(user.customer_type ?? '').trigger('change');
                $('#payment_terms').val(user.payment_terms ?? '');

                if ('{{ $module_type }}' === 'customer') {
                    populateCustomerDocuments(docs);
                }

                $('#userModalLabel').text('Edit User');
                $('#userModal').modal('show');
            }).fail(xhr => Botble.showError(xhr.responseJSON?.message || 'Failed to load user.'));
        }

        function populateCustomerDocuments(documents) {
            documents.forEach(doc => {
                const docId = doc.document_type_id;
                const $container = $(`#current-file-${docId}`);

                if (doc.document_id) {
                    $(`input[name="existing_doc_id_${docId}"]`).val(doc.document_id);
                    $(`#doc_file_${docId}`).prop('required', false);

                    $container.html(`
                                            <small class="text-success">
                                                Current: <a href="${doc.file_path}" target="_blank">${doc.file_name}</a>
                                                <button type="button" class="btn btn-xs btn-outline-danger ms-2 remove-existing-doc"
                                                        data-doc-id="${docId}">
                                                    Remove
                                                </button>
                                            </small>
                                        `);
                }
            });
        }

        $(document).on('click', '.remove-existing-doc', function () {
            const docId = $(this).data('doc-id');
            $(`input[name="existing_doc_id_${docId}"]`).val('DELETE');
            $(`#doc_file_${docId}`).prop('required', true);
            $(`#current-file-${docId}`).html('<span class="text-muted">Will be replaced</span>');
        });

        function SaveUser() {
            $('#savebtn').prop('disabled', true).text('Saving...');

            const id = $('#user_id').val();
            const isUpdate = id > 0;
            const url = isUpdate ? updateUserUrl(id) : '{{ route("admin.users.store", ["type" => $module_type]) }}';

            const form = $('#userForm')[0];
            const formData = new FormData(form);
            if (isUpdate) formData.append('_method', 'PUT');

            // Add delete flags
            $('.remove-existing-doc').each(function () {
                const docId = $(this).data('doc-id');
                if ($(`input[name="existing_doc_id_${docId}"]`).val() === 'DELETE') {
                    formData.append(`delete_doc_${docId}`, '1');
                }
            });

            $.ajax({
                url,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: res => {
                    if (res.success) {
                        Botble.showSuccess(res.msg);
                        $('#userModal').modal('hide');
                        reloadUserList();
                        getDetails(res.user_id, '{{ $module_type }}');
                    } else Botble.showError(res.msg);
                },
             error: xhr => {
                        if (xhr.responseJSON?.errors) {
                            $('.is-invalid').removeClass('is-invalid');
                            $('.invalid-feedback').remove();

                            const errors = xhr.responseJSON.errors;

                            // ✅ Show ONLY first error message
                            const firstField = Object.keys(errors)[0];
                            Botble.showError(errors[firstField][0]);

                            // ✅ Inline field errors (only first for each field)
                            $.each(errors, (field, messages) => {
                                const $input = $(`[name="${field}"]`);
                                $input.addClass('is-invalid');
                                $input.closest('.col-md-6, .col-12').append(
                                    `<div class="invalid-feedback">${messages[0]}</div>`
                                );
                            });

                        } else {
                            Botble.showError('Something went wrong');
                        }
                    },

                complete: () => $('#savebtn').prop('disabled', false).text('Save')
            });
        }

        // Reload user list via AJAX
        function reloadUserList(params={}) {
            // const form = $('#all_search_form');
            // $.get(form.attr('action') || location.href, form.serialize(), html => {
            //     $('#user-listing').html($(html).find('#user-listing').html());
            //     attachRowEvents();
            //     selectFirstContact();
            // });
               $.ajax({
                url: loaduserlist,
                type: "GET",
                data: params,
                success: function(response) {
                    $('#user-listing').html(response);
                     attachRowEvents();
                     selectFirstContact();
                },
                error: function(xhr) {
                    console.error("Error loading orders:", xhr.responseText);
                }
            });
        }

        // function loaduserlist(params) {
        //     $.ajax({
        //         url: loaduserlist,
        //         type: "GET",
        //         data: params,
        //         success: function(response) {
        //             $('#user-listing').html(response);
        //              if (selectedOrderId) {
        //                 $('.all-product-userValue-row[data-id="' + selectedOrderId + '"]').addClass('active');
        //             }
        //         },
        //         error: function(xhr) {
        //             console.error("Error loading orders:", xhr.responseText);
        //         }
        //     });
        // }

        // Function to select first contact automatically
        function selectFirstContact() {
            setTimeout(function() {
                const firstRow = $('.all-product-userValue-row').first();
                if (firstRow.length) {
                    $('.all-product-userValue-row').removeClass('table-active');
                    firstRow.addClass('table-active');
                    const userId = firstRow.data('id');
                    if (userId) {
                        getDetails(userId, '{{ $module_type }}');
                    }
                }
            }, 100);
        }

        // Attach events
        function attachRowEvents() {
            $('.all-product-userValue-row').off('click').on('click', function () {
                const id = $(this).data('id');
                getDetails(id, '{{ $module_type }}');
                $('.all-product-userValue-row').removeClass('table-active');
                $(this).addClass('table-active');
            });

            $('.delete-user-btn').off('click').on('click', function (e) {
                e.stopPropagation();
                showDeleteModal($(this).data('id'), $(this).data('username'));
            });
        }

        // Auto-select first row
        function selectFirstRowIfNeeded() {
            const first = $('.all-product-userValue-row').first();
            if (first.length && !$('.tab-pane.active').children().length) {
                first.addClass('table-active');
                getDetails(first.data('id'), '{{ $module_type }}');
            }
        }

        // Delete modal
        let deleteUserId = null;
        function showDeleteModal(id, username) {
            deleteUserId = id;
            $('#deleteUsername').text(username);
            $('#deleteUserModal').modal('show');
        }

        $(document).on('click', '#confirmDeleteBtn', function (e) {
            e.preventDefault(); // Prevent any default behavior
            if (!deleteUserId) return;

            const url = `{{ route('admin.users.delete', ['type' => $module_type, 'id' => ':id']) }}`.replace(':id', deleteUserId);

            $.ajax({
                url: url,
                type: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function (res) {
                    $('#deleteUserModal').modal('hide');

                    if (res.success) {
                        Botble.showSuccess(res.msg || 'User deleted successfully');

                        // Remove row smoothly
                        const $row = $(`tr[data-id="${deleteUserId}"]`);
                        $row.fadeOut(300, function () {
                            $(this).remove();

                            // If no rows left, reload list
                            if ($('.all-product-userValue-row').length === 0) {
                               reloadUserList($('#all_search_form').serialize());
                            }
                            // If deleted row was active, select first remaining
                            else if ($row.hasClass('table-active')) {
                                selectFirstRowIfNeeded();
                            }
                        });

                        // Clear details pane if deleted user was active
                        if ($row.hasClass('table-active')) {
                            $('.tab-content .tab-pane').empty();
                            $('#total-amount, #paid-amount, #pending-amount').text('');
                        }

                    } else {
                        Botble.showError(res.msg || 'Failed to delete user');
                    }
                },
                error: function (xhr) {
                    $('#deleteUserModal').modal('hide');
                    Botble.showError(xhr.responseJSON?.msg || 'Server error');
                }
            });
        });

        // Search / Entries
        // $('#all_entries').on('change', () => $('#all_search_form').submit());
        // $('#all_search').on('keypress', e => { if (e.key === 'Enter') { e.preventDefault(); $('#all_search_form').submit(); } });
        // $('#all_search_form').on('submit', e => { e.preventDefault(); reloadUserList(); });
           // Search functionality
            $('#all_search').on('input', function() {
                reloadUserList($('#all_search_form').serialize());
            });

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


        // Tab content loader
        function loadTabContent(userId, userType, tabId) {
            $('#section_loader').show();
            const base = `{{ url('admin/users') }}/${userType}`;
            let url = '';
            if (tabId === 'overview-tab') url = `${base}/${userId}/overview`;
            else if (tabId === 'purchase-tab') url = `${base}/${userId}/purchases`;
            else if (tabId === 'order-tab') url = `${base}/${userId}/orders`;
            else if (tabId === 'timeline-tab') url = `${base}/${userId}/timeline`;

            $.get(url, response => {
                $('#' + tabId).html(response.html);

                if (tabId === 'overview-tab') {
                    // Show Name
                    if (userType !== 'admin') {
                        $('#usershowname').html(
                            (response.user.first_name ?? '') + ' ' +
                            (response.user.last_name ?? '') + ' (' +
                            (response.user.company_name ?? '') + ')'
                        );
                        $('#total-amount').text(response.TotalAmount);
                        $('#pending-amount').text(response.PendingAmount);
                        $('#paid-amount').text(response.ComplateAmount);
                    } else {
                        $('#usershowname').html(
                            (response.user.first_name ?? '') + ' ' +
                            (response.user.last_name ?? '')
                        );
                    }
                    var UserStatus = '';
                    if(userType !== 'customer'){
                        UserStatus = response.user.status;
                    }else{
                        UserStatus = response.user.status.value;
                    }
                    
                    if (UserStatus === 'activated') {
                        $('#user_status_show').html(
                            '<span class="badge bg-success">Active</span>'
                        );
                    } else {
                        $('#user_status_show').html(
                            '<span class="badge bg-danger" style="background-color: #fae4e8 !important;">Inactive</span>'
                        );
                    }

                    // Show ID
                    $('#usershowid').html('#' + (response.user.id ?? ''));
                }

                $('#section_loader').hide();
            }).fail(xhr => {
                Botble.showError(xhr.responseJSON?.message || 'Failed to load');
                $('#section_loader').hide();
            });

        }

        function getDetails(userId, userType) {
            $('.tab-content .tab-pane').empty();

            // Get currently active tab or default to overview-tab
            let activeTab = $('.custom-tab .nav-link.active').data('tab') || 'overview-tab';
            loadTabContent(userId, userType, activeTab);

            $('.custom-tab .nav-link').off('click').on('click', function (e) {
                e.preventDefault();
                const tab = $(this).data('tab');
                $('.custom-tab .nav-link').removeClass('active');
                $(this).addClass('active');
                $('.tab-pane').removeClass('show active');
                $('#' + tab).addClass('show active');
                loadTabContent(userId, userType, tab);
            });
        }

        /* --------------------------------------------------------------
           SINGLE DOCUMENT TYPE → FILE INPUT (Dynamic Label + Show/Hide)
           -------------------------------------------------------------- */
        $(document).ready(function () {
            // Initialize Select2
            const $docSelect = $('#user_document_type_id');
            $docSelect.select2({
                dropdownParent: $('#userModal'),
                placeholder: 'Select Document Type...',
                allowClear: true,
                ajax: {
                    url: '{{ route("admin.users.documents.type.list", ["type" => $module_type]) }}',
                    dataType: 'json',
                    delay: 250,
                    data: params => ({ q: params.term || '' }),
                    processResults: data => ({
                        results: data.data.map(item => ({ id: item.id, text: item.name }))
                    }),
                    cache: true
                }
            });

            // On change: show file input + update label + reset previous file
            $docSelect.on('change', function () {
                const selected = $(this).select2('data')[0];
                const $fileContainer = $('#document-file-container');
                const $fileInput = $('#user_document_file');
                const $label = $('#file-label');
                const $currentFileInfo = $('#current-file-info');

                // Always reset file input and info on change
                $fileInput.val('');
                $currentFileInfo.empty();

                if (selected && selected.id) {
                    const docName = selected.text;
                    $label.text(`Upload ${docName}`);
                    $fileContainer.show();
                    $fileInput.prop('required', true);
                } else {
                    $label.text('Upload Document');
                    $fileContainer.hide();
                    $fileInput.prop('required', false);
                }
            });

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

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


        });

        /* --------------------------------------------------------------
           POPULATE ON EDIT (Single Document)
           -------------------------------------------------------------- */
        function populateDocument(doc) {
            if (!doc) {
                $('#user_document_type_id').val(null).trigger('change');
                return;
            }

            const $select = $('#user_document_type_id');
            const option = new Option(doc.type_name, doc.document_type_id, true, true);
            $select.append(option).trigger('change');

            $('#existing_document_id').val(doc.id);
            $('#existing_file_path').val(doc.file_path);

            $('#current-file-info').html(`
                                                        <small class="text-success">
                                                            Current: <a href="${doc.file_path}" target="_blank">${doc.file_name}</a>
                                                        </small>
                                                    `);

            // File is optional on edit (replace only)
            $('#user_document_file').prop('required', false);
        }
        // Init
        $(function () {
            attachRowEvents();
            selectFirstContact();
        });

        $('#user_role').select2({
            dropdownParent: $('#userModal'),
            placeholder: 'Select Role...',
            allowClear: true,
            ajax: {
                url: UseroleList,
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        q: params.term || ''
                    };
                },
                processResults: function (data) {
                    return {
                        results: data.data.map(function (country) {
                            return {
                                id: country.id,
                                text: country.name
                            };
                        })
                    };
                },
                cache: true
            }
        });
      $(document).ready(function () {
      
          @if ($module_type !== 'vendor')
            $('#user_country').select2({
            dropdownParent: $('#userModal'),
            placeholder: 'Select country...',
            allowClear: true,
            ajax: {
                url: Countrylist,
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        q: params.term || ''
                    };
                },
                processResults: function (data) {
                    return {
                        results: data.data.map(function (country) {
                            return {
                                id: country.id,
                                text: country.name
                            };
                        })
                    };
                },
                cache: true
            }
        });
        // Initialize Select2 for state dropdown
        $('#user_state').select2({
            dropdownParent: $('#userModal'),
            placeholder: 'Select state...'
        });
        // Initialize Select2 for city dropdown
        $('#user_city').select2({
            dropdownParent: $('#userModal'),
            placeholder: 'Select city...'
        });
        // Country change event
        $('#user_country').on('change', function () {
            var countryId = $(this).val();
            loaduserStates(countryId);
            $('#user_city').empty().append('<option value="">Select city...</option>');
        });
        $('#user_state').on('change', function () {
            var stateId = $(this).val();
            var countryId = $('#user_country').val();
            loaduserCities(stateId, countryId);
        });
        @endif
    });
        function loaduserStates(countryId) {
            return new Promise((resolve) => {
                if (!countryId) {
                    $('#user_state').empty().append('<option value="">Select state...</option>');
                    resolve();
                    return;
                }

                $.ajax({
                    url: Statelist,
                    method: 'GET',
                    data: { country_id: countryId },
                    success: function (response) {
                        $('#user_state').empty().append('<option value="">Select state...</option>');
                        if (response.data && response.data.length > 0) {
                             
                            $.each(response.data, function (index, state) {
                                $('#user_state').append(`<option value="${state.id}">${state.name}</option>`);
                            });
                        }
                        resolve();
                    },
                    error: () => {
                        $('#user_state').empty().append('<option value="">Error loading states</option>');
                        resolve();
                    }
                });
            });
        }

        function loaduserCities(stateId, countryId) {
            return new Promise((resolve) => {
                if (!stateId) {
                    $('#user_city').empty().append('<option value="">Select city...</option>');
                    resolve();
                    return;
                }

                $.ajax({
                    url: Citylist,
                    method: 'GET',
                    data: { state_id: stateId, country_id: countryId },
                    success: function (response) {
                        $('#user_city').empty().append('<option value="">Select city...</option>');

                        
                        if (response.data && response.data.length > 0) {
                            $.each(response.data, function (index, city) {
                                $('#user_city').append(`<option value="${city.id}">${city.name}</option>`);
                            });
                        }
                        resolve();
                    },
                    error: () => {
                        $('#user_city').empty().append('<option value="">Error loading cities</option>');
                        resolve();
                    }
                });
            });
        }
        if ('{{ $module_type }}' === 'customer')
        {        
            function toggleWholesalerFields() {
                const customerType = document.getElementById('customer_type').value;
                const wholesalerFields = document.querySelectorAll('.wholesaler-field');
                
                wholesalerFields.forEach(field => {
                    if (customerType === '1') {
                        field.style.display = 'block';
                    } else {
                        field.style.display = 'none';
                    }
                });
            }

            // Initialize on page load
            document.addEventListener('DOMContentLoaded', function() {
                toggleWholesalerFields();
            });
        }
    </script>
@endsection