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

<head>
  <meta charset="UTF-8" />
  <title>
    <%= title %>
  </title>
  <!-- <style>
    body {
      background-color: black;
      color: gold;
      font-family: 'Arial', sans-serif;
      padding: 20px;
      text-align: center;
    }

    .chart-title {
      font-size: 32px;
      font-weight: bold;
      color: gold;
      margin-bottom: 30px;
    }

    .grid-container {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 10px;
    }

    .day-card {
      border: 1px solid gold;
      min-height: 120px;
      color: red;
    }

    .top-box {
      border-bottom: 1px solid gold;
      font-size: 18px;
      padding: 10px;
    }

    .day-header {
      font-weight: bold;
      color: yellow;
    }

    .date-text {
      color: yellow;
      margin-bottom: 5px;
    }

    .pana-table {
      display: flex;
      justify-content: space-around;
      align-items: center;
      text-align: center;
      padding: 4px 0;
    }

    .pana-table div {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      color: yellow;
    }

    .digit-bold {
      font-weight: 900;
      font-size: 24px;
    }

    .digit-size {
      font-size: 20px;
    }

    .vertical-text {
      display: inline-block;
      writing-mode: vertical-rl;
      text-orientation: upright;
      font-size: 14px;
      line-height: 1.2;
      white-space: nowrap;
      text-align: center;
    }

    .vertical-stack {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 16px;
      line-height: 1.2;
    }

    .pana-wrapper {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 10px;
      font-weight: bold;
    }
  </style>  -->
  <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>
  <div class="table-responsive">
    <table class="table chart-table table-bordered 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>
        <% 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">
                    <div class="open-res">
                      <% week.days[day].open_pana.toString().split('').forEach(c => { %>
                        <span><%= c %></span>
                      <% }) %>
                    </div>
                    <div class="jodi-res"><%= week.days[day].digit %></div>
                    <div class="open-res">
                      <% week.days[day].close_pana.toString().split('').forEach(c => { %>
                        <span><%= c %></span>
                      <% }) %>
                    </div>
                  </div>
                <% } else { %>
                  <div class="date-data">
                    <span>--</span>
                  </div>
                <% } %>
              </td>
            <% }) %>
          </tr>
        <% }) %>
      </tbody>
    </table>
  </div>
</section>


  <style>
    body{
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      background-color: #030712;
    }
    .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-table td {
      font-size: 14px;
      color: white;
      background-color: transparent;
    }

    .chart-table th {
      border-color:  transparent;
      background-color: #f7f7f7;
      font-size: 16px;
      text-align: center;  background: linear-gradient(90deg, #672DFF 0%, #932DFF 50%, #E522FF 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;    padding: 14px 8px;
      position: relative;

    }
      .chart-table th:nth-child(1):after{

        display: none;
      }
      .chart-table th::after {
        content: "";
        position: absolute;
        left: 0;            
        top: 50%; 
        transform: translateY(-50%); 
        height: 70%; 
        width: 1px;
        background-color: #71717A;
        z-index: -1;
      }


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

      .chart-table thead tr{
        border: none;
      }
      .chart-table body tr:last-child(1){
        border: none;
      }
      .chart-table td {
        border: 1px solid #2f2f2f; 
      }

      .chart-table tr:first-child th,
      .chart-table tr:first-child td {
        border-top: none;
      }

      .chart-table tr:last-child th,
      .chart-table tr:last-child td {
        border-bottom: none;
      }

      .chart-table th:first-child,
      .chart-table td:first-child {
        border-left: none;
      }


      .chart-table th:last-child,
      .chart-table td:last-child {
        border-right: none;
      }



    .date-td {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      white-space: nowrap;
    }

    .date-data {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;

    }

    .date-data .open-res {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 16px;
      /* font-weight: 600; */
    }

    .jodi-res {
      font-size: 18px;
      font-weight: 600;
      font-style: italic;
    }

    @media only screen and (max-width: 600px) {
      .chart-title h1 {
        font-size: 18px;
      }

        .chart-table th{
          font-size: 13px;
        }
      .jodi-res {
        font-size: 14px;
      }

      .date-data .open-res,
      .chart-table td {
        font-size: 10px;
      }
    }
  </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>