@extends('layout')

@section('title')
  <title>Checkpoint QR Stickers</title>
@endsection

@section('content')
<section class="container py-4">
  <div class="d-flex align-items-center justify-content-between mb-3">
    <h1 class="h4 mb-0">Checkpoint QR Stickers</h1>
    <div class="d-print-none d-flex gap-2">
      <button class="btn btn-sm btn-primary" onclick="window.print()">Print</button>
      <a href="{{ url('/home') }}" class="btn btn-sm btn-outline-secondary">Back to Home</a>
    </div>
  </div>

  <p class="text-muted d-print-none">
    Each QR sets the visitor’s current location and auto-plays guidance (<code>?s=1</code>).
    Stick on/near the physical checkpoint.
  </p>

  {{-- Grid of stickers --}}
  <div class="qr-grid">
    @foreach($entries as $e)
      <div class="qr-card">
        <div class="qr-svg">{!! $e['qr_svg'] !!}</div>
        <div class="qr-meta">
          <div class="qr-title">{{ $e['name'] }}</div>
          <div class="qr-sub">{{ $e['floor'] }}</div>
          {{-- <div class="qr-url">{{ $e['url'] }}</div>
          <div class="qr-slug">Slug: {{ $e['slug'] }}</div> --}}
        </div>
      </div>
    @endforeach
  </div>
</section>

<style>
  /* Print-friendly grid */
  .qr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70mm, 1fr));
    gap: 12mm;
  }
  .qr-card {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 6mm;
    page-break-inside: avoid;
    background: #fff;
  }
  .qr-svg svg {
    width: 58mm; /* physical size for common label stock; adjust as needed */
    height: 58mm;
    display: block;
    margin: 0 auto 4mm auto;
  }
  .qr-meta { text-align: center; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
  .qr-title { font-weight: 700; font-size: 14pt; }
  .qr-sub   { color:#6c757d; margin-top: 1mm; font-size: 10pt; }
  .qr-url   { font-size: 8pt; color:#495057; margin-top: 2mm; word-break: break-all; }
  .qr-slug  { font-size: 8pt; color:#6c757d; margin-top: 1mm; }

  @media print {
    body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .d-print-none { display: none !important; }
    .qr-grid { gap: 8mm; }
    .qr-card { border: 0.2mm solid #000; }
  }
</style>
@endsection