@extends('page.layouts.main')

@section('content')
<div class="max-w-2xl mx-auto py-12 px-6 pt-24">
    <h1 class="text-3xl font-bold text-gray-900 mb-8">{{ __('Register for Event') }}</h1>
    @if(session('message_success'))
        <div x-data="{ show: true }" x-show="show" class="mb-6 rounded-lg bg-green-100 border border-green-300 text-green-800 px-4 py-3 flex items-center gap-2 shadow-sm transition-all" x-transition>
            <svg class="w-5 h-5 text-green-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-width="2" d="M5 13l4 4L19 7" /></svg>
            <span>{{ session('message_success') }}</span>
            <button type="button" @click="show = false" class="ml-auto text-green-500 hover:text-green-700 focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 8.586l4.95-4.95a1 1 0 111.415 1.414L11.414 10l4.95 4.95a1 1 0 01-1.415 1.415L10 11.414l-4.95 4.95A1 1 0 013.635 14.95L8.586 10 3.636 5.05a1 1 0 111.415-1.415L10 8.586z" clip-rule="evenodd" />
                </svg>
            </button>
        </div>
    @endif

    @if(session('message_danger'))
        <div x-data="{ show: true }" x-show="show" class="mb-6 rounded-lg bg-red-100 border border-red-300 text-red-800 px-4 py-3 flex items-center gap-2 shadow-sm transition-all" x-transition>
            <svg class="w-5 h-5 text-red-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
            <span>{{ session('message_danger') }}</span>
            <button type="button" @click="show = false" class="ml-auto text-red-500 hover:text-red-700 focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 8.586l4.95-4.95a1 1 0 111.415 1.414L11.414 10l4.95 4.95a1 1 0 01-1.415 1.415L10 11.414l-4.95 4.95A1 1 0 013.635 14.95L8.586 10 3.636 5.05a1 1 0 111.415-1.415L10 8.586z" clip-rule="evenodd" />
                </svg>
            </button>
        </div>
    @endif
    <div class="w-full max-w-xl bg-white rounded-xl shadow-lg p-8 px-6">
        <form method="POST" action="{{ route('registration.store') }}" class="space-y-6">
            @csrf

            <div>
                <label for="public-event-id" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('module.event') }}</label>
                <select
                    id="public-event-id"
                    name="event_id"
                    class="block w-full rounded-lg border border-gray-300 bg-gray-50 py-2 px-3 leading-6 text-gray-900 placeholder-gray-400 focus:border-indigo-500 focus:ring-indigo-500 transition"
                >
                    <option value="">{{ __('general.select') }}</option>
                    @foreach($events as $e)
                        <option value="{{ $e->id }}" {{ old('event_id') == $e->id ? 'selected' : '' }}>{{ $e->title }}</option>
                    @endforeach
                </select>
                @error('event_id')
                    <p class="text-sm text-red-600 mt-2">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="public-ticket-id" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('module.event-ticket') }}</label>
                <select
                    id="public-ticket-id"
                    name="ticket_id"
                    class="block w-full rounded-lg border border-gray-300 bg-gray-50 py-2 px-3 leading-6 text-gray-900 placeholder-gray-400 focus:border-indigo-500 focus:ring-indigo-500 transition"
                >
                    <option value="">{{ __('general.select') }}</option>
                </select>
                @error('ticket_id')
                    <p class="text-sm text-red-600 mt-2">{{ $message }}</p>
                @enderror
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="name" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('validation.attributes.name') }}</label>
                    <input
                        type="text"
                        id="name"
                        name="name"
                        value="{{ old('name') }}"
                        class="block w-full rounded-lg border border-gray-300 bg-gray-50 py-2 px-3 leading-6 text-gray-900 placeholder-gray-400 focus:border-indigo-500 focus:ring-indigo-500 transition"
                        autocomplete="name"
                    >
                    @error('name')
                        <p class="text-sm text-red-600 mt-2">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('validation.attributes.email') }}</label>
                    <input
                        type="email"
                        id="email"
                        name="email"
                        value="{{ old('email') }}"
                        class="block w-full rounded-lg border border-gray-300 bg-gray-50 py-2 px-3 leading-6 text-gray-900 placeholder-gray-400 focus:border-indigo-500 focus:ring-indigo-500 transition"
                        autocomplete="email"
                    >
                    @error('email')
                        <p class="text-sm text-red-600 mt-2">{{ $message }}</p>
                    @enderror
                </div>
                <div class="md:col-span-2">
                    <label for="phone" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('validation.attributes.phone') }}</label>
                    <input
                        type="tel"
                        id="phone"
                        name="phone"
                        value="{{ old('phone') }}"
                        class="block w-full rounded-lg border border-gray-300 bg-gray-50 py-2 px-3 leading-6 text-gray-900 placeholder-gray-400 focus:border-indigo-500 focus:ring-indigo-500 transition"
                        autocomplete="tel"
                    >
                    @error('phone')
                        <p class="text-sm text-red-600 mt-2">{{ $message }}</p>
                    @enderror
                </div>
                <div class="md:col-span-2">
                    <label for="company" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('module.company') }}</label>
                    <input
                        type="text"
                        id="company"
                        name="company"
                        value="{{ old('company') }}"
                        class="block w-full rounded-lg border border-gray-300 bg-gray-50 py-2 px-3 leading-6 text-gray-900 placeholder-gray-400 focus:border-indigo-500 focus:ring-indigo-500 transition"
                        autocomplete="organization"
                    >
                    @error('company')
                        <p class="text-sm text-red-600 mt-2">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div>
                <button
                    type="submit"
                    class="w-full flex items-center justify-center px-6 py-3 rounded-lg bg-indigo-600 text-white font-semibold text-base tracking-wide shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition"
                >
                    {{ __('general.submit') }}
                </button>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
@php
    // Build a plain PHP array/collection for JS consumption to avoid Blade parsing issues.
    $eventsJson = $events->map(function ($e) {
        return [
            'id' => $e->id,
            'tickets' => $e->tickets->map(function ($t) {
                return [
                    'id' => $t->id,
                    'name' => $t->name,
                ];
            })->values()->all(),
        ];
    })->values()->all();

    // Prepare the "select" label for JavaScript safely
    $selectLabel = __('general.select');
@endphp

<script>
    (function(){
        // Pass prepared PHP data to JavaScript safely
        const events = @json($eventsJson);
        const selectLabel = @json($selectLabel);

        const selectEvent = document.getElementById('public-event-id');
        const selectTicket = document.getElementById('public-ticket-id');

        function repopulateTickets(eventId) {
            const found = events.find(e => String(e.id) === String(eventId));
            selectTicket.innerHTML = '';
            const empty = document.createElement('option');
            empty.value = '';
            empty.textContent = selectLabel;
            selectTicket.appendChild(empty);
            if (found) {
                found.tickets.forEach(function(t){
                    const opt = document.createElement('option');
                    opt.value = t.id;
                    opt.textContent = t.name;
                    selectTicket.appendChild(opt);
                });
            }
        }

        selectEvent.addEventListener('change', function(){ repopulateTickets(this.value); });

        if (selectEvent.value) { repopulateTickets(selectEvent.value); }
    })();
</script>
@endpush