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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><%= title %></title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" />
</head>

<body>
  <div class="chart-title">
    <h1><%= banner_title %></h1>
  </div>
  <section class="chart-wrap">
    <table class="chart-table w-100">
      <thead>
        <tr>
          <th>DATE</th>
          <th>MON</th>
          <th>TUE</th>
          <th>WED</th>
          <th>THU</th>
          <th>FRI</th>
          <th>SAT</th>
          <th>SUN</th>
        </tr>
      </thead>
      <tbody>
        <% 
    // Red Bracket (Rad) List - Full Red Jodi
    const radBrackets = [
      "00","05","11","16","22","27","33","38","44","49",
      "50","55","61","66","72","77","83","88","94","99"
    ];
  %>

        <% weeklyData.forEach(week => { %>
        <tr>
          <!-- Date column -->
          <td>
            <div class="date-td">
              <div class="start-date"><%= week.startDate %></div>
              <span>To</span>
              <div class="end-date"><%= week.endDate %></div>
            </div>
          </td>

          <!-- Days columns -->
          <% ["MON","TUE","WED","THU","FRI","SAT","SUN"].forEach(day => { %>
          <td>
            <% if (week.days[day]) { %>
            <div class="date-data">
              <% 
            const jodi = week.days[day].digit ? week.days[day].digit.toString().padStart(2, '0') : '';
            const isRad = radBrackets.includes(jodi);
          %>
              <!-- Open Pana -->
              <div class="open-res">
                <% (week.days[day].open_pana || '').toString().split('').forEach(c => { %>
                <span style="<%= isRad ? 'color: red; font-weight: bold;' : '' %>">
                  <%= c %>
                </span>
                <% }) %>
              </div>

              <!-- Jodi / Bracket - Highlight in red if it's a Rad Bracket -->
              <div class="jodi-res">

                <span style="<%= isRad ? 'color: red; font-weight: bold;' : '' %>">
                  <%= jodi || '**' %>
                </span>
              </div>

              <!-- Close Pana -->
              <div class="close-res">
                <% (week.days[day].close_pana || '').toString().split('').forEach(c => { %>
                <span style="<%= isRad ? 'color: red; font-weight: bold;' : '' %>"><%= c %></span>
                <% }) %>
              </div>
            </div>
            <% } else { %>
            <!-- No result (future dates) -->
            <div class="date-data">
              <div class="open-res">
                <span>*</span><span>*</span><span>*</span>
              </div>
              <div class="jodi-res"><span>**</span></div>
              <div class="close-res">
                <span>*</span><span>*</span><span>*</span>
              </div>
            </div>
            <% } %>
          </td>
          <% }) %>
        </tr>
        <% }) %>
      </tbody>

    </table>
  </section>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      overflow-x: hidden;
      font-family: serif;
    }

    *,
    *::before,
    *::after {
      box-sizing: inherit;
    }

    .chart-title {
      padding: 10px;
      background-color: #f7f7f7;
      display: flex;
      gap: 10px;
      align-items: center;
      display: none;
    }

    .chart-title h1 {
      font-size: 20px;
      margin: 0;
    }

    .chart-wrap {
      width: 100%;
      overflow-x: hidden;
    }

    .chart-table {
      border-collapse: collapse;
      width: 100%;
      border: 1px solid #ccc;
      table-layout: fixed;
    }

    .chart-table th {
      background-color: #f7f7f7;
      color: #222;
      font-size: 16px;
      text-align: center;
      border: 1px solid #ccc;
      font-style: italic;
      padding: 10px 8px;
      white-space: nowrap;
    }

    .chart-table td {
      font-size: 14px;
      background-color: transparent;
      border: 1px solid #ccc;
      text-align: center;
      vertical-align: middle;
      padding: 10px 6px;
      overflow-wrap: anywhere;
      word-break: break-word;
      vertical-align: middle;
    }

    .date-td {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      white-space: normal;
      font-size: 12px;
      line-height: 1.15;
      gap: 2px;
    }

    .date-data {
      display: flex;
      align-items: center;
      justify-content: space-around;
      gap: 8px;
    }

    .date-data .open-res,
    .date-data .close-res {
      display: flex;
      flex-direction: column;
      gap: 2px;
      font-size: 14px;
      font-weight: 600;
      line-height: 1;
    }

    .jodi-res {
      font-size: 18px;
      font-weight: 700;
      font-style: italic;
      line-height: 1;
    }

    @media only screen and (max-width: 768px) {
      .chart-table th {
        font-size: 12px;
        padding: 6px 3px;
      }

      .chart-table td {
        font-size: 10px;
        padding: 6px 2px;
      }

      .date-td {
        font-size: 10px;
      }

      .date-data {
        gap: 6px;
      }

      .date-data .open-res,
      .date-data .close-res {
        font-size: 11px;
        gap: 1px;
      }

      .jodi-res {
        font-size: 13px;
      }

      .chart-table {
        letter-spacing: 0;
      }
    }

    @media only screen and (max-width: 440px) {
      .date-td {
        font-size: 8px;
      }

      .chart-table th {
        font-size: 11px;
        padding: 5px 3px;
      }

      .date-data .open-res,
      .date-data .close-res {
        font-size: 10px;
        font-weight: 500;
      }

      .jodi-res {
        font-size: 12px;
      }
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
</body>

</html>