{% extends "default_content_page.html" %}
{% load static %}


{% block title %}{% if object %}Редагувати контакт{% else %}Додати контакт{% endif %}{% endblock %}

{% block navigation %}
    <!-- Ваша навігація -->
{% endblock %}

{% block content-title %}{% if object %}Редагувати контакт{% else %}Додати контакт{% endif %}{% endblock %}

{% block content-inner %}
<div class="card shadow mb-4">
    <div class="card-body">
        <form method="post" action="">
            {% csrf_token %}
            {{ form.non_field_errors }}

            <!-- Поля форми контактної особи -->
            <div class="form-group">
                {{ form.surname.label_tag }}
                {{ form.surname }}
                {{ form.surname.errors }}
            </div>
            <div class="form-group">
                {{ form.name.label_tag }}
                {{ form.name }}
                {{ form.name.errors }}
            </div>
            <div class="form-group">
                {{ form.father_name.label_tag }}
                {{ form.father_name }}
                {{ form.father_name.errors }}
            </div>
            <div class="form-group">
                {{ form.position.label_tag }}
                {{ form.position }}
                {{ form.position.errors }}
            </div>
            <div class="form-group">
                {{ form.birth_date.label_tag }}
                {{ form.birth_date }}
                {{ form.birth_date.errors }}
            </div>

            <!-- Поле для вибору фермерських господарств -->
            <div class="form-group">
                {{ form.farmers.label_tag }}
                {{ form.farmers }}
                {{ form.farmers.errors }}
            </div>

            <!-- Formset для контактних деталей -->
            {{ formset.management_form }}
            <div id="contact-details">
                {% for form in formset %}
                    <div class="contact-detail-form">
                        {{ form.id }}
                        {{ form.non_field_errors }}
                        <!-- Рендеримо всі поля форми, включаючи DELETE -->
                        {{ form.as_p }}
                    </div>
                    <hr/>
                {% endfor %}
            </div>
            <button type="button" id="add-contact-detail-form" class="btn btn-secondary">Додати контактну інформацію</button>
            <br><br>
            <button type="submit" class="btn btn-primary">Зберегти</button>
            {% if object %}
                <a href="{% url 'contacts:contact_person_detail' object.pk %}" class="btn btn-secondary">Скасувати</a>
            {% else %}
                <a href="{% url 'contacts:contact_person_list' %}" class="btn btn-secondary">Скасувати</a>
            {% endif %}
        </form>
    </div>
</div>

<!-- Шаблон порожньої форми для динамічного додавання -->
<div id="empty-form" style="display: none;">
    <div class="contact-detail-form">
        {{ formset.empty_form.non_field_errors }}
        <div class="form-group">
            {{ formset.empty_form.contact_type.label_tag }}
            {{ formset.empty_form.contact_type }}
            {{ formset.empty_form.contact_type.errors }}
        </div>
        <div class="form-group">
            {{ formset.empty_form.value.label_tag }}
            {{ formset.empty_form.value }}
            {{ formset.empty_form.value.errors }}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script type="text/javascript">
    $(document).ready(function() {
        var formIdx = {{ formset.total_form_count }};
        $('#add-contact-detail-form').click(function() {
            var emptyFormHtml = $('#empty-form').html().replace(/__prefix__/g, formIdx);
            $('#contact-details').append(emptyFormHtml);
            formIdx++;
            // Оновлюємо кількість форм у менеджменті
            $('#id_contactdetail_set-TOTAL_FORMS').val(formIdx);
        });
    });
</script>

<!-- Ініціалізація Select2 для поля фермерів -->
<script type="text/javascript">
    $(document).ready(function() {
        $('#id_farmers').select2({
            language: "uk",
            ajax: {
                url: "{% url 'farmer-autocomplete' %}",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        q: params.term, // Термін пошуку
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    return {
                        results: data.results
                    };
                },
                cache: true
            },
            minimumInputLength: 1,
            placeholder: 'Виберіть фермерські господарства',
            allowClear: true,
        });
    });
</script>
{% endblock %}