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

@section('title', $title . ' - ASETQU V.2')
@section('meta_description', $meta_description)

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

@section('content')
{{-- Hero Section --}}
<section class="academy-hero">
    <div class="hero-bg-overlay"></div>
    <div class="hero-silhouettes"></div>
    <div class="hero-particles"></div>
    <div class="container">
        <div class="hero-content text-center">
            <h1 class="hero-title" data-aos="fade-up">
                <span class="text-gradient-cyan italic">AsetAcademy</span> <span class="text-white">untuk</span><br>
                <span class="text-gradient-gold">Ekonomi Digital Masa Depan</span>
            </h1>
            <p class="hero-subtitle" data-aos="fade-up" data-aos-delay="100">
                Pembelajaran terstruktur yang dirancang untuk membantu Anda<br>
                memahami, menganalisis, dan berkembang di dunia aset digital
            </p>
        </div>
    </div>
</section>

{{-- Learning Categories Section --}}
<section class="learning-categories-section section">
    <div class="container">
        <h2 class="section-title-gold" data-aos="fade-up">Video Edukasi</h2>


    </div>
</section>

{{-- Courses Section --}}
<section class="courses-section section">
    <div class="container">
        <div class="row g-4">
            @forelse($videos as $video)
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="{{ $loop->index * 100 }}">
                <div class="course-card">
                    <div class="course-thumbnail">
                        <span class="badge-new">Terbaru</span>
                        @if($video->thumbnail)
                            <img src="{{ asset('storage/' . $video->thumbnail) }}" alt="{{ $video->title }}" onerror="this.style.display='none'">
                        @endif
                        <div class="thumbnail-placeholder">
                            <div class="placeholder-content">
                                @if($video->youtube_video_id)
                                    <i class="fab fa-youtube" style="font-size: 64px; color: #ff0000;"></i>
                                @else
                                    <i class="fas fa-video" style="font-size: 64px; color: #8b5cf6;"></i>
                                @endif
                                <h4>{{ Str::limit($video->title, 50) }}</h4>
                            </div>
                        </div>
                    </div>
                    <div class="course-content">
                        <h4 class="course-title">{{ $video->title }}</h4>
                        <div class="course-meta">
                            <span class="meta-item">
                                <span class="meta-label">Durasi:</span>
                                <span class="meta-value">{{ $video->duration_minutes ?? '10' }} Menit</span>
                            </span>
                            <span class="meta-item">
                                {{-- <span class="meta-label">Target:</span> --}}
                                {{-- <span class="meta-value">{{ ucfirst($video->level) }}</span> --}}
                            </span>
                        </div>
                        <a href="{{ route('page.news.academy-detail', $video->slug) }}" class="btn btn-watch-video">Tonton Video</a>
                    </div>
                </div>
            </div>
            @empty
            <div class="col-12">
                <div class="text-center py-5">
                    <i class="fas fa-video" style="font-size: 64px; color: #8b5cf6; opacity: 0.5;"></i>
                    <p class="mt-3" style="color: #9ca3af;">Belum ada video tersedia</p>
                </div>
            </div>
            @endforelse
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Smooth scroll for category links
    $('.category-card').on('click', function(e) {
        e.preventDefault();
        const target = $(this).attr('href');
        if (target && target !== '#') {
            $('html, body').animate({
                scrollTop: $(target).offset().top - 100
            }, 500);
        }
    });
});
</script>
@endpush