@extends('layouts.app')

@section('content')

<div class="max-w-4xl mx-auto p-6 bg-white rounded-xl shadow">

    {{-- ========================================================================= --}}
    {{-- BERIKUT ADALAH id="area-cetak" YANG DITAMBAHKAN UNTUK MEMBUNGKUS KOP SURAT --}}
    {{-- ========================================================================= --}}
    <div id="area-cetak">

        {{-- KOP SURAT --}}
        {{-- ===================== --}}
        <div class="text-center border-b-2 border-black pb-4 mb-6">
            <h2 class="text-base font-bold uppercase tracking-wide">
                KEMENTERIAN IMIGRASI DAN PEMASYARAKATAN REPUBLIK INDONESIA
            </h2>
            <h2 class="text-base font-bold uppercase tracking-wide">
                DIREKTORAT JENDERAL PEMASYARAKATAN
            </h2>
            <h1 class="text-lg font-extrabold uppercase tracking-wider mt-1">
                LEMBAGA PEMBINAAN KHUSUS ANAK KELAS II JAKARTA
            </h1>
            <p class="text-xs mt-1 italic text-gray-600">
                Jalan Raya Gandul (Komplek Badan Pengembangan Sumber Daya Manusia Hukum dan HAM), Ciganjur, Jagakarsa, Jakarta Selatan, 12630
            </p>
        </div>

        {{-- ===================== --}}
        {{-- JUDUL --}}
        {{-- ===================== --}}
        <h1 class="text-center text-lg font-bold mb-6 uppercase">
            HASIL PEMANGGILAN ANAK
        </h1>

        {{-- ===================== --}}
        {{-- INFO --}}
        {{-- ===================== --}}
        <div class="mb-4 text-sm space-y-1">
            <p><b>Tanggal:</b> {{ $data->tanggal }}</p>
            <p><b>Keperluan:</b> {{ $data->keperluan }}</p>
            <p><b>Jumlah Anak:</b> {{ $anak->count() }}</p>
        </div>

        <hr class="my-4">

        {{-- ===================== --}}
        {{-- DAFTAR ANAK --}}
        {{-- ===================== --}}
        <h2 class="font-semibold mb-2">Daftar Anak</h2>

        <table class="w-full text-sm border border-gray-300">
            <thead class="bg-gray-100">
                <tr>
                    <th class="border p-2 w-12">No</th>
                    <th class="border p-2 text-left">Nama Anak</th>
                </tr>
            </thead>
            <tbody>
                @foreach($anak as $i => $a)
                    <tr>
                        <td class="border p-2 text-center">{{ $i + 1 }}</td>
                        <td class="border p-2">{{ $a->nama }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        {{-- ============================================ --}}
        {{-- SEKSI PENANDATANGAN DINAMIS (KONSEP STAFF LO) --}}
        {{-- ============================================ --}}
        <div class="mt-14 space-y-10">
            
            {{-- A. SEKSI PEJABAT SIDE (Dicetak Berpasangan 2 Kolom Asli Sesuai Kodemu) --}}
            @php 
                // Filter pejabat yang di form create dipilih pada baris 2-kolom
                $sides = array_filter($pejabatFormatted, function($p) { return $p['tipe'] === 'side'; });
                // Kelompokkan menjadi pasangan berdua-dua
                $chunks = array_chunk($sides, 2);
            @endphp

            @foreach($chunks as $chunk)
                <div class="grid grid-cols-2 gap-10 text-center text-sm">
                    @foreach($chunk as $p)
                        <div>
                            <div class="font-semibold uppercase">{{ $p['jabatan'] }}</div>
                            <div style="height:80px;"></div>
                            <div>{{ $p['nama_pejabat'] }}</div>
                        </div>
                    @endforeach
                </div>
            @endforeach

            {{-- B. SEKSI PEJABAT CENTER (Dicetak Otomatis Sendiri Berada di Tengah Halaman) --}}
            @php 
                // Filter pejabat yang di form create dipilih via tombol TTD Tengah
                $centers = array_filter($pejabatFormatted, function($p) { return $p['tipe'] === 'center'; });
            @endphp

            @if(count($centers) > 0)
                <div class="flex flex-col items-center text-center text-sm mt-6">
                    @foreach($centers as $p)
                        <div class="w-1/2">
                            <div class="font-semibold uppercase">{{ $p['jabatan'] }}</div>
                            <div style="height:80px;"></div>
                            <div>{{ $p['nama_pejabat'] }}</div>
                        </div>
                    @endforeach
                </div>
            @endif

        </div>

    </div>
    {{-- ========================================================================= --}}
    {{-- BATAS AKHIR id="area-cetak" --}}
    {{-- ========================================================================= --}}

    {{-- ===================== --}}
    {{-- ACTION --}}
    {{-- ===================== --}}
    <div class="mt-10 flex gap-2 no-print">
        @if(auth()->user()->role === 'admin')
            <a href="{{ route('admin.pemanggilan.index') }}" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded text-sm transition inline-flex items-center gap-2 no-print">
                Kembali
            </a>
        @else
            <a href="{{ route('staff.pemanggilan.index') }}" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded text-sm transition inline-flex items-center gap-2 no-print">
                Kembali
            </a>
        @endif

        <button onclick="window.print()" class="bg-[#1c1d56] text-white px-4 py-2 rounded">
            Print
        </button>
    </div>

</div>

<style>
    @media print {
        /* 1. Sembunyikan semua elemen bawaan layout aplikasi (termasuk text Dashboard di luar) */
        body * {
            visibility: hidden !important;
        }

        /* 2. Hanya ijinkan elemen di dalam #area-cetak yang muncul di kertas */
        #area-cetak, #area-cetak * {
            visibility: visible !important;
        }

        /* 3. Atur posisi area cetak agar naik ke pojok kiri atas kertas print */
        #area-cetak {
            position: absolute !important;
            left: 0 !important;
            top: 0 !important;
            width: 100% !important;
            max-width: 21cm !important;
            background: white !important;
        }

        /* 4. Netralkan background & padding layout */
        html, body, main, #app, .min-h-screen, [class*="bg-slate-"], [class*="bg-gray-"] {
            background: white !important;
            background-color: white !important;
            padding: 0 !important;
            margin: 0 !important;
            box-shadow: none !important;
        }

        /* 5. Perbaikan format tabel agar tidak berubah saat dicetak */
        #area-cetak table {
            display: table !important;
            width: 100% !important;
            border-collapse: collapse !important;
            margin-top: 15px !important;
        }
        
        #area-cetak tr {
            display: table-row !important;
        }

        #area-cetak th, #area-cetak td {
            display: table-cell !important;
            border: 1px solid #000 !important;
            padding: 8px 12px !important;
            color: #000 !important;
            text-align: left !important;
        }
        
        #area-cetak th {
            font-weight: bold !important;
            background-color: #f2f2f2 !important;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

        /* 6. Margin fisik printer */
        @page {
            size: portrait;
            margin: 2cm 1.5cm;
        }
    }
</style>

@endsection