@extends('layouts.admin')

@section('title', 'Preview Game')
@section('page_title', 'Preview Game')

@section('content')
    @php
        $gameSource = \Illuminate\Support\Str::startsWith($game->game_url, ['http://', 'https://'])
            ? $game->game_url
            : asset(ltrim($game->game_url, '/'));
    @endphp

    <section class="admin-page-header">
        <div>
            <h3>{{ $game->judul }}</h3>
            <p>{{ $game->deskripsi ?: 'Preview game edukasi.' }}</p>
        </div>

        <a href="{{ route('admin.game.index') }}" class="btn-cancel" style="text-decoration: none;">
            <i class="fa-solid fa-arrow-left"></i> Kembali
        </a>
    </section>

    <div class="game-preview-card is-expanded">
        <iframe
            src="{{ $gameSource }}"
            class="game-frame"
            allowfullscreen
            loading="lazy"
            allow="fullscreen; autoplay; gamepad; clipboard-read; clipboard-write; accelerometer; gyroscope; pointer-lock"
            sandbox="allow-scripts allow-same-origin allow-forms allow-pointer-lock allow-orientation-lock allow-presentation"
            title="Preview {{ $game->judul }}">
        </iframe>

        <div class="game-bottom-bar">
            <p class="game-fallback-text">
                Jika game tidak berjalan dengan baik di dalam halaman, gunakan tombol alternatif berikut.<br>
                <small style="opacity: 0.8; font-size: 0.85em; display: block; margin-top: 4px; color: var(--text-gray, #64748b);">
                    Game eksternal tertentu dapat membatasi permainan di dalam iframe. Jika tombol Play tidak berjalan, gunakan Buka Alternatif atau gunakan game lokal/self-hosted agar tetap berjalan penuh di dalam e-learning.
                </small>
            </p>

            <div class="game-bottom-actions">
                <button type="button" class="btn-small btn-small-preview" data-game-normal>
                    <i class="fa-solid fa-compress"></i> Mode Ringkas
                </button>
                <button type="button" class="btn-small btn-small-preview" data-game-expand>
                    <i class="fa-solid fa-up-right-and-down-left-from-center"></i> Mode Lebar
                </button>
                <button type="button" class="btn-small btn-small-preview" data-game-fullscreen>
                    <i class="fa-solid fa-expand"></i> Layar Penuh
                </button>
                <button type="button" class="btn-small btn-small-danger" data-game-exit>
                    <i class="fa-solid fa-arrow-right-from-bracket"></i> Keluar Mode Lebar
                </button>
                <a href="{{ $gameSource }}" target="_blank" rel="noopener noreferrer" class="btn-small btn-small-preview">
                    <i class="fa-solid fa-up-right-from-square"></i> Buka Alternatif
                </a>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const gameCard = document.querySelector('.game-preview-card');
            const expandBtn = document.querySelector('[data-game-expand]');
            const normalBtn = document.querySelector('[data-game-normal]');
            const fullscreenBtn = document.querySelector('[data-game-fullscreen]');
            const exitBtn = document.querySelector('[data-game-exit]');

            if (expandBtn && gameCard) {
                expandBtn.addEventListener('click', function () {
                    gameCard.classList.add('is-expanded');
                });
            }

            if (normalBtn && gameCard) {
                normalBtn.addEventListener('click', function () {
                    gameCard.classList.remove('is-expanded');
                });
            }

            if (fullscreenBtn && gameCard) {
                fullscreenBtn.addEventListener('click', function () {
                    gameCard.classList.add('is-expanded');
                    if (gameCard.requestFullscreen) {
                        gameCard.requestFullscreen();
                    }
                });
            }

            if (exitBtn && gameCard) {
                exitBtn.addEventListener('click', function () {
                    gameCard.classList.remove('is-expanded');
                    if (document.fullscreenElement && document.exitFullscreen) {
                        document.exitFullscreen();
                    }
                });
            }
        });
    </script>
@endpush
