@extends('layouts.app')
@section('title', 'Jadwal Pelajaran')
@section('content')
<div>
    <div class="mb-6">
        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Jadwal Pelajaran Saya</h1>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Jadwal pelajaran kelas {{ $student?->classroom?->name ?? 'Belum ada kelas' }} — {{ $activeSemester?->name?->value ?? 'Tidak ada semester aktif' }}</p>
    </div>

    {{-- Info Kelas & Semester --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
        <div class="p-4 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-8 h-8 text-primary-500 dark:text-primary-400 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z"/>
            </svg>
            <div>
                <p class="text-xs text-primary-600 dark:text-primary-400">Kelas</p>
                <p class="text-sm font-semibold text-primary-800 dark:text-primary-200">{{ $student?->classroom?->name ?? '–' }}</p>
            </div>
        </div>
        <div class="p-4 bg-gray-50 border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700 flex items-center gap-3">
            <svg class="w-8 h-8 text-gray-400 dark:text-gray-500 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-xs text-gray-500 dark:text-gray-400">Semester Aktif</p>
                <p class="text-sm font-semibold text-gray-800 dark:text-gray-200">
                    @if($activeSemester)
                        {{ $activeSemester->academicYear?->name ?? '–' }} — {{ $activeSemester->name?->value ?? '–' }}
                    @else
                        Tidak ada semester aktif
                    @endif
                </p>
            </div>
        </div>
    </div>

    @if(!($hasActiveSemester ?? false))
    <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 siswa akan ditampilkan setelah semester aktif ditetapkan.</p>
    </div>
    @endif

    @php
        $days = ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
        $dayKeys = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
        $sessionColors = ['bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-700', 'bg-purple-50 border-purple-200 dark:bg-purple-900/20 dark:border-purple-700', 'bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-700', 'bg-yellow-50 border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-700', 'bg-pink-50 border-pink-200 dark:bg-pink-900/20 dark:border-pink-700', 'bg-indigo-50 border-indigo-200 dark:bg-indigo-900/20 dark:border-indigo-700'];
    @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-[90px]">Waktu</th>
                    @foreach($days as $day)
                    <th class="px-4 py-3 min-w-[150px]">{{ $day }}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                @for($i = 1; $i <= 8; $i++)
                <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">{{ $i }}</td>
                    <td class="px-4 py-4 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
                        {{ $sessions[$i]['start'] ?? '' }}{{ isset($sessions[$i]) ? ' – ' . $sessions[$i]['end'] : '' }}
                    </td>
                    @foreach($dayKeys as $dayKey)
                    @php $schedule = $scheduleGrid[$i][$dayKey] ?? null; @endphp
                    <td class="px-4 py-4">
                        @if($schedule)
                        @php $colorClass = $sessionColors[($schedule->subject_id ?? 0) % count($sessionColors)]; @endphp
                        <div class="p-2.5 border rounded-lg {{ $colorClass }}">
                            <p class="text-xs font-semibold text-gray-800 dark:text-gray-100 leading-tight">{{ $schedule->subject->name ?? '–' }}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{{ $schedule->teacher->full_name ?? '–' }}</p>
                        </div>
                        @else
                        <span class="text-gray-300 dark:text-gray-600 text-lg">–</span>
                        @endif
                    </td>
                    @endforeach
                </tr>
                @endfor
            </tbody>
        </table>
    </div>

    {{-- Legend warna --}}
    @if(!empty($subjectColors ?? []))
    <div class="mt-4 p-4 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
        <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-3">Keterangan Warna</p>
        <div class="flex flex-wrap gap-2">
            @foreach($subjectColors ?? [] as $name => $color)
            <span class="inline-flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300">
                <span class="w-3 h-3 rounded-sm {{ $color }}"></span>
                {{ $name }}
            </span>
            @endforeach
        </div>
    </div>
    @endif
</div>
@endsection