{% extends "base.html" %}
{% block extra_head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<link rel="stylesheet" href="/static/css/analytics.css?v=1" />
{% endblock %}
{% block content %}
<div class="analytics-shell" x-data="analyticsHub()" x-init="init()">
  <header class="page-header">
    <div>
      <h1>Analytics Command Center <span class="live-badge" x-text="liveLabel">Live</span></h1>
      <p class="subtitle">Volledige database analyse · filter · charts · realtime</p>
      <small class="muted" x-text="'Laatst: '+updatedAt"></small>
    </div>
    <div class="retail-actions">
      <button class="btn btn-sm btn-pulse" @click="refresh()" :disabled="loading">↻ Ververs</button>
      <a class="btn btn-sm" href="/">Herman →</a>
      <a class="btn btn-sm btn-pulse-green" href="/retail">Retail 360 →</a>
    </div>
  </header>

  <aside class="analytics-filters panel">
    <h3>Filters</h3>
    <label>Keten<select x-model="f.chain" @change="refresh()"><option value="">Alle</option>
      <template x-for="c in meta.chains||[]" :key="c.chain"><option :value="c.chain" x-text="c.chain"></option></template>
    </select></label>
    <label>Provincie<select x-model="f.province" @change="refresh()"><option value="">Alle</option>
      <template x-for="p in meta.provinces||[]" :key="p.province"><option :value="p.province" x-text="p.province"></option></template>
    </select></label>
    <label>Deal stage<select x-model="f.stage" @change="refresh()"><option value="">Alle</option>
      <template x-for="s in meta.deal_stages||[]" :key="s.stage"><option :value="s.stage" x-text="s.stage"></option></template>
    </select></label>
    <label>Agent<select x-model="f.agent" @change="refresh()"><option value="">Alle</option>
      <template x-for="a in meta.agents||[]" :key="a.agent_name"><option :value="a.agent_name" x-text="a.agent_name"></option></template>
    </select></label>
    <label>Periode (dagen)<input type="number" min="7" max="365" x-model.number="f.days" @change="refresh()"></label>
    <button class="btn btn-sm btn-block" @click="resetFilters()">Reset</button>
  </aside>

  <div class="analytics-main">
    <div class="kpi-row analytics-kpis" id="analytics-kpis"></div>

    <div class="analytics-charts">
      <div class="panel chart-panel"><h4>Pipeline per stage</h4><canvas id="chart-deals"></canvas></div>
      <div class="panel chart-panel"><h4>Klanten per stage</h4><canvas id="chart-clients"></canvas></div>
      <div class="panel chart-panel"><h4>Supermarkten per keten</h4><canvas id="chart-chains"></canvas></div>
      <div class="panel chart-panel"><h4>Provincie verdeling</h4><canvas id="chart-provinces"></canvas></div>
      <div class="panel chart-panel"><h4>CRM partnerships</h4><canvas id="chart-partnerships"></canvas></div>
      <div class="panel chart-panel"><h4>Agent activiteit</h4><canvas id="chart-agents"></canvas></div>
      <div class="panel chart-panel"><h4>Events timeline</h4><canvas id="chart-timeline"></canvas></div>
      <div class="panel chart-panel"><h4>RSS per categorie</h4><canvas id="chart-rss"></canvas></div>
      <div class="panel chart-panel"><h4>Groothandels provincie</h4><canvas id="chart-wholesale"></canvas></div>
      <div class="panel chart-panel"><h4>NAS sentiment</h4><canvas id="chart-sentiment"></canvas></div>
      <div class="panel chart-panel"><h4>Top woorden NAS</h4><canvas id="chart-words"></canvas></div>
      <div class="panel chart-panel"><h4>Halal kansen top 10</h4><canvas id="chart-opportunities"></canvas></div>
      <div class="panel chart-panel"><h4>Actieve promo folders</h4><canvas id="chart-promo"></canvas></div>
      <div class="panel chart-panel"><h4>Milestones status</h4><canvas id="chart-milestones"></canvas></div>
    </div>

    <div class="grid-2">
      <section class="panel"><h2>Recente deals</h2>
        <table class="data-table"><thead><tr><th>Titel</th><th>Stage</th><th>Waarde</th></tr></thead>
        <tbody id="analytics-deals-table"></tbody></table>
      </section>
      <section class="panel"><h2>Agent events</h2>
        <table class="data-table"><thead><tr><th>Agent</th><th>Event</th><th>Tijd</th></tr></thead>
        <tbody id="analytics-events-table"></tbody></table>
      </section>
    </div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>window.ANALYTICS_INITIAL = {{ initial_data | tojson }};</script>
<script src="/static/js/analytics.js?v=2"></script>
{% endblock %}