@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-sponsor-registration" :route="route('event-sponsor-registration.index')" />
                    {{ $title }}
                </div>
                <div class="card-body">
                    <form action="{{ $formAction }}" method="POST">
                        @csrf
                        @if (!($isFormCreate ?? false))
                            @method('PUT')
                        @endif

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <x-forms.input-text name="code" :label="__('validation.attributes.code')" :value="$eventSponsorRegistration->code ?? null" />
                            </div>
                            <div class="col-md-4">
                                @php
                                    $eventOptions = collect($events)->mapWithKeys(fn($e) => [$e->id => $e->title])->toArray();
                                @endphp
                                <x-forms.input-select name="event_id" :label="__('module.event')" :options="$eventOptions" :selected="$eventSponsorRegistration->event_id ?? null" required />
                            </div>
                            <div class="col-md-4">
                                @php
                                    $packageOptions = collect($packages)->mapWithKeys(fn($p) => [$p->id => ($p->name.' ('.$p->currency.' '.($p->price ?? '0').')')])->toArray();
                                @endphp
                                <x-forms.input-select name="package_id" :label="__('module.event-sponsorship-package')" :options="$packageOptions" :selected="$eventSponsorRegistration->package_id ?? null" required />
                            </div>
                            <div class="col-md-4">
                                <x-forms.input-text name="company_name" :label="__('validation.attributes.company_name')" :value="$eventSponsorRegistration->company_name ?? null" required />
                            </div>
                        </div>

                        <div class="row g-3 mt-0">
                            <div class="col-md-4">
                                <x-forms.input-text name="contact_person" :label="__('validation.attributes.contact_person')" :value="$eventSponsorRegistration->contact_person ?? null" required />
                            </div>
                            <div class="col-md-4">
                                <x-forms.input-text name="email" :label="__('validation.attributes.email')" :value="$eventSponsorRegistration->email ?? null" required />
                            </div>
                            <div class="col-md-4">
                                <x-forms.input-text name="phone" :label="__('validation.attributes.phone')" :value="$eventSponsorRegistration->phone ?? null" />
                            </div>
                        </div>

                        <div class="row g-3 mt-0">
                            <div class="col-md-4">
                                <x-forms.input-text name="position" :label="__('validation.attributes.position')" :value="$eventSponsorRegistration->position ?? null" />
                            </div>
                            <div class="col-md-8">
                                <x-forms.input-text name="office_address" :label="__('validation.attributes.address')" :value="$eventSponsorRegistration->office_address ?? null" />
                            </div>
                        </div>

                        <div class="row g-3 mt-0">
                            <div class="col-md-4">
                                <x-forms.input-select name="payment_method" :label="__('validation.attributes.payment_method')" :options="['bank_transfer'=>'Bank Transfer','credit_card'=>'Credit Card','paypal'=>'PayPal']" :selected="$eventSponsorRegistration->payment_method ?? 'bank_transfer'" />
                            </div>
                            <div class="col-md-4">
                                <x-forms.input-text name="bank_name" :label="__('validation.attributes.bank_name')" :value="$eventSponsorRegistration->bank_name ?? 'Bank Central Asia'" />
                            </div>
                            <div class="col-md-4">
                                <x-forms.input-text name="account_name" :label="__('validation.attributes.account_name')" :value="$eventSponsorRegistration->account_name ?? 'Aviax Group Indonesia PT'" />
                            </div>
                        </div>

                        <div class="row g-3 mt-0">
                            <div class="col-md-4">
                                <x-forms.input-text name="account_number" :label="__('validation.attributes.account_number')" :value="$eventSponsorRegistration->account_number ?? '7050444311'" />
                            </div>
                            <div class="col-md-4">
                                <x-forms.input-text name="swift_code" :label="__('validation.attributes.swift_code')" :value="$eventSponsorRegistration->swift_code ?? 'CENAIDJA'" />
                            </div>
                            <div class="col-md-4">
                                <x-forms.input-select name="status" :label="__('validation.attributes.status')" :options="['submitted'=>'Submitted','confirmed'=>'Confirmed','cancelled'=>'Cancelled']" :selected="$eventSponsorRegistration->status ?? 'submitted'" />
                            </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>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script type="module">
    $(document).ready(function () {
        const selectEvent = $('#select-event-id');
        const selectPackage = $('#select-package-id');

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

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