@extends('layouts.intern')

@section('content')

    <!-- Header -->
    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 tracking-tight">Sertifikat Magang</h1>
            <p class="text-xs text-gray-400 mt-1">Lihat dan unduh sertifikat penyelesaian program magang.</p>
        </div>
        <div class="flex flex-wrap items-center gap-2.5">
            <a href="{{ route('intern.dashboard') }}"
                class="inline-flex items-center gap-2 px-4 py-2 bg-white border border-gray-200 rounded-lg text-xs font-semibold text-gray-700 hover:bg-gray-50 transition shadow-2xs">
                <i class="fa-solid fa-arrow-left text-[11px]"></i>
                <span>Kembali</span>
            </a>
            <a href="{{ route('intern.certificate.download') }}"
                class="inline-flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-xs font-semibold transition shadow-2xs">
                <i class="fa-solid fa-download text-[11px]"></i>
                <span>Download PDF</span>
            </a>
        </div>
    </div>

    <!-- Certificate Preview Card -->
    <div class="bg-white rounded-2xl border border-gray-100 shadow-xs overflow-hidden">
        <!-- Card Header -->
        <div class="px-6 py-4 flex items-center justify-between border-b border-gray-100">
            <div class="flex items-center gap-2 text-xs font-bold text-[#13124E]">
                <i class="fa-regular fa-file-lines text-emerald-600 text-sm"></i>
                <span>Pratinjau sertifikat</span>
            </div>
            <div class="text-[11px] text-gray-400 font-normal">A4 • Landscape</div>
        </div>

        <!-- Certificate Embed -->
        <div class="p-6 bg-white flex justify-center">
            <div class="w-full max-w-5xl rounded-lg overflow-hidden border border-gray-100" style="aspect-ratio: 297/210; min-height: 580px;">
                <iframe src="{{ route('intern.certificate.download', ['view' => 1]) }}"
                    class="w-full h-full border-0"></iframe>
            </div>
        </div>
    </div>

    <!-- Footer Info -->
    <div class="mt-4 flex items-center justify-between text-xs text-gray-400">
        <span>Unduh sertifikat dalam format PDF melalui tombol Download PDF.</span>
        <span>1 halaman</span>
    </div>

@endsection