@php use App\Models\Setting; @endphp
@extends('panel.layouts.master')
@section('title', 'پروفایل-' . $user->fullName)
@section('content')
    <style>
        body {
            box-sizing: border-box;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
            width: 100%;
        }

        body {
            font-family: 'Vazirmatn', sans-serif;
            background: linear-gradient(135deg, #f1c40f 0%, #0099cc 100%);
            overflow-x: hidden;
        }

        .profile-wrapper {
            min-height: 100%;
            width: 100%;
            padding: 2rem;
            overflow-y: auto;
        }

        .profile-container {
            max-width: 1400px;
            margin: 0 auto;
        }

        /* Navbar */
        .profile-navbar {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 1rem 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .navbar-brand {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: 1.3rem;
            font-weight: 700;
            color: #667eea;
        }

        .navbar-brand .logo-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #f1c40f 0%, #0099cc 100%);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
        }

        .navbar-actions {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        .navbar-btn {
            padding: 0.75rem 1.5rem;
            border-radius: 12px;
            border: none;
            font-weight: 600;
            transition: all 0.3s ease;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .navbar-btn-primary {
            background: linear-gradient(135deg, #f1c40f 0%, #0099cc 100%);
            color: white;
            box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3);
        }

        .navbar-btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 136, 204, 0.4);
        }

        .navbar-btn-outline {
            background: white;
            color: #f1c40f;
            border: 2px solid #f1c40f;
        }

        .navbar-btn-outline:hover {
            background: #f1c40f;
            color: white;
        }

        /* Profile Header */
        .profile-header {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 24px;
            padding: 3rem;
            margin-bottom: 2rem;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }

        .profile-header::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -10%;
            width: 400px;
            height: 400px;
            background: linear-gradient(135deg, rgba(241, 196, 15, 0.5) 0%, rgba(241, 163, 15, 0.5) 100%);
            border-radius: 50%;
        }

        .profile-header::after {
            content: '';
            position: absolute;
            bottom: -30%;
            left: -5%;
            width: 300px;
            height: 300px;
            background: linear-gradient(135deg, rgba(241, 196, 15, 0.5) 0%, rgba(241, 196, 15, 0.5) 100%);
            border-radius: 50%;
        }

        .profile-header-content {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 2rem;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .profile-avatar-section {
            position: relative;
        }

        .profile-avatar {
            width: 180px;
            height: 180px;
            border-radius: 50%;
            background: linear-gradient(135deg, #f1c40f 0%, #0099cc 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 15px 50px rgba(0, 136, 204, 0.4);
            border: 6px solid white;
            position: relative;
            overflow: hidden;
        }

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

        .profile-avatar i {
            font-size: 5rem;
            color: white;
        }

        .avatar-upload-btn {
            position: absolute;
            bottom: 10px;
            right: 10px;
            background: white;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            border: 3px solid #f1c40f;
            color: #f1c40f;
        }

        .avatar-upload-btn:hover {
            transform: scale(1.1) rotate(10deg);
            background: #f1c40f;
            color: white;
        }

        .avatar-upload-btn input {
            display: none;
        }

        .profile-info {
            text-align: right;
        }

        .profile-name {
            font-size: 2.5rem;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 0.5rem;
        }

        .profile-title {
            font-size: 1.2rem;
            color: #64748b;
            font-weight: 500;
            margin-bottom: 1rem;
        }

        .profile-meta {
            display: flex;
            gap: 2rem;
            flex-wrap: wrap;
        }

        .profile-meta-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: #64748b;
            font-size: 0.95rem;
        }

        .profile-meta-item i {
            color: #f1c40f;
        }

        .profile-stats {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .profile-stat-item {
            background: linear-gradient(135deg, #f1c40f 0%, #0099cc 100%);
            color: white;
            padding: 1.5rem;
            border-radius: 16px;
            text-align: center;
            box-shadow: 0 8px 25px rgba(0, 136, 204, 0.3);
            min-width: 140px;
        }

        .profile-stat-number {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 0.25rem;
        }

        .profile-stat-label {
            font-size: 0.85rem;
            opacity: 0.95;
        }

        /* Content Grid */
        .profile-content {
            display: grid;
            grid-template-columns: 350px 1fr;
            gap: 2rem;
            margin-bottom: 2rem;
        }

        /* Sidebar */
        .profile-sidebar {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .profile-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 2rem;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        }

        .card-title {
            font-size: 1.2rem;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .card-title i {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #f1c40f 0%, #f1a30f 100%);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }

        .info-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .info-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            background: #f8fafc;
            border-radius: 12px;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .info-item:hover {
            background: white;
            border-color: #f1c40f;
            transform: translateX(-5px);
            box-shadow: 0 4px 15px rgba(0, 136, 204, 0.1);
        }

        .info-icon {
            width: 45px;
            height: 45px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
            background: white;
            color: #f1c40f;
            box-shadow: 0 2px 10px rgba(0, 136, 204, 0.1);
        }

        .info-content {
            flex: 1;
        }

        .info-label {
            font-size: 0.75rem;
            color: #94a3b8;
            margin-bottom: 0.25rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .info-value {
            font-size: 0.95rem;
            color: #1e293b;
            font-weight: 600;
        }

        /* Social Links */
        .social-links {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .social-link {
            width: 55px;
            height: 55px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f8fafc;
            color: #64748b;
            text-decoration: none;
            transition: all 0.3s ease;
            font-size: 1.4rem;
            border: 2px solid transparent;
        }

        .social-link:hover {
            transform: translateY(-5px) scale(1.1);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .social-link.telegram:hover {
            background: #0088cc;
            color: white;
            border-color: #0088cc;
        }

        .social-link.instagram:hover {
            background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
            color: white;
        }

        .social-link.linkedin:hover {
            background: #0077b5;
            color: white;
            border-color: #0077b5;
        }

        .social-link.twitter:hover {
            background: #1da1f2;
            color: white;
            border-color: #1da1f2;
        }

        .social-link.whatsapp:hover {
            background: #25d366;
            color: white;
            border-color: #25d366;
        }

        /* Skills */
        .skill-item {
            margin-bottom: 1.5rem;
        }

        .skill-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.75rem;
        }

        .skill-name {
            font-weight: 600;
            color: #1e293b;
            font-size: 0.95rem;
        }

        .skill-percent {
            font-weight: 700;
            color: #f1c40f;
            font-size: 0.9rem;
        }

        .skill-bar {
            height: 10px;
            background: #e2e8f0;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
        }

        .skill-progress {
            height: 100%;
            border-radius: 10px;
            transition: width 1s ease;
            position: relative;
            overflow: hidden;
        }

        .skill-progress::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            animation: shimmer 2s infinite;
        }

        @keyframes shimmer {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(100%);
            }
        }

        /* Main Content */
        .profile-main {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        /* Tabs */
        .profile-tabs {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 1rem;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            display: flex;
            gap: 1rem;
            overflow-x: auto;
        }

        .profile-tab {
            padding: 1rem 2rem;
            border: none;
            background: transparent;
            border-radius: 14px;
            font-weight: 600;
            color: #64748b;
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 1rem;
        }

        .profile-tab:hover {
            background: #f8fafc;
            color: #334155;
            transform: translateY(-2px);
        }

        .profile-tab.active {
            background: linear-gradient(135deg, #f1c40f 0%, #f1a30f 100%);
            color: white;
            box-shadow: 0 6px 20px rgba(0, 136, 204, 0.4);
        }

        .profile-tab i {
            font-size: 1.1rem;
        }

        /* Tab Content */
        .tab-content-wrapper {
            display: none;
        }

        .tab-content-wrapper.active {
            display: block;
            animation: fadeInUp 0.5s ease;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Edit Form */
        .edit-form {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 2.5rem;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        }

        .form-section {
            margin-bottom: 2.5rem;
        }

        .form-section-title {
            font-size: 1.3rem;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid #e2e8f0;
        }

        .form-section-title i {
            color: #f1c40f;
            font-size: 1.4rem;
        }

        .form-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .form-group {
            position: relative;
        }

        .form-group label {
            display: block;
            font-weight: 600;
            color: #374151;
            margin-bottom: 0.75rem;
            font-size: 0.95rem;
        }

        .form-control {
            width: 100%;
            padding: 1rem 3rem 1rem 1rem !important;
            border: 2px solid #e2e8f0;
            border-radius: 14px;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            background: white;
            /*font-family: 'Vazirmatn', sans-serif;*/
        }

        .form-control:focus {
            outline: none;
            border-color: #f1c40f;
            box-shadow: 0 0 0 4px rgba(0, 136, 204, 0.1);
            transform: translateY(-2px);
        }

        .form-icon {
            position: absolute;
            right: 1.25rem;
            top: 50%;
            transform: translateY(-50%);
            color: #94a3b8;
            font-size: 1.2rem;
            pointer-events: none;
        }

        .form-group.has-label .form-icon {
            top: calc(50% + 15px);
        }

        textarea.form-control {
            resize: vertical;
            min-height: 140px;
            padding: 1rem;
        }

        .form-actions {
            display: flex;
            gap: 1rem;
            justify-content: flex-start;
            flex-wrap: wrap;
            margin-top: 2rem;
        }

        .btn {
            padding: 1rem 2.5rem;
            border-radius: 14px;
            border: none;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
        }

        .btn-primary {
            background: linear-gradient(135deg, #f1c40f 0%, #0099cc 100%);
            color: white;
            box-shadow: 0 6px 20px rgba(0, 136, 204, 0.4);
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(0, 136, 204, 0.5);
        }

        .btn-outline {
            background: white;
            color: #64748b;
            border: 2px solid #e2e8f0;
        }

        .btn-outline:hover {
            background: #f8fafc;
            border-color: #cbd5e1;
            transform: translateY(-2px);
        }

        /* Activity Timeline */
        .activity-timeline {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 2.5rem;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        }

        .activity-item {
            display: flex;
            gap: 1.5rem;
            padding: 1.5rem;
            background: #f8fafc;
            border-radius: 16px;
            margin-bottom: 1.5rem;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            position: relative;
        }

        .activity-item:hover {
            background: white;
            border-color: #f1c40f;
            transform: translateX(-5px);
            box-shadow: 0 6px 25px rgba(0, 136, 204, 0.15);
        }

        .activity-icon {
            width: 60px;
            height: 60px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            flex-shrink: 0;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .activity-icon.success {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
        }

        .activity-icon.info {
            background: linear-gradient(135deg, #f1c40f 0%, #0099cc 100%);
            color: white;
        }

        .activity-icon.warning {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: white;
        }

        .activity-icon.danger {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            color: white;
        }

        .activity-content {
            flex: 1;
        }

        .activity-title {
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 0.5rem;
            font-size: 1.1rem;
        }

        .activity-description {
            font-size: 0.95rem;
            color: #64748b;
            margin-bottom: 0.75rem;
            line-height: 1.6;
        }

        .activity-time {
            font-size: 0.85rem;
            color: #94a3b8;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .activity-badge {
            display: inline-block;
            padding: 0.35rem 0.85rem;
            border-radius: 8px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-top: 0.5rem;
        }

        .activity-badge.success {
            background: rgba(16, 185, 129, 0.1);
            color: #059669;
        }

        .activity-badge.warning {
            background: rgba(245, 158, 11, 0.1);
            color: #d97706;
        }

        /* Security Settings */
        .security-settings {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 2.5rem;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        }

        .security-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.75rem;
            background: #f8fafc;
            border-radius: 16px;
            margin-bottom: 1.5rem;
            border: 2px solid transparent;
            transition: all 0.3s ease;
        }

        .security-item:hover {
            background: white;
            border-color: #e2e8f0;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }

        .security-info {
            display: flex;
            gap: 1.5rem;
            align-items: center;
        }

        .security-icon {
            width: 55px;
            height: 55px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: white;
            color: #f1c40f;
            font-size: 1.4rem;
            box-shadow: 0 4px 15px rgba(0, 136, 204, 0.1);
        }

        .security-text h6 {
            font-size: 1.05rem;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 0.35rem;
        }

        .security-text p {
            font-size: 0.875rem;
            color: #64748b;
            margin: 0;
        }

        /* Toggle Switch */
        .toggle-switch {
            position: relative;
            width: 60px;
            height: 32px;
        }

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

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #cbd5e1;
            transition: 0.4s;
            border-radius: 34px;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 24px;
            width: 24px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: 0.4s;
            border-radius: 50%;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        }

        .toggle-switch input:checked + .toggle-slider {
            background: linear-gradient(135deg, #f1c40f 0%, #0099cc 100%);
        }

        .toggle-switch input:checked + .toggle-slider:before {
            transform: translateX(28px);
        }

        .alert-info {
            background: linear-gradient(135deg, rgba(0, 136, 204, 0.1) 0%, rgba(0, 153, 204, 0.1) 100%);
            border: 2px solid #f1c40f;
            border-radius: 16px;
            padding: 1.5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-top: 2rem;
        }

        .alert-info i {
            font-size: 2rem;
            color: #f1c40f;
            flex-shrink: 0;
        }

        .alert-info .alert-content {
            flex: 1;
        }

        .alert-info strong {
            color: #f1c40f;
            font-weight: 700;
        }

        /* Responsive Design */
        @media (max-width: 1200px) {
            .profile-content {
                grid-template-columns: 1fr;
            }

            .profile-header-content {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .profile-info {
                text-align: center;
            }

            .profile-meta {
                justify-content: center;
            }

            .profile-stats {
                flex-direction: row;
                justify-content: center;
            }
        }

        @media (max-width: 768px) {
            .profile-wrapper {
                padding: 1rem;
            }

            .profile-navbar {
                flex-direction: column;
                gap: 1rem;
                padding: 1.5rem;
            }

            .navbar-brand {
                font-size: 1.1rem;
            }

            .navbar-actions {
                flex-wrap: wrap;
                justify-content: center;
            }

            .profile-header {
                padding: 2rem 1.5rem;
            }

            .profile-avatar {
                width: 140px;
                height: 140px;
            }

            .profile-avatar i {
                font-size: 4rem;
            }

            .profile-name {
                font-size: 1.8rem;
            }

            .profile-title {
                font-size: 1rem;
            }

            .profile-stats {
                flex-direction: column;
                width: 100%;
            }

            .profile-stat-item {
                width: 100%;
            }

            .profile-card {
                padding: 1.5rem;
            }

            .profile-tabs {
                flex-direction: column;
                gap: 0.5rem;
            }

            .profile-tab {
                justify-content: center;
            }

            .edit-form {
                padding: 1.5rem;
            }

            .form-row {
                grid-template-columns: 1fr;
            }

            .form-actions {
                flex-direction: column;
            }

            .btn {
                width: 100%;
                justify-content: center;
            }

            .activity-item {
                flex-direction: column;
                text-align: center;
            }

            .activity-icon {
                margin: 0 auto;
            }

            .security-item {
                flex-direction: column;
                gap: 1.5rem;
                text-align: center;
            }
        }

        @media (max-width: 576px) {
            .profile-avatar {
                width: 120px;
                height: 120px;
            }

            .profile-avatar i {
                font-size: 3.5rem;
            }

            .avatar-upload-btn {
                width: 40px;
                height: 40px;
            }

            .profile-name {
                font-size: 1.5rem;
            }

            .navbar-btn {
                padding: 0.6rem 1rem;
                font-size: 0.9rem;
            }

            .social-links {
                justify-content: center;
            }
        }

        /* Loading Spinner */
        .loading-spinner {
            width: 20px;
            height: 20px;
            border: 2px solid #ffffff;
            border-top: 2px solid transparent;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        /* Toast Notification */
        .toast-notification {
            position: fixed;
            top: 100px;
            left: 50%;
            transform: translateX(-50%);
            background: white;
            color: #1e293b;
            padding: 1.25rem 2rem;
            border-radius: 16px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            z-index: 9999;
            display: flex;
            align-items: center;
            gap: 1rem;
            animation: slideDown 0.3s ease-out;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateX(-50%) translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateX(-50%) translateY(0);
            }
        }

        .toast-notification.success {
            border-right: 4px solid #10b981;
        }

        .toast-notification.info {
            border-right: 4px solid #f1c40f;
        }

        .toast-notification i {
            font-size: 1.5rem;
        }

        .toast-notification.success i {
            color: #10b981;
        }

        .toast-notification.info i {
            color: #f1c40f;
        }
    </style>
    <div class="profile-wrapper">
        <div class="profile-container"><!-- Navbar -->
            <header class="profile-header">
                <div class="profile-header-content">
                    {{--                    <div class="profile-avatar-section">--}}
                    {{--                        <div class="profile-avatar"><i class="fas fa-user"></i>--}}
                    {{--                        </div>--}}
                    {{--                        <label class="avatar-upload-btn"> <i class="fas fa-camera"></i> <input type="file"--}}
                    {{--                                                                                               accept="image/*"--}}
                    {{--                                                                                               id="avatarInput">--}}
                    {{--                        </label>--}}
                    {{--                    </div>--}}
                    <div class="profile-info">
                        <h1 class="profile-name">{{ $user->fullName }}</h1>
                        <p class="profile-title">{{ $user->rolesName }}</p>
                        <div class="profile-meta">
                            <div class="profile-meta-item"><i class="fas fa-envelope"></i>
                                <span>{{ $user->email }}</span>
                            </div>
                            <div class="profile-meta-item"><i class="fas fa-phone"></i> <span>{{ $user->phone }}</span>
                            </div>
                            <div class="profile-meta-item"><i class="fas fa-calendar"></i>
                                <span>عضویت از </span>
                                <span>{{ verta($user->created_at)->format('%d %B %Y') }}</span>
                            </div>
                        </div>
                    </div>
                    {{--                    <div class="profile-stats">--}}
                    {{--                        <div class="profile-stat-item">--}}
                    {{--                            <div class="profile-stat-number">--}}
                    {{--                                ۱۲۳--}}
                    {{--                            </div>--}}
                    {{--                            <div class="profile-stat-label">--}}
                    {{--                                بیمه‌نامه ثبت شده--}}
                    {{--                            </div>--}}
                    {{--                        </div>--}}
                    {{--                        <div class="profile-stat-item">--}}
                    {{--                            <div class="profile-stat-number">--}}
                    {{--                                ۴۵--}}
                    {{--                            </div>--}}
                    {{--                            <div class="profile-stat-label">--}}
                    {{--                                خسارت پردازش شده--}}
                    {{--                            </div>--}}
                    {{--                        </div>--}}
                    {{--                        <div class="profile-stat-item">--}}
                    {{--                            <div class="profile-stat-number">--}}
                    {{--                                ۹۸٪--}}
                    {{--                            </div>--}}
                    {{--                            <div class="profile-stat-label">--}}
                    {{--                                رضایت مشتریان--}}
                    {{--                            </div>--}}
                    {{--                        </div>--}}
                    {{--                    </div>--}}
                </div>
            </header><!-- Profile Content -->
            <div class="profile-content"><!-- Sidebar -->
                <aside class="profile-sidebar"><!-- Contact Card -->
                    <div class="profile-card">
                        <h3 class="card-title"><i class="fas fa-address-card"></i> اطلاعات تماس</h3>
                        <div class="info-list">
                            <div class="info-item">
                                <div class="info-icon"><i class="fas fa-phone"></i>
                                </div>
                                <div class="info-content">
                                    <div class="info-label">
                                        شماره تماس
                                    </div>
                                    <div class="info-value">
                                        {{ $user->phone }}
                                    </div>
                                </div>
                            </div>
                            <div class="info-item">
                                <div class="info-icon"><i class="fas fa-envelope"></i>
                                </div>
                                <div class="info-content">
                                    <div class="info-label">
                                        ایمیل
                                    </div>
                                    <div class="info-value">
                                        {{ $user->email }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Skills Card -->
                    {{--                    <div class="profile-card">--}}
                    {{--                        <h3 class="card-title"><i class="fas fa-star"></i> مهارت‌ها و تخصص‌ها</h3>--}}
                    {{--                        <div class="skill-item">--}}
                    {{--                            <div class="skill-header"><span class="skill-name">مدیریت بیمه</span> <span--}}
                    {{--                                    class="skill-percent">۹۵٪</span>--}}
                    {{--                            </div>--}}
                    {{--                            <div class="skill-bar">--}}
                    {{--                                <div class="skill-progress"--}}
                    {{--                                     style="width: 95%; background: linear-gradient(135deg, #f1c40f 0%, #0099cc 100%);"></div>--}}
                    {{--                            </div>--}}
                    {{--                        </div>--}}
                    {{--                        <div class="skill-item">--}}
                    {{--                            <div class="skill-header"><span class="skill-name">ارزیابی خسارت</span> <span--}}
                    {{--                                    class="skill-percent">۸۸٪</span>--}}
                    {{--                            </div>--}}
                    {{--                            <div class="skill-bar">--}}
                    {{--                                <div class="skill-progress"--}}
                    {{--                                     style="width: 88%; background: linear-gradient(135deg, #10b981 0%, #059669 100%);"></div>--}}
                    {{--                            </div>--}}
                    {{--                        </div>--}}
                    {{--                        <div class="skill-item">--}}
                    {{--                            <div class="skill-header"><span class="skill-name">مذاکره و فروش</span> <span--}}
                    {{--                                    class="skill-percent">۹۲٪</span>--}}
                    {{--                            </div>--}}
                    {{--                            <div class="skill-bar">--}}
                    {{--                                <div class="skill-progress"--}}
                    {{--                                     style="width: 92%; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);"></div>--}}
                    {{--                            </div>--}}
                    {{--                        </div>--}}
                    {{--                        <div class="skill-item">--}}
                    {{--                            <div class="skill-header"><span class="skill-name">خدمات مشتریان</span> <span--}}
                    {{--                                    class="skill-percent">۹۶٪</span>--}}
                    {{--                            </div>--}}
                    {{--                            <div class="skill-bar">--}}
                    {{--                                <div class="skill-progress"--}}
                    {{--                                     style="width: 96%; background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);"></div>--}}
                    {{--                            </div>--}}
                    {{--                        </div>--}}
                    {{--                    </div>--}}
                </aside><!-- Main Content -->
                <main class="profile-main"><!-- Tabs -->
                    <div class="profile-tabs">
                        <button class="profile-tab active" data-tab="edit"><i class="fas fa-user-edit"></i> <span>ویرایش اطلاعات</span>
                        </button>
                        <button class="profile-tab" data-tab="activity"><i
                                class="fas fa-history"></i> <span>فعالیت‌های اخیر</span>
                        </button>
                        <button class="profile-tab" data-tab="security"><i class="fas fa-shield-alt"></i> <span>امنیت و حریم خصوصی</span>
                        </button>
                    </div><!-- Edit Tab -->
                    <div class="tab-content-wrapper active" id="editTab">
                        <form class="edit-form" id="profileEditForm">
                            <div class="form-section">
                                <h3 class="form-section-title"><i class="fas fa-user-circle"></i> اطلاعات شخصی</h3>
                                <div class="form-row">
                                    <div class="form-group has-label">
                                        <label>نام</label>
                                        <i class="fas fa-user form-icon"></i>
                                        <input type="text" class="form-control" name="name"
                                               placeholder="نام خود را وارد کنید"
                                               value="{{ old('name', $user->name) }}">
                                    </div>
                                    <div class="form-group has-label">
                                        <label>نام خانوادگی</label>
                                        <i class="fas fa-user form-icon"></i>
                                        <input type="text" class="form-control" name="family"
                                               placeholder="نام خانوادگی خود را وارد کنید"
                                               value="{{ old('family', $user->family) }}">
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group has-label">
                                        <label>کد ملی</label>
                                        <i class="fas fa-id-card form-icon"></i>
                                        <input type="text" class="form-control" placeholder="کد ملی ۱۰ رقمی"
                                               name="national_code" {{ Setting::getValue('user_can_change_national_code') == '0' ? 'disabled' : '' }}
                                               value="{{ old('national_code', $user->national_code) }}">
                                    </div>
                                    <div class="form-group has-label"><label>تاریخ تولد</label> <i
                                            class="fas fa-birthday-cake form-icon"></i>
                                        <input type="text" class="form-control" placeholder="مثال: ۱۳۶۵/۰۳/۱۵"
                                               name="birthday"
                                               value="{{ old('birthday', $user->birthday) }}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-section">
                                <h3 class="form-section-title"><i class="fas fa-address-book"></i> اطلاعات تماس</h3>
                                <div class="form-row">
                                    <div class="form-group has-label">
                                        <label>ایمیل</label>
                                        <i class="fas fa-envelope form-icon"></i>
                                        <input type="email" class="form-control" placeholder="example@email.com"
                                               name="email"
                                               value="{{ old('email', $user->email) }}">
                                    </div>
                                    <div class="form-group has-label">
                                        <label>تلفن همراه</label>
                                        <i class="fas fa-phone form-icon"></i>
                                        <input type="tel" class="form-control" placeholder="0912345678" name="phone" {{ Setting::getValue('user_can_change_phone') == '0' ? 'disabled' : '' }}
                                               value="{{ old('phone', $user->phone) }}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-actions">
                                <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> <span>ذخیره تغییرات</span>
                                </button>
                                <button type="reset" class="btn btn-outline"><i class="fas fa-undo"></i>
                                    <span>انصراف</span></button>
                            </div>
                        </form>
                    </div><!-- Activity Tab -->
                    <div class="tab-content-wrapper" id="activityTab">
                        <div class="activity-timeline">
                            <div class="activity-item">
                                <div class="activity-icon success"><i class="fas fa-file-contract"></i>
                                </div>
                                <div class="activity-content">
                                    <h4 class="activity-title">بیمه‌نامه جدید ثبت شد</h4>
                                    <p class="activity-description">بیمه شخص ثالث برای مشتری احمد رضایی با شماره
                                        بیمه‌نامه ۱۲۳۴۵۶ ثبت و تایید گردید.</p>
                                    <div class="activity-time"><i class="fas fa-clock"></i> <span>۲ ساعت پیش</span>
                                    </div>
                                    <span class="activity-badge success">تکمیل شده</span>
                                </div>
                            </div>
                            <div class="activity-item">
                                <div class="activity-icon info"><i class="fas fa-clipboard-check"></i>
                                </div>
                                <div class="activity-content">
                                    <h4 class="activity-title">خسارت بررسی شد</h4>
                                    <p class="activity-description">خ��ارت شماره ۱۲۳۴ مربوط به حادثه رانندگی مورخ
                                        ۱۴۰۳/۰۳/۱۰ تایید و برای پرداخت ارسال شد.</p>
                                    <div class="activity-time"><i class="fas fa-clock"></i> <span>۵ ساعت پیش</span>
                                    </div>
                                    <span class="activity-badge success">تایید شده</span>
                                </div>
                            </div>
                            <div class="activity-item">
                                <div class="activity-icon success"><i class="fas fa-user-plus"></i>
                                </div>
                                <div class="activity-content">
                                    <h4 class="activity-title">مشتری جدید افزوده شد</h4>
                                    <p class="activity-description">فاطمه کریمی با کد ملی ۰۹۸۷۶۵۴۳۲۱ به عنوان مشتری جدید
                                        در سیستم ثبت شد.</p>
                                    <div class="activity-time"><i class="fas fa-clock"></i> <span>دیروز</span>
                                    </div>
                                    <span class="activity-badge success">ثبت شده</span>
                                </div>
                            </div>
                            <div class="activity-item">
                                <div class="activity-icon warning"><i class="fas fa-exclamation-triangle"></i>
                                </div>
                                <div class="activity-content">
                                    <h4 class="activity-title">هشدار انقضای بیمه����نامه</h4>
                                    <p class="activity-description">۳ بیمه‌نامه ظرف یک هفته آینده منقضی می‌شوند. لطفاً
                                        برای تمدید با مشتریان تماس بگیرید.</p>
                                    <div class="activity-time"><i class="fas fa-clock"></i> <span>۲ روز پیش</span>
                                    </div>
                                    <span class="activity-badge warning">نیاز به اقدام</span>
                                </div>
                            </div>
                            <div class="activity-item">
                                <div class="activity-icon info"><i class="fas fa-chart-line"></i>
                                </div>
                                <div class="activity-content">
                                    <h4 class="activity-title">گزارش ماهانه تهیه شد</h4>
                                    <p class="activity-description">گزارش عملکرد و آمار فروش خرداد ماه با جزئیات کامل
                                        تهیه و ارسال گردید.</p>
                                    <div class="activity-time"><i class="fas fa-clock"></i> <span>۳ روز پیش</span>
                                    </div>
                                    <span class="activity-badge success">ارسال شده</span>
                                </div>
                            </div>
                            <div class="activity-item">
                                <div class="activity-icon danger"><i class="fas fa-times-circle"></i>
                                </div>
                                <div class="activity-content">
                                    <h4 class="activity-title">درخواست خسارت رد شد</h4>
                                    <p class="activity-description">خسارت شماره ۹۸۷۶ به دلیل عدم تطابق با شرایط
                                        بیمه‌نامه رد گردید و به مشتری اعلام شد.</p>
                                    <div class="activity-time"><i class="fas fa-clock"></i> <span>۴ روز پیش</span>
                                    </div>
                                    <span class="activity-badge warning">رد شده</span>
                                </div>
                            </div>
                        </div>
                    </div><!-- Security Tab -->
                    <div class="tab-content-wrapper" id="securityTab">
                        <div class="security-settings">
                            <div class="security-item">
                                <div class="security-info">
                                    <div class="security-icon"><i class="fas fa-key"></i>
                                    </div>
                                    <div class="security-text">
                                        <h6>تغییر رمز عبور</h6>
                                        <p>آخرین تغییر: ۳۰ روز پیش - توصیه می‌شود رمز خود را به صورت دوره‌ای تغییر
                                            دهید</p>
                                    </div>
                                </div>
                                <button class="btn btn-outline"
                                        onclick="showToast('در حال باز کردن صفحه تغییر رمز عبور...', 'info')"><i
                                        class="fas fa-edit"></i> <span>تغییر رمز</span></button>
                            </div>
                            <div class="security-item">
                                <div class="security-info">
                                    <div class="security-icon"><i class="fas fa-mobile-alt"></i>
                                    </div>
                                    <div class="security-text">
                                        <h6>احراز هویت دو مرحله‌ای (2FA)</h6>
                                        <p>افزایش امنیت حساب با تایید دو مرحله‌ای از طریق پیامک یا اپلیکیشن</p>
                                    </div>
                                </div>
                                <label class="toggle-switch"> <input type="checkbox" checked
                                                                     onchange="handleToggle(this, 'احراز هویت دو مرحله‌ای')">
                                    <span class="toggle-slider"></span> </label>
                            </div>
                            <div class="security-item">
                                <div class="security-info">
                                    <div class="security-icon"><i class="fas fa-bell"></i>
                                    </div>
                                    <div class="security-text">
                                        <h6>اعلان‌های امنیتی ایمیل</h6>
                                        <p>دریافت اعلان برای ورود از دستگاه جدید یا تغییرات امنیتی</p>
                                    </div>
                                </div>
                                <label class="toggle-switch"> <input type="checkbox" checked
                                                                     onchange="handleToggle(this, 'اعلان‌های امنیتی')">
                                    <span class="toggle-slider"></span> </label>
                            </div>
                            <div class="security-item">
                                <div class="security-info">
                                    <div class="security-icon"><i class="fas fa-shield-alt"></i>
                                    </div>
                                    <div class="security-text">
                                        <h6>تایید دستگاه جدید</h6>
                                        <p>نیاز به تایید دستی برای ورود از دستگاه‌های جدید</p>
                                    </div>
                                </div>
                                <label class="toggle-switch"> <input type="checkbox"
                                                                     onchange="handleToggle(this, 'تایید دستگاه جدید')">
                                    <span class="toggle-slider"></span> </label>
                            </div>
                            <div class="security-item">
                                <div class="security-info">
                                    <div class="security-icon"><i class="fas fa-lock"></i>
                                    </div>
                                    <div class="security-text">
                                        <h6>قفل خودکار نشست</h6>
                                        <p>قفل شدن خودکار حساب پس از ۳۰ دقیقه عدم فعالیت</p>
                                    </div>
                                </div>
                                <label class="toggle-switch"> <input type="checkbox" checked
                                                                     onchange="handleToggle(this, 'قفل خودکار')"> <span
                                        class="toggle-slider"></span> </label>
                            </div>
                            <div class="security-item">
                                <div class="security-info">
                                    <div class="security-icon"><i class="fas fa-history"></i>
                                    </div>
                                    <div class="security-text">
                                        <h6>سابقه ورود به سیستم</h6>
                                        <p>مشاهده آخرین ورودها و دستگاه‌های متصل به حساب شما</p>
                                    </div>
                                </div>
                                <button class="btn btn-outline"
                                        onclick="showToast('در حال بارگذاری سابقه ورود...', 'info')"><i
                                        class="fas fa-eye"></i> <span>مشاهده سابقه</span></button>
                            </div>
                            <div class="security-item">
                                <div class="security-info">
                                    <div class="security-icon"><i class="fas fa-user-slash"></i>
                                    </div>
                                    <div class="security-text">
                                        <h6>خروج از همه دستگاه‌ها</h6>
                                        <p>خروج از تمام دستگاه‌های متصل به حساب کاربری شما</p>
                                    </div>
                                </div>
                                <button class="btn btn-outline"
                                        onclick="showToast('در حال خروج از همه دستگاه‌ها...', 'info')"><i
                                        class="fas fa-sign-out-alt"></i> <span>خروج از همه</span></button>
                            </div>
                            <div class="alert-info"><i class="fas fa-info-circle"></i>
                                <div class="alert-content"><strong>نکته ��منیتی:</strong> برای حفظ امنیت حساب خود، از
                                    رمز عبور قوی استفاده کنید و آن را به صورت دوره‌ای تغییر دهید. همچنین فعال کردن احراز
                                    هویت دو مرحله‌ای به شدت توصیه می‌شود.
                                </div>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </div>
    </div><!-- Bootstrap JS -->
    <script>
        // Tab Switching
        const tabs = document.querySelectorAll('.profile-tab');
        const tabContents = document.querySelectorAll('.tab-content-wrapper');

        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                const tabName = tab.dataset.tab;

                // Remove active class from all tabs
                tabs.forEach(t => t.classList.remove('active'));
                tabContents.forEach(c => c.classList.remove('active'));

                // Add active class to clicked tab
                tab.classList.add('active');
                document.getElementById(`${tabName}Tab`).classList.add('active');
            });
        });

        // Avatar Upload
        const avatarInput = document.getElementById('avatarInput');
        const profileAvatar = document.querySelector('.profile-avatar');

        avatarInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (event) => {
                    profileAvatar.innerHTML = `<img src="${event.target.result}" alt="تصویر پروفایل">`;
                    showToast('تصویر پروفایل با موفقیت تغییر کرد!', 'success');
                };
                reader.readAsDataURL(file);
            }
        });

        // Profile Edit Form
        const profileEditForm = document.getElementById('profileEditForm');
        profileEditForm.addEventListener('submit', (e) => {
            e.preventDefault();

            const submitBtn = e.target.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            submitBtn.innerHTML = '<div class="loading-spinner"></div><span>در حال ذخیره...</span>';
            submitBtn.disabled = true;

            setTimeout(() => {
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
                showToast('تغییرات با موفقیت ذخیره شد!', 'success');
            }, 2000);
        });

        // Toast Notification
        function showToast(message, type = 'success') {
            const toast = document.createElement('div');
            toast.className = `toast-notification ${type}`;

            const icon = type === 'success' ? 'fa-check-circle' : 'fa-info-circle';
            toast.innerHTML = `
                <i class="fas ${icon}"></i>
                <span>${message}</span>
            `;

            document.body.appendChild(toast);

            setTimeout(() => {
                toast.style.animation = 'slideDown 0.3s ease-out reverse';
                setTimeout(() => toast.remove(), 300);
            }, 3000);
        }

        // Toggle Switch Handler
        function handleToggle(toggle, settingName) {
            const status = toggle.checked ? 'فعال' : 'غیرفعال';
            showToast(`${settingName} ${status} شد`, 'info');
        }

        // Skill bars animation on load
        window.addEventListener('load', () => {
            const skillBars = document.querySelectorAll('.skill-progress');
            skillBars.forEach(bar => {
                const width = bar.style.width;
                bar.style.width = '0';
                setTimeout(() => {
                    bar.style.width = width;
                }, 100);
            });
        });

        // Navbar buttons
        document.querySelector('.navbar-btn-outline').addEventListener('click', () => {
            showToast('در حال بازگشت به داشبورد...', 'info');
        });

        document.querySelector('.navbar-btn-primary').addEventListener('click', () => {
            showToast('صفحه اعلان‌ها در حال بارگذاری...', 'info');
        });
    </script>
@endsection