{% extends "layout.html" %}

{% block title %}CRM{% endblock %}

{% block content %}
<div class="centered-header" data-aos="fade-up" data-aos-duration="800">
    <h1 class="gradient-text">CRM Overview</h1>
    <p>Here you’ll see leads, and leads status.</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>

<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

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

<!-- Hidden input for Flatpickr -->
<input type="text" id="dateRangeInput" style="display:none;" />

<!-- Stat box DINAMIS berdasarkan toggle -->
<div class="stat-wrapper" data-aos="fade-up" data-aos-duration="800">
  <div class="stat-box">
    <h2 id="lead-count-dynamic">0</h2>
    <p>Leads</p>
  </div>
  <!-- Tambahan: Breakdown Cold / Warm / Hot -->
  <div class="stat-box">
    <h2 id="cold-count">0</h2>
    <p>Cold</p>
  </div>
  <div class="stat-box">
    <h2 id="warm-count">0</h2>
    <p>Warm</p>
  </div>
  <div class="stat-box">
    <h2 id="hot-count">0</h2>
    <p>Hot</p>
  </div>
</div>

{% endblock %}