{% extends "showcase/cabinet/base_cabinet.html" %}

{% block title %}Reports — Analytics{% endblock %}

{% block sidebar_title %}
<span class="bi bi-graph-up fs-5" style="color: var(--cab-primary);"></span>
<span class="cab-sidebar__title ms-2 fw-semibold text-white" style="font-size: 1rem; white-space: nowrap;">Analytics</span>
{% endblock %}

{% block sidebar_nav %}
<li>
  <a href="{% url 'codex_showcase:dashboard' %}" class="cab-nav__item d-flex align-items-center px-3 py-2 rounded mx-2" style="color: var(--cab-sidebar-text); transition: background 0.15s;">
    <span class="bi bi-grid fs-5 flex-shrink-0"></span>
    <span class="cab-nav__label ms-3" style="white-space: nowrap;">Dashboard</span>
  </a>
</li>
<li>
  <a href="{% url 'codex_showcase:reports' %}" class="cab-nav__item cab-nav__item--active d-flex align-items-center px-3 py-2 rounded mx-2" style="color: var(--cab-sidebar-text); transition: background 0.15s;">
    <span class="bi bi-table fs-5 flex-shrink-0"></span>
    <span class="cab-nav__label ms-3" style="white-space: nowrap;">Reports</span>
  </a>
</li>
{% endblock %}

{% block cabinet_content %}
<div x-data="{ showExport: false }">

{% include "showcase/cabinet/includes/_page_header.html" with title="Reports" subtitle=period_label %}

{% include "showcase/cabinet/includes/_report_filters.html" %}

{# ── KPI strip — reuse dashboard kpi widget ── #}
<div class="row g-3 mb-4">
  <div class="col-md-3 col-6">{% include "showcase/cabinet/widgets/kpi.html" with title="Revenue" value=table_summary.total_revenue trend="" trend_label="for "|add:period_label icon="bi-cash-stack" %}</div>
  <div class="col-md-3 col-6">{% include "showcase/cabinet/widgets/kpi.html" with title="Bookings" value=table_summary.total_bookings trend="" trend_label="working days: "|add:table_summary.working_days icon="bi-calendar-check" %}</div>
  <div class="col-md-3 col-6">{% include "showcase/cabinet/widgets/kpi.html" with title="Average check" value=table_summary.avg_check trend="" trend_label="per booking" icon="bi-receipt" %}</div>
  <div class="col-md-3 col-6">{% include "showcase/cabinet/widgets/kpi.html" with title="Best day" value=table_summary.best_day trend=table_summary.best_day_val trend_label="" icon="bi-trophy" %}</div>
</div>

{# ── Data table — universal widget ── #}
{% include "showcase/cabinet/widgets/table.html" with columns=columns rows=rows summary=summary_row striped="is_weekend" bar_key="revenue_fmt" bar_max=bar_max %}

{% include "showcase/cabinet/includes/_export_modal.html" %}

</div>
{% endblock %}