<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Slip Gaji - {{ $payroll->employee_name }}</title>
    <style>
        /* Setup ukuran kertas A4 Portrait */
        @page { size: A4 portrait; margin: 10mm; }
        
        body { 
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
            font-size: 10px; /* Font dikecilkan */
            color: #1e293b; 
            line-height: 1.3; 
            margin: 0;
            padding: 0;
        }

        /* Container dibuat compact agar muat 2 slip per halaman A4 */
        .container { 
            width: 100%; 
            height: 135mm; /* Setengah dari tinggi A4 (297mm) dikurangi margin */
            padding: 15px 20px; 
            box-sizing: border-box;
            background: #fff; 
            border-bottom: 1px dashed #94a3b8; /* Garis potong gunting */
            page-break-inside: avoid; /* Mencegah elemen terpotong ke halaman berikutnya */
        }

        .header { text-align: center; border-bottom: 2px double #cbd5e1; padding-bottom: 5px; margin-bottom: 10px; }
        .header h2 { margin: 0; font-size: 16px; font-weight: 900; letter-spacing: 1px; color: #0f172a; }
        .header p { margin: 2px 0 0; font-size: 9px; font-weight: bold; color: #64748b; letter-spacing: 1px; }
        
        .info-table { width: 100%; margin-bottom: 10px; font-size: 10px; }
        .info-table td { padding: 2px; vertical-align: top; }
        .label { font-weight: bold; color: #64748b; width: 80px; text-transform: uppercase; }
        
        .grid-container { display: flex; gap: 15px; margin-bottom: 10px; }
        .grid-box { flex: 1; }
        
        .details-table { width: 100%; border-collapse: collapse; margin-bottom: 5px; }
        .details-table th, .details-table td { border-bottom: 1px solid #e2e8f0; padding: 4px 2px; text-align: left; }
        .details-table th { border-bottom: 2px solid #cbd5e1; font-weight: 900; text-transform: uppercase; font-size: 9px; color: #475569; }
        .text-right { text-align: right !important; }
        
        .amount-green { color: #059669; font-weight: bold; font-family: monospace; font-size: 11px;}
        .amount-red { color: #e11d48; font-weight: bold; font-family: monospace; font-size: 11px;}
        
        .summary-box { border: 1.5px dashed #94a3b8; padding: 8px 12px; background-color: #f8fafc; display: flex; justify-content: space-between; align-items: center; border-radius: 4px;}
        .summary-label { font-size: 11px; font-weight: 900; text-transform: uppercase; color: #334155; }
        .summary-value { font-size: 14px; font-weight: 900; font-family: monospace; color: #0f172a; }
        
        .signatures { width: 100%; margin-top: 20px; font-size: 10px; }
        .signatures td { width: 50%; text-align: center; }
        .sign-area { height: 40px; } /* Area ttd diperkecil */
        .sign-name { font-weight: bold; text-decoration: underline; text-transform: uppercase; }
        
        @media print {
            body { background: white; -webkit-print-color-adjust: exact; }
            /* Menghilangkan garis putus-putus pada slip terakhir di halaman genap agar rapi */
            .container:nth-child(even) { border-bottom: none; }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h2>P-LINK ENTERPRISE</h2>
            <p>DOKUMEN SLIP GAJI RAHASIA - {{ strtoupper($payroll->period_name) }}</p>
        </div>

        <table class="info-table">
            <tr>
                <td class="label">No. Slip</td>
                <td>: <b>{{ $payroll->payslip_number }}</b></td>
                <td class="label">Cabang</td>
                <td>: {{ strtoupper($payroll->branch_name ?: 'Pusat') }}</td>
            </tr>
            <tr>
                <td class="label">NIK / Nama</td>
                <td>: <b>{{ $payroll->employee_code }} - {{ strtoupper($payroll->employee_name) }}</b></td>
                <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 / EARNINGS</th>
                            <th class="text-right">NOMINAL</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($earnings as $earn)
                        <tr>
                            <td>{{ $earn->description }}</td>
                            <td class="text-right amount-green">{{ number_format($earn->amount, 0, ',', '.') }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="grid-box">
                <table class="details-table">
                    <thead>
                        <tr>
                            <th>POTONGAN / DEDUCTIONS</th>
                            <th class="text-right">NOMINAL</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($deductions as $deduct)
                        <tr>
                            <td>{{ $deduct->description }}</td>
                            <td class="text-right amount-red">- {{ number_format($deduct->amount, 0, ',', '.') }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="2" class="text-center" style="color:#94a3b8; font-style: italic;">Tidak ada potongan bulan ini</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="summary-box">
            <div class="summary-label">Total Take Home Pay (Netto)</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>
                    <div>Karyawan</div>
                </td>
                <td>
                    <div>Disetujui Oleh,</div>
                    <div class="sign-area"></div>
                    <div class="sign-name">HRD / Finance</div>
                    <div>Manajemen</div>
                </td>
            </tr>
        </table>
    </div>

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