<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sales & Revenue Report</title>
  <style>
    @page {
      size: A4 portrait;
      margin: 10mm;
    }
    * {
      box-sizing: border-box;
    }
    body {
      font-family: 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
      background-color: #ffffff;
      margin: 0;
      padding: 0;
      color: #1e293b;
      width: 100%;
      -webkit-print-color-adjust: exact;
    }
    .report-card {
      width: 100%;
      margin: 0 auto;
      background: #ffffff;
      padding: 0;
    }
    .header {
      border-bottom: 2px solid #0f172a;
      padding-bottom: 10px;
      margin-bottom: 15px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }
    .header h1 {
      margin: 0;
      font-size: 20px;
      color: #0f172a;
      font-weight: 700;
    }
    .header p {
      margin: 3px 0 0 0;
      font-size: 11px;
      color: #64748b;
    }
    .meta-grid {
      display: table;
      width: 100%;
      margin-bottom: 15px;
      background: #f8fafc;
      padding: 10px 12px;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
    }
    .meta-item {
      display: table-cell;
      width: 33.33%;
      vertical-align: top;
    }
    .meta-item label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      font-weight: 600;
      display: block;
      margin-bottom: 2px;
    }
    .meta-item .value {
      font-size: 12px;
      font-weight: 600;
      color: #0f172a;
    }
    .report-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 5px;
      font-size: 10.5px;
      table-layout: fixed;
    }
    .report-table th {
      background-color: #0f172a !important;
      color: #ffffff !important;
      text-align: right;
      padding: 8px 4px;
      font-weight: 600;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
    .report-table th:first-child {
      text-align: left;
      padding-left: 6px;
    }
    .report-table td {
      padding: 7px 4px;
      text-align: right;
      border-bottom: 1px solid #e2e8f0;
      color: #334155;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
    .report-table td:first-child {
      text-align: left;
      font-weight: 600;
      color: #0f172a;
      padding-left: 6px;
    }
    .report-table tr:nth-child(even) {
      background-color: #f8fafc;
    }
    .total-row {
      background-color: #e2e8f0 !important;
      font-weight: 700;
    }
    .total-row td {
      border-top: 2px solid #0f172a;
      border-bottom: 2px solid #0f172a;
      color: #0f172a !important;
      font-size: 10.5px;
      font-weight: 700;
    }
    .footer {
      margin-top: 20px;
      text-align: center;
      font-size: 10px;
      color: #94a3b8;
      border-top: 1px solid #e2e8f0;
      padding-top: 10px;
    }
  </style>
</head>
<body>
  <div class="report-card">
    <div class="header">
      <div>
        <h1>Monthly Sales & Revenue Report</h1>
        <p>Comprehensive Month-Wise Sales & Financial Performance Breakdown</p>
      </div>
    </div>

    <div class="meta-grid">
      <div class="meta-item">
        <label>Restaurant / Vendor</label>
        <div class="value">{{restaurantName}}</div>
      </div>
      <div class="meta-item">
        <label>Report Period</label>
        <div class="value">{{periodLabel}}</div>
      </div>
      <div class="meta-item">
        <label>Generated On</label>
        <div class="value">{{generatedAt}}</div>
      </div>
    </div>

    <table class="report-table">
      <colgroup>
        <col style="width: 12%;" />
        <col style="width: 15%;" />
        <col style="width: 15%;" />
        <col style="width: 15%;" />
        <col style="width: 17%;" />
        <col style="width: 8%;" />
        <col style="width: 9%;" />
        <col style="width: 9%;" />
      </colgroup>
      <thead>
        <tr>
          <th>Month</th>
          <th>Total Sale</th>
          <th>Total Earning</th>
          <th>App Commission</th>
          <th>Earning w/ Surcharge</th>
          <th>Total Orders</th>
          <th>Completed</th>
          <th>Cancelled</th>
        </tr>
      </thead>
      <tbody>
        {{#each monthWiseData}}
        <tr>
          <td>{{this.month}}</td>
          <td>{{this.formatted_total_sale}}</td>
          <td>{{this.formatted_total_earning}}</td>
          <td>{{this.formatted_total_app_commission}}</td>
          <td>{{this.formatted_total_earning_with_surcharge}}</td>
          <td>{{this.total_orders}}</td>
          <td>{{this.completed_orders}}</td>
          <td>{{this.cancelled_orders}}</td>
        </tr>
        {{/each}}
        <tr class="total-row">
          <td>TOTAL</td>
          <td>{{summary.formatted_total_sale}}</td>
          <td>{{summary.formatted_total_earning}}</td>
          <td>{{summary.formatted_total_app_commission}}</td>
          <td>{{summary.formatted_total_earning_with_surcharge}}</td>
          <td>{{summary.total_orders}}</td>
          <td>{{summary.completed_orders}}</td>
          <td>{{summary.cancelled_orders}}</td>
        </tr>
      </tbody>
    </table>

    <div class="footer">
      <p>Report generated automatically by System • ReadyEats Analytics</p>
    </div>
  </div>
</body>
</html>
