RomhackPlaza/resources/views/livewire/game-selector.blade.php

<div x-data='GameSelector()' x-init="init({
        name: @json(old('new-game-title') ?: null),
        platformId: @json(old('new-game-platform') ? (string) old('new-game-platform') : null),
        genreId: @json(old('new-game-genre') ? (string) old('new-game-genre') : null)
    })">
    <input type="hidden" name="game_selection_mode" value="{{ $selectionMode ?? 'game' }}">
{{--
    Prefill if server-side error.
--}}
@if( $canChangeSelection )
    <div class="game-selector-mode">
        <button
            type="button"
            class="game-selector-mode-btn {{ $selectionMode === 'game' ? 'active' : '' }}"
            wire:click="setSelectionMode('game')"
        >
            Link to a game
        </button>
        <button
            type="button"
            class="game-selector-mode-btn {{ $selectionMode === 'platform' ? 'active' : '' }}"
            wire:click="setSelectionMode('platform')"
        >
            Platform only
        </button>
        <button
            type="button"
            class="game-selector-mode-btn {{ $selectionMode === 'none' ? 'active' : '' }}"
            wire:click="setSelectionMode('none')"
        >
            Nothing
        </button>
    </div>
@endif
<div class="form-group grid-c3">

    @if($selectionMode === 'none')
        <div style="color: var(--text2); font-size: 0.88rem; padding: 10px 0;">
            <i data-lucide="info" size="13"></i>
            This entry will not be linked to any game or platform.
        </div>
    @elseif( $selectionMode === 'platform' )
        <input type="hidden" name="platform_only_id" value="{{ $platformModeId ?? '' }}">

        <div class="game-selector-platform-only">
            <x-form-field-title name="Platform" required="true" />
            <select
                class="form-select"
                wire:change="selectPlatformOnly($event.target.value)"
            >
                <option value="" disabled {{ !$platformModeId ? 'selected' : '' }}>
                    Select a platform...
                </option>
                @foreach($platforms as $platform)
                    <option
                        value="{{ $platform->id }}"
                        {{ $platformModeId == $platform->id ? 'selected' : '' }}
                    >
                        {{ $platform->name }}
                    </option>
                @endforeach
            </select>
        </div>
    @else
        @if( !$newGame && !$hasOldNewGame )
            {{-- Search game mode --}}
            <div class="game-selector">
                <div class="game-selector-level2">

                    <x-form-field-title name="Game" required="true" />
                    <input class="form-input" type="text" wire:model.live.debounce="search" placeholder="Search a game..." autocomplete="off"
                           @focus="$wire.dropdown = $wire.search.length >= {{ $required_chars }}" @click.outside="$wire.dropdown = false" >

                    <input type="hidden" name="game_id" value="{{ $gameId ?? '' }}" />

                </div>

                @if( $dropdown )
                    {{-- List games --}}
                    <ul class="game-selector-dropdown">
                        @forelse($games as $game)
                            <li>
                                <button type="button" wire:click="selectGame({{ $game->id }}, '{{ addslashes($game->name) }}')"
                                        class="dropdown-item" {{ $gameId === $game->id ? 'selected' : '' }} >
                                    <span class="dropdown-item-name">{{ $game->name }}</span>
                                    @if($game->platform)
                                        <span class="badge">{{ $game->platform->short_name ?? $game->platform->name }}</span>
                                    @endif
                                    @if($game->genre)
                                        <span class="badge">{{ $game->genre->name }}</span>
                                    @endif
                                </button>
                            </li>
                        @empty
                            <li class="dropdown-empty">No games found</li>
                        @endforelse
                    </ul>
                @endif

            </div>

            <div class="platform-prefilled">
                <x-form-field-title name="Platform" helper="Prefilled" />
                <input class="form-input" disabled="disabled" type="text" autocomplete="off" value="{{ $platformName }}">
            </div>

            <div class="genre-prefilled">
                <x-form-field-title name="Genre" helper="Prefilled" />
                <input class="form-input" disabled="disabled" type="text" autocomplete="off" value="{{ $genreName }}" >
            </div>

        @else {{-- New game --}}

        <div class="new-game-title">
            <x-form-field-title name="Game" required="true" />
            <input class="form-input" name="new-game-title" type="text" autocomplete="off" x-model="name" value="{{ old('new-game-title', '') }}" required>
        </div>

        <div class="new-game-platform">
            <x-form-field-title name="Platform" required="true" />
            <select class="form-select" name="new-game-platform" x-model="platformId" required>
                <option value="" disabled>---</option>
                @foreach( $platforms as $platform )
                    <option value="{{ (string) $platform->id }}">{{ $platform->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="new-game-genre">
            <x-form-field-title name="Genre" required="true" />
            <select class="form-select" name="new-game-genre" x-model="genreId" required>
                <option value="" disabled>---</option>
                @foreach( $genres as $genre )
                    <option value="{{ (string) $genre->id }}">{{ $genre->name }}</option>
                @endforeach
            </select>
        </div>

        @endif
    @endif

</div>

@if( $selectionMode === 'game')
    <div style="display:flex;align-items: flex-end;justify-content: right;gap:15px;">
        @if($gameId)
            <button type="button" class="btn" wire:click="clearGame">
                Remove
            </button>
        @endif
        <button type="button" class="btn primary" wire:click="switchNewGame">{{ $newGame ? "Cancel" : "Add a game" }}</button>
    </div>
@endif
</div>