Rauru-GameLib/resources/views/games/create.blade.php

<x-layout>
    <x-slot name="scripts">

        <script>

            document.addEventListener('livewire:load', function () {
                Livewire.on('gameSelected', function (game) {
                    populateGameDetails(game);
                });
            });
            // Get the game details and populate the form
            function populateGameDetails(game) {
                // Update the form fields with game details
                console.log(game);
                document.getElementById("game_name").value = game['name'];
                document.getElementById("game_slug").value = game['slug'];
                document.getElementById("category").value = formatCategoryToHumanReadable(game.category);
                document.getElementById("summary").value = game.summary;
                //document.getElementById("summary").value = "php translate(':summary', 'de') ".replace(':summary', game.summary);

                var first_release_date = new Date(game['first_release_date']*1000);
                document.getElementById("release_date").value = first_release_date.getDate()+"."+(first_release_date.getMonth() + 1)+"."+first_release_date.getFullYear();
                document.getElementById("platforms").value = formatCollectPlatformAbbreviations(game.platforms);
                var genres = game.genres;
                var genre_names = [];
                genre_names = genres.map(genre => genre.name);
                document.getElementById("genres").value = genre_names;

                //document.querySelector('[alt="Game Cover "]').src = game.cover_image_path;
            }



            function formatCategoryToHumanReadable(category) {
                let formatedCategory = "";
                switch (category) {
                    case 0 :
                        formatedCategory = "main_game";
                        break;
                    case 1 :
                        formatedCategory = "dlc_addon";
                        break;
                    case 2 :
                        formatedCategory = "expansion";
                        break;
                    case 3 :
                        formatedCategory = "bundle";
                        break;
                    case 4 :
                        formatedCategory = "standalone_expansion";
                        break;
                    case 5 :
                        formatedCategory = "mod";
                        break;
                    case 6 :
                        formatedCategory = "episode";
                        break;
                    case 7 :
                        formatedCategory = "season";
                        break;
                    case 8 :
                        formatedCategory = "remake";
                        break;
                    case 9 :
                        formatedCategory = "remaster";
                        break;
                    case 10 :
                        formatedCategory = "expanded_game";
                        break;
                    case 11 :
                        formatedCategory = "port";
                        break;
                    case 12 :
                        formatedCategory = "fork";
                        break;
                    case 13 :
                        formatedCategory = "pack";
                        break;
                    case 14 :
                        formatedCategory = "update";
                        break;
                    default :
                        formatedCategory = "undefined";
                        break;
                }
                return formatedCategory;
            }

            function formatCollectPlatformAbbreviations(platforms) {
                let formatedPlatformString = ""

                platforms.forEach(platform => {
                    formatedPlatformString = formatedPlatformString + platform.abbreviation + ', ';
                });

                return formatedPlatformString;
            }

        </script>
    </x-slot>
    <x-slot name="title">Link a Game</x-slot>

    <x-slot name="content">
        <div class="p-4 sm:ml-64">
            <div class="p-4 mb-5 border-2 border-gray-200 border-dashed rounded-lg dark:border-gray-700 mt-14">
                <h1 class="font-semibold tracking-wide text-left text-blue-500 uppercase">Link Game</h1>

                <form method="POST" action="{{ route('games.store') }}">
                    @csrf
                    <div class="grid grid-cols-1 gap-4 mt-2">
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-400">Game Name</label>
                            <div id='dropdown' class="flex">
                                <livewire:search-dropdown>
                            </div>
                        </div>

                        <div class="p-4 mt-4 border-2 border-gray-200 border-dashed rounded-lg dark:border-gray-700">
                            <h2 class="font-semibold tracking-wide text-left text-blue-500 uppercase">Game Details</h2>
                            <div class="grid grid-cols-1 gap-4 mt-2">
                                <div>
                                    <label for="game_name" class="block text-sm font-medium text-gray-700 dark:text-gray-400">Game Name</label>
                                    <input type="text" name="game_name" id="game_name" x-model="gameDetails.name" readonly class="w-full p-2 border-gray-300 rounded-md focus:border-blue-500 focus:outline-none focus:shadow-outline-blue dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600">
                                </div>
                                <div>
                                    <img x-bind:src="gameDetails.cover_image_path" alt="Game Cover " class="mt-2">
                                </div>
                                <div>
                                    <label for="game_slug" class="block text-sm font-medium text-gray-700 dark:text-gray-400">IGDB Slug</label>
                                    <input type="text" name="game_slug" id="game_slug" x-model="gameDetails.slug" readonly class="w-full p-2 border-gray-300 rounded-md focus:border-blue-500 focus:outline-none focus:shadow-outline-blue dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600">
                                </div>
                                <div>
                                    <label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-400">Category</label>
                                    <textarea name="category" id="category" placeholder="" x-model="gameDetails.category" readonly rows="3" class="w-full p-2 border-gray-300 rounded-md focus:border-blue-500 focus:outline-none focus:shadow-outline-blue dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600"></textarea>
                                </div>
                                <div>
                                    <label for="summary" class="block text-sm font-medium text-gray-700 dark:text-gray-400">summary</label>
                                    <textarea name="summary" id="summary" placeholder="" x-model="gameDetails.summary" readonly rows="3" class="w-full p-2 border-gray-300 rounded-md focus:border-blue-500 focus:outline-none focus:shadow-outline-blue dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600"></textarea>
                                </div>
                                <div>
                                    <label for="first_release_date" class="block text-sm font-medium text-gray-700 dark:text-gray-400">Release Date</label>
                                    <input type="text" name="first_release_date" id="release_date" x-model="gameDetails.first_release_date" readonly class="w-full p-2 border-gray-300 rounded-md focus:border-blue-500 focus:outline-none focus:shadow-outline-blue dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600">
                                </div>
                                <div>
                                    <label for="platforms" class="block text-sm font-medium text-gray-700 dark:text-gray-400">Platforms</label>
                                    <input type="text" name="platforms" id="platforms" x-model="gameDetails.platforms" readonly class="w-full p-2 border-gray-300 rounded-md focus:border-blue-500 focus:outline-none focus:shadow-outline-blue dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600">
                                </div>
                                <div>
                                    <label for="genres" class="block text-sm font-medium text-gray-700 dark:text-gray-400">Genres</label>
                                    <input type="text" name="genres" id="genres" x-model="gameDetails.genres" readonly class="w-full p-2 border-gray-300 rounded-md focus:border-blue-500 focus:outline-none focus:shadow-outline-blue dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600">
                                </div>
                            </div>
                        </div>

                        <div>
                            <button type="submit" class="px-4 py-2 mt-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600">Link Game</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </x-slot>
</x-layout>