@extends(EcommerceHelper::viewPath('customers.master'))

@section('title', __('Profile'))

@section('content')

    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        /* Base Styles */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f8f9fa;
        }
        
        .container-fluid {
            padding-left: 15px;
            padding-right: 15px;
        }

        /* Profile Layout */
        .new-profile-main {
            display: flex;
            gap: 24px;
            margin-top: 24px;
        }
        
        .new-profile-left-column {
            flex: 0 0 30%;
            max-width: 30%;
        }
        
        .new-profile-right-column {
            flex: 0 0 70%;
            max-width: 70%;
        }

        /* Profile Card */
        .new-profile-card {
            border-radius: 12px;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            padding: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            width: 100%;
            max-width: 400px;
            position: relative;
            background-color: white;
        }
        
        .new-profile-photo-container {
            position: relative;
            width: 220px;
            height: 220px;
        }
        
        .new-profile-photo {
            width: 100%;
            height: 100%;
            border-radius: 15px;
            border: 4px solid #cac6c6;
            overflow: hidden;
            background-color: #cac6c6;
        }
        
        .new-profile-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .profile-title {
            font-size: 20px;
            font-weight: 600;
            text-align: center;
        }
        
        .profile-stats {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #ccc;
            font-size: 14px;
            margin-bottom: 20px;
        }
        
        .trophy-icon {
            color: #f5d547;
            font-size: 18px;
        }
        
        .profile-info {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .profile-info-item {
            display: flex;
            justify-content: space-between;
            border-radius: 8px;
        }
        
        .info-label {
            color: #00000099;
            font-size: 14px;
        }
        
        .info-value {
            color: #000;
            font-size: 15px;
            font-weight: 500;
        }

        /* Form Section */
        .new-profile-forms {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.08);
            padding: 0;
            /* max-height: 680px; */
            /* overflow-y: auto; */
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        
        .new-profile-forms::-webkit-scrollbar {
            display: none;
        }
        
        .new-profile-form-tabs {
            display: flex;
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
            position: sticky;
            top: 0;
            background: white;
            z-index: 10;
        }
        
        .new-profile-form-tab {
            padding: 16px 24px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.6);
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
            white-space: nowrap;
            font-size: 14px;
        }
        
        .new-profile-form-tab.active {
            color: var(--primary-color);
            border-bottom: 2px solid var(--primary-color);
        }
        
        .new-profile-form-content {
            padding: 24px;
        }
        
        .new-profile-form-panel {
            display: none;
        }
        
        .new-profile-form-panel.active {
            display: block;
        }
        
        .bb-customer-card {
            margin-bottom: 0;
        }
        
        .bb-customer-card-header {
            margin-bottom: 20px;
        }

        /* Address Section - Responsive Grid Layout */
        .address-container {
            position: relative;
            overflow: hidden;
        }
        
        .address-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e9ecef;
        }
        
        .address-header h4 {
            font-size: 22px;
            font-weight: 700;
            margin: 0;
            color: #2d3748;
            display: flex;
            align-items: center;
        }
        
        .address-header h4 i {
            margin-right: 10px;
            color: rgb(0 0 0);
        }
        
        /* Address Grid Layout */
        .address-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 20px;
        }
        
        .address-card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            border: 1px solid #e9ecef;
            display: flex;
            flex-direction: column;
            padding: 16px;
            height: 100%;
            overflow: auto;
        }
        
        .address-card:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
            transform: translateY(-2px);
        }
        
        .address-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .address-header-info {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 8px;
        }
        
        .address-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #fdecec;
            color: #dc3545 !important;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 16px;
            flex-shrink: 0;
        }
        
        .address-card.default .address-avatar {
            /* background: var(--primary-color); */
            color: white;
        }
        
        .address-name {
            font-weight: 600;
            font-size: 16px;
            margin-bottom: 2px;
        }
        
        .address-phone {
            font-size: 14px;
            color: #6c757d;
            display: flex;
            align-items: center;
        }
        
        .address-phone i {
            margin-right: 5px;
            font-size: 12px;
        }
        
        .address-badge {
            background-color: #fdecec;
            color: #dc3545 !important;
            font-size: 11px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 4px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-left: auto;
        }
        
        .address-details {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }
        
        .address-line {
            font-size: 14px;
            color: #4a5568;
            display: flex;
            align-items: center;
            line-height: 1.4;
            margin-bottom: 4px;
            flex-basis: 100%;
        }
        
        .address-line i {
            width: 16px;
            margin-right: 8px;
            color: #718096;
            font-size: 12px;
            flex-shrink: 0;
        }
        
        .address-actions {
            display: flex;
            gap: 8px;
            margin-left: auto;
            width: max-content;
        }
        
        .btn-edit,
        .btn-delete {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 500;
            transition: all 0.2s;
            cursor: pointer;
            border: none;
            white-space: nowrap;
            flex: 1;
        }
        
        .btn-edit {
            background: #e6f2ff;
            color: var(--primary-color);
        }
        
        .btn-edit:hover {
            background: var(--primary-color);
            color: white;
        }
        
        .btn-delete {
            background: #fff5f5;
            color: #e53e3e;
        }
        
        .btn-delete:hover {
            background: #e53e3e;
            color: white;
        }
        
        .btn-edit i,
        .btn-delete i {
            font-size: 12px;
        }
        
        .btn-add-address {
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 10px 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            white-space: nowrap;
        }
        
        .btn-add-address:hover {
            background: var(--primary-color);
            transform: translateY(-1px);
                /* background-color: var(--bb-btn-hover-bg); */
            text-decoration: none;
        }
        
        .btn-add-address i {
            margin-right: 8px;
        }
        
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px dashed #dee2e6;
            grid-column: 1 / -1;
        }
        
        .empty-state i {
            font-size: 48px;
            color: #adb5bd;
            margin-bottom: 16px;
        }
        
        .empty-state h5 {
            margin-bottom: 8px;
            color: #495057;
            font-size: 18px;
            font-weight: 600;
        }
        
        .empty-state p {
            margin-bottom: 20px;
            color: #6c757d;
            font-size: 14px;
        }
        
        textarea.form-control,
        .form-control {
            background: #fff;
            border: 0;
            border-radius: 7px;
            box-shadow: none;
            color: #98a2b3;
            font-size: 14px;
            height: 40px;
            line-height: 20px;
            padding-left: 5px;
            padding-right: 5px;
            padding: 12px !important;
            width: 100%;
            border: 1px solid #00000030;
        }
        
        .new-profile-btn {
            background-color: #dc3545;
            color: #ffffff !important;
            padding: 5px 12px;
            /* color: #dc3545 !important; */
            border-radius: 6px;
            font-weight: 600;
            display: inline-block;
            transition: all 0.3s ease;
            text-decoration: none;
            border: none;
        }
        
        .new-profile-btn:hover {
            background-color: #fdecec;
            color: #dc3545 !important;
        }
        
        /* Loading spinner */
        .spinner-border-sm {
            width: 1rem;
            height: 1rem;
            border-width: 0.15em;
        }
        
        /* Notification styles */
        .notification-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
        }
        
        .notification {
            min-width: 300px;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 4px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            animation: slideIn 0.3s ease-out;
        }
        
        .notification.success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .notification.error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .notification-icon {
            margin-right: 10px;
            font-size: 18px;
        }
        
        .notification-close {
            margin-left: auto;
            cursor: pointer;
            font-weight: bold;
        }
        
        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        
        /* Select2 Custom Styles */
        .select2-container--default .select2-selection--single {
            height: 40px;
            border: 1px solid #00000030;
            border-radius: 7px;
            align-items: center;
        }
        
        .select2-container--default .select2-selection--single .select2-selection__clear {
            cursor: pointer;
            float: right;
            font-weight: bold;
            height: 26px;
            margin-right: 0px;
            padding-right: 0px;
        }
        
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            padding-left: 5px;
            line-height: 40px;
        }
        
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 38px;
        }
        
        .select2-container--default .select2-selection--multiple {
            min-height: 40px;
            border: 1px solid #00000030;
            border-radius: 7px;
        }
        
        .select2-container--default .select2-selection--multiple .select2-selection__rendered {
            padding: 5px;
        }
        
        .select2-dropdown {
            border: 1px solid #00000030;
            border-radius: 7px;
        }
        
        .select2-container--default.select2-container--focus .select2-selection--multiple,
        .select2-container--default.select2-container--focus .select2-selection--single {
            border: 1px solid #0a66c2;
            outline: 0;
        }
        
        /* Modal Styles */
        .modal-header {
            border-bottom: 1px solid #eaeaea;
            padding: 15px 20px;
        }
        
        .modal-title {
            font-size: 18px;
            font-weight: 600;
        }
        
        .modal-body {
            padding: 20px;
        }
        
        .modal-footer {
            border-top: 1px solid #eaeaea;
            padding: 15px 20px;
        }
        
        .form-label {
            font-weight: 500;
            margin-bottom: 8px;
        }
        
        .form-label.required::after {
            content: " *";
            color: #dc3545;
        }
        
        .btn-primary {
            background-color: #0a66c2;
            border-color: #0a66c2;
        }
        
        .btn-primary:hover {
            background-color: #0851a0;
            border-color: #0851a0;
        }
        
        /* Responsive Design */
        
        /* Extra Large Desktops (1400px and up) */
        @media (min-width: 1400px) {
            .new-profile-main {
                gap: 30px;
            }
            
            .address-list {
                grid-template-columns: repeat(auto-fill, 1fr);
                gap: 24px;
            }
            
            .new-profile-card {
                max-width: 450px;
                padding: 35px;
            }
            
            .new-profile-photo-container {
                width: 240px;
                height: 240px;
            }
        }
        
        /* Large Desktops (1200px to 1399px) */
        @media (max-width: 1399px) and (min-width: 1200px) {
            .new-profile-main {
                gap: 24px;
            }
            
            .address-list {
                grid-template-columns: repeat(auto-fill, 1fr);
                gap: 20px;
            }
            
            .new-profile-card {
                max-width: 400px;
            }
        }
        
        /* Medium Desktops (992px to 1199px) */
        @media (max-width: 1199px) and (min-width: 992px) {
            .new-profile-main {
                gap: 20px;
            }
            
            .new-profile-left-column {
                flex: 0 0 35%;
                max-width: 35%;
            }
            
            .new-profile-right-column {
                flex: 0 0 65%;
                max-width: 65%;
            }
            
            .address-list {
                grid-template-columns: repeat(auto-fill, 1fr);
                gap: 20px;
            }
            
            .new-profile-card {
                max-width: 380px;
                padding: 25px;
            }
            
            .new-profile-photo-container {
                width: 200px;
                height: 200px;
            }
        }
        
        /* Tablets (768px to 991px) */
        @media (max-width: 991px) and (min-width: 768px) {
            .new-profile-main {
                flex-direction: column;
                gap: 20px;
            }
            
            .new-profile-left-column,
            .new-profile-right-column {
                flex: 1;
                max-width: 100%;
            }
            
            .new-profile-card {
                max-width: 500px;
                margin: 0 auto;
                padding: 25px;
            }
            
            .new-profile-photo-container {
                width: 180px;
                height: 180px;
            }
            
            .profile-title {
                font-size: 18px;
            }
            
            .address-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
            
            .btn-add-address {
                width: 100%;
                justify-content: center;
            }
            
            .new-profile-form-tabs {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            
            .new-profile-form-tab {
                padding: 12px 16px;
                font-size: 13px;
            }
            
            .address-list {
                grid-template-columns: repeat(auto-fill, 1fr);
                gap: 16px;
            }
            
            .address-card {
                padding: 14px;
            }
            
            .address-actions {
                flex-direction: column;
            }
            
            .btn-edit,
            .btn-delete {
                width: 100%;
            }
        }
         @media (max-width: 798px) {
            .new-profile-forms{
                margin-top: 15px
            }
         }
        /* Large Phones (576px to 767px) */
        @media (max-width: 767px) and (min-width: 576px) {
            .new-profile-main {
                flex-direction: column;
                gap: 16px;
            }
            
            .new-profile-left-column,
            .new-profile-right-column {
                flex: 1;
                max-width: 100%;
            }
            
            .new-profile-card {
                max-width: 100%;
                padding: 20px;
            }
            
            .new-profile-photo-container {
                width: 160px;
                height: 160px;
            }
            
            .profile-title {
                font-size: 18px;
            }
            
            .info-label,
            .info-value {
                font-size: 13px;
            }
            
            .address-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
            
            .address-header h4 {
                font-size: 20px;
            }
            
            .btn-add-address {
                width: 100%;
                justify-content: center;
            }
            
            .new-profile-form-tabs {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            
            .new-profile-form-tab {
                padding: 10px 14px;
                font-size: 12px;
            }
            
            .new-profile-form-content {
                padding: 16px;
            }
            
            .modal-dialog {
                margin: 10px;
            }
            
            .address-list {
                grid-template-columns: 1fr;
                gap: 16px;
            }
            
            .address-card {
                padding: 14px;
            }
            
            .address-actions {
                flex-direction: row;
            }
        }
        
        /* Small Phones (up to 575px) */
        @media (max-width: 575px) {
            .new-profile-main {
                flex-direction: column;
                gap: 16px;
                margin-top: 16px;
            }
            
            .new-profile-left-column,
            .new-profile-right-column {
                flex: 1;
                max-width: 100%;
            }
            
            .new-profile-card {
                max-width: 100%;
                padding: 16px;
            }
            
            .new-profile-photo-container {
                width: 140px;
                height: 140px;
            }
            
            .profile-title {
                font-size: 16px;
            }
            
            .info-label,
            .info-value {
                font-size: 13px;
            }
            
            .address-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
            
            .address-header h4 {
                font-size: 18px;
            }
            
            .btn-add-address {
                width: 100%;
                justify-content: center;
                padding: 10px 16px;
                font-size: 14px;
            }
            
            .new-profile-form-tabs {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            
            .new-profile-form-tab {
                padding: 8px 12px;
                font-size: 11px;
            }
            
            .new-profile-form-content {
                padding: 12px;
            }
            
            .modal-dialog {
                margin: 5px;
            }
            
            .modal-header,
            .modal-footer {
                padding: 12px 15px;
            }
            
            .modal-body {
                padding: 15px;
            }
            
            .form-label {
                font-size: 13px;
            }
            
            .form-control {
                font-size: 13px;
                height: 36px;
            }
            
            .address-list {
                grid-template-columns: 1fr;
                gap: 12px;
            }
            
            .address-card {
                padding: 12px;
            }
            
            .address-header-info {
                margin-bottom: 6px;
            }
            
            .address-name {
                font-size: 15px;
            }
            
            .address-phone {
                font-size: 13px;
            }
            
            .address-avatar {
                width: 36px;
                height: 36px;
                font-size: 14px;
            }
            
            .address-line {
                font-size: 13px;
            }
            
            .address-actions {
                flex-direction: column;
                gap: 8px;
            }
            
            .btn-edit,
            .btn-delete {
                padding: 8px 10px;
                font-size: 12px;
            }
            
            .notification {
                min-width: 250px;
                padding: 12px;
                font-size: 13px;
            }
        }
        
        /* Extra Small Phones (up to 390px) */
        @media (max-width: 390px) {
            .new-profile-photo-container {
                width: 120px;
                height: 120px;
            }
            
            .new-profile-card {
                padding: 12px;
            }
            
            .profile-title {
                font-size: 14px;
            }
            
            .info-label,
            .info-value {
                font-size: 12px;
            }
            
            .new-profile-form-tab {
                padding: 6px 10px;
                font-size: 10px;
            }
            
            .address-header h4 {
                font-size: 16px;
            }
            
            .btn-add-address {
                font-size: 12px;
                padding: 8px 12px;
            }
            
            .address-card {
                padding: 10px;
            }
            
            .address-line {
                font-size: 12px;
            }
            
            .address-name {
                font-size: 14px;
            }
            
            .address-phone {
                font-size: 12px;
            }
            
            .address-avatar {
                width: 32px;
                height: 32px;
                font-size: 12px;
            }
            
            .btn-edit,
            .btn-delete {
                font-size: 11px;
                padding: 6px 8px;
            }
            .bb-profile-content{
                padding: 0px !important;
            }
            .container-fluid{
                padding: 5px !important;
            }
        }
        .icon-bg {
            width: 40px;
            height: 40px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%; 
            background-image: url("{{ asset('assets/images/crm-bar-chart-DMcp-EAU.png') }}");
            background-size: cover;
            background-position: center;
            margin-right: 8px;
        }

        .icon-bg i {
            color: #fff; 
            font-size: 18px;
        }
        .image-profile-card {
            width: 100%;
            background: #fff;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.08);

        }

        /* Header */
        .card-header {
            background: #0e1e30;
            color: white;
            text-align: center;
            padding: 30px 20px 20px;
            position: relative;
        }

        .card-header .bg-blur {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.25;
        }

        .profile-image {
            width: 110px;
            height: 110px;
            border-radius: 50%;
            overflow: hidden;
            border: 5px solid white;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        .profile-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .profile-name {
            font-size: 20px;
            font-weight: 700;
            z-index: 2;
            position: relative;
        }

        .profile-title {
            margin: 0;
            font-size: 14px;
            opacity: 0.7;
            position: relative;
            z-index: 2;
        }

        /* Tabs */
        .card-tabs {
            display: flex;
            justify-content: space-around;
            background: #eef4f5;
            padding: 12px;
            font-size: 14px;
            font-weight: 600;
        }

        .card-tabs span {
            color: #777;
            cursor: pointer;
        }

        .card-tabs .active {
            color: var(--primary-color);
            border-bottom: 2px solid  var(--primary-color);
        }

        /* Content */
        .card-content {
            padding: 20px;
            color: #444;
        }

        .card-content h4 {
            margin-bottom: 10px;
        }

        .profile-info-item {
            margin-bottom: 12px;
        }

        .info-label {
            font-size: 13px;
            color: #555;
            font-weight: 600;
        }

        .info-value {
            font-size: 14px;
            color: #111;
            font-weight: 500;
        }
       .address-section-new {
            /* margin-top: 20px; */
            background: #ffffff;
            border-radius: 12px;
            padding: 18px 20px;
            box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
            border: 1px solid #e8e8e8;
        }

        .address-header-new {
            margin-bottom: 12px;
            border-bottom: 1px solid #f0f0f0;
            padding-bottom: 6px;
        }

        .address-title-new {
            font-weight: 700;
            font-size: 15px;
            color: #333;
        }

        .address-body-new {
            margin-top: 8px;
        }

        .address-line-new {
            font-size: 14px;
            color: #555;
            margin-bottom: 6px;
        }

        .address-line-new:last-child {
            margin-bottom: 0;
        }

        .address-line {
            margin: 3px 0;
            font-size: 14px;
            color: #555;
            line-height: 1.4;
        }
        .new-card-content {
            padding: 15px 20px;
        }

        .info-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            padding: 8px 0;
            border-bottom: 1px dashed #e0e0e0;
        }

        .info-row:last-child {
            border-bottom: none;
        }

        .info-label {
            font-weight: 600;
            color: #333;
            font-size: 14px;
        }

        .info-value {
            color: #555;
            font-size: 14px;
            text-align: right;
            max-width: 55%;
            word-break: break-word;
        }


    </style>
@php
$defaultAddress = $customer->addresses()->where('is_default', 1)->first();
@endphp
    <!-- Notification container -->
    <div class="notification-container" id="notification-container"></div>

    <div class="container-fluid">
        <div class="row">
            <!-- Left Column -->
            <div class="col-12 col-lg-4 new-profile-left-column">
                <!-- Profile Card -->
                {{-- <div class="new-profile-card">
                    <div class="new-profile-photo-container">
                        <div class="new-profile-photo">
                            <img src="https://images.pexels.com/photos/874158/pexels-photo-874158.jpeg?cs=srgb&dl=pexels-olly-874158.jpg&fm=jpg"
                                alt="Profile">
                        </div>
                    </div>
                    <div>
                        <span class="info-label">Person's Name</span>
                        <div class="profile-title">{{ $customer->name }}</div>
                    </div>
                    <div style="border-bottom: 1px solid #00000099;width: inherit;"></div>
                    <div class="profile-info">
                        <div class="profile-info-item">
                            <span class="info-label">Phone number </span>
                            <span class="info-value">{{ $customer->phone }}</span>
                        </div>
                        <div class="profile-info-item">
                            <span class="info-label">Email </span>
                            <span class="info-value">{{ $customer->email }}</span>
                        </div>
                    </div>
                </div> --}}
                <div class="profile-wrapper">
                    <div class="image-profile-card">

                        <!-- Header Section -->
                        <div class="card-header">
                            <img class="bg-blur" src="{{ asset('assets/images/defaultuser.jpg') }}" alt="">
                          <p class="profile-name">{{ ucwords($customer->name) }}</p>
                            <p class="profile-title mb-2">{{ ucwords($customer->company_name) }}</p>
                            <div class="profile-image">
                                <img src="{{ asset('assets/images/defaultuser.jpg') }}" alt="Profile">
                            </div>

                            
                        </div>

                        <!-- Tabs -->
                        <div class="card-tabs">
                            <span class="active">About</span>
                        </div>

                       <div class="card-content new-card-content">
                                <div class="info-row">
                                    <span class="info-label">Email:</span>
                                    <span class="info-value">{{ $customer->email }}</span>
                                </div>

                                <div class="info-row">
                                    <span class="info-label">Phone:</span>
                                    <span class="info-value">{{ $customer->phone }}</span>
                                </div>

                                <div class="info-row">
                                    <span class="info-label">Company Website:</span>
                                    <span class="info-value">{{ $customer->company_website ?? '-' }}</span>
                                </div>

                                <div class="info-row">
                                    <span class="info-label">Company ABN Code:</span>
                                    <span class="info-value">{{ $customer->company_tax_code ?? '-' }}</span>
                                </div>
                            </div>

                   @if ($defaultAddress)
                        <div class="address-section-new">
                            
                            <div class="address-header-new">
                                <span class="address-title-new">Default Address</span>
                            </div>

                            <div class="address-body-new">
                                <p class="address-line-new">{{ ucwords($defaultAddress->address) }}</p>
                                <p class="address-line-new">
                                    {{ ucwords($defaultAddress->city_name) }},
                                    {{ ucwords($defaultAddress->state_name) }}
                                </p>
                                <p class="address-line-new">
                                    {{ ucwords($defaultAddress->country_name) }} - {{ $defaultAddress->zip_code }}
                                </p>
                            </div>

                        </div>
                        @endif


                    </div>
                </div>

            </div>

            <!-- Right Column -->
            <div class="col-12 col-lg-8 new-profile-right-column">
                <!-- Forms Section -->
                <div class="new-profile-forms">
                    <div class="new-profile-form-tabs">
                        <div class="new-profile-form-tab active" data-tab="profile">
                            <i class="fas fa-user"></i> {{ __('Profile Information') }}
                        </div>
                        <div class="new-profile-form-tab" data-tab="password">
                            <i class="fas fa-lock"></i> {{ __('Change Password') }}
                        </div>
                        <div class="new-profile-form-tab" data-tab="addresses">
                            <i class="fas fa-map-marked-alt"></i> {{ __('Addresses') }}
                        </div>
                    </div>
                    <div class="new-profile-form-content">
                        <!-- Profile Information Tab -->
                        <div class="new-profile-form-panel active" id="profile-panel">
                            <div class="bb-customer-card profile-card">
                                <div class="bb-customer-card-body">
                                    <div id="customer-profile-data">
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label for="first_name" class="form-label">{{ __('First Name') }}</label>
                                                <input type="text" class="form-control" id="first_name" name="first_name"
                                                    value="{{ $customer->first_name ?? '' }}"
                                                    placeholder="{{ __('Enter your first name') }}" required>
                                            </div>
                                            <div class="col-md-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"
                                                    value="{{ $customer->last_name ?? '' }}"
                                                    placeholder="{{ __('Enter your last name') }}" required>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label for="username" class="form-label">{{ __('Username') }}</label>
                                                <input type="text" class="form-control" id="username" name="username"
                                                    value="{{ $customer->username ?? '' }}"
                                                    placeholder="{{ __('Enter your username') }}" required>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label for="email" class="form-label">{{ __('Email') }}</label>
                                                <input type="email" class="form-control" id="email" name="email"
                                                    value="{{ $customer->email ?? '' }}"
                                                    placeholder="{{ __('Enter your email address') }}" required>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label for="phone" class="form-label">{{ __('Phone Number') }}</label>
                                                <input type="tel" class="form-control" id="phone" name="phone"
                                                    value="{{ $customer->phone ?? '' }}"
                                                    placeholder="{{ __('Enter your phone number') }}" required>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label for="dob" class="form-label">{{ __('Date of Birth') }}</label>
                                                <input type="date" class="form-control" id="dob" name="dob"
                                                    value="{{ isset($customer->dob) ? \Carbon\Carbon::parse($customer->dob)->format('Y-m-d') : '' }}"
                                                    placeholder="{{ __('Select your date of birth') }}">
                                            </div>
                                        </div>
                                        {{-- <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label for="address_country" class="form-label">{{ __('Country') }}</label>
                                                <select class="form-select" id="address_country" name="country"
                                                    style="width: 100%;" required>
                                                    <option value="">{{ __('Select Country...') }}</option>
                                                </select>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label for="address_state" class="form-label">{{ __('State') }}</label>
                                                <select class="form-select" id="address_state" name="state"
                                                    style="width: 100%;" required>
                                                    <option value="">{{ __('Select State...') }}</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label for="address_city" class="form-label">{{ __('City') }}</label>
                                                <select class="form-select" id="address_city" name="city"
                                                    style="width: 100%;" required>
                                                    <option value="">{{ __('Select City...') }}</option>
                                                </select>
                                            </div>
                                        </div> --}}
                                        <h5 class="mt-4 mb-3">{{ __('Company Information') }}</h5>
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label for="company_name"
                                                    class="form-label">{{ __('Company Name') }}</label>
                                                <input type="text" class="form-control" id="company_name"
                                                    name="company_name" value="{{ $customer->company_name ?? '' }}"
                                                    placeholder="{{ __('Enter your company name') }}">
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label for="company_phone_no"
                                                    class="form-label">{{ __('Company Phone') }}</label>
                                                <input type="tel" class="form-control" id="company_phone_no"
                                                    name="company_phone_no" value="{{ $customer->company_phone_no ?? '' }}"
                                                    placeholder="{{ __('Enter your company phone number') }}">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label for="company_email"
                                                    class="form-label">{{ __('Company Email') }}</label>
                                                <input type="email" class="form-control" id="company_email"
                                                    name="company_email" value="{{ $customer->company_email ?? '' }}"
                                                    placeholder="{{ __('Enter your company email address') }}">
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label for="company_website"
                                                    class="form-label">{{ __('Company Website') }}</label>
                                                <input type="url" class="form-control" id="company_website"
                                                    name="company_website" value="{{ $customer->company_website ?? '' }}"
                                                    placeholder="{{ __('Enter your company website URL') }}">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-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" value="{{ $customer->company_tax_code ?? '' }}"
                                                    placeholder="{{ __('Enter your company ABN code') }}">
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label for="company_address"
                                                class="form-label">{{ __('Company Address') }}</label>
                                            <textarea class="form-control" id="company_address" name="company_address"
                                                rows="3"
                                                placeholder="{{ __('Enter your company address') }}">{{ $customer->company_address ?? '' }}</textarea>
                                        </div>
                                        <div class="mb-3 d-none">
                                            <label for="company_address_id"
                                                class="form-label">{{ __('Company Address ID') }}</label>
                                            <input type="text" class="form-control" id="company_address_id"
                                                name="company_address_id" value="{{ $customer->company_address_id ?? '' }}">
                                            <input type="text" class="form-control" id="customer_id" name="customer_id"
                                                value="{{ $customer->id ?? '' }}">
                                        </div>
                                        <div class="d-flex justify-content-end">
                                            <button type="button" class="new-profile-btn border-0" id="save-profile-btn">
                                                {{ __('Update') }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Change Password Tab -->
                        <div class="new-profile-form-panel" id="password-panel">
                            <div class="bb-customer-card password-card">
                                <div class="bb-customer-card-body">
                                    {!! $passwordForm->renderForm() !!}
                                </div>
                            </div>
                        </div>

                        <!-- Addresses Tab -->
                        <div class="new-profile-form-panel" id="addresses-panel">
                            <div class="bb-customer-card addresses-card">
                                <div class="address-container">
                                    <div class="address-header ">
                                        {{-- <h4><i class="fas fa-map-marked-alt"></i> {{ __('My Addresses') }}</h4> --}}
                                          <h4>
                                                <span class="icon-bg">
                                                    <i class="fas fa-map-marked-alt"></i>
                                                </span>
                                                {{ __('My Addresses') }}
                                            </h4>
                                        <button class="new-profile-btn" data-bs-toggle="modal"
                                            data-bs-target="#addAddressModal">
                                            <i class="fas fa-plus"></i> {{ __('Add New Address') }}
                                        </button>
                                    </div>
                                    <div class="address-list" id="address-list">
                                        @if($addresses->count() > 0)
                                            @foreach($addresses as $address)
                                                <div class="address-card {{ $address->is_default ? 'default' : '' }}"
                                                    data-id="{{ $address->id }}">
                                                    <div class="address-content">
                                                        <div class="address-header-info">
                                                            <div class="address-avatar">
                                                                {{ substr($address->name, 0, 1) }}
                                                            </div>
                                                            <div>
                                                                <div class="address-name">{{ $address->name }}</div>
                                                                <div class="address-phone">
                                                                    <i class="fas fa-phone"></i> {{ $address->phone }}
                                                                </div>
                                                                @if($address->email)
                                                                    <div class="address-phone">
                                                                        <i class="fas fa-envelope"></i>
                                                                        <span>{{ $address->email }}</span>
                                                                    </div>
                                                                @endif
                                                            </div>
                                                            @if($address->is_default)
                                                                <div class="address-badge">{{ __('Default') }}</div>
                                                                <div class="address-actions"  style="margin-left: inherit;">
                                                                    <button class="btn-edit" data-id="{{ $address->id }}">
                                                                        <i class="fas fa-edit"></i> 
                                                                    </button>
                                                                </div>
                                                            @else
                                                                <div class="address-actions">
                                                                    <button class="btn-edit" data-id="{{ $address->id }}">
                                                                        <i class="fas fa-edit"></i> 
                                                                    </button>
                                                                    <button class="btn-delete" data-id="{{ $address->id }}"
                                                                        data-name="{{ $address->name }}">
                                                                        <i class="fas fa-trash"></i> 
                                                                    </button>
                                                                </div>
                                                            @endif

                                                        </div>
                                                        <div class="address-details">
                                                            <div class="address-line">
                                                                <i class="fas fa-map-marker-alt"></i>
                                                                <p>{{ $address->address }}, {{ $address->city_name ?? '' }}, {{ $address->state_name ?? '' }},  {{ $address->country_name ?? '' }}, 
                                                                    @if($address->zip_code)
                                                                        {{ $address->zip_code }}
                                                                    @endif
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    
                                                </div>
                                            @endforeach
                                        @else
                                            <div class="empty-state">
                                                <i class="fas fa-map-marked-alt"></i>
                                                <h5>{{ __('No addresses found') }}</h5>
                                                <p>{{ __('Add your first address to get started') }}</p>
                                                <button class="btn-add-address" data-bs-toggle="modal"
                                                    data-bs-target="#addAddressModal">
                                                    <i class="fas fa-plus"></i> {{ __('Add New Address') }}
                                                </button>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Add/Edit Address Modal -->
    <div class="modal fade" id="addAddressModal" tabindex="-1" aria-labelledby="addAddressLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addAddressLabel">{{ __('Add New Address') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addressForm">
                        <input type="hidden" id="address_id" name="address_id" value="0">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="address_full_name" class="form-label required">{{ __('Full Name') }}</label>
                                <input type="text" id="address_full_name" name="address_full_name" class="form-control"
                                    placeholder="{{ __('Enter full name') }}" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="address_phone" class="form-label required">{{ __('Phone') }}</label>
                                <input type="tel" id="address_phone" name="address_phone" class="form-control"
                                    placeholder="{{ __('Enter phone number') }}" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="address_email" class="form-label">{{ __('Email') }}</label>
                                <input type="email" id="address_email" name="address_email" class="form-control"
                                    placeholder="{{ __('Enter email') }}">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="zip_code" class="form-label">{{ __('Zip Code') }}</label>
                                <input type="text" id="zip_code" name="zip_code" class="form-control"
                                    placeholder="{{ __('Enter zip code') }}">
                            </div>
                            <div class="col-12 mb-3">
                                <label for="address_line" class="form-label required">{{ __('Address') }}</label>
                                <textarea id="address_line" name="address_line" class="form-control" rows="2"
                                    placeholder="{{ __('Enter street address for this location') }}" required></textarea>
                            </div>
                            <div class="col-12 mb-3">
                                <label for="modal_address_country" class="form-label required">{{ __('Country') }}</label>
                                <select class="form-select" id="modal_address_country" name="address_country" required>
                                    <option value="">{{ __('Select Country...') }}</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="modal_address_state" class="form-label required">{{ __('State') }}</label>
                                <select class="form-select" id="modal_address_state" name="address_state" required>
                                    <option value="">{{ __('Select State...') }}</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="modal_address_city" class="form-label required">{{ __('City') }}</label>
                                <select class="form-select" id="modal_address_city" name="address_city" required>
                                    <option value="">{{ __('Select City...') }}</option>
                                </select>
                            </div>
                            <div class="col-12 mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="is_default" name="is_default"
                                        value="1">
                                    <label class="form-check-label" for="is_default">
                                        {{ __('Set as default address') }}
                                    </label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="new-profile-btn border-0"
                        data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                    <button type="button" class="new-profile-btn border-0"
                        id="saveAddressBtn">{{ __('Save Address') }}</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Address Confirmation Modal -->
    <div class="modal fade" id="deleteAddressModal" tabindex="-1" aria-labelledby="deleteAddressLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteAddressLabel">{{ __('Delete Address') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="bg-danger bg-opacity-10 rounded-circle p-3 me-3">
                            <i class="fas fa-exclamation-triangle text-danger"></i>
                        </div>
                        <div>
                            <h6 class="mb-1">{{ __('Are you sure?') }}</h6>
                            <p class="mb-0 text-muted">{{ __('This action cannot be undone.') }}</p>
                        </div>
                    </div>
                    <p>{{ __('Are you sure you want to delete the address for') }} <strong id="deleteAddressName"></strong>?</p>
                    <input type="hidden" id="delete_address_id" value="">
                </div>
                <div class="modal-footer">
                    <button type="button" class="new-profile-btn border-0"
                        data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                    <button type="button" class="new-profile-btn border-0"
                        id="confirmDeleteAddressBtn">{{ __('Delete') }}</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Add jQuery library before Select2 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        var Countrylist = '{{ route('customer.countries.list') }}';
        var Statelist = '{{ route('customer.states.list') }}';
        var Citylist = '{{ route('customer.cities.list') }}';
        var updateProfileUrl = '{{ route('customer.profile.edit.customer') }}';
        var saveAddressUrl = '{{ route('customer.address.save', ['type' => 'customer', 'id' => auth('customer')->id()]) }}';
        var deleteAddressUrl = '{{ route('customer.address.delete', ['type' => 'customer', 'id' => auth('customer')->id(), 'address_id' => 'ADDRESS_ID_PLACEHOLDER']) }}';
        var csrfToken = '{{ csrf_token() }}';
        var customerCountryId = '{{ $customerCountryId ?? '' }}';
        var customerStateId = '{{ $customerStateId ?? '' }}';
        var customerCityId = '{{ $customerCityId ?? '' }}';

        $(document).ready(function () {
            // Initialize Select2 for country dropdown
            $('#address_country').select2({
                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
            $('#address_state').select2({
                placeholder: '{{ __("Select state...") }}',
                allowClear: true
            });

            // Initialize Select2 for city dropdown
            $('#address_city').select2({
                placeholder: '{{ __("Select city...") }}',
                allowClear: true
            });

            // Initialize Select2 for modal country dropdown
            $('#modal_address_country').select2({
                dropdownParent: $('#addAddressModal'),
                placeholder: '{{ __("Select country...") }}',
                width: '100%',
                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 modal state dropdown
            $('#modal_address_state').select2({
                dropdownParent: $('#addAddressModal'),
                placeholder: '{{ __("Select state...") }}',
                width: '100%',
                allowClear: true
            });

            // Initialize Select2 for modal city dropdown
            $('#modal_address_city').select2({
                dropdownParent: $('#addAddressModal'),
                placeholder: '{{ __("Select city...") }}',
                width: '100%',
                allowClear: true
            });

            // Load initial data if customer has saved country, state, or city
            if (customerCountryId) {
                $.ajax({
                    url: Countrylist,
                    dataType: 'json',
                    data: { q: '' },
                    success: function (data) {
                        var country = data.data.find(item => item.id == customerCountryId);
                        if (country) {
                            var newOption = new Option(country.name, country.id, true, true);
                            $('#address_country').append(newOption).trigger('change');
                        }
                    }
                });
            }

            // Country change event
            $('#address_country').on('change', function () {
                var countryId = $(this).val();
                loadStates(countryId);
                $('#address_city').empty().append('<option value="">{{ __("Select city...") }}</option>');
            });

            // State change event
            $('#address_state').on('change', function () {
                var stateId = $(this).val();
                var countryId = $('#address_country').val();
                loadCities(stateId, countryId);
            });

            // Modal Country change event
            $('#modal_address_country').on('change', function () {
                var countryId = $(this).val();
                loadModalStates(countryId);
                $('#modal_address_city').empty().append('<option value="">{{ __("Select city...") }}</option>');
            });

            // Modal State change event
            $('#modal_address_state').on('change', function () {
                var stateId = $(this).val();
                var countryId = $('#modal_address_country').val();
                loadModalCities(stateId, countryId);
            });

            function loadStates(countryId) {
                return new Promise((resolve) => {
                    if (!countryId) {
                        $('#address_state').empty().append('<option value="">{{ __("Select state...") }}</option>');
                        resolve();
                        return;
                    }
                    $.ajax({
                        url: Statelist,
                        method: 'GET',
                        data: { country_id: countryId },
                        success: function (response) {
                            $('#address_state').empty().append('<option value="">{{ __("Select state...") }}</option>');
                            if (response.data && response.data.length > 0) {
                                $.each(response.data, function (index, state) {
                                    $('#address_state').append(`<option value="${state.id}">${state.name}</option>`);
                                });
                                if (customerStateId) {
                                    $('#address_state').val(customerStateId).trigger('change');
                                }
                            }
                            resolve();
                        },
                        error: function () {
                            $('#address_state').empty().append('<option value="">{{ __("Error loading states") }}</option>');
                            resolve();
                        }
                    });
                });
            }

            function loadCities(stateId, countryId) {
                return new Promise((resolve) => {
                    if (!stateId) {
                        $('#address_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) {
                            $('#address_city').empty().append('<option value="">{{ __("Select city...") }}</option>');
                            if (response.data && response.data.length > 0) {
                                $.each(response.data, function (index, city) {
                                    $('#address_city').append(`<option value="${city.id}">${city.name}</option>`);
                                });
                                if (customerCityId) {
                                    $('#address_city').val(customerCityId).trigger('change');
                                }
                            }
                            resolve();
                        },
                        error: function () {
                            $('#address_city').empty().append('<option value="">{{ __("Error loading cities") }}</option>');
                            resolve();
                        }
                    });
                });
            }

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

            function loadModalCities(stateId, countryId) {
                return new Promise((resolve) => {
                    if (!stateId) {
                        $('#modal_address_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) {
                            $('#modal_address_city').empty().append('<option value="">{{ __("Select city...") }}</option>');
                            if (response.data && response.data.length > 0) {
                                $.each(response.data, function (index, city) {
                                    $('#modal_address_city').append(`<option value="${city.id}">${city.name}</option>`);
                                });
                            }
                            resolve();
                        },
                        error: function () {
                            $('#modal_address_city').empty().append('<option value="">{{ __("Error loading cities") }}</option>');
                            resolve();
                        }
                    });
                });
            }

            // Tab switching functionality
            $('.new-profile-form-tab').on('click', function () {
                const targetTab = $(this).data('tab');
                $('.new-profile-form-tab').removeClass('active');
                $('.new-profile-form-panel').removeClass('active');
                $(this).addClass('active');
                $('#' + targetTab + '-panel').addClass('active');
            });

            // Profile update functionality
            const saveBtn = $('#save-profile-btn');
            const originalBtnText = saveBtn.html();
            saveBtn.on('click', function () {
                const formData = {
                    customer_id: $('#customer_id').val(),
                    first_name: $('#first_name').val(),
                    last_name: $('#last_name').val(),
                    username: $('#username').val(),
                    email: $('#email').val(),
                    phone: $('#phone').val(),
                    dob: $('#dob').val(),
                    country: $('#address_country').val(),
                    state: $('#address_state').val(),
                    city: $('#address_city').val(),
                    company_name: $('#company_name').val(),
                    company_phone_no: $('#company_phone_no').val(),
                    company_email: $('#company_email').val(),
                    company_website: $('#company_website').val(),
                    company_tax_code: $('#company_tax_code').val(),
                    company_address: $('#company_address').val(),
                    company_address_id: $('#company_address_id').val()
                };
                saveBtn.prop('disabled', true);
                saveBtn.html('<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>{{ __("Saving...") }}');
                $.ajax({
                    url: updateProfileUrl,
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json'
                    },
                    data: formData,
                    success: function (result) {
                        if (result.success) {
                            showNotification('{{ __("Profile updated successfully!") }}', 'success');
                            const fullName = formData.first_name + ' ' + formData.last_name;
                            $('.profile-title').text(fullName);
                            if (formData.email) {
                                $('.profile-info-item:nth-child(2) .info-value').text(formData.email);
                            }
                            if (formData.phone) {
                                $('.profile-info-item:nth-child(1) .info-value').text(formData.phone);
                            }
                        } else {
                            showNotification(result.msg || '{{ __("An error occurred while updating your profile.") }}', 'error');
                        }
                    },
                    error: function (error) {
                        console.error('Error:', error);
                        showNotification('{{ __("An error occurred while updating your profile. Please try again.") }}', 'error');
                    },
                    complete: function () {
                        saveBtn.prop('disabled', false);
                        saveBtn.html(originalBtnText);
                    }
                });
            });

            // Address functionality
            $(document).on('click', '.btn-edit', function () {
                const addressId = $(this).data('id');
                loadAddressForEdit(addressId);
                $('#addAddressLabel').text('{{ __("Edit Address") }}');
                $('#addAddressModal').modal('show');
            });

            $(document).on('click', '.btn-delete', function () {
                const addressId = $(this).data('id');
                const addressName = $(this).data('name');
                $('#delete_address_id').val(addressId);
                $('#deleteAddressName').text(addressName);
                $('#deleteAddressModal').modal('show');
            });

            $('#confirmDeleteAddressBtn').on('click', function () {
                const addressId = $('#delete_address_id').val();
                deleteAddress(addressId);
            });

            $('#saveAddressBtn').on('click', function () {
                saveAddress();
            });

            $('#addAddressModal').on('hidden.bs.modal', function () {
                $('#addressForm')[0].reset();
                $('#address_id').val(0);
                $('#addAddressLabel').text('{{ __("Add New Address") }}');
                $('#modal_address_state').empty().append('<option value="">{{ __("Select State...") }}</option>');
                $('#modal_address_city').empty().append('<option value="">{{ __("Select City...") }}</option>');
            });

            function loadAddressForEdit(addressId) {
                var baseUrl = "{{ route('customer.profile.address.edit') }}";
                var Url = baseUrl + "?address_id=" + addressId;
                $.ajax({
                    url: Url,
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json'
                    },
                    success: function (response) {
                        if (response.success) {
                            const address = response.data;
                            $('#address_id').val(address.id);
                            $('#address_full_name').val(address.name);
                            $('#address_phone').val(address.phone);
                            $('#address_email').val(address.email);
                            $('#address_line').val(address.address);
                            $('#zip_code').val(address.zip_code);
                            $('#is_default').prop('checked', address.is_default == 1);
                            loadModalCountry(address.country, address.state, address.city);
                        } else {
                            showNotification(response.message || '{{ __("Failed to load address data.") }}', 'error');
                        }
                    },
                    error: function () {
                        showNotification('{{ __("An error occurred while loading address data.") }}', 'error');
                    }
                });
            }

            function loadModalCountry(countryId, stateId, cityId) {
                $.ajax({
                    url: Countrylist,
                    dataType: 'json',
                    data: { q: '' },
                    success: function (data) {
                        const country = data.data.find(item => item.id == countryId);
                        if (country) {
                            const newOption = new Option(country.name, country.id, true, true);
                            $('#modal_address_country').append(newOption).trigger('change');
                            loadModalStates(countryId).then(() => {
                                if (stateId) {
                                    $('#modal_address_state').val(stateId).trigger('change');
                                    loadModalCities(stateId, countryId).then(() => {
                                        if (cityId) {
                                            $('#modal_address_city').val(cityId).trigger('change');
                                        }
                                    });
                                }
                            });
                        }
                    }
                });
            }

            function saveAddress() {
                const addressId = $('#address_id').val();
                const formData = {
                    address_id: addressId,
                    address_full_name: $('#address_full_name').val(),
                    address_phone: $('#address_phone').val(),
                    address_email: $('#address_email').val(),
                    address_line: $('#address_line').val(),
                    address_country: $('#modal_address_country').val(),
                    address_state: $('#modal_address_state').val(),
                    address_city: $('#modal_address_city').val(),
                    zip_code: $('#zip_code').val(),
                    is_default: $('#is_default').is(':checked') ? 1 : 0
                };
                const saveBtn = $('#saveAddressBtn');
                const originalBtnText = saveBtn.html();
                saveBtn.prop('disabled', true);
                saveBtn.html('<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>{{ __("Saving...") }}');
                $.ajax({
                    url: saveAddressUrl,
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json'
                    },
                    data: formData,
                    success: function (response) {
                        if (response.success) {
                            showNotification(response.message || '{{ __("Address saved successfully!") }}', 'success');
                            $('#addAddressModal').modal('hide');
                            setTimeout(() => {
                                window.location.reload();
                            }, 1000);
                        } else {
                            showNotification(response.message || '{{ __("An error occurred while saving the address.") }}', 'error');
                        }
                    },
                    error: function (error) {
                        console.error('Error:', error);
                        showNotification('{{ __("An error occurred while saving the address. Please try again.") }}', 'error');
                    },
                    complete: function () {
                        saveBtn.prop('disabled', false);
                        saveBtn.html(originalBtnText);
                    }
                });
            }

            function deleteAddress(addressId) {
                const url = deleteAddressUrl.replace('ADDRESS_ID_PLACEHOLDER', addressId);
                const deleteBtn = $('#confirmDeleteAddressBtn');
                const originalBtnText = deleteBtn.html();
                deleteBtn.prop('disabled', true);
                deleteBtn.html('<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>{{ __("Deleting...") }}');
                $.ajax({
                    url: url,
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json'
                    },
                    success: function (response) {
                        if (response.success) {
                            showNotification(response.message || '{{ __("Address deleted successfully!") }}', 'success');
                            $('#deleteAddressModal').modal('hide');
                            $(`.address-card[data-id="${addressId}"]`).fadeOut(300, function () {
                                $(this).remove();
                                if ($('.address-card').length === 0) {
                                    $('#address-list').html(`
                                        <div class="empty-state">
                                            <i class="fas fa-map-marked-alt"></i>
                                            <h5>{{ __("No addresses found") }}</h5>
                                            <p>{{ __("Add your first address to get started") }}</p>
                                            <button class="btn-add-address" data-bs-toggle="modal" data-bs-target="#addAddressModal">
                                                <i class="fas fa-plus"></i> {{ __("Add New Address") }}
                                            </button>
                                        </div>
                                    `);
                                }
                            });
                        } else {
                            showNotification(response.message || '{{ __("An error occurred while deleting the address.") }}', 'error');
                        }
                    },
                    error: function (error) {
                        console.error('Error:', error);
                        showNotification('{{ __("An error occurred while deleting the address. Please try again.") }}', 'error');
                    },
                    complete: function () {
                        deleteBtn.prop('disabled', false);
                        deleteBtn.html(originalBtnText);
                    }
                });
            }

            function showNotification(message, type) {
                const notification = $('<div>')
                    .addClass('notification ' + type)
                    .html(`
                        <div class="notification-icon">
                            <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'}"></i>
                        </div>
                        <div class="notification-message">${message}</div>
                        <div class="notification-close">&times;</div>
                    `);
                $('#notification-container').append(notification);
                notification.find('.notification-close').on('click', function () {
                    notification.remove();
                });
                setTimeout(() => {
                    notification.remove();
                }, 5000);
            }
        });
    </script>
@endsection