<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Cetak Massal Slip Gaji - {{ $period->period_name }}</title>
    <style>
        /* Menghilangkan margin default browser agar ukuran mm presisi */
        @page { size: A4 portrait; margin: 0; }
        
        body { 
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
            margin: 0; 
            padding: 0; 
            background: #e2e8f0; /* Warna abu-abu saat preview */
        }

        /* Pembungkus 1 Lembar Kertas A4 */
        .page-a4 {
            width: 210mm;
            height: 296mm;
            background: white;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            page-break-after: always;
            box-sizing: border-box;
            overflow: hidden;
        }

        /* Ukuran per 1 Slip (Seperempat A4 = A6) */
        .slip-a6 {
            width: 105mm; /* Setengah Lebar A4 */
            height: 148mm; /* Setengah Tinggi A4 */
            box-sizing: border-box;
            padding: 8mm;
            display: flex;
            flex-direction: column;
            border-right: 1px dashed #cbd5e1; /* Garis Gunting Vertikal */
            border-bottom: 1px dashed #cbd5e1; /* Garis Gunting Horizontal */
        }

        /* Hilangkan garis pada sisi luar kertas agar rapi */
        .slip-a6:nth-child(even) { border-right: none; }
        .slip-a6:nth-child(3), .slip-a6:nth-child(4) { border-bottom: none; }

        /* Typography & Layout Kompak */
        .header { text-align: center; border-bottom: 1px solid #000; padding-bottom: 4px; margin-bottom: 6px; }
        .header h2 { margin: 0; font-size: 11px; font-weight: 900; letter-spacing: 0.5px; }
        .header p { margin: 2px 0 0; font-size: 7px; font-weight: bold; color: #475569; }
        
        .info-table { width: 100%; font-size: 7.5px; margin-bottom: 6px; }
        .info-table td { padding: 1px; vertical-align: top; }
        .label { font-weight: bold; width: 45px; }
        
        .grid-container { display: flex; gap: 6px; flex: 1; }
        .grid-box { flex: 1; }
        
        .details-table { width: 100%; border-collapse: collapse; }
        .details-table th, .details-table td { border-bottom: 1px solid #f1f5f9; padding: 2px 1px; font-size: 7px; }
        .details-table th { border-bottom: 1px solid #cbd5e1; font-weight: bold; text-align: left; font-size: 6.5px; }
        .text-right { text-align: right !important; }
        
        .summary-box { border: 1px dashed #64748b; padding: 4px 6px; background-color: #f8fafc; display: flex; justify-content: space-between; align-items: center; margin-top: 5px;}
        .summary-label { font-size: 8px; font-weight: bold; }
        .summary-value { font-size: 10px; font-weight: bold; font-family: monospace; }
        
        .signatures { width: 100%; text-align: center; font-size: 7.5px; margin-top: 8px; }
        .signatures td { width: 50%; }
        .sign-area { height: 25px; }
        .sign-name { font-weight: bold; text-decoration: underline; }

        @media print {
            body { background: white; -webkit-print-color-adjust: exact; }
            .page-a4 { margin: 0; }
        }
    </style>
</head>
<body>

    {{-- Memotong data menjadi per 4 karyawan (1 Halaman A4) --}}
    @foreach($payrolls->chunk(4) as $chunk)
        <div class="page-a4">
            @foreach($chunk as $payroll)
                <div class="slip-a6">
                    <div class="header">
                        <h2>P-LINK ENTERPRISE</h2>
                        <p>SLIP GAJI - {{ strtoupper($payroll->period_name) }}</p>
                    </div>

                    <table class="info-table">
                        <tr>
                            <td class="label">NO. SLIP</td>
                            <td>: <b>{{ $payroll->payslip_number }}</b></td>
                        </tr>
                        <tr>
                            <td class="label">NAMA</td>
                            <td>: <b>{{ $payroll->employee_code }} - {{ strtoupper($payroll->employee_name) }}</b></td>
                        </tr>
                        <tr>
                            <td class="label">JABATAN</td>
                            <td>: {{ strtoupper($payroll->position_name) }}</td>
                        </tr>
                    </table>

                    <div class="grid-container">
                        <div class="grid-box">
                            <table class="details-table">
                                <thead>
                                    <tr><th>PENERIMAAN</th><th class="text-right">RP</th></tr>
                                </thead>
                                <tbody>
                                    @foreach($payroll->earnings as $earn)
                                    <tr>
                                        <td>{{ $earn->description }}</td>
                                        <td class="text-right">{{ number_format($earn->amount, 0, ',', '.') }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="grid-box">
                            <table class="details-table">
                                <thead>
                                    <tr><th>POTONGAN</th><th class="text-right">RP</th></tr>
                                </thead>
                                <tbody>
                                    @forelse($payroll->deductions as $deduct)
                                    <tr>
                                        <td>{{ $deduct->description }}</td>
                                        <td class="text-right">-{{ number_format($deduct->amount, 0, ',', '.') }}</td>
                                    </tr>
                                    @empty
                                    <tr><td colspan="2" style="color:#cbd5e1; text-align:center;">Nihil</td></tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="summary-box">
                        <div class="summary-label">TAKE HOME PAY</div>
                        <div class="summary-value">Rp {{ number_format($payroll->net_salary, 0, ',', '.') }}</div>
                    </div>

                    <table class="signatures">
                        <tr>
                            <td>
                                <div>Diterima Oleh,</div>
                                <div class="sign-area"></div>
                                <div class="sign-name">{{ $payroll->employee_name }}</div>
                            </td>
                            <td>
                                <div>Disetujui Oleh,</div>
                                <div class="sign-area"></div>
                                <div class="sign-name">HRD / Finance</div>
                            </td>
                        </tr>
                    </table>
                </div>
            @endforeach
        </div>
    @endforeach

    <script>
        window.onload = function() { window.print(); }
    </script>
</body>
</html>