@extends('simaju.layouts.main')

@section('title', 'Detail Rapor')
@section('page-title', 'Detail Rapor')
@section('page-subtitle', 'Lihat detail rapor siswa')

@section('content')
<div class="max-w-5xl mx-auto space-y-6">
    <!-- Back Button -->
    <div class="flex items-center justify-between">
        <a href="{{ route('simaju.rapor.index') }}" class="inline-flex items-center gap-2 text-gray-600 hover:text-primary transition">
            <i class="fas fa-arrow-left"></i>
            <span>Kembali ke Daftar Rapor</span>
        </a>
        <div class="flex items-center gap-3">
            <a href="{{ route('simaju.rapor.print', $rapor) }}" class="px-6 py-2.5 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-lg hover:shadow-lg transition font-semibold flex items-center gap-2">
                <i class="fas fa-print"></i>
                <span>Cetak PDF</span>
            </a>
        </div>
    </div>

    <!-- Student Info Card -->
    <div class="bg-gradient-to-r from-primary to-secondary rounded-xl shadow-lg p-8 text-white">
        <div class="flex items-center gap-6">
            <div class="w-24 h-24 bg-white rounded-full flex items-center justify-center text-primary text-3xl font-bold">
                {{ strtoupper(substr($rapor->siswa->nama, 0, 2)) }}
            </div>
            <div class="flex-1">
                <h2 class="text-2xl font-bold mb-2">{{ $rapor->siswa->nama }}</h2>
                <div class="grid grid-cols-2 gap-x-8 gap-y-1 text-blue-100">
                    <div class="flex items-center gap-2">
                        <i class="fas fa-id-card w-5"></i>
                        <span>NIS: {{ $rapor->siswa->nis }}</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <i class="fas fa-school w-5"></i>
                        <span>{{ $rapor->siswa->kelas->nama_kelas }} - {{ $rapor->siswa->kelas->jurusan->nama_jurusan }}</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <i class="fas fa-calendar w-5"></i>
                        <span>Tahun Ajaran: {{ $rapor->tahun_ajaran }}</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <i class="fas fa-book-open w-5"></i>
                        <span>Semester: {{ ucfirst($rapor->semester) }}</span>
                    </div>
                </div>
            </div>
            <div class="text-center">
                <div class="text-5xl font-bold mb-2">{{ number_format($rapor->rata_rata, 2) }}</div>
                <div class="text-blue-100">Rata-rata Nilai</div>
            </div>
        </div>
    </div>

    <!-- Status Card -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center justify-between">
            <div>
                <h3 class="font-semibold text-gray-900 mb-1">Status Rapor</h3>
                <span class="px-4 py-2 text-sm font-semibold rounded-full {{ $rapor->status_badge_class }}">
                    {{ $rapor->status_label }}
                </span>
            </div>
            <form action="{{ route('simaju.rapor.update-status', $rapor) }}" method="POST" class="flex items-center gap-3">
                @csrf
                @method('PUT')
                <select name="status" class="rounded-lg border-gray-300 focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50">
                    <option value="draft" {{ $rapor->status == 'draft' ? 'selected' : '' }}>Draft</option>
                    <option value="final" {{ $rapor->status == 'final' ? 'selected' : '' }}>Final</option>
                    <option value="dicetak" {{ $rapor->status == 'dicetak' ? 'selected' : '' }}>Sudah Dicetak</option>
                </select>
                <button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 transition">
                    Update Status
                </button>
            </form>
        </div>
    </div>

    <!-- Nilai Card -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
            <h3 class="font-semibold text-gray-900">Daftar Nilai</h3>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50 border-b border-gray-200">
                    <tr>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">No</th>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Mata Pelajaran</th>
                        <th class="px-6 py-4 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider">Tugas</th>
                        <th class="px-6 py-4 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider">UTS</th>
                        <th class="px-6 py-4 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider">UAS</th>
                        <th class="px-6 py-4 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider">Nilai Akhir</th>
                        <th class="px-6 py-4 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider">Predikat</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @php
                        $no = 1;
                        function getPredikat($nilai) {
                            if ($nilai >= 90) return ['A', 'text-green-600', 'bg-green-50'];
                            if ($nilai >= 80) return ['B', 'text-blue-600', 'bg-blue-50'];
                            if ($nilai >= 70) return ['C', 'text-yellow-600', 'bg-yellow-50'];
                            if ($nilai >= 60) return ['D', 'text-orange-600', 'bg-orange-50'];
                            return ['E', 'text-red-600', 'bg-red-50'];
                        }
                    @endphp
                    @forelse($rapor->nilai_data as $nilai)
                        @php
                            [$predikat, $textColor, $bgColor] = getPredikat($nilai['nilai_akhir']);
                        @endphp
                        <tr class="hover:bg-gray-50 transition">
                            <td class="px-6 py-4 text-sm text-gray-900">{{ $no++ }}</td>
                            <td class="px-6 py-4 text-sm font-medium text-gray-900">{{ $nilai['mata_pelajaran'] }}</td>
                            <td class="px-6 py-4 text-center text-sm text-gray-900">{{ $nilai['nilai_tugas'] }}</td>
                            <td class="px-6 py-4 text-center text-sm text-gray-900">{{ $nilai['nilai_uts'] }}</td>
                            <td class="px-6 py-4 text-center text-sm text-gray-900">{{ $nilai['nilai_uas'] }}</td>
                            <td class="px-6 py-4 text-center">
                                <span class="text-lg font-bold text-primary">{{ number_format($nilai['nilai_akhir'], 2) }}</span>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <span class="px-3 py-1 text-sm font-bold rounded-full {{ $bgColor }} {{ $textColor }}">
                                    {{ $predikat }}
                                </span>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-6 py-8 text-center text-gray-500">
                                <i class="fas fa-exclamation-circle text-3xl mb-2 text-gray-300"></i>
                                <p>Tidak ada data nilai</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
                @if(count($rapor->nilai_data) > 0)
                    <tfoot class="bg-gray-50 border-t-2 border-gray-300">
                        <tr>
                            <td colspan="5" class="px-6 py-4 text-right font-bold text-gray-900">Rata-rata:</td>
                            <td class="px-6 py-4 text-center">
                                <span class="text-2xl font-bold text-primary">{{ number_format($rapor->rata_rata, 2) }}</span>
                            </td>
                            <td class="px-6 py-4 text-center">
                                @php
                                    [$predikat, $textColor, $bgColor] = getPredikat($rapor->rata_rata);
                                @endphp
                                <span class="px-4 py-1.5 text-base font-bold rounded-full {{ $bgColor }} {{ $textColor }}">
                                    {{ $predikat }}
                                </span>
                            </td>
                        </tr>
                    </tfoot>
                @endif
            </table>
        </div>
    </div>

    <!-- Info Card -->
    <div class="bg-blue-50 border border-blue-200 rounded-xl p-6">
        <div class="flex items-start gap-4">
            <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center flex-shrink-0">
                <i class="fas fa-info text-white"></i>
            </div>
            <div class="flex-1">
                <h4 class="font-semibold text-blue-900 mb-2">Keterangan Predikat</h4>
                <div class="grid grid-cols-5 gap-3 text-sm">
                    <div class="bg-white rounded-lg p-3 text-center">
                        <div class="text-2xl font-bold text-green-600 mb-1">A</div>
                        <div class="text-xs text-gray-600">90 - 100</div>
                    </div>
                    <div class="bg-white rounded-lg p-3 text-center">
                        <div class="text-2xl font-bold text-blue-600 mb-1">B</div>
                        <div class="text-xs text-gray-600">80 - 89</div>
                    </div>
                    <div class="bg-white rounded-lg p-3 text-center">
                        <div class="text-2xl font-bold text-yellow-600 mb-1">C</div>
                        <div class="text-xs text-gray-600">70 - 79</div>
                    </div>
                    <div class="bg-white rounded-lg p-3 text-center">
                        <div class="text-2xl font-bold text-orange-600 mb-1">D</div>
                        <div class="text-xs text-gray-600">60 - 69</div>
                    </div>
                    <div class="bg-white rounded-lg p-3 text-center">
                        <div class="text-2xl font-bold text-red-600 mb-1">E</div>
                        <div class="text-xs text-gray-600">< 60</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection