@extends('simaju.layouts.main')
@section('title', 'Detail Prota')
@section('page-title', 'Detail Program Tahunan')
@section('content')
<div class="max-w-3xl mx-auto">
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <div class="mb-6">
            <h2 class="text-xl font-semibold text-gray-800">Program Tahunan</h2>
            <p class="text-sm text-gray-500 mt-1">Minggu ke-{{ $prota->minggu_ke }} | {{ $prota->tahun_ajaran }} - {{ $prota->semester_label }}</p>
        </div>

        <div class="grid grid-cols-2 gap-4 mb-6">
            <div class="bg-gray-50 rounded-lg p-4">
                <p class="text-xs font-medium text-gray-500 uppercase">Guru</p>
                <p class="text-gray-800 font-medium mt-1">{{ $prota->guru->nama ?? '-' }}</p>
            </div>
            <div class="bg-gray-50 rounded-lg p-4">
                <p class="text-xs font-medium text-gray-500 uppercase">Kelas</p>
                <p class="text-gray-800 font-medium mt-1">{{ $prota->kelas->nama_kelas ?? '-' }}</p>
            </div>
            <div class="bg-gray-50 rounded-lg p-4">
                <p class="text-xs font-medium text-gray-500 uppercase">Mata Pelajaran</p>
                <p class="text-gray-800 font-medium mt-1">{{ $prota->mataPelajaran->nama_mapel ?? '-' }}</p>
            </div>
            <div class="bg-gray-50 rounded-lg p-4">
                <p class="text-xs font-medium text-gray-500 uppercase">Minggu ke</p>
                <p class="text-gray-800 font-medium mt-1">{{ $prota->minggu_ke }}</p>
            </div>
        </div>

        <div class="space-y-4">
            <div>
                <p class="text-xs font-medium text-gray-500 uppercase">Materi</p>
                <p class="text-gray-800 mt-1 whitespace-pre-wrap">{{ $prota->materi }}</p>
            </div>
            @if($prota->kd)
            <div>
                <p class="text-xs font-medium text-gray-500 uppercase">Kompetensi Dasar</p>
                <p class="text-gray-800 mt-1">{{ $prota->kd }}</p>
            </div>
            @endif
            @if($prota->keterangan)
            <div>
                <p class="text-xs font-medium text-gray-500 uppercase">Keterangan</p>
                <p class="text-gray-800 mt-1">{{ $prota->keterangan }}</p>
            </div>
            @endif
        </div>

        <div class="mt-6 flex justify-end gap-3">
            <a href="{{ route('simaju.prota.index') }}" class="px-4 py-2 border rounded-lg hover:bg-gray-50">Kembali</a>
            <a href="{{ route('simaju.prota.edit', $prota->id) }}" class="px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600">Edit</a>
        </div>
    </div>
</div>
@endsection