@extends('simaju.layouts.main')
@section('title', 'Detail Jurnal Mengajar')
@section('page-title', 'Detail Jurnal Mengajar')
@section('content')
<div class="max-w-3xl mx-auto px-2 sm:px-0">
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 sm:p-6">
        <div class="flex flex-col sm:flex-row justify-between items-start gap-3 mb-6">
            <div>
                <h2 class="text-lg sm:text-xl font-semibold text-gray-800">Jurnal Mengajar</h2>
                <p class="text-sm text-gray-500 mt-1">Tanggal: {{ $jurnalMengajar->tanggal->format('d F Y') }}</p>
            </div>
            <span class="px-3 py-1 text-sm rounded-full {{ $jurnalMengajar->status_badge }}">{{ $jurnalMengajar->status_label }}</span>
        </div>

        <div class="grid grid-cols-2 gap-3 sm:gap-4 mb-6">
            <div class="bg-gray-50 rounded-lg p-3 sm:p-4">
                <p class="text-xs font-medium text-gray-500 uppercase">Guru</p>
                <p class="text-gray-800 font-medium mt-1 text-sm sm:text-base">{{ $jurnalMengajar->guru->nama ?? '-' }}</p>
            </div>
            <div class="bg-gray-50 rounded-lg p-3 sm:p-4">
                <p class="text-xs font-medium text-gray-500 uppercase">Kelas</p>
                <p class="text-gray-800 font-medium mt-1 text-sm sm:text-base">{{ $jurnalMengajar->kelas->nama_kelas ?? '-' }}</p>
            </div>
            <div class="bg-gray-50 rounded-lg p-3 sm:p-4">
                <p class="text-xs font-medium text-gray-500 uppercase">Mata Pelajaran</p>
                <p class="text-gray-800 font-medium mt-1 text-sm sm:text-base">{{ $jurnalMengajar->mataPelajaran->nama_mapel ?? '-' }}</p>
            </div>
            <div class="bg-gray-50 rounded-lg p-3 sm:p-4">
                <p class="text-xs font-medium text-gray-500 uppercase">Waktu</p>
                <p class="text-gray-800 font-medium mt-1 text-sm sm:text-base">{{ $jurnalMengajar->jam_mulai }} - {{ $jurnalMengajar->jam_selesai }}</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">{{ $jurnalMengajar->materi }}</p>
            </div>
            <div>
                <p class="text-xs font-medium text-gray-500 uppercase">Kegiatan Pembelajaran</p>
                <p class="text-gray-800 mt-1 whitespace-pre-wrap">{{ $jurnalMengajar->kegiatan_pembelajaran }}</p>
            </div>

            @if($jurnalMengajar->keterangan)
            <div>
                <p class="text-xs font-medium text-gray-500 uppercase">Keterangan</p>
                <p class="text-gray-800 mt-1">{{ $jurnalMengajar->keterangan }}</p>
            </div>
            @endif

            @if($jurnalMengajar->kegiatan)
            @php
                $ext = strtolower(pathinfo($jurnalMengajar->kegiatan, PATHINFO_EXTENSION));
            @endphp
            <div>
                <p class="text-xs font-medium text-gray-500 uppercase mb-2">Dokumentasi Kegiatan</p>
                @if(in_array($ext, ['jpg', 'jpeg', 'png', 'gif', 'webp']))
                    <img src="{{ asset('storage/kegiatan/' . $jurnalMengajar->kegiatan) }}"
                         alt="Dokumentasi Kegiatan"
                         class="max-w-full sm:max-w-md rounded-lg shadow-md border"
                         onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                    <div class="hidden p-4 bg-red-50 rounded-lg text-red-600 text-sm">
                        <i class="fas fa-exclamation-triangle mr-1"></i> Gambar tidak ditemukan
                    </div>
                @elseif($ext == 'pdf')
                    <a href="{{ asset('storage/kegiatan/' . $jurnalMengajar->kegiatan) }}"
                       target="_blank"
                       class="inline-flex items-center gap-2 px-4 py-3 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition-colors">
                        <i class="fas fa-file-pdf text-xl"></i>
                        <span>Lihat PDF</span>
                    </a>
                @endif
            </div>
            @endif
        </div>

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