@extends('simaju.layouts.main')
@section('title', 'Detail Modul Ajar')
@section('page-title', 'Detail Modul Ajar')
@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="flex justify-between items-start mb-6">
            <div>
                <h2 class="text-xl font-semibold text-gray-800">{{ $modulAjar->judul }}</h2>
                <p class="text-sm text-gray-500 mt-1">{{ $modulAjar->tahun_ajaran }} - {{ $modulAjar->semester_label }}</p>
            </div>
            <span class="px-3 py-1 text-sm rounded-full {{ $modulAjar->status_badge }}">{{ $modulAjar->status === 'published' ? 'Published' : 'Draft' }}</span>
        </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">{{ $modulAjar->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">{{ $modulAjar->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">{{ $modulAjar->mataPelajaran->nama_mapel ?? '-' }}</p>
            </div>
            <div class="bg-gray-50 rounded-lg p-4">
                <p class="text-xs font-medium text-gray-500 uppercase">File</p>
                <p class="text-gray-800 font-medium mt-1">{{ $modulAjar->nama_file }}</p>
                <p class="text-xs text-gray-500 mt-1">{{ $modulAjar->ukuran_file_formatted }}</p>
            </div>
        </div>

        @if($modulAjar->deskripsi)
        <div class="mb-6">
            <p class="text-xs font-medium text-gray-500 uppercase">Deskripsi</p>
            <p class="text-gray-800 mt-1">{{ $modulAjar->deskripsi }}</p>
        </div>
        @endif

        <div class="mt-6 flex justify-end gap-3">
            <a href="{{ route('simaju.modul-ajar.index') }}" class="px-4 py-2 border rounded-lg hover:bg-gray-50">Kembali</a>
            <a href="{{ route('simaju.modul-ajar.download', $modulAjar->id) }}" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 flex items-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                Download
            </a>
            <a href="{{ route('simaju.modul-ajar.edit', $modulAjar->id) }}" class="px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600">Edit</a>
        </div>
    </div>
</div>
@endsection