@extends('layouts.modcp')

@section('modcp-content')

    <div class="modcp-page-title">
        Games
        <span class="modcp-count">{{ $items->total() }}</span>
    </div>

    <x-mod-c-p-search placeholder="Search a game..." />

    <div class="modcp-add-form">
        <form action="{{ route('modcp.games.store') }}" method="POST">
            @csrf
            <div class="modcp-add-form-inner">
                <input type="text" name="name" class="form-input"
                       placeholder="Game name..." required>
                <select name="platform_id" class="form-select" required style="width: 20%">
                    <option value="" disabled selected>Platform...</option>
                    @foreach($platforms as $platform)
                        <option value="{{ $platform->id }}">{{ $platform->name }}</option>
                    @endforeach
                </select>
                <select name="genre_id" class="form-select" required style="width: 20%">
                    <option value="" disabled selected>Genre...</option>
                    @foreach($genres as $genre)
                        <option value="{{ $genre->id }}">{{ $genre->name }}</option>
                    @endforeach
                </select>
                <button type="submit" class="btn primary">
                    <i data-lucide="plus" size="14"></i> Add
                </button>
            </div>
        </form>
    </div>

    <div class="modcp-list">
        @forelse($items as $game)
            <div class="modcp-list-item" x-data="{ editing: false }">

                <div class="modcp-list-item-info" x-show="!editing">
                    <span class="modcp-list-item-title">{{ $game->name }}</span>
                    <span class="modcp-list-item-meta">
                <span class="badge">{{ $game->platform->name ?? '—' }}</span>
                <span class="badge">{{ $game->genre->name ?? '—' }}</span>
                · {{ $game->entries_count }} {{ Str::plural('entry', $game->entries_count) }}
            </span>
                </div>

                <form action="{{ route('modcp.games.update', $game) }}" method="POST"
                      class="modcp-list-item-edit modcp-list-item-edit--game"
                      x-show="editing" x-cloak>
                    @csrf @method('PATCH')
                    <input type="text" name="name" class="form-input"
                           value="{{ $game->name }}" required>
                    <select name="platform_id" class="form-select form-select--small" required>
                        @foreach($platforms as $platform)
                            <option value="{{ $platform->id }}"
                                {{ $game->platform_id == $platform->id ? 'selected' : '' }}>
                                {{ $platform->name }}
                            </option>
                        @endforeach
                    </select>
                    <select name="genre_id" class="form-select form-select--small" required>
                        @foreach($genres as $genre)
                            <option value="{{ $genre->id }}"
                                {{ $game->genre_id == $genre->id ? 'selected' : '' }}>
                                {{ $genre->name }}
                            </option>
                        @endforeach
                    </select>
                    <button type="submit" class="btn primary">
                        <i data-lucide="check" size="13"></i>
                    </button>
                    <button type="button" class="btn" @click="editing = false">
                        <i data-lucide="x" size="13"></i>
                    </button>
                </form>

                <div class="modcp-list-item-actions" x-show="!editing">
                    <button type="button" class="btn" @click="editing = true">
                        <i data-lucide="pen" size="13"></i>
                    </button>
                    <form action="{{ route('modcp.games.destroy', $game) }}" method="POST"
                          style="display:inline"
                          onsubmit="return confirm('Delete {{ addslashes($game->name) }}?')">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn danger"
                            {{ $game->entries_count > 0 ? 'disabled title=Has entries' : '' }}>
                            <i data-lucide="trash-2" size="13"></i>
                        </button>
                    </form>
                </div>

            </div>
        @empty
            <div class="modcp-empty"><p>No games yet.</p></div>
        @endforelse
    </div>

    {{ $items->links() }}

@endsection