@extends('siswa.layout')

@section('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 max-w-auto">
            <div class="relative flex-1">
                <input
                    type="text"
                    name="q"
                    value="{{ 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">
        {{ $modules->count() }} kursus ditemukan
    </span>
</div>

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

@forelse($modules as $module)
    <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="{{ $module->thumbnail
                    ? asset('storage/'.$module->thumbnail)
                    : 'https://via.placeholder.com/600x300?text=Kursus' }}"
                class="w-full h-full object-cover"
                alt="{{ $module->title }}"
            >

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

        <!-- CONTENT -->
        <div class="p-5 space-y-3">
            <h3 class="font-semibold text-slate-800 text-lg">
                {{ $module->title }}
            </h3>

            <p class="text-sm text-slate-500 line-clamp-2">
                {{ $module->description }}
            </p>

            <div class="pt-2">
            @if(!empty($module->lessons) && count($module->lessons) > 0)
            <a href="{{ route('siswa.modul.show', $module->lessons[0]['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>

                @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>
                @endif
            </div>
        </div>

    </div>
@empty
    <!-- 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>
@endforelse

</div>

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

@endsection