@extends('layouts.dashboard')

@section('title', __('lms.materials_title'))
@section('eyebrow', __('lms.college'))

@section('content')
<div class="space-y-6">
    <section class="flex flex-col gap-4 rounded-lg border border-slate-200 bg-white p-5 shadow-sm lg:flex-row lg:items-center lg:justify-between">
        <div>
            <p class="text-sm font-black uppercase text-sky-700">{{ __('lms.library') }}</p>
            <h2 class="mt-1 text-2xl font-black text-slate-950">{{ __('lms.materials_heading') }}</h2>
            <p class="mt-2 text-sm leading-6 text-slate-600">{{ __('lms.materials_intro') }}</p>
        </div>
    </section>

    <div class="grid gap-4 lg:grid-cols-2">
        @forelse($materials as $material)
            @php
                $progress = $material->progresses->first();
                $percent = (int) ($progress?->progress_percent ?? 0);
            @endphp
            <article class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
                <div class="flex flex-wrap items-start justify-between gap-3">
                    <div>
                        <div class="flex flex-wrap gap-2">
                            <x-status-badge :status="$material->material_type" />
                            <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-black text-slate-600">#{{ $material->order_number }}</span>
                        </div>
                        <h3 class="mt-3 text-lg font-black text-slate-950">{{ $material->title }}</h3>
                    </div>
                </div>
                <p class="mt-3 text-sm leading-6 text-slate-600">{{ $material->description }}</p>
                <div class="mt-4 rounded-lg bg-slate-50 p-3">
                    <div class="flex items-center justify-between gap-3 text-xs font-black text-slate-600">
                        <span>{{ __('lms.watch_progress') }}</span>
                        <span>{{ $percent }}%</span>
                    </div>
                    <div class="mt-2 h-2 overflow-hidden rounded-full bg-slate-200">
                        <div class="h-full rounded-full bg-sky-600" style="width: {{ $percent }}%"></div>
                    </div>
                </div>
                <div class="mt-4 flex flex-wrap gap-2">
                    <a href="{{ route('user.lms.materials.show', $material) }}" class="inline-flex items-center gap-2 rounded-lg bg-sky-700 px-3 py-2 text-sm font-black text-white hover:bg-slate-950">
                        <i data-lucide="play-circle" class="h-4 w-4"></i>
                        {{ $percent > 0 ? __('lms.continue_learning') : __('lms.start_learning') }}
                    </a>
                    @if($material->file_path)
                        <a href="{{ asset('storage/'.$material->file_path) }}" target="_blank" class="inline-flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm font-black text-slate-700 hover:border-sky-300 hover:text-sky-700">
                            <i data-lucide="download" class="h-4 w-4"></i>
                            {{ __('app.actions.download') }}
                        </a>
                    @endif
                    <a href="{{ route('user.lms.classes.show', $material->swimmingClass) }}" class="inline-flex items-center gap-2 rounded-lg border border-cyan-200 px-3 py-2 text-sm font-black text-cyan-800 hover:border-orange-300 hover:text-orange-600">
                        <i data-lucide="school" class="h-4 w-4"></i>
                        Ruang kelas
                    </a>
                </div>
            </article>
        @empty
            <div class="rounded-lg border border-dashed border-slate-300 bg-white p-8 text-center lg:col-span-2">
                <p class="text-lg font-black text-slate-950">Belum ada materi yang bisa dibuka.</p>
                <p class="mt-1 text-sm text-slate-500">Materi akan tampil setelah pendaftaran sekolah renang aktif dan masuk ke kelas.</p>
                <a href="{{ route('user.school-registration.index') }}" class="mt-4 inline-flex items-center gap-2 rounded-lg bg-sky-700 px-4 py-2 text-sm font-black text-white hover:bg-slate-950">
                    <i data-lucide="waves" class="h-4 w-4"></i>
                    Daftar Sekolah Renang
                </a>
            </div>
        @endforelse
    </div>
</div>
@endsection