@extends('layouts.app')
@section('title', 'Rekap Mengajar Saya')
@section('content')
<div>
    <div class="mb-6">
        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Rekap Mengajar Saya</h1>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Riwayat dan statistik sesi mengajar per semester</p>
    </div>

    {{-- Filter --}}
    <x-filter-bar>
        <x-slot:fields>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Semester</label>
                <select name="semester_id"
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="">Semester Aktif</option>
                    @foreach($semesters ?? [] as $semester)
                    <option value="{{ $semester->id }}" {{ request('semester_id')==$semester->id ? 'selected' : '' }}>
                        {{ $semester->academic_year }} — Sem {{ $semester->semester }}
                    </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Mata Pelajaran</label>
                <select name="subject_id"
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="">Semua Mapel</option>
                    @foreach($mySubjects ?? [] as $subject)
                    <option value="{{ $subject->id }}" {{ request('subject_id')==$subject->id ? 'selected' : '' }}>{{
                        $subject->name }}</option>
                    @endforeach
                </select>
            </div>
        </x-slot:fields>
    </x-filter-bar>

    {{-- Summary Cards --}}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        <x-stat-card label="Total Sesi" :value="$summary['total'] ?? 0" icon="academic-cap" color="gray" />
        <x-stat-card label="Mengajar" :value="$summary['teaching'] ?? 0" icon="check-circle" color="green" />
        <x-stat-card label="Tidak Mengajar" :value="$summary['not_teaching'] ?? 0" icon="x-circle" color="red" />
        <x-stat-card label="% Mengajar" :value="($summary['pct'] ?? 0) . '%'" icon="chart-bar" color="blue" />
    </div>

    {{-- Progress Bar --}}
    @php $pct = $summary['pct'] ?? 0; @endphp
    <div class="p-4 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700 mb-6">
        <div class="flex items-center justify-between mb-2">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Persentase Kehadiran Mengajar</span>
            <span
                class="text-sm font-bold {{ $pct >= 80 ? 'text-green-600' : ($pct >= 60 ? 'text-yellow-600' : 'text-red-600') }}">{{
                $pct }}%</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-3 dark:bg-gray-700">
            <div class="h-3 rounded-full transition-all duration-700 {{ $pct >= 80 ? 'bg-green-500' : ($pct >= 60 ? 'bg-yellow-500' : 'bg-red-500') }}"
                style="width: {{ $pct }}%"></div>
        </div>
    </div>

    {{-- Tabel Detail --}}
    <div class="bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
        <x-data-table>
            <x-slot:heading>
                <th class="px-4 py-3">Tanggal</th>
                <th class="px-4 py-3">Mata Pelajaran</th>
                <th class="px-4 py-3">Kelas</th>
                <th class="px-4 py-3">Sesi</th>
                <th class="px-4 py-3">Status</th>
                <th class="px-4 py-3">Catatan</th>
            </x-slot:heading>
            <x-slot:body>
                @forelse($teachingRecords ?? [] as $record)
                @php
                $statusMap = [
                'teaching' => ['color' => 'green', 'label' => 'Mengajar'],
                'not_teaching' => ['color' => 'red', 'label' => 'Tidak Mengajar'],
                ];
                $statusValue = $record->status?->value ?? (string) $record->status;
                $s = $statusMap[$statusValue] ?? ['color' => 'gray', 'label' => ucfirst(str_replace('_', ' ',
                $statusValue))];
                @endphp
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                    <td class="px-4 py-3 text-sm text-gray-700 dark:text-gray-300 whitespace-nowrap">
                        {{ $record->date->translatedFormat('D, d M Y') }}
                    </td>
                    <td class="px-4 py-3 font-medium text-gray-900 dark:text-white text-sm">{{
                        $record->schedule->subject->name ?? '–' }}</td>
                    <td class="px-4 py-3">
                        <x-badge color="gray">{{ $record->schedule->classroom->name ?? '–' }}</x-badge>
                    </td>
                    <td class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">Sesi {{
                        $record->schedule->session_order ?? '–' }}</td>
                    <td class="px-4 py-3">
                        <x-badge :color="$s['color']">{{ $s['label'] }}</x-badge>
                    </td>
                    <td class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400 max-w-[180px] truncate">{{
                        $record->notes ?? '–' }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="px-4 py-8 text-center text-gray-400">Tidak ada data mengajar untuk filter
                        yang dipilih</td>
                </tr>
                @endforelse
            </x-slot:body>
            @if(isset($teachingRecords) && method_exists($teachingRecords, 'hasPages') && $teachingRecords->hasPages())
            <x-slot:pagination>{{ $teachingRecords->withQueryString()->links() }}</x-slot:pagination>
            @endif
        </x-data-table>
    </div>
</div>
@endsection