@extends('layouts.dashboard')

@section('content')
<div class="md:max-w-[80%] max-w-[90%] ml-auto md:pr-0 pr-10 min-h-screen flex-1 flex flex-col bg-gray-50">
    <!-- Dark Header with View Profile Options -->
    {{-- <div class="md:mt-0 mt-16 bg-gradient-to-r from-[#2D3A5C] to-[#1A234A] px-8 py-4 text-white overflow-x-auto">
                            <div class="flex items-center justify-between max-w-6xl mx-auto">
                                <div class="flex items-center gap-3">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                    </svg>
                                    <span class="text-sm">View profile as:</span>
                                </div>
                                <div class="flex gap-2">
                                    <button class="px-4 py-2 bg-white text-[#2D3A5C] rounded-lg font-medium text-sm hover:bg-gray-100 transition-colors">Myself</button>
                                    <button class="px-4 py-2 bg-transparent text-white border border-white rounded-lg font-medium text-sm hover:bg-white/10 transition-colors">Public</button>
                                    <button class="px-4 py-2 bg-transparent text-white border border-white rounded-lg font-medium text-sm hover:bg-white/10 transition-colors">Friend</button>
                                    <button class="px-4 py-2 bg-transparent text-white border border-white rounded-lg font-medium text-sm hover:bg-white/10 transition-colors">Trusted Friend</button>
                                </div>
                            </div>
        </div> --}}
    <!-- Content Area -->
    <div class="flex-1 overflow-auto md:px-8 px-0 py-8">
        <div class="max-w-6xl mx-auto">
            <!-- Profile Header Card -->
            <div class="bg-white rounded-lg border border-[#E5E7EB] p-8 mb-8">
                <div class="flex md:flex-row flex-col items-start justify-between">
                    <div class="flex md:flex-row flex-col items-start gap-6">
                        <!-- Avatar -->
                        <div class="relative">
                            <div
                                class="w-28 h-28 bg-gradient-to-br from-[#FF6B6B] to-[#E63946] rounded-lg flex items-center justify-center text-white text-5xl font-bold">
                                {{ strtoupper(substr($user->name, 0, 1)) }}
                            </div>
                            <div
                                class="absolute bottom-0 right-0 bg-green-500 border-4 border-white rounded-full w-8 h-8 flex items-center justify-center">
                                <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                        clip-rule="evenodd" />
                                </svg>
                            </div>
                        </div>

                        <!-- User Info -->
                        <div class="flex-1">
                            <div class="flex items-center gap-2 mb-1">
                                <h1 class="text-3xl font-bold text-[#101828]">
                                    <span>@</span><span>{{ $user->user_name ?? Str::slug($user->name) }}</span>
                                </h1>
                            </div>
                            <p class="text-lg text-[#4A5565] mb-2">{{ $user->name }}</p>
                            <p class="text-sm text-[#4A5565] mb-3">
                                {{ $activeJob->job_title ?? 'Member' }} • {{ $activeJob->company_name ?? 'RateMyPay' }}
                            </p>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="flex gap-3">
                        <a href="{{ route('settings.index') }}#account"
                            class="px-6 py-2 border border-[#D0D5DD] rounded-lg font-medium text-[#101828] hover:bg-gray-50 transition-colors flex items-center gap-2">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z">
                                </path>
                            </svg>
                            Edit Profile
                        </a>
                        <a href="{{ route('settings.index') }}#privacy"
                            class="px-6 py-2 bg-[#2F3D7E] text-white rounded-lg font-medium hover:bg-[#1A234A] transition-colors flex items-center gap-2">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                                </path>
                            </svg>
                            Privacy Settings
                        </a>
                    </div>
                </div>
            </div>

            <!-- Tabs Navigation -->
            <div class="mb-8">
                <div class="flex gap-1 border-b border-[#E5E7EB] overflow-x-auto">
                    {{-- Overview Tab --}}
                    <button onclick="switchProfileTab('overview')"
                        class="profile-tab px-6 py-4 text-[#4A5565] font-medium border-b-2 border-transparent active"
                        data-tab="overview">
                        Overview
                    </button>
                    {{--
                                                                                                        <button onclick="switchProfileTab('salary')" class="profile-tab px-6 py-4 text-[#4A5565] font-medium border-b-2 border-transparent" data-tab="salary">
                                                                                                            Salary Data {{ $counts['salary_data'] > 0 ? "({$counts['salary_data']})" : '' }}
                    </button>

                    <button onclick="switchProfileTab('ratings')"
                        class="profile-tab px-6 py-4 text-[#4A5565] font-medium border-b-2 border-transparent"
                        data-tab="ratings">
                        Ratings {{ $counts['ratings'] > 0 ? "({$counts['ratings']})" : '' }}
                    </button>

                    <button onclick="switchProfileTab('activity')"
                        class="profile-tab px-6 py-4 text-[#4A5565] font-medium border-b-2 border-transparent"
                        data-tab="activity">
                        Activity {{ $counts['activity'] > 0 ? "({$counts['activity']})" : '' }}
                    </button> --}}
                </div>
            </div>

            <div class="grid md:grid-cols-3 grid-cols-1 md:gap-8 gap-0">
                <!-- Main Content Area -->
                <div class="col-span-2">
                    <!-- Overview Tab -->
                    <div id="overview-content" class="profile-content">
                        <!-- Compensation Overview -->
                        <div class="bg-white rounded-lg border border-[#E5E7EB] p-8 mb-8">
                            <div class="flex md:flex-row flex-col justify-between items-center mb-6">
                                <h2 class="text-xl font-bold text-[#101828]">Compensation Overview</h2>
                                <p class="text-sm text-[#4A5565]">Last updated: {{ $lastUpdated->format('M d, Y') }}</p>
                            </div>

                            <div class="grid md:grid-cols-2 grid-cols-1 gap-6 mb-8">
                                <div class="bg-gray-50 rounded-lg p-6">
                                    <p class="text-sm text-[#4A5565] font-medium mb-2">BASE SALARY</p>
                                    <p class="text-3xl font-bold text-[#101828]">
                                        {{ $activeJob ? $activeJob->currency . ' ' . number_format($activeJob->annual_base_salary) : 'N/A' }}
                                    </p>
                                    @if($activeJob && $marketAvg > 0)
                                        <p
                                            class="text-xs {{ $activeJob->annual_base_salary >= $marketAvg ? 'text-green-600' : 'text-red-600' }} mt-2">
                                            {{ $activeJob->annual_base_salary >= $marketAvg ? '↗' : '↘' }}
                                            {{ number_format(abs(($activeJob->annual_base_salary - $marketAvg) / $marketAvg) * 100, 1) }}%
                                            vs Market Median
                                        </p>
                                    @endif
                                </div>
                                <div class="bg-gray-50 rounded-lg p-6">
                                    <p class="text-sm text-[#4A5565] font-medium mb-2">BONUS</p>
                                    <p class="text-3xl font-bold text-[#101828]">
                                        {{ $activeJob ? $activeJob->currency . ' ' . number_format($activeJob->bonus_commission) : '0' }}
                                    </p>

                                    @if($activeJob && $activeJob->bonus_commission > 0)
                                        @if($bonusPercentile >= 95)
                                            <p class="text-xs text-green-600 mt-2 font-semibold">↗ Top 5% for Role</p>
                                        @elseif($bonusPercentile >= 75)
                                            <p class="text-xs text-blue-600 mt-2">↗ Top 25% for Role</p>
                                        @else
                                            <p class="text-xs text-[#4A5565] mt-2">Within Market Average</p>
                                        @endif
                                    @else
                                        <p class="text-xs text-gray-400 mt-2">No variable pay reported</p>
                                    @endif
                                </div>
                                <div class="bg-gray-50 rounded-lg p-6">
                                    <p class="text-sm text-[#4A5565] font-medium mb-2">EQUITY</p>
                                    <p class="text-3xl font-bold text-[#101828]">
                                        {{ $activeJob ? number_format($activeJob->equity) . "%" : 'N/A' }}
                                    </p>
                                    <div class="w-full bg-gray-200 rounded-full h-2 mt-3">
                                        <div class="bg-[#2F3D7E] h-2 rounded-full" style="width: 45%"></div>
                                    </div>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-6">
                                    <p class="text-sm text-[#4A5565] font-medium mb-3">BENEFITS</p>

                                    @if($activeJob && count($activeJob->benefits_array) > 0)
                                        <div class="flex flex-wrap gap-2">
                                            @foreach($activeJob->benefits_array as $benefit)
                                                <span
                                                    class="px-3 py-1 bg-white border border-[#E5E7EB] text-[#2F3D7E] text-xs font-semibold rounded-full shadow-sm">
                                                    {{ $benefit }}
                                                </span>
                                            @endforeach
                                        </div>
                                    @else
                                        <p class="text-3xl font-bold text-gray-300">N/A</p>
                                        <p class="text-xs text-[#4A5565] mt-2">No benefits listed for this role</p>
                                    @endif
                                </div>
                            </div>

                            <!-- Salary vs Market Chart -->
                            @if($chart)
                                <div class="border-t border-[#E5E7EB] pt-6">
                                    <div class="mb-8 pb-8 border-b border-gray-200">

                                        <h3 class="font-semibold text-[#101828] mb-4">Salary vs Market</h3>
                                        <div class="bg-white p-6 rounded-lg border border-gray-200">
                                            <div id="marketComparisonChart" class="w-full"></div>
                                        </div>
                                    </div>
                                    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
                                    <script>
                                        document.addEventListener('DOMContentLoaded', function () {
                                            const options = {
                                                chart: { type: 'bar', height: 320, toolbar: { show: false } },
                                                series: [{
                                                    name: 'Salary ({{ $chart['currency'] }})',
                                                    data: {!! json_encode(array_values($chart['values'])) !!}
                                                }],
                                                colors: [
                                                    '#EF4444', // red – very low / negative
                                                    '#F97316', // orange – low
                                                    '#EAB308', // yellow – market average
                                                    '#22C55E', // green – above market
                                                    '#16A34A', // dark green – top market
                                                ],
                                                plotOptions: {
                                                    bar: { borderRadius: 6, columnWidth: '45%', distributed: true }
                                                },
                                                dataLabels: {
                                                    enabled: true,
                                                    formatter: val => new Intl.NumberFormat().format(val),
                                                    style: { colors: ['#374151'], fontSize: '12px' }
                                                },
                                                xaxis: {
                                                    categories: {!! json_encode(array_keys($chart['values'])) !!},
                                                    title: { text: 'Market Ranking' }
                                                },
                                                yaxis: {
                                                    labels: { formatter: val => new Intl.NumberFormat().format(val) },
                                                    title: { text: 'Annual Compensation' }
                                                },
                                                tooltip: {
                                                    y: { formatter: val => new Intl.NumberFormat().format(val) + ' {{ $chart['currency'] }}' }
                                                }
                                            };

                                            new ApexCharts(
                                                document.querySelector('#marketComparisonChart'),
                                                options
                                            ).render();
                                        });
                                    </script>

                                </div>
                            @endif

                            @if($marketComparison)
                                <div class="mb-8">
                                    <h3 class="text-md font-semibold text-gray-900 mb-3">
                                        How your pay compares to the market
                                    </h3>

                                    <div class="bg-[#F9FAFB] border border-gray-200 rounded-lg p-5 space-y-4">
                                        <p class="text-sm text-gray-700">
                                            Your total compensation is
                                            <span class="font-semibold">
                                                {{ number_format($job->total_compensation) }}
                                                {{ $marketComparison['currency'] }}
                                            </span>.
                                        </p>

                                        <p class="text-sm text-gray-700">
                                            The market median for this role is
                                            <span class="font-semibold">
                                                {{ number_format($marketComparison['percentiles']['p50']) }}
                                                {{ $marketComparison['currency'] }}
                                            </span>.
                                        </p>

                                        @php
    $positioning = $marketComparison['positioning'];
    $badgeMap = [
        'below_market' => ['bg-red-100', 'text-red-700', 'Below Market'],
        'at_market' => ['bg-green-100', 'text-green-700', 'At Market'],
        'above_market' => ['bg-blue-100', 'text-blue-700', 'Above Market'],
    ];
                                        @endphp

                                        <div class="flex items-center gap-3">
                                            <span class="px-3 py-1 rounded-full text-xs font-semibold
                                            {{ $badgeMap[$positioning][0] ?? 'bg-gray-100' }}
                                            {{ $badgeMap[$positioning][1] ?? 'text-gray-700' }}">
                                                {{ $badgeMap[$positioning][2] ?? 'Unknown' }}
                                            </span>

                                            <span class="text-xs text-gray-500">
                                                Confidence score:
                                                {{ (int) ($marketComparison['confidence_score'] * 100) }}%
                                            </span>
                                        </div>

                                        <p class="text-xs text-gray-500">
                                            This estimate is based on role, experience, location, industry, and
                                            company size using current market data.
                                        </p>
                                    </div>
                                </div>
                            @endif

                        </div>

                        <!-- Recent Activity -->
                        <div class="md:mb-0 mb-6 bg-white rounded-lg border border-[#E5E7EB] p-8">
                            <div class="flex justify-between items-center mb-6">
                                <h2 class="text-xl font-bold text-[#101828]">Recent Activity</h2>
                                <a href="#" class="text-sm text-[#2F3D7E] font-medium hover:underline">View all</a>
                            </div>

                            <div class="space-y-6">
                                @forelse($recentActivity as $activity)
                                    <div class="flex gap-4 pb-6 border-b border-[#E5E7EB] last:border-0 last:pb-0">
                                        {{-- Icon Container with Dynamic Colors --}}
                                        <div
                                            class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 
                                                                                                                                                                                                                                                                                {{ $activity->activity_type == 'posted' ? 'bg-blue-100 text-blue-600' : '' }}
                                                                                                                                                                                                                                                                                {{ $activity->activity_type == 'rated' ? 'bg-red-100 text-red-600' : '' }}
                                                                                                                                                                                                                                                                                {{ $activity->activity_type == 'commented' ? 'bg-green-100 text-green-600' : '' }}">

                                            @if($activity->activity_type == 'posted')
                                                {{-- Document Icon --}}
                                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M4 4a2 2 0 012-2h6a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V4z">
                                                    </path>
                                                </svg>
                                            @elseif($activity->activity_type == 'rated')
                                                {{-- Star Icon --}}
                                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                                    <path
                                                        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                                                    </path>
                                                </svg>
                                            @elseif($activity->activity_type == 'commented')
                                                {{-- Heart Icon --}}
                                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                                    <path fill-rule="evenodd"
                                                        d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
                                                        clip-rule="evenodd"></path>
                                                </svg>
                                            @endif
                                        </div>

                                        {{-- Activity Text --}}
                                        <div class="flex-1">
                                            <p class="font-semibold text-[#101828]">
                                                @if($activity->activity_type == 'commented')
                                                    Commented on
                                                @else
                                                    {{ ucfirst($activity->activity_type) }}
                                                @endif
                                            </p>
                                            <p class="text-[#4A5565]">
                                                @if($activity->activity_type == 'commented')
                                                    {{ Str::limit($activity->rateMyPay->content ?? 'a salary post', 60) }}
                                                @elseif($activity->activity_type == 'rated')
                                                    {{ Str::limit($activity->rateMyPay->content ?? 'a salary post', 60) }}
                                                @else
                                                    {{ Str::limit($activity->content, 60) }}
                                                @endif
                                            </p>
                                            <p class="text-xs text-[#4A5565] mt-1">
                                                {{ $activity->created_at->diffForHumans() }}
                                            </p>
                                        </div>
                                    </div>
                                @empty
                                    <p class="text-center text-gray-400 py-4">No recent activity found.</p>
                                @endforelse
                            </div>
                        </div>
                    </div>

                    <!-- Salary Data Tab -->
                    <div id="salary-content" class="profile-content hidden">
                        <div class="bg-white rounded-lg border border-[#E5E7EB] p-8">
                            <h2 class="text-xl font-bold text-[#101828] mb-6">Salary Submissions</h2>
                            <p class="text-[#4A5565] mb-6">You have submitted 3 salary records</p>
                        </div>
                    </div>

                    <!-- Ratings Tab -->
                    <div id="ratings-content" class="profile-content hidden">
                        <div class="bg-white rounded-lg border border-[#E5E7EB] p-8">
                            <h2 class="text-xl font-bold text-[#101828] mb-6">Ratings Given</h2>
                            <p class="text-[#4A5565] mb-6">You have provided 67 ratings</p>
                        </div>
                    </div>

                    <!-- Activity Tab -->
                    <div id="activity-content" class="profile-content hidden">
                        <div class="bg-white rounded-lg border border-[#E5E7EB] p-8">
                            <h2 class="text-xl font-bold text-[#101828] mb-6">Recent Activity</h2>
                            <p class="text-[#4A5565] mb-6">All your recent platform activities</p>
                        </div>
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="col-span-1">
                    <!-- Quick Actions -->
                    <div class="bg-[#2F3D7E] rounded-lg text-white p-6 mb-6">
                        <h3 class="text-lg font-semibold mb-4">Quick Actions</h3>
                        <div class="space-y-3">
                            <a href="/see-salary"
                                class="w-full flex items-center gap-3 px-4 py-3 bg-[#1A234A] hover:bg-[#0F1736] rounded-lg transition-colors">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z">
                                    </path>
                                </svg>
                                <div class="text-left">
                                    <p class="font-medium text-sm">See Salary</p>
                                    <p class="text-xs text-gray-300">See how you stack up</p>
                                </div>
                                </button>
                                <a href="/dashboard/job-experiences/create"
                                    class="w-full flex items-center gap-3 px-4 py-3 bg-[#1A234A] hover:bg-[#0F1736] rounded-lg transition-colors">
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M10.5 1.5H5.75A2.25 2.25 0 003.5 3.75v12.5A2.25 2.25 0 005.75 18.5h8.5a2.25 2.25 0 002.25-2.25V9.5m-12-4h6m-6 3h6m-6 3h4">
                                        </path>
                                    </svg>
                                    <div class="text-left">
                                        <p class="font-medium text-sm">Add Salary</p>
                                        <p class="text-xs text-gray-300">Find better opportunities</p>
                                    </div>
                                    </button>
                                    <a href="/communities"
                                        class="w-full flex items-center gap-3 px-4 py-3 bg-[#1A234A] hover:bg-[#0F1736] rounded-lg transition-colors">
                                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                            <path
                                                d="M10 20a10 10 0 1110-10 10 10 0 01-10 10m0-4a4 4 0 100-8 4 4 0 000 8z">
                                            </path>
                                        </svg>
                                        <div class="text-left">
                                            <p class="font-medium text-sm">Join Community</p>
                                            <p class="text-xs text-gray-300">Connect with peers</p>
                                        </div>
                                    </a>
                        </div>
                    </div>

                    <!-- Privacy Status -->
                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-6">
                        <div class="flex items-start gap-2 mb-3">
                            <svg class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" fill="currentColor"
                                viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                    d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <h3 class="font-semibold text-[#101828]">Privacy Status</h3>
                        </div>
                        <p class="text-sm text-[#4A5565] mb-2">You are visible as <strong>Charles Deo</strong>
                            (Nickname) to
                            most
                            friends.</p>
                        <p class="text-sm text-[#4A5565] mb-4"><strong>2 trusted friends</strong> can see your real
                            identity.</p>
                        <a href="{{ route('settings.index') }}#privacy"
                            class="text-sm text-blue-600 font-medium hover:underline">Manage Privacy
                            Settings →</a>
                    </div>

                    <!-- Connections -->
                    <div class="bg-white rounded-lg border border-[#E5E7EB] p-6 mb-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="font-semibold text-[#101828]">Connections</h3>
                            <a href="#" class="text-sm text-[#2F3D7E] font-medium hover:underline">View all</a>
                        </div>
                        <div class="space-y-3">
                            @forelse($connections as $connection)
                                                            <div class="flex items-center gap-3">
                                                                {{-- Dynamic Avatar with Initial --}}
                                                                @php
                                $colors = ['bg-purple-200 text-purple-700', 'bg-blue-200 text-blue-700', 'bg-pink-200 text-pink-700', 'bg-orange-200 text-orange-700'];
                                $colorClass = $colors[$loop->index % count($colors)];
                                                                @endphp

                                                                <div
                                                                    class="w-10 h-10 {{ $colorClass }} rounded-xl flex items-center justify-center font-semibold text-sm">
                                                                    {{ strtoupper(substr($connection->name, 0, 1)) }}
                                                                </div>

                                                                <div>
                                                                    <p class="text-sm font-medium text-[#101828]">
                                                                        <span>@</span>{{ $connection->user_name ?? Str::slug($connection->name) }}
                                                                    </p>
                                                                    <p class="text-xs text-[#4A5565]">
                                                                        {{ $connection->jobExperiences->first()->job_title ?? 'Member' }}
                                                                    </p>
                                                                </div>
                                                            </div>
                            @empty
                                <div class="py-4 text-center">
                                    <p class="text-sm text-gray-400 italic">No connections yet</p>
                                    <a href="{{ route('dashboard.index') }}"
                                        class="text-xs text-[#2F3D7E] font-semibold hover:underline">Find
                                        peers</a>
                                </div>
                            @endforelse
                        </div>
                    </div>

                    <!-- About -->
                    <div class="bg-white rounded-lg border border-[#E5E7EB] p-6">
                        <h3 class="font-semibold text-[#101828] mb-4">About</h3>
                        <div class="space-y-3 text-sm">
                            <div class="flex gap-2">
                                <svg class="w-5 h-5 text-[#4A5565] flex-shrink-0" fill="currentColor"
                                    viewBox="0 0 20 20">
                                    <path
                                        d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z">
                                    </path>
                                </svg>
                                <p class="text-[#4A5565]">{{ $activeJob->job_title ?? 'Member' }} at
                                    <strong>{{ $activeJob->company_name ?? 'RateMyPay' }}</strong></p>
                            </div>
                            <div class="flex gap-2">
                                <svg class="w-5 h-5 text-[#4A5565] flex-shrink-0" fill="currentColor"
                                    viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                        d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
                                        clip-rule="evenodd"></path>
                                </svg>
                                <p class="text-[#4A5565]">{{ $user->city ?? 'Remote' }}, {{ $user->country }}</p>
                            </div>
                            <div class="flex gap-2">
                                <svg class="w-5 h-5 text-[#4A5565] flex-shrink-0" fill="currentColor"
                                    viewBox="0 0 20 20">
                                    <path
                                        d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z">
                                    </path>
                                </svg>
                                <p class="text-[#4A5565]">{{ $activeJob->years_of_experience ?? 0 }} Years Experience
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>