{% extends 'layouts/base.twig' %}
{% import 'macros/forms.twig' as forms %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-10">
        <div class="card shadow-sm">
            <div class="card-header bg-white py-3">
                <div class="d-flex align-items-center">
                    <a href="{{ base_url('/clients') }}" class="btn btn-outline-secondary me-3">
                        <i class="fa-solid fa-arrow-left"></i>
                    </a>
                    <div>
                        <h1 class="h4 mb-0">{{ title }}</h1>
                    </div>
                </div>
            </div>

            <div class="card-body">
                {{ forms.form_open(client ? base_url('/clients/update/' ~ client.id) : base_url('/clients/create')) }}

                {# Табы #}
                <ul class="nav nav-tabs mb-4" role="tablist">
                    <li class="nav-item">
                        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-main" type="button">
                            <i class="fa-solid fa-building me-2"></i>Основное
                        </button>
                    </li>
                    {% if crm_active %}
                    <li class="nav-item">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-contacts" type="button">
                            <i class="fa-solid fa-users me-2"></i>Контакты
                            <span class="badge bg-primary ms-1" id="contacts-count">0</span>
                        </button>
                    </li>
                    {% endif %}
                </ul>

                {# Содержимое табов #}
                <div class="tab-content">
                    {# Таб "Основное" #}
                    <div class="tab-pane fade show active" id="tab-main" role="tabpanel">
                        <div class="mb-3">
                            <label for="name" class="form-label fw-bold">Имя / Название *</label>
                            <input type="text" name="name" id="name" class="form-control {{ errors.name ? 'is-invalid' : '' }}"
                                   value="{{ old.name ?? client.name ?? '' }}" required autofocus>
                            {% if errors.name %}
                                <div class="invalid-feedback">{{ errors.name }}</div>
                            {% endif %}
                            <div class="form-text">ФИО клиента или название компании</div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="email" class="form-label">Email</label>
                                <input type="email" name="email" id="email" class="form-control {{ errors.email ? 'is-invalid' : '' }}"
                                       value="{{ old.email ?? client.email ?? '' }}">
                                {% if errors.email %}
                                    <div class="invalid-feedback">{{ errors.email }}</div>
                                {% endif %}
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="phone" class="form-label">Телефон</label>
                                <input type="tel" name="phone" id="phone" class="form-control {{ errors.phone ? 'is-invalid' : '' }}"
                                       value="{{ old.phone ?? client.phone ?? '' }}">
                                {% if errors.phone %}
                                    <div class="invalid-feedback">{{ errors.phone }}</div>
                                {% endif %}
                            </div>
                        </div>

                        <div class="mb-4">
                            <label for="notes" class="form-label">Заметки</label>
                            <textarea name="notes" id="notes" rows="4" class="form-control {{ errors.notes ? 'is-invalid' : '' }}"
                                      placeholder="Дополнительная информация о клиенте...">{{ old.notes ?? client.notes ?? '' }}</textarea>
                            {% if errors.notes %}
                                <div class="invalid-feedback">{{ errors.notes }}</div>
                            {% endif %}
                        </div>
                    </div>

                    {# Таб "Контакты" (только при активном CRM) #}
                    {% if crm_active %}
                    <div class="tab-pane fade" id="tab-contacts" role="tabpanel">
                        <input type="hidden" name="customer_id" value="{{ client.id }}">

                        {# Скрипт инициализации контактов подключаем в конце #}
                        <div id="contacts-container"
                             data-client-id="{{ client.id }}"
                             data-api-url="{{ base_url('/crm/contacts') }}"
                             data-csrf-token="{{ csrf_hash }}">
                            {# Таблица контактов загружается через AJAX #}
                            <div class="text-center py-5">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">Загрузка...</span>
                                </div>
                                <p class="text-muted mt-2">Загрузка контактов...</p>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                </div>

                <div class="d-flex justify-content-end gap-2 pt-3 border-top mt-4">
                    <a href="{{ base_url('/clients') }}" class="btn btn-secondary">Отмена</a>
                    <button type="submit" class="btn btn-primary">
                        <i class="fa-solid fa-check me-2"></i>
                        {{ client ? 'Сохранить изменения' : 'Добавить клиента' }}
                    </button>
                </div>
                {{ forms.form_close() }}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{# Inline-редактирование контактов #}
{% if crm_active %}
<script src="{{ base_url('/assets/js/modules/contacts.js') }}"></script>
{% endif %}
{% endblock %}