<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Customer Sales Report</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f9f9f9;
        color: #333;
      }
      .container {
        margin: 20px auto;
        max-width: 900px;
        padding: 20px;
        background: #ffffff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
      }
      .heading {
        text-align: center;
        margin-bottom: 20px;
      }
      .heading h1 {
        font-size: 24px;
        margin: 0;
        color: #d32f2f; /* Red theme */
      }
      .customer-row {
        margin-bottom: 30px;
      }
      .customer-info {
        margin-bottom: 8px;
        font-size: 16px;
      }
      .sales-report-container {
        margin-top: 10px;
        padding-top: 10px;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
      }
      table,
      th,
      td {
        border: 1px solid #ccc;
      }
      th,
      td {
        text-align: left;
        padding: 10px;
      }
      th {
        background-color: #d32f2f;
        color: white;
      }
      .total-sales {
        font-weight: bold;
        color: #d32f2f;
      }
      /* Separator line for each customer */
      .customer-separator {
        height: 2px;
        background-color: #d32f2f;
        margin: 30px 0;
        border-radius: 4px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="heading">
        <h1>Customer Sales Report</h1>
      </div>
      <!-- Repeat this block for each customer -->
      {{#each customers}}
      <div class="customer-row">
        <div class="customer-info"><strong>Customer ID:</strong> {{customer.id}}</div>
        <div class="customer-info"><strong>Customer Name:</strong> {{customer.name}}</div>
        <div class="customer-info"><strong>Hardware Name:</strong> {{customer.hardware_name}}</div>
        <div class="sales-report-container">
          <h2>Sales by Month</h2>
          <table>
            <thead>
              <tr>
                <th>Month</th>
                <th>Order Reference</th>
                <th>Total Amount</th>
              </tr>
            </thead>
            <tbody>
              {{#each salesByMonth}}
              <tr>
                <td rowspan="{{rowspan}}">{{month}}</td>
                <td>{{orders.[0].reference_no}}</td>
                <td>₱{{orders.[0].total_amount}}</td>
              </tr>
              {{#each orders}} {{#if @index}}
              <tr>
                <td>{{this.reference_no}}</td>
                <td>₱{{this.total_amount}}</td>
              </tr>
              {{/if}} {{/each}}
              <tr class="total-sales">
                <td colspan="2">Total Sales ({{month}})</td>
                <td>₱{{totalSales}}</td>
              </tr>
              {{/each}}
            </tbody>
          </table>
        </div>
      </div>
      {{/each}}
      <!-- Separator for the next customer -->
      <div class="customer-separator"></div>
    </div>
  </body>
</html>
