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

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

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

@section('content')
{{-- Hero Section --}}
<section class="academy-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/academy') }}" 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 Academy</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>

{{-- Academy Detail Section --}}
<section class="academy-detail-section section">
    <div class="container">
        <div class="row g-4">
            {{-- Main Video Content --}}
            <div class="col-lg-8">
                {{-- Video Player --}}
                <div class="video-player-wrapper" data-aos="fade-up">
                    <div class="video-thumbnail" id="videoThumbnail">
                        @if($course->thumbnail)
                            <img src="{{ asset('storage/' . $course->thumbnail) }}" alt="{{ $course->title }}" onerror="handleImageError(this)">
                        @else
                            <div style="width: 100%; height: 400px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center;">
                                <i class="fab fa-youtube" style="font-size: 120px; color: rgba(255,255,255,0.3);"></i>
                            </div>
                        @endif
                        <div class="video-overlay">
                            <button class="btn-play" id="playVideoBtn" data-video="{{ $course->youtube_id ?? '' }}">
                                <i class="fas fa-play"></i>
                            </button>
                        </div>
                    </div>
                    <div class="video-embed d-none" id="videoEmbed">
                        {{-- Video iframe will be injected here --}}
                    </div>
                </div>

                {{-- Video Info --}}
                <div class="video-info" data-aos="fade-up" data-aos-delay="100">
                    <h2 class="video-title text-gradient-cyan">{{ $course->title }}</h2>
                    <div class="video-meta mb-3">
                        <span class="badge bg-primary me-2">
                            <i class="fas fa-eye"></i> {{ number_format($course->view_count) }} views
                        </span>
                        {{-- <span class="badge bg-success">
                            <i class="fas fa-signal"></i> {{ ucfirst($course->level) }}
                        </span> --}}
                    </div>
                    <div class="video-description">
                        {!! nl2br(e($course->description)) !!}
                    </div>
                </div>
            </div>

            {{-- Sidebar - Related Videos --}}
            <div class="col-lg-4">
                <div class="related-videos-sidebar" data-aos="fade-left">
                    <h3 class="sidebar-title">Video lainnya</h3>

                    @forelse($relatedCourses as $related)
                    <a href="{{ route('page.news.academy-detail', $related->slug) }}" class="related-video-item">
                        <div class="related-thumbnail">
                            @if($related->thumbnail)
                                <img src="{{ asset('storage/' . $related->thumbnail) }}" alt="{{ $related->title }}" onerror="handleImageError(this)">
                            @else
                                <div style="width: 100%; height: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center;">
                                    <i class="fab fa-youtube" style="font-size: 32px; color: rgba(255,255,255,0.3);"></i>
                                </div>
                            @endif
                        </div>
                        <div class="related-info">
                            <h4 class="related-title">{{ $related->title }}</h4>
                            <p class="related-desc">{{ Str::limit($related->description, 80) }}</p>
                        </div>
                    </a>
                    @empty
                    <p class="text-muted">Tidak ada video terkait</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Play video functionality
    $('#playVideoBtn').on('click', function() {
        const videoUrl = $(this).data('video');

        if (videoUrl) {
            // Hide thumbnail, show embed
            $('#videoThumbnail').addClass('d-none');
            $('#videoEmbed').removeClass('d-none');

            // Create iframe for YouTube or other video
            let embedHtml = '';
            if (videoUrl.includes('youtube.com') || videoUrl.includes('youtu.be')) {
                // Extract YouTube video ID
                let videoId = '';
                if (videoUrl.includes('youtu.be/')) {
                    videoId = videoUrl.split('youtu.be/')[1];
                } else if (videoUrl.includes('watch?v=')) {
                    videoId = videoUrl.split('watch?v=')[1].split('&')[0];
                }
                embedHtml = `<iframe src="https://www.youtube.com/embed/${videoId}?autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
            } else {
                // Generic video
                embedHtml = `<video src="${videoUrl}" controls autoplay></video>`;
            }

            $('#videoEmbed').html(embedHtml);
        } else {
            // Show alert if no video
            Swal.fire({
                icon: 'info',
                title: 'Video Segera Hadir',
                text: 'Video pembelajaran ini akan segera tersedia.',
                confirmButtonColor: '#8b5cf6'
            });
        }
    });
});
</script>
@endpush