database-kesiswaan/resources/views/student-transfers/preview-letter.blade.php

<x-master-page title="Preview Surat Pindah Sekolah" description="Lihat surat pindah sekolah langsung di browser bila format mendukung.">
    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
        <div class="rounded-3xl border border-slate-200 bg-gradient-to-br from-white via-slate-50 to-indigo-50/40 p-6 shadow-sm shadow-slate-200/50 ring-1 ring-white/70">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <div class="text-sm font-medium text-slate-500">Nama Siswa</div>
                    <div class="mt-3 text-lg font-bold text-slate-900">{{ $studentTransfer->full_name }}</div>
                </div>
                <div class="rounded-2xl bg-white/80 p-3 text-indigo-600 ring-1 ring-indigo-100 backdrop-blur-sm">
                    <i class="fa-solid fa-user text-lg"></i>
                </div>
            </div>
        </div>

        <div class="rounded-3xl border border-sky-200 bg-gradient-to-br from-white via-sky-50/50 to-sky-100/60 p-6 shadow-sm shadow-sky-100/50 ring-1 ring-white/70">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <div class="text-sm font-medium text-sky-700">Format File</div>
                    <div class="mt-3 text-lg font-bold text-sky-800">{{ strtoupper(pathinfo($studentTransfer->transfer_letter_file_name ?: '', PATHINFO_EXTENSION) ?: 'FILE') }}</div>
                </div>
                <div class="rounded-2xl bg-white/80 p-3 text-sky-600 ring-1 ring-sky-100 backdrop-blur-sm">
                    <i class="fa-solid fa-file-lines text-lg"></i>
                </div>
            </div>
        </div>

        <div class="rounded-3xl border border-emerald-200 bg-gradient-to-br from-white via-emerald-50/50 to-emerald-100/60 p-6 shadow-sm shadow-emerald-100/50 ring-1 ring-white/70">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <div class="text-sm font-medium text-emerald-700">Ukuran File</div>
                    <div class="mt-3 text-lg font-bold text-emerald-800">{{ $studentTransfer->transfer_letter_file_size ? number_format($studentTransfer->transfer_letter_file_size / 1024, 1) . ' KB' : '-' }}</div>
                </div>
                <div class="rounded-2xl bg-white/80 p-3 text-emerald-600 ring-1 ring-emerald-100 backdrop-blur-sm">
                    <i class="fa-solid fa-weight-scale text-lg"></i>
                </div>
            </div>
        </div>

        <div class="rounded-3xl border border-fuchsia-200 bg-gradient-to-br from-white via-fuchsia-50/50 to-fuchsia-100/60 p-6 shadow-sm shadow-fuchsia-100/50 ring-1 ring-white/70">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <div class="text-sm font-medium text-fuchsia-700">Tanggal Pindah</div>
                    <div class="mt-3 text-lg font-bold text-fuchsia-800">{{ $studentTransfer->transfer_date?->format('d M Y') ?: 'Belum diisi' }}</div>
                </div>
                <div class="rounded-2xl bg-white/80 p-3 text-fuchsia-600 ring-1 ring-fuchsia-100 backdrop-blur-sm">
                    <i class="fa-solid fa-calendar-right text-lg"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-6 xl:grid-cols-[380px_minmax(0,1fr)]">
        <x-master-card title="Informasi Surat Pindah" subtitle="Metadata file dan ringkasan arsip mutasi.">
            <div class="mb-4 flex items-center gap-3 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 shadow-sm ring-1 ring-white/70">
                <div class="flex h-11 w-11 items-center justify-center rounded-2xl bg-indigo-100 text-indigo-600">
                    <i class="fa-solid fa-folder-open text-lg"></i>
                </div>
                <div>
                    <div class="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Metadata Dokumen</div>
                    <div class="mt-1 text-sm font-semibold text-slate-800">Informasi cepat sebelum file dibuka atau diunduh</div>
                </div>
            </div>

            <div class="space-y-3 text-sm text-slate-600">
                <div class="rounded-2xl border border-slate-200 bg-white px-4 py-3 shadow-sm ring-1 ring-white/70">
                    <div class="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500"><i class="fa-solid fa-user"></i><span>Nama Siswa</span></div>
                    <div class="mt-2 font-semibold text-slate-800">{{ $studentTransfer->full_name }}</div>
                </div>
                <div class="rounded-2xl border border-slate-200 bg-white px-4 py-3 shadow-sm ring-1 ring-white/70">
                    <div class="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500"><i class="fa-solid fa-file-signature"></i><span>Nama File</span></div>
                    <div class="mt-2 break-words font-semibold text-slate-800">{{ $studentTransfer->transfer_letter_file_name ?: '-' }}</div>
                </div>
                <div class="rounded-2xl border border-slate-200 bg-white px-4 py-3 shadow-sm ring-1 ring-white/70">
                    <div class="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500"><i class="fa-solid fa-code"></i><span>Tipe MIME</span></div>
                    <div class="mt-2 text-slate-700">{{ $mimeType ?: '-' }}</div>
                </div>
                <div class="rounded-2xl border border-slate-200 bg-white px-4 py-3 shadow-sm ring-1 ring-white/70">
                    <div class="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500"><i class="fa-solid fa-weight-scale"></i><span>Ukuran File</span></div>
                    <div class="mt-2 text-slate-700">{{ $studentTransfer->transfer_letter_file_size ? number_format($studentTransfer->transfer_letter_file_size / 1024, 1) . ' KB' : '-' }}</div>
                </div>
                <div class="rounded-2xl border border-slate-200 bg-white px-4 py-3 shadow-sm ring-1 ring-white/70">
                    <div class="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500"><i class="fa-solid fa-calendar-days"></i><span>Tanggal Pindah</span></div>
                    <div class="mt-2 text-slate-700">{{ $studentTransfer->transfer_date?->format('d-m-Y') ?: '-' }}</div>
                </div>
                <div class="rounded-2xl border border-slate-200 bg-white px-4 py-3 shadow-sm ring-1 ring-white/70">
                    <div class="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500"><i class="fa-solid fa-align-left"></i><span>Catatan</span></div>
                    <div class="mt-2 leading-6 text-slate-700">{{ $studentTransfer->transfer_reason ?: '-' }}</div>
                </div>
            </div>

            <div class="mt-6 flex flex-wrap gap-3">
                <a href="{{ $fileUrl }}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 rounded-2xl bg-sky-600 px-4 py-3 text-sm font-semibold text-white transition hover:bg-sky-700">
                    <i class="fa-solid fa-up-right-from-square"></i>
                    <span>Buka File Asli</span>
                </a>
                <a href="{{ route('student-transfers.show', $studentTransfer) }}" class="inline-flex items-center gap-2 rounded-2xl border border-slate-200 px-4 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-50">
                    <i class="fa-solid fa-arrow-left"></i>
                    <span>Kembali ke Detail</span>
                </a>
            </div>
        </x-master-card>

        <x-master-card title="Tampilan Surat Pindah" subtitle="Preview langsung untuk gambar dan PDF.">
            <div class="mb-4 flex items-center justify-between gap-3 rounded-2xl border border-slate-200 bg-gradient-to-r from-white via-slate-50 to-indigo-50/30 px-4 py-3 shadow-sm ring-1 ring-white/70">
                <div>
                    <div class="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Mode Preview</div>
                    <div class="mt-1 text-sm font-semibold text-slate-800">
                        @if ($isImage)
                            Gambar langsung di browser
                        @elseif ($isPdf)
                            PDF embed di browser
                        @else
                            Preview tidak didukung
                        @endif
                    </div>
                </div>
                <div class="rounded-2xl bg-white/80 p-3 text-indigo-600 ring-1 ring-indigo-100 backdrop-blur-sm">
                    <i class="fa-solid {{ $isImage ? 'fa-image' : ($isPdf ? 'fa-file-pdf' : 'fa-circle-info') }} text-lg"></i>
                </div>
            </div>

            @if ($isImage)
                <div class="overflow-hidden rounded-3xl border border-slate-200 bg-slate-50 p-4 shadow-sm ring-1 ring-white/70">
                    <img src="{{ $fileUrl }}" alt="{{ $studentTransfer->transfer_letter_file_name }}" class="mx-auto max-h-[72vh] rounded-2xl object-contain shadow-sm">
                </div>
            @elseif ($isPdf)
                <div class="overflow-hidden rounded-3xl border border-slate-200 bg-slate-50 shadow-sm ring-1 ring-white/70">
                    <iframe src="{{ $fileUrl }}" class="h-[78vh] w-full rounded-3xl" title="Preview Surat Pindah"></iframe>
                </div>
            @else
                <div class="rounded-3xl border border-dashed border-slate-300 bg-slate-50 p-10 text-center shadow-sm ring-1 ring-white/70">
                    <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-white text-slate-500 shadow-sm ring-1 ring-slate-200">
                        <i class="fa-solid fa-file-circle-question text-xl"></i>
                    </div>
                    <div class="mt-4 text-lg font-semibold text-slate-800">Preview tidak tersedia</div>
                    <p class="mt-2 text-sm text-slate-500">Format file ini belum didukung untuk preview langsung di browser. Gunakan tombol buka file asli untuk melihat dokumen.</p>
                </div>
            @endif
        </x-master-card>
    </div>
</x-master-page>