@extends('games.layout')

@section('content')
<div class="wac-app wac-guess wac-app--escale-themed" style="--wac-escale-color: {{ $wacGameColor ?? '#5b8fbf' }};">
    <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="gd-progress">Manche 1 / 5</span>
    </div>

    <div class="wac-game-column">
    <h1 class="wac-title">Devine la destination</h1>
    <p class="wac-subtitle" id="gd-subtitle" hidden>Ouvrez la carte, placez un point sur la zone que vous proposez, puis validez.</p>

    <div class="wac-guess__score-bar" id="gd-scorebar" hidden>
        <span id="gd-score-label">Score : 0 / 100</span>
    </div>

        <div class="gd-flipcard" id="gd-flipcard" hidden>
            <div class="gd-flipcard__inner" id="gd-flipcard-inner">
                <div class="gd-flipcard__front">
                    <div class="gd-polaroid" id="gd-photo-wrap">
                        <div class="gd-polaroid__viewport">
                            <img id="gd-photo" class="gd-polaroid__img" src="" alt="Destination inconnue">
                        </div>
                        <span class="gd-polaroid__letter" id="gd-letter">Photo A</span>
                    </div>
                </div>
                <div class="gd-flipcard__back">
                    <div class="wac-guess__map-container" id="gd-map"></div>
                </div>
            </div>
        </div>

        <p class="gd-flip-block__hint" id="gd-flip-hint" aria-live="polite" hidden></p>

        <div class="gd-flip-block" id="gd-flip-block" hidden>
            <button type="button" class="gd-flip-btn gd-flip-btn--cta" id="gd-flip-btn">
                <span class="gd-flip-btn__icon" aria-hidden="true"><i class="fa-solid fa-map-location-dot"></i></span>
                <span class="gd-flip-btn__text">
                    <span class="gd-flip-btn__title" id="gd-flip-title">Ouvrir la carte</span>
                    <span class="gd-flip-btn__subtitle" id="gd-flip-subtitle">Placer ma proposition sur la carte</span>
                </span>
            </button>
        </div>

        <div class="gd-map-actions" id="gd-map-actions" hidden>
            <button type="button" class="gd-back-photo-btn" id="gd-back-photo">
                <i class="fa-solid fa-image" aria-hidden="true"></i> Revoir la photo
            </button>
        </div>

        <button type="button" id="gd-confirm" hidden tabindex="-1" aria-hidden="true"></button>

    <div class="wac-guess__result" id="gd-result" hidden>
        <p class="wac-guess__result-distance" id="gd-distance"></p>
        <p class="wac-guess__result-points" id="gd-points"></p>
        <p class="wac-guess__result-name" id="gd-dest-name"></p>
        <p class="wac-guess__anecdote" id="gd-anecdote" hidden></p>
    </div>

        <button type="button" id="gd-next" hidden tabindex="-1" aria-hidden="true"></button>
    </div>

    <div class="wac-guess__done" id="gd-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="gd-final-score"></p>
        <a class="wac-btn wac-btn--primary" id="gd-back-hub" href="/games">Retour au terminal</a>
    </div>

    <div class="wac-guess__already" id="gd-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">Escale déjà complétée</h2>
        <p class="wac-guess__done-score" id="gd-already-score"></p>
        <a class="wac-btn wac-btn--primary" id="gd-already-hub" href="/games">Retour au terminal</a>
    </div>
</div>

<script type="application/json" id="wac-guess-config">{!! json_encode($wacGuessRounds, JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_APOS) !!}</script>
@endsection