<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Invoice</title>
  <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&family=Noto+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
    /* General styling */
    body {
      font-family: 'Inter', 'Noto Sans', 'DejaVu Sans', Arial, sans-serif;
      background-color: #f5f5f5;
      margin: 0;
      padding: 20px;
      display: flex;
      justify-content: center;
    }

    /* Container for the invoice */
    .invoice-box {
      width: 100%;
      max-width: 800px;
      padding: 20px;
      border: 1px solid #eee;
      border-radius: 8px;
      background: white;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      overflow-x: auto;
      /* Allows scrolling if content overflows */
      margin: auto;
      /* Centers the invoice-box */
    }

    /* Invoice header */
    .invoice-header {
      text-align: center;
      font-size: 26px;
      font-weight: bold;
      margin-bottom: 20px;
      color: #333;
      text-shadow: 1px 1px 1px #e6e6e6;
    }

    /* Invoice details */
    .invoice-details {
      margin: 20px 0;
      font-size: 14px;
      color: #555;
    }

    .invoice-details p {
      margin: 5px 0;
    }

    /* Addresses */
    .address {
      margin-top: 20px;
      border-top: 1px solid #eee;
      padding-top: 10px;
      font-size: 14px;
      color: #555;
    }

    /* Table for cart items */
    .cart-items {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }

    .cart-items th,
    .cart-items td {
      padding: 10px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }

    .cart-items th {
      background-color: #f2f2f2;
    }

    /* Summary */
    .summary {
      margin-top: 20px;
      font-size: 15px;
      text-align: right;
    }

    .summary p {
      margin: 5px 0;
      font-weight: bold;
    }





    .watermark-container {
      position: relative;
    }

    .watermark-container::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(-25deg);
      width: 300px;
      /* Adjust watermark size */
      height: 300px;
      background-image: url("https://ReadyEats.sgp1.digitaloceanspaces.com/ReadyEats/live/1781678760688.png");
      background-size: contain;
      background-repeat: no-repeat;
      opacity: 0.25;
      /* Transparency */
      pointer-events: none;
      /* Not clickable */
      z-index: 1;
    }

    .watermark-container>* {
      position: relative;
      z-index: 2;
      /* Make content appear above watermark */
    }
  </style>

</head>

<body>
  <div class="invoice-box watermark-container">
    <div class="invoice-header">Invoice</div>

    <div class="invoice-details">
      <p><strong>Order ID:</strong> {{orderId}}</p>
      <p><strong>Date:</strong> {{date}}</p>
      <p><strong>Customer Name:</strong> {{customerName}}</p>
      {{#if (eq deliver_type 'driver')}}
      <p><strong>Driver Name:</strong> {{driverName}}</p>
      {{/if}}
      <p><strong>Restaurant Name:</strong> {{restaurantName}}</p>
    </div>

    <div class="address">

      {{#if (eq deliver_type 'driver')}}
      <h3>Delivery Address</h3>
      <p>{{deliveryAddress}}</p>
      {{/if}}


      <h3>Restaurant Address</h3>
      <p>{{restaurantAddress}}</p>
    </div>

    <table class="cart-items">
      <thead>
        <tr>
          <th>Item</th>
          <th>Quantity</th>
          <th>Price per Unit</th>

        </tr>
      </thead>
      <tbody>

        {{#if cart_items.length}}
        {{#each cart_items}}
        <tr>
          <td>
            {{this.name}}
            <br>
            <span style="font-size: 0.9em; color: #888;">
              Add-Ons:
              {{#if this.add_ons.length}}
              (
              {{#each this.add_ons}}
              {{this.name}} + {{this.price}}{{#unless @last}}, {{/unless}}
              {{/each}}
              )
              {{else}}
              (No Add-Ons)
              {{/if}}
            </span>
            <br>

            <span style="font-size: 0.9em; color: #888;">
              Toppings:
              {{#if this.toppings.length}}
              (
              {{#each this.toppings}}
              {{this.name}} +{{this.price}}{{#unless @last}}, {{/unless}}
              {{/each}}
              )
              {{else}}
              (No Toppings)
              {{/if}}
            </span>






          </td>
          <td>{{this.no_of_quantity}}</td>
          {{!-- <td>{{../currencySymbol}} {{lookup ../cart_total_amount @index}}</td> <!-- Use lookup to access by index --> --}}
          <td>{{../currencySymbol}} {{this.price}}</td> <!-- Use lookup to access by index -->
        </tr>
        {{/each}}
        {{/if}}




        {{#if other_cart_items.length}}
        {{#each other_cart_items}}
        <tr>
          <td>
            {{this.name}}
          </td>
          <td>{{this.no_of_quantity}}</td>
          <td>{{../currencySymbol}} {{this.price}}</td> <!-- Use lookup to access by index -->
        </tr>
        {{/each}}
        {{/if}}







      </tbody>
    </table>



    <div class="summary">
      <p>Subtotal: {{currencySymbol}} {{subtotal}}</p>
      {{#if tax}}
      {{#unless (eq tax '0.00')}}
      <p>GST: {{currencySymbol}} {{tax}}</p>
      {{/unless}}
      {{/if}}

      {{#if platform_fee}}
      {{#unless (eq platform_fee '0.00')}}
      <p>Platform Fee: {{currencySymbol}} {{platform_fee}}</p>
      {{/unless}}
      {{/if}}

      {{#if couponDiscount}}
      <p>Coupon Discount: {{currencySymbol}} {{couponDiscount}}</p>
      {{/if}}

      {{#if (eq deliver_type 'driver')}}
      <p>Delivery Charge: {{currencySymbol}} {{deliveryCharge}}</p>
      <p>Tip Amount: {{currencySymbol}} {{tip_amount}}</p>
      {{/if}}

      <p>Total Amount: {{currencySymbol}} {{totalAmount}}</p>
    </div>
    {{#if driverFinalEarning}}
    <div class="summary">
      <h3>Driver Earnings</h3>
      <p>Tip Amount: {{currencySymbol}} {{driverTipAmount}}</p>
      <p>Driver Cut : {{currencySymbol}} {{driverCut}}</pp>
      <p><strong>Trip Amount: {{currencySymbol}} {{driverTripAmount}}</strong></p>
      <p><strong>Final Amount: {{currencySymbol}} {{driverFinalEarning}}</strong></p>
    </div>
    {{/if}}

    {{#if restaurantEarning}}
    <div class="summary">
      <h3>Restaurant Earnings</h3>
      <p>Subtotal: {{currencySymbol}} {{subtotal}}</p>
      <p>Restaurant Cut: {{currencySymbol}} {{restaurantCut}}</p>
      <p><strong>Final Earning: {{currencySymbol}} {{restaurantEarning}}</strong></p>
    </div>
    {{/if}}

    {{#if adminRevenue}}
    <div class="summary">
      <h3>Admin Breakdown</h3>
      {{#if platformFee}}
      {{#unless (eq platformFee '0.00')}}
      <p>Platform Fee from Restaurant: {{currencySymbol}} {{platformFee}}</p>
      {{/unless}}
      {{/if}}
      <p>Driver Earning: {{currencySymbol}} {{driverEarning}}</p>
      <p>Restaurant Earning: {{currencySymbol}} {{restaurantEarning}}</p>
      {{#if taxAmount}}
      {{#unless (eq taxAmount '0.00')}}
      <p>Tax Collected: {{currencySymbol}} {{taxAmount}}</p>
      {{/unless}}
      {{/if}}
      <p>Sales Commission: {{currencySymbol}} {{salesCommission}}</p>
      <p><strong>Total Revenue: {{currencySymbol}} {{adminRevenue}}</strong></p>
    </div>
    {{/if}}

  </div>
</body>

</html>