<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />

  <title>Gate Pass</title>

  <style>

    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family: Arial, sans-serif;
    }

    body{
      background:#f3f4f6;
      padding:30px;
      color:#111827;
    }

    .wrapper{
      width:800px;
      margin:auto;
      background:#fff;
      border:1px solid #d1d5db;
      border-radius:18px;
      padding:32px;
    }

    /* TOP */

    .top{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      margin-bottom:24px;
    }

    .left-title h2{
      font-size:34px;
      font-weight:700;
      letter-spacing:2px;
      color:#1f2937;
      text-align:center;
    }

    .left-title p{
      text-align:center;
      margin-top:6px;
      color:#6b7280;
      font-size:18px;
    }

    .meta{
      font-size:13px;
      color:#6b7280;
      line-height:1.8;
      text-align:right;
    }

    hr{
      border:none;
      border-top:2px dashed #d1d5db;
      margin:24px 0;
    }

    /* GRID */

    .grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
    }

    .card{
      background:#f8fafc;
      border:1px solid #e2e8f0;
      border-radius:14px;
      padding:16px;
    }

    .label{
      font-size:13px;
      color:#64748b;
      margin-bottom:6px;
    }

    .value{
      font-size:18px;
      font-weight:600;
      color:#1e293b;
    }

    /* STATUS */

    .status-wrap{
      text-align:center;
      margin-top:36px;
    }

    .status{
      display:inline-block;
      padding:12px 34px;
      border-radius:40px;
      font-weight:700;
      letter-spacing:1px;
      font-size:18px;
    }

    .active{
      background:#dcfce7;
      color:#16a34a;
    }

    .exited{
      background:#fee2e2;
      color:#dc2626;
    }

    .pending{
      background:#fef3c7;
      color:#d97706;
    }

    /* FOOTER */

    .footer{
      margin-top:40px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      border-top:1px solid #e5e7eb;
      padding-top:20px;
    }

    .footer-left{
      font-size:13px;
      color:#6b7280;
      line-height:1.8;
    }

    .footer-right{
      text-align:right;
    }

    .sign{
      font-size:28px;
      font-family:cursive;
      transform:rotate(-8deg);
      color:#111827;
    }

    .sign-label{
      font-size:13px;
      color:#374151;
      margin-top:4px;
      font-weight:600;
    }

  </style>
</head>

<body>

  <div class="wrapper">

    <!-- TOP -->

    <div class="top">

      <div style="width:100%;">

        <div class="left-title">
          <h2>VIVEK BIO-PRODUCTS LTD</h2>

          <p>GATE PASS COPY</p>
        </div>

      </div>

      <div class="meta">
        <div>{{generated_date}}</div>

        <div>{{generated_time}}</div>

        <!-- <div>
          Created By:
          <strong>{{created_by}}</strong>
        </div> -->
      </div>

    </div>

    <hr />

    <!-- DETAILS -->

    <div class="grid">

      <div class="card">
        <div class="label">Pass ID</div>

        <div class="value">
          {{pass_number}}
        </div>
      </div>

      <div class="card">
        <div class="label">Reference SO</div>

        <div class="value">
          {{sales_order_number}}
        </div>
      </div>

      <div class="card">
        <div class="label">Vehicle Number</div>

        <div class="value">
          {{vehicle_number}}
        </div>
      </div>

      <div class="card">
        <div class="label">Driver Name</div>

        <div class="value">
          {{driver_name}}
        </div>
      </div>

      <div class="card">
        <div class="label">Vehicle Type</div>

        <div class="value">
          {{vehicle_type}}
        </div>
      </div>

      <div class="card">
        <div class="label">Customer</div>

        <div class="value">
          {{customer_name}}
        </div>
      </div>

    </div>

    <!-- STATUS -->

    <div class="status-wrap">

      <div class="status {{status_class}}">
        {{pass_status}}
      </div>

    </div>

    <!-- FOOTER -->

    <div class="footer">

      <div class="footer-left">

        <div>
          Gate Status:
          <strong>{{gate_status}}</strong>
        </div>

        <div>
          Shipment No:
          <strong>{{shipment_number}}</strong>
        </div>

      </div>

      <div class="footer-right">

        <div class="sign">
          {{created_by}}
        </div>

        <div class="sign-label">
          Authorized Signatory
        </div>

      </div>

    </div>

  </div>

</body>
</html>