@extends('layouts.administration-layout')

@section('title', 'Administration')

@section('content')
<div class="container mt-5">
    <h1 class="mb-4">Administration Dashboard</h1>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    <div class="card bg-secondary text-light mb-4">
        <div class="card-header bg-dark">
            <h2>Current Game</h2>
        </div>
        <div class="card-body">
            @if($currentGame)
                <p><strong>Session Name:</strong> {{ $currentGame->session_name }}</p>
                <p><strong>Current Palette:</strong> {{ $currentGame->palette ? $currentGame->palette->name : 'None' }}</p>
                <div class="mt-3">
                    <h3>Current State</h3>
                    <div class="grid-container">
                        @foreach($currentState as $state)
                            <div class="grid-item" style="background-color: {{ $state->color->hex_value }};">
                                ({{ $state->x }}, {{ $state->y }})
                            </div>
                        @endforeach
                    </div>
                </div>
            @else
                <p>No active game session.</p>
            @endif
        </div>
    </div>

    <div class="card bg-secondary text-light mb-4">
        <div class="card-header bg-dark">
            <h2>Change Palette</h2>
        </div>
        <div class="card-body">
            <form action="{{ route('administration.changePalette') }}" method="POST">
                @csrf
                <div class="form-group">
                    <label for="palette_id_change">Select Palette:</label>
                    <select id="palette_id_change" name="palette_id" class="form-control bg-dark text-light" required>
                        @foreach($palettes as $palette)
                            <option value="{{ $palette->id }}" {{ $currentGame && $currentGame->palette_id == $palette->id ? 'selected' : '' }}>
                                {{ $palette->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <button type="submit" class="btn btn-primary btn-block">Change Palette</button>
            </form>
        </div>
    </div>

    <div class="card bg-secondary text-light mb-4">
        <div class="card-header bg-dark">
            <h2>Create New Game</h2>
        </div>
        <div class="card-body">
            <form id="createGameForm" action="{{ route('administration.createGame') }}" method="POST">
                @csrf
                <div class="form-group">
                    <label for="session_name">Session Name:</label>
                    <input type="text" id="session_name" name="session_name" class="form-control bg-dark text-light" required>
                </div>
                <div class="form-group">
                    <label for="palette_id_create">Select Palette:</label>
                    <select id="palette_id_create" name="palette_id" class="form-control bg-dark text-light" required>
                        @foreach($palettes as $palette)
                            <option value="{{ $palette->id }}">{{ $palette->name }}</option>
                        @endforeach
                    </select>
                </div>
                <button type="submit" class="btn btn-success btn-block">Create Game</button>
            </form>
        </div>
    </div>
</div>
@endsection