<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Payslip - {{ $item->employee->name }}</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: DejaVu Sans, sans-serif; font-size: 12px; color: #1a1a2e; background: #fff; }
        .header { background: #1a1a2e; color: #fff; padding: 24px 32px; display: flex; justify-content: space-between; align-items: center; }
        .header h1 { font-size: 22px; font-weight: bold; }
        .header .meta { text-align: right; font-size: 11px; opacity: 0.8; }
        .employee-info { padding: 20px 32px; background: #f8f9fa; border-bottom: 2px solid #e5e7eb; }
        .employee-info table { width: 100%; }
        .employee-info td { padding: 4px 0; font-size: 12px; }
        .employee-info td:first-child { font-weight: bold; width: 160px; }
        .section { padding: 20px 32px; }
        .section h3 { font-size: 13px; font-weight: bold; color: #374151; border-bottom: 1px solid #e5e7eb; padding-bottom: 6px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
        table.breakdown { width: 100%; border-collapse: collapse; }
        table.breakdown th { background: #f3f4f6; padding: 8px 12px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; }
        table.breakdown td { padding: 8px 12px; border-bottom: 1px solid #f3f4f6; font-size: 12px; }
        table.breakdown .amount { text-align: right; }
        .summary-table { width: 340px; margin-left: auto; margin-top: 24px; border: 1px solid #e5e7eb; border-radius: 6px; }
        .summary-table td { padding: 10px 16px; font-size: 13px; }
        .summary-table .label { color: #6b7280; }
        .summary-table .net-row { background: #1a1a2e; color: #fff; font-weight: bold; font-size: 14px; }
        .footer { text-align: center; padding: 20px 32px; border-top: 1px solid #e5e7eb; color: #9ca3af; font-size: 10px; margin-top: 16px; }
    </style>
</head>
<body>
    <div class="header">
        <div>
            <h1>{{ $companyName }}</h1>
            <div style="font-size:11px; opacity:0.7;">Payslip</div>
        </div>
        <div class="meta">
            <div>{{ $item->payroll->month->format('F Y') }}</div>
            <div>Generated: {{ now()->format('d M Y') }}</div>
        </div>
    </div>

    <div class="employee-info">
        <table>
            <tr>
                <td>Employee Name</td>
                <td>{{ $item->employee->name }}</td>
                <td style="width:120px; font-weight:bold;">Designation</td>
                <td>{{ $item->employee->employeeProfile?->job_title ?? '-' }}</td>
            </tr>
            <tr>
                <td>Department</td>
                <td>{{ $item->employee->employeeProfile?->departmentRel?->name ?? '-' }}</td>
                <td style="font-weight:bold;">Payroll Month</td>
                <td>{{ $item->payroll->month->format('F Y') }}</td>
            </tr>
        </table>
    </div>

    <div class="section">
        <div style="display:flex; gap:24px;">
            <div style="flex:1;">
                <h3>Earnings</h3>
                <table class="breakdown">
                    <thead>
                        <tr><th>Component</th><th class="amount">Amount</th></tr>
                    </thead>
                    <tbody>
                        @foreach($item->salary_breakdown['earnings'] ?? [] as $earning)
                        <tr>
                            <td>{{ $earning['name'] }} @if($earning['type'] === 'percentage')({{ $earning['value'] }}%)@endif</td>
                            <td class="amount">{{ number_format($earning['amount'], 2) }}</td>
                        </tr>
                        @endforeach
                        <tr style="font-weight:bold; background:#f9fafb;">
                            <td>Total Earnings</td>
                            <td class="amount">{{ number_format($item->total_earnings, 2) }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div style="flex:1;">
                <h3>Deductions</h3>
                <table class="breakdown">
                    <thead>
                        <tr><th>Component</th><th class="amount">Amount</th></tr>
                    </thead>
                    <tbody>
                        @foreach($item->salary_breakdown['deductions'] ?? [] as $deduction)
                        <tr>
                            <td>{{ $deduction['name'] }} @if($deduction['type'] === 'percentage')({{ $deduction['value'] }}%)@endif</td>
                            <td class="amount">{{ number_format($deduction['amount'], 2) }}</td>
                        </tr>
                        @endforeach
                        <tr style="font-weight:bold; background:#f9fafb;">
                            <td>Total Deductions</td>
                            <td class="amount">{{ number_format($item->total_deductions, 2) }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <table class="summary-table">
            <tr>
                <td class="label">Gross Salary</td>
                <td style="text-align:right;">{{ number_format($item->gross_salary, 2) }}</td>
            </tr>
            <tr>
                <td class="label">Total Earnings</td>
                <td style="text-align:right;">{{ number_format($item->total_earnings, 2) }}</td>
            </tr>
            <tr>
                <td class="label">Total Deductions</td>
                <td style="text-align:right;">- {{ number_format($item->total_deductions, 2) }}</td>
            </tr>
            <tr class="net-row">
                <td>Net Salary</td>
                <td style="text-align:right;">{{ number_format($item->net_salary, 2) }}</td>
            </tr>
        </table>
    </div>

    <div class="footer">
        This is a system-generated payslip. {{ $companyName }} &mdash; Confidential
    </div>
</body>
</html>
