@extends('layouts.admin')

@section('title', 'Laporan Rekapitulasi - JDIH Desa Gogik')

@section('content')
<div class="space-y-6">
    <div class="flex items-center justify-between print:hidden">
        <div>
            <h1 class="text-2xl font-extrabold text-slate-900 tracking-tight">📊 Laporan Rekapitulasi Produk Hukum Desa</h1>
            <p class="text-xs text-slate-500">Cetak laporan fisik A4 Kop Surat Resmi Pemerintah Desa Gogik.</p>
        </div>
        <button onclick="window.print()" class="px-5 py-2.5 bg-emerald-700 hover:bg-emerald-800 text-white font-extrabold rounded-xl text-xs shadow-md">
            🖨️ Cetak Laporan A4 Kop Surat
        </button>
    </div>

    <!-- Official Printable Kop Surat A4 Report -->
    <div class="bg-white p-8 rounded-2xl shadow-xl border border-slate-200 text-slate-900 space-y-6">
        <!-- Kop Surat -->
        <div class="flex items-center justify-between border-b-4 border-double border-slate-900 pb-4">
            <img src="/logo-gogik.png" alt="Logo Desa Gogik" class="h-20 w-auto object-contain" />
            <div class="text-center font-serif flex-1 px-4">
                <h3 class="text-base font-bold uppercase tracking-wider">PEMERINTAH KABUPATEN SEMARANG</h3>
                <h4 class="text-sm font-bold uppercase tracking-wider">KECAMATAN UNGARAN BARAT</h4>
                <h2 class="text-xl font-extrabold uppercase tracking-widest text-emerald-950">PEMERINTAH DESA GOGIK</h2>
                <p class="text-[11px] font-sans text-slate-600 mt-1">Alamat: Jl. Raya Gogik - Ungaran No. 01, Kec. Ungaran Barat, Kab. Semarang 50551</p>
            </div>
            <img src="/logo-gogik.png" alt="Logo Desa Gogik" class="h-20 w-auto object-contain invisible" />
        </div>

        <div class="text-center space-y-1 py-2">
            <h3 class="font-extrabold text-base underline uppercase">LAPORAN REKAPITULASI PRODUK HUKUM DESA GOGIK</h3>
            <p class="text-xs text-slate-600 font-medium">Tahun Anggaran {{ date('Y') }}</p>
        </div>

        <table class="w-full text-xs text-left border-collapse border border-slate-400">
            <thead class="bg-slate-100 text-slate-900 font-bold uppercase border-b border-slate-400">
                <tr>
                    <th class="p-2 border border-slate-400 text-center">No</th>
                    <th class="p-2 border border-slate-400">Jenis Dokumen</th>
                    <th class="p-2 border border-slate-400">Nomor & Tahun</th>
                    <th class="p-2 border border-slate-400">Judul Produk Hukum</th>
                    <th class="p-2 border border-slate-400 text-center">Status</th>
                    <th class="p-2 border border-slate-400 text-center">Unduhan</th>
                </tr>
            </thead>
            <tbody>
                @forelse($products as $idx => $p)
                    <tr>
                        <td class="p-2 border border-slate-400 text-center font-bold">{{ $idx + 1 }}</td>
                        <td class="p-2 border border-slate-400 font-semibold">{{ $p->category->name }}</td>
                        <td class="p-2 border border-slate-400 font-bold">No. {{ $p->document_number }}/{{ $p->year }}</td>
                        <td class="p-2 border border-slate-400">{{ $p->title }}</td>
                        <td class="p-2 border border-slate-400 text-center font-bold">{{ $p->document_status }}</td>
                        <td class="p-2 border border-slate-400 text-center">{{ $p->download_count }}x</td>
                    </tr>
                @empty
                    <tr>
                        <td colSpan="6" class="p-4 text-center border border-slate-400 italic">Belum ada dokumen terdaftar.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>

        <div class="pt-8 flex justify-end text-xs font-serif">
            <div class="text-center space-y-12">
                <p>Gogik, {{ date('d F Y') }}<br/><strong>KEPALA DESA GOGIK</strong></p>
                <p class="font-bold underline uppercase">( H. MUSLIH, S.Pd. )</p>
            </div>
        </div>
    </div>
</div>
@endsection