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

<section class="create-account-section">
    <div class="create-account-title">
        <h1>Explore Athletes / Teams</h1>
        <p>Discover and connect with top athletes and teams from around the world.</p>
    </div>

    <div class="container">
        <div class="account-form-panel explore-section">
            <div class="account-form-title">

                <div class="account-form-panel-inner ">
                    <div class="row account-form-row">
                        <div class="col-sm-4">
                            <div class="mb-3">

                                <div class="account-email-fld">
                                    <input type="text" class="form-control email-input" id="exampleInputEmail1"
                                        aria-describedby="emailHelp" placeholder="e.g. Athletes or Teams">
                                    <button class="verify-email-btn"><svg xmlns="http://www.w3.org/2000/svg"
                                            width="20" height="20" viewBox="0 0 20 20" fill="none">
                                            <path
                                                d="M19 19L14.66 14.66M17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9Z"
                                                stroke="#FF972B" stroke-width="2" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                        </svg></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</section>

<section class="athelets">
    <div class="container">


        <div class="athelet-sec-top">
            <div class="grid-list">
                <a href="javascript:void(0)" class="grid-view-btn active">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none">
                        <path
                            d="M28 2.54545V12.0909C28 12.2597 27.933 12.4215 27.8136 12.5409C27.6943 12.6602 27.5324 12.7273 27.3636 12.7273H15.2727V0.636364C15.2727 0.467589 15.3398 0.305728 15.4591 0.186387C15.5785 0.0670454 15.7403 0 15.9091 0H25.4545C26.1296 0 26.7771 0.268181 27.2545 0.745546C27.7318 1.22291 28 1.87036 28 2.54545ZM12.0909 0H2.54545C1.87036 0 1.22291 0.268181 0.745546 0.745546C0.268181 1.22291 0 1.87036 0 2.54545V12.0909C0 12.2597 0.0670454 12.4215 0.186387 12.5409C0.305728 12.6602 0.467589 12.7273 0.636364 12.7273H12.7273V0.636364C12.7273 0.467589 12.6602 0.305728 12.5409 0.186387C12.4215 0.0670454 12.2597 0 12.0909 0ZM27.3636 15.2727H15.2727V27.3636C15.2727 27.5324 15.3398 27.6943 15.4591 27.8136C15.5785 27.933 15.7403 28 15.9091 28H25.4545C26.1296 28 26.7771 27.7318 27.2545 27.2545C27.7318 26.7771 28 26.1296 28 25.4545V15.9091C28 15.7403 27.933 15.5785 27.8136 15.4591C27.6943 15.3398 27.5324 15.2727 27.3636 15.2727ZM0 15.9091V25.4545C0 26.1296 0.268181 26.7771 0.745546 27.2545C1.22291 27.7318 1.87036 28 2.54545 28H12.0909C12.2597 28 12.4215 27.933 12.5409 27.8136C12.6602 27.6943 12.7273 27.5324 12.7273 27.3636V15.2727H0.636364C0.467589 15.2727 0.305728 15.3398 0.186387 15.4591C0.0670454 15.5785 0 15.7403 0 15.9091Z"
                            fill="#555" />
                    </svg>
                </a>
                <a href="javascript:void(0)" class="list-view-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none">
                        <path
                            d="M16.6389 2.19444H26.75M16.6389 9.41667H26.75M16.6389 18.0833H26.75M16.6389 25.3056H26.75M2.19444 0.75H9.41667C10.2144 0.75 10.8611 1.3967 10.8611 2.19444V9.41667C10.8611 10.2144 10.2144 10.8611 9.41667 10.8611H2.19444C1.3967 10.8611 0.75 10.2144 0.75 9.41667V2.19444C0.75 1.3967 1.3967 0.75 2.19444 0.75ZM2.19444 16.6389H9.41667C10.2144 16.6389 10.8611 17.2856 10.8611 18.0833V25.3056C10.8611 26.1033 10.2144 26.75 9.41667 26.75H2.19444C1.3967 26.75 0.75 26.1033 0.75 25.3056V18.0833C0.75 17.2856 1.3967 16.6389 2.19444 16.6389Z"
                            stroke="#555555" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                </a>
            </div>
            <h2>
                @if($currentRole === 'team')
                    Teams
                @elseif($currentRole === 'athlete')
                    Athletes
                @else
                    Athletes & Teams
                @endif
            </h2>
            <div class="subtitle">
                @if($currentRole === 'team')
                    Discover talented teams and explore their achievements, stats, and performance.
                @elseif($currentRole === 'athlete')
                    Discover talented athletes and explore their skills, stats, and achievements.
                @else
                    Discover talented athletes and teams and explore their skills, stats, and achievements.
                @endif
            </div>

            <div class="controls">

                <div class="form-box">
                    <div class="filter-sec">
                        <label>Filter by</label>
                        <select class="form-select select2" id="filter-by">
                            <option value="">-- Select --</option>
                            <option value="athlete" {{ ($currentRole ?? 'athlete') === 'athlete' ? 'selected' : '' }}>Athlete</option>
                            <option value="team" {{ ($currentRole ?? 'athlete') === 'team' ? 'selected' : '' }}>Team</option>
                            <option value="sport">Sport</option>
                            <option value="country">Country</option>
                            <option value="gender">Gender</option>
                        </select>
                    </div>
                </div>

                <!-- Sport Filter (shown when Filter by = Sport) -->
                <div class="form-box" id="sport-filter-box" style="display:none;">
                    <div class="filter-sec">
                        <label>Select Sport</label>
                        <select class="form-select select2" id="filter-by-sport">
                            <option value="">-- All Sports --</option>
                            @foreach($sports as $sportSlug => $sportTitle)
                                <option value="{{ $sportSlug }}" {{ $selectedSportSlug == $sportSlug ? 'selected' : '' }}>
                                    {{ $sportTitle }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- Country Filter (shown when Filter by = Country) -->
                <div class="form-box" id="country-filter-box" style="display:none;">
                    <div class="filter-sec">
                        <label>Select Country</label>
                        <select class="form-select select2" id="filter-by-country">
                            <option value="">-- All Countries --</option>
                            @foreach($countries as $countryCode => $countryName)
                                <option value="{{ $countryCode }}" {{ $selectedCountryCode == $countryCode ? 'selected' : '' }}>
                                    {{ $countryName }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- Gender Filter (shown when Filter by = Gender) -->
                <div class="form-box" id="gender-filter-box" style="display:none;">
                    <div class="filter-sec">
                        <label>Select Gender</label>
                        <select class="form-select select2" id="filter-by-gender">
                            <option value="">-- All Genders --</option>
                            <option value="male" {{ $selectedGender == 'male' ? 'selected' : '' }}>Male</option>
                            <option value="female" {{ $selectedGender == 'female' ? 'selected' : '' }}>Female</option>
                        </select>
                    </div>
                </div>


                <div class="form-box">
                    <div class="filter-sec">
                        <label>Sort by</label>
                        <select class="form-select select2" id="sort-by">
                            <option value="">-- Select --</option>
                            <option value="name_asc">Name (A-Z)</option>
                            <option value="name_desc">Name (Z-A)</option>
                            <option value="newest">Newest First</option>
                            <option value="oldest">Oldest First</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>


        <div class="grid-view-container">
            @if($data && (is_array($data) ? count($data) > 0 : $data->count() > 0))
                @foreach($data as $user)
                    @php
                        // Detect user's actual role from their data
                        $userRole = isset($user->role_title) ? \Illuminate\Support\Str::slug($user->role_title) : '';
                        
                        // Get appropriate profile based on detected user role (not global $currentRole)
                        $profile = ($userRole === 'team') ? $user->teamProfile : $user->athleteProfile;
                        $primarySport = $user->sports->first();
                        // Avatar - get from accessor (returns array with 'original', 'thumb', etc.)
                        $avatarData = $user->avatar ?? [];
                        $avatar = is_array($avatarData) ? ($avatarData['original'] ?? asset('assets/images/thumb1.png')) : asset('assets/images/thumb1.png');
                        
                        // Cover image
                        $coverImage = ($user->profile_pic && isset($user->profile_pic->file_path)) ? $user->profile_pic->file_path : asset('assets/images/card-2.png');
                        
                        // Get location
                        $location = '';
                        if ($profile) {
                            $locationParts = array_filter([
                                optional($profile->city)->city_name,
                                optional($profile->state)->state_name,
                                optional($profile->country)->country_name
                            ]);
                            $location = implode(', ', $locationParts);
                        }
                        
                        // Get social link icon
                        $socialIcon = null;
                        if ($user->socialLinks && $user->socialLinks->count() > 0) {
                            $firstLink = $user->socialLinks->first();
                            switch($firstLink->social_link_type) {
                                case 1: $socialIcon = asset('front/assets/images/youtube.png'); break;
                                case 2: $socialIcon = asset('front/assets/images/instagram.png'); break;
                                case 3: $socialIcon = asset('front/assets/images/facebook.png'); break;
                            }
                        }
                        
                        // Get gender icon
                        $genderIcon = $user->gender == 1 ? asset('front/assets/images/male.svg') : asset('front/assets/images/female.svg');

                        // Get sport info and icon from master_sports (use detected user role, not global currentRole)
                        $sportName = '';
                        $sportIcon = asset('img/no-image.png'); // Default fallback
                        $positionName = '';
                        
                        if ($userRole === 'team' && $profile && $profile->sport) {
                            $sportName = optional($profile->sport)->title ?? 'Team';
                            // Get sport icon from master_sports -> files table (image accessor returns array)
                            $sportImageData = $profile->sport->image ?? [];
                            if (is_array($sportImageData) && isset($sportImageData['original']) && is_string($sportImageData['original'])) {
                                $sportIcon = $sportImageData['original'];
                            }
                        } elseif ($userRole === 'athlete' && $primarySport && $primarySport->sport) {
                            // $primarySport is UserMasterSportMap, need to access ->sport
                            $sportName = optional($primarySport->sport)->title ?? '';
                            // Get sport icon from master_sports -> files table (image accessor returns array)
                            $sportImageData = optional($primarySport->sport)->image ?? [];
                            if (is_array($sportImageData) && isset($sportImageData['original']) && is_string($sportImageData['original'])) {
                                $sportIcon = $sportImageData['original'];
                            }
                            if ($profile && $profile->position) {
                                $positionName = optional($profile->position)->title ?? '';
                            }
                        }                        
                        $bio = optional($profile)->athlete_bio ?? optional($profile)->team_bio_tagline ?? 'No bio available';
                        $schoolClub = optional($profile)->school_club_name ?? optional($profile)->team_club_name ?? 'N/A';
                        
                        // Campaign summary samples (30 random options)
                        $campaignSummaries = [
                            'Road to State Finals – Raising $2,500 for training camp',
                            'Help Me Reach Nationals – Need $3,000 for travel and registration',
                            'Championship Dreams – Fundraising $5,000 for elite coaching',
                            'College Prep Journey – Raising $4,500 for showcase tournaments',
                            'Team Equipment Drive – Need $6,000 for new uniforms and gear',
                            'Summer Training Fund – Raising $2,000 for intensive camp',
                            'International Tournament – Need $8,000 for travel expenses',
                            'New Season Goals – Fundraising $3,500 for facility fees',
                            'Youth League Support – Raising $2,500 for community program',
                            'Athletic Scholarship Quest – Need $5,500 for combine training',
                            'Regional Competition Fund – Raising $4,000 for entry fees',
                            'Skills Development – Need $3,200 for specialized coaching',
                            'Team Tournament Tour – Fundraising $7,000 for multi-state travel',
                            'Olympic Dreams Begin – Raising $10,000 for elite training program',
                            'Next Level Performance – Need $4,800 for sports science support',
                            'Division 1 Ambitions – Raising $6,500 for recruiting exposure',
                            'Playoff Push 2024 – Fundraising $3,000 for playoff preparation',
                            'Youth Sports Initiative – Need $2,800 for program expansion',
                            'State Championship Run – Raising $5,200 for tournament costs',
                            'Athletic Excellence Program – Need $4,200 for year-round training',
                            'Community Team Building – Fundraising $3,600 for team development',
                            'Professional Aspirations – Raising $9,000 for pro-level coaching',
                            'Season Success Fund – Need $3,300 for competition expenses',
                            'Rising Star Campaign – Raising $4,700 for showcase participation',
                            'Athletic Dreams 2024 – Need $5,800 for comprehensive training',
                            'Tournament Victory Fund – Fundraising $4,100 for championship prep',
                            'Elite Athlete Development – Raising $7,500 for specialized program',
                            'Championship Season – Need $3,900 for complete season support',
                            'Future Champions Fund – Raising $5,400 for youth development',
                            'Competitive Edge Campaign – Need $6,200 for performance training'
                        ];
                        
                        // Demo campaign data (for demonstration purposes)
                        $campaignSummary = $campaignSummaries[array_rand($campaignSummaries)];
                        $demoRaised = rand(1000, 50000);
                        $demoGoal = rand(60000, 100000);
                        $demoPercentage = round(($demoRaised / $demoGoal) * 100);
                        $demoDaysLeft = rand(10, 90);
                    @endphp
                    
                    @if($loop->first || $loop->iteration % 3 == 1)
                        <div class="grid">
                    @endif
                    
                    <!-- CARD -->
                    <div class="card">
                        <div class="card-img-sec">
                            <div class="card-img">
                                <div class="card-img-banner">
                                    <img src="{{ $sportIcon }}" alt="{{ $user->full_name }}" >
                                </div>
                            </div>
                            <div class="card-text">
                                <div class="card-t-area">
                                    <div class="card-img-thumb"><img src="{{ $avatar }}" alt="{{ $sportName }}" height="61"></div>
                                    <div class="small-ath-txt">
                                        <div class="name">
                                            {{ $user->full_name }} 
                                            <img src="{{ $genderIcon }}" alt="Gender">
                                        </div>
                                        <div class="sport">
                                            @if($sportName)
                                                <!-- <img src="{{ $sportIcon }}" class="mr-2"> -->
                                                {{ $sportName }}
                                                @if($positionName) – {{ $positionName }} @endif
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                            @if($socialIcon)
                                <div class="icon-athe">
                                    <a href="{{ $user->socialLinks->first()->social_link ?? '#' }}" target="_blank">
                                        <img src="{{ $socialIcon }}" alt="Social">
                                    </a>
                                </div>
                            @endif
                        </div>

                        <div class="card-body">
                            <div class="label">Short Bio</div>
                            <div class="info">{{ Str::limit($bio, 100) }}</div>

                            @if($location)
                                <div class="info">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="11" height="14" viewBox="0 0 11 14" fill="none">
                                        <path d="M5.5 0C4.04182 0.00165422 2.64383 0.581654 1.61274 1.61276C0.581648 2.64386 0.00165421 4.04186 0 5.50006C0 10.2064 5 13.7608 5.21313 13.9095C5.2972 13.9684 5.39735 14 5.5 14C5.60265 14 5.7028 13.9684 5.78687 13.9095C6 13.7608 11 10.2064 11 5.50006C10.9983 4.04186 10.4184 2.64386 9.38726 1.61276C8.35617 0.581654 6.95818 0.00165422 5.5 0ZM5.5 3.50004C5.89556 3.50004 6.28224 3.61733 6.61114 3.8371C6.94004 4.05686 7.19638 4.36922 7.34776 4.73468C7.49913 5.10014 7.53874 5.50227 7.46157 5.89024C7.3844 6.27821 7.19392 6.63457 6.91421 6.91428C6.63451 7.19399 6.27814 7.38447 5.89018 7.46165C5.50222 7.53882 5.10009 7.49921 4.73463 7.34783C4.36918 7.19646 4.05682 6.94011 3.83706 6.61121C3.6173 6.2823 3.5 5.89562 3.5 5.50006C3.5 4.96962 3.71071 4.4609 4.08579 4.08583C4.46086 3.71075 4.96957 3.50004 5.5 3.50004Z" fill="#FF972B" />
                                    </svg> {{ $location }}
                                </div>
                            @endif

                            <div class="school">
                                <img src="{{ asset('front/assets/images/celebration.png') }}">
                                <div class="cam-sec">
                                    <strong>School / Club</strong>
                                    {{ $schoolClub }}
                                </div>
                            </div>

                            <div class="campaign">
                                <strong>Campaign Summary</strong><br>
                                <span>{{ $campaignSummary }}</span>
                            </div>

                            <div class="progress-wrap">
                                <div class="progress-text">
                                    <div>Raised : ${{ number_format($demoRaised) }}</div>
                                    <div>{{ $demoPercentage }}%</div>
                                </div>
                                <div class="bar">
                                    <div class="fill" style="width:{{ $demoPercentage }}%"></div>
                                </div>
                                <div class="goal">Goal : <strong style="color:#f97316">${{ number_format($demoGoal) }}</strong></div>
                            </div>

                            <div class="foot-part">
                                <div class="days">
                                    <img src="{{ asset('front/assets/images/Vector.svg') }}"> {{ $demoDaysLeft }} days left
                                </div>
                                <button class="foot-btn" onclick="window.location.href='{{ route('front.athletes.index') }}/{{ $user->username ?? $user->id }}'">
                                    View Profile 
                                    <svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8" fill="none">
                                        <path d="M22.3536 4.03556C22.5488 3.8403 22.5488 3.52372 22.3536 3.32845L19.1716 0.146473C18.9763 -0.0487892 18.6597 -0.0487892 18.4645 0.146473C18.2692 0.341735 18.2692 0.658318 18.4645 0.85358L21.2929 3.68201L18.4645 6.51043C18.2692 6.7057 18.2692 7.02228 18.4645 7.21754C18.6597 7.4128 18.9763 7.4128 19.1716 7.21754L22.3536 4.03556ZM0 3.68201V4.18201H22V3.68201V3.18201H0V3.68201Z" fill="#3F3F3F"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    @if($loop->iteration % 3 == 0 || $loop->last)
                        </div>
                    @endif
                @endforeach

                <!-- Pagination -->
                <div class="pagination-wrapper">
                    {{ $data->links() }}
                </div>
            @else
                <div class="alert alert-info">
                    <p>No results found.</p>
                </div>
            @endif

            <div class="load-more-btn" style="display:none;">Load More</div>
        </div>

        <!-- List View Container -->
        <div class="list-view-container">
            @if($data && (is_array($data) ? count($data) > 0 : $data->count() > 0))
                <div class="list">
                    @foreach($data as $user)
                        @php
                            // Detect user's actual role from their data
                            $userRole = isset($user->role_title) ? \Illuminate\Support\Str::slug($user->role_title) : '';
                            
                            // Get appropriate profile based on detected user role (not global $currentRole)
                            $profile = ($userRole === 'team') ? $user->teamProfile : $user->athleteProfile;
                            
                            // Avatar - get from accessor (returns array with 'original', 'thumb', etc.)
                            $avatarData = $user->avatar ?? [];
                            $avatar = is_array($avatarData) ? ($avatarData['original'] ?? asset('front/assets/images/thumb1.png')) : asset('front/assets/images/thumb1.png');

                            // Build location string
                            $location = '';
                            if ($profile) {
                                $locationParts = array_filter([
                                    optional($profile->city)->city_name,
                                    optional($profile->state)->state_name,
                                    optional($profile->country)->country_name
                                ]);
                                $location = implode(', ', $locationParts);
                            }
                            
                            // Get primary sport info from user_master_sport_maps -> master_sports
                            $primarySport = $user->sports->first();
                            $sportName = 'N/A';
                            $sportIcon = asset('front/assets/images/default-sport.png');

                            if ($primarySport && $primarySport->sport) {
                                // $primarySport is UserMasterSportMap, access ->sport for MasterSport
                                $sportName = optional($primarySport->sport)->title ?? 'N/A';
                                
                                // Get sport icon from master_sports -> files table (image accessor returns array)
                                $sportImageData = optional($primarySport->sport)->image ?? [];
                                if (is_array($sportImageData) && isset($sportImageData['original']) && is_string($sportImageData['original'])) {
                                    $sportIcon = $sportImageData['original'];
                                }
                            }
                            
                            // Position for athletes (use detected user role, not global currentRole)
                            $position = '';
                            if ($userRole === 'athlete' && $profile && $profile->position) {
                                $position = ' - ' . optional($profile->position)->title;
                            }
                            
                            // Gender icon
                            $genderIcon = ($user->gender == 1) 
                                ? asset('front/assets/images/male.svg') 
                                : asset('front/assets/images/female.svg');
                            
                            // Bio text
                            $bio = optional($profile)->athlete_bio ?? optional($profile)->team_bio_tagline ?? 'No bio available';
                            
                            // School/Club name
                            $schoolClub = optional($profile)->school_club_name ?? optional($profile)->team_club_name ?? 'N/A';
                            
                            // Get first social link for display
                            $socialLink = $user->socialLinks->first();
                            $socialIcon = '';
                            if ($socialLink) {
                                switch($socialLink->social_link_type) {
                                    case 1: // YouTube
                                        $socialIcon = asset('front/assets/images/youtube.png');
                                        break;
                                    case 2: // Instagram
                                        $socialIcon = asset('front/assets/images/instagram.png');
                                        break;
                                    case 3: // Facebook
                                        $socialIcon = asset('front/assets/images/facebook.png');
                                        break;
                                    default:
                                        $socialIcon = asset('front/assets/images/link.png');
                                }
                            }
                            
                            // Campaign summary samples (30 random options)
                            $campaignSummaries = [
                                'Road to State Finals – Raising $2,500 for training camp',
                                'Help Me Reach Nationals – Need $3,000 for travel and registration',
                                'Championship Dreams – Fundraising $5,000 for elite coaching',
                                'College Prep Journey – Raising $4,500 for showcase tournaments',
                                'Team Equipment Drive – Need $6,000 for new uniforms and gear',
                                'Summer Training Fund – Raising $2,000 for intensive camp',
                                'International Tournament – Need $8,000 for travel expenses',
                                'New Season Goals – Fundraising $3,500 for facility fees',
                                'Youth League Support – Raising $2,500 for community program',
                                'Athletic Scholarship Quest – Need $5,500 for combine training',
                                'Regional Competition Fund – Raising $4,000 for entry fees',
                                'Skills Development – Need $3,200 for specialized coaching',
                                'Team Tournament Tour – Fundraising $7,000 for multi-state travel',
                                'Olympic Dreams Begin – Raising $10,000 for elite training program',
                                'Next Level Performance – Need $4,800 for sports science support',
                                'Division 1 Ambitions – Raising $6,500 for recruiting exposure',
                                'Playoff Push 2024 – Fundraising $3,000 for playoff preparation',
                                'Youth Sports Initiative – Need $2,800 for program expansion',
                                'State Championship Run – Raising $5,200 for tournament costs',
                                'Athletic Excellence Program – Need $4,200 for year-round training',
                                'Community Team Building – Fundraising $3,600 for team development',
                                'Professional Aspirations – Raising $9,000 for pro-level coaching',
                                'Season Success Fund – Need $3,300 for competition expenses',
                                'Rising Star Campaign – Raising $4,700 for showcase participation',
                                'Athletic Dreams 2024 – Need $5,800 for comprehensive training',
                                'Tournament Victory Fund – Fundraising $4,100 for championship prep',
                                'Elite Athlete Development – Raising $7,500 for specialized program',
                                'Championship Season – Need $3,900 for complete season support',
                                'Future Champions Fund – Raising $5,400 for youth development',
                                'Competitive Edge Campaign – Need $6,200 for performance training'
                            ];
                            
                            // Demo campaign data (for demonstration purposes)
                            $campaignSummary = $campaignSummaries[array_rand($campaignSummaries)];
                            $demoRaised = rand(1000, 50000);
                            $demoGoal = rand(60000, 100000);
                            $demoPercentage = round(($demoRaised / $demoGoal) * 100);
                            $demoDaysLeft = rand(10, 90);
                        @endphp

                        <div class="card-list">
                            <div class="list-top">
                                <div class="row">
                                    <div class="col-sm-5">
                                        <div class="img-info">
                                            <div class="img-wrap">
                                                <img src="{{ $avatar }}" alt="{{ $user->full_name }}" height="120">
                                            </div>
                                            <div class="info-text">
                                                <h2>{{ $user->full_name }} <img src="{{ $genderIcon }}" alt=""></h2>
                                                <p>
                                                    <!-- <img src="{{ $sportIcon }}" alt="" srcset=""> -->
                                                    {{ $sportName }}{{ $position }}
                                                </p>
                                                @if($location)
                                                    <p class="location-text">
                                                        <img src="{{ asset('front/assets/images/location.svg') }}" alt="">
                                                        {{ $location }}
                                                    </p>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="short-bio">
                                            <h2>Short Bio</h2>
                                            <p>{{ Str::limit($bio, 150) }}</p>
                                            @if($socialIcon)
                                                <div class="scial-icon">
                                                    <a href="{{ $socialLink->social_link }}" target="_blank">
                                                        <img src="{{ $socialIcon }}" alt="">
                                                    </a>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="school-club">
                                            <div class="sc-icon">
                                                <img src="{{ asset('front/assets/images/celebration.png') }}" alt="">
                                            </div>
                                            <div class="sc-info">
                                                <h2>School / Club</h2>
                                                <p>{{ $schoolClub }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="camp-summary">
                                <h2>Campaign Summary</h2>
                                <p>{{ $campaignSummary }}</p>
                            </div>
                            <div class="progress-wrap">
                                <div class="progress-text">
                                    <div>Raised : ${{ number_format($demoRaised) }}</div>
                                    <div>{{ $demoPercentage }}%</div>
                                </div>
                                <div class="bar">
                                    <div class="fill" style="width:{{ $demoPercentage }}%"></div>
                                </div>
                                <div class="goal">Goal : <strong style="color:#f97316">${{ number_format($demoGoal) }}</strong></div>
                            </div>
                            <div class="foot-part">
                                <div class="days">
                                    <img src="{{ asset('front/assets/images/Vector.svg') }}"> {{ $demoDaysLeft }} days left
                                </div>
                                <a href="{{ route('front.athletes.index') }}/{{ $user->username }}" class="foot-btn">
                                    View Profile 
                                    <svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8" fill="none">
                                        <path d="M22.3536 4.03556C22.5488 3.8403 22.5488 3.52372 22.3536 3.32845L19.1716 0.146473C18.9763 -0.0487892 18.6597 -0.0487892 18.4645 0.146473C18.2692 0.341735 18.2692 0.658318 18.4645 0.85358L21.2929 3.68201L18.4645 6.51043C18.2692 6.7057 18.2692 7.02228 18.4645 7.21754C18.6597 7.4128 18.9763 7.4128 19.1716 7.21754L22.3536 4.03556ZM0 3.68201V4.18201H22V3.68201V3.18201H0V3.68201Z" fill="#3F3F3F"/>
                                    </svg>
                                </a>
                            </div>
                        </div>
                    @endforeach

                    <!-- Pagination -->
                    <div class="pagination-wrapper">
                        {{ $data->links() }}
                    </div>

                    <div class="load-more-btn" style="display:none;">Load More</div>
                </div>
            @else
                <div class="alert alert-info">
                    <p>No results found.</p>
                </div>
            @endif

        </div>

    </div>
</section>

@endsection

@push('page_script')
    <!-- Discover Page - Filter & View Toggle JavaScript -->
    <script src="{{ asset('front/assets/js/discover.js') }}"></script>
@endpush