@php
    // Initialize variables with defaults to prevent undefined errors
    $event = $event ?? null;
@endphp

@extends('core::layouts.dashboard')

@section('title', ($event->title ?? 'Detail Event') . ' - ASETQU V.2')
@section('meta_description', $event->description ?? 'Detail informasi event')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/dashboard/event.css') }}?v={{ time() }}">
<style>
.registration-status-box {
    margin-top: 24px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 8px;
    border-left: 3px solid #22c55e;
    padding: 16px;
}

.registration-status-title {
    color: #22c55e;
    font-weight: 600;
    margin: 0;
    margin-bottom: 8px;
}

.registration-status-date {
    color: #9ca3af;
    font-size: 14px;
    margin: 0;
    margin-bottom: 20px;
}

.btn-unfollow-event {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: transparent;
    border: 1px solid #ef4444;
    border-radius: 8px;
    color: #ef4444;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-unfollow-event:hover {
    background: #ef4444;
    color: white;
}

.btn-unfollow-event:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
</style>
@endpush

@section('content')
<div class="event-detail-page">
    <!-- Page Header -->
    <div class="page-header">
        <h1 class="page-title">Detail Acara yang Diikuti</h1>
    </div>

    <!-- Event Detail Container -->
    <div class="event-detail-container">
        <!-- Left: Event Image -->
        <div class="event-detail-image">
            <div class="image-wrapper">
                @if($event && $event->poster)
                    <img src="{{ asset('storage/' . $event->poster) }}" alt="{{ $event->title }}">
                @else
                    <img src="{{ asset('assets/images/events/asq-product-launch.jpg') }}" alt="Event Detail">
                @endif
            </div>
        </div>

        <!-- Right: Event Information -->
        <div class="event-detail-info">
            <h2 class="event-detail-title">
                {{ $event->title ?? 'PELUNCURAN PRODUK ASQ' }}
            </h2>

            <div class="event-detail-description">
                @if($event && $event->description)
                    {!! nl2br(e($event->description)) !!}
                @else
                    <p>
                        Acara ini menghadirkan pembaruan terbaru seputar pengembangan ekosistem ASQ, 
                        termasuk peluncuran fitur, peningkatan teknologi, serta roadmap produk ke depan. 
                        Peserta akan mendapatkan insight langsung mengenai arah strategi ASQ, inisiatif yang 
                        sedang berjalan, dan peluang kolaborasi yang terbuka bagi komunitas, mitra, maupun 
                        pelaku industri.
                    </p>
                    <p>
                        Selain itu, event ini juga menjadi wadah untuk membahas agenda dan acara mendatang, 
                        sekaligus membuka peluang kemitraan strategis dalam pengembangan ekosistem ASQ. 
                        Melalui diskusi, presentasi, dan sesi interaktif, ASQ berkomitmen membangun koneksi 
                        yang kuat, transparan, dan berkelanjutan di dalam ekosistem digital.
                    </p>
                @endif
            </div>

            <div class="event-detail-meta">
                <div class="meta-item">
                    <i class="fas fa-calendar"></i>
                    <span>: {{ $event && $event->event_date ? \Carbon\Carbon::parse($event->event_date)->locale('id')->translatedFormat('l, d F Y') : '19 Desember 2025' }}</span>
                </div>
                <div class="meta-item">
                    <i class="fas fa-clock"></i>
                    <span>: Jam {{ $event && $event->start_time ? date('H.i', strtotime($event->start_time)) : '10.00' }} WIB</span>
                </div>
                <div class="meta-item">
                    <i class="fas fa-map-marker-alt"></i>
                    <span>: {{ $event && $event->event_type === 'online' ? 'Online' : ($event->location ?? 'Online') }}</span>
                </div>
            </div>

            @if($registration)
            <div class="registration-status-box">
                <p class="registration-status-title">
                    <i class="fas fa-check-circle"></i> Anda sudah terdaftar di event ini
                </p>
                <p class="registration-status-date">
                    Terdaftar pada: {{ \Carbon\Carbon::parse($registration->created_at)->locale('id')->translatedFormat('d F Y, H:i') }} WIB
                </p>
                <button class="btn-unfollow-event" id="unfollowBtn" onclick="unfollowEvent({{ $event->id }})">
                    <i class="fas fa-times"></i> Berhenti Ikuti Event
                </button>
            </div>
            @endif
        </div>
    </div>
</div>

@push('scripts')
<script>
// Unfollow event
function unfollowEvent(eventId) {
    const unfollowBtn = document.getElementById('unfollowBtn');

    Swal.fire({
        title: 'Berhenti Mengikuti?',
        text: 'Anda yakin ingin berhenti mengikuti event ini?',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Ya, Berhenti',
        cancelButtonText: 'Batal',
        confirmButtonColor: '#ef4444',
        cancelButtonColor: '#6b7280',
        background: 'rgba(26, 23, 48, 0.95)',
        color: '#e2e8f0'
    }).then((result) => {
        if (result.isConfirmed) {
            unfollowBtn.disabled = true;

            fetch(`/news-events/events/${eventId}/unfollow`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: data.message,
                        timer: 2000,
                        timerProgressBar: true,
                        confirmButtonColor: '#8b5cf6',
                        background: 'rgba(26, 23, 48, 0.95)',
                        color: '#e2e8f0'
                    }).then(() => {
                        // Redirect back to events list after unfollow
                        window.location.href = '{{ route("dashboard.event") }}';
                    });
                }
            })
            .catch(error => {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Terjadi kesalahan. Silakan coba lagi.',
                    confirmButtonColor: '#8b5cf6',
                    background: 'rgba(26, 23, 48, 0.95)',
                    color: '#e2e8f0'
                });
                unfollowBtn.disabled = false;
            });
        }
    });
}
</script>
@endpush
@endsection