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

<!-- Hero Section -->
<section class="discover-hero-section">
    <div class="container">
        <div class="discover-hero-content">
            <h1>Explore Athletes / Teams</h1>
            <p>Discover and connect with top athletes and teams from around the world.</p>
        </div>
    </div>
</section>

<!-- Main Content Section -->
<section class="discover-main-section">
    <div class="container">
        <div class="discover-section-header">
            <h2>Athletes & Teams</h2>
            <div class="discover-controls-wrapper">
                <div class="discover-filter-buttons">
                    <a href="{{ route('front.discover.index') }}" class="filter-btn {{ !request('type') ? 'active' : '' }}">
                        All
                    </a>
                    <a href="{{ route('front.discover.index', ['type' => 'athlete']) }}" class="filter-btn {{ request('type') === 'athlete' ? 'active' : '' }}">
                        Athletes
                    </a>
                    <a href="{{ route('front.discover.index', ['type' => 'team']) }}" class="filter-btn {{ request('type') === 'team' ? 'active' : '' }}">
                        Teams
                    </a>
                </div>
                <div class="discover-search-wrapper">
                    <div class="discover-search-field">
                        <input type="text" class="discover-search-input" id="athleteSearch" placeholder="Search athletes or teams..." autocomplete="off" value="{{ request('search') ?? '' }}">
                        <button class="discover-search-icon" 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="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </button>
                        <button class="discover-clear-search {{ request('search') ? 'show' : 'hide' }}" id="clearSearch">
                            <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>
                        <div id="suggestions" class="athlete-autocomplete-dropdown"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Grid View Container -->
        <div class="discover-grid-container">
            @if($data && (is_array($data) ? count($data) > 0 : $data->count() > 0))
                <div class="discover-grid">
                    @foreach($data as $user)
                        @include('front.'.$_routePrefix.'.grid_list', ['user' => $user, 'usersStats' => $usersStats ?? []])
                    @endforeach
                </div>

                <!-- Pagination -->
                <div class="discover-pagination">
                    {{ $data->appends(request()->except('page'))->links() }}
                </div>
            @else
                <div class="discover-no-results">
                    <p>No results found.</p>
                </div>
            @endif
        </div>
    </div>
</section>

<!-- Call to Action Section -->
<section class="discover-cta-section">
    <div class="container">
        <div class="discover-cta-content">
            <h2>Ready to Make an Impact?</h2>
            <p>Join thousands of athletes and sponsors already using Sport Nexus</p>
            <a href="{{ route('register') }}" class="discover-cta-button">Become a Sponsor</a>
        </div>
    </div>
</section>

@endsection

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