<div class="card-arena p-4">
    <h2 class="text-white fs-5 mb-3">Add Record</h2>

    @if ($errors->any())
        <div class="alert alert-danger fs-sm">
            @foreach ($errors->all() as $error)
                <div>{{ $error }}</div>
            @endforeach
        </div>
    @endif

    <form method="POST" action="{{ route('profile.records.store') }}" enctype="multipart/form-data">
        @csrf

        <div class="mb-3">
            <label class="form-label text-muted fs-sm">Title</label>
            <input type="text" name="title" class="form-control" value="{{ old('title') }}" required>
        </div>

        <div class="mb-3">
            <label class="form-label text-muted fs-sm">Game Profile</label>
            <select name="player_game_profile_id" class="form-select" required>
                <option value="">Select profile</option>
                @foreach($gameProfiles as $profile)
                    <option value="{{ $profile->id }}" data-game="{{ $profile->game_id }}" @selected(old('player_game_profile_id') == $profile->id)>
                        {{ $profile->game->name }} — {{ $profile->in_game_name }}
                    </option>
                @endforeach
            </select>
        </div>

        <input type="hidden" name="game_id" id="record_game_id" value="{{ old('game_id') }}">

        <div class="mb-3">
            <label class="form-label text-muted fs-sm">Record Type</label>
            <select name="record_type" class="form-select" required>
                @foreach(\App\Enums\RecordType::cases() as $type)
                    <option value="{{ $type->value }}" @selected(old('record_type') === $type->value)>{{ $type->label() }}</option>
                @endforeach
            </select>
        </div>

        <div class="mb-3">
            <label class="form-label text-muted fs-sm">Description</label>
            <textarea name="description" class="form-control" rows="3">{{ old('description') }}</textarea>
        </div>

        <div class="mb-3">
            <label class="form-label text-muted fs-sm">Achievement Date</label>
            <input type="date" name="achievement_date" class="form-control" value="{{ old('achievement_date') }}">
        </div>

        <div class="mb-3">
            <label class="form-label text-muted fs-sm">Result</label>
            <input type="text" name="result_text" class="form-control" value="{{ old('result_text') }}">
        </div>

        <div class="mb-3">
            <label class="form-label text-muted fs-sm">Screenshots (max 5)</label>
            <input type="file" name="screenshots[]" class="form-control" accept="image/*" multiple>
        </div>

        <button type="submit" class="btn-arena btn-primary w-100">Save Record</button>
    </form>
</div>

@push('scripts')
<script>
document.querySelector('select[name="player_game_profile_id"]')?.addEventListener('change', function () {
    const option = this.selectedOptions[0];
    document.getElementById('record_game_id').value = option?.dataset.game || '';
});
</script>
@endpush
