@extends('layouts.display')

@section('content')
<div class="live_auction_display" id="live-auction-display">
	<header class="display_header">
		<div class="display_header_left">
			<img class="display_logo" src="{{ asset('assets/images/logo.png') }}" alt="ICL">
			<span class="display_venue_tag" id="display-venue-tag" hidden></span>
		</div>
		<div class="display_header_center">
			<h1 class="display_title">Live Auction Control</h1>
			<span class="display_live_indicator" id="display-live-indicator">
				<span class="display_live_dot" id="display-live-dot" aria-hidden="true"></span>
				<span class="display_live_text">Live</span>
			</span>
		</div>
		<div class="display_header_right">
			<span class="display_progress" id="display-progress">— / — Player</span>
			<span class="display_status display_status--open" id="display-status">BIDDING OPEN</span>
			<span class="display_clock" id="display-clock">--:-- --</span>
		</div>
	</header>

	<!-- <div class="display_pool_stats auction-pool-stats-host auction-pool-stats-host--display" id="display-pool-stats" hidden aria-label="Pool availability by category"></div> -->

	<div class="display_main_grid">
		<section class="display_card display_player_card" id="display-player-card">
			<p class="display_empty_state">Waiting for player…</p>
			<div class="row_active" id="display-player-row">
			</div>
		</section>

		<section class="display_card display_bid_card">
			<h2 class="display_section_label display_section_label--bid">Player Bid History</h2>
			<div class="display_bid_amount" id="display-bid-amount">—</div>
			<div class="display_bid_leader" id="display-bid-leader"></div>
			<div class="display_bid_meta">
				<div class="display_bid_meta_item">
					<span class="label">BID Placed BY</span>
					<span class="value" id="display-bid-placed-by">—</span>
				</div>
				<div class="display_bid_meta_item">
					<span class="label">Total Bids</span>
					<span class="value" id="display-total-bids">0</span>
				</div>
				<div class="display_bid_meta_item">
					<span class="label">Last BID</span>
					<span class="value" id="display-last-bid-team">—</span>
				</div>
			</div>
		</section>

		<section class="display_card display_win_card" id="display-win-card" hidden>
			<div class="display_win_burst" aria-hidden="true"></div>
			<p class="display_win_kicker" id="display-win-kicker">PLAYER SOLD</p>
			<div class="display_win_matchup">
				<div class="display_win_side display_win_player">
					<img class="display_win_avatar" id="display-win-player-avatar" src="" alt="">
					<span class="display_win_name" id="display-win-player-name"></span>
				</div>
				<div class="display_win_arrow" aria-hidden="true">→</div>
				<div class="display_win_side display_win_team">
					<img class="display_win_logo" id="display-win-team-logo" src="" alt="">
					<span class="display_win_name" id="display-win-team-name"></span>
				</div>
			</div>
			<p class="display_win_price" id="display-win-price"></p>
		</section>

		<section class="display_card display_timer_card">
			<span class="display_timer_label" id="display-timer-label">BIDDING TIMER</span>
			<div class="display_timer_wrap" id="display-timer-wrap">
				<svg class="display_timer_svg" viewBox="0 0 120 120" aria-hidden="true">
					<circle class="display_timer_track" cx="60" cy="60" r="52" stroke-width="11"></circle>
					<circle class="display_timer_ring" id="display-timer-ring" cx="60" cy="60" r="52" stroke-width="11"></circle>
				</svg>
				<span class="display_timer_value" id="display-timer">--:--</span>
			</div>
			<div class="display_next_bid_panel">
				<div class="display_next_bid_row">
					<span class="label">Base BID</span>
					<span class="value" id="display-base-bid">—</span>
				</div>
				<div class="display_next_bid_row display_next_bid_row--highlight">
					<span class="label">Next Minimum BID</span>
					<span class="value" id="display-next-min-bid">—</span>
				</div>
			</div>
		</section>
	</div>

	<div class="display_bottom_grid">
		<section class="display_card display_recent_bids_card">
			<div class="display_panel_header">
				<h2 class="display_section_label">Recent BIDS</h2>
				<span class="display_panel_sub" id="display-recent-bids-count"></span>
			</div>
			<div class="display_recent_bids_list" id="display-recent-bids"></div>
		</section>

		<section class="display_card display_teams_card">
			<h2 class="display_section_label">Team Status</h2>
			<div class="display_teams_scroll">
				<div class="display_teams_grid" id="display-teams-grid"></div>
			</div>
		</section>
	</div>

	<footer class="display_footer">
		<span class="display_section_label">Live Activity</span>
		<div class="display_ticker_viewport">
			<div class="display_ticker_track" id="display-activity-ticker"></div>
		</div>
	</footer>

	<div class="display_completed_overlay" id="display-completed-overlay" hidden>
		<div class="display_completed_content">
			<h2>Auction Complete</h2>
			<p id="display-completed-message">This auction has ended.</p>
		</div>
	</div>
</div>
@endsection

@section('scripts')
@php
	$clockSyncVersion = @filemtime(public_path('assets/js/auction/auction-clock-sync.js')) ?: time();
	$timerThresholdsVersion = @filemtime(public_path('assets/js/auction/auction-timer-thresholds.js')) ?: time();
	$poolStatsVersion = @filemtime(public_path('assets/js/auction/auction-pool-stats.js')) ?: time();
	$poolStatsCssVersion = @filemtime(public_path('assets/css/auction-pool-stats.css')) ?: time();
	$liveDisplayVersion = @filemtime(public_path('assets/js/auction/live-display.js')) ?: time();
@endphp
<script>
	window.DISPLAY_CONFIG = @json($displayConfig);
	@php
		$iclPlaceholders = [
			'default' => placeholder_image_url('default'),
			'player' => placeholder_image_url('player'),
			'team' => placeholder_image_url('team'),
		];
	@endphp
	window.ICL_PLACEHOLDERS = @json($iclPlaceholders);
</script>
@include('partials.socket-io')
<script src="{{ asset('assets/js/auction/auction-clock-sync.js') }}?v={{ $clockSyncVersion }}"></script>
<script src="{{ asset('assets/js/auction/auction-timer-thresholds.js') }}?v={{ $timerThresholdsVersion }}"></script>
<script src="{{ asset('assets/js/auction/auction-pool-stats.js') }}?v={{ $poolStatsVersion }}"></script>
<script src="{{ asset('assets/js/auction/live-display.js') }}?v={{ $liveDisplayVersion }}"></script>
@endsection