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

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 mb-0">Клиенты</h1>
        <p class="text-muted mb-0">Управление клиентами вашей организации</p>
    </div>
    <a href="{{ base_url('/clients/new') }}" class="btn btn-primary">
        <i class="fa-solid fa-plus me-2"></i>Добавить клиента
    </a>
</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>

    {# Формируем строки таблицы из клиентов #}
    {% set tableRows = [] %}
    {% if clients is defined and clients|length > 0 %}
        {% for client in clients %}
            {% set tableRows = tableRows|merge([{
                cells: [
                    {
                        content: '<div class="d-flex align-items-center">
                            <div class="bg-primary text-white rounded-circle d-flex justify-content-center align-items-center me-3" style="width:40px;height:40px;">' ~ client.name|first|upper ~ '</div>
                            <div><strong>' ~ client.name ~ '</strong>' ~ (client.notes ? '<br><small class="text-muted">' ~ client.notes|slice(0, 50) ~ (client.notes|length > 50 ? '...' : '') ~ '</small>') ~ '</div>
                        </div>',
                        class: ''
                    },
                    {
                        content: client.email ? '<a href="mailto:' ~ client.email ~ '">' ~ client.email ~ '</a>' : '<span class="text-muted">—</span>',
                        class: ''
                    },
                    {
                        content: client.phone ? '<a href="tel:' ~ client.phone ~ '">' ~ client.phone ~ '</a>' : '<span class="text-muted">—</span>',
                        class: ''
                    }
                ],
                actions: '<a href="' ~ base_url('/clients/edit/' ~ client.id) ~ '" class="btn btn-sm btn-outline-primary" title="Редактировать"><i class="fa-solid fa-pen"></i></a>
                          <a href="' ~ base_url('/clients/delete/' ~ client.id) ~ '" class="btn btn-sm btn-outline-danger" title="Удалить" onclick="return confirm(\'Вы уверены что хотите удалить этого клиента?\');"><i class="fa-solid fa-trash"></i></a>'
            }]) %}
        {% endfor %}
    {% endif %}

    <div id="clients-table">
        {{ include('@components/table/table.twig', {
            id: 'clients-table',
            url: '/clients/table',
            perPage: perPage|default(10),
            sort: sort|default(''),
            order: order|default('asc'),
            filters: filters|default({}),
            columns: {
                name: { label: 'Имя / Название', width: '40%' },
                email: { label: 'Email', width: '25%' },
                phone: { label: 'Телефон', width: '20%' }
            },
            rows: tableRows,
            pagerDetails: {
                currentPage: pagerDetails.currentPage|default(1),
                pageCount: pagerDetails.pageCount|default(1),
                total: pagerDetails.total|default(0),
                perPage: perPage|default(10),
                from: pagerDetails.from|default(1),
                to: pagerDetails.to|default(clients|length|default(0))
            },
            actions: { label: 'Действия', width: '15%' },
            emptyMessage: 'Клиентов пока нет',
            emptyIcon: 'fa-solid fa-users',
            emptyActionUrl: base_url('/clients/new'),
            emptyActionLabel: 'Добавить клиента',
            emptyActionIcon: 'fa-solid fa-plus'
        }) }}
        {# 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="/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 %}