{% extends "layout.html" %}

{% block title %}Sales & Revenue{% endblock %}

{% block content %}
<div class="centered-header" data-aos="fade-up" data-aos-duration="800">
  <h1 class="gradient-text">Sales & Revenue</h1>
  <p>Here you’ll see revenue stats and daily breakdown.</p>
</div>

<div class="stat-wrapper" data-aos="fade-up" data-aos-duration="800">
  <div class="date-toggle">
    <button class="date-btn active">Today</button>
    <button class="date-btn">Yesterday</button>
    <button class="date-btn">Week</button>
    <button class="date-btn">Month</button>
    <button class="date-btn" id="dateRangeInput"><i class="fas fa-calendar-alt"></i> Time</button>
  </div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<div class="stat-wrapper hide-on-mobile" data-aos="fade-up" style="max-width: 60%; margin: 30px auto 0;">
  <canvas id="salesLineChart" height="120"></canvas>
</div>

<input type="text" id="salesDateRangeInput" style="display:none;" />

<div class="stat-wrapper" data-aos="fade-up" data-aos-duration="800">
  <div class="stat-box"><h2 id="sales-total-revenue">$0</h2><p>Total Revenue</p></div>
  <div class="stat-box"><h2 id="sales-cash-collected">$0</h2><p>Cash Collected</p></div>
  <div class="stat-box"><h2 id="sales-total-sales">0</h2><p>Total Sales</p></div>
  <div class="stat-box"><h2 id="sales-full-payment">0</h2><p>Full Payment</p></div>
  <div class="stat-box"><h2 id="sales-deposit">0</h2><p>Deposit</p></div>
  <div class="stat-box" style="flex-basis: 100%; background: transparent; height: 30px; box-shadow: none; border: none; text-align: center; margin: 10px 0;">
    <h2 style="font-size: 100px; font-weight: 800; color: #000000;"><p>LOCATION SOLD</p></h2>
  </div>
  <div class="stat-box"><h2 id="sales-location-mansion">0</h2><p>The Mansion</p></div>
  <div class="stat-box"><h2 id="sales-location-melati">0</h2><p>Melati</p></div>
  <div class="stat-box"><h2 id="sales-location-yoga">0</h2><p>Yoga Amertham</p></div>
  <div class="stat-box"><h2 id="sales-location-pelaga">0</h2><p>Pelaga</p></div>
</div>

<script src="{{ url_for('static', filename='js/sales_toggle.js') }}"></script>
{% endblock %}