@extends('layouts.app')
@section('title', 'Jadwal Mingguan')
@section('content')
<div>
    <div class="mb-6">
        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Jadwal Mengajar Mingguan</h1>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Jadwal mengajar saya — {{ $activeSemester?->name ??
            'Semester Aktif' }}</p>
    </div>

    {{-- Info Semester --}}
    @if($activeSemester)
        <div
            class="p-4 mb-6 bg-primary-50 border border-primary-200 rounded-lg dark:bg-primary-900/20 dark:border-primary-800 flex items-center gap-3">
            <svg class="w-5 h-5 text-primary-600 dark:text-primary-400 flex-shrink-0" fill="currentColor"
                viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                    d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
                    clip-rule="evenodd" />
            </svg>
            <div>
                <p class="text-sm font-medium text-primary-800 dark:text-primary-200">{{ $activeSemester->academicYear->name
                    ?? '2025/2026' }} — {{ $activeSemester->name ?? '1' }}</p>
                <p class="text-xs text-primary-600 dark:text-primary-400">{{ $activeSemester->start_date?->format('d M Y')
                    ?? '–' }} s/d {{ $activeSemester->end_date?->format('d M Y') ?? '–' }}</p>
            </div>
        </div>
    @else
        <div class="p-4 mb-6 bg-yellow-50 border border-yellow-200 rounded-lg dark:bg-yellow-900/20 dark:border-yellow-800">
            <p class="text-sm font-medium text-yellow-800 dark:text-yellow-200">Tidak ada semester aktif saat ini.</p>
            <p class="text-xs text-yellow-700 dark:text-yellow-300 mt-1">Jadwal mingguan akan tampil setelah semester aktif ditetapkan.</p>
        </div>
    @endif

    @php
    $days = ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
    $dayKeys = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
    @endphp

    {{-- Grid Jadwal --}}
    <div
        class="bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 overflow-x-auto">
        <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                <tr>
                    <th class="px-4 py-3 min-w-[80px]">Sesi</th>
                    <th class="px-4 py-3 min-w-[100px]">Waktu</th>
                    @foreach($days as $day)
                    <th class="px-4 py-3 min-w-[140px]">{{ $day }}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                @forelse($schedules ?? [] as $session)
                <tr class="border-b dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700">
                    <td class="px-4 py-4 font-medium text-gray-800 dark:text-white">Sesi {{ $session->session_order ??
                        '–' }}</td>
                    <td class="px-4 py-4 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
                        {{ isset($session->start_time) ? substr($session->start_time, 0, 5) : '' }} – {{
                        isset($session->end_time) ? substr($session->end_time, 0, 5) : '' }}
                    </td>
                    @foreach($dayKeys as $dayKey)
                    @php
                    $schedule = $scheduleGrid[$session->session_order][$dayKey] ?? null;
                    @endphp
                    <td class="px-4 py-4">
                        @if($schedule)
                        <div
                            class="p-2.5 bg-primary-50 border border-primary-200 rounded-lg dark:bg-primary-900/20 dark:border-primary-700">
                            <p class="text-xs font-semibold text-primary-800 dark:text-primary-200 leading-tight">{{
                                $schedule->subject->name ?? '–' }}</p>
                            <p class="text-xs text-primary-600 dark:text-primary-400 mt-0.5">{{
                                $schedule->classroom->name ?? '–' }}</p>
                        </div>
                        @else
                        <span class="text-gray-300 dark:text-gray-600">–</span>
                        @endif
                    </td>
                    @endforeach
                </tr>
                @empty
                {{-- Fallback jika tidak ada data sessions --}}
                @for($i = 1; $i <= 8; $i++) <tr class="border-b dark:border-gray-700">
                    <td class="px-4 py-4 font-medium text-gray-800 dark:text-white">Sesi {{ $i }}</td>
                    <td class="px-4 py-4 text-xs text-gray-400">–</td>
                    @foreach($dayKeys as $dayKey)
                    @php $schedule = $scheduleGrid[$i][$dayKey] ?? null; @endphp
                    <td class="px-4 py-4">
                        @if($schedule)
                        <div
                            class="p-2.5 bg-primary-50 border border-primary-200 rounded-lg dark:bg-primary-900/20 dark:border-primary-700">
                            <p class="text-xs font-semibold text-primary-800 dark:text-primary-200">{{
                                $schedule->subject->name ?? '–' }}</p>
                            <p class="text-xs text-primary-600 dark:text-primary-400 mt-0.5">{{
                                $schedule->classroom->name ?? '–' }}</p>
                        </div>
                        @else
                        <span class="text-gray-300 dark:text-gray-600">–</span>
                        @endif
                    </td>
                    @endforeach
                    </tr>
                    @endfor
                    @endforelse
            </tbody>
        </table>
    </div>

    {{-- Legend --}}
    <div class="mt-4 flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
        <div class="flex items-center gap-1.5">
            <div class="w-3 h-3 rounded bg-primary-200 dark:bg-primary-700"></div>
            <span>Jadwal Saya</span>
        </div>
        <div class="flex items-center gap-1.5">
            <div class="w-3 h-3 rounded bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600"></div>
            <span>Kosong</span>
        </div>
    </div>
</div>
@endsection