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

{% 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-building text-success me-2"></i> {{ title }}</h1>
        <p class="text-muted mb-0">Управление клиентами вашей организации</p>
    </div>
    <div class="d-flex gap-2">
        {# Кнопки экспорта и импорта #}
        <div class="btn-group">
            <a href="{{ base_url('/clients/export?format=csv') }}" class="btn btn-outline-success" title="Экспорт CSV">
                <i class="fa-solid fa-file-csv me-1"></i>CSV
            </a>
            <a href="{{ base_url('/clients/export?format=xlsx') }}" class="btn btn-outline-success" title="Экспорт Excel">
                <i class="fa-solid fa-file-excel me-1"></i>Excel
            </a>
        </div>
        <a href="{{ base_url('/clients/import') }}" class="btn btn-outline-primary" title="Импорт клиентов">
            <i class="fa-solid fa-file-import me-1"></i>Импорт
        </a>
        
        {% if can_create %}
        <a href="{{ base_url('/clients/new') }}" class="btn btn-primary">
            <i class="fa-solid fa-plus me-2"></i>Добавить клиента
        </a>
        {% endif %}
    </div>
</div>

<div class="card shadow-sm">
    <div class="card-header bg-white py-3">
        <div class="d-flex align-items-center justify-content-between">
            <div class="text-muted small">
                Нажмите на <i class="fa-solid fa-search text-muted"></i> для поиска по столбцу
            </div>
        </div>
    </div>

    <div id="clients-table">
        {{ tableHtml|raw }}
        {# CSRF токен для AJAX запросов #}
        {{ csrf_field()|raw }}
    </div>
</div>

{# Модальное окно просмотра клиента #}
{% include '@Clients/_client_modal.twig' %}
{% endblock %}

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

{% block scripts %}
{{ parent() }}
<script src="/assets/js/modules/DataTable.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Инициализация DataTable
    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 %}