<!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>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Inter", sans-serif;
      }

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

      .slip {
        width: 900px;
        margin: auto;
        background: #fff;
        padding: 18px 22px;
        border: 1px solid #dcdcdc;
        color: #111827;
      }

      /* HEADER */

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

      .logo {
        width: 100px;
        height: 50px;
        object-fit: contain;
        opacity: 0.8;
      }

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

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

      .company h2 {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 5px;
        color: #333;
      }

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

      /* DETAILS */

      .details {
        display: flex;
        justify-content: space-between;
        gap: 40px;
      }

      .column {
        width: 50%;
        padding-bottom: 10px;
        border-bottom: 1px solid #e5e7eb;
      }

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

      .label {
        width: 170px;
        font-weight: 600;
        color: #374151;
      }

      .colon {
        width: 15px;
        text-align: center;
        color: #6b7280;
        font-weight: 500;
      }

      .value {
        flex: 1;
        font-weight: 500;
        color: #111827;
      }
      /* WEIGHT SECTION */

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

      .weight-section {
        width: 50%;
      }

      .weight-row {
        display: flex;
        align-items: center;
        margin-bottom: 18px;
        font-size: 14px;
      }

      .weight-label {
        width: 170px;
        font-weight: 600;
        color: #374151;
      }

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

      .kg {
        margin-left: 12px;
        font-weight: 600;
        color: #111827;
      }

      .date-section {
        width: 50%;
      }

      .date-row {
        display: flex;
        margin-bottom: 18px;
        font-size: 13px;
      }

      .date-label {
        width: 120px;
        font-weight: 500;
        color: #374151;
      }

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

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

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

      .signature-name {
        font-size: 28px;
        font-family: cursive;
        transform: rotate(-10deg);
        display: inline-block;
      }

      .weighed {
        font-size: 13px;
        font-weight: 600;
        color: #374151;
      }

      .weight-row1 {
        display: flex;
        align-items: center;
        margin-bottom: 14px;
        padding-bottom: 10px;
        border-bottom: 1px solid #e5e7eb;
        font-size: 14px;
      }

      .date-row1 {
        display: flex;
        align-items: center;
        margin-bottom: 14px;
        padding-bottom: 10px;
        border-bottom: 1px solid #e5e7eb;
        font-size: 13px;
      }

      @media print {
        body {
          background: #fff;
          padding: 0;
        }

        .slip {
          border: none;
        }
      }
    </style>
  </head>

  <body>
    <div class="slip">
      <!-- HEADER -->

      <div class="header">
        <!-- <img src="../assets/images/logo.png" class="logo" /> -->
        <img src="{{logo_url}}" class="logo" />


        <div class="company">
          <h1>VIVEK BIO PRODUCTS PVT LTD</h1>

          <h2>LINGAMPALLY</h2>

          <h3>Weighment Slip</h3>
        </div>
      </div>

      <!-- DETAILS -->

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

        <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">Product Name</div>
            <div class="colon">:</div>
            <div class="value">INDIAN COAL</div>
          </div>

          <div class="row">
            <div class="label">Supplier Name</div>
            <div class="colon">:</div>
            <div class="value">SRI GAYATRI ENTERPRISES</div>
          </div>

          <div class="row">
            <div class="label">Transporter Name</div>
            <div class="colon">:</div>
            <div class="value">SRI GAYATRI ENTERPRISES</div>
          </div>

          <div class="row">
            <div class="label">Driver Name</div>
            <div class="colon">:</div>
            <div class="value">SRI GAYATRI ENTERPRISES</div>
          </div>

          <div class="row">
            <div class="label">Destination Name</div>
            <div class="colon">:</div>
            <div class="value">coal shed</div>
          </div>

          <div class="row">
            <div class="label">Gate Pass No</div>
            <div class="colon">:</div>
            <div class="value"></div>
          </div>

          <div class="row">
            <div class="label">Gate Pass Date</div>
            <div class="colon">:</div>
            <div class="value">03/05/2026</div>
          </div>

          <div class="row">
            <div class="label">Remarks</div>
            <div class="colon">:</div>
            <div class="value">GIRI 9640477744</div>
          </div>
        </div>

     

        <div class="column">
          <div class="row">
            <div class="label">Truck No</div>
            <div class="colon">:</div>
            <div class="value">TG05T9756</div>
          </div>

          <div class="row">
            <div class="label">LR No</div>
            <div class="colon">:</div>
            <div class="value"></div>
          </div>

          <div class="row">
            <div class="label">LR Date</div>
            <div class="colon">:</div>
            <div class="value">04/05/2026</div>
          </div>

          <div class="row">
            <div class="label">Transport Order No</div>
            <div class="colon">:</div>
            <div class="value"></div>
          </div>

          <div class="row">
            <div class="label">No of bags</div>
            <div class="colon">:</div>
            <div class="value">0.00</div>
          </div>

          <div class="row">
            <div class="label">Challan/Delivery No</div>
            <div class="colon">:</div>
            <div class="value">8</div>
          </div>

          <div class="row">
            <div class="label">Challan/Delivery Date</div>
            <div class="colon">:</div>
            <div class="value">03/05/2026</div>
          </div>

          <div class="row">
            <div class="label">Challan/Delivery Qty</div>
            <div class="colon">:</div>
            <div class="value">35020.00</div>
          </div>

          <div class="row">
            <div class="label">Difference</div>
            <div class="colon">:</div>
            <div class="value">-70.00</div>
          </div>
        </div>
      </div> -->
   <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">Product Name</div>
      <div class="colon">:</div>
      <div class="value">{{product_name}}</div>
    </div>

    <div class="row">
      <div class="label">Supplier Name</div>
      <div class="colon">:</div>
      <div class="value">{{supplier_name}}</div>
    </div>

    <div class="row">
      <div class="label">Transporter Name</div>
      <div class="colon">:</div>
      <div class="value">{{transporter_name}}</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">Destination Name</div>
      <div class="colon">:</div>
      <div class="value">{{destination_name}}</div>
    </div>

    <div class="row">
      <div class="label">Gate Pass No</div>
      <div class="colon">:</div>
      <div class="value">{{gate_pass_no}}</div>
    </div>

    <div class="row">
      <div class="label">Gate Pass Date</div>
      <div class="colon">:</div>
      <div class="value">{{gate_pass_date}}</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">Truck No</div>
      <div class="colon">:</div>
      <div class="value">{{vehicle_no}}</div>
    </div>

    <div class="row">
      <div class="label">LR No</div>
      <div class="colon">:</div>
      <div class="value">{{lr_no}}</div>
    </div>

    <div class="row">
      <div class="label">LR Date</div>
      <div class="colon">:</div>
      <div class="value">{{lr_date}}</div>
    </div>

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

    <div class="row">
      <div class="label">No of bags</div>
      <div class="colon">:</div>
      <div class="value">{{quantity_bags}}</div>
    </div>

    <div class="row">
      <div class="label">Challan/Delivery No</div>
      <div class="colon">:</div>
      <div class="value">{{delivery_challan_no}}</div>
    </div>

    <div class="row">
      <div class="label">Challan/Delivery Date</div>
      <div class="colon">:</div>
      <div class="value">{{challan_delivery_date}}</div>
    </div>

    <div class="row">
      <div class="label">Challan/Delivery Qty</div>
      <div class="colon">:</div>
      <div class="value">{{delivery_qty}} T</div>
    </div>

    <div class="row">
      <div class="label">Difference</div>
      <div class="colon">:</div>
      <div class="value">{{difference}}</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">Charges</div>
      <div class="date-colon">:</div>
      <div class="date-value">{{charges}}</div>
    </div>

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

      <div class="weighed">
        Weighed By
      </div>
    </div>
  </div>
</div>
      <!-- <div class="bottom">
       

        <div class="weight-section">
          <div class="weight-row">
            <div class="weight-label">Gross weight</div>
            <div class="weight-colon">:</div>
            <div class="weight-value">49330.00</div>
            <div class="kg">Kgs</div>
          </div>

          <div class="weight-row1">
            <div class="weight-label">Tare weight</div>
            <div class="weight-colon">:</div>
            <div class="weight-value">14380.00</div>
            <div class="kg">Kgs</div>
          </div>

          <div class="weight-row1">
            <div class="weight-label">Net weight</div>
            <div class="weight-colon">:</div>
            <div class="weight-value">34950.00</div>
            <div class="kg">Kgs</div>
          </div>
        </div>

       

        <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">04/05/2026 20:10:23</div>
          </div>

          <div class="date-row1">
            <div class="date-label">Out date time</div>
            <div class="date-colon">:</div>
            <div class="date-value">05/05/2026 17:09:59</div>
          </div>

          <div class="date-row1">
            <div class="date-label">Charges</div>
            <div class="date-colon">:</div>
            <div class="date-value"></div>
          </div>

          <div class="signature">
            <div class="signature-name">Vbpl</div>

            <div class="weighed">Weighed By</div>
          </div>
        </div>
      </div> -->
    </div>
  </body>
</html>
