{% extends 'layouts/base.twig' %}

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

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 mb-0"><i class="fa-solid fa-file-contract text-primary me-2"></i>{{ title }}</h1>
        <p class="text-muted mb-0">
            Всего: {{ items|length }} |
            Открыто: {{ stats.open_count }} на {{ stats.open_total|number_format(0, ',', ' ') }} ₽
        </p>
    </div>
    <a href="{{ site_url('/crm/deals/new') }}" class="btn btn-primary">
        <i class="fa-solid fa-plus me-2"></i>Новая сделка
    </a>
</div>

{# Переключатель видов #}
<ul class="nav nav-tabs mb-4">
    <li class="nav-item">
        <a class="nav-link active" href="{{ site_url('/crm/deals') }}">
            <i class="fa-solid fa-list me-2"></i>Список
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ site_url('/crm/deals/kanban') }}">
            <i class="fa-solid fa-columns me-2"></i>Канбан
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ site_url('/crm/deals/calendar') }}">
            <i class="fa-solid fa-calendar me-2"></i>Календарь
        </a>
    </li>
</ul>

<div class="card shadow-sm">
    <div class="card-body p-0">
        {{ tableHtml|raw }}
        {# CSRF токен для AJAX запросов #}
        {{ csrf_field()|raw }}
    </div>
</div>
{% endblock %}

{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="/assets/css/modules/data-table.css">
{% endblock %}

{% block scripts %}
{{ parent() }}
<script src="{{ site_url('/assets/js/modules/DataTable.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.data-table').forEach(function(container) {
        const id = container.id;
        const url = container.dataset.url;
        const perPage = parseInt(container.dataset.perPage) || 10;

        if (window.dataTables && window.dataTables[id]) {
            return;
        }

        const table = new DataTable(id, {
            url: url,
            perPage: perPage
        });

        window.dataTables = window.dataTables || {};
        window.dataTables[id] = table;
    });
});
</script>
{% endblock %}