@extends('layouts.game')

@section('title', 'Create Character')

@section('game-content')
    <div class="max-w-2xl mx-auto">
        <div class="bg-syndicate-800 border border-syndicate-700 rounded-lg p-8">
            <h1 class="font-display text-2xl font-bold text-gray-100 mb-6">
                Create Your Character
            </h1>

            <p class="text-gray-400 mb-8">
                Welcome to {{ config('game.name', 'The Crime Syndicate') }}!
                Create your character to start your criminal career.
            </p>

            <form method="POST" action="{{ route('game.character.store') }}">
                @csrf

                <!-- Name -->
                <div class="mb-6">
                    <label for="name" class="block font-medium text-sm text-gray-300 mb-2">
                        Character Name
                    </label>
                    <input
                        id="name"
                        type="text"
                        name="name"
                        value="{{ old('name') }}"
                        required
                        autofocus
                        autocomplete="name"
                        class="w-full bg-syndicate-700 border-syndicate-600 text-gray-100 placeholder-gray-500 focus:border-crime-500 focus:ring-crime-500 rounded-md shadow-sm @error('name') border-red-500 @enderror"
                        placeholder="Enter your character name"
                        maxlength="50"
                    >
                    @error('name')
                        <p class="mt-2 text-sm text-red-400">{{ $message }}</p>
                    @enderror
                    <p class="mt-1 text-xs text-gray-500">
                        Choose a unique name for your character (max 50 characters).
                    </p>
                </div>

                <!-- Gender -->
                <div class="mb-6">
                    <label class="block font-medium text-sm text-gray-300 mb-2">
                        Gender
                    </label>
                    <div class="space-y-2">
                        @foreach($genders as $gender)
                            <div class="flex items-center">
                                <input
                                    id="gender-{{ $gender }}"
                                    type="radio"
                                    name="gender"
                                    value="{{ $gender }}"
                                    {{ old('gender') === $gender ? 'checked' : ($loop->first ? 'checked' : '') }}
                                    class="h-4 w-4 text-crime-600 focus:ring-crime-500 border-syndicate-600 bg-syndicate-700"
                                >
                                <label
                                    for="gender-{{ $gender }}"
                                    class="ml-2 block text-sm text-gray-300"
                                >
                                    {{ ucfirst($gender) }}
                                </label>
                            </div>
                        @endforeach
                    </div>
                    @error('gender')
                        <p class="mt-2 text-sm text-red-400">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Location -->
                <div class="mb-6">
                    <label for="location_id" class="block font-medium text-sm text-gray-300 mb-2">
                        Starting Location
                    </label>
                    <select
                        id="location_id"
                        name="location_id"
                        required
                        class="w-full bg-syndicate-700 border-syndicate-600 text-gray-100 focus:border-crime-500 focus:ring-crime-500 rounded-md shadow-sm @error('location_id') border-red-500 @enderror"
                    >
                        @foreach($locations as $location)
                            <option
                                value="{{ $location->id }}"
                                {{ old('location_id') == $location->id ? 'selected' : ($loop->first ? 'selected' : '') }}
                            >
                                {{ $location->name }}
                            </option>
                        @endforeach
                    </select>
                    @error('location_id')
                        <p class="mt-2 text-sm text-red-400">{{ $message }}</p>
                    @enderror
                    <p class="mt-1 text-xs text-gray-500">
                        Choose where your character will start their journey.
                    </p>
                </div>

                <!-- Starting Stats Preview -->
                <div class="mb-6 bg-syndicate-700 border border-syndicate-600 p-4 rounded-lg">
                    <h3 class="font-display font-semibold text-sm text-gray-300 mb-3">
                        Starting Stats
                    </h3>
                    <div class="grid grid-cols-2 gap-3 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-400">Health</span>
                            <span class="text-gray-200">{{ config('game.health.start_amount', 100) }}/{{ config('game.health.max', 100) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-400">Energy</span>
                            <span class="text-gray-200">{{ config('game.energy.start_amount', 100) }}/{{ config('game.energy.max', 100) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-400">Money</span>
                            <span class="text-gold-400">${{ number_format(config('game.economy.start_money', 5000)) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-400">Bank</span>
                            <span class="text-gray-200">${{ number_format(config('game.economy.start_bank', 0)) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-400">Strength</span>
                            <span class="text-gray-200">5</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-400">Defense</span>
                            <span class="text-gray-200">5</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-400">Speed</span>
                            <span class="text-gray-200">5</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-400">Dexterity</span>
                            <span class="text-gray-200">5</span>
                        </div>
                    </div>
                </div>

                <!-- Submit Button -->
                <div class="flex justify-end">
                    <button
                        type="submit"
                        class="inline-flex items-center px-6 py-3 bg-crime-600 hover:bg-crime-500 text-white font-medium rounded-lg transition"
                    >
                        Create Character
                        <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 12h14" />
                        </svg>
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection