<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Laporan Audit 5S</title>
    <style>
        body { font-family: "Times New Roman", Times, serif; font-size: 10px; margin: 15px; }
        .page { page-break-after: always; }
        .header { text-align: center; margin-bottom: 10px; }
        .header h2 { margin: 0; font-size: 14px; font-weight: bold; }
        .header p { margin: 0; font-size: 11px; }

        table { width: 100%; border-collapse: collapse; margin-bottom: 8px; table-layout: fixed; }
        td, th { border: 1px solid #000; padding: 3px; font-size: 9px; vertical-align: top; word-wrap: break-word; }
        th { text-align: center; background: #eee; }

        /* foto */
        .foto-cell {
            text-align: center;
            vertical-align: middle;
        }
        .foto {
            max-width: 90%;       /* supaya tidak mepet */
            max-height: 90px;     /* pas sampai kolom Status */
            object-fit: contain;  /* proporsi tetap */
        }

        /* status warna */
        .status-open { color: red; font-weight: bold; }
        .status-close { color: green; font-weight: bold; }

        /* A4 */
        @page { size: A4 portrait; margin: 15mm; }
        @media print { .page { page-break-after: always; } }
    </style>
</head>
<body>

<div class="header">
    <h2>LAPORAN AUDIT 5S</h2>
    <p>Periode: {{ $periodeAwal }} s/d {{ $periodeAkhir }}</p>
</div>

@php
    $chunks = $audits->chunk(5); // maksimal 5 audit per halaman
    $no = 1;
@endphp

@foreach($chunks as $group)
<div class="page">
    @foreach($group as $audit)
        <table>
            <tr>
                <th style="width:20%;">No {{ $no++ }}</th>
                <th style="width:40%;">Sebelum</th>
                <th style="width:40%;">Sesudah</th>
            </tr>
            <tr>
                <td><b>Divisi</b><br>{{ optional($audit->bagian)->nama_bagian ?? '-' }}</td>
                <td rowspan="4" class="foto-cell">
                    @if($audit->foto_sebelum)
                        <img src="{{ public_path('storage/'.$audit->foto_sebelum) }}" class="foto">
                    @endif
                </td>
                <td rowspan="4" class="foto-cell">
                    @if($audit->foto_sesudah)
                        <img src="{{ public_path('storage/'.$audit->foto_sesudah) }}" class="foto">
                    @endif
                </td>
            </tr>
            <tr><td><b>Tema</b><br>{{ optional($audit->tema)->nama ?? '-' }}</td></tr>
            <tr><td><b>Kategori</b><br>{{ $audit->kategori ?? '-' }}</td></tr>
            <tr>
                <td><b>Status</b><br>
                    @if(strtolower($audit->status) == 'open')
                        <span class="status-open">Open</span>
                    @elseif(strtolower($audit->status) == 'close')
                        <span class="status-close">Close</span>
                    @else
                        {{ ucfirst($audit->status) ?? '-' }}
                    @endif
                </td>
            </tr>
            <tr>
                <td><b>Area Temuan</b><br>{{ $audit->lokasi ?? '-' }}</td>
                <td>{{ $audit->keterangan ?? '-' }}</td>
                <td>{{ $audit->keterangan_sesudah ?? '-' }}</td>
            </tr>
        </table>
    @endforeach
</div>
@endforeach

</body>
</html>
