@extends('layouts.teacher')

@section('title', 'Rekap Monitoring')
@section('header_title', 'Monitoring Modul')

@section('content')

<div class="max-w-5xl mx-auto pb-10">

    <h1 class="text-2xl font-bold text-gray-800 mb-6">
        Rekap Monitoring Materi
    </h1>

    <div class="space-y-4">
        @forelse($lessons as $lesson)
            @php
                $progress = $lesson->total_siswa
                    ? round(($lesson->selesai / $lesson->total_siswa) * 100)
                    : 0;
            @endphp

            <div class="bg-white border rounded-xl p-5 hover:shadow-sm transition">
                <div class="flex justify-between items-center mb-3">
                    <h3 class="font-semibold text-gray-800">
                        {{ $lesson->title }}
                    </h3>

                    <span class="text-sm text-gray-500">
                        {{ $lesson->selesai }} / {{ $lesson->total_siswa }} siswa
                    </span>
                </div>

                <div class="w-full bg-gray-200 h-2 rounded-full overflow-hidden">
                    <div class="bg-indigo-600 h-full"
                         style="width: {{ $progress }}%">
                    </div>
                </div>

                <div class="flex justify-between mt-2 text-xs text-gray-500">
                    <span>{{ $progress }}% selesai</span>
                    <a href="{{ route('guru.monitoring.lesson', $lesson->id) }}"
                       class="text-indigo-600 hover:underline">
                        Detail
                    </a>
                </div>
            </div>
        @empty
            <p class="text-gray-400 text-center">
                Belum ada materi
            </p>
        @endforelse
    </div>

</div>

@endsection