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

@section('title', $event['title'] . ' - ASETQU V.2')
@section('meta_description', $event['description'])

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/pages/news-events.css') }}">
@endpush

@section('content')
{{-- Hero Section --}}
<section class="event-detail-hero">
    <div class="hero-bg-overlay"></div>
    <div class="hero-particles"></div>
    <div class="container">
        <div class="hero-content">
            <a href="{{ url('/news-events/calendar') }}" class="btn-back" data-aos="fade-right">
                <i class="fas fa-chevron-left"></i> Kembali
            </a>
            <h1 class="hero-title" data-aos="fade-up" data-aos-delay="100">
                <span class="text-gradient-gold">Detail Acara</span>
            </h1>
        </div>
    </div>
    {{-- <div class="hero-cube-decoration">
        <div class="cube-wrapper">
            <div class="cube-glow"></div>
            <div class="cube-placeholder">
                <div class="cube-3d">
                    <div class="cube-face front"></div>
                    <div class="cube-face back"></div>
                    <div class="cube-face left"></div>
                    <div class="cube-face right"></div>
                    <div class="cube-face top"></div>
                    <div class="cube-face bottom"></div>
                </div>
            </div>
        </div>
    </div> --}}
</section>

{{-- Event Detail Section --}}
<section class="event-detail-section section">
    <div class="container">
        <div class="event-detail-card" data-aos="fade-up">
            <div class="row g-4">
                {{-- Event Poster --}}
                <div class="col-lg-5">
                    <div class="event-detail-poster">
                        @if($event->poster)
                            <img src="{{ asset('storage/' . $event->poster) }}" alt="{{ $event->title }}" onerror="handleImageError(this)">
                        @else
                            <div style="width: 100%; height: 500px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; border-radius: 12px;">
                                <i class="fas fa-calendar-alt" style="font-size: 120px; color: rgba(255,255,255,0.3);"></i>
                            </div>
                        @endif
                    </div>
                </div>

                {{-- Event Info --}}
                <div class="col-lg-7">
                    <div class="event-detail-info">
                        <h2 class="event-detail-title text-gradient-purple">{{ $event->title }}</h2>

                        <div class="event-detail-description">
                            {!! nl2br(e($event->description)) !!}
                        </div>

                        <ul class="event-meta-list">
                            <li>
                                <i class="far fa-calendar"></i>
                                <span>: {{ \Carbon\Carbon::parse($event->event_date)->locale('id')->translatedFormat('l, d F Y') }}</span>
                            </li>
                            <li>
                                <i class="far fa-clock"></i>
                                <span>: {{ date('H.i', strtotime($event->start_time)) }} - {{ date('H.i', strtotime($event->end_time)) }} WIB</span>
                            </li>
                            <li>
                                <i class="fas fa-map-marker-alt"></i>
                                <span>: {{ $event->event_type === 'online' ? 'Online' : $event->location }}</span>
                            </li>
                            @if($event->max_participants)
                            <li>
                                <i class="fas fa-users"></i>
                                <span>: Max {{ $event->max_participants }} participants</span>
                            </li>
                            @endif
                        </ul>

                        <div class="event-actions">
                            @auth
                                @if($isFollowing)
                                    <button class="btn btn-following-event" id="followBtn" onclick="unfollowEvent({{ $event->id }})">
                                        <i class="fas fa-check"></i> Mengikuti Event
                                    </button>
                                @else
                                    <button class="btn btn-join-event" id="followBtn" onclick="followEvent({{ $event->id }})">
                                        <i class="fas fa-calendar-plus"></i> Ikuti Event
                                    </button>
                                @endif
                            @else
                                <button class="btn btn-join-event" onclick="showLoginRequired()">
                                    <i class="fas fa-calendar-plus"></i> Ikuti Event
                                </button>
                            @endauth

                            @if($event->registration_link)
                                <a href="{{ $event->registration_link }}" class="btn btn-register-event" target="_blank">
                                    <i class="fas fa-external-link-alt"></i> Daftar Event
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
// Show login modal
function showLoginRequired() {
    const loginModal = new bootstrap.Modal(document.getElementById('loginModal'));
    loginModal.show();
}

// Follow event
function followEvent(eventId) {
    const followBtn = document.getElementById('followBtn');
    followBtn.disabled = true;

    fetch(`/news-events/events/${eventId}/follow`, {
        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: 3000,
                timerProgressBar: true,
                confirmButtonColor: '#8b5cf6',
                background: 'rgba(26, 23, 48, 0.95)',
                color: '#e2e8f0'
            }).then(() => {
                location.reload();
            });
        } else {
            if (data.redirect) {
                window.location.href = data.redirect;
            } else {
                throw new Error(data.message);
            }
        }
    })
    .catch(error => {
        Swal.fire({
            icon: 'error',
            title: 'Oops...',
            text: error.message || 'Terjadi kesalahan. Silakan coba lagi.',
            confirmButtonColor: '#8b5cf6',
            background: 'rgba(26, 23, 48, 0.95)',
            color: '#e2e8f0'
        });
        followBtn.disabled = false;
    });
}

// Unfollow event
function unfollowEvent(eventId) {
    const followBtn = document.getElementById('followBtn');

    Swal.fire({
        title: 'Berhenti Mengikuti?',
        text: 'Anda tidak akan menerima pengingat untuk 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) {
            followBtn.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(() => {
                        location.reload();
                    });
                }
            })
            .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'
                });
                followBtn.disabled = false;
            });
        }
    });
}
</script>
@endpush