@extends('layout.guest')
@section('content')
    <main class="min-h-screen">
        <!-- Hero -->
        <section class="relative mt-0">
            <!-- Hero Image -->
            <div class="hidden lg:block lg:absolute lg:z-10 lg:top-0 lg:right-0" style="margin-right: 80px;" aria-hidden="true">
                <img src="{{ asset('images/bg1.png') }}" style="width: 600px; height: 550px;border-radius: 10%;" alt="Hero Image" />
            </div>

            <!-- Hero Description -->
            <div class="relative mx-auto max-w-7xl px-4 lg:px-14 lg:py-16">
                <div class="lg:grid lg:grid-cols-12 lg:gap-8">
                    <div class="lg:col-span-6">
                        <!-- Label New -->
                        <h1>
                            <div class="flex items-center">
                                <span class="mt-6 block text-4xl font-semibold sm:text-3xl">
                                    <span class="block text-[#1E2B4F] leading-normal">Selamat Datang <br /></span>
                                    <span class="block text-xl font-semibold sm:text-xl">
                                        <span class="block text-[#1E2B4F] leading-normal">
                                            di Sistem Pakar Identifikasi Gejala Masalah Bimbingan Konseling Menggunakan Metode Forward Chaining
                                            <br />
                                        </span>
                                    </span>
                                </span>
                            </div>
                        </h1>
                        <!-- End Label New -->

                        <!-- Text -->
                        <div class="flex flex-wrap gap-16 mt-8">
                            <div class="flex items-center gap-4">
                                <div class="flex-shrink-0">
                                    <img src="{{ asset('/images/service.svg') }}" alt="service icon" />
                                </div>
                                <div>
                                    <h5 class="text-[#1E2B4F] text-lg font-medium">Metode</h5>
                                    <p class="text-[#AFAEC3]">Metode Forward Chaining</p>
                                </div>
                            </div>
                        </div>
                        <!-- Text -->

                        <!-- CTA Button -->
                        <div class="grid lg:flex flex-wrap mt-20 gap-5">
                            <a href="{{ route('diagnosa.index') }}" class="text-white text-lg font-medium text-center bg-[#0D63F3] rounded-full px-12 py-3">
                                Diagnosa
                            </a>
                        </div>
                        <!-- CTA Button -->
                    </div>
                </div>
            </div>
        </section>
        <!-- End Hero -->

        <!-- Popular Categories -->
        <section class="mt-22 bg-[#F9FBFC]">
            <div class="mx-auto max-w-7xl px-4 lg:px-14 py-16">
                <a href="{{ route('edukasi.index') }}">
                    <h3 class="text-2xl font-semibold">Katalog Edukasi Konseling</h3>
                </a>
                <!-- Card -->
                <div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6 sm:gap-8 md:gap-10 lg:gap-12 mt-10">
                    @foreach ($categories as $category)
                        <div class="video-container">
                            <video controls class="bg-white video rounded-xl mt-3 transition hover:ring-offset-2 hover:ring-2 hover:ring-[#0D63F3]">
                                @if ($category->video1)
                                    <source src="{{ asset('storage/videos/' . $category->video1) }}" type="video/mp4">
                                @endif
                                @if ($category->video2)
                                    <source src="{{ asset('storage/videos/' . $category->video2) }}" type="video/mp4">
                                @endif
                                @if ($category->video3)
                                    <source src="{{ asset('storage/videos/' . $category->video3) }}" type="video/mp4">
                                @endif
                                @if ($category->video4)
                                    <source src="{{ asset('storage/videos/' . $category->video4) }}" type="video/mp4">
                                @endif
                                @if ($category->video5)
                                    <source src="{{ asset('storage/videos/' . $category->video5) }}" type="video/mp4">
                                @endif
                                Maaf, browser Anda tidak mendukung tag video.
                            </video>
                            <h2 class="mt-2 text-lg font-semibold">{{ $category->category }}</h2>
                        </div>
                    @endforeach
                </div>
                <!-- End Card -->
            </div>
        </section>
        <!-- End Popular Categories -->
    </main>

    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            const videos = document.querySelectorAll('video');
            videos.forEach(video => {
                video.addEventListener('play', () => {
                    videos.forEach(v => {
                        if (v !== video) {
                            v.pause();
                        }
                    });
                });
            });
        });
    </script>
@endsection