<!DOCTYPE html>
<html lang="<?php echo e(str_replace('_', '-', app()->getLocale())); ?>">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>LPKA Kelas II Jakarta</title>

    <!-- Fonts & Styles -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />

    <!-- Favicon -->
    <link rel="icon" href="<?php echo e(asset('picture/favicon.ico')); ?>" type="image/x-icon">
    <link rel="shortcut icon" href="<?php echo e(asset('picture/favicon.ico')); ?>" type="image/x-icon">

    <?php echo app('Illuminate\Foundation\Vite')(['resources/css/app.css', 'resources/js/app.js']); ?>

</head>

<body class="bg-white text-slate-900 dark:bg-[#0a0a0a] dark:text-slate-100">


<div class="w-full border-b border-slate-200/70 dark:border-white/10">
    <div class="mx-auto max-w-6xl px-4 py-3 flex items-center justify-between gap-3">
    <a href="<?php echo e(url('/')); ?>" class="flex items-center gap-2">
    <img src="<?php echo e(asset('picture/logolpka1.png')); ?>" alt="Logo LPKA" class="h-9 w-9 rounded-xl shadow-sm object-cover">
    <div class="leading-tight">
        <div class="text-base font-semibold tracking-tight">LPKA Kelas II Jakarta</div>
        <div class="text-xs text-slate-500 dark:text-slate-400">Portal kegiatan di LPKA Kelas II Jakarta</div>
    </div>
</a></a>

        <div class="flex items-center gap-2">
            <?php if(Route::has('login')): ?>
                <?php if(auth()->guard()->check()): ?>
                    <a href="<?php echo e(url('/dashboard')); ?>"
                       class="inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-medium
                              bg-slate-900 text-white hover:bg-slate-800
                              dark:bg-white dark:text-slate-900 dark:hover:bg-slate-200 transition">
                        Dashboard
                    </a>
                <?php else: ?>
                    <a href="<?php echo e(route('login')); ?>"
                       class="inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-medium
                              border border-slate-200 hover:border-slate-300 hover:bg-slate-50
                              dark:border-white/10 dark:hover:bg-white/5 transition">
                        Log in
                    </a>

                    <?php if(Route::has('register')): ?>
                        <a href="<?php echo e(route('register')); ?>"
                           class="inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-medium
                                  bg-slate-900 text-white hover:bg-slate-800
                                  dark:bg-white dark:text-slate-900 dark:hover:bg-slate-200 transition">
                            Register
                        </a>
                    <?php endif; ?>
                <?php endif; ?>
            <?php endif; ?>
        </div>
    </div>
</div>


<header class="relative overflow-hidden">
    <div class="absolute inset-0">
        <div class="absolute -top-24 -left-24 h-72 w-72 rounded-full blur-3xl opacity-20 bg-rose-500"></div>
        <div class="absolute -bottom-24 -right-24 h-72 w-72 rounded-full blur-3xl opacity-20 bg-indigo-600"></div>
        <div class="absolute inset-0 bg-gradient-to-b from-slate-50 to-white dark:from-white/5 dark:to-transparent"></div>
    </div>

    <div class="relative mx-auto max-w-6xl px-4 py-10">
        
        <div class="text-sm text-slate-600 dark:text-slate-300">
            <a href="<?php echo e(url('/')); ?>" class="hover:underline underline-offset-4">Home</a>
            <span class="mx-2">/</span>
            <a href="<?php echo e(url('/#featured')); ?>" class="hover:underline underline-offset-4">Kegiatan</a>
            <span class="mx-2">/</span>
            <span class="text-slate-900 dark:text-white font-medium">Detail</span>
        </div>

        <div class="mt-4">
            
            <div class="flex flex-wrap items-center gap-2 text-xs text-slate-500 dark:text-slate-400">
                <?php if($kegiatan->category): ?>
                    <span class="inline-flex items-center rounded-full bg-rose-500/10 text-rose-600 px-2 py-1 font-medium dark:text-rose-300">
                        <?php echo e($kegiatan->category); ?>

                    </span>
                <?php endif; ?>

                <span class="inline-flex items-center rounded-full bg-indigo-600/10 text-indigo-700 px-2 py-1 font-medium dark:text-indigo-200">
                    <?php echo e($kegiatan->type); ?>

                </span>

                <span>•</span>
                <span><?php echo e($kegiatan->created_at?->format('d M Y')); ?></span>

                <?php if($kegiatan->organizer): ?>
                    <span>•</span>
                    <span>by <?php echo e($kegiatan->organizer); ?></span>
                <?php endif; ?>
            </div>

            <h1 class="mt-3 text-2xl lg:text-4xl font-semibold tracking-tight">
                <?php echo e($kegiatan->title); ?>

            </h1>

            <p class="mt-3 text-base lg:text-lg text-slate-600 dark:text-slate-300 max-w-3xl">
                <?php echo e($kegiatan->excerpt ?: 'Ringkasan belum diisi. Kamu bisa isi excerpt biar detail page makin mantap.'); ?>

            </p>
        </div>
    </div>
</header>


<main class="mx-auto max-w-6xl px-4 pb-16">
    <div class="grid gap-6 lg:grid-cols-12">
        
        <article class="lg:col-span-8">
            
            <div class="rounded-2xl border border-slate-200/80 bg-white shadow-sm overflow-hidden dark:border-white/10 dark:bg-white/5">
                <div class="p-6">
                    <div class="flex items-center justify-between gap-3 flex-wrap">
                        <div class="text-sm font-semibold">Detail Kegiatan</div>
                        <div class="text-xs text-slate-500 dark:text-slate-400">
                            <?php echo e($kegiatan->status ?? 'draft'); ?>

                        </div>
                    </div>

                    <div class="mt-4">
                        <?php if($kegiatan->cover_url): ?>
                            <img src="<?php echo e($kegiatan->cover_url); ?>"
                                 alt="cover"
                                 class="w-full h-64 object-cover rounded-2xl border border-slate-200/70 dark:border-white/10">
                        <?php else: ?>
                            <div class="w-full h-64 rounded-2xl border border-slate-200/70 dark:border-white/10
                                        bg-gradient-to-br from-rose-500/10 to-indigo-600/10 flex items-center justify-center">
                                <div class="text-sm text-slate-600 dark:text-slate-300">
                                    Cover belum ada — isi <b>cover_url</b> biar lebih kece.
                                </div>
                            </div>
                        <?php endif; ?>
                    </div>

                    
                    <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
                        <div class="rounded-2xl border border-slate-200/70 dark:border-white/10 p-4">
                            <div class="text-xs text-slate-500 dark:text-slate-400">Waktu</div>
                            <div class="mt-1 font-medium">
                                <?php if($kegiatan->start_at): ?>
                                    <?php echo e($kegiatan->start_at->format('d M Y, H:i')); ?>

                                    <?php if($kegiatan->end_at): ?> – <?php echo e($kegiatan->end_at->format('H:i')); ?> <?php endif; ?>
                                <?php else: ?>
                                    -
                                <?php endif; ?>
                            </div>
                        </div>

                        <div class="rounded-2xl border border-slate-200/70 dark:border-white/10 p-4">
                            <div class="text-xs text-slate-500 dark:text-slate-400">Kuota</div>
                            <div class="mt-1 font-medium"><?php echo e($kegiatan->quota ?: '-'); ?></div>
                        </div>

                        <div class="rounded-2xl border border-slate-200/70 dark:border-white/10 p-4">
                            <div class="text-xs text-slate-500 dark:text-slate-400">Lokasi</div>
                            <div class="mt-1 font-medium"><?php echo e($kegiatan->location ?: '-'); ?></div>
                        </div>

                        <div class="rounded-2xl border border-slate-200/70 dark:border-white/10 p-4">
                            <div class="text-xs text-slate-500 dark:text-slate-400">Meeting Link</div>
                            <div class="mt-1 font-medium break-all">
                                <?php echo e($kegiatan->meeting_link ?: '-'); ?>

                            </div>
                        </div>
                    </div>

                    
                    <div class="mt-6">
                        <h2 class="text-lg font-semibold tracking-tight">Deskripsi</h2>

                        <div class="mt-3 text-sm lg:text-base text-slate-700 dark:text-slate-200 whitespace-pre-line leading-relaxed">
                            <?php echo $kegiatan->description ?: 'Deskripsi belum diisi. Tambahkan description agar halaman detail ini jadi “artikel lengkap”.'; ?>

                        </div>
                    </div>

                    
                    <div class="mt-8 flex flex-col sm:flex-row gap-3">
                        <?php if($kegiatan->registration_url): ?>
                            <a href="<?php echo e($kegiatan->registration_url); ?>"
                               class="inline-flex items-center justify-center rounded-xl px-5 py-3 text-sm font-medium
                                      bg-gradient-to-r from-rose-500 to-indigo-600 text-white shadow-sm hover:opacity-95 transition">
                                Daftar Sekarang →
                            </a>
                        <?php else: ?>
                            <a href="<?php echo e(route('login')); ?>"
                               class="inline-flex items-center justify-center rounded-xl px-5 py-3 text-sm font-medium
                                      bg-gradient-to-r from-rose-500 to-indigo-600 text-white shadow-sm hover:opacity-95 transition">
                                Login untuk akses →
                            </a>
                        <?php endif; ?>

                        <a href="<?php echo e(url('/')); ?>"
                           class="inline-flex items-center justify-center rounded-xl px-5 py-3 text-sm font-medium
                                  border border-slate-200 hover:border-slate-300 hover:bg-slate-50
                                  dark:border-white/10 dark:hover:bg-white/5 transition">
                            Kembali ke Home
                        </a>
                    </div>
                </div>

                <div class="h-1 w-full bg-gradient-to-r from-rose-500 via-indigo-600 to-emerald-500"></div>
            </div>

            
            <section class="mt-6">
                <div class="flex items-end justify-between">
                    <div>
                        <h2 class="text-lg font-semibold tracking-tight">Related</h2>
                        <p class="text-sm text-slate-600 dark:text-slate-300">Kegiatan lain yang mungkin kamu suka.</p>
                    </div>
                </div>

                <div class="mt-4 grid gap-4 sm:grid-cols-2">
                    <?php $__empty_1 = true; $__currentLoopData = $related; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $r): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <a href="<?php echo e(route('public.kegiatan.show', $r)); ?>"
                           class="rounded-2xl border border-slate-200/80 bg-white p-5 shadow-sm hover:bg-slate-50 transition
                                  dark:border-white/10 dark:bg-white/5 dark:hover:bg-white/10">
                            <div class="flex items-center justify-between text-xs text-slate-500 dark:text-slate-400">
                                <span class="inline-flex items-center rounded-full bg-slate-900/5 px-2 py-1 font-medium text-slate-700 dark:bg-white/10 dark:text-slate-200">
                                    <?php echo e($r->category ?: 'Kegiatan'); ?>

                                </span>
                                <span><?php echo e($r->created_at?->format('d M')); ?></span>
                            </div>
                            <div class="mt-3 font-semibold tracking-tight">
                                <?php echo e($r->title); ?>

                            </div>
                            <div class="mt-2 text-sm text-slate-600 dark:text-slate-300">
                                <?php echo e($r->excerpt ?: 'Klik untuk lihat detail.'); ?>

                            </div>
                            <div class="mt-4 text-sm font-medium text-rose-600 dark:text-rose-300">
                                Buka →
                            </div>
                        </a>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <div class="sm:col-span-2 rounded-2xl border border-slate-200/80 bg-white p-6 text-sm text-slate-600 shadow-sm
                                    dark:border-white/10 dark:bg-white/5 dark:text-slate-300">
                            Belum ada related kegiatan.
                        </div>
                    <?php endif; ?>
                </div>
            </section>
        </article>

        
        <aside class="lg:col-span-4 space-y-4">
            
            <div class="rounded-2xl border border-slate-200/80 bg-white p-5 shadow-sm dark:border-white/10 dark:bg-white/5">
                <div class="text-sm font-semibold">Quick actions</div>
                <div class="mt-3 space-y-2 text-sm">
                    <?php if(auth()->guard()->check()): ?>
                        <a href="<?php echo e(route('kegiatan.index')); ?>"
                           class="block rounded-xl border border-slate-200 px-4 py-2 hover:bg-slate-50 transition
                                  dark:border-white/10 dark:hover:bg-white/10">
                            Kelola kegiatan (Admin) →
                        </a>
                        <a href="<?php echo e(route('kegiatan.edit', $kegiatan)); ?>"
                           class="block rounded-xl bg-slate-900 text-white px-4 py-2 hover:bg-slate-800 transition
                                  dark:bg-white dark:text-slate-900 dark:hover:bg-slate-200">
                            Edit kegiatan ini →
                        </a>
                    <?php else: ?>
                        <a href="<?php echo e(route('login')); ?>"
                           class="block rounded-xl bg-slate-900 text-white px-4 py-2 hover:bg-slate-800 transition
                                  dark:bg-white dark:text-slate-900 dark:hover:bg-slate-200">
                            Login untuk akses →
                        </a>
                    <?php endif; ?>
                </div>
            </div>

            
            <div class="rounded-2xl border border-slate-200/80 bg-white p-5 shadow-sm dark:border-white/10 dark:bg-white/5">
                <div class="flex items-center justify-between">
                    <div class="text-sm font-semibold">Trending</div>
                    <div class="text-xs text-slate-500 dark:text-slate-400">Terbaru</div>
                </div>

                <div class="mt-3 space-y-3">
                    <?php $__currentLoopData = $trending; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $t): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <a href="<?php echo e(route('public.kegiatan.show', $t)); ?>"
                           class="block rounded-xl border border-slate-200 px-4 py-3 hover:bg-slate-50 transition
                                  dark:border-white/10 dark:hover:bg-white/10">
                            <div class="text-xs text-slate-500 dark:text-slate-400">
                                <?php echo e($t->category ?: 'Kegiatan'); ?> • <?php echo e($t->created_at?->format('d M')); ?>

                            </div>
                            <div class="mt-1 text-sm font-semibold">
                                <?php echo e($t->title); ?>

                            </div>
                        </a>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>

            
            <div class="rounded-2xl border border-slate-200/80 bg-gradient-to-br from-rose-500 to-indigo-600 p-5 text-white shadow-sm">
                <div class="text-sm font-semibold">Biar gak ketinggalan</div>
                <p class="mt-1 text-sm/relaxed text-white/90">
                    Login untuk melihat kegiatan harian & update terbaru.
                </p>
                <a href="<?php echo e(route('login')); ?>"
                   class="mt-4 inline-flex items-center justify-center rounded-xl bg-white/95 px-4 py-2 text-sm font-medium text-slate-900 hover:bg-white transition">
                    Login →
                </a>
            </div>
        </aside>
    </div>
</main>


<footer class="border-t border-slate-200/70 dark:border-white/10">
    <div class="mx-auto max-w-6xl px-4 py-10">
        <div class="flex flex-col lg:flex-row justify-between gap-6">
            <div>
                <a href="<?php echo e(url('/')); ?>" class="flex items-center gap-2">
        <div class="h-9 w-9 rounded-xl shadow-sm"
        style="background: url('<?php echo e(asset('picture/logolpka1.png')); ?>') no-repeat center/cover;">
        </div>
                <div class="text-base font-semibold">LPKA Kelas II Jakarta</div>
                </a>
                <p class="mt-2 text-sm text-slate-600 dark:text-slate-300 max-w-md">
                    Portal berita kegiatan di LPKA Kelas II Jakarta.
                </p>
                <p class="mt-4 text-xs text-slate-500 dark:text-slate-400">
                    © <?php echo e(now()->year); ?> LPKA Kelas II Jakarta. All rights reserved.
                </p>
            </div>

            <div class="grid grid-cols-2 sm:grid-cols-3 gap-6 text-sm">
                <div>
                    <div class="font-semibold">Company</div>
                    <ul class="mt-3 space-y-2 text-slate-600 dark:text-slate-300">
                        <li><a class="hover:underline underline-offset-4" href="<?php echo e(route('tentang')); ?>">Tentang</a></li>
                        <li><a class="hover:underline underline-offset-4" href="javascript:void(0)">Kontak</a></li>
                        <li><a class="hover:underline underline-offset-4" href="javascript:void(0)">Kebijakan</a></li>
                    </ul>
                </div>
                <div>
                    <div class="font-semibold">Account</div>
                    <ul class="mt-3 space-y-2 text-slate-600 dark:text-slate-300">
                        <li><a class="hover:underline underline-offset-4" href="<?php echo e(Route::has('login') ? route('login') : 'javascript:void(0)'); ?>">Login</a></li>
                        <li><a class="hover:underline underline-offset-4" href="<?php echo e(Route::has('register') ? route('register') : 'javascript:void(0)'); ?>">Register</a></li>
                        <li><a class="hover:underline underline-offset-4" href="javascript:void(0)">Help</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</footer>

</body>
</html>
<?php /**PATH /home/lpkaberk/public_html/resources/views/kegiatan/show-home.blade.php ENDPATH**/ ?>