@extends('admin.layouts.app')
@section('styles')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/jquery.dataTables.min.css">
    @include('admin.leagues.partials._player_datatables_styles')
    <style>
        .open_auction_blockers {
            color: #fff;
        }
    </style>
@endsection

@section('content')
@include('admin.layouts.alert')

<div class="upcoming_auction_detail users_list">
    <div class="breadcrumb">
        <a href="{{ route('admin.dashboard.index') }}">Dashboard</a>
        <span>›</span>
        <a href="{{ route('admin.leagues.index') }}">My Event Auction</a>
        <span>›</span>
        <span class="active">{{ $league->name }}</span>
    </div>

    <div class="upcoming_hero_banner">
        <x-safe-image :src="$league->bannerImageUrl()" type="league" :alt="$league->name" />
    </div>

    <div class="upcoming_header">
        <div class="left">
            <h2>{{ $league->name }} - Auction Detail</h2>

            <div class="meta">
                <span>Season {{ $league->season }}</span>
                <span>{{ $league->displayLocation() }}</span>
                @if ($league->auctionAt())
                <span>
                    <svg viewBox="0 0 24 24" fill="none" stroke="#aaa" stroke-width="2">
                        <rect x="3" y="4" width="18" height="18" rx="2" />
                        <line x1="16" y1="2" x2="16" y2="6" />
                        <line x1="8" y1="2" x2="8" y2="6" />
                    </svg>
                    {{ $league->auctionAt()->format('d M Y') }}
                </span>
                <span>
                    <svg viewBox="0 0 24 24" fill="none" stroke="#aaa" stroke-width="2">
                        <circle cx="12" cy="12" r="10" />
                        <polyline points="12 6 12 12 16 14" />
                    </svg>
                    {{ $league->auctionAt()->setTimezone('Pacific/Auckland')->format('h:i A') }}
                </span>
                @endif
            </div>
        </div>

        <div class="right">
            <a href="{{ route('admin.leagues.rules', $league) }}" class="btn btn-rules">
                <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
                    <path d="M4 19.5A2.5 2.5 0 016.5 17H20" />
                    <path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z" />
                </svg>
                View Rules
            </a>
            <a href="{{ route('admin.leagues.edit', $league) }}" class="btn btn-edit">
                <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
                    <path d="M12 20h9" />
                    <path d="M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4 12.5-12.5z" />
                </svg>
                Edit Event
            </a>
            @if ($canOpenAuction ?? false)
            <form method="POST" action="{{ route('admin.leagues.open', $league) }}" class="upcoming_open_form">
                @csrf
                <button type="submit" class="btn btn-open-auction">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polygon points="5 3 19 12 5 21 5 3" />
                    </svg>
                    Open Auction
                </button>
            </form>
            @endif
            @if ($league->isLive())
            <a href="{{ route('admin.leagues.live', $league) }}" class="btn btn-control btn-control-live">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polygon points="5 3 19 12 5 21 5 3" />
                </svg>
                Control Auction
            </a>
            @endif
        </div>
    </div>

    @if (!($canOpenAuction ?? false) && !empty($openAuctionBlockers ?? []))
    <div class="open_auction_blockers" role="status">
        <span class="open_auction_blockers_label">Open auction requirements:</span>
        <ul>
            @foreach ($openAuctionBlockers as $blocker)
            <li>{{ $blocker }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <div class="upcoming_stats">
        <div class="card">
            <div class="icon purple">
                <svg width="30" height="15" viewBox="0 0 30 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0 15V13.0312C0 12.1354 0.458333 11.4062 1.375 10.8438C2.29167 10.2812 3.5 10 5 10C5.27083 10 5.53125 10.0052 5.78125 10.0156C6.03125 10.026 6.27083 10.0521 6.5 10.0938C6.20833 10.5312 5.98958 10.9896 5.84375 11.4688C5.69792 11.9479 5.625 12.4479 5.625 12.9688V15H0ZM7.5 15V12.9688C7.5 12.3021 7.68229 11.6927 8.04688 11.1406C8.41146 10.5885 8.92708 10.1042 9.59375 9.6875C10.2604 9.27083 11.0573 8.95833 11.9844 8.75C12.9115 8.54167 13.9167 8.4375 15 8.4375C16.1042 8.4375 17.1198 8.54167 18.0469 8.75C18.974 8.95833 19.7708 9.27083 20.4375 9.6875C21.1042 10.1042 21.6146 10.5885 21.9688 11.1406C22.3229 11.6927 22.5 12.3021 22.5 12.9688V15H7.5ZM24.375 15V12.9688C24.375 12.4271 24.3073 11.9167 24.1719 11.4375C24.0365 10.9583 23.8333 10.5104 23.5625 10.0938C23.7917 10.0521 24.026 10.026 24.2656 10.0156C24.5052 10.0052 24.75 10 25 10C26.5 10 27.7083 10.276 28.625 10.8281C29.5417 11.3802 30 12.1146 30 13.0312V15H24.375ZM10.1562 12.5H19.875C19.6667 12.0833 19.0885 11.7188 18.1406 11.4062C17.1927 11.0938 16.1458 10.9375 15 10.9375C13.8542 10.9375 12.8073 11.0938 11.8594 11.4062C10.9115 11.7188 10.3438 12.0833 10.1562 12.5ZM5 8.75C4.3125 8.75 3.72396 8.50521 3.23438 8.01562C2.74479 7.52604 2.5 6.9375 2.5 6.25C2.5 5.54167 2.74479 4.94792 3.23438 4.46875C3.72396 3.98958 4.3125 3.75 5 3.75C5.70833 3.75 6.30208 3.98958 6.78125 4.46875C7.26042 4.94792 7.5 5.54167 7.5 6.25C7.5 6.9375 7.26042 7.52604 6.78125 8.01562C6.30208 8.50521 5.70833 8.75 5 8.75ZM25 8.75C24.3125 8.75 23.724 8.50521 23.2344 8.01562C22.7448 7.52604 22.5 6.9375 22.5 6.25C22.5 5.54167 22.7448 4.94792 23.2344 4.46875C23.724 3.98958 24.3125 3.75 25 3.75C25.7083 3.75 26.3021 3.98958 26.7812 4.46875C27.2604 4.94792 27.5 5.54167 27.5 6.25C27.5 6.9375 27.2604 7.52604 26.7812 8.01562C26.3021 8.50521 25.7083 8.75 25 8.75ZM15 7.5C13.9583 7.5 13.0729 7.13542 12.3438 6.40625C11.6146 5.67708 11.25 4.79167 11.25 3.75C11.25 2.6875 11.6146 1.79688 12.3438 1.07812C13.0729 0.359375 13.9583 0 15 0C16.0625 0 16.9531 0.359375 17.6719 1.07812C18.3906 1.79688 18.75 2.6875 18.75 3.75C18.75 4.79167 18.3906 5.67708 17.6719 6.40625C16.9531 7.13542 16.0625 7.5 15 7.5ZM15 5C15.3542 5 15.651 4.88021 15.8906 4.64062C16.1302 4.40104 16.25 4.10417 16.25 3.75C16.25 3.39583 16.1302 3.09896 15.8906 2.85938C15.651 2.61979 15.3542 2.5 15 2.5C14.6458 2.5 14.349 2.61979 14.1094 2.85938C13.8698 3.09896 13.75 3.39583 13.75 3.75C13.75 4.10417 13.8698 4.40104 14.1094 4.64062C14.349 4.88021 14.6458 5 15 5Z" fill="#7B61FF" />
                </svg>
            </div>
            <div class="card-content">
                <span>Registered Players</span>
                <h3>{{ $stats['registeredPlayers'] }}</h3>
            </div>
        </div>

        <div class="card">
            <div class="icon green">
                <svg width="28" height="27" viewBox="0 0 28 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.5 26.25L7.125 22.25L2.625 21.25L3.0625 16.625L0 13.125L3.0625 9.625L2.625 5L7.125 4L9.5 0L13.75 1.8125L18 0L20.375 4L24.875 5L24.4375 9.625L27.5 13.125L24.4375 16.625L24.875 21.25L20.375 22.25L18 26.25L13.75 24.4375L9.5 26.25ZM10.5625 23.0625L13.75 21.6875L17 23.0625L18.75 20.0625L22.1875 19.25L21.875 15.75L24.1875 13.125L21.875 10.4375L22.1875 6.9375L18.75 6.1875L16.9375 3.1875L13.75 4.5625L10.5 3.1875L8.75 6.1875L5.3125 6.9375L5.625 10.4375L3.3125 13.125L5.625 15.75L5.3125 19.3125L8.75 20.0625L10.5625 23.0625ZM12.4375 17.5625L19.5 10.5L17.75 8.6875L12.4375 14L9.75 11.375L8 13.125L12.4375 17.5625Z" fill="#10B981" />
                </svg>
            </div>
            <div class="card-content">
                <span>Confirmed Team Owners</span>
                <h3>{{ $stats['confirmedTeamOwners'] }}</h3>
            </div>
        </div>

        <div class="card">
            <div class="icon orange">
                <svg width="23" height="27" viewBox="0 0 23 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.5 2.5V0H15V2.5H7.5ZM10 16.25H12.5V8.75H10V16.25ZM11.25 26.25C9.70833 26.25 8.25521 25.9531 6.89062 25.3594C5.52604 24.7656 4.33333 23.9583 3.3125 22.9375C2.29167 21.9167 1.48438 20.724 0.890625 19.3594C0.296875 17.9948 0 16.5417 0 15C0 13.4583 0.296875 12.0052 0.890625 10.6406C1.48438 9.27604 2.29167 8.08333 3.3125 7.0625C4.33333 6.04167 5.52604 5.23438 6.89062 4.64062C8.25521 4.04688 9.70833 3.75 11.25 3.75C12.5417 3.75 13.7812 3.95833 14.9688 4.375C16.1562 4.79167 17.2708 5.39583 18.3125 6.1875L20.0625 4.4375L21.8125 6.1875L20.0625 7.9375C20.8542 8.97917 21.4583 10.0938 21.875 11.2812C22.2917 12.4688 22.5 13.7083 22.5 15C22.5 16.5417 22.2031 17.9948 21.6094 19.3594C21.0156 20.724 20.2083 21.9167 19.1875 22.9375C18.1667 23.9583 16.974 24.7656 15.6094 25.3594C14.2448 25.9531 12.7917 26.25 11.25 26.25ZM11.25 23.75C13.6667 23.75 15.7292 22.8958 17.4375 21.1875C19.1458 19.4792 20 17.4167 20 15C20 12.5833 19.1458 10.5208 17.4375 8.8125C15.7292 7.10417 13.6667 6.25 11.25 6.25C8.83333 6.25 6.77083 7.10417 5.0625 8.8125C3.35417 10.5208 2.5 12.5833 2.5 15C2.5 17.4167 3.35417 19.4792 5.0625 21.1875C6.77083 22.8958 8.83333 23.75 11.25 23.75Z" fill="#F59E0B" />
                </svg>
            </div>
            <div class="card-content">
                <span>Maximum Teams</span>
                <h3>{{ $stats['maxTeams'] }}</h3>
            </div>
        </div>

        <div class="card">
            <div class="icon blue">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z" fill="#3B82F6"/>
                    <path d="M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H4Z" fill="#3B82F6"/>
                </svg>
            </div>
            <div class="card-content">
                <span>Maximum Players</span>
                <h3>{{ $stats['maxPlayers'] }}</h3>
            </div>
        </div>
    </div>

    <div class="timeline-box">
        <div class="title">Auction Preparation Timeline</div>

        <div class="timeline{{ ($timelineProgressPercent ?? 0) >= 100 ? ' timeline--complete' : '' }}">
            <div class="timeline-progress" style="width: {{ round(75 * ($timelineProgressPercent ?? 0) / 100, 2) }}%;"></div>

            @foreach ($preparationSteps as $step)
                @include('admin.leagues.partials._timeline_step', ['step' => $step])
            @endforeach
        </div>
    </div>

    <div class="wrapper_box2">
        <div>
            <div class="left-header">
                <h4>Participating Team Owners</h4>
                <div class="view-all">View All</div>
            </div>

            @forelse ($teamOwners as $team)
                @include('admin.leagues.partials._team_owner_card', ['team' => $team])
            @empty
                <p class="empty-state">No team owners registered yet.</p>
            @endforelse
        </div>

        <div class="right-box upcoming-players-dt">
            <div class="top-bar">
                <h3>Registered Player List</h3>
                <div class="filter" id="playerRoleFilterWrap">
                    <select id="playerRoleFilter" aria-label="Filter by role">
                        <option value="">All Role</option>
                    </select>
                    <svg viewBox="0 0 24 24">
                        <polyline points="6 9 12 15 18 9"></polyline>
                    </svg>
                </div>
            </div>

            <div class="table-wrapper">
                <table id="registeredPlayersTable">
                    <thead>
                        <tr>
                            <th>Player</th>
                            <th>Category</th>
                            <th>Role</th>
                            <th>Base Price</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($players as $registration)
                            @php
                                $player = $registration->player;
                                $categoryName = $player?->playerCategory?->name ?? $registration->enrollmentType?->name ?? '—';
                                $categoryClass = strtolower(preg_replace('/[^a-z0-9]+/i', '', $categoryName)) ?: 'core';
                                $playerName = $player?->fullName() ?? $registration->user?->full_name ?? 'N/A';
                                $playerImage = $player && $player->profile_image
                                    ? $player->profileImageUrl()
                                    : ($player?->user?->profileImageUrl() ?? $registration->user?->profileImageUrl() ?? placeholder_image_url('player'));
                                $roleName = $player?->playerRole?->name ?? '—';
                                $statusLabel = \App\Models\LeagueRegistration::statusLabel((int) $registration->registration_status);
                                $statusClass = \App\Models\LeagueRegistration::statusBadgeClass((int) $registration->registration_status);
                            @endphp
                            <tr>
                                <td class="player">
                                    <x-safe-image :src="$playerImage" type="player" :alt="$playerName" />
                                    {{ $playerName }}
                                </td>
                                <td><span class="tag {{ $categoryClass }}">{{ $categoryName }}</span></td>
                                <td>{{ $roleName }}</td>
                                <td>{{ $player?->formattedBasePrice() ?? '—' }}</td>
                                <td><span class="reg-status {{ $statusClass }}">{{ $statusLabel }}</span></td>
                            </tr>
                        @empty
                            <tr class="empty-row">
                                <td colspan="5" class="empty-state">No registered players yet.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
    @include('admin.leagues.partials._player_datatables_init', [
        'tableId' => 'registeredPlayersTable',
        'roleColumnIndex' => 2,
        'nonOrderableTargets' => [4],
    ])
@endsection