{% extends '@Commercial/commercial/layout.html.twig' %}

{% block commercial_title %}Dashboard commercial{% endblock %}

{% block commercial_content %}
<div class="commercial-dashboard" data-controller="commercial-dashboard">
  <div class="dashboard-shell" data-commercial-dashboard-target="shell">
    <header class="dashboard-topbar">
      <div class="dashboard-title">
        <h1>Vue d'ensemble</h1>
        <p>{{ dashboard.filters.periodLabel }} · {{ dashboard.filters.rangeLabel }}</p>
      </div>
      <div class="dashboard-actions">
        {% for action in dashboard.quickActions %}
          <a class="capsule-button capsule-button--secondary" href="{{ path(action.route, action.params) }}" data-turbo-frame="_top">
            <i class="ti ti-plus" aria-hidden="true"></i>{{ action.label }}
          </a>
        {% endfor %}
      </div>
    </header>

    <form class="dashboard-filters" method="get" action="{{ path('commercial_dashboard_index') }}"
          data-turbo-frame="_top" data-commercial-dashboard-target="form" data-action="change->commercial-dashboard#submit">
      <div class="filter-field">
        <label class="filter-label" for="dashboard-period">Période</label>
        <select class="filter-control" id="dashboard-period" name="period">
          <option value="today" {{ dashboard.filters.period == 'today' ? 'selected' : '' }}>Aujourd'hui</option>
          <option value="week" {{ dashboard.filters.period == 'week' ? 'selected' : '' }}>Cette semaine</option>
          <option value="month" {{ dashboard.filters.period == 'month' ? 'selected' : '' }}>Ce mois</option>
          <option value="year" {{ dashboard.filters.period == 'year' ? 'selected' : '' }}>Cette année</option>
        </select>
      </div>
      <div class="filter-field">
        <label class="filter-label" for="dashboard-scope">Vue</label>
        <select class="filter-control" id="dashboard-scope" name="scope">
          {% if dashboard.filters.canViewGlobal %}<option value="all" {{ dashboard.filters.scope == 'all' ? 'selected' : '' }}>Toute l'équipe</option>{% endif %}
          <option value="mine" {{ dashboard.filters.scope == 'mine' ? 'selected' : '' }}>Mes données</option>
        </select>
      </div>
      {% if dashboard.filters.canViewGlobal %}
        <div class="filter-field">
          <label class="filter-label" for="dashboard-commercial">Commercial</label>
          <select class="filter-control" id="dashboard-commercial" name="commercial">
            <option value="">Tous</option>
            {% for commercial in dashboard.filters.commercials %}
              <option value="{{ commercial.id }}" {{ dashboard.filters.commercialId == commercial.id ? 'selected' : '' }}>{{ commercial.prenom }} {{ commercial.nom }}</option>
            {% endfor %}
          </select>
        </div>
      {% endif %}
      <button class="quick-btn light" type="submit"><i class="ti ti-adjustments" aria-hidden="true"></i>Actualiser</button>
      <span class="dashboard-loading" data-commercial-dashboard-target="loading" hidden><span class="spinner-border spinner-border-sm"></span> Mise à jour…</span>
    </form>

    {% include '@Commercial/commercial_dashboard/_kpis.html.twig' %}

    <div class="row g-4">
      {% if dashboard.annualComparison %}<div class="col-12">{% include '@Commercial/commercial_dashboard/_annual_comparison.html.twig' %}</div>{% endif %}
      <div class="col-12 col-xl-6">{% include '@Commercial/commercial_dashboard/_pipeline.html.twig' %}</div>
      <div class="col-12 col-xl-6">{% include '@Commercial/commercial_dashboard/_followups.html.twig' %}</div>
      <div class="col-12 col-xl-6">{% include '@Commercial/commercial_dashboard/_quotes.html.twig' %}</div>
      <div class="col-12 col-xl-6">{% include '@Commercial/commercial_dashboard/_invoices.html.twig' %}</div>
      <div class="col-12 col-xl-6">{% include '@Commercial/commercial_dashboard/_actions_today.html.twig' %}</div>
      <div class="col-12 col-xl-6">{% include '@Commercial/commercial_dashboard/_agenda.html.twig' %}</div>
      <div class="col-12 col-xl-6">{% include '@Commercial/commercial_dashboard/_performance.html.twig' %}</div>
      <div class="col-12 col-xl-6">{% include '@Commercial/commercial_dashboard/_forecast.html.twig' %}</div>
      <div class="col-12">{% include '@Commercial/commercial_dashboard/_alerts.html.twig' %}</div>
    </div>
  </div>
</div>
{% endblock %}