<?php $__env->startSection('content'); ?>

<!-- ================= SEARCH BAR ================= -->
<div class="bg-white rounded-2xl border p-5 mb-8 shadow-sm">
    <form method="GET">
        <div class="flex items-center gap-3">
            <div class="relative flex-1">
                <input
                    type="text"
                    name="q"
                    value="<?php echo e(request('q')); ?>"
                    placeholder="Cari kursus berdasarkan judul atau deskripsi..."
                    class="w-full pl-11 pr-4 py-3 border rounded-xl
                           focus:ring focus:ring-blue-200"
                >
                <i data-lucide="search"
                   class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
            </div>

            <button
                type="submit"
                class="px-5 py-3 bg-slate-900 text-white rounded-xl
                       hover:bg-slate-700 transition inline-flex items-center gap-2">
                <i data-lucide="search" class="w-4 h-4"></i>
                Cari
            </button>
        </div>
    </form>
</div>

<!-- ================= HEADER ================= -->
<div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold flex items-center gap-2 text-slate-800">
        <i data-lucide="layers" class="w-6 h-6"></i>
        Kursus Saya
    </h1>

    <span class="text-sm text-slate-500">
        <?php echo e($modules->count()); ?> kursus ditemukan
    </span>
</div>

<!-- ================= GRID KURSUS ================= -->
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">

<?php $__empty_1 = true; $__currentLoopData = $modules; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $msc): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
    <div class="bg-white rounded-2xl border overflow-hidden
                hover:shadow-xl hover:-translate-y-1 transition-all duration-300">

        <!-- THUMBNAIL -->
        <div class="h-40 bg-slate-200 relative">
            <img
                src="<?php echo e($msc->module?->thumbnail
                    ? (
                        str_starts_with($msc->module->thumbnail, 'http')
                            ? $msc->module->thumbnail
                            : asset('storage/' . $msc->module->thumbnail)
                      )
                    : 'https://via.placeholder.com/600x300?text=Kursus'); ?>"
                class="w-full h-full object-cover"
                alt="<?php echo e($msc->module?->title); ?>"
            >

            <!-- BADGE -->
            <span class="absolute top-3 left-3
                         bg-black/70 text-white text-xs px-3 py-1 rounded-full">
                Kursus
            </span>
        </div>

        <!-- CONTENT -->
        <div class="p-5 space-y-3">
            <h3 class="font-semibold text-slate-800 text-lg">
                <?php echo e($msc->module?->title); ?>

            </h3>

            <p class="text-sm text-slate-500 line-clamp-2">
                <?php echo e($msc->module?->description); ?>

            </p>

            <div class="pt-2">
                <?php if($msc->lessons && $msc->lessons->count()): ?>
                    <a href="<?php echo e(route('siswa.modul.show', $msc->lessons->first()->id)); ?>"
                       class="inline-flex items-center gap-2 text-blue-600
                              font-medium hover:underline text-sm">
                        <i data-lucide="play-circle" class="w-5 h-5"></i>
                        Masuk Kursus
                    </a>
                <?php else: ?>
                    <span class="inline-flex items-center gap-2 text-gray-400 text-sm">
                        <i data-lucide="hourglass" class="w-4 h-4"></i>
                        Materi belum tersedia
                    </span>
                <?php endif; ?>
            </div>
        </div>

    </div>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
    <!-- EMPTY STATE -->
    <div class="col-span-full py-16 text-center flex flex-col items-center gap-4 text-slate-400">
        <i data-lucide="search-x" class="w-12 h-12"></i>
        <p class="text-lg font-medium">Kursus tidak ditemukan</p>
        <p class="text-sm">Coba gunakan kata kunci lain</p>
    </div>
<?php endif; ?>

</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    lucide.createIcons();
});
</script>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('siswa.layout', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/gacf7692/public_html/siswa.smkn8medan.sch.id/resources/views/siswa/kursus/index.blade.php ENDPATH**/ ?>