<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slip Gaji - {{ $penggajian->teknisi->nama }}</title>
    <style>
        body {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            color: #333;
            margin: 0;
            padding: 20px;
            font-size: 14px;
        }
        .slip-container {
            max-width: 800px;
            margin: 0 auto;
            border: 1px solid #ddd;
            padding: 30px;
            background: #fff;
        }
        header {
            text-align: center;
            border-bottom: 2px solid #2c3e50;
            padding-bottom: 20px;
            margin-bottom: 30px;
        }
        header h1 {
            margin: 0 0 5px 0;
            color: #2c3e50;
            font-size: 24px;
            text-transform: uppercase;
        }
        header p {
            margin: 0;
            color: #7f8c8d;
        }
        .info-section {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
        }
        .info-table {
            width: 45%;
        }
        .info-table td {
            padding: 3px 0;
        }
        .info-table td.label {
            font-weight: bold;
            width: 120px;
        }
        .details-section {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 30px;
        }
        .details-section th {
            background-color: #f8f9fa;
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }
        .details-section td {
            border: 1px solid #ddd;
            padding: 10px;
        }
        .details-section th.text-right,
        .details-section td.text-right {
            text-align: right;
        }
        .details-section th.text-center,
        .details-section td.text-center {
            text-align: center;
        }
        .finances-table {
            width: 50%;
            margin-left: auto;
            border-collapse: collapse;
            margin-bottom: 40px;
        }
        .finances-table td {
            padding: 8px 10px;
            border-bottom: 1px solid #eee;
        }
        .finances-table td.amount {
            text-align: right;
            font-family: monospace;
            font-size: 15px;
        }
        .finances-table tr.total th,
        .finances-table tr.total td {
            border-top: 2px solid #2c3e50;
            border-bottom: none;
            padding-top: 15px;
            font-weight: bold;
            font-size: 16px;
        }
        .signatures {
            display: flex;
            justify-content: space-between;
            margin-top: 60px;
            text-align: center;
        }
        .signature-box {
            width: 250px;
        }
        .signature-line {
            margin-top: 80px;
            border-top: 1px solid #333;
            padding-top: 5px;
            font-weight: bold;
        }
        @media print {
            body { background: #fff; }
            .slip-container { border: none; padding: 0; }
        }
    </style>
</head>
<body onload="window.print()">
    <div class="slip-container">
        <header>
            <h1>Slip Gaji Teknisi</h1>
            <p>PDAM Tirta Sanjiwani</p>
            <p style="font-weight: bold; margin-top: 10px;">Periode: {{ \Carbon\Carbon::create()->month($penggajian->periode_bulan)->translatedFormat('F') }} {{ $penggajian->periode_tahun }}</p>
        </header>

        <div class="info-section">
            <table class="info-table">
                <tr><td class="label">Nama Teknisi:</td><td>{{ $penggajian->teknisi->nama }}</td></tr>
                <tr><td class="label">ID / NIK:</td><td>{{ $penggajian->teknisi->id_teknisi }}</td></tr>
                <tr><td class="label">Jabatan:</td><td>{{ $penggajian->teknisi->spesialisasi ?? 'Teknisi Lapangan' }}</td></tr>
            </table>
            <table class="info-table">
                <tr><td class="label">No. Slip:</td><td>SLP-{{ $penggajian->periode_tahun }}{{ str_pad($penggajian->periode_bulan, 2, '0', STR_PAD_LEFT) }}-{{ str_pad($penggajian->id_penggajian, 4, '0', STR_PAD_LEFT) }}</td></tr>
                <tr><td class="label">Tgl Cetak:</td><td>{{ $penggajian->tanggal_penggajian->format('d/m/Y') }}</td></tr>
                <tr><td class="label">Status:</td><td>{{ $penggajian->status_pembayaran == 'sudah_bayar' ? 'LUNAS' : 'BELUM DIBAYAR' }}</td></tr>
            </table>
        </div>

        <table class="details-section">
            <thead>
                <tr>
                    <th width="5%">No</th>
                    <th width="45%">Rincian Penugasan Selesai</th>
                    <th width="15%" class="text-right">Ongkos Tugas</th>
                    <th width="10%" class="text-center">Tim</th>
                    <th width="25%" class="text-right">Bagian (Rp)</th>
                </tr>
            </thead>
            <tbody>
                @if($penggajian->detailPenggajian && $penggajian->detailPenggajian->count() > 0)
                    @foreach($penggajian->detailPenggajian as $index => $item)
                    <tr>
                        <td class="text-center">{{ $index + 1 }}</td>
                        <td>
                            <strong>{{ $item->penugasan->label_jenis_pekerjaan ?? 'Tugas #'.$item->id_penugasan }}</strong><br>
                            <small>{{ $item->lokasi }}</small>
                            @if($item->rincian_pekerjaan)
                            <br><small style="color: #2c3e50; font-weight: bold; background: #eee; padding: 2px 4px; border-radius: 3px;">{{ $item->rincian_pekerjaan }}</small>
                            @endif
                        </td>
                        <td class="text-right">Rp {{ number_format($item->ongkos_penugasan, 0, ',', '.') }}</td>
                        <td class="text-center">{{ $item->jumlah_tim }}</td>
                        <td class="text-right" style="font-weight: bold;">Rp {{ number_format($item->bagian_ongkos, 0, ',', '.') }}</td>
                    </tr>
                    @endforeach
                @else
                    <tr>
                        <td colspan="5" class="text-center">Tidak ada data penugasan di bulan ini.</td>
                    </tr>
                @endif
            </tbody>
        </table>

        <table class="finances-table">
            <tr>
                <td>Total Ongkos Pekerjaan</td>
                <td class="amount">{{ number_format($penggajian->total_ongkos_pekerjaan, 0, ',', '.') }}</td>
            </tr>
            <tr>
                <td>Uang Makan ({{ $penggajian->jumlah_hari_kerja }} Hari Hadir)</td>
                <td class="amount">+ {{ number_format($penggajian->biaya_makan, 0, ',', '.') }}</td>
            </tr>
            <tr>
                <td>Potongan Kasbon Berjalan</td>
                <td class="amount">- {{ number_format($penggajian->total_potongan ?? $penggajian->total_kasbon, 0, ',', '.') }}</td>
            </tr>
            <tr class="total">
                <th>Gaji Bersih Diterima</th>
                <td class="amount">Rp {{ number_format($penggajian->gaji_bersih, 0, ',', '.') }}</td>
            </tr>
        </table>

        <div class="signatures">
            <div class="signature-box">
                <p>Mengetahui/Menyetujui,<br><strong>Manajer Operasional</strong></p>
                <div class="signature-line">PDAM Tirta Sanjiwani</div>
            </div>
            <div class="signature-box">
                <p>Diterima Oleh,<br><strong>Teknisi Lapangan</strong></p>
                <div class="signature-line">{{ $penggajian->teknisi->nama }}</div>
            </div>
        </div>
    </div>
</body>
</html>
