<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <style>
    @page { size: A4 portrait; margin: 5mm; }
    body { font-family: Arial, sans-serif; font-size: 8pt; margin: 0; padding: 0; color: #000; }

    .sheet-table { width: 100%; border-collapse: separate; border-spacing: 2mm; table-layout: fixed; }
    .label-cell { width: 25%; vertical-align: top; }
    .label { width: 100%; height: 70mm; border: 1px solid #000; padding: 2mm; box-sizing: border-box; position: relative; }

    /* Bagian Atas: 35mm */
    .box-barcode { 
        height: 35mm; 
        border-bottom: 1px solid #000; 
        text-align: center; 
        position: relative; /* Penting untuk penempatan absolute */
    }
    
    .nama-sistem {
        font-size: 7pt;
        line-height: 1.2;
        padding: 0 2mm;
        text-align: center; 
        word-wrap: break-word;
        max-height: 12mm; 
        overflow: hidden;
    }
    
    /* Memaksa Barcode ke posisi bawah absolut di dalam box-barcode */
    .barcode-container {
        position: absolute;
        bottom: 2mm; /* Jarak dari garis tengah */
        left: 0;
        right: 0;
    }
    
    .barcode-wrapper img { width: 35mm; height: 10mm; display: block; margin: 0 auto; }
    .kode-eksemplar { font-size: 7pt; font-weight: bold; margin-top: 1mm; }

    /* Area Info Bawah: 35mm */
    .box-info { height: 35mm; text-align: center; padding-top: 5mm; }
    .logo { width: 20px; height: 20px; margin: 0 auto 1mm auto; display: block; }
    .instansi { font-weight: bold; font-size: 7pt; line-height: 1; }
    .alamat { font-size: 5pt; text-decoration: underline; margin-bottom: 1mm; }
    .kode { font-weight: bold; font-size: 10pt; }
    
    .page-break { page-break-after: always; }
  </style>
  
</head>
<body>

  @php
    use Picqer\Barcode\BarcodeGeneratorPNG;
    $generator = new BarcodeGeneratorPNG();
  @endphp

  @foreach($items->chunk(12) as $pageItems)
    <table class="sheet-table {{ !$loop->last ? 'page-break' : '' }}">
      @foreach($pageItems->chunk(4) as $rowItems)
        <tr>
          @foreach($rowItems as $item)
            <td class="label-cell">
              <div class="label">
                <div class="box-barcode">
                  <div class="nama-sistem">{{ $item->title }}</div>
                  
                  {{-- Barcode di bawah karena position: absolute --}}
                  <div class="barcode-container">
                    <div class="barcode-wrapper">
                      @php
                        $barcodeImage = base64_encode($generator->getBarcode($item->kode_eksemplar, $generator::TYPE_CODE_128));
                      @endphp
                      <img src="data:image/png;base64,{{ $barcodeImage }}">
                    </div>
                    <div class="kode-eksemplar">{{ $item->kode_eksemplar }}</div>
                  </div>
                </div>

                <div class="box-info">
                  <img src="{{ public_path('images/bakorwil.png') }}" class="logo">
                  <div class="instansi">BAKORWIL III MALANG</div>
                  <div class="alamat">Jl. Simpang Ijen 2 65119</div>
                  <div class="kode">{{ $item->classification }}</div>
                </div>
              </div>
            </td>
          @endforeach
          
          @for($i = count($rowItems); $i < 4; $i++)
            <td class="label-cell"></td>
          @endfor
        </tr>
      @endforeach
    </table>
  @endforeach
</body>
</html>

