@extends('layouts.main')

@section('title', $title)

@section('content')
    <div class="row justify-content-center">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <x-buttons.back-small name="event-participant" :route="route('event-participant.index')" />
                    {{ $title }}
                </div>
                <form action="{{ $formAction }}" method="POST">
                    @csrf
                    @if(!$isFormCreate)
                        @method('PUT')
                    @endif
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-4">
                                @php $eventOptions = collect($events)->pluck('title','id')->toArray(); @endphp
                                <x-forms.input-select name="event_id" :label="__('module.event')" :options="$eventOptions" :selected="$eventParticipant->event_id ?? null" required />
                            </div>
                            <div class="col-md-4">
                                @php $ticketOptions = collect($tickets)->pluck('name','id')->toArray(); @endphp
                                <x-forms.input-select name="ticket_id" :label="__('module.event-ticket')" :options="$ticketOptions" :selected="$eventParticipant->ticket_id ?? null" />
                            </div>
                            <div class="col-md-4">
                                @php $sponsorRegOptions = collect($sponsorRegistrations ?? [])->pluck('company_name','id')->toArray(); @endphp
                                <x-forms.input-select name="sponsor_registration_id" :label="__('module.event-sponsor-registration')" :options="$sponsorRegOptions" :selected="$eventParticipant->sponsor_registration_id ?? null" />
                            </div>
                        </div>
                        <div class="row g-3 mt-0">
                            <div class="col-md-4">
                                <x-forms.input-text name="name" :label="__('validation.attributes.name')" :value="$eventParticipant->name ?? null" required />
                            </div>
                            <div class="col-md-4">
                                <x-forms.input-text name="email" :label="__('validation.attributes.email')" :value="$eventParticipant->email ?? null" required />
                            </div>
                            <div class="col-md-4">
                                <x-forms.input-text name="phone" :label="__('validation.attributes.phone')" :value="$eventParticipant->phone ?? null" />
                            </div>
                        </div>
                        <div class="row g-3 mt-0">
                            <div class="col-md-4">
                                <x-forms.input-text name="company" :label="__('validation.attributes.company_name')" :value="$eventParticipant->company ?? null" />
                            </div>
                            <div class="col-md-4">
                                @php $types = ['individual'=>'Individual', 'sponsor_delegate'=>'Sponsor Delegate']; @endphp
                                <x-forms.input-select name="type" :label="__('validation.attributes.type')" :options="$types" :selected="$eventParticipant->type ?? 'individual'" />
                            </div>
                            <div class="col-md-4">
                                @php $payments = ['pending'=>'Pending', 'paid'=>'Paid', 'cancelled'=>'Cancelled']; @endphp
                                <x-forms.input-select name="payment_status" :label="__('validation.attributes.payment_status')" :options="$payments" :selected="$eventParticipant->payment_status ?? 'pending'" />
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="row">
                            <div class="col-12">
                                <div class="float-end">
                                    <x-buttons.submit-save />
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script type="module">
    $(document).ready(function () {
        const selectEvent = $('#select-event-id');
        const selectTicket = $('#select-ticket-id');
        const selectSponsorReg = $('#select-sponsor-registration-id');

        selectEvent.on('change', function() {
            const eventId = $(this).val();
            if (!eventId) {
                selectTicket.empty().trigger('change');
                selectSponsorReg.empty().trigger('change');
                return;
            }

            // Load tickets
            $.ajax({
                url: `{{ route('event-ticket.list-by-event') }}`,
                method: 'GET',
                dataType: 'json',
                data: { event_id: eventId },
                success: function (resp) {
                    if (resp.status) {
                        selectTicket.empty();
                        // If select2 is used, repopulate via new data
                        if (selectTicket.data('select2')) {
                            selectTicket.select2({
                                placeholder: "{{ __('general.select') }}",
                                allowClear: true,
                                data: resp.data
                            });
                        } else {
                            // Fallback: plain select
                            selectTicket.append('<option></option>');
                            resp.data.forEach(function (opt) {
                                selectTicket.append(new Option(opt.text, opt.id));
                            });
                        }
                        selectTicket.trigger('change');
                    }
                },
                error: function (xhr) {
                    console.error(xhr?.responseJSON || xhr);
                }
            });

            // Load sponsor registrations for this event
            $.ajax({
                url: `{{ route('event-participant.list-sponsor-registrations-by-event') }}`,
                method: 'GET',
                dataType: 'json',
                data: { event_id: eventId },
                success: function (resp) {
                    if (resp.status) {
                        selectSponsorReg.empty();
                        if (selectSponsorReg.data('select2')) {
                            selectSponsorReg.select2({
                                placeholder: "{{ __('general.select') }}",
                                allowClear: true,
                                data: resp.data
                            });
                        } else {
                            selectSponsorReg.append('<option></option>');
                            resp.data.forEach(function (opt) {
                                selectSponsorReg.append(new Option(opt.text, opt.id));
                            });
                        }
                        selectSponsorReg.trigger('change');
                    }
                },
                error: function (xhr) {
                    console.error(xhr?.responseJSON || xhr);
                }
            });
        });
    });
</script>
@endpush