@extends('layouts.guru')

@section('title', $game->judul . ' - SIPENA Guru')
@section('page_title', 'Main Game')

@push('styles')
<style>
    .game-play-card {
        background: #fff;
        border-radius: 18px;
        padding: 16px;
    }

    .game-play-card iframe {
        width: 100%;
        height: 65vh;
        min-height: 550px;
        border: 0;
        border-radius: 16px;
        background: #000;
        transition: height 0.3s ease;
    }

    .game-play-card.is-expanded iframe {
        height: 88vh;
        min-height: 750px;
    }

    .game-bottom-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        flex-wrap: wrap;
        margin-top: 14px;
    }

    .game-fallback-text {
        margin: 0;
        color: var(--text-gray, #64748b);
        font-size: 14px;
    }

    .game-bottom-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .btn-danger-custom {
        background-color: var(--danger, #ef4444);
        color: white;
    }

    .btn-danger-custom:hover {
        background-color: #dc2626;
    }
</style>
@endpush

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

<div class="page-header" style="display: flex; justify-content: space-between; gap: 16px; align-items: flex-start;">
    <div>
        <h1>{{ $game->judul }}</h1>
        <p>{{ $game->deskripsi ?: 'Mainkan game edukasi di dalam website.' }}</p>
    </div>
    <a href="{{ route('guru.game.index') }}" class="btn btn-outline" style="text-decoration: none; display: inline-flex; align-items: center; gap: 8px;">
        <i class="fa-solid fa-arrow-left"></i> Kembali
    </a>
</div>

<div class="card">
    <div class="card-body game-play-card is-expanded">
        <iframe
            src="{{ $gameSource }}"
            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="Game {{ $game->judul }}">
        </iframe>

        <div class="game-bottom-bar">
            <p class="game-fallback-text">
                Game dimainkan langsung di dalam SIPENA melalui tampilan aman berbasis iframe.<br>
                <small style="opacity: 0.8; font-size: 0.85em; display: block; margin-top: 4px; color: var(--text-gray, #64748b);">
                    Jika game tidak tampil, hubungi admin agar file game lokal dapat diperiksa kembali.
                </small>
            </p>

            <div class="game-bottom-actions">
                <button type="button" class="btn btn-outline btn-sm" data-game-normal>
                    <i class="fa-solid fa-compress"></i> Mode Ringkas
                </button>
                <button type="button" class="btn btn-outline btn-sm" data-game-expand>
                    <i class="fa-solid fa-up-right-and-down-left-from-center"></i> Mode Lebar
                </button>
                <button type="button" class="btn btn-primary btn-sm" data-game-fullscreen>
                    <i class="fa-solid fa-expand"></i> Layar Penuh
                </button>
                <button type="button" class="btn btn-danger-custom btn-sm" data-game-exit>
                    <i class="fa-solid fa-arrow-right-from-bracket"></i> Keluar Mode Lebar
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const gameCard = document.querySelector('.game-play-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