{{-- ================= RIWAYAT SURAT ================= --}}
<div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">

    {{-- Header --}}
    <div class="bg-gradient-to-r from-emerald-500 to-teal-500 px-6 py-5">
        <h2 class="text-xl font-bold text-white">Riwayat Surat</h2>
        <p class="text-emerald-50 text-sm mt-1">Daftar surat izin dan sakit</p>
    </div>

    {{-- Table --}}
    <div class="p-6">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b-2 border-gray-200">
                        <th class="px-4 py-4 text-left text-sm font-semibold text-gray-700">Nama</th>
                        <th class="px-4 py-4 text-center text-sm font-semibold text-gray-700">Tanggal</th>
                        <th class="px-4 py-4 text-center text-sm font-semibold text-gray-700">Status</th>
                        <th class="px-4 py-4 text-center text-sm font-semibold text-gray-700">Aksi</th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-gray-100">
                    @forelse($riwayatSurat as $s)
                    <tr class="hover:bg-gray-50 transition-colors duration-200">

                        {{-- Nama --}}
                        <td class="px-4 py-4">
                            <div class="font-semibold text-gray-800">
                                {{ $s->nama }}
                            </div>
                            <div class="text-xs text-gray-500 mt-0.5">
                                {{ $s->tipe === 'guru' ? 'Guru' : 'Siswa' }}
                            </div>
                        </td>

                        {{-- Tanggal --}}
                        <td class="px-4 py-4 text-center">
                            <span class="text-sm text-gray-700">
                                {{ \Carbon\Carbon::parse($s->tanggal)->format('d M Y') }}
                            </span>
                        </td>

                        {{-- Status --}}
                        <td class="px-4 py-4 text-center">
                            <span class="inline-flex px-3 py-1 rounded-full text-xs font-semibold
                                @if(strtolower($s->status) === 'izin')
                                    bg-blue-100 text-blue-700
                                @elseif(strtolower($s->status) === 'sakit')
                                    bg-yellow-100 text-yellow-700
                                @else
                                    bg-gray-100 text-gray-700
                                @endif
                            ">
                                {{ ucfirst($s->status) }}
                            </span>
                        </td>

                        {{-- Aksi --}}
                        <td class="px-4 py-4 text-center">
                            <div class="flex justify-center gap-2">
                                <button
                                    onclick='openDetail(@json($s))'
                                    class="px-3 py-1.5 bg-blue-500 hover:bg-blue-600 text-white text-xs font-medium rounded-lg">
                                    Detail
                                </button>

                                <!-- <a href="#"
                                   class="px-3 py-1.5 bg-amber-500 hover:bg-amber-600 text-white text-xs font-medium rounded-lg">
                                    Edit
                                </a>

                                <a href="#"
                                   class="px-3 py-1.5 bg-red-500 hover:bg-red-600 text-white text-xs font-medium rounded-lg">
                                    Hapus
                                </a> -->
                            </div>
                        </td>

                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="px-4 py-12 text-center text-gray-500">
                            Tidak ada riwayat surat
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>


{{-- ================= MODAL DETAIL ================= --}}
<div id="modalDetail"
     class="fixed inset-0 bg-black/50 hidden z-50 items-center justify-center p-4">

    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-lg">

        {{-- Header --}}
        <div class="bg-gradient-to-r from-blue-500 to-indigo-600 px-6 py-4 rounded-t-2xl">
            <h3 class="text-lg font-bold text-white">Detail Surat</h3>
        </div>

        {{-- Content --}}
        <div class="p-6 space-y-4">
            <div>
                <label class="text-xs font-semibold text-gray-500 uppercase">Nama</label>
                <p id="d-nama" class="text-gray-800 font-semibold text-lg mt-1">-</p>
            </div>

            <div id="row-kelas" class="hidden">
                <label class="text-xs font-semibold text-gray-500 uppercase">Kelas</label>
                <p id="d-kelas" class="text-gray-800 font-semibold mt-1">-</p>
            </div>

            <div>
                <label class="text-xs font-semibold text-gray-500 uppercase">Status</label>
                <p id="d-status" class="text-gray-800 font-semibold mt-1">-</p>
            </div>

            <div>
                <label class="text-xs font-semibold text-gray-500 uppercase">Keterangan</label>
                <p id="d-keterangan" class="text-gray-700 mt-2 leading-relaxed">-</p>
            </div>
        </div>

        {{-- Footer --}}
        <div class="px-6 py-4 bg-gray-50 rounded-b-2xl flex justify-end">
            <button
                onclick="closeDetail()"
                class="px-6 py-2.5 bg-gray-700 hover:bg-gray-800 text-white font-medium rounded-lg">
                Tutup
            </button>
        </div>
    </div>
</div>


{{-- ================= SCRIPT ================= --}}
<script>
function openDetail(data) {
    const modal = document.getElementById('modalDetail');

    // tampilkan modal
    modal.classList.remove('hidden');
    modal.classList.add('flex');

    // isi data
    document.getElementById('d-nama').innerText = data.nama ?? '-';
    document.getElementById('d-status').innerText = data.status ?? '-';
    document.getElementById('d-keterangan').innerText = data.keterangan ?? '-';

    // tampilkan kelas jika siswa
    if (data.tipe === 'siswa') {
        document.getElementById('row-kelas').classList.remove('hidden');
        document.getElementById('d-kelas').innerText = data.kelas ?? '-';
    } else {
        document.getElementById('row-kelas').classList.add('hidden');
    }
}

function closeDetail() {
    const modal = document.getElementById('modalDetail');
    modal.classList.add('hidden');
    modal.classList.remove('flex');
}
</script>

<style>
@keyframes fade-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-fade-in {
    animation: fade-in 0.2s ease-out;
}
</style>