<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $title ?? 'Laporan' }}</title>
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="{{ asset('img/Capture__1_-removebg-preview.png') }}">
    <style>
        @page {
            size: A4; /* A4 size */
            margin: 1.5cm;
        }
        body {
            font-family: Arial, sans-serif;
            color: #333;
            font-size: 11pt;
            background: #fff;
            margin: 0;
            padding: 0;
            line-height: 1.5;
        }
        .text-center {
            text-align: center;
        }
        .header {
            border-bottom: 2px solid #000;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        .header h1 {
            margin: 0;
            font-size: 16pt;
            text-transform: uppercase;
        }
        .header h2 {
            margin: 5px 0 0 0;
            font-size: 12pt;
            font-weight: normal;
        }
        .table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        .table th, .table td {
            border: 1px solid #000;
            padding: 6px 10px;
            text-align: left;
        }
        .table th {
            background-color: #f3f4f6 !important;
            font-weight: bold;
            -webkit-print-color-adjust: exact;
            color-adjust: exact;
        }
        .footer-ttd {
            width: 100%;
            margin-top: 50px;
        }
        .footer-ttd td {
            width: 50%;
            text-align: center;
        }

        /* Element UI yang tidak diprint */
        .no-print {
            background: #1e293b;
            color: white;
            padding: 15px;
            text-align: center;
            top: 0;
            position: sticky;
            z-index: 100;
        }
        .no-print button {
            background: #3b82f6;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            margin: 0 5px;
        }
        .no-print button:hover {
            background: #2563eb;
        }
        .btn-danger {
            background: #ef4444 !important;
        }
        .btn-danger:hover {
            background: #dc2626 !important;
        }

        @media print {
            .no-print {
                display: none !important;
            }
            body {
                background: white;
            }
        }
    </style>
</head>
<body onload="window.print()">

    <!-- Bar Aksi (Hanya tampil di layar) -->
    <div class="no-print">
        <p style="margin-top:0; margin-bottom:10px;">Gunakan tombol di bawah untuk mencetak atau <b>Save as PDF</b>.</p>
        <button onclick="window.print()">🖨️ Cetak / Save PDF</button>
        <button class="btn-danger" onclick="window.close()">❌ Tutup</button>
    </div>

    <!-- Area Cetak -->
    <div style="padding: 20px;">
        <div class="header text-center">
            <h1>SMKN 1 PRAJEKAN</h1>
            <h2>{{ $title ?? 'Laporan Data' }}</h2>
        </div>

        <table class="table">
            <thead>
                <tr>
                    <th style="width: 40px; text-align: center;">No</th>
                    @foreach($headers as $header)
                        <th>{{ $header }}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                @forelse($data as $i => $row)
                    <tr>
                        <td style="text-align: center;">{{ $i + 1 }}</td>
                        @foreach($columns as $col)
                            <?php 
                                // Parse custom view relationships if the field contains a dot, 
                                // but since models don't have eloquent relations, our columns might literally just be attributes
                                $val = data_get($row, $col, '-');
                                // Khusus timestamp formatting (opsional jika data datetime)
                                if($val instanceof \Carbon\Carbon) {
                                    $val = $val->format('d/m/Y H:i');
                                }
                            ?>
                            <td>{{ $val }}</td>
                        @endforeach
                    </tr>
                @empty
                    <tr>
                        <td colspan="{{ count($headers) + 1 }}" class="text-center">Belum ada data tersedia.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>

        <!-- Tempat TTD (Opsional untuk estetika PDF laporan) -->
        <table class="footer-ttd" style="border: none !important;">
            <tr>
                <td style="border: none !important;"></td>
                <td style="border: none !important;">
                    Prajekan, {{ \Carbon\Carbon::now()->translatedFormat('d F Y') }}<br>
                    Mengetahui,<br><br><br><br><br>
                    <b>Administrator</b>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>
