{% extends "layout.html" %}

{% block title %}Pricing{% endblock %}

{% block content %}
<div class="centered-header" data-aos="fade-up" data-aos-duration="800">
  <h1 class="gradient-text">Product Pricing</h1>
  <p>List of normal price per room and location for current date.</p>
</div>

<div class="table-wrapper" data-aos="fade-up" data-aos-duration="800" style="padding: 20px; max-width: 1000px; margin: 0 auto;">
  <table id="pricing-table" style="width: 100%; border-collapse: collapse; font-family: 'Mulish', sans-serif; font-size: 14px;">
    <thead style="background: linear-gradient(90deg, #546FFF, #8E8FFA); color: white;">
      <tr>
        <th style="padding: 12px; text-align: left; border-bottom: 2px solid #e2e2e2;">Location</th>
        <th style="padding: 12px; text-align: left; border-bottom: 2px solid #e2e2e2;">Room</th>
        <th style="padding: 12px; text-align: right; border-bottom: 2px solid #e2e2e2;">Price (USD)</th>
      </tr>
    </thead>
    <tbody id="pricing-body">
      <!-- Data will be injected via JS -->
    </tbody>
  </table>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    fetch("/get_today_pricing")
      .then(response => response.json())
      .then(data => {
        const tbody = document.getElementById("pricing-body");
        tbody.innerHTML = "";

        const grouped = {};
        data.forEach(row => {
          if (!grouped[row.Product]) grouped[row.Product] = {};
          if (!grouped[row.Product][row.Location]) grouped[row.Product][row.Location] = [];
          grouped[row.Product][row.Location].push({ Room: row.Room, Price: row.Price });
        });

        for (const product in grouped) {
          const trProduct = document.createElement("tr");
          trProduct.innerHTML = `<td colspan="3" style="padding: 12px; background: #f4f7ff; font-weight: bold; font-size: 15px; color: #2b2b2b;">${product}</td>`;
          tbody.appendChild(trProduct);

          for (const location in grouped[product]) {
            const trLocation = document.createElement("tr");
            trLocation.innerHTML = `<td colspan="3" style="padding: 10px 12px; background: #fafafa; font-weight: 600; color: #444;">${location}</td>`;
            tbody.appendChild(trLocation);

            grouped[product][location].forEach(item => {
              const tr = document.createElement("tr");
              tr.innerHTML = `
                <td style="padding: 8px 12px; border-bottom: 1px solid #eee;"></td>
                <td style="padding: 8px 12px; border-bottom: 1px solid #eee;">${item.Room}</td>
                <td style="padding: 8px 12px; text-align: right; border-bottom: 1px solid #eee;">$${parseFloat(item.Price).toLocaleString("en-US")}</td>
              `;
              tbody.appendChild(tr);
            });
          }
        }
      });
  });
</script>
{% endblock %}