@extends('layouts.app')

@section('style')
<style>
    body {
        background-color: #f0f8ff;
    }

    .navbar {
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    h5 {
        font-weight: bold;
    }

    .list-group-item {
        cursor: pointer;
    }

    .list-group-item:hover {
        background-color: #f0f8ff;
    }

    .card {
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .card img {
        max-height: 150px;
        object-fit: cover;
    }
</style>
@endsection

@section('content')
@auth
<main class="py-4" style="flex: 1;">
    <div class="container">
        @endauth
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">QuizGame</a>
            </div>
        </nav>

        <div class="container mt-4">
            <div class="row">
                <div class="col-12">
                    <h5>Quizzes</h5>
                    <div class="row" id="quiz-container">
                    </div>
                </div>
            </div>
        </div>
        @auth
    </div>
</main>
@endauth
@include('modals.game_detail')

@endsection

@section('script')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        initializeDataTable();
    });

    function initializeDataTable() {
        $.ajax({
            url: "{{ route('template_get_data') }}",
            type: "GET",
            success: function(response) {
                if (response.length > 0) {
                    loadQuizzes(response);
                } else {
                    showErrorAlert('ไม่มีข้อมูลสำหรับการแสดงผล');
                }
            },
            error: function() {
                showErrorAlert('ระบบเกิดข้อผิดพลาดในการดึงข้อมูล');
            }
        });
    }

    function loadQuizzes(quizzes) {
        const quizContainer = document.getElementById('quiz-container');
        quizContainer.innerHTML = '';

        quizzes.forEach((quiz) => {
            const cardHTML = `
                <div class="col-md-4 col-lg-3 mb-3">
                    <div class="card">
                        <img src="${quiz.image_url}" class="card-img-top" alt="${quiz.template_name}">
                        <div class="card-body">
                            <h5 class="card-title">${quiz.template_name}</h5>
                            <button type="button" class="btn btn-primary btn-sm" onclick="openQuizModal(${quiz.id})">
                                เล่นตอนนี้
                            </button>
                        </div>
                    </div>
                </div>
            `;
            quizContainer.innerHTML += cardHTML;
        });
    }

    function openQuizModal(id) {
        $.ajax({
            url: '{{ route("template_get_edit") }}',
            method: 'GET',
            data: {
                id
            },
            success: function(data) {
                populateModal(data);
                $('#quizModal').modal('show');
            },
            error: function() {
                showErrorAlert('เกิดข้อผิดพลาดขณะดึงข้อมูลแมพปิ้ง');
            }
        });
    }

    function populateModal(data) {
        $('#image_url').attr('src', data.image_url).attr('alt', data.template_name);
        $('#template_name').text(data.template_name);
        $('#description').html(data.description);
        $('#startQuizButton').attr('data-quiz-id', data.id);
    }

    $('#startQuizButton').on('click', function() {
        const quizId = $(this).data('quiz-id');

        if (quizId) {
            window.location.href = `{{ url('questions_start') }}_${quizId}`;
        }
    });

    function showErrorAlert(message) {
        Swal.fire(message, '', 'error');
    }
</script>
@endsection