@extends('core::layouts.master')

@section('title', $title . ' - ASETQU V.2')
@section('meta_description', $meta_description)

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/pages/games.css') }}">
@endpush

@section('content')
{{-- Error Alert --}}
@if(session('error'))
<div class="container mt-4">
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="fas fa-exclamation-triangle me-2"></i>
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
</div>
@endif

{{-- Hero Section --}}
<section class="games-hero">
    <div class="hero-bg-overlay"></div>
    <div class="hero-character"></div>
    <div class="container">
        <div class="hero-content">
            {{-- Empty hero, character in background --}}
        </div>
    </div>
</section>

{{-- Games List Section --}}
<section class="games-list-section section">
    <div class="container">
        <div class="section-header text-center" data-aos="fade-up">
            <h2 class="section-title-gold">SEMUA PERMAINAN</h2>
            <p class="section-subtitle">Mainkan game dibawah untuk mendapatkan koin sebanyak-banyaknya</p>
            <div class="title-underline"></div>
        </div>

        <div class="row g-4 mt-4">
            @foreach($games as $slug => $game)
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="{{ $loop->index * 100 }}">
                <div class="game-card">
                    <div class="game-thumbnail">
                        <img src="{{ $game['thumbnail'] }}" alt="{{ $game['name'] }}" onerror="handleImageError(this)">
                        <div class="thumbnail-overlay">
                            <span class="game-title-overlay">{{ strtoupper($game['name']) }}</span>
                        </div>
                    </div>
                    <div class="game-info">
                        <div class="game-details">
                            <h4 class="game-title">{{ $game['name'] }}</h4>
                            <p class="game-desc">{{ $game['description'] }}</p>
                        </div>
                        @auth
                            <button class="btn btn-play-game" data-bs-toggle="modal" data-bs-target="#gameModal"
                                    data-game-title="{{ $game['name'] }}"
                                    data-game-slug="{{ $slug }}"
                                    data-game-thumbnail="{{ $game['thumbnail'] }}">
                                Main sekarang
                            </button>
                        @else
                            <button class="btn btn-play-game" onclick="showGameLoginRequired()">
                                Main sekarang
                            </button>
                        @endauth
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

{{-- Game Modal --}}
<div class="modal fade game-modal" id="gameModal" tabindex="-1" aria-labelledby="gameModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="gameModalLabel">PUZZLE QUEST GAME</h5>
                <button type="button" class="btn-close-modal" data-bs-dismiss="modal" aria-label="Close">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="game-preview">
                    <img src="" alt="Game Preview" id="modalGameThumbnail">
                    <button type="button" class="btn btn-start-game" id="modalPlayBtn">
                        Main <i class="fas fa-play"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Show login modal for games
function showGameLoginRequired() {
    const loginModal = new bootstrap.Modal(document.getElementById('loginModal'));
    loginModal.show();
}

// Initialize game modal handler
function initGameModal() {
    const gameModal = document.getElementById('gameModal');

    if (gameModal) {
        // Remove existing listeners to prevent duplicates
        const newModal = gameModal.cloneNode(true);
        gameModal.parentNode.replaceChild(newModal, gameModal);

        // Add event listener
        newModal.addEventListener('show.bs.modal', function(event) {
            const button = event.relatedTarget;
            const gameTitle = button.getAttribute('data-game-title');
            const gameSlug = button.getAttribute('data-game-slug');
            const gameThumbnail = button.getAttribute('data-game-thumbnail');

            // Update modal content
            document.getElementById('gameModalLabel').textContent = gameTitle.toUpperCase() + ' GAME';
            document.getElementById('modalGameThumbnail').src = gameThumbnail;

            // Set click handler for play button
            const playBtn = document.getElementById('modalPlayBtn');
            const playUrl = '/games/' + gameSlug + '/play';

            // Remove previous click handlers
            const newPlayBtn = playBtn.cloneNode(true);
            playBtn.parentNode.replaceChild(newPlayBtn, playBtn);

            // Add new click handler
            newPlayBtn.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                window.location.href = playUrl;
            });
        });
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', initGameModal);

// Re-initialize on pageshow (handles bfcache)
window.addEventListener('pageshow', function(event) {
    if (event.persisted) {
        initGameModal();
    }
});
</script>
@endpush