<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Grenviro QR Flyer</title>
  <style>
      @page {
            margin: 0px;
        }
      body {
      font-family: Arial, sans-serif;
      background-image: url('data:image/png;base64,{{ base64_encode(file_get_contents(public_path("/storage/pdf/bg.png"))) }}');
      margin: 0px;
            background-size: cover;
            background-repeat: no-repeat;
      text-align: center;
      color: #1A237E;

    }
    .container {
      max-width: 600px;
      padding: 20px;
      text-align: center
    }

    h1 {
      margin-top: 230px;
      margin-left: 50px;
      color: #0a3d62;
      font-size: 35px;

    }
    .customer-id {
      color: #00C851;
      font-size: 30px;
      margin-left: 50px;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .qr {
          width: 280px;
          height: 280px;
          margin: 40px 0 0 193px; /*atas, bawah, kanan, kiri*/
          display: flex;
          align-items: center;
          justify-content: center;
      }
      .qr img {
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
      }
   
  </style>
</head>
<body>
  <div class="container">
    {{-- <img src="{{ asset('storage/qrcode/qr.png') }}" alt="Grenviro Logo" class="logo"> --}}
    <h1>{{$loads->name}}</h1>
    <div class="customer-id">{{$loads->qrcode}}</div>
    <div class="qr">
      <img src="data:image/png;base64,{{ base64_encode(file_get_contents(public_path("/storage/qrcode/qr.png"))) }}" alt="QR Code">
  </div>

  </div>
</body>
</html>