jQuery(document).ready(function ($) {

    function updateJSON() {
        var fields = [];
        $('#sincotechs-fields-list .sincotechs-field-item').each(function () {
            var $item = $(this);
            var options_raw = $item.find('.sincotechs-field-options').val().trim();
            var options = [];
            if (options_raw.length > 0) {
                options = options_raw.split(',').map(function (s) {
                    return s.trim();
                }).filter(function (s) {
                    return s.length > 0;
                });
            }

            fields.push({
                label: $item.find('.sincotechs-field-label').val(),
                name:  $item.find('.sincotechs-field-name').val(),
                type:  $item.find('.sincotechs-field-type').val(),
                required: $item.find('.sincotechs-field-required').is(':checked') ? 1 : 0,
                options: options,
                cond_field: $item.find('.sincotechs-cond-field').val(),
                cond_value: $item.find('.sincotechs-cond-value').val()
            });
        });

        $('#sincotechs-fields-json').val(JSON.stringify(fields));
    }

    $('#sincotechs-fields-list').sortable({
        handle: '.sincotechs-drag-handle',
        update: updateJSON
    });

    $('#sincotechs-add-field').on('click', function () {
        var $list = $('#sincotechs-fields-list');
        var $li = $('<li class="sincotechs-field-item">' +
            '<span class="sincotechs-drag-handle">☰</span>' +
            '<input type="text" class="sincotechs-field-label" placeholder="Label">' +
            '<input type="text" class="sincotechs-field-name" placeholder="Name (slug)">' +
            '<select class="sincotechs-field-type">' +
                '<option value="text">Text</option>' +
                '<option value="email">Email</option>' +
                '<option value="textarea">Textarea</option>' +
                '<option value="select">Dropdown</option>' +
                '<option value="file">File Upload</option>' +
            '</select>' +
            '<label class="sincotechs-inline"><input type="checkbox" class="sincotechs-field-required"> Required</label>' +
            '<input type="text" class="sincotechs-field-options" placeholder="Options (for dropdown only, comma separated)">' +
            '<div class="sincotechs-conditional-wrapper">' +
                '<span>Show this field when</span>' +
                '<input type="text" class="sincotechs-cond-field" placeholder="Field name">' +
                '<span>equals</span>' +
                '<input type="text" class="sincotechs-cond-value" placeholder="Value">' +
            '</div>' +
            '<button type="button" class="button sincotechs-remove-field">Remove</button>' +
        '</li>');

        $list.append($li);
        updateJSON();
    });

    $('#sincotechs-fields-list').on('click', '.sincotechs-remove-field', function () {
        $(this).closest('.sincotechs-field-item').remove();
        updateJSON();
    });

    $('#sincotechs-fields-list').on('change keyup', 'input, select', function () {
        updateJSON();
    });

    // Initial sync
    updateJSON();
});
