<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Basic Salary Report</title>
    <style>
        @page {
            margin: 130px 30px 70px 30px;
        }
        body {
            font-family: DejaVu Sans, sans-serif;
            font-size: 7px;
            margin: 0;
            padding: 0;
        }
        .header {
            position: fixed;
            top: -110px;
            left: 0;
            right: 0;
            height: 100px;
        }
        .header-left  { float: left;  width: 70%; }
        .header-right { float: right; width: 30%; text-align: right; }
        .header-right img { max-height: 60px; }
        .report-name  { font-size: 13px; font-weight: bold; color: #2c3e50; }
        .company-name { font-size: 10px; font-weight: bold; }
        .small-text   { font-size: 8px; color: #555; margin-top: 2px; }
        .footer {
            position: fixed;
            bottom: -50px;
            left: 0;
            right: 0;
            height: 40px;
            font-size: 8px;
            border-top: 1px solid #ccc;
            padding-top: 3px;
        }
        .footer-left   { float: left;  width: 33%; }
        .footer-center { float: left;  width: 34%; text-align: center; }
        .footer-right  { float: right; width: 33%; text-align: right; }
        .page-number:before { content: "Page " counter(page) " / " counter(pages); }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 2px 3px;
            font-size: 6.5px;
            white-space: nowrap;
            overflow: hidden;
        }
        th {
            background-color: #2c3e50;
            color: #ffffff;
            font-weight: bold;
            text-align: left;
        }
        .tc { text-align: center; }
        .tr { text-align: right; }
    </style>
</head>
<body>

<div class="header">
    <div class="header-left">
        <div class="report-name">Basic Salary Report</div>
        <div class="company-name">{{ $company->legal_name ?? $company->display_name ?? '' }}</div>
        <div class="small-text">Branch: {{ $branch->name ?? 'All Branches' }}</div>
        <div class="small-text">Printed: {{ now()->format('d M Y, H:i') }}</div>
    </div>
    <div class="header-right">
        @if(!empty($company->logo))
            <img src="{{ public_path($company->logo) }}">
        @endif
    </div>
</div>

<div class="footer">
    <div class="footer-left">LaraOffice</div>
    <div class="footer-center"><span class="page-number"></span></div>
    <div class="footer-right">{{ now()->format('Y-m-d H:i') }}</div>
</div>

@php $totalSalary = 0; @endphp
<table>
    <thead>
    <tr>
        <th style="width:3%">#</th>
        <th style="width:9%">Emp Code</th>
        <th style="width:7%">EPF</th>
        <th style="width:21%">Name</th>
        <th style="width:14%">Department</th>
        <th style="width:13%">Designation</th>
        <th style="width:10%">Group</th>
        <th style="width:8%">Team</th>
        <th style="width:6%">Grade</th>
        <th style="width:9%" class="tr">Salary</th>
    </tr>
    </thead>
    <tbody>
        @forelse($employees as $emp)
        @php $raw = (float) preg_replace('/[^0-9.]/', '', $emp->formatted_basic_salary ?? '0'); $totalSalary += $raw; @endphp
        <tr>
            <td class="tc">{{ $loop->iteration }}</td>
            <td>{{ $emp->employee_code }}</td>
            <td>{{ $emp->epf_no }}</td>
            <td>{{ trim($emp->first_name . ' ' . ($emp->middle_name ?? '') . ' ' . $emp->last_name) }}</td>
            <td>{{ optional($emp->department)->name }}</td>
            <td>{{ optional($emp->designation)->name }}</td>
            <td>{{ optional($emp->payrollGroup)->name }}</td>
            <td>{{ optional($emp->team)->name }}</td>
            <td>{{ optional($emp->grade)->name }}</td>
            <td class="tr">{{ $emp->formatted_basic_salary }}</td>
        </tr>
        @empty
        <tr>
            <td colspan="10" class="tc" style="padding:10px; color:#888; font-style:italic;">No records found.</td>
        </tr>
        @endforelse
        @if(count($employees) > 0)
        <tr>
            <td colspan="9" class="tr" style="background:#2c3e50; color:#fff; font-weight:bold; font-size:7px; padding:3px;">
                Total Employees: {{ count($employees) }} &nbsp;&nbsp; TOTAL SALARY
            </td>
            <td class="tr" style="background:#2c3e50; color:#fff; font-weight:bold; font-size:7px; padding:3px;">
                {{ number_format($totalSalary, 2) }}
            </td>
        </tr>
        @endif
    </tbody>
</table>
</body>
</html>
