@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">{{ __('Sponsor / Exhibitor Application') }}</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

    <form method="POST" action="{{ route('exhibition.store') }}" class="bg-white rounded-xl p-8 shadow-lg space-y-8 border border-gray-100" enctype="multipart/form-data">
        @csrf

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label for="event_id" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('module.event') }}</label>
                <select name="event_id" id="event_id" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition py-2 px-3 text-gray-900 bg-white">
                    <option value="">{{ __('general.select') }}</option>
                    @foreach($events as $e)
                        <option value="{{ $e->id }}" {{ old('event_id') == $e->id ? 'selected' : '' }} data-packages="{{ $e->sponsorshipPackages->toJson() }}">{{ $e->title }}</option>
                    @endforeach
                </select>
                @error('event_id')
                    <p class="text-xs text-red-600 mt-2">{{ $message }}</p>
                @enderror
            </div>
            <div>
                <label for="package_id" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('Sponsorship Package') }}</label>
                <select name="package_id" id="package_id" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition py-2 px-3 text-gray-900 bg-white">
                    <option value="">{{ __('general.select') }}</option>
                </select>
                @error('package_id')
                    <p class="text-xs text-red-600 mt-2">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label for="company_name" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('Company') }}</label>
                <input type="text" id="company_name" name="company_name" value="{{ old('company_name') }}" autocomplete="organization" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition py-2 px-3 text-gray-900 bg-gray-50" />
                @error('company_name')
                    <p class="text-xs text-red-600 mt-2">{{ $message }}</p>
                @enderror
            </div>
            <div>
                <label for="brand_name" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('Brand') }}</label>
                <input type="text" id="brand_name" name="brand_name" value="{{ old('brand_name') }}" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition py-2 px-3 text-gray-900 bg-gray-50" />
            </div>
            <div>
                <label for="industry" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('Industry') }}</label>
                <input type="text" id="industry" name="industry" value="{{ old('industry') }}" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition py-2 px-3 text-gray-900 bg-gray-50" />
            </div>
            <div>
                <label for="website" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('Website') }}</label>
                <input type="text" id="website" name="website" value="{{ old('website') }}" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition py-2 px-3 text-gray-900 bg-gray-50" />
            </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') }}" autocomplete="email" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition py-2 px-3 text-gray-900 bg-gray-50" />
            </div>
            <div>
                <label for="phone" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('validation.attributes.phone') }}</label>
                <input type="text" id="phone" name="phone" value="{{ old('phone') }}" autocomplete="tel" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition py-2 px-3 text-gray-900 bg-gray-50" />
            </div>
            <div class="col-span-full">
                <label for="address" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('Address') }}</label>
                <textarea id="address" name="address" rows="3" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition py-2 px-3 text-gray-900 bg-gray-50">{{ old('address') }}</textarea>
            </div>
            <div>
                <label for="city" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('City') }}</label>
                <input type="text" id="city" name="city" value="{{ old('city') }}" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition py-2 px-3 text-gray-900 bg-gray-50" />
            </div>
            <div>
                <label for="country" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('Country') }}</label>
                <input type="text" id="country" name="country" value="{{ old('country', 'Indonesia') }}" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition py-2 px-3 text-gray-900 bg-gray-50" />
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label for="contact_person" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('Contact Person') }}</label>
                <input type="text" id="contact_person" name="contact_person" value="{{ old('contact_person') }}" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition py-2 px-3 text-gray-900 bg-gray-50" />
            </div>
            <div>
                <label for="contact_position" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('Contact Position') }}</label>
                <input type="text" id="contact_position" name="contact_position" value="{{ old('contact_position') }}" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition py-2 px-3 text-gray-900 bg-gray-50" />
            </div>
            <div>
                <label for="position" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('Position') }}</label>
                <input type="text" id="position" name="position" value="{{ old('position') }}" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition py-2 px-3 text-gray-900 bg-gray-50" />
            </div>
            <div>
                <label for="contact_email" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('Contact Email') }}</label>
                <input type="email" id="contact_email" name="contact_email" value="{{ old('contact_email') }}" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition py-2 px-3 text-gray-900 bg-gray-50" />
            </div>
            <div>
                <label for="contact_phone" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('Contact Phone') }}</label>
                <input type="text" id="contact_phone" name="contact_phone" value="{{ old('contact_phone') }}" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition py-2 px-3 text-gray-900 bg-gray-50" />
            </div>
            <div class="col-span-full">
                <label for="office_address" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('Office Address') }}</label>
                <textarea id="office_address" name="office_address" rows="2" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition py-2 px-3 text-gray-900 bg-gray-50">{{ old('office_address') }}</textarea>
            </div>
        </div>

        <div>
            <label for="level" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('Level') }}</label>
            <select name="level" id="level" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition py-2 px-3 text-gray-900 bg-white">
                <option value="">{{ __('general.select') }}</option>
                @foreach(['government_support','host','strategic_partner','platinum','gold','silver','badge','exhibitor','media_support','supporting_partner'] as $lvl)
                    <option value="{{ $lvl }}" {{ old('level', 'supporting_partner') === $lvl ? 'selected' : '' }}>{{ ucwords(str_replace('_', ' ', $lvl)) }}</option>
                @endforeach
            </select>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label for="logo" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('Logo') }}</label>
                <input type="file" id="logo" name="logo" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition text-gray-900 bg-white file:py-2 file:px-3 file:rounded-lg file:border-0 file:bg-indigo-50 file:text-indigo-700" accept="image/*">
                @error('logo')
                    <p class="text-xs text-red-600 mt-2">{{ $message }}</p>
                @enderror
            </div>
            <div>
                <label for="proposal_file" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('Proposal File') }}</label>
                <input type="file" id="proposal_file" name="proposal_file" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition text-gray-900 bg-white file:py-2 file:px-3 file:rounded-lg file:border-0 file:bg-indigo-50 file:text-indigo-700" accept=".pdf,.doc,.docx">
                @error('proposal_file')
                    <p class="text-xs text-red-600 mt-2">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <div>
            <label for="notes" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('validation.attributes.description') }}</label>
            <textarea name="notes" id="notes" rows="4" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition py-2 px-3 text-gray-900 bg-gray-50">{{ old('notes') }}</textarea>
        </div>

        <!-- Participants Section -->
        <div class="border-t border-gray-200 pt-8">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-900">{{ __('Participants') }}</h3>
                <button type="button" id="add-participant" class="px-4 py-2 text-sm font-medium text-indigo-600 bg-indigo-50 rounded-lg hover:bg-indigo-100 transition">
                    + {{ __('general.add') }} {{ __('Participant') }}
                </button>
            </div>
            <p class="text-sm text-gray-600 mb-4">{{ __('Add participants who will attend the event on behalf of your company') }}</p>

            <div id="participants-container" class="space-y-4">
                @if(old('participants'))
                    @foreach(old('participants') as $index => $participant)
                        <div class="participant-item bg-gray-50 rounded-lg p-4 border border-gray-200">
                            <div class="flex items-center justify-between mb-3">
                                <h4 class="font-medium text-gray-900">{{ __('Participant') }} {{ $index + 1 }}</h4>
                                <button type="button" class="remove-participant text-red-600 hover:text-red-700 text-sm font-medium">
                                    {{ __('general.delete') }}
                                </button>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-semibold text-gray-700 mb-2">{{ __('validation.attributes.name') }}</label>
                                    <input type="text" name="participants[{{ $index }}][name]" value="{{ $participant['name'] ?? '' }}" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition py-2 px-3 text-gray-900 bg-white" required />
                                    @error('participants.'.$index.'.name')
                                        <p class="text-xs text-red-600 mt-1">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-semibold text-gray-700 mb-2">{{ __('validation.attributes.email') }}</label>
                                    <input type="email" name="participants[{{ $index }}][email]" value="{{ $participant['email'] ?? '' }}" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition py-2 px-3 text-gray-900 bg-white" required />
                                    @error('participants.'.$index.'.email')
                                        <p class="text-xs text-red-600 mt-1">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-semibold text-gray-700 mb-2">{{ __('validation.attributes.phone') }}</label>
                                    <input type="text" name="participants[{{ $index }}][phone]" value="{{ $participant['phone'] ?? '' }}" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition py-2 px-3 text-gray-900 bg-white" />
                                </div>
                                <div>
                                    <label class="block text-sm font-semibold text-gray-700 mb-2">{{ __('Company') }}</label>
                                    <input type="text" name="participants[{{ $index }}][company]" value="{{ $participant['company'] ?? '' }}" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition py-2 px-3 text-gray-900 bg-white" />
                                </div>
                            </div>
                        </div>
                    @endforeach
                @endif
            </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>
@endsection

@push('scripts')
<script type="module">
    let participantIndex = {{ old('participants') ? count(old('participants')) : 0 }};

    // Handle event change to update packages
    document.getElementById('event_id').addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const packages = JSON.parse(selectedOption.getAttribute('data-packages') || '[]');
        const packageSelect = document.getElementById('package_id');

        // Clear existing options
        packageSelect.innerHTML = '<option value="">{{ __('general.select') }}</option>';

        // Add packages for selected event
        packages.forEach(pkg => {
            const option = document.createElement('option');
            option.value = pkg.id;
            option.textContent = pkg.name || `Package #${pkg.id}`;
            if ('{{ old("package_id") }}' == pkg.id) {
                option.selected = true;
            }
            packageSelect.appendChild(option);
        });
    });

    // Trigger on page load if event is already selected
    const eventSelect = document.getElementById('event_id');
    if (eventSelect.value) {
        eventSelect.dispatchEvent(new Event('change'));
    }

    // Add participant
    document.getElementById('add-participant').addEventListener('click', function() {
        const container = document.getElementById('participants-container');
        const companyNameValue = document.getElementById('company_name') ? document.getElementById('company_name').value : '';

        // Get the domain part from the main email field if present
        let domainEmail = '';
        const mainEmailInput = document.getElementById('email');
        if (mainEmailInput && mainEmailInput.value) {
            const emailParts = mainEmailInput.value.split('@');
            if (emailParts.length === 2) {
                domainEmail = '@' + emailParts[1];
            }
        }

        const participantHtml = `
            <div class="participant-item bg-gray-50 rounded-lg p-4 border border-gray-200">
                <div class="flex items-center justify-between mb-3">
                    <h4 class="font-medium text-gray-900">{{ __('Participant') }} ${participantIndex + 1}</h4>
                    <button type="button" class="remove-participant text-red-600 hover:text-red-700 text-sm font-medium">
                        {{ __('general.delete') }}
                    </button>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">{{ __('validation.attributes.name') }}</label>
                        <input type="text" name="participants[${participantIndex}][name]" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition py-2 px-3 text-gray-900 bg-white" required />
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">{{ __('validation.attributes.email') }}</label>
                        <input type="email" name="participants[${participantIndex}][email]" id="participant-email-${participantIndex}" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition py-2 px-3 text-gray-900 bg-white" value="${domainEmail ? domainEmail : ''}" required />
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">{{ __('validation.attributes.phone') }}</label>
                        <input type="text" name="participants[${participantIndex}][phone]" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition py-2 px-3 text-gray-900 bg-white" />
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">{{ __('Company') }}</label>
                        <input type="text" name="participants[${participantIndex}][company]" value="${companyNameValue}" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition py-2 px-3 text-gray-900 bg-white" />
                    </div>
                </div>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', participantHtml);
        participantIndex++;
        updateParticipantNumbers();
    });

    // Remove participant
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-participant')) {
            e.target.closest('.participant-item').remove();
            updateParticipantNumbers();
        }
    });

    // Update participant numbers
    function updateParticipantNumbers() {
        const items = document.querySelectorAll('.participant-item');
        items.forEach((item, index) => {
            const title = item.querySelector('h4');
            if (title) {
                title.textContent = `{{ __('Participant') }} ${index + 1}`;
            }
        });
    }
</script>
@endpush