<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=80mm, initial-scale=1.0">
    <title>Slip Gaji {{ $salary->employee->name ?? 'Karyawan' }} - {{ $salary->period_label }}</title>

    <style>
        @media print {
            @page {
                size: 80mm auto;
                margin: 0;
            }
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Courier New', monospace;
            font-size: 12px;
            width: 80mm;
            padding: 5mm;
            background: #fff;
            color: #000;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

        .slip-shell {
            position: relative;
        }

        .slip-content {
            position: relative;
            z-index: 1;
        }

        .header {
            text-align: center;
            margin-bottom: 10px;
            font-weight: bold;
        }

        .header img {
            max-height: 38px;
            max-width: 58mm;
            margin-bottom: 4px;
        }

        .header h1 {
            font-size: 16px;
            font-weight: bold;
            line-height: 1.2;
        }

        .header .subtitle {
            font-size: 13px;
            font-weight: bold;
            margin-top: 2px;
        }

        .header .address {
            font-size: 11px;
            color: #000;
            font-weight: bold;
            margin-top: 2px;
            word-break: break-word;
        }

        .divider {
            border-bottom: 1px dashed #000;
            margin: 6px 0;
        }

        .divider-double {
            border-bottom: 2px dashed #000;
            margin: 8px 0;
        }

        .center-box {
            text-align: center;
        }

        .slip-code {
            font-size: 13px;
            font-weight: bold;
            letter-spacing: 1px;
        }

        .period-text {
            font-size: 11px;
            font-weight: bold;
            margin-top: 2px;
        }

        .status-box {
            margin-top: 6px;
            display: inline-block;
            border: 1px solid #000;
            padding: 4px 10px;
            font-size: 11px;
            font-weight: bold;
        }

        .row {
            display: flex;
            justify-content: space-between;
            font-weight: bold;
            font-size: 11px;
            gap: 8px;
            margin-bottom: 2px;
        }

        .row span:first-child {
            flex-shrink: 0;
        }

        .row span:last-child {
            text-align: right;
            flex: 1;
            word-break: break-word;
        }

        .section-title {
            text-align: center;
            font-size: 12px;
            font-weight: bold;
            margin-bottom: 4px;
        }

        .item {
            margin-bottom: 6px;
            padding-bottom: 4px;
            border-bottom: 1px dotted #ccc;
            font-weight: bold;
        }

        .item:last-child {
            border-bottom: none;
        }

        .item-name {
            font-size: 12px;
            font-weight: bold;
            word-break: break-word;
        }

        .item-detail {
            font-size: 10px;
            color: #000;
            font-weight: bold;
            margin-top: 2px;
            word-break: break-word;
        }

        .item-price {
            display: flex;
            justify-content: space-between;
            font-weight: bold;
            font-size: 11px;
            gap: 8px;
            margin-top: 2px;
        }

        .item-price span:first-child {
            flex: 1;
        }

        .item-price span:last-child {
            text-align: right;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .totals {
            margin-top: 8px;
            font-weight: bold;
        }

        .total-row {
            display: flex;
            justify-content: space-between;
            font-size: 11px;
            gap: 8px;
            margin-bottom: 3px;
            font-weight: bold;
        }

        .grand-total {
            font-size: 14px;
            border-top: 1px solid #000;
            border-bottom: 1px solid #000;
            padding: 4px 0;
            margin-top: 4px;
        }

        .note-box {
            margin-top: 8px;
            padding: 6px;
            border: 1px dashed #000;
            font-size: 10px;
            font-weight: bold;
            line-height: 1.4;
        }

        .paid-box {
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            margin: 10px 0;
            padding: 6px;
            border: 2px solid #000;
        }

        .sign-area {
            margin-top: 14px;
            display: flex;
            justify-content: space-between;
            gap: 10px;
        }

        .sign-box {
            width: 31mm;
            text-align: center;
            font-weight: bold;
            font-size: 10px;
        }

        .sign-space {
            height: 34px;
        }

        .sign-line {
            border-top: 1px solid #000;
            padding-top: 4px;
        }

        .footer {
            text-align: center;
            margin-top: 12px;
            font-weight: bold;
            border-top: 1px dashed #000;
            padding-top: 6px;
        }

        .footer-text {
            font-size: 10px;
            font-weight: bold;
            word-break: break-word;
            line-height: 1.4;
        }

        .footer-time {
            font-size: 10px;
            font-weight: bold;
            color: #000;
            margin-top: 4px;
        }

        @media screen {
            body {
                margin: 20px auto;
                border: 1px solid #ccc;
                box-shadow: 0 0 10px rgba(0,0,0,0.1);
            }
        }
    </style>
</head>

<body onload="window.print()">
@php
    $baseSalary = (float) ($salary->base_salary ?? 0);
    $allowance = (float) ($salary->allowance ?? 0);
    $overtime = (float) ($salary->overtime ?? 0);
    $bonus = (float) ($salary->bonus ?? 0);
    $deduction = (float) ($salary->deduction ?? 0);

    $grossIncome = $baseSalary + $allowance + $overtime + $bonus;
    $takeHomePay = $grossIncome - $deduction;

    $shopName = $settings['company_name'] ?? 'POSGRAF';
    $shopAddress = $settings['company_address'] ?? '';
    $shopPhone = $settings['company_phone'] ?? '';
    $shopLogo = $settings['company_logo'] ?? ($shopLogo ?? null);
@endphp

<div class="slip-shell">
    <div class="slip-content">
        <div class="header">
            @if($shopLogo ?? false)
                <img src="{{ $shopLogo }}" alt="Logo Perusahaan">
            @endif

            <h1>{{ $shopName }}</h1>
            <div class="subtitle">SLIP GAJI</div>

            @if($shopAddress)
                <div class="address">{{ $shopAddress }}</div>
            @endif

            @if($shopPhone)
                <div class="address">Telp: {{ $shopPhone }}</div>
            @endif
        </div>

        <div class="divider"></div>

        <div class="center-box">
            <div class="slip-code">{{ $salary->employee->employee_id ?? 'EMPLOYEE' }}</div>
            <div class="period-text">Periode: {{ $salary->period_label }}</div>
            <div class="status-box">
                {{ $salary->status === 'paid' ? 'LUNAS / DIBAYAR' : 'DRAFT' }}
            </div>
        </div>

        <div class="divider"></div>

        <div class="row">
            <span>Nama</span>
            <span>{{ $salary->employee->name ?? '-' }}</span>
        </div>
        <div class="row">
            <span>Jabatan</span>
            <span>{{ $salary->employee->position ?? '-' }}</span>
        </div>
        <div class="row">
            <span>Tanggal</span>
            <span>
                {{ !empty($salary->paid_at) ? \Carbon\Carbon::parse($salary->paid_at)->format('d/m/Y H:i') : now()->format('d/m/Y H:i') }}
            </span>
        </div>

        <div class="divider-double"></div>

        <div class="section-title">RINCIAN PENDAPATAN</div>

        <div class="item">
            <div class="item-name">Gaji Pokok</div>
            <div class="item-price">
                <span>Komponen utama</span>
                <span>Rp {{ number_format($baseSalary, 0, ',', '.') }}</span>
            </div>
        </div>

        @if($allowance > 0)
            <div class="item">
                <div class="item-name">Tunjangan / Pendapatan Tambahan</div>
                <div class="item-detail">
                    Termasuk tunjangan jabatan, kehadiran, makan, transport, BPJS perusahaan, dan tunjangan lainnya
                </div>
                <div class="item-price">
                    <span>Total tunjangan</span>
                    <span>Rp {{ number_format($allowance, 0, ',', '.') }}</span>
                </div>
            </div>
        @endif

        @if($overtime > 0)
            <div class="item">
                <div class="item-name">Lembur</div>
                <div class="item-price">
                    <span>Tambahan lembur</span>
                    <span>Rp {{ number_format($overtime, 0, ',', '.') }}</span>
                </div>
            </div>
        @endif

        @if($bonus > 0)
            <div class="item">
                <div class="item-name">Bonus / Insentif</div>
                <div class="item-detail">
                    Termasuk bonus performa dan bonus lainnya
                </div>
                <div class="item-price">
                    <span>Total bonus</span>
                    <span>Rp {{ number_format($bonus, 0, ',', '.') }}</span>
                </div>
            </div>
        @endif

        <div class="divider"></div>

        <div class="section-title">RINCIAN POTONGAN</div>

        @if($deduction > 0)
            <div class="item">
                <div class="item-name">Potongan</div>
                <div class="item-detail">
                    Termasuk keterlambatan, absen, kasbon, dan potongan lainnya
                </div>
                <div class="item-price">
                    <span>Total potongan</span>
                    <span>Rp {{ number_format($deduction, 0, ',', '.') }}</span>
                </div>
            </div>
        @else
            <div class="item">
                <div class="item-name">Potongan</div>
                <div class="item-price">
                    <span>Tidak ada potongan</span>
                    <span>Rp 0</span>
                </div>
            </div>
        @endif

        <div class="divider"></div>

        <div class="totals">
            <div class="total-row">
                <span>Pendapatan Kotor</span>
                <span>Rp {{ number_format($grossIncome, 0, ',', '.') }}</span>
            </div>

            <div class="total-row">
                <span>Total Potongan</span>
                <span>Rp {{ number_format($deduction, 0, ',', '.') }}</span>
            </div>

            <div class="total-row grand-total">
                <span>GAJI DITERIMA</span>
                <span>Rp {{ number_format($takeHomePay, 0, ',', '.') }}</span>
            </div>
        </div>

        @if($salary->status === 'paid')
            <div class="paid-box">
                *** DIBAYAR ***
            </div>
        @endif

        @if($salary->status === 'paid' || !empty($salary->payment_notes))
            <div class="note-box">
                <strong>Pembayaran:</strong><br>
                Sumber:
                {{
                    ($salary->payment_source ?? null) === 'bank'
                        ? 'Kas Bank'
                        : (($salary->payment_source ?? null) === 'cash' ? 'Kas Tunai' : '-')
                }}<br>
                Metode:
                {{
                    ($salary->payment_method ?? null) === 'cash'
                        ? 'Cash'
                        : (($salary->payment_method ?? null) ? 'Transfer' : '-')
                }}
                @if(!empty($salary->payment_notes))
                    <br>Catatan: {{ $salary->payment_notes }}
                @endif
            </div>
        @endif

        @if(!empty($salary->notes))
            <div class="note-box">
                <strong>Catatan Payroll:</strong><br>
                {{ $salary->notes }}
            </div>
        @endif

        <div class="sign-area">
            <div class="sign-box">
                <div>Diterima,</div>
                <div class="sign-space"></div>
                <div class="sign-line">{{ $salary->employee->name ?? 'Karyawan' }}</div>
            </div>

            <div class="sign-box">
                <div>Mengetahui,</div>
                <div class="sign-space"></div>
                <div class="sign-line">HRD / Finance</div>
            </div>
        </div>

        <div class="footer">
            <div class="footer-text">
                Slip gaji ini diterbitkan secara elektronik
            </div>
            <div class="footer-text">
                dan sah tanpa tanda tangan basah
            </div>

            <div class="footer-time">
                {{ now()->format('d/m/Y H:i:s') }}
            </div>
        </div>
    </div>
</div>

</body>
</html>
