<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laporan Izin</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            font-size: 14px;
        }
        h1, h3 {
            text-align: center;
            margin-top: 20px;
        }
        .report-container {
            padding: 20px;
        }
        .table {
            width: 100%;
            margin-bottom: 1rem;
            background-color: #fff;
            word-break: break-word;
        }
        .table th, .table td {
            vertical-align: top;
            padding: 8px;
        }
        .table thead th {
            background-color: #f2f2f2;
        }
        .table td, .table th {
            border: 1px solid #dee2e6;
        }
        @media print {
            body {
                font-size: 12px;
            }
            .table-responsive {
                overflow: visible;
            }
        }
    </style>
</head>
<body>

<div class="report-container">
    <h1>Laporan Izin Karyawan</h1>
    <h3>Periode: {{ $start_date }} s/d {{ $end_date }}</h3>

    <div class="table-responsive">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th style="width: 30px;">No</th>
                    <th style="min-width: 100px;">Tanggal Pengajuan</th>
                    <th style="min-width: 150px;">Nama Karyawan</th>
                    <th style="min-width: 100px;">Kategori</th>
                    <th style="min-width: 100px;">Tanggal Mulai</th>
                    <th style="min-width: 100px;">Tanggal Akhir</th>
                    <th style="min-width: 60px;">Durasi</th>
                    <th style="min-width: 80px;">Status</th>
                    <th style="min-width: 150px;">Approver</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($permissions as $index => $permission)
                    <tr>
                        <td>{{ $index + 1 }}</td>
                        <td>{{ \Carbon\Carbon::parse($permission->created_at)->format('d-m-Y') }}</td>
                        <td>{{ $permission->user->profile->name ?? $permission->user->email }}</td>
                        <td>{{ ucfirst($permission->category) }}</td>
                        <td>{{ \Carbon\Carbon::parse($permission->start_date)->format('d-m-Y') }}</td>
                        <td>{{ \Carbon\Carbon::parse($permission->end_date)->format('d-m-Y') }}</td>
                        <td>{{ $permission->duration }} hari</td>
                        <td>{{ ucfirst($permission->status) }}</td>
                        <td>{{ $permission->approver->profile->name ?? '-' }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

</body>
</html>
