document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('tbody td:nth-child(4)').forEach(cell => {
        cell.addEventListener('click', function (e) {
            if (e.target.tagName === 'BUTTON' || e.target.tagName === 'TEXTAREA') return;
            if (this.querySelector('form')) return;

            this.dataset.originalText = this.textContent.trim();

            const form = document.createElement('form');
            form.innerHTML = `
                  <textarea rows="4" class="form-control">${this.textContent.trim()}</textarea>
                  <div>
                    <button type="submit" class="btn btn-sm btn-outline-danger save-value mt-2">Сохранить</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary cancel-edit mt-2">Отмена</button>
                  </div>
                `;
            this.innerHTML = '';
            this.appendChild(form);
            form.querySelector('textarea').focus();
        });
    })

    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('cancel-edit')) {
            const form = e.target.closest('form');
            const td = form.closest('td');

            td.textContent = form.querySelector('textarea').value;
            td.textContent = td.dataset.originalText || '';
        }
    });

    document.addEventListener('click', function(e) {
        if (e.target && e.target.matches('button.save-value')) {
            e.preventDefault();

            const button = e.target;
            const form = button.closest('form');

            if (!form) return;

            const textarea = form.querySelector('textarea');
            const td = form.closest('td');
            const productId = td.closest('tr').dataset.id;

            button.disabled = true;
            button.textContent = 'Сохранение...';

            fetch(`/site-main-page/menu/product/${productId}/change-description`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': window.Laravel.csrfToken,
                },
                body: JSON.stringify({description: textarea.value})
            })
                .then(response => {
                    if (!response.ok) throw response;
                    return response.json();
                })
                .then(data => {
                    td.textContent = data.description || '';
                    delete td.dataset.originalText;
                    form.remove();

                    showToast(data.message, true);
                })
                .catch(async (error) => {
                    let message = "Неизвестная ошибка";
                    try {
                        if (error instanceof Response) {
                            const data = await error.json();
                            message = data.message || data.error || "Ошибка сервера";
                        } else if (error.message) {
                            message = error.message;
                        }
                    } catch (e) {
                        message = "Ошибка обработки ответа";
                    }

                    showToast(message, false);
                })
                .finally(() => {
                    button.disabled = false;
                    button.textContent = 'Сохранить';
                });
        }
    });

    function showToast(message, isSuccess) {
        Toastify({
            text: message,
            duration: 3000,
            gravity: "top",
            position: "right",
            backgroundColor: isSuccess ? "#4CAF50" : "#f44336",
        }).showToast();
    }
});