<!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> Delivery Challan</title>
    <style>

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

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

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

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

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

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

.logo{
    width:110px;
    height:60px;
    object-fit:contain;
}

.challan-title{
    text-align:right;
}

.challan-title h1{
    font-size:34px;
    font-weight:700;
    color:#111;
    letter-spacing:0.5px;
}

.challan-title p{
    margin-top:5px;
    font-size:13px;
    font-weight:600;
    color:#111;
}

/* ====================================
   COMPANY SECTION
==================================== */

.company-section{
    display:flex;
    justify-content:space-between;
    margin-top:10px;
    margin-bottom:20px;
}

.company-box{
    width:48%;
    border:1px solid #cfcfcf;
    padding:12px 14px;
    font-size:12px;
    line-height:20px;
}

.section-title{
    font-size:11px;
    font-weight:700;
    color:#666;
    text-transform:uppercase;
    letter-spacing:0.8px;
    margin-bottom:8px;
}

.company-name{
    font-size:15px;
    font-weight:700;
    margin-bottom:5px;
}

/* ====================================
   SUMMARY TABLE
==================================== */

.summary-table{
    width:100%;
    border-collapse:collapse;
    margin-top:12px;
}

.summary-table td{
    border:1px solid #d8d8d8;
    padding:8px 10px;
    font-size:12px;
}

/* ====================================
   PRODUCT TABLE
==================================== */

.product-table{
    width:100%;
    border-collapse:collapse;
    margin-top:16px;
}

.product-table th{
    background:#f3f3f3;
    border:1px solid #cfcfcf;
    padding:8px 10px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    text-align:left;
    color:#444;
}

.product-table td{
    border:1px solid #d8d8d8;
    padding:8px 10px;
    font-size:12px;
    color:#222;
}

/* ====================================
   NOTES & TOTALS
==================================== */

.bottom-wrapper{
    width:100%;
    margin-top:20px;
    display:table;
    table-layout:fixed;
}

.notes-box,
.total-box{
    display:table-cell;
    vertical-align:top;
    border:1px solid #cfcfcf;
}

.notes-box{
    width:60%;
    padding:12px 14px;
}

.total-box{
    width:40%;
}

.notes-text{
    font-size:12px;
    line-height:20px;
    color:#333;
}

.total-table{
    width:100%;
    border-collapse:collapse;
}

.total-table td{
    border:1px solid #d8d8d8;
    padding:8px 12px;
    font-size:12px;
}

.total-highlight td{
    font-weight:700;
    background:#f5f5f5;
}

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

.signature-wrapper{
    margin-top:40px;
    border-top:1px solid #dcdcdc;
    padding-top:15px;
    display:flex;
    justify-content:flex-end;
}

.signature-box{
    text-align:center;
}

.signature-space{
    height:50px;
}

.signature-title{
    font-size:12px;
    font-weight:700;
}

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

@media print{

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

    .invoice-container{
        border:none;
    }
}

</style>

    <!-- <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="invoice-container">

    <!-- HEADER -->

    <div class="top-header">

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

      <div class="challan-title">

        <h1>DELIVERY CHALLAN</h1>

        <p>
          Delivery Challan # - {{challan_number}}
        </p>

      </div>

    </div>

    <!-- COMPANY SECTION -->

    <div class="company-section">

      <!-- COMPANY -->

      <div class="company-box">

        <div class="section-title">
          Dispatch From
        </div>

        <div class="company-name">
          {{company_name}}
        </div>

        <div>
          {{company_address}}
        </div>

        <div style="margin-top:8px;">
          <strong>GSTIN :</strong>
          {{company_gstin}}
        </div>

        <div>
          <strong>Phone :</strong>
          {{company_phone}}
        </div>

      </div>

      <!-- CUSTOMER -->

      <div class="company-box">

        <div class="section-title">
          Bill To
        </div>

        <div class="company-name">
          {{customer_name}}
        </div>

        <div>
          {{customer_address}}
        </div>

        <div style="margin-top:8px;">
          <strong>GSTIN :</strong>
          {{customer_gst}}
        </div>

        <div>
          <strong>Phone :</strong>
          {{customer_phone}}
        </div>

      </div>

    </div>

    <!-- SUMMARY TABLE -->

    <table class="summary-table">

      <tr>

        <td>
          <strong>Challan Number</strong><br />
          {{challan_number}}
        </td>

        <td>
          <strong>Order Date</strong><br />
          {{order_date}}
        </td>

        <td>
          <strong>Dispatch Date</strong><br />
          {{dispatch_date}}
        </td>

      </tr>

      <tr>

        <td>
          <strong>Vehicle No</strong><br />
          {{vehicle_no}}
        </td>

        <td>
          <strong>Driver Name</strong><br />
          {{driver_name}}
        </td>

        <td>
          <strong>LR Number</strong><br />
          {{lr_number}}
        </td>

      </tr>

    </table>

    <!-- PRODUCT TABLE -->

    <table class="product-table">

      <thead>

        <tr>

          <th>SR NO.</th>

          <th>ITEM DESCRIPTION</th>

          <th>HSN/SAC</th>

          <th>QTY</th>

          <th>UOM</th>

          <th>GROSS WT</th>

          <th>TARE WT</th>

          <th>NET WT</th>

        </tr>

      </thead>

      <tbody>

        {{items_rows}}

      </tbody>

    </table>

    <!-- NOTES + TOTALS -->

    <div class="bottom-wrapper">

      <!-- NOTES -->

      <div class="notes-box">

        <div class="section-title">
          Notes
        </div>

        <div class="notes-text">

          {{remarks}}

        </div>

      </div>

      <!-- TOTALS -->

      <div class="total-box">

        <table class="total-table">

          <tr>

            <td>Gross Weight</td>

            <td style="text-align:right;">
              {{gross_weight}}
            </td>

          </tr>

          <tr>

            <td>Tare Weight</td>

            <td style="text-align:right;">
              {{tare_weight}}
            </td>

          </tr>

          <tr>

            <td>Net Weight</td>

            <td style="text-align:right;">
              {{net_weight}}
            </td>

          </tr>

          <tr class="total-highlight">

            <td>Dispatch Qty</td>

            <td style="text-align:right;">
              {{dispatch_qty}}
            </td>

          </tr>

        </table>

      </div>

    </div>

    <!-- SIGNATURE -->

    <div class="signature-wrapper">

      <div class="signature-box">

        <div class="signature-space"></div>

        <div class="signature-title">
          Authorised Signatory
        </div>

      </div>

    </div>

  </div>

</body>

<!-- <body>

  <div class="invoice-container">

   
    <div
      style="
        display:flex;
        justify-content:flex-end;
        align-items:flex-start;
        margin-top:10px;
        margin-bottom:25px;
      "
    >

      <div style="text-align:right;">

        <div
          style="
            font-size:38px;
            font-weight:700;
            color:#e3a11a;
            letter-spacing:0.5px;
          "
        >
          DELIVERY CHALLAN
        </div>

        <div
          style="
            font-size:14px;
            font-weight:600;
            margin-top:4px;
            color:#111;
          "
        >
          Delivery Challan# - {{challan_number}}
        </div>

      </div>

    </div>

   

    <div
      style="
        display:flex;
        justify-content:space-between;
        margin-top:10px;
        margin-bottom:25px;
        font-size:13px;
        line-height:22px;
      "
    >

    

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

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

        <div>
         
          <strong>Company Name:</strong>
          {{company_name}}
        </div>

        <div>
          <strong>Address:</strong>
          {{company_address}}
        </div>

        <div>
          <strong>GSTIN:</strong>
          {{company_gstin}}
        </div>

        <div>
          <strong>Phone:</strong>
          {{company_phone}}
        </div>

      </div>

    </div>

  

    <table
      style="
        width:100%;
        border-collapse:collapse;
        margin-bottom:25px;
      "
    >

      <tr
        style="
          border-top:2px solid #777;
          border-bottom:2px solid #777;
        "
      >

        <td
          style="
            padding:8px 10px;
            width:33%;
            font-size:13px;
          "
        >
          <div
            style="
              color:#e3a11a;
              font-weight:700;
              margin-bottom:5px;
            "
          >
            Delivery Challan #
          </div>

          <div style="font-weight:600;">
            {{challan_number}}
          </div>
        </td>

        <td
          style="
            padding:8px 10px;
            width:33%;
            font-size:13px;
          "
        >
          <div
            style="
              color:#e3a11a;
              font-weight:700;
              margin-bottom:5px;
            "
          >
            Order Date #
          </div>

          <div style="font-weight:600;">
            {{order_date}}
          </div>
        </td>

        <td
          style="
            padding:8px 10px;
            width:33%;
            font-size:13px;
          "
        >
          <div
            style="
              color:#e3a11a;
              font-weight:700;
              margin-bottom:5px;
            "
          >
            Dispatch Date #
          </div>

          <div style="font-weight:600;">
            {{dispatch_date}}
          </div>
        </td>

      </tr>

    </table>

  

    <div
      style="
        display:flex;
        justify-content:space-between;
        margin-bottom:25px;
        font-size:13px;
        line-height:22px;
      "
    >

     

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

        <div style="font-weight:700; margin-bottom:8px;">
          Bill To:
        </div>

        <div>{{customer_name}}</div>

        <div>{{customer_address}}</div>

        <div>{{customer_phone}}</div>

        <div>
          Place of Supply:
          {{place_of_supply}}
        </div>

      </div>


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

        <table style="width:100%; border-collapse:collapse;">

          <tr>
            <td style="padding:3px 0; font-weight:600;">
              Challan Date #
            </td>

            <td>{{challan_date}}</td>
          </tr>

          <tr>
            <td style="padding:3px 0; font-weight:600;">
              Ref #
            </td>

            <td>{{reference_no}}</td>
          </tr>

          <tr>
            <td style="padding:3px 0; font-weight:600;">
              Challan Type:
            </td>

            <td>{{challan_type}}</td>
          </tr>

          <tr>
            <td style="padding:3px 0; font-weight:600;">
              GSTIN:
            </td>

            <td>{{customer_gst}}</td>
          </tr>

          <tr>
            <td style="padding:3px 0; font-weight:600;">
              Vehicle No:
            </td>

            <td>{{vehicle_no}}</td>
          </tr>

          <tr>
            <td style="padding:3px 0; font-weight:600;">
              Driver Name:
            </td>

            <td>{{driver_name}}</td>
          </tr>

          <tr>
            <td style="padding:3px 0; font-weight:600;">
              LR Number:
            </td>

            <td>{{lr_number}}</td>
          </tr>

        </table>

      </div>

    </div>

   

    <table
      style="
        width:100%;
        border-collapse:collapse;
        margin-bottom:30px;
      "
    >

      <thead>

        <tr
          style="
            background:#e3a11a;
            color:#111;
          "
        >

          <th
            style="
              border:1px solid #444;
              padding:8px;
              font-size:12px;
            "
          >
            SR NO.
          </th>

          <th
            style="
              border:1px solid #444;
              padding:8px;
              font-size:12px;
            "
          >
            ITEM DESCRIPTION
          </th>

          <th
            style="
              border:1px solid #444;
              padding:8px;
              font-size:12px;
            "
          >
            HSN/SAC
          </th>

          <th
            style="
              border:1px solid #444;
              padding:8px;
              font-size:12px;
            "
          >
            QTY
          </th>

          <th
            style="
              border:1px solid #444;
              padding:8px;
              font-size:12px;
            "
          >
            UOM
          </th>

          <th
            style="
              border:1px solid #444;
              padding:8px;
              font-size:12px;
            "
          >
            GROSS WT
          </th>

          <th
            style="
              border:1px solid #444;
              padding:8px;
              font-size:12px;
            "
          >
            TARE WT
          </th>

          <th
            style="
              border:1px solid #444;
              padding:8px;
              font-size:12px;
            "
          >
            NET WT
          </th>

        </tr>

      </thead>

      <tbody>

        {{items_rows}}

      </tbody>

    </table>

 

    <div
      style="
        display:flex;
        justify-content:space-between;
        margin-top:40px;
      "
    >

    

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

        <div
          style="
            font-size:13px;
            font-weight:700;
            margin-bottom:10px;
          "
        >
          Notes:
        </div>

        <div
          style="
            font-size:13px;
            line-height:22px;
            color:#333;
          "
        >
          {{remarks}}
        </div>

      </div>

     

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

        <table
          style="
            width:100%;
            border-collapse:collapse;
            font-size:13px;
          "
        >

          <tr>
            <td
              style="
                padding:5px 0;
                font-weight:600;
              "
            >
              Gross Weight:
            </td>

            <td style="text-align:right;">
              {{gross_weight}}
            </td>
          </tr>

          <tr>
            <td
              style="
                padding:5px 0;
                font-weight:600;
              "
            >
              Tare Weight:
            </td>

            <td style="text-align:right;">
              {{tare_weight}}
            </td>
          </tr>

          <tr>
            <td
              style="
                padding:5px 0;
                font-weight:600;
              "
            >
              Net Weight:
            </td>

            <td style="text-align:right;">
              {{net_weight}}
            </td>
          </tr>

          <tr>
            <td
              style="
                padding:5px 0;
                font-weight:700;
                font-size:14px;
              "
            >
              Dispatch Qty:
            </td>

            <td
              style="
                text-align:right;
                font-weight:700;
                font-size:14px;
              "
            >
              {{dispatch_qty}}
            </td>
          </tr>

        </table>

      </div>

    </div>

   

    <div
      style="
        margin-top:80px;
        border-top:1px solid #777;
        padding-top:15px;
        display:flex;
        justify-content:flex-end;
      "
    >

      <div style="text-align:center;">

        <div
          style="
            height:50px;
            margin-bottom:5px;
          "
        >
        </div>

        <div
          style="
            font-size:13px;
            font-weight:700;
          "
        >
          Authorised Signatory
        </div>

      </div>

    </div>

  </div>

</body> -->
</html>