@extends('simaju.layouts.main')
@section('title', 'Detail Promes')
@section('page-title', 'Detail Program Semester')
@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 Semester</h2>
            <p class="text-sm text-gray-500 mt-1">Minggu ke-{{ $promes->minggu_ke }} | {{ $promes->tahun_ajaran }} - {{ $promes->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">{{ $promes->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">{{ $promes->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">{{ $promes->mataPelajaran->nama_mapel ?? '-' }}</p>
            </div>
            <div class="bg-gray-50 rounded-lg p-4">
                <p class="text-xs font-medium text-gray-500 uppercase">Periode</p>
                <p class="text-gray-800 font-medium mt-1">{{ $promes->tanggal_mulai->format('d F Y') }} - {{ $promes->tanggal_selesai->format('d F Y') }}</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">{{ $promes->materi }}</p>
            </div>
            @if($promes->kd)
            <div>
                <p class="text-xs font-medium text-gray-500 uppercase">Kompetensi Dasar</p>
                <p class="text-gray-800 mt-1">{{ $promes->kd }}</p>
            </div>
            @endif
            @if($promes->metode)
            <div>
                <p class="text-xs font-medium text-gray-500 uppercase">Metode</p>
                <p class="text-gray-800 mt-1">{{ $promes->metode }}</p>
            </div>
            @endif
            @if($promes->keterangan)
            <div>
                <p class="text-xs font-medium text-gray-500 uppercase">Keterangan</p>
                <p class="text-gray-800 mt-1">{{ $promes->keterangan }}</p>
            </div>
            @endif
        </div>

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