@extends('admin.layouts.app')

@section('styles')
@endsection

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

<div class="auction_demo_bids_page users_list" id="auction-demo-bids-app">
    <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>
        <a href="{{ route('admin.leagues.demo', $league) }}">{{ $league->name }} — Demo</a>
        <span>›</span>
        <span class="active">Demo Bids</span>
    </div>

    <div class="auction_demo_bids_header">
        <div>
            <div class="auction_demo_bids_title_row">
                <h2>{{ $league->name }} — Demo Bid Simulator</h2>
                <span class="auction_demo_status_badge" id="demo-status-badge">—</span>
            </div>
            <p class="auction_demo_bids_subtitle">Simulate team-owner bids without the mobile app. Use Live Control in another tab to manage the auction.</p>
            <p class="auction_demo_next_bid" id="demo-next-bid-hint"></p>
        </div>
        <div class="auction_demo_bids_header_actions">
            <a href="{{ route('admin.leagues.live', $league) }}" class="btn btn-control-outline">Live Control</a>
            <a href="{{ route('admin.leagues.demo', $league) }}" class="btn btn-control-outline">Demo Toolkit</a>
        </div>
    </div>

    <div class="auction_demo_bids_grid">
        <section class="auction_demo_current_lot" id="demo-current-lot">
            <p class="live_empty_state">Loading auction state...</p>
        </section>

        <section class="auction_demo_bid_panel">
            <h4>Bid as Team</h4>
            <p class="auction_demo_bids_hint">Buttons apply to the player currently on stage in Live Control.</p>
            <div class="auction_demo_bid_buttons" id="demo-bid-buttons"></div>
        </section>
    </div>
</div>
@endsection

@section('scripts')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script>
    window.AUCTION_CONFIG = @json($auctionConfig);
    @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="https://cdn.jsdelivr.net/npm/toastify-js"></script>
<script src="{{ asset('assets/js/admin/toast.js') }}"></script>
<script src="{{ asset('assets/js/admin/auction-errors.js') }}"></script>
<script src="{{ asset('assets/js/admin/auction-demo-bids.js') }}"></script>
@endsection