@extends('layouts.app')

@section('title', __('events.register.title'))

@section('content')
<div class="container-fluid px-4 py-4">
    <div class="mb-4">
        <h1 class="display-md text-white mb-1">{{ __('events.register.title') }}</h1>
        <p class="text-muted mb-0">{{ $event->title }} · {{ $event->game->name }}</p>
    </div>

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

    <div class="row g-4">
        <div class="col-lg-7">
            <div class="card-arena p-4">
                <form method="POST" action="{{ route('events.register.store', $event) }}">
                    @csrf

                    @if($needsPhone)
                        <div class="alert alert-warning fs-sm mb-3">
                            {{ __('events.register.phone_step_message') }}
                        </div>
                        <div class="row g-2 mb-3">
                            <div class="col-4">
                                <label class="form-label text-muted fs-sm">{{ __('validation.attributes.phone_country_code') }}</label>
                                <input type="text" name="phone_country_code" class="form-control" value="{{ old('phone_country_code', auth()->user()->phone_country_code) }}" required>
                            </div>
                            <div class="col-8">
                                <label class="form-label text-muted fs-sm">{{ __('validation.attributes.phone') }}</label>
                                <input type="text" name="phone" class="form-control" value="{{ old('phone') }}" required>
                            </div>
                        </div>
                    @endif

                    <div class="mb-3">
                        <label class="form-label text-muted fs-sm">{{ __('events.register.select_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 }}" @selected(old('player_game_profile_id') == $profile->id)>
                                    {{ $profile->in_game_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label text-muted fs-sm">Contact Name</label>
                        <input type="text" name="contact_name" class="form-control" value="{{ old('contact_name', auth()->user()->display_name) }}" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label text-muted fs-sm">Contact Email</label>
                        <input type="email" name="contact_email" class="form-control" value="{{ old('contact_email', auth()->user()->email) }}" required>
                    </div>

                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" name="contact_whatsapp" value="1" id="whatsapp" @checked(old('contact_whatsapp'))>
                        <label class="form-check-label text-muted fs-sm" for="whatsapp">{{ __('events.register.whatsapp_opt_in') }}</label>
                    </div>

                    <div class="mb-3">
                        <label class="form-label text-muted fs-sm">{{ __('events.register.user_notes') }}</label>
                        <textarea name="user_notes" class="form-control" rows="3">{{ old('user_notes') }}</textarea>
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn-arena btn-primary">{{ __('events.register.submit') }}</button>
                        <a href="{{ route('events.show', $event) }}" class="btn-arena btn-ghost">Back</a>
                    </div>
                </form>
            </div>
        </div>

        <div class="col-lg-5">
            <div class="card-arena p-4">
                <h2 class="text-white fs-5 mb-3">Event Details</h2>
                <p class="text-muted fs-sm mb-2">{{ $event->short_description }}</p>
                <ul class="list-unstyled fs-sm text-muted mb-0">
                    <li>Pricing: {{ $event->pricing_type->label() }}</li>
                    @if($event->fee_amount_minor)
                        <li>Fee: {{ number_format($event->fee_amount_minor / 100, 2) }} {{ $event->currency }}</li>
                    @endif
                    <li>Starts: {{ $event->starts_at?->format('M d, Y H:i') }}</li>
                    @if($event->registration_closes_at)
                        <li>Registration closes: {{ $event->registration_closes_at->format('M d, Y') }}</li>
                    @endif
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection
