@extends('layouts.game')

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

@section('game-content')
    <div class="max-w-2xl mx-auto">
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-8">
            <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6">
                Create Your Character
            </h1>
            
            <p class="text-gray-600 dark: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-700 dark: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 border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 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-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                        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-700 dark: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-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600"
                                >
                                <label 
                                    for="gender-{{ $gender }}" 
                                    class="ml-2 block text-sm text-gray-700 dark:text-gray-300"
                                >
                                    {{ ucfirst($gender) }}
                                </label>
                            </div>
                        @endforeach
                    </div>
                    @error('gender')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </div>
                
                <!-- Location -->
                <div class="mb-6">
                    <label for="location_id" class="block font-medium text-sm text-gray-700 dark:text-gray-300 mb-2">
                        Starting Location
                    </label>
                    <select 
                        id="location_id" 
                        name="location_id" 
                        required
                        class="w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 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-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                        Choose where your character will start their journey.
                    </p>
                </div>
                
                <!-- Starting Stats Preview -->
                <div class="mb-6 bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
                    <h3 class="font-medium text-sm text-gray-700 dark: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-600 dark:text-gray-400">Health</span>
                            <span>{{ config('game.health.start_amount', 100) }}/{{ config('game.health.max', 100) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600 dark:text-gray-400">Energy</span>
                            <span>{{ config('game.energy.start_amount', 100) }}/{{ config('game.energy.max', 100) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600 dark:text-gray-400">Money</span>
                            <span>${{ number_format(config('game.economy.start_money', 5000)) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600 dark:text-gray-400">Bank</span>
                            <span>${{ number_format(config('game.economy.start_bank', 0)) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600 dark:text-gray-400">Strength</span>
                            <span>5</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600 dark:text-gray-400">Defense</span>
                            <span>5</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600 dark:text-gray-400">Speed</span>
                            <span>5</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600 dark:text-gray-400">Dexterity</span>
                            <span>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-blue-600 hover:bg-blue-700 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