<% content_for :title, "Income Report" %>

<style>
  :root{
    --card-bg: #ffffff;
    --muted: #6b7280;
    --accent: #2563eb;
    --radius: 10px;
    --shadow: 0 6px 20px rgba(16,24,40,0.06);
    --gap: 18px;
    font-family: "Inter", "Poppins", system-ui;
  }

  .er-container {
    max-width: 920px;
    margin: 28px auto;
    padding: 18px;
    color: #111827;
  }

  .er-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom: var(--gap);
  }

  .er-title {
    color: #fff;
    font-size:1.4rem;
    font-weight:600;
    margin:0;
  }

  .er-actions { display:flex; gap:10px; align-items:center; }

  .btn-simple {
    background: var(--accent);
    color:#fff;
    padding:8px 12px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
    font-size:0.95rem;
    box-shadow: 0 6px 16px rgba(37,99,235,0.12);
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .btn-simple:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(37,99,235,0.16); }

  .summary-row {
    display: flex;
    gap: 16px;
    margin-bottom: 22px;
  }

  .card {
    flex: 1;
    padding: 16px;
    border-radius: var(--radius);
    background: #87ceeb;
    border: 1px solid var(--border);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadowG3);
    transition: .25s;
  }

  .card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 36px rgba(168,85,247,0.75);
  }

  .card small {
    color: var(--muted);
    font-weight: 500;
  }

  .card .value {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 6px;
  }

  .chart-wrap {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding:12px;
    margin-bottom: var(--gap);
    border: 1px solid rgba(15,23,42,0.04);
  }

  .table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 20px;
    background: transparent;
    border-radius: var(--radius);
    overflow: hidden;
  }

  .table thead {
    background: rgba(35, 39, 43, 0.98);
  }

  .table thead th {
    text-align: left;
    font-size: 0.9rem;
    color: #562929;
    padding: 12px 16px;
    font-weight: 600;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  }

  .table tbody tr { 
    background: rgba(35, 39, 43, 0.95);
    transition: background-color 0.2s ease;
  }

  .table tbody tr:hover {
    background: rgba(45, 49, 53, 0.98);
  }

  .table td {
    padding: 12px 16px;
    font-size: 0.95rem;
    color: #562929;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .table tbody tr:last-child td {
    border-bottom: none;
  }

  .table tfoot {
    background: rgba(35, 39, 43, 0.98);
  }

  .table tfoot th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 700;
    color: #562929;
    border-top: 2px solid rgba(255, 255, 255, 0.1);
  }

  /* Fix the "No income" message color */
  .table tbody tr td[colspan] {
    color: #e0e0e0 !important;
    text-align: center;
    padding: 20px;
  }

  @media (max-width:720px){
    .summary-row { flex-direction:column; }
    .er-header { flex-direction:column; align-items:flex-start; gap:10px; }
  }
</style>

<div class="er-container">
  <div class="er-header">
    <h1 class="er-title">INCOME REPORT</h1>

    <div class="er-actions">
      <%= link_to "New Income", new_income_path, class: "btn-simple" %>
    </div>
  </div>

  <!-- Summary -->
  <div class="summary-row">
    <div class="card">
      <small>Today's Income</small>
      <div class="value"><%= number_to_currency(@daily_income || 0, unit: "₹") %></div>
    </div>

    <div class="card">
      <small>This Week</small>
      <div class="value"><%= number_to_currency(@weekly_income || 0, unit: "₹") %></div>
    </div>

    <div class="card">
      <small>This Month</small>
      <div class="value"><%= number_to_currency(@monthly_income || 0, unit: "₹") %></div>
    </div>
  </div>

  <!-- Chart -->
  <div class="chart-wrap">
    <canvas id="incomeChart" height="120"></canvas>
  </div>

  <!-- Today's table -->
  <section>
    <h3 style="margin:0 0 8px 0; font-size:1rem; color:#fff;">Today's Income</h3>
    <table class="table">
      <thead>
        <tr><th>title</th><th>Amount</th><th>Date</th><th>description</th></tr>
      </thead>
      <tbody>
        <% (@daily_income_items || []).each do |income| %>
          <tr>
            <td><%= income.title %></td>
            <td><%= number_to_currency(income.amount, unit: "₹") %></td>
            <td><%= income.created_at.strftime("%d %b %Y") %></td>
            <td><%= income.description %></td>
          </tr>
        <% end %>
        <% if (@daily_income_items || []).empty? %>
          <tr><td colspan="4" class="text-center">No income for today.</td></tr>
        <% end %>
      </tbody>
      <tfoot>
        <tr>
          <th>Total</th>
          <th><%= number_to_currency(@daily_income || 0, unit: "₹") %></th>
          <th></th>
          <th></th>
        </tr>
      </tfoot>
    </table>
  </section>

  <!-- Week table -->
  <section>
    <h3 style="margin:0 0 8px 0; font-size:1rem; color:#fff;">This Week's Income</h3>
    <table class="table">
      <thead>
        <tr><th>title</th><th>Amount</th><th>Date</th><th>description</th></tr>
      </thead>
      <tbody>
        <% (@weekly_income_items || []).each do |income| %>
          <tr>
            <td><%= income.title %></td>
            <td><%= number_to_currency(income.amount, unit: "₹") %></td>
            <td><%= income.created_at.strftime("%d %b %Y") %></td>
            <td><%= income.description %></td>
          </tr>
        <% end %>
        <% if (@weekly_income_items || []).empty? %>
          <tr><td colspan="4" class="text-center">No income for this week.</td></tr>
        <% end %>
      </tbody>
      <tfoot>
        <tr>
          <th>Total</th>
          <th><%= number_to_currency(@weekly_income || 0, unit: "₹") %></th>
          <th></th>
          <th></th>
        </tr>
      </tfoot>
    </table>
  </section>

  <!-- Month table -->
  <section>
    <h3 style="margin:0 0 8px 0; font-size:1rem; color:#fff;">This Month's Income</h3>
    <table class="table">
      <thead>
        <tr><th>title</th><th>Amount</th><th>Date</th><th>description</th></tr>
      </thead>
      <tbody>
        <% (@monthly_income_items || []).each do |income| %>
          <tr>
            <td><%= income.title %></td>
            <td><%= number_to_currency(income.amount, unit: "₹") %></td>
            <td><%= income.created_at.strftime("%d %b %Y") %></td>
            <td><%= income.description %></td>
          </tr>
        <% end %>
        <% if (@monthly_income_items || []).empty? %>
          <tr><td colspan="4" class="text-center">No income for this month.</td></tr>
        <% end %>
      </tbody>
      <tfoot>
        <tr>
          <th>Total</th>
          <th><%= number_to_currency(@monthly_income || 0, unit: "₹") %></th>
          <th></th>
          <th></th>
        </tr>
      </tfoot>
    </table>
  </section>
</div>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  (function(){
    const labels = <%= raw((@chart_labels || []).to_json) %>;
    const data = <%= raw((@chart_data || []).to_json) %>;

    const ctx = document.getElementById('incomeChart').getContext('2d');
    const gradient = ctx.createLinearGradient(0,0,0,120);
    gradient.addColorStop(0, 'rgba(37,99,235,0.18)');
    gradient.addColorStop(1, 'rgba(37,99,235,0)');

    new Chart(ctx, {
      type: 'line',
      data: {
        labels: labels,
        datasets: [{
          label: 'Income',
          data: data,
          fill: true,
          backgroundColor: gradient,
          borderColor: 'rgba(37,99,235,1)',
          tension: 0.42,
          borderWidth: 2,
          pointRadius: 3,
          pointBackgroundColor: 'rgba(37,99,235,1)'
        }]
      },
      options: {
        maintainAspectRatio: false,
        scales: {
          x: { ticks: { color: '#374151' } },
          y: {
            beginAtZero: true,
            ticks: { callback: v => '₹' + v, color: '#374151' },
            grid: { color: 'rgba(15,23,42,0.04)' }
          }
        },
        plugins: {
          legend: { display: false },
          tooltip: { callbacks: { label: ctx => '₹' + ctx.formattedValue } }
        }
      }
    });
  })();
</script>
