@extends('layouts.admin')
@section('title', 'Games')
@section('page-title', 'Games Management')

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-5 gap-6">

    {{-- Add Game Form --}}
    <div class="lg:col-span-2">
        <div class="card p-6 rounded-xl">
            <h3 class="text-white font-bold mb-5">Add New Game</h3>
            <form method="POST" action="{{ route('admin.games.store') }}" enctype="multipart/form-data" class="space-y-4">
                @csrf
                <div>
                    <label class="text-slate-400 text-sm mb-1.5 block">Game Name *</label>
                    <input type="text" name="name" value="{{ old('name') }}" required placeholder="e.g. Free Fire"
                        class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-2.5 text-white text-sm focus:outline-none focus:border-indigo-500">
                    @error('name')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="text-slate-400 text-sm mb-1.5 block">Game Icon (optional)</label>
                    <label class="flex flex-col items-center justify-center w-full h-24 bg-slate-900 border-2 border-dashed border-slate-600 rounded-xl cursor-pointer hover:border-indigo-500 transition">
                        <svg class="w-8 h-8 text-slate-500 mb-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14"/></svg>
                        <span class="text-slate-400 text-xs">Upload icon (PNG/SVG preferred)</span>
                        <input type="file" name="icon" accept="image/*" class="hidden" data-preview="icon-preview">
                    </label>
                    <img id="icon-preview" class="w-12 h-12 object-cover rounded-xl mt-2 hidden">
                </div>
                <div>
                    <label class="text-slate-400 text-sm mb-1.5 block">Sort Order</label>
                    <input type="number" name="sort_order" value="{{ old('sort_order', 0) }}" min="0" class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-2.5 text-white text-sm focus:outline-none focus:border-indigo-500">
                </div>
                <button type="submit" class="w-full btn-primary py-3 font-bold">Add Game</button>
            </form>
        </div>
    </div>

    {{-- Games List --}}
    <div class="lg:col-span-3">
        <div class="card rounded-xl overflow-hidden">
            <div class="px-5 py-4 border-b border-slate-700">
                <h3 class="text-white font-bold">All Games ({{ $games->count() }})</h3>
            </div>
            <div class="divide-y divide-slate-800">
                @forelse($games as $game)
                <div class="p-4 hover:bg-white/[0.02] transition">
                    <div class="flex items-center gap-4">
                        {{-- Icon --}}
                        <div class="w-12 h-12 rounded-xl overflow-hidden flex-shrink-0 bg-slate-700 flex items-center justify-center">
                            @if($game->icon)
                            <img src="{{ $game->icon_url }}" class="w-full h-full object-cover">
                            @else
                            <svg class="w-6 h-6 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"/></svg>
                            @endif
                        </div>

                        <div class="flex-1 min-w-0">
                            <p class="text-white font-semibold">{{ $game->name }}</p>
                            <p class="text-slate-500 text-xs">{{ $game->tournaments_count }} tournaments · slug: {{ $game->slug }}</p>
                        </div>

                        <div class="flex items-center gap-2 flex-shrink-0">
                            {{-- Inline edit form --}}
                            <button onclick="toggleEditGame({{ $game->id }})" class="text-xs bg-indigo-600/20 text-indigo-400 hover:bg-indigo-600/40 px-2 py-1 rounded-lg transition">Edit</button>

                            <form method="POST" action="{{ route('admin.games.toggle', $game) }}" class="inline">
                                @csrf
                                <button type="submit" class="text-xs px-2 py-1 rounded-lg {{ $game->is_active ? 'bg-green-500/20 text-green-400' : 'bg-slate-700 text-slate-400' }} hover:opacity-80 transition">
                                    {{ $game->is_active ? 'Active' : 'Inactive' }}
                                </button>
                            </form>

                            @if($game->tournaments_count === 0)
                            <form method="POST" action="{{ route('admin.games.destroy', $game) }}" class="inline">
                                @csrf @method('DELETE')
                                <button type="button" data-confirm="Delete {{ $game->name }}?" class="text-xs bg-red-600/20 text-red-400 hover:bg-red-600/40 px-2 py-1 rounded-lg transition">Del</button>
                            </form>
                            @endif
                        </div>
                    </div>

                    {{-- Inline Edit Form --}}
                    <div id="edit-game-{{ $game->id }}" class="hidden mt-3 pt-3 border-t border-slate-700">
                        <form method="POST" action="{{ route('admin.games.update', $game) }}" enctype="multipart/form-data" class="flex flex-wrap gap-3 items-end">
                            @csrf @method('PUT')
                            <input type="text" name="name" value="{{ $game->name }}" class="flex-1 min-w-32 bg-slate-900 border border-slate-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500">
                            <input type="number" name="sort_order" value="{{ $game->sort_order }}" placeholder="Order" min="0" class="w-20 bg-slate-900 border border-slate-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500">
                            <label class="cursor-pointer bg-slate-900 border border-slate-700 rounded-lg px-3 py-2 text-slate-400 text-sm hover:border-indigo-500 transition">
                                📷 Icon
                                <input type="file" name="icon" accept="image/*" class="hidden">
                            </label>
                            <button type="submit" class="btn-primary text-xs px-4 py-2">Save</button>
                        </form>
                    </div>
                </div>
                @empty
                <div class="px-5 py-10 text-center text-slate-500">No games added yet.</div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function toggleEditGame(id) {
        document.getElementById('edit-game-' + id).classList.toggle('hidden');
    }
</script>
@endpush