@extends('games.layout')

@section('content')
<div class="wac-hub">

    {{-- ──── En-tête ──── --}}
    <div class="wac-hub__hero">
        <div class="wac-hub__hero-plane" aria-hidden="true"><i class="fa-solid fa-paper-plane"></i></div>
        <div class="wac-hub__hero-tag">
            <i class="fa-solid fa-diamond" style="font-size:0.4rem;vertical-align:middle;opacity:0.5;margin-right:4px"></i>
            Wedding Airlines
            <i class="fa-solid fa-diamond" style="font-size:0.4rem;vertical-align:middle;opacity:0.5;margin-left:4px"></i>
        </div>
        <h1 class="wac-hub__hero-title">Vos escales</h1>
        <p class="wac-hub__hero-sub" id="wac-hub-hero-sub">Terminez toutes les escales avant la fin du repas&nbsp;— bon vol&nbsp;!</p>
        @if (($wacGamesGate ?? 'open') === 'open' && trim((string) ($wacGamesScheduleNotice ?? '')) !== '')
            <p class="wac-hub__schedule-notice" role="status">{{ $wacGamesScheduleNotice }}</p>
        @endif
        </div>

    <div id="wac-hub-main-done" class="wac-hub-main-done" hidden>
        <p class="wac-hub-main-done__msg">Bravo, vous avez fini les escales principales&nbsp;! Il reste le bonus ci-dessous.</p>
    </div>

    {{-- Fiole à gauche · cadre blanc scores (+ nom) à droite · pastilles pleine largeur sous la rangée --}}
    <div class="wac-hub__deck">
        <div class="wac-hub__deck-main">
            <div class="wac-hub__jar-column">
            <div class="wac-jar-wrap" id="wac-jar-tap">
                <svg class="wac-jar-svg" viewBox="0 0 100 200" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-label="Fiole à sable">
                    <defs>
                        <linearGradient id="wac-glass-grad" x1="0" y1="0" x2="1" y2="1">
                            <stop offset="0%" stop-color="rgba(255,255,255,0.55)"/>
                            <stop offset="50%" stop-color="rgba(220,232,245,0.2)"/>
                            <stop offset="100%" stop-color="rgba(255,255,255,0.35)"/>
                        </linearGradient>
                        <clipPath id="wac-jar-clip">
                            <rect x="27" y="24" width="46" height="153" rx="5" ry="5"/>
                        </clipPath>
                        <filter id="wac-sand-grain" x="27" y="24" width="46" height="153" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                            <feTurbulence type="fractalNoise" baseFrequency="0.78" numOctaves="2" stitchTiles="stitch" result="grainRaw"/>
                            <feColorMatrix in="grainRaw" type="matrix"
                                values="0.33 0.33 0.33 0 0
                                        0.33 0.33 0.33 0 0
                                        0.33 0.33 0.33 0 0
                                        0 0 0 0.28 0" result="grain"/>
                            <feBlend in="SourceGraphic" in2="grain" mode="soft-light" result="sandTextured"/>
                            <feComposite in="sandTextured" in2="SourceGraphic" operator="in"/>
                        </filter>
                    </defs>
                    <path fill="url(#wac-glass-grad)" stroke="none" d="M 24,18 L 76,18 L 76,180 Q 76,187 68,187 L 32,187 Q 24,187 24,180 L 24,18 Z"/>
                    <path class="wac-jar-svg__outline" fill="none" stroke="rgba(160,185,205,0.65)" stroke-width="0.7" d="M 24,18 L 76,18"/>
                    <path class="wac-jar-svg__outline" fill="none" stroke="rgba(160,185,205,0.65)" stroke-width="1.75" d="M 76,18 L 76,180 Q 76,187 68,187 L 32,187 Q 24,187 24,180 L 24,18"/>
                    <g clip-path="url(#wac-jar-clip)">
                        <g id="wac-jar-layers" class="wac-jar-layers" filter="url(#wac-sand-grain)"></g>
                    </g>
                    <line x1="29" y1="30" x2="29" y2="169" stroke="rgba(255,255,255,0.4)" stroke-width="2" stroke-linecap="round"/>
                </svg>
                <div class="wac-jar-particles" id="wac-jar-particles" aria-hidden="true"></div>
            </div>
            </div>
            <div class="wac-hub__deck-aside">
                <span id="wac-guest-name" hidden></span>
                <div class="wac-hub__stats-block" role="group" aria-label="Flight score">
                    <p class="wac-hub__stat-name" id="wac-jar-guest-name">—</p>
                    <div class="wac-hub__stat-cell">
                        <span class="wac-hub__stat-icon" aria-hidden="true"><i class="fa-solid fa-star"></i></span>
                        <span class="wac-hub__stat-label">FLIGHT SCORE</span>
                        <p class="wac-hub__stat-value wac-hub__stat-value--flight-score">
                            <span id="wac-total-score">0</span>
                        </p>
                    </div>
                </div>
                <span id="wac-escales-done" hidden></span>
            </div>
        </div>
        <div class="wac-hub__jar-dots-strip">
            <div class="wac-jar-section__colors wac-jar-section__colors--spread" role="list" aria-label="Pastilles des escales (couleur par jeu)">
                @foreach ($wacGames as $game)
                    @if (empty($game['game_disabled']))
                        <span class="wac-jar-section__dot" role="listitem" data-dot-game-id="{{ $game['id'] }}" data-dot-color="{{ $game['sand_color'] }}" style="background:{{ $game['sand_color'] }}" title="{{ $game['title'] }}"></span>
                    @endif
                @endforeach
            </div>
        </div>
    </div>

    {{-- Escales — billets empilés (pleine largeur) --}}
    @php
        $wacEscalesPlayable = array_values(array_filter($wacEscales ?? [], fn ($g) => empty($g['game_disabled'])));
        $wacEscaleCount = count($wacEscalesPlayable);
        $wacQrCount = count(array_filter($wacEscalesPlayable, fn ($g) => ! empty($g['requires_qr'] ?? false)));
        $wacBonusCount = max(0, $wacEscaleCount - $wacQrCount);
        $wacQrDisplayIdx = 0;
    @endphp
    <div class="wac-escales">
        <div class="wac-section-head wac-section-head--escales">
            <div>
                <h2 class="wac-section-head__title">Escales</h2>
                <p class="wac-section-head__sub">
                    <strong>{{ $wacEscaleCount }}</strong> jeu{{ $wacEscaleCount > 1 ? 'x' : '' }} au total.
                    <strong>{{ $wacQrCount }}</strong> à débloquer +
                    @if ($wacBonusCount > 0)
                        <strong>{{ $wacBonusCount }}</strong> bonus.
                    @endif
                </p>
            </div>
        </div>

        <div class="wac-hub-stack" role="region" aria-label="Liste des escales">
                @foreach ($wacEscales as $i => $game)
                    @php
                        $wacGd = ! empty($game['game_disabled']);
                        if (! $wacGd && ! empty($game['requires_qr'])) {
                            $wacQrDisplayIdx++;
                        }
                    @endphp
                    @if ($wacGd)
                    <div class="wac-game-card wac-escale-ticket wac-game-card--service-off"
                       role="group"
                       aria-label="{{ e($game['title']) }} — hors ligne"
                       data-wac-game-card
                       data-wac-game-disabled="1"
                       data-game-id="{{ $game['id'] }}"
                       data-game-slug="{{ $game['slug'] }}"
                       data-wac-title="{{ e($game['title']) }}"
                       data-wac-teaser="{{ e($game['hub_teaser'] ?? '') }}"
                    >
                    @else
                    <a class="wac-game-card wac-escale-ticket"
                       data-wac-game-card
                       data-game-id="{{ $game['id'] }}"
                       data-game-slug="{{ $game['slug'] }}"
                       data-wac-title="{{ e($game['title']) }}"
                       data-wac-teaser="{{ e($game['hub_teaser'] ?? '') }}"
                       href="/games/{{ $game['slug'] }}"
                    >
                    @endif
                        <div class="wac-escale-ticket__header {{ empty($game['requires_qr']) ? 'wac-escale-ticket__header--bonus' : '' }} {{ $wacGd ? 'wac-escale-ticket__header--off' : '' }}" style="background: {{ $game['sand_color'] }};">
                            <div class="wac-escale-ticket__header-main">
                                <span class="wac-escale-ticket__eyebrow">{{ $wacGd ? 'Hors ligne' : (empty($game['requires_qr']) ? 'Bonus' : 'Wedding Airlines') }}</span>
                                <span class="wac-escale-ticket__escale-no">
                                    @if ($wacGd)
                                        —
                                    @elseif (empty($game['requires_qr']))
                                        {{ $game['bonus_header_title'] ?? 'Bonus' }}
                                    @else
                                        Escale {{ str_pad($wacQrDisplayIdx, 2, '0', STR_PAD_LEFT) }}
                                    @endif
                                </span>
                            </div>
                            @if(!empty($game['hub_icon']))
                                <span class="wac-escale-ticket__header-icon" aria-hidden="true"><i class="fa-solid {{ $game['hub_icon'] }}"></i></span>
                            @endif
                        </div>
                        <div class="wac-escale-ticket__perforation" aria-hidden="true"></div>
                        <div class="wac-escale-ticket__body">
                            <p class="wac-escale-ticket__title">{{ $game['title'] }}</p>
                            <p class="wac-escale-ticket__teaser">{{ $wacGd ? 'Ce jeu est fermé pour le moment.' : ($game['hub_teaser'] ?? '') }}</p>
                            <div class="wac-escale-ticket__row">
                                @if ($wacGd)
                                    <span class="wac-escale-ticket__pts"><i class="fa-solid fa-star" style="font-size:0.55rem;opacity:0.35;margin-right:3px"></i>— FS</span>
                                    <span class="wac-escale-ticket__qr" style="opacity:0.45"><i class="fa-solid fa-ban"></i></span>
                                    <span class="wac-game-card__badge wac-game-card__badge--lock">Hors ligne</span>
                                @elseif (! empty($game['exclude_from_flight_score']))
                                    <span class="wac-escale-ticket__pts wac-escale-ticket__pts--tiebreaker"><i class="fa-solid fa-gift" style="font-size:0.55rem;opacity:0.6;margin-right:3px"></i>Cadeau</span>
                                @else
                                    <span class="wac-escale-ticket__pts"><i class="fa-solid fa-star" style="font-size:0.55rem;opacity:0.5;margin-right:3px"></i>{{ $game['points'] }} FS</span>
                                @endif
                                @if (! $wacGd)
                                @if(!empty($game['requires_qr']))
                                    <span class="wac-escale-ticket__qr"><i class="fa-solid fa-qrcode"></i> QR</span>
                                @else
                                    <span class="wac-escale-ticket__open"><i class="fa-solid fa-unlock"></i> Libre</span>
                                @endif
                                <span class="wac-game-card__badge wac-game-card__badge--play">Jouer</span>
                                @endif
                            </div>
                        </div>
                    @if ($wacGd)
                    </div>
                    @else
                    </a>
                    @endif
                @endforeach
        </div>
    </div>

    {{-- ──── Pied de page ──── --}}
    <div class="wac-hub__footer">
        <div class="wac-hub__footer-line" aria-hidden="true"></div>
        <p class="wac-hub__footer-text"><i class="fa-solid fa-plane" style="margin-right:5px;opacity:0.45;font-size:0.65rem"></i> Yannick & Geoffrey</p>
    </div>
</div>

<div class="gd-code-overlay" id="gd-code-overlay" hidden>
    <div class="gd-code-modal">
        <button type="button" class="gd-code-modal__close" id="gd-code-close" aria-label="Fermer">&times;</button>
        <div class="gd-code-modal__icon"><i class="fa-solid fa-lock"></i></div>
        <h3 class="gd-code-modal__title">Code d'escale</h3>
        <p class="gd-code-modal__text">Entrez le code pour débloquer ce jeu.</p>
        <input type="text" class="wac-input gd-code-modal__input" id="gd-code-input" placeholder="Code" autocomplete="off" autocapitalize="characters">
        <p class="gd-code-modal__err" id="gd-code-err" hidden>Code incorrect</p>
        <button type="button" class="wac-btn wac-btn--primary gd-code-modal__submit" id="gd-code-submit">Valider</button>
    </div>
</div>
@endsection