<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />

    <title>Weighment Slip</title>
    <style>

/* ====================================
   GLOBAL
==================================== */

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

body {
    background: #f2f2f2;
    padding: 20px;
    color: #111;
}

.slip {
    width: 1000px;
    margin: auto;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}

/* ====================================
   HEADER
==================================== */

.header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #d8d8d8;
}

.logo {
    width: 100px;
    object-fit: contain;
}

.company {
    flex: 1;
    text-align: center;
    margin-right: 70px;
}

.company h1 {
     font-size: 20px;
        font-weight: 700;
        letter-spacing: 0.2px;
        margin-bottom: 4px;
        color: #111827;
}

.company h2 {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    line-height: 20px;
}

.company h3 {
    font-size: 12px;
    font-weight: 500;
    color: #444;
    line-height: 18px;
}

/* ====================================
   DETAILS SECTION
==================================== */

.details {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 10px;
}

.column {
    width: 50%;
    border: 1px solid #cfcfcf;
    padding: 12px 14px;
    vertical-align: top;
}

.row {
    display: flex;
    margin-bottom: 8px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 18px;
}

.label {
    width: 170px;
    font-weight: 700;
    color: #111;
}

.colon {
    width: 15px;
    text-align: center;
    color: #666;
}

.value {
    flex: 1;
    color: #333;
    font-weight: 500;
}

/* ====================================
   BOTTOM SECTION
==================================== */

.bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    gap: 20px;
}

.weight-section,
.date-section {
    width: 50%;
    border: 1px solid #cfcfcf;
    padding: 12px 14px;
}

/* ====================================
   WEIGHT ROWS
==================================== */

.weight-row,
.weight-row1 {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e5e5e5;
    font-size: 14px;
}

.weight-row:last-child,
.weight-row1:last-child {
    border-bottom: none;
}

.weight-label {
    width: 170px;
    font-weight: 700;
    color: #111;
}

.weight-value {
    width: 120px;
    text-align: right;
    font-weight: 700;
    color: #111;
}

.kg {
    margin-left: 8px;
    font-weight: 700;
    color: #111;
}

/* ====================================
   DATE ROWS
==================================== */

.date-row,
.date-row1 {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e5e5e5;
    font-size: 14px;
}

.date-row:last-child,
.date-row1:last-child {
    border-bottom: none;
}

.date-label {
    width: 140px;
    font-weight: 700;
    color: #111;
}

.date-colon {
    width: 15px;
    text-align: center;
    color: #666;
}

.date-value {
    flex: 1;
    color: #333;
    font-weight: 500;
}

/* ====================================
   SIGNATURE
==================================== */

.signature {
    margin-top: 30px;
    text-align: right;
    padding-right: 30px;
}

.signature-name {
    font-size: 24px;
    font-family: cursive;
    transform: rotate(-8deg);
    display: inline-block;
    color: #111;
}

.weighed {
    margin-top: 5px;
    font-size: 13px;
    font-weight: 700;
    color: #444;
}

/* ====================================
   FOOTER
==================================== */

.footer-note {
    margin-top: 18px;
    text-align: center;
    font-size: 12px;
    color: #666;
    border-top: 1px solid #dcdcdc;
    padding-top: 8px;
}

.company h1 {
    font-size: 30px;
    margin-bottom: 4px;
    font-weight: 700;
    color: #111;
}

.company h2 {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    line-height: 22px;
    margin-bottom: 2px;
}

.company h3 {
    font-size: 14px;
    font-weight: 500;
    color: #444;
    line-height: 20px;
}

.slip-title {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #111;
}

/* ====================================
   PRINT
==================================== */

@media print {

    body {
        background: #fff;
        padding: 0;
    }

    .slip {
        border: none;
    }
}

</style>

  </head>

<body>

  <div class="slip">

    <!-- HEADER -->

    <div class="header">

      <img src="{{logo_url}}" class="logo" />

      <!-- <div class="company">

        <h1>{{company_name}}</h1>

        <h2>{{plant_name}}</h2>

        <h3>Dispatch Weighment Slip</h3>

      </div> -->
      <div class="company">

  <h1>{{company_name}}</h1>

  <h4 class="slip-title">
     Weighment Slip
  </h4>

</div>

    </div>

    <!-- DETAILS -->

    <div class="details">

      <!-- LEFT -->

      <div class="column">

        <div class="row">
          <div class="label">Ticket No</div>
          <div class="colon">:</div>
          <div class="value">{{ticket_no}}</div>
        </div>

        <div class="row">
          <div class="label">Shipment No</div>
          <div class="colon">:</div>
          <div class="value">{{shipment_no}}</div>
        </div>

        <div class="row">
          <div class="label">Sales Order No</div>
          <div class="colon">:</div>
          <div class="value">{{sales_order_no}}</div>
        </div>

        <div class="row">
          <div class="label">Customer Name</div>
          <div class="colon">:</div>
          <div class="value">{{customer_name}}</div>
        </div>

        <div class="row">
          <div class="label">Product Name</div>
          <div class="colon">:</div>
          <div class="value">{{product_name}}</div>
        </div>

        <div class="row">
          <div class="label">Shipping Address</div>
          <div class="colon">:</div>
          <div class="value">{{shipping_address}}</div>
        </div>

        <div class="row">
          <div class="label">Movement Type</div>
          <div class="colon">:</div>
          <div class="value">{{movement_type}}</div>
        </div>

        <div class="row">
          <div class="label">Remarks</div>
          <div class="colon">:</div>
          <div class="value">{{remarks}}</div>
        </div>

      </div>

      <!-- RIGHT -->

      <div class="column">

        <div class="row">
          <div class="label">Vehicle No</div>
          <div class="colon">:</div>
          <div class="value">{{vehicle_no}}</div>
        </div>

        <div class="row">
          <div class="label">Vehicle Type</div>
          <div class="colon">:</div>
          <div class="value">{{vehicle_type}}</div>
        </div>

        <div class="row">
          <div class="label">Vehicle Capacity</div>
          <div class="colon">:</div>
          <div class="value">{{vehicle_capacity}}</div>
        </div>

        <div class="row">
          <div class="label">Driver Name</div>
          <div class="colon">:</div>
          <div class="value">{{driver_name}}</div>
        </div>

        <div class="row">
          <div class="label">Driver Contact</div>
          <div class="colon">:</div>
          <div class="value">{{driver_contact}}</div>
        </div>

        <div class="row">
          <div class="label">LR Number</div>
          <div class="colon">:</div>
          <div class="value">{{lr_number}}</div>
        </div>

        <div class="row">
          <div class="label">Seal Number</div>
          <div class="colon">:</div>
          <div class="value">{{seal_number}}</div>
        </div>

        <div class="row">
          <div class="label">Transport Agency</div>
          <div class="colon">:</div>
          <div class="value">{{transport_agency}}</div>
        </div>

      </div>

    </div>

    <!-- BOTTOM -->

    <div class="bottom">

      <!-- WEIGHT -->

      <div class="weight-section">

        <div class="weight-row">

          <div class="weight-label">
            Gross Weight
          </div>

          <div class="weight-colon">:</div>

          <div class="weight-value">
            {{gross_weight}}
          </div>

          <div class="kg">KG</div>

        </div>

        <div class="weight-row1">

          <div class="weight-label">
            Tare Weight
          </div>

          <div class="weight-colon">:</div>

          <div class="weight-value">
            {{tare_weight}}
          </div>

          <div class="kg">KG</div>

        </div>

        <div class="weight-row1">

          <div class="weight-label">
            Net Weight
          </div>

          <div class="weight-colon">:</div>

          <div class="weight-value">
            {{net_weight}}
          </div>

          <div class="kg">KG</div>

        </div>

      </div>

      <!-- DATE -->

      <div class="date-section">

        <div class="date-row">

          <div class="date-label">
            In Date Time
          </div>

          <div class="date-colon">:</div>

          <div class="date-value">
            {{in_datetime}}
          </div>

        </div>

        <div class="date-row1">

          <div class="date-label">
            Out Date Time
          </div>

          <div class="date-colon">:</div>

          <div class="date-value">
            {{out_datetime}}
          </div>

        </div>

        <div class="date-row1">

          <div class="date-label">
            Dispatch Qty
          </div>

          <div class="date-colon">:</div>

          <div class="date-value">
            {{dispatch_qty}}
          </div>

        </div>

        <div class="signature">

          <!-- <div class="signature-name">
            {{weighed_by}}
          </div> -->

          <div class="weighed">
            Weighed By
          </div>

        </div>

      </div>

    </div>

  </div>

</body>
</html>
