@extends('layouts.teacher')

@section('title', 'Monitoring Siswa')
@section('header_title', 'Monitoring Pembelajaran')

@section('content')

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

    {{-- HEADER --}}
    <div class="mb-6">
        <a href="{{ url()->previous() }}"
           class="text-sm text-gray-500 hover:text-indigo-600 flex items-center gap-1 mb-2">
            ← Kembali
        </a>

        <h1 class="text-2xl font-bold text-gray-800">
            Monitoring Siswa
        </h1>

        <p class="text-sm text-gray-500 mt-1">
            Materi:
            <span class="font-medium text-gray-700">
                {{ $lesson['title'] ?? '-' }}
            </span>
        </p>
    </div>

    {{-- STATISTIK --}}
    @php
        $total = $students->count();
        $opened = $students->where('duration', '>', 0)->count();
        $completed = $students->where('is_completed', 1)->count();
    @endphp

    <div class="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4 -mb-2 md:mb-6">
        <div class="bg-white border rounded-xl p-4">
            <p class="text-xs text-gray-400">Total Siswa</p>
            <h3 class="text-2xl font-bold text-gray-800">{{ $total }}</h3>
        </div>

        <div class="bg-white border rounded-xl p-4">
            <p class="text-xs text-gray-400">Sudah Membuka</p>
            <h3 class="text-2xl font-bold text-indigo-600">{{ $opened }}</h3>
        </div>

        <div class="bg-white border rounded-xl p-4">
            <p class="text-xs text-gray-400">Belum Membuka</p>
            <h3 class="text-2xl font-bold text-red-500">{{ $total - $opened }}</h3>
        </div>

        <div class="bg-white border rounded-xl p-4">
            <p class="text-xs text-gray-400">Progress</p>
            <h3 class="text-2xl font-bold text-indigo-600">
                {{ $total ? round(($completed / $total) * 100) : 0 }}%
            </h3>
        </div>
    </div>

    {{-- TABLE DESKTOP --}}
    <div class="hidden md:block bg-white rounded-xl border shadow-sm overflow-hidden">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 text-gray-600">
                <tr>
                    <th class="px-4 py-3 text-left">No</th>
                    <th class="px-4 py-3 text-left">Nama Siswa</th>
                    <th class="px-4 py-3 text-center">Status</th>
                    <th class="px-4 py-3 text-center">Durasi</th>
                    <th class="px-4 py-3 text-left">Terakhir Akses</th>
                </tr>
            </thead>
            <tbody class="divide-y">
                @forelse($students as $index => $siswa)
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-3">{{ $index + 1 }}</td>

                        <td class="px-4 py-3 font-medium text-gray-800">
                            {{ $siswa['name'] }}
                        </td>

                        <td class="px-4 py-3 text-center">
                            @if($siswa['is_completed'])
                                <span class="px-3 py-1 rounded-full text-xs bg-green-100 text-green-700 font-semibold">
                                    Selesai
                                </span>
                            @else
                                <span class="px-3 py-1 rounded-full text-xs bg-gray-100 text-red-600 font-semibold">
                                    Belum
                                </span>
                            @endif
                        </td>

                        <td class="px-4 py-3 text-center text-gray-700">
                            {{ $siswa['duration'] > 0
                                ? gmdate('i:s', $siswa['duration']) . ' menit'
                                : '-' }}
                        </td>

                        <td class="px-4 py-3 text-gray-500">
                            {{ $siswa['last_access'] }}
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="px-4 py-6 text-center text-gray-400">
                            Belum ada data siswa
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- MOBILE --}}
    <div class="md:hidden space-y-3">
        @forelse($students as $siswa)
            <div class="bg-white border rounded-xl p-4">
                <div class="flex justify-between items-start mb-2">
                    <h4 class="font-semibold text-gray-800">
                        {{ $siswa['name'] }}
                    </h4>

                    @if($siswa['is_completed'])
                        <span class="px-3 py-1 rounded-full text-xs bg-green-100 text-green-700 font-semibold">
                            Selesai
                        </span>
                    @else
                        <span class="px-3 py-1 rounded-full text-xs bg-gray-100 text-red-600 font-semibold">
                            Belum
                        </span>
                    @endif
                </div>

                <div class="text-sm text-gray-600 space-y-1">
                    <p>
                        <span class="text-gray-400">Durasi:</span>
                        {{ $siswa['duration'] > 0
                            ? gmdate('i:s', $siswa['duration']) . ' menit'
                            : '-' }}
                    </p>

                    <p>
                        <span class="text-gray-400">Terakhir Akses:</span>
                        {{ $siswa['last_access'] }}
                    </p>
                </div>
            </div>
        @empty
            <div class="text-center text-gray-400 py-6">
                Belum ada data siswa
            </div>
        @endforelse
    </div>

</div>

@endsection