@extends('layouts.tv')

@section('content')
<div class="tv-wrap" id="tv-display-root">

	<header class="tv-header">
		<div class="tv-logo">
			<img src="{{ asset('assets/images/logo.png') }}" alt="ICL"
				onerror="this.style.display='none'">
			<span>ICL</span>
		</div>
		<div class="tv-header-center">
			<span class="tv-title">Live Auction Control</span>
			<span class="live-pill" id="tv-live-pill">
				<span class="dot" aria-hidden="true"></span>
				<span id="tv-live-text">Live</span>
			</span>
		</div>
		<div class="tv-header-right">
			<span id="tv-progress">— / — Player</span>
			<span class="bidding" id="tv-status">LIVE</span>
			<span class="time" id="tv-clock">--:-- --</span>
			<a class="tv-close" href="#" onclick="window.close(); return false;" aria-label="Close">⊗</a>
		</div>
	</header>

	<div class="top-row">
		<section class="card-tv player-card-tv" id="tv-player-card">
			<p class="tv-empty">Waiting for player…</p>
		</section>

		<section class="card-tv bid-card-tv">
			<div class="bid-section-label">PLAYER BID HISTORY</div>
			<div class="bid-big-amount" id="tv-bid-amount">—</div>
			<div class="bid-progress"><div class="bid-progress-bar" id="tv-bid-progress"></div></div>
			<div class="bid-leader" id="tv-bid-leader"></div>
			<div class="bid-meta">
				<div class="bid-meta-item">
					<div class="m-lbl">BID Placed BY</div>
					<div class="m-val" id="tv-bid-placed-by">—</div>
				</div>
				<div class="bid-meta-item">
					<div class="m-lbl">Total Bids</div>
					<div class="m-val" id="tv-total-bids">0</div>
				</div>
				<div class="bid-meta-item">
					<div class="m-lbl">Last BID</div>
					<div class="m-val" id="tv-last-bid-team">—</div>
				</div>
			</div>
		</section>

		<section class="card-tv timer-card-tv">
			<div class="timer-wrap" id="tv-timer-wrap">
				<svg class="timer-svg" viewBox="0 0 100 100" aria-hidden="true">
					<circle class="timer-track" cx="50" cy="50" r="44"></circle>
					<circle class="timer-ring" id="tv-timer-ring" cx="50" cy="50" r="44"
						stroke-dasharray="276.46" stroke-dashoffset="0"></circle>
				</svg>
				<span class="timer-value" id="tv-timer">--:--</span>
			</div>
			<div class="next-bid-panel">
				<div class="next-bid-row">
					<span class="n-lbl">Base BID</span>
					<span class="n-val" id="tv-base-bid">—</span>
				</div>
				<div class="next-bid-row highlight">
					<span class="n-lbl">Next Minimum BID</span>
					<span class="n-val" id="tv-next-min-bid">—</span>
				</div>
			</div>
		</section>
	</div>

	<div class="bottom-row">
		<section class="card-tv recent-bids-card">
			<div class="panel-header">
				<span class="panel-label">Recent BIDS</span>
				<span class="panel-sub" id="tv-recent-bids-count"></span>
			</div>
			<div class="bid-list" id="tv-recent-bids">
				<p class="tv-empty">No bids yet</p>
			</div>
		</section>

		<section class="card-tv teams-card">
			<div class="panel-header">
				<span class="panel-label is-white">Team Status</span>
			</div>
			<div class="teams-viewport">
				<div class="teams-track" id="tv-teams-grid">
					<p class="tv-empty">No teams</p>
				</div>
			</div>
		</section>
	</div>

	<footer class="tv-footer">
		<span class="footer-label">Live Activity</span>
		<div class="ticker-viewport">
			<div class="ticker-track" id="tv-activity-ticker">
				<span class="ticker-item">
					<span class="t-dot"></span>
					<span class="t-text">Waiting for activity…</span>
				</span>
			</div>
		</div>
	</footer>

	{{-- PLAYER SOLD popup --}}
	<div class="tv-sold-overlay" id="tv-sold-overlay" hidden>
		<div class="tv-sold-panel">
			<h2 class="tv-sold-title">PLAYER SOLD</h2>
			<div class="tv-sold-card">
				<div class="tv-sold-player">
					<div class="tv-sold-avatar-wrap">
						<img id="tv-sold-avatar" src="" alt="">
						<span class="icon-badge" id="tv-sold-badge" hidden></span>
					</div>
					<div class="tv-sold-player-meta">
						<div class="tv-sold-name" id="tv-sold-name"></div>
						<div class="tv-sold-role" id="tv-sold-role"></div>
						<div class="pop-section tv-sold-pop" id="tv-sold-pop" hidden>
							<div class="pop-title">POPULARITY SKILLS</div>
							<div class="pop-tags-viewport" id="tv-sold-skills-wrap" hidden>
								<div class="pop-tags-track pop-tags" id="tv-sold-skills"></div>
							</div>
							<div class="pop-reach" id="tv-sold-reach" hidden></div>
						</div>
					</div>
				</div>
				<div class="tv-sold-to">
					<div class="tv-sold-to-label">Sold To</div>
					<img class="tv-sold-team-logo" id="tv-sold-team-logo" src="" alt="">
					<div class="tv-sold-team-name" id="tv-sold-team-name"></div>
					<div class="tv-sold-price" id="tv-sold-price"></div>
				</div>
			</div>
			<div class="tv-next-card">
				<div class="tv-next-player" id="tv-next-player">
					<div class="tv-next-avatar-wrap">
						<img id="tv-next-avatar" src="" alt="">
						<span class="icon-badge" id="tv-next-badge" hidden></span>
					</div>
					<div class="tv-next-player-meta">
						<div class="tv-next-name" id="tv-next-name">—</div>
						<div class="tv-next-role" id="tv-next-role" hidden></div>
						<div class="stat-pills" id="tv-next-pills"></div>
						<div class="pop-section tv-next-pop" id="tv-next-pop" hidden>
							<div class="pop-title">POPULARITY SKILLS</div>
							<div class="pop-tags-viewport" id="tv-next-skills-wrap" hidden>
								<div class="pop-tags-track pop-tags" id="tv-next-skills"></div>
							</div>
							<div class="pop-reach" id="tv-next-reach" hidden></div>
						</div>
					</div>
				</div>
				<div class="tv-next-side">
					<div class="tv-next-label">UP NEXT</div>
					<div class="tv-next-timer" id="tv-next-timer">00:00</div>
					<div class="tv-next-ready">Get Ready</div>
				</div>
			</div>
		</div>
	</div>

	{{-- Sold players carousel (paused / unsold / completed) --}}
	<div class="tv-carousel-overlay" id="tv-carousel-overlay" hidden>
		<div class="tv-carousel-kicker" id="tv-carousel-kicker">Sold Players</div>
		<h2 class="tv-carousel-title" id="tv-carousel-title">Auction Highlights</h2>
		<div class="tv-carousel-stage" id="tv-carousel-stage">
			<p class="tv-carousel-empty">No players sold yet</p>
		</div>
		<div class="tv-carousel-dots" id="tv-carousel-dots" hidden></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();
	$tvDisplayVersion = @filemtime(public_path('assets/js/auction/tv-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/tv-display.js') }}?v={{ $tvDisplayVersion }}"></script>
@endsection