@extends('layouts.main')
@use('Carbon\Carbon')
@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" :route="route('event.index')" />
                {{ $title }}
            </div>
            <div class="card-body">
                <!-- Basic Information -->
                <div class="table-responsive mb-4">
                    <table class="table table-sm table-hover table-striped table-rtc-2">
                        <tbody>
                            <tr>
                                <td class="text-muted" style="width: 15%;">{{ __('validation.attributes.code') }}</td>
                                <td style="width: 35%;">{{ $event->code ?? '-' }}</td>
                                <td class="text-muted" style="width: 15%;">{{ __('validation.attributes.title') }}</td>
                                <td style="width: 35%;">{{ $event->title ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">{{ __('validation.attributes.slug') }}</td>
                                <td>{{ $event->slug ?? '-' }}</td>
                                <td class="text-muted">{{ __('general.category') }}</td>
                                <td>{{ $event->category->name ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">{{ __('validation.attributes.is_active') }}</td>
                                <td>
                                    @if($event->is_active)
                                        <span class="badge bg-success">{{ __('general.active') }}</span>
                                    @else
                                        <span class="badge bg-secondary">{{ __('general.inactive') }}</span>
                                    @endif
                                </td>

                                <td class="text-muted">Map</td>
                                <td colspan="3">
                                    @if($event->latitude && $event->longitude)
                                        <a href="https://www.google.com/maps/search/?api=1&query={{ $event->latitude }},{{ $event->longitude }}"
                                           target="_blank"
                                           style="cursor:pointer; text-decoration:underline;"
                                           title="View on Google Maps">
                                            {{ $event->latitude }}, {{ $event->longitude }}
                                        </a>
                                    @else
                                        -
                                    @endif
                                </td>


                            </tr>
                            <tr>
                                <td class="text-muted">{{ __('validation.attributes.date') }}</td>
                                <td>{{ $event->date?->format('Y-m-d') ?? '-' }}</td>
                                <td class="text-muted">{{ __('validation.attributes.start_time') }}</td>
                                <td>{{ $event->start_time ? Carbon::parse($event->start_time)->format('Y-m-d H:i') : '-' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">{{ __('validation.attributes.end_time') }}</td>
                                <td>{{ $event->end_time ? Carbon::parse($event->end_time)->format('Y-m-d H:i') : '-' }}</td>
                                <td class="text-muted">{{ __('validation.attributes.capacity') }}</td>
                                <td>{{ $event->capacity ? number_format($event->capacity) : '-' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">{{ __('validation.attributes.location') }}</td>
                                <td>{{ $event->location ?? '-' }}</td>
                                <td class="text-muted">{{ __('validation.attributes.address') }}</td>
                                <td>{{ $event->address ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">{{ __('validation.attributes.city') }}</td>
                                <td>{{ $event->city ?? '-' }}</td>
                                <td class="text-muted">{{ __('validation.attributes.province') }}</td>
                                <td>{{ $event->province ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">{{ __('validation.attributes.country') }}</td>
                                <td>{{ $event->country ?? '-' }}</td>
                                <td class="text-muted">{{ __('validation.attributes.organizer') }}</td>
                                <td>{{ $event->organizer ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">{{ __('validation.attributes.contact_phone') }}</td>
                                <td>{{ $event->contact_phone ?? '-' }}</td>
                                <td class="text-muted">{{ __('validation.attributes.contact_email') }}</td>
                                <td>{{ $event->contact_email ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted">{{ __('validation.attributes.website') }}</td>
                                <td>
                                    @if($event->website)
                                        <a href="{{ $event->website }}" target="_blank">{{ $event->website }}</a>
                                    @else
                                        -
                                    @endif
                                </td>
                                <td class="text-muted">{{ __('validation.attributes.video') }}</td>
                                <td>
                                    @if($event->video)
                                        <a href="{{ $event->video }}" target="_blank">{{ $event->video }}</a>
                                    @else
                                        -
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <td class="text-muted">{{ __('validation.attributes.description') }}</td>
                                <td colspan="3">{{ $event->description ?? '-' }}</td>
                            </tr>
                            @if($event->banner)
                            <tr>
                                <td class="text-muted">{{ __('validation.attributes.banner') }}</td>
                                <td colspan="3">
                                    <a href="#" onclick="showImageModal('{{ asset('media/event/' . $event->banner) }}', '{{ __('validation.attributes.banner') }}'); return false;">
                                        <img src="{{ asset('media/event/' . $event->banner) }}" alt="Banner" class="img-fluid" style="max-height: 300px; cursor: pointer;">
                                    </a>
                                </td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                </div>

                <!-- Agendas -->
                @if($event->agendas->isNotEmpty())
                <hr>
                <h5 class="mb-3">{{ __('Agendas') }}</h5>
                <div class="table-responsive mb-4">
                    <table class="table table-sm table-hover table-striped">
                        <thead>
                            <tr>
                                <th>{{ __('validation.attributes.title') }}</th>
                                <th>{{ __('validation.attributes.description') }}</th>
                                <th>{{ __('validation.attributes.start_time') }}</th>
                                <th>{{ __('validation.attributes.end_time') }}</th>
                                <th>{{ __('Location') }}</th>
                                <th>{{ __('Speaker') }}</th>
                                <th>{{ __('Order') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($event->agendas->sortBy('sequence') as $agenda)
                            <tr>
                                <td>{{ $agenda->title ?? '-' }}</td>
                                <td>{{ $agenda->description ?? '-' }}</td>
                                <td>{{ $agenda->start_time ?? '-' }}</td>
                                <td>{{ $agenda->end_time ?? '-' }}</td>
                                <td>{{ $agenda->location ?? '-' }}</td>
                                <td>{{ $agenda->speaker->name ?? '-' }}</td>
                                <td>{{ $agenda->sequence ?? 0 }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @endif

                <!-- Speakers -->
                @if($event->speakers->isNotEmpty())
                <hr>
                <h5 class="mb-3">{{ __('Speakers') }}</h5>
                <div class="row g-3 mb-4">
                    @foreach($event->speakers->sortBy('sequence') as $speaker)
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    @if($speaker->image)
                                    <div class="col-md-3">
                                        <a href="#" onclick="showImageModal('{{ asset('media/speaker/' . $speaker->image) }}', '{{ $speaker->name }}'); return false;">
                                            <img src="{{ asset('media/speaker/' . $speaker->image) }}" alt="{{ $speaker->name }}" class="img-fluid rounded" style="max-height: 150px; cursor:pointer;">
                                        </a>
                                    </div>
                                    @endif
                                    <div class="{{ $speaker->image ? 'col-md-9' : 'col-md-12' }}">
                                        <h6 class="mb-2">{{ $speaker->name ?? '-' }}</h6>
                                        <p class="mb-1"><strong>{{ __('Role') }}:</strong> {{ $speaker->role ?? '-' }}</p>
                                        <p class="mb-1"><strong>{{ __('Organization') }}:</strong> {{ $speaker->organization ?? '-' }}</p>
                                        <p class="mb-1"><strong>{{ __('Category') }}:</strong> {{ $speaker->category ?? '-' }}</p>
                                        @if($speaker->biography)
                                        <p class="mb-1"><strong>{{ __('Biography') }}:</strong> {{ $speaker->biography }}</p>
                                        @endif
                                        <div class="d-flex gap-2 mt-2">
                                            @if($speaker->linkedin)
                                            <a href="{{ $speaker->linkedin }}" target="_blank" class="btn btn-sm btn-outline-primary">
                                                <i class="fab fa-linkedin"></i> LinkedIn
                                            </a>
                                            @endif
                                            @if($speaker->twitter)
                                            <a href="{{ $speaker->twitter }}" target="_blank" class="btn btn-sm btn-outline-info">
                                                <i class="fab fa-twitter"></i> Twitter
                                            </a>
                                            @endif
                                            @if($speaker->website)
                                            <a href="{{ $speaker->website }}" target="_blank" class="btn btn-sm btn-outline-secondary">
                                                <i class="fas fa-globe"></i> Website
                                            </a>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                @endif

                <!-- Sponsors -->
                @if($event->sponsors->isNotEmpty())
                <hr>
                <h5 class="mb-3">{{ __('Sponsors') }}</h5>
                <div class="table-responsive mb-4">
                    <table class="table table-sm table-hover table-striped">
                        <thead>
                            <tr>
                                <th>{{ __('Company') }}</th>
                                <th>{{ __('Brand') }}</th>
                                <th>{{ __('Industry') }}</th>
                                <th>{{ __('Level') }}</th>
                                <th>{{ __('Logo') }}</th>
                                <th>{{ __('Status') }}</th>
                                <th>{{ __('Sequence') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($event->sponsors->sortBy('sequence') as $sponsor)
                            <tr>
                                <td>{{ $sponsor->company_name ?? '-' }}</td>
                                <td>{{ $sponsor->brand_name ?? '-' }}</td>
                                <td>{{ $sponsor->industry ?? '-' }}</td>
                                <td>
                                    @php
                                        $levels = [
                                            'government_support' => 'Government Support',
                                            'host' => 'Host',
                                            'strategic_partner' => 'Strategic Partner',
                                            'platinum' => 'Platinum',
                                            'gold' => 'Gold',
                                            'silver' => 'Silver',
                                            'exhibitor' => 'Exhibitor',
                                            'badge' => 'Badge',
                                            'media_support' => 'Media Support',
                                            'supporting_partner' => 'Supporting Partner',
                                        ];
                                    @endphp
                                    {{ $levels[$sponsor->level] ?? $sponsor->level }}
                                </td>
                                <td>
                                    @if($sponsor->logo)
                                        <a href="#" onclick="showImageModal('{{ asset('media/sponsor/' . $sponsor->logo) }}', '{{ $sponsor->company_name ?? '-' }}'); return false;">
                                            <img src="{{ asset('media/sponsor/' . $sponsor->logo) }}" alt="{{ $sponsor->company_name }}" class="img-fluid" style="max-height: 50px; cursor:pointer;">
                                        </a>
                                    @else
                                        -
                                    @endif
                                </td>
                                <td>
                                    @php
                                        $statuses = [
                                            'pending' => ['class' => 'badge-warning', 'text' => 'Pending'],
                                            'approved' => ['class' => 'badge-success', 'text' => 'Approved'],
                                            'rejected' => ['class' => 'badge-danger', 'text' => 'Rejected'],
                                        ];
                                        $status = $statuses[$sponsor->status ?? 'pending'] ?? $statuses['pending'];
                                    @endphp
                                    <span class="badge {{ $status['class'] }}">{{ $status['text'] }}</span>
                                </td>
                                <td>{{ $sponsor->sequence ?? 0 }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="row g-3 mb-4">
                    @foreach($event->sponsors->sortBy('sequence') as $sponsor)
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <h6 class="mb-2">{{ $sponsor->company_name ?? '-' }}</h6>
                                <p class="mb-1"><strong>{{ __('Brand') }}:</strong> {{ $sponsor->brand_name ?? '-' }}</p>
                                <p class="mb-1"><strong>{{ __('Industry') }}:</strong> {{ $sponsor->industry ?? '-' }}</p>
                                <p class="mb-1"><strong>{{ __('Website') }}:</strong>
                                    @if($sponsor->website)
                                        <a href="{{ $sponsor->website }}" target="_blank">{{ $sponsor->website }}</a>
                                    @else
                                        -
                                    @endif
                                </p>
                                <p class="mb-1"><strong>{{ __('Email') }}:</strong> {{ $sponsor->email ?? '-' }}</p>
                                <p class="mb-1"><strong>{{ __('Phone') }}:</strong> {{ $sponsor->phone ?? '-' }}</p>
                                <p class="mb-1"><strong>{{ __('Address') }}:</strong> {{ $sponsor->address ?? '-' }}</p>
                                <p class="mb-1"><strong>{{ __('City') }}:</strong> {{ $sponsor->city ?? '-' }}</p>
                                <p class="mb-1"><strong>{{ __('Country') }}:</strong> {{ $sponsor->country ?? '-' }}</p>
                                <p class="mb-1"><strong>{{ __('Contact Person') }}:</strong> {{ $sponsor->contact_person ?? '-' }}</p>
                                <p class="mb-1"><strong>{{ __('Contact Position') }}:</strong> {{ $sponsor->contact_position ?? '-' }}</p>
                                <p class="mb-1"><strong>{{ __('Contact Email') }}:</strong> {{ $sponsor->contact_email ?? '-' }}</p>
                                <p class="mb-1"><strong>{{ __('Contact Phone') }}:</strong> {{ $sponsor->contact_phone ?? '-' }}</p>
                                @if($sponsor->notes)
                                <p class="mb-1"><strong>{{ __('Notes') }}:</strong> {{ $sponsor->notes }}</p>
                                @endif
                                @if($sponsor->proposal_file)
                                <p class="mb-1">
                                    <strong>{{ __('Proposal File') }}:</strong>
                                    <a href="{{ asset('media/sponsor/' . $sponsor->proposal_file) }}" target="_blank" class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-file"></i> Download
                                    </a>
                                </p>
                                @endif
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                @endif

                <!-- Tickets -->
                @if($event->tickets->isNotEmpty())
                <hr>
                <h5 class="mb-3">{{ __('Tickets') }}</h5>
                <div class="table-responsive mb-4">
                    <table class="table table-sm table-hover table-striped">
                        <thead>
                            <tr>
                                <th>{{ __('validation.attributes.name') }}</th>
                                <th>{{ __('validation.attributes.description') }}</th>
                                <th>{{ __('validation.attributes.price') }}</th>
                                <th>{{ __('Early Bird Price') }}</th>
                                <th>{{ __('Early Bird Deadline') }}</th>
                                <th>{{ __('validation.attributes.capacity') }}</th>
                                <th>{{ __('Available From') }}</th>
                                <th>{{ __('Available Until') }}</th>
                                <th>{{ __('Active') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($event->tickets as $ticket)
                            <tr>
                                <td>{{ $ticket->name ?? '-' }}</td>
                                <td>{{ $ticket->description ?? '-' }}</td>
                                <td>{{ $ticket->price ? number_format($ticket->price, 0, ',', '.') : '-' }}</td>
                                <td>{{ $ticket->early_bird_price ? number_format($ticket->early_bird_price, 0, ',', '.') : '-' }}</td>
                                <td>{{ $ticket->early_bird_deadline ?? '-' }}</td>
                                <td>{{ $ticket->capacity ? number_format($ticket->capacity) : '-' }}</td>
                                <td>{{ $ticket->available_from ?? '-' }}</td>
                                <td>{{ $ticket->available_until ?? '-' }}</td>
                                <td>
                                    @if($ticket->is_active)
                                        <span class="badge badge-success">{{ __('general.active') }}</span>
                                    @else
                                        <span class="badge badge-secondary">{{ __('general.inactive') }}</span>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @endif

                <!-- Sponsorship Packages -->
                @if($event->sponsorshipPackages->isNotEmpty())
                    <hr>
                    <h5 class="mb-3">{{ __('Sponsorship Packages') }}</h5>
                    <div class="table-responsive mb-4">
                        <table class="table table-sm table-hover table-striped">
                            <thead>
                                <tr>
                                    <th>{{ __('validation.attributes.name') }}</th>
                                    <th>{{ __('validation.attributes.slug') }}</th>
                                    <th>{{ __('validation.attributes.price') }}</th>
                                    <th>{{ __('Currency') }}</th>
                                    <th>{{ __('Max Slots') }}</th>
                                    <th>{{ __('Benefits') }}</th>
                                    <th>{{ __('Available') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($event->sponsorshipPackages as $package)
                                <tr>
                                    <td>{{ $package->name ?? '-' }}</td>
                                    <td>{{ $package->slug ?? '-' }}</td>
                                    <td>{{ $package->price ? number_format($package->price, 0, ',', '.') : '-' }}</td>
                                    <td>{{ $package->currency ?? '-' }}</td>
                                    <td>{{ $package->max_slots ? number_format($package->max_slots) : '-' }}</td>
                                    <td>{{ $package->benefits ?? '-' }}</td>
                                    <td>
                                        @if($package->is_available)
                                            <span class="badge badge-success">{{ __('general.active') }}</span>
                                        @else
                                            <span class="badge badge-secondary">{{ __('general.inactive') }}</span>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif

                @if ($event->documentations->isNotEmpty())
                <hr>
                <h5 class="mb-3">{{ __('Event Documentations') }}</h5>
                <div class="row">
                    @foreach($event->documentations as $documentation)
                        <div class="col-md-3 col-6 mb-4">
                            <div class="card h-100 shadow-sm border">
                                <a href="#" onclick="showImageModal('{{ asset('media/documentation/' . $documentation->file) }}', '{{ $documentation->description ? e($documentation->description) : __('Documentation') }}'); return false;">
                                    <img src="{{ asset('media/documentation/' . $documentation->file) }}"
                                         alt="Documentation"
                                         class="card-img-top img-fluid"
                                         style="object-fit:cover; max-height:180px;min-height:100px;">
                                </a>
                                @if($documentation->description)
                                    <div class="card-body p-2 text-center">
                                        <small class="text-muted">{{ $documentation->description }}</small>
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Image Preview Modal -->
<div class="modal fade" id="imagePreviewModal" tabindex="-1" aria-labelledby="imagePreviewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="imagePreviewModalLabel"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <img id="imagePreviewModalImg" src="" alt="" class="img-fluid" style="max-height: 80vh;">
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
    <script>
        function showImageModal(src, title) {
            // Set the image and title
            document.getElementById('imagePreviewModalImg').setAttribute('src', src);
            document.getElementById('imagePreviewModalLabel').textContent = title ?? '';

            // Use Bootstrap 5 modal JS API if available, otherwise fallback to manually show
            var modalEl = document.getElementById('imagePreviewModal');
            if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
                var modal = bootstrap.Modal.getOrCreateInstance(modalEl);
                modal.show();
            } else if ($(modalEl).modal) {
                // Fallback for Bootstrap 4
                $(modalEl).modal('show');
            } else {
                // Fallback: show by adding 'show' class if modal plugin is unavailable (not recommended)
                modalEl.classList.add('show');
                modalEl.style.display = 'block';
            }
        }
    </script>
@endpush