@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" style="position: relative;">
                                    <input type="text" class="form-control email-input" id="athleteSearch"
                                        aria-describedby="emailHelp" placeholder="e.g. Athletes or Teams" autocomplete="off" value="{{ request('search') ?? '' }}">
                                    <button class="clear-search-btn" id="clearSearch" style="display: {{ request('search') ? 'flex' : 'none' }};">
                                        <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">
                                            <line x1="18" y1="6" x2="6" y2="18"></line>
                                            <line x1="6" y1="6" x2="18" y2="18"></line>
                                        </svg>
                                    </button>
                                    <button class="verify-email-btn" id="searchIcon"><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 id="suggestions" class="athlete-autocomplete-dropdown" style="display:none;"></div>
                                </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>
                        {!! html()->select('sport', (['' => '-- All Sports --'] + $sports), request('sport'))->attributes(['class' => 'form-select select2', 'id' => 'filter-by-sport']) !!}
                        
                    </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>
                        {!! html()->select('country', (['' => '-- All Countries --'] + $countries), request('country'))->attributes(['class' => 'form-select select2', 'id' => 'filter-by-country']) !!}
                        
                    </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>
                        {!! html()->select('gender', (['' => '-- Select --'] + $genderOptions), request('gender'))->attributes(['class' => 'form-select select2', 'id' => 'filter-by-gender']) !!}
                    </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="users__first_name">Name (A-Z)</option>
                            <option value="-users__first_name">Name (Z-A)</option>
                            <option value="-users__created_at">Newest First</option>
                            <option value="users__created_at">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)
                    @include('front.athletes.grid_list', ['user' => $user])
                @endforeach

                <!-- Pagination -->
                <div class="pagination-wrapper">
                    {{ $data->appends(request()->except('page'))->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');
                                }
                            }
                            
                            // Get active campaign for this user
                            $userCampaign = null;
                            if (isset($activeCampaigns[$user->id]) && $activeCampaigns[$user->id]->count() > 0) {
                                $userCampaign = $activeCampaigns[$user->id]->first();
                            }
                            $userTypeBadge = ($userRole === 'team') ? asset('front/assets/images/team.png') : asset('front/assets/images/athelete.png');
                        @endphp

                        <div class="card-list p-relative">
                            <div class="list-top ">
                                <div class="row">
                                    <div class="badge-team-athe">
                                            <span class="status-tag status-active">{{ ucfirst($userRole)}}</span>
                                        </div>
                                    <div class="col-sm-5">
                                        <div class="img-info">
                                            <div class="img-wrap">
                                                <img src="{{ isset($user->avatar['thumb']) ? $user->avatar['thumb'] : asset('front/assets/images/thumb1.png') }}" alt="{{ $user->full_name }}" height="120">
                                            </div>
                                            <div class="info-text">
                                                @if($userRole === 'team')
                                                    <h2>{{ $schoolClub }}</h2>
                                                @else
                                                <h2>{{ $user->full_name }} <img src="{{ $genderIcon }}" alt=""></h2>
                                                @endif
                                                <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 class="badge-team-athe">
                                                <span class="status-tag status-active">{{ ucfirst($userRole)}}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">                                        
                                        <div class="school-club mt-3">
                                            
                                            @if($userRole === 'team')
                                            <div class="sc-info">
                                                <h2>Team Size</h2>
                                                <p>{{ $profile->team_size ?? 'N/A' }}</p>
                                            </div>
                                            @else
                                            <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>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @if($userCampaign)
                                @php
                                    $campaignProgress = $userCampaign->fund_target > 0 ? ($userCampaign->fund_raised / $userCampaign->fund_target) * 100 : 0;
                                    $campaignProgress = min(100, max(0, $campaignProgress));
                                    $daysLeft = $userCampaign->campaign_finished_at ? now()->diffInDays(\Carbon\Carbon::parse($userCampaign->campaign_finished_at), false) : 0;
                                @endphp
                                <div class="camp-summary">
                                    <h2>Campaign Summary</h2>
                                    <p>{{ Str::limit($userCampaign->title ?? $userCampaign->summary ?? 'Active Campaign', 100) }}</p>
                                </div>
                                <div class="progress-wrap">
                                    <div class="progress-text">
                                        <div>Raised : {!! \App\Helpers\Helper::price($userCampaign->fund_raised) !!}</div>
                                        <div>{{ number_format($campaignProgress, 0) }}%</div>
                                    </div>
                                    <div class="bar">
                                        <div class="fill" style="width:{{ $campaignProgress }}%"></div>
                                    </div>
                                    <div class="goal">Goal : <strong style="color:#f97316">{!! \App\Helpers\Helper::price($userCampaign->fund_target) !!}</strong></div>
                                </div>
                                <div class="foot-part">
                                    <div class="days">
                                        <img src="{{ asset('front/assets/images/Vector.svg') }}"> {{ max(0, round($daysLeft)) }} days left
                                    </div>
                                    
                                    <a href="{{ route('front.athletes.show', $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>
                            @else
                                <div class="camp-summary">
                                    <h2>Campaign Summary</h2>
                                    <p style="color: #9ca3af; font-style: italic;">No active campaign</p>
                                </div>
                                <div class="progress-wrap" style="opacity: 0.5;">
                                    <div class="progress-text">
                                        <div>Raised : {!! \App\Helpers\Helper::price(0) !!}</div>
                                        <div>0%</div>
                                    </div>
                                    <div class="bar">
                                        <div class="fill" style="width:0%"></div>
                                    </div>
                                    <div class="goal">Goal : <strong style="color:#f97316">{!! \App\Helpers\Helper::price(0) !!}</strong></div>
                                </div>
                                <div class="foot-part">
                                    <div class="days" style="color: #9ca3af;">
                                        <img src="{{ asset('front/assets/images/Vector.svg') }}"> No active campaign
                                    </div>
                                    
                                    <a href="{{ route('front.athletes.show', $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>
                            @endif
                        </div>
                    @endforeach

                    <!-- Pagination -->
                    <div class="pagination-wrapper">
                        {{ $data->appends(request()->except('page'))->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