<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $title }}</title>
    <style>
        body {
            font-family: "Arial", sans-serif;
            margin: 0;
            padding: 20px;
            font-size: 12px;
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }
        @page {
            size: A4;
            margin: 1mm;
        }
        .header-container {
            position: relative;
            width: 100%;
        }
        .header-logo {
            max-width: 80%;
            height: auto;
        }
        .title {
            text-align: center;
            font-weight: bold;
        }
        .title-last {
            margin-bottom: 15px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            page-break-inside: avoid;
        }
        table {
            border: 1px solid black;
        }
        table, th, td {
            border: none;
        }
        td {
            border: 1px solid black;
            padding: 5px;
            text-align: center;
            vertical-align: middle;
        }
        thead th {
            border: none !important;
            padding: 3px;
            text-align: center;
            vertical-align: middle;
        }
        thead tr:first-child th {
            background-color: #c4c4c4;
            color: white;
        }
        thead tr:last-child th {
            background-color: #ebebeb;
            color: black;
        }
        tbody tr:nth-child(odd) {
            background-color: #ffffff;
        }
        tbody tr:nth-child(even) {
            background-color: #ebebeb;
        }
        .laboran-container {
            display: table;
            border: none;
            margin-bottom: 15px;
        }
        .laboran-row {
            display: table-row;
            font-weight: bold;
            background-color: transparent !important;
        }
        .laboran-cell {
            display: table-cell;
            padding: 0;
            border: none !important;
        }
        .laboran-label {
            width: 100px;
            white-space: nowrap;
        }
        hr {
            border: 0.5px solid black;
            margin: 5px 0 10px 0;
        }
        .no { width: 3%; }
        .tanggal { width: 16%; }
        .waktu { width: 10%; }
        .kegiatan { width: 38%; }
        .jumlah { width: 8%; }
        .tempat { width: 20%; }
    </style>
</head>
<body>
    <div class="header-container">
        <img class="header-logo" src="{{ public_path('images/top-provinsi.jpg') }}">
    </div>

    <hr>

    <div class="title">{!! $title !!}</div>
    <div class="title title-last">{{ $subtitle }}</div>

    <div class="laboran-container">
      <div class="laboran-row">
          <div class="laboran-cell laboran-label">LABORAN</div>
          <div class="laboran-cell">: ABDUL MU'ID</div>
      </div>
      <div class="laboran-row">
          <div class="laboran-cell laboran-label">UNIT KERJA</div>
          <div class="laboran-cell">: SMKN 1 BONDOWOSO</div>
      </div>
  </div>

    <table>
        <thead>
            <tr>
                <th class="no" rowspan="2">NO</th>
                <th class="tanggal" rowspan="2">TANGGAL</th>
                <th class="waktu" colspan="2">WAKTU</th>
                <th class="kegiatan" rowspan="2">KEGIATAN</th>
                <th class="jumlah" rowspan="2">JUMLAH</th>
                <th class="tempat" rowspan="2">TEMPAT</th>
            </tr>
            <tr>
                <th>MULAI</th>
                <th>SELESAI</th>
            </tr>
        </thead>
        <tbody>
            @foreach($jurnals as $index => $jurnal)
            <tr>
                <td>{{ $index + 1 }}</td>
                <td>{{ $jurnal->tanggal->translatedFormat('l, d F Y') }}</td>
                <td>{{ $jurnal->waktu_mulai->format('H:i') }}</td>
                <td>{{ $jurnal->waktu_selesai->format('H:i') }}</td>
                <td>{{ $jurnal->kegiatan ?? '-' }}</td>
                <td>{{ $jurnal->jumlah }}</td>
                <td>{{ $jurnal->tempat }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>
</body>
</html>