@extends('games.layout')

@section('content')
@php
    $pfReady = ! empty($wacPoidsFioleReady);
@endphp
<div class="wac-app wac-app--escale-themed wac-app--with-game-footer" style="--wac-escale-color: {{ $wacGameColor ?? '#c9841a' }};">
    <div class="wac-header-bar wac-header-bar--escale">
        <a class="wac-back" href="/games" aria-label="Retour au terminal"><i class="fa-solid fa-chevron-left" aria-hidden="true"></i><span class="wac-back__text">Terminal</span></a>
        <span class="wac-guess__progress" id="wac-pf-header-label" aria-hidden="true">{{ $pfReady ? 'Estimation' : 'En attente' }}</span>
    </div>

    <div id="wac-pf-game-column" class="wac-game-column">
        <h1 class="wac-title">Poids du sable des mariés</h1>

        <div id="wac-pf-wait" class="wac-pf-wait" @if ($pfReady) hidden @endif>
            <div class="wac-soon__card wac-pf-wait__card">
                <p class="wac-soon__eyebrow">Wedding Airlines</p>
                <p class="wac-soon__text">Le sable n'a pas encore été pesé. Dès que c'est fait, ce jeu s'ouvre tout seul.</p>
                <p class="wac-soon__hint"><i class="fa-solid fa-arrows-rotate" style="margin-right:6px;opacity:0.5"></i>La page se met à jour automatiquement.</p>
                <p class="wac-pf-wait__status" id="wac-pf-wait-status" aria-live="polite">Vérification…</p>
            </div>
        </div>

        <div id="wac-pf-app" @if (! $pfReady) hidden @endif>
            <p class="wac-subtitle wac-pf-lede">
                Devinez le poids du sable dans la fiole des mariés (en <strong>grammes</strong>).
                Un <strong>resto avec les mariés</strong> attend la personne la plus proche du vrai poids&nbsp;!
            </p>
    
            <form id="wac-pf-form-root" class="wac-pf-form" action="#" method="post" novalidate>
                <label class="wac-pf-label" for="wac-pf-grams">Votre estimation (g)</label>
                <input type="text" class="wac-input wac-pf-input" id="wac-pf-grams" name="grams" inputmode="numeric" pattern="[0-9]*" maxlength="9" placeholder="ex. 42" autocomplete="off" aria-describedby="wac-pf-err" enterkeyhint="go">
                <p class="wac-pf-hint" id="wac-pf-err" hidden>Entrez un poids valide (un nombre entier supérieur à 0).</p>
                <button type="submit" class="wac-visually-hidden" tabindex="-1" aria-hidden="true">Valider</button>
            </form>
        </div>
    </div>

    <div id="wac-pf-already" class="wac-guess__already" hidden>
        <div class="wac-icon-wrap wac-icon-wrap--success" aria-hidden="true">
            <i class="fa-solid fa-circle-check"></i>
        </div>
        <h2 class="wac-guess__done-title">Déjà terminé</h2>
        <p class="wac-guess__done-score" id="wac-pf-already-detail"></p>
        <p class="wac-subtitle wac-pf-result-note">Votre estimation est conservée. Un resto avec les mariés attend la personne la plus proche (hors top 3).</p>
        <a class="wac-btn wac-btn--primary" id="wac-pf-already-hub" href="/games">Retour au terminal</a>
    </div>

    <div id="wac-pf-done" class="wac-guess__done" hidden>
        <div class="wac-icon-wrap wac-icon-wrap--success" aria-hidden="true">
            <i class="fa-solid fa-check"></i>
        </div>
        <h2 class="wac-guess__done-title">Escale terminée !</h2>
        <p class="wac-guess__done-score" id="wac-pf-done-detail"></p>
        <p class="wac-subtitle wac-pf-result-note" id="wac-pf-done-note" hidden></p>
        <a class="wac-btn wac-btn--primary" id="wac-pf-done-hub" href="/games">Retour au terminal</a>
    </div>

    <div class="wac-game-footer">
        <div class="wac-game-footer__line" aria-hidden="true"></div>
        <p class="wac-game-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>
@endsection