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

@php
    $user = $user ?? null;
    $userRole = $userRole ?? ($user ? $user->role_slug : 'athlete');
    $profile = $profile ?? (($userRole === 'team') ? ($user->teamProfile ?? null) : ($user->athleteProfile ?? null));
    $location = $location ?? '';
    $sportName = $sportName ?? '';
    $positionName = $positionName ?? '';
    $avatarImage = $avatarImage ?? asset('front/assets/images/user.jpeg');
    $coverImage = $coverImage ?? asset('front/assets/images/cover.jpg');
    $campaigns = $campaigns ?? collect();
    $profileStats = $profileStats ?? [
        'matches' => 0,
        'wins' => 0,
        'followers' => 0,
        'total_raised' => 0,
        'active_campaigns' => 0,
        'nfts_minted' => 0,
        'supporters' => 0,
    ];
    $nftTiers = $nftTiers ?? collect();
    $otherUsers = $otherUsers ?? collect();
    $otherUsersStats = $otherUsersStats ?? [];
    
    // Get bio
    $bio = optional($profile)->athlete_bio ?? optional($profile)->team_bio_tagline ?? 'No bio available';
    
    // Get school/club name
    $schoolClub = optional($profile)->school_club_name ?? optional($profile)->team_club_name ?? 'N/A';
    
    // Get social links
    $socialLinks = $user->socialLinks ?? collect();
    $instagramLink = $socialLinks->where('social_link_type', 2)->first();
    $facebookLink = $socialLinks->where('social_link_type', 3)->first();
    $twitterLink = $socialLinks->first(function($link) {
        if ($link->social_link_type == 4) {
            $url = strtolower($link->social_link ?? '');
            return strpos($url, 'twitter') !== false || strpos($url, 'x.com') !== false;
        }
        return false;
    });
    
    // Get avatar or initials
    $avatarData = $user->avatar ?? [];
    $hasAvatar = isset($avatarData['id']) && $avatarData['id'];
    $avatar = $hasAvatar ? ($avatarData['original'] ?? $avatarData['thumb'] ?? asset('front/assets/images/user.jpeg')) : null;
    
    // Generate initials if no avatar
    $userInitials = '';
    $initialColorType = 1;
    if (!$hasAvatar) {
        if ($user->name_initials) {
            $userInitials = strtoupper($user->name_initials);
            $initialColorType = $user->name_initial_color_type ?? 1;
        } else {
            $firstName = $user->first_name ?? '';
            $lastName = $user->last_name ?? '';
            $userInitials = strtoupper(mb_substr($firstName, 0, 1) . mb_substr($lastName, 0, 1));
            $nameHash = crc32($user->full_name ?? '');
            $initialColorType = ($nameHash % 8) + 1;
        }
    }
    
    // Format followers
    $followersFormatted = $profileStats['followers'] >= 1000 
        ? number_format($profileStats['followers'] / 1000, 1) . 'K' 
        : $profileStats['followers'];
    
    // Check if verified
    $isVerified = $user->verified ?? false;
    
    // Get primary sport image
    $primarySport = $user->sports->first();
    $sportImage = null;
    if ($userRole === 'team' && $profile && $profile->sport) {
        $sportImageData = optional($profile->sport)->image ?? [];
        if (is_array($sportImageData) && isset($sportImageData['original']) && is_string($sportImageData['original'])) {
            $sportImage = $sportImageData['original'];
        }
    } elseif ($userRole === 'athlete' && $primarySport && $primarySport->sport) {
        $sportImageData = optional($primarySport->sport)->image ?? [];
        if (is_array($sportImageData) && isset($sportImageData['original']) && is_string($sportImageData['original'])) {
            $sportImage = $sportImageData['original'];
        }
    }
@endphp

<!-- Back to Discover Link -->
<div class="discover-profile-back">
    <div class="container-fluid">
        <div class="discover-profile-back-wrapper">
            <a href="{{ route('front.'.$_routePrefix.'.index') }}" class="discover-back-link">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M19 12H5M12 19l-7-7 7-7"/>
                </svg>
                Back to Discover
            </a>
            <div class="discover-profile-role-badge">
                {{ strtoupper($userRole) }}
            </div>
        </div>
    </div>
</div>

<!-- Profile Header -->
<div class="discover-profile-header">
    <div class="container-fluid">
        <div class="discover-profile-header-content">
            <div class="discover-profile-avatar-section">
                @if($hasAvatar && $avatar)
                    <img src="{{ $avatar }}" alt="{{ $user->full_name }}" class="discover-profile-avatar">
                @else
                    <div class="discover-profile-avatar-initials discover-initial-color-{{ $initialColorType }}">
                        {{ $userInitials }}
                    </div>
                @endif
                @if($isVerified)
                    <div class="discover-profile-verified">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg>
                    </div>
                @endif
            </div>
            <div class="discover-profile-info">
                <h1 class="discover-profile-name">
                    {{ ($userRole === 'team') ? $schoolClub : ($user->full_name ?? 'Athlete') }}
                </h1>
                <div class="discover-profile-details">
                    <p class="discover-profile-sport">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#6B46C1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M3 11c0-5.088 2.903-9.436 7-11.622C14.097 1.564 17 5.912 17 11c0 5.088-2.903 9.436-7 11.622C5.903 20.436 3 16.088 3 11z"></path>
                            <path d="M12 11h.01"></path>
                            <path d="M8 11h.01"></path>
                            <path d="M16 11h.01"></path>
                        </svg>
                        {{ $sportName }}
                        @if($positionName)
                            - {{ $positionName }}
                        @endif
                    </p>
                    @if($location)
                        <p class="discover-profile-location">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                                <circle cx="12" cy="10" r="3"></circle>
                            </svg>
                            {{ $location }}
                        </p>
                    @endif
                    @if($userRole == 'athlete' && $schoolClub && $schoolClub !== 'N/A')
                        <p class="discover-profile-school">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                <circle cx="9" cy="7" r="4"></circle>
                                <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                                <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                            </svg>
                            {{ $schoolClub }}
                        </p>
                    @endif
                </div>
            </div>
            <div class="discover-profile-actions">
                <a href="#" class="discover-action-btn discover-btn-follow">Follow</a>
                <a href="#" class="discover-action-btn discover-btn-message">Message</a>
                <a href="#" class="discover-action-btn discover-btn-sponsor">Sponsor</a>
                @if($userRole === 'team')
                    <a href="#" class="discover-action-btn discover-btn-join">Ask to Join</a>
                @else
                    <a href="#" class="discover-action-btn discover-btn-invite">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                            <circle cx="8.5" cy="7" r="4"></circle>
                            <line x1="20" y1="8" x2="20" y2="14"></line>
                            <line x1="23" y1="11" x2="17" y2="11"></line>
                        </svg>
                        Invite to Team
                    </a>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Main Content -->
<div class="discover-profile-content">
    <div class="container-fluid">
        <div class="row">
            <!-- Left Column -->
            <div class="col-sm-8">
                <!-- About Section -->
                <div class="discover-profile-section">
                    <h2>About {{ ($userRole === 'team') ? $schoolClub : ($user->first_name ?? 'Athlete') }}</h2>
                    @php
                        $quote = optional($profile)->athlete_quote ?? optional($profile)->team_quote ?? '"Speed is my passion, excellence is my goal."';
                        if (!str_starts_with($quote, '"')) {
                            $quote = '"' . $quote;
                        }
                        if (!str_ends_with($quote, '"')) {
                            $quote = $quote . '"';
                        }
                    @endphp
                    <p class="discover-profile-quote">{{ $quote }}</p>
                    <p class="discover-profile-description">{{ $bio }}</p>
                    <div class="discover-profile-social-icons">
                        @if($twitterLink)
                            <a href="{{ $twitterLink->social_link }}" target="_blank" class="discover-social-icon-link discover-social-twitter">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
                                </svg>
                            </a>
                        @endif
                        @if($instagramLink)
                            <a href="{{ $instagramLink->social_link }}" target="_blank" class="discover-social-icon-link discover-social-instagram">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                                    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                                    <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
                                </svg>
                            </a>
                        @endif
                    </div>
                </div>

                <!-- Key Stats Section -->
                <div class="discover-profile-section">
                    <h2>Key Stats</h2>
                    <div class="discover-key-stats-grid">
                        <div class="discover-stat-card discover-stat-card-purple">
                            <h3 class="discover-stat-number">{{ $profileStats['matches'] }}</h3>
                            <p class="discover-stat-label">Matches / Events</p>
                        </div>
                        <div class="discover-stat-card discover-stat-card-light-blue">
                            <h3 class="discover-stat-number">{{ $profileStats['wins'] }}</h3>
                            <p class="discover-stat-label">Wins / Medals</p>
                        </div>
                        <div class="discover-stat-card discover-stat-card-white">
                            <h3 class="discover-stat-number">{{ $followersFormatted }}</h3>
                            <p class="discover-stat-label">Followers</p>
                        </div>
                        <div class="discover-stat-card discover-stat-card-white discover-stat-card-green-text">
                            <h3 class="discover-stat-number">{!! \App\Helpers\Helper::price($profileStats['total_raised']) !!}</h3>
                            <p class="discover-stat-label">Total Raised</p>
                        </div>
                        <div class="discover-stat-card discover-stat-card-white discover-stat-card-green-text">
                            <h3 class="discover-stat-number">{{ $profileStats['active_campaigns'] }}</h3>
                            <p class="discover-stat-label">Active Campaigns</p>
                        </div>
                        <div class="discover-stat-card discover-stat-card-orange">
                            <h3 class="discover-stat-number">{{ $profileStats['nfts_minted'] }}</h3>
                            <p class="discover-stat-label">NFTs Minted</p>
                        </div>
                    </div>
                </div>

                <!-- Achievements & Highlights Section -->
                <div class="discover-profile-section">
                    <h2>Achievements & Highlights</h2>
                    <div class="discover-achievements-grid">
                        <div class="discover-achievement-item">
                            <div class="discover-achievement-icon discover-achievement-icon-gold">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"></path>
                                    <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"></path>
                                    <path d="M4 22h16"></path>
                                    <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"></path>
                                    <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"></path>
                                    <path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"></path>
                                </svg>
                            </div>
                            <h4>2024 Regional MVP</h4>
                        </div>
                        <div class="discover-achievement-item">
                            <div class="discover-achievement-icon discover-achievement-icon-gold">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                                </svg>
                            </div>
                            <h4>All-State Player</h4>
                        </div>
                        <div class="discover-achievement-item">
                            <div class="discover-achievement-icon discover-achievement-icon-red">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <circle cx="12" cy="12" r="6"></circle>
                                    <circle cx="12" cy="12" r="2"></circle>
                                </svg>
                            </div>
                            <h4>Junior Nationals 2023</h4>
                        </div>
                    </div>
                </div>

                <!-- Teams Section (for athletes only) -->
                @if($userRole === 'athlete')
                <div class="discover-profile-section">
                    <h3>CURRENT TEAM</h3>
                    <div class="discover-team-card">
                        <div class="discover-team-logo discover-team-logo-green">SA</div>
                        <div class="discover-team-info">
                            <h4>Stanford Athletics</h4>
                            <p>Track & Field</p>
                        </div>
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M5 12h14M12 5l7 7-7 7"></path>
                        </svg>
                    </div>
                    <h3 class="discover-section-subtitle">PAST TEAMS</h3>
                    <div class="discover-team-card">
                        <div class="discover-team-logo discover-team-logo-green">OY</div>
                        <div class="discover-team-info">
                            <h4>Oakland Youth Track</h4>
                            <p>Track & Field</p>
                        </div>
                    </div>
                </div>
                @endif

                <!-- Digital Collectibles / NFTs Section -->
                @if($nftTiers->count() > 0)
                <div class="discover-profile-section">
                    <h2>Digital Collectibles / NFTs</h2>
                    <div class="row">
                        @foreach($nftTiers as $nftTier)
                            @php
                                $campaign = $nftTier->campaign ?? null;
                                $campaignImage = asset('front/assets/images/placeholder-campaign.jpg');
                                if ($campaign && isset($campaign->campaign_image)) {
                                    $imgData = is_array($campaign->campaign_image) ? $campaign->campaign_image : [];
                                    $campaignImage = $imgData['original'] ?? $imgData['thumb'] ?? $campaignImage;
                                }
                                $nftTitle = 'NFT Tier';
                                if (isset($nftTier->rewards_perks_note)) {
                                    $lines = explode("\n", $nftTier->rewards_perks_note);
                                    if (isset($lines[0]) && strpos($lines[0], 'Title:') === 0) {
                                        $nftTitle = str_replace('Title: ', '', $lines[0]);
                                    }
                                }
                                $sold = 0;
                                $total = $nftTier->nft_quantity ?? 100;
                            @endphp
                            <div class="col-sm-6">
                                <div class="discover-nft-card">
                                    <div class="discover-nft-icon">
                                        @if($loop->first)
                                            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"></path>
                                                <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"></path>
                                                <path d="M4 22h16"></path>
                                                <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"></path>
                                                <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"></path>
                                                <path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"></path>
                                            </svg>
                                        @else
                                            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                                            </svg>
                                        @endif
                                    </div>
                                    <h3 class="discover-nft-title">{{ $nftTitle }}</h3>
                                    <p class="discover-nft-price">{!! \App\Helpers\Helper::price($nftTier->nft_price) !!}</p>
                                    <p class="discover-nft-sold">{{ $sold }} / {{ $total }} sold</p>
                                    <div class="discover-nft-progress">
                                        <div class="discover-nft-progress-bar">
                                            <div class="discover-nft-progress-fill" style="--progress: {{ $total > 0 ? ($sold / $total * 100) : 0 }}%"></div>
                                        </div>
                                    </div>
                                    <a href="#" class="discover-nft-button">Buy NFT</a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                @endif

                <!-- Fans & Supporters Section -->
                <div class="discover-profile-section">
                    <h2>Fans & Supporters</h2>
                    <p class="discover-supporters-count">{{ $profileStats['supporters'] }} supporters</p>
                    <div class="discover-supporters-avatars">
                        <div class="discover-supporter-avatar discover-initial-color-1">JO</div>
                        <div class="discover-supporter-avatar discover-initial-color-2">MH</div>
                        <div class="discover-supporter-avatar discover-initial-color-3">SL</div>
                        <div class="discover-supporter-avatar discover-initial-color-4">AR</div>
                        <div class="discover-supporter-avatar discover-initial-color-5">TC</div>
                        @if($profileStats['supporters'] > 5)
                            <div class="discover-supporter-more">+{{ $profileStats['supporters'] - 5 }}</div>
                        @endif
                    </div>
                </div>

                <!-- Posts & Updates Section -->
                <div class="discover-profile-section">
                    <h2>Posts & Updates</h2>
                    <div class="discover-posts-list">
                        <div class="discover-post-item">
                            <p class="discover-post-text">Just finished training camp! Ready for the upcoming season.</p>
                            <div class="discover-post-meta">
                                <span class="discover-post-date">2 days ago</span>
                                <span class="discover-post-likes">234 likes</span>
                            </div>
                        </div>
                        <div class="discover-post-item">
                            <p class="discover-post-text">Thank you to all my supporters who contributed to my campaign!</p>
                            <div class="discover-post-meta">
                                <span class="discover-post-date">1 week ago</span>
                                <span class="discover-post-likes">512 likes</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Trust & Transparency Section -->
                <div class="discover-profile-section">
                    <div class="discover-trust-grid">
                        <div class="discover-trust-item">
                            <div class="discover-trust-icon discover-trust-icon-green">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                                    <polyline points="20 6 9 17 4 12"></polyline>
                                </svg>
                            </div>
                            <div class="discover-trust-content">
                                <h4>Verified Profile</h4>
                                <p>Identity confirmed</p>
                            </div>
                        </div>
                        <div class="discover-trust-item">
                            <div class="discover-trust-icon discover-trust-icon-green">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
                                    <polyline points="17 6 23 6 23 12"></polyline>
                                </svg>
                            </div>
                            <div class="discover-trust-content">
                                <h4>85% Success Rate</h4>
                                <p>Campaign completion</p>
                            </div>
                        </div>
                        <div class="discover-trust-item">
                            <div class="discover-trust-icon discover-trust-icon-purple">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                    <polyline points="14 2 14 8 20 8"></polyline>
                                    <line x1="16" y1="13" x2="8" y2="13"></line>
                                    <line x1="16" y1="17" x2="8" y2="17"></line>
                                    <polyline points="10 9 9 9 8 9"></polyline>
                                </svg>
                            </div>
                            <div class="discover-trust-content">
                                <h4>4 Past Campaigns</h4>
                                <p>Completed successfully</p>
                            </div>
                        </div>
                        <div class="discover-trust-item">
                            <div class="discover-trust-icon discover-trust-icon-green">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                                    <polyline points="20 6 9 17 4 12"></polyline>
                                </svg>
                            </div>
                            <div class="discover-trust-content">
                                <h4>12 Goals Achieved</h4>
                                <p>Impact delivered</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Discover More Section -->
                @if($otherUsers->count() > 0)
                <div class="discover-profile-section">
                    <h2>Discover More {{ ucfirst($userRole) }}s</h2>
                    <div class="discover-more-grid">
                        @foreach($otherUsers as $otherUser)
                            @include('front.'.$_routePrefix.'.grid_list', ['user' => $otherUser, 'usersStats' => $otherUsersStats])
                        @endforeach
                    </div>
                </div>
                @endif
            </div>
            
            <!-- Right Column -->
            <div class="col-sm-4">
                <!-- Active Fundraising Campaigns -->
                @if($campaigns->count() > 0)
                <div class="discover-sidebar-section">
                    <h2>Active Fundraising Campaigns</h2>
                    @foreach($campaigns as $campaign)
                        @php
                            $campaignProgress = $campaign->fund_target > 0 ? ($campaign->fund_raised / $campaign->fund_target) * 100 : 0;
                            $campaignProgress = min(100, max(0, $campaignProgress));
                            $sportIcon = asset('front/assets/images/ball.png');
                            if ($campaign->category && isset($campaign->category->image)) {
                                $catImg = is_array($campaign->category->image) ? ($campaign->category->image['thumb'] ?? $campaign->category->image['original'] ?? '') : '';
                                if ($catImg) {
                                    $sportIcon = $catImg;
                                }
                            }
                        @endphp
                        <div class="discover-campaign-item">
                            <div class="discover-campaign-title">
                                <img src="{{ $sportIcon }}" alt="">
                                {{ $campaign->title }}
                            </div>
                            <div class="discover-campaign-progress">
                                <div class="discover-campaign-progress-bar">
                                    <div class="discover-campaign-progress-fill" style="--progress: {{ $campaignProgress }}%"></div>
                                </div>
                            </div>
                            <div class="discover-campaign-footer">
                                <div>{!! \App\Helpers\Helper::price($campaign->fund_raised) !!} / {!! \App\Helpers\Helper::price($campaign->fund_target) !!}</div>
                                <div class="discover-campaign-percentage">{{ number_format($campaignProgress, 0) }}%</div>
                            </div>
                            <a href="{{ route('front.campaigns.show', ['id' => $campaign->id]) }}" class="discover-campaign-button">Click here to contribute</a>
                        </div>
                    @endforeach
                </div>
                @endif
                
                <!-- Sponsors & Partners -->
                <div class="discover-sidebar-section">
                    <h2>Sponsors & Partners</h2>
                    <div class="discover-sponsor-cards">
                        <div class="discover-sponsor-card">
                            <div class="discover-sponsor-icon discover-sponsor-icon-purple">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <polyline points="20 12 20 22 4 22 4 12"></polyline>
                                    <rect x="2" y="7" width="20" height="5"></rect>
                                    <line x1="12" y1="22" x2="12" y2="7"></line>
                                    <path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path>
                                    <path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path>
                                </svg>
                            </div>
                            <h3>Product Sponsor</h3>
                            <p>Primary branding across all athlete materials and events</p>
                        </div>
                        <div class="discover-sponsor-card">
                            <div class="discover-sponsor-icon discover-sponsor-icon-green">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <line x1="12" y1="6" x2="12" y2="18"></line>
                                    <line x1="6" y1="12" x2="18" y2="12"></line>
                                </svg>
                            </div>
                            <h3>Cash Sponsor</h3>
                            <p>Logo placement on uniforms and training gear</p>
                        </div>
                    </div>
                </div>
                
                <!-- Support Section -->
                <div class="discover-sidebar-section">
                    <h4>Support {{ ($userRole == 'team') ? $schoolClub : ($user->first_name ?? 'Athlete') }}</h4>
                    <p>{{ $profileStats['supporters'] }} supporters have contributed so far.</p>
                    <div class="discover-support-buttons">
                        <a href="#" class="discover-support-btn discover-support-btn-nft">Support via NFT</a>
                        <a href="{{ route('profile.sponsorships.create', ['sp' => $user->username]) }}" class="discover-support-btn discover-support-btn-sponsor">Become a Sponsor</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection