<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Time Logger</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="{{ url_for('static', filename='js/timer.js') }}" defer></script>
</head>
<body>
  <header class="header">
    <h1>DSC DAY PLANNER</h1>
    <div id="clock" class="digital-clock"></div>
  </header>

  <div class="page-wrapper">

    <!-- LEFT SIDEBAR: Monthly Account -->
    <aside class="sidebar">
      <div class="card">
        <h3>Equity &amp; Capital</h3>
        <p><strong>Equity:</strong>
           <span id="card-equity">{{ account_monthly.equity }}</span>
        </p>
        <p><strong>Working Cap:</strong>
           <span id="card-wc">{{ account_monthly.working_capital }}</span>
        </p>
      </div>
      <div class="card">
        <h3>Monthly Revenue</h3>
        <p><span id="card-rev">{{ account_monthly.monthly_revenue }}</span></p>
      </div>
      <div class="card">
        <h3>Time Units</h3>
        <ul>
          <li>1 Hour  = 3 slots</li>
          <li>1 Day   = 12 slots</li>
          <li>1 Week  = 60 slots</li>
          <li>1 Month = 240 slots</li>
        </ul>
      </div>
      <div class="card">
        <h3>Month Stats</h3>
        {% if monthly_stats_exists %}
          <a href="{{ url_for('download_monthly_stats', filename=monthly_stats_file) }}"
             class="btn">Download JSON</a>
        {% else %}
          <p class="no-stats">Stats file not available yet.</p>
        {% endif %}
      </div>

    </aside>

    <!-- CENTER: Controls, Chart, Table -->
    <main class="main-center">
      <div class="center-wrapper">
        <section class="controls">
          <div class="analog-clock">
            <div class="clock-face">
              <div class="hand hour-hand"></div>
              <div class="hand min-hand"></div>
              <div class="hand second-hand"></div>
            </div>
          </div>
          <button id="log-btn" class="btn" data-last-log="{{ last_log or '' }}"
                  {% if goal_met %}disabled{% endif %}>
            Log 20 min Now
          </button>
          <p class="summary">
            Total today: {{ total_mins }} minutes ({{ percent }}% of 240‑min goal)
          </p>
          <div class="progress-container">
            <div class="progress-bar"
                 style="width: {{ percent }}%;
                        background-color: {% if percent>=100 %}#4CAF50{% else %}#2196F3{% endif %};">
            </div>
          </div>
        </section>

        <section class="chart-container">
          <canvas id="hourChart"></canvas>
        </section>

        <section class="table-container">
          <table class="data-table">
            <thead>
              <tr>
                {% for lbl in hour_labels %}<th>{{ lbl }}</th>{% endfor %}
              </tr>
            </thead>
            <tbody>
              <tr>
                {% for cnt in hours %}<td>{{ cnt }}</td>{% endfor %}
              </tr>
            </tbody>
          </table>
        </section>
      </div>
    </main>

    <!-- RIGHT SIDEBAR: Weekly Account -->
    <aside class="sidebar">
      <div class="card">
        <h3>DSC &amp; Assets</h3>
        <p><strong>Equity:</strong>
           <span id="card-equity-2">{{ account_weekly.equity | round(2) }}</span>
        </p>
        <p><strong>Working Cap:</strong>
           <span id="card-wc-2">{{ account_weekly.working_capital | round(2) }}</span>
        </p>
      </div>
      <div class="card">
        <h3>Weekly Revenue</h3>
        <p><span id="card-rev-2">{{ account_weekly.weekly_revenue | round(2) }}</span></p>
      </div>
      <div class="card">
        <h3>Time Units</h3>
        <ul>
          <li>1 Hour  = 3 slots</li>
          <li>1 Day   = 12 slots</li>
          <li>1 Week  = 60 slots</li>
          <li>1 Month = 240 slots</li>
        </ul>
      </div>
      <div class="card">
        <h3>Week Stats</h3>
        {% if weekly_stats_exists %}
          <a href="{{ url_for('download_weekly_stats', filename=weekly_stats_file) }}"
             class="btn">
            Download JSON
          </a>
        {% else %}
          <p class="no-stats">Stats file not available yet.</p>
        {% endif %}
      </div>

    </aside>

  </div>

  <script>
    // Chart.js initialization
      const ctx = document.getElementById('hourChart').getContext('2d');
  window.hourChart = new Chart(ctx, {
    type: 'bar',
    data: { 
      labels: {{ hour_labels|tojson }},
      datasets: [{
        label: 'Entries per hour',
        data: {{ hours|tojson }},
        backgroundColor: 'rgba(54, 162, 235, 0.5)',
        borderColor:   'rgb(54, 162, 235)',
        borderWidth: 1
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y: { beginAtZero: true, title: { display: true, text: 'Number of logs' } },
        x: { title: { display: true, text: 'Hour of Day' } }
      }
    }
  });

  </script>
</body>
</html>

