{{--
    Partial: JS конструктора полей веб-формы
    Включается через @include внутри @push('js') admin/forms/edit.blade.php
    Переменные Blade: $form, $services
--}}
<script>
(function () {
    // Начальные данные полей из PHP (при редактировании)
    var initialFields = @json($form->fields ?? []);

    // Список активных услуг из БД — для подстановки в варианты select-полей
    var availableServices = @json($services ?? []);

    var container  = document.getElementById('fieldsContainer');
    var emptyState = document.getElementById('fieldsEmpty');
    var fieldsJson = document.getElementById('fieldsJson');

    // Обновить слаг из названия формы
    var titleInput = document.getElementById('formTitle');
    var slugInput  = document.getElementById('formSlug');
    var shortcodeHint = document.getElementById('shortcodeHint');
    if (!slugInput.value) {
        titleInput.addEventListener('input', function () {
            slugInput.value = this.value.toLowerCase()
                .replace(/\s+/g, '-').replace(/[^a-z0-9\-_]/g, '').replace(/-+/g, '-');
        });
    }
    slugInput.addEventListener('input', function () {
        shortcodeHint.textContent = '<x-web-form slug="' + this.value + '" />';
    });

    // Отрисовка одного поля
    function renderField(f, index) {
        var isSelect   = f.type === 'select';
        var isCheckbox = f.type === 'checkbox';
        var row = document.createElement('div');
        row.className = 'field-row border-bottom p-3';
        row.dataset.index = index;
        row.innerHTML = `
            <div class="d-flex align-items-center justify-content-between mb-2">
                <span class="badge badge-secondary field-num">#${index + 1}</span>
                <div>
                    <button type="button" class="btn btn-xs btn-default btn-move" data-dir="-1" title="Вверх"><i class="fas fa-arrow-up"></i></button>
                    <button type="button" class="btn btn-xs btn-default btn-move ml-1" data-dir="1" title="Вниз"><i class="fas fa-arrow-down"></i></button>
                    <button type="button" class="btn btn-xs btn-danger btn-remove ml-1" title="Удалить"><i class="fas fa-times"></i></button>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group mb-2">
                        <label class="small mb-1">Подпись</label>
                        <input type="text" class="form-control form-control-sm f-label" value="${escHtml(f.label || '')}" placeholder="Имя">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group mb-2">
                        <label class="small mb-1">Тип</label>
                        <select class="form-control form-control-sm f-type">
                            ${['text','tel','email','select','textarea','checkbox'].map(t =>
                                `<option value="${t}" ${f.type === t ? 'selected' : ''}>${t}</option>`
                            ).join('')}
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group mb-2">
                        <label class="small mb-1">Ширина</label>
                        <select class="form-control form-control-sm f-width">
                            <option value="full" ${(f.width||'full') === 'full' ? 'selected' : ''}>full</option>
                            <option value="half" ${f.width === 'half' ? 'selected' : ''}>half</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group mb-2">
                        <label class="small mb-1">Имя поля (name)</label>
                        <input type="text" class="form-control form-control-sm f-name" value="${escHtml(f.name || '')}" placeholder="auto">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2 d-flex align-items-center">
                    <div class="custom-control custom-checkbox mt-1">
                        <input type="checkbox" class="custom-control-input f-required" id="req_${index}" ${f.required ? 'checked' : ''}>
                        <label class="custom-control-label small" for="req_${index}">Обязательное</label>
                    </div>
                </div>
                <div class="col-md-10">
                    <div class="f-options-wrap" style="display:${isSelect ? 'block' : 'none'}">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <label class="small mb-0">Варианты (каждый с новой строки)</label>
                            ${availableServices.length > 0 ? '<button type="button" class="btn btn-xs btn-outline-info btn-from-services" title="Подтянуть из раздела Услуги"><i class="fas fa-list"></i> Из услуг</button>' : ''}
                        </div>
                        <textarea class="form-control form-control-sm f-options" rows="3" placeholder="Вариант 1&#10;Вариант 2">${escHtml((f.options || []).join('\n'))}</textarea>
                    </div>
                </div>
            </div>
        `;

        // Авто-заполнение name из label
        var labelEl = row.querySelector('.f-label');
        var nameEl  = row.querySelector('.f-name');
        labelEl.addEventListener('input', function () {
            if (!nameEl.dataset.manual) {
                nameEl.value = this.value.toLowerCase()
                    .replace(/\s+/g, '_').replace(/[^a-z0-9_]/g, '');
            }
        });
        nameEl.addEventListener('input', function () {
            this.dataset.manual = '1';
        });

        // Показать/скрыть options при смене типа
        var typeEl  = row.querySelector('.f-type');
        var optWrap = row.querySelector('.f-options-wrap');
        typeEl.addEventListener('change', function () {
            optWrap.style.display = this.value === 'select' ? 'block' : 'none';
        });

        // Кнопка «Из услуг» — добавляет услуги из раздела в textarea вариантов
        var fromServicesBtn = row.querySelector('.btn-from-services');
        if (fromServicesBtn) {
            fromServicesBtn.addEventListener('click', function () {
                var textarea = row.querySelector('.f-options');
                var existing = textarea.value.split('\n').map(function (s) { return s.trim(); }).filter(Boolean);
                var toAdd = availableServices.filter(function (s) { return existing.indexOf(s) === -1; });
                textarea.value = existing.concat(toAdd).join('\n');
                textarea.focus();
            });
        }

        // Кнопки перемещения
        row.querySelectorAll('.btn-move').forEach(function (btn) {
            btn.addEventListener('click', function () {
                moveField(row, parseInt(this.dataset.dir));
            });
        });

        // Кнопка удаления
        row.querySelector('.btn-remove').addEventListener('click', function () {
            row.remove();
            reindex();
        });

        return row;
    }

    function addField(f) {
        f = f || { label: '', name: '', type: 'text', width: 'full', required: false, options: [] };
        var index = container.children.length;
        container.appendChild(renderField(f, index));
        emptyState.style.display = 'none';
    }

    function moveField(row, dir) {
        if (dir === -1 && row.previousElementSibling) {
            container.insertBefore(row, row.previousElementSibling);
        } else if (dir === 1 && row.nextElementSibling) {
            container.insertBefore(row.nextElementSibling, row);
        }
        reindex();
    }

    function reindex() {
        Array.from(container.children).forEach(function (row, i) {
            row.dataset.index = i;
            var badge = row.querySelector('.field-num');
            if (badge) badge.textContent = '#' + (i + 1);
            var reqCb = row.querySelector('.f-required');
            if (reqCb) reqCb.id = 'req_' + i;
            var reqLbl = row.querySelector('.custom-control-label');
            if (reqLbl) reqLbl.setAttribute('for', 'req_' + i);
        });
        emptyState.style.display = container.children.length === 0 ? 'block' : 'none';
    }

    // Сериализация полей в JSON перед отправкой
    document.getElementById('formEditor').addEventListener('submit', function () {
        var fields = Array.from(container.children).map(function (row) {
            var type    = row.querySelector('.f-type').value;
            var options = type === 'select'
                ? row.querySelector('.f-options').value.split('\n').map(s => s.trim()).filter(Boolean)
                : [];
            return {
                label:    row.querySelector('.f-label').value.trim(),
                name:     row.querySelector('.f-name').value.trim() || slugify(row.querySelector('.f-label').value),
                type:     type,
                width:    row.querySelector('.f-width').value,
                required: row.querySelector('.f-required').checked,
                options:  options,
            };
        });
        fieldsJson.value = JSON.stringify(fields);
    });

    function slugify(str) {
        return str.toLowerCase().replace(/\s+/g, '_').replace(/[^a-z0-9_]/g, '');
    }

    function escHtml(str) {
        return String(str).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    }

    // Инициализация: отрисовываем начальные поля
    document.getElementById('addFieldBtn').addEventListener('click', function () { addField(); });

    if (initialFields.length > 0) {
        initialFields.forEach(function (f) { addField(f); });
    } else {
        emptyState.style.display = 'block';
    }
})();
</script>
