@extends('admin.layouts.app')
@section('styles')
    
@endsection

@section('content')
<div class="event_auction users_list">
    <div class="top-bar">

        <!-- Search -->
        <form method="GET" action="{{ route('admin.myevents') }}" class="search-box">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M11 20C15.9706 20 20 15.9706 20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20Z"
                    stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                <path
                    d="M18.9285 20.6888C19.4585 22.2888 20.6685 22.4488 21.5985 21.0488C22.4485 19.7688 21.8885 18.7188 20.3485 18.7188C19.2085 18.7088 18.5685 19.5988 18.9285 20.6888Z"
                    stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
            <input type="text" name="q" value="{{ $search ?? '' }}" placeholder="Search Here...">
        </form>

        <div>
             <!-- Button -->
        <a href="{{ route('admin.events.index') }}" class="create-btn" style="margin-right:12px;">Manage Events</a>
        <a href="{{ route('admin.events.create') }}" class="create-btn">+ Create Event</a>

        </div>

       
    </div>
    <!-- Header -->
    <div class="section-header">
        <h3><svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M2.925 14.15C2.025 13.2333 1.3125 12.1708 0.7875 10.9625C0.2625 9.75417 0 8.45833 0 7.075C0 5.675 0.2625 4.37083 0.7875 3.1625C1.3125 1.95417 2.025 0.9 2.925 0L4.35 1.425C3.61667 2.15833 3.04167 3.00833 2.625 3.975C2.20833 4.94167 2 5.975 2 7.075C2 8.19167 2.20833 9.23333 2.625 10.2C3.04167 11.1667 3.61667 12.0083 4.35 12.725L2.925 14.15ZM5.75 11.325C5.21667 10.775 4.79167 10.1375 4.475 9.4125C4.15833 8.6875 4 7.90833 4 7.075C4 6.225 4.15833 5.4375 4.475 4.7125C4.79167 3.9875 5.21667 3.35833 5.75 2.825L7.175 4.25C6.80833 4.61667 6.52083 5.04167 6.3125 5.525C6.10417 6.00833 6 6.525 6 7.075C6 7.625 6.10417 8.14167 6.3125 8.625C6.52083 9.10833 6.80833 9.53333 7.175 9.9L5.75 11.325ZM10 9.075C9.45 9.075 8.97917 8.87917 8.5875 8.4875C8.19583 8.09583 8 7.625 8 7.075C8 6.525 8.19583 6.05417 8.5875 5.6625C8.97917 5.27083 9.45 5.075 10 5.075C10.55 5.075 11.0208 5.27083 11.4125 5.6625C11.8042 6.05417 12 6.525 12 7.075C12 7.625 11.8042 8.09583 11.4125 8.4875C11.0208 8.87917 10.55 9.075 10 9.075ZM14.25 11.325L12.825 9.9C13.1917 9.53333 13.4792 9.10833 13.6875 8.625C13.8958 8.14167 14 7.625 14 7.075C14 6.525 13.8958 6.00833 13.6875 5.525C13.4792 5.04167 13.1917 4.61667 12.825 4.25L14.25 2.825C14.7833 3.35833 15.2083 3.9875 15.525 4.7125C15.8417 5.4375 16 6.225 16 7.075C16 7.90833 15.8417 8.6875 15.525 9.4125C15.2083 10.1375 14.7833 10.775 14.25 11.325ZM17.075 14.15L15.65 12.725C16.3833 11.9917 16.9583 11.1417 17.375 10.175C17.7917 9.20833 18 8.175 18 7.075C18 5.95833 17.7917 4.91667 17.375 3.95C16.9583 2.98333 16.3833 2.14167 15.65 1.425L17.075 0C17.975 0.9 18.6875 1.95417 19.2125 3.1625C19.7375 4.37083 20 5.675 20 7.075C20 8.45833 19.7375 9.75417 19.2125 10.9625C18.6875 12.1708 17.975 13.2333 17.075 14.15Z"
                    fill="#22C55E" />
            </svg>
            Live Events Now</h3>
        @if ($live->isNotEmpty())
        <a href="#live-cards">View All Live</a>
        @endif
    </div>

    <!-- Cards -->
    <div class="cards" id="live-cards">
        @forelse ($live as $league)
            @include('admin.leagues.partials._live_card', ['league' => $league])
        @empty
            <p class="empty-state">No live auctions right now.</p>
        @endforelse
    </div>

    <div class="topbar">
        <div class="tabs">
            <div class="tab active" data-tab="upcoming">Upcoming Auctions</div>
            <div class="tab" data-tab="past">Past Events</div>
        </div>
    </div>

    <div id="upcoming" class="tab-content">
        <div class="event-list">
            @forelse ($upcoming as $league)
                @include('admin.leagues.partials._list_item', [
                    'league' => $league,
                    'detailRoute' => route('admin.leagues.upcoming', $league),
                ])
            @empty
                <p class="empty-state">No upcoming auctions found.</p>
            @endforelse
        </div>
    </div>

    <div id="past" class="tab-content" style="display:none">
        <div class="event-list">
            @forelse ($past as $league)
                @include('admin.leagues.partials._list_item', [
                    'league' => $league,
                    'detailRoute' => route('admin.leagues.completed', $league),
                ])
            @empty
                <p class="empty-state">No past auctions found.</p>
            @endforelse
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const container = document.querySelector('.event_auction');
    if (!container) {
        return;
    }

    const tabs = container.querySelectorAll('.tab');
    const contents = container.querySelectorAll('.tab-content');

    tabs.forEach(function (tab) {
        tab.addEventListener('click', function () {
            const tabKey = tab.dataset.tab;

            tabs.forEach(function (t) {
                t.classList.remove('active');
            });
            tab.classList.add('active');

            contents.forEach(function (content) {
                content.style.display = 'none';
            });

            const activeContent = document.getElementById(tabKey);
            if (activeContent) {
                activeContent.style.display = 'block';
            }
        });
    });
});
</script>
@endsection