{% extends "default_content_page.html" %}

{% block title %}{{ farmer.name }}{% endblock %}
{% block content-title %}{{ farmer.name }}{% endblock %}

{% block navigation %}
    <li class="nav-item active">
        <a class="nav-link" href="{% url 'home' %}">
            <i class="fa-solid fa-house"></i>
            <span>Головна сторінка</span>
        </a>
    </li>
{% endblock %}

{% block content-inner %}
    <div class="farmer-detail">
        <script>
            $(document).ready(function() {
                function getCookie(name) {
                    var cookieValue = null;
                    if (document.cookie && document.cookie !== '') {
                        var cookies = document.cookie.split(';');
                        for (var i = 0; i < cookies.length; i++) {
                            var cookie = cookies[i].trim();
                            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                                break;
                            }
                        }
                    }
                    return cookieValue;
                }
                var csrfToken = getCookie('csrftoken');

                $.ajaxSetup({
                    beforeSend: function(xhr, settings) {
                        if (!(/^GET|HEAD|OPTIONS|TRACE$/i.test(settings.type)) && !this.crossDomain) {
                            xhr.setRequestHeader("X-CSRFToken", csrfToken);
                        }
                    }
                });

                // Редагування полів фермера
                $(document).on('click', '.edit-btn', function() {
                    var field = $(this).siblings('.editable-field');
                    field.attr('contenteditable', 'true').addClass('editable');
                    $(this).html('<i class="fa-solid fa-floppy-disk fa-lg"></i>')
                           .removeClass('edit-btn')
                           .addClass('save-btn');
                });

                $(document).on('click', '.save-btn', function() {
                    var field = $(this).siblings('.editable-field');
                    var fieldValue = field.text().trim();
                    var fieldName = $(this).data('field');
                    var farmerId = '{{ farmer.id }}';
                    var $this = $(this);

                    $.ajax({
                        type: 'POST',
                        url: "{% url 'dataapp:edit_farmer' farmer.id %}",
                        data: {
                            field_name: fieldName,
                            field_value: fieldValue
                        },
                        success: function(response) {
                            if (response.success) {
                                field.attr('contenteditable', 'false').removeClass('editable');
                                $this.html('<i class="fa-solid fa-pen-to-square fa-lg"></i>')
                                     .removeClass('save-btn')
                                     .addClass('edit-btn');
                            } else {
                                alert('Помилка: ' + response.error);
                            }
                        },
                        error: function(xhr, errmsg, err) {
                            console.log('Помилка AJAX:', errmsg);
                        }
                    });
                });

                // Додавання існуючої контактної особи через модальне вікно
                $(document).on('click', '#add-existing-contact-person', function() {
                    $.ajax({
                        url: "{% url 'dataapp:add_existing_contact_person' farmer.id %}",
                        type: 'GET',
                        success: function(data) {
                            $('#modal-content').html(data.html);
                            $('#modal-window').modal('show');
                        },
                        error: function(xhr, errmsg, err) {
                            console.log('Помилка AJAX при додаванні існуючої контактної особи:', errmsg);
                        }
                    });
                });

                $('#modal-window').on('shown.bs.modal', function () {
                    window.__dal__initialize($('#modal-window'));
                    $('#modal-window').find('input.select2-search__field').focus();
                });

                $(document).on('submit', '#add-existing-contact-person-form', function(event) {
                    event.preventDefault();
                    var form = $(this);
                    $.ajax({
                        url: "{% url 'dataapp:add_existing_contact_person' farmer.id %}",
                        data: form.serialize(),
                        type: 'POST',
                        success: function(data) {
                            if (data.success) {
                                $('#contact-persons-list').append(data.html);
                                $('#modal-window').modal('hide');
                            } else {
                                $('#modal-content').html(data.html);
                                window.__dal__initialize($('#modal-window'));
                            }
                        },
                        error: function(xhr, errmsg, err) {
                            console.log('Помилка AJAX при відправці форми існуючої контактної особи:', errmsg);
                        }
                    });
                });

                // Перехід на сторінку додавання нової контактної особи
                $(document).on('click', '#add-new-contact-person', function() {
                    var url = $(this).data('url');
                    window.location.href = url;
                });

                // Обробка форми додавання контактної особи через AJAX
                $(document).on('submit', '#contact-person-form', function(event) {
                    event.preventDefault();
                    var form = $(this);
                    $.ajax({
                        url: "{% url 'contacts:add_contact_person_with_farmer' farmer.id %}",
                        data: form.serialize(),
                        type: 'POST',
                        success: function(data) {
                            if (data.success) {
                                $('#contact-persons-list').append(data.html);
                                $('#modal-window').modal('hide');
                            } else {
                                $('#modal-content').html(data.html);
                            }
                        },
                        error: function(xhr, errmsg, err) {
                            console.log('Помилка AJAX при відправці форми контактної особи:', errmsg);
                        }
                    });
                });
            });
        </script>

        <!-- Група кнопок для навігації -->
        <div class="btn-group mb-4" role="group" aria-label="Navigation">
            <a href="#general-info" class="btn btn-primary active" aria-current="page">Загальна інформація</a>
            <a href="#land-bank" class="btn btn-primary">Земельний банк</a>
        </div>

        <!-- Загальна інформація -->
        <div id="general-info" class="section">
            <div class="card shadow mb-4">
                <div class="card-header">
                    <h5>Загальна інформація</h5>
                </div>
                <div class="card-body">
                    <!-- Вміст загальної інформації -->
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <p><b>ЄДРПОУ:</b> {{ farmer.erdpou }}</p>
                            </div>
                            <div class="col">
                                <p><b>КОД ПДВ:</b> {{ farmer.kod_pdv }}</p>
                            </div>
                        </div>
                    </div>
                    <hr/>
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <p><b>Район:</b> {{ farmer.district }}</p>
                            </div>
                            <div class="col">
                                <p><b>Область:</b> {{ farmer.region }}</p>
                            </div>
                        </div>
                    </div>
                    <hr/>
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <p><b>Адреса:</b> {{ farmer.address }}</p>
                            </div>
                        </div>
                    </div>
                    <hr/>
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <p><b>Директор:</b> {{ farmer.director }}</p>
                            </div>
                        </div>
                    </div>
                    <hr/>
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <h4>Контактні особи:</h4>
                            </div>
                        </div>
                    </div>
                    <hr/>
                    <div id="contact-persons-list">
                        {% if contact_persons %}
                            {% for contact_person in contact_persons %}
                                {% include 'contacts/contact_person_item.html' with contact_person=contact_person %}
                            {% endfor %}
                        {% else %}
                            <div class="container">
                                <div class="row">
                                    <div class="col">
                                        <p>Немає контактних осіб для цього фермера.</p>
                                    </div>
                                </div>
                            </div>
                            <hr/>
                        {% endif %}
                    </div>
                    <div class="container mb-4">
                        <div class="row">
                            <div class="col">
                                <button id="add-existing-contact-person" class="btn btn-secondary">Додати існуючу контактну особу</button>
                                <button id="add-new-contact-person" class="btn btn-primary" data-url="{% url 'contacts:add_contact_person_with_farmer' farmer.id %}">Додати нову контактну особу</button>
                            </div>
                        </div>
                    </div>
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <p><b>Дата реєстрації:</b> {{ farmer.registration_at }}</p>
                            </div>
                        </div>
                    </div>
                    <hr/>
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <p><b>Опис:</b> {{ farmer.description }}</p>
                            </div>
                        </div>
                    </div>
                    <hr/>
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <p><b>Назва:</b> {{ farmer.name }}</p>
                            </div>
                        </div>
                    </div>
                    <hr/>
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <p><b>Коротка назва:</b> {{ farmer.short_name }}</p>
                            </div>
                        </div>
                    </div>
                    <hr/>
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <p><b>atu code:</b> {{ farmer.atu_code }}</p>
                            </div>
                            <div class="col">
                                <p><b>record_number:</b> {{ farmer.record_number }}</p>
                            </div>
                            <div class="col">
                                <p><b>record_date:</b> {{ farmer.record_date }}</p>
                            </div>
                        </div>
                    </div>
                    <hr/>
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <p><b>org_s_status:</b> {{ farmer.org_s_status }}</p>
                            </div>
                            <div class="col">
                                <p><b>Земельний банк:</b> {{ farmer.landing_area }}</p>
                            </div>
                            <div class="col">
                                <p><b>Статутний капітал:</b> {{ farmer.statut_kapital }}</p>
                            </div>
                        </div>
                    </div>
                    <hr/>

                    <!-- Editable Fields -->
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <p><i class="fa-solid fa-at"></i> <b>Електронна адреса:</b>
                                    <span id="email" class="editable-field">{{ farmer.email }}</span>
                                    <a class="edit-btn" data-field="email" href="javascript:void(0);">
                                        <i class="fa-solid fa-pen-to-square fa-lg" style="color: #1565C0;"></i>
                                    </a>
                                </p>
                            </div>
                            <div class="col">
                                <p><i class="fa-solid fa-globe"></i> <b>Веб сайт:</b>
                                    <span id="website" class="editable-field">{{ farmer.website }}</span>
                                    <a class="edit-btn" data-field="website" href="javascript:void(0);">
                                        <i class="fa-solid fa-pen-to-square fa-lg" style="color: #1565C0;"></i>
                                    </a>
                                </p>
                            </div>
                        </div>
                    </div>
                    <hr/>
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <p><i class="fa-solid fa-phone"></i> <b>Телефон 1:</b>
                                    <span id="phone-1" class="editable-field">{{ farmer.phone_1 }}</span>
                                    <a class="edit-btn" data-field="phone_1" href="javascript:void(0);">
                                        <i class="fa-solid fa-pen-to-square fa-lg" style="color: #1565C0;"></i>
                                    </a>
                                </p>
                            </div>
                            <div class="col">
                                <p><i class="fa-solid fa-phone"></i> <b>Телефон 2:</b>
                                    <span id="phone-2" class="editable-field">{{ farmer.phone_2 }}</span>
                                    <a class="edit-btn" data-field="phone_2" href="javascript:void(0);">
                                        <i class="fa-solid fa-pen-to-square fa-lg" style="color: #1565C0;"></i>
                                    </a>
                                </p>
                            </div>
                        </div>
                    </div>
                    <hr/>
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <p><i class="fa-solid fa-phone"></i> <b>Телефон 3:</b>
                                    <span id="phone-3" class="editable-field">{{ farmer.phone_3 }}</span>
                                    <a class="edit-btn" data-field="phone_3" href="javascript:void(0);">
                                        <i class="fa-solid fa-pen-to-square fa-lg" style="color: #1565C0;"></i>
                                    </a>
                                </p>
                            </div>
                            <div class="col">
                                <p><i class="fa-solid fa-phone"></i> <b>Телефон 4:</b>
                                    <span id="phone-4" class="editable-field">{{ farmer.phone_4 }}</span>
                                    <a class="edit-btn" data-field="phone_4" href="javascript:void(0);">
                                        <i class="fa-solid fa-pen-to-square fa-lg" style="color: #1565C0;"></i>
                                    </a>
                                </p>
                            </div>
                        </div>
                    </div>
                    <hr/>
                </div> <!-- /.card-body -->
            </div> <!-- /.card -->
        </div> <!-- #general-info -->

        <!-- Земельний банк -->
        <div id="land-bank" class="section">
            <div class="card shadow mb-4">
                <div class="card-header">
                    <h5>Земельний банк</h5>
                </div>
                <div class="card-body">
                    <p><b>Загальна кількість ділянок:</b> {{ landing_fields_count }}</p>
                    <p><b>Земельний банк:</b> {{ farmer.landing_area }} га</p>
                    <div class="row">
                        {% for landing_field in catalog_landing_fields %}
                            <div class="card" style="width: 18rem; margin-right: 15px; margin-bottom: 15px;">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item"><strong>Назва культури:</strong> {{ landing_field.cultureable_name }}</li>
                                    <li class="list-group-item"><strong>Одиниці виміру:</strong> {{ landing_field.cultureable_units }}</li>
                                    <li class="list-group-item"><strong>Площа:</strong> {{ landing_field.culture_area }}</li>
                                </ul>
                            </div>
                        {% endfor %}
                    </div>
                </div> <!-- /.card-body -->
            </div> <!-- /.card -->
        </div> <!-- #land-bank -->

        <!-- Модальне вікно -->
        <div class="modal fade" id="modal-window" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true" data-bs-focus="false">
            <div class="modal-dialog modal-lg">
                <div class="modal-content" id="modal-content">
                    <!-- Контент модального вікна завантажується через AJAX -->
                </div>
            </div>
        </div>
    </div> <!-- /.farmer-detail -->
{% endblock %}