@extends('admin.layout.master')

@section('content')
<div class="content datatable">
    <div class="p-4 code-to-copy">
        <div class="row">
            <div class="col-md-9 col-lg-9 col-sm-12 col-xs-12">
                <div class="card shadow-none border">
                    <div class="card-header p-4 border-bottom bg-body">
                        <h4 class="text-body mb-0">Manage Category Fields</h4>
                    </div>
                    <div class="card-body p-0">
                        <div class="p-4 code-to-copy">
                            <form method="POST" action="{{ route('admin.categories.fields') }}" id="main-form">
                                @csrf
                                <label>Select Category:</label>
                                <select name="category_id" id="category_id" class="form-control mb-3" required>
                                    <option value="">-- Select Category--</option>
                                    @foreach ($categories as $cat)
                                        <option value="{{ $cat->id }}" {{ isset($category) && $category->id == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                                    @endforeach
                                </select>

                                <div id="dynamic-fields" style="display: none;">
                                    <div id="groups-container"></div>
                                    <button type="button" class="btn btn-outline-primary mt-2" onclick="addGroup('groups-container')">+ Add Fields</button>
                                    <br><br>
                                    <button type="submit" class="btn btn-success">Save</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>  
    </div>
</div>
<script>
    window.existingFields = @json($fields ?? []);
</script>
<script>
let groupCounter = 0;

document.addEventListener('DOMContentLoaded', function () {
    const categorySelect = document.getElementById('category_id');
    const dynamicFields = document.getElementById('dynamic-fields');

    if (categorySelect.value !== "") {
        dynamicFields.style.display = 'block';
        // If edit mode with saved fields
        if (window.existingFields && window.existingFields.length > 0) {
            renderSavedGroups(existingFields, 'groups-container');
        }
    }
});

document.getElementById('category_id').addEventListener('change', function() {
    const selected = this.value;
    if (selected) {
        document.getElementById('dynamic-fields').style.display = 'block';
        document.getElementById('groups-container').innerHTML = '';
        groupCounter = 0; // reset
    } else {
        document.getElementById('dynamic-fields').style.display = 'none';
    }
});

function addGroup(containerId) {
    const container = document.getElementById(containerId);
    const groupId = groupCounter++;
    const div = document.createElement('div');
    div.className = 'group-block border p-3 mt-3';
    div.id = `wrapper-${groupId}`;
    div.innerHTML = buildGroupFields(`groups[${groupId}]`, groupId);
    container.appendChild(div);
}

function buildGroupFields(namePrefix, idSuffix) {
    return `
       <div class="field-group position-relative" id="group-${idSuffix}">
        <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0 m-1" onclick="removeGroup(${idSuffix})">
                &times;
        </button>
        <label><strong>Choose Type:</strong></label><br>
        <label class="mt-2"><input type="radio" name="${namePrefix}[type]" value="text" onchange="toggleFields(this, '${namePrefix}', '${idSuffix}')"> Subchild </label> 
        <label class="mt-2" style="margin-left: 15px;"><input type="radio" name="${namePrefix}[type]" value="description" onchange="toggleFields(this, '${namePrefix}', '${idSuffix}')"> Description </label>
        <div class="fields mt-2" id="fields-${idSuffix}">
           </div>
        </div>
    `;
}

function removeGroup(idSuffix) {
    const wrapper = document.getElementById(`wrapper-${idSuffix}`);
    if (wrapper) {
        wrapper.style.transition = "opacity 0.2s ease";
        wrapper.style.opacity = 0;
        setTimeout(() => wrapper.remove(), 200);
    }
}

function toggleFields(radio, namePrefix, idSuffix) {
    const fieldsDiv = document.getElementById(`fields-${idSuffix}`);
    fieldsDiv.innerHTML = '';

    const currentGroup = document.getElementById(`group-${idSuffix}`);
    const parentGroup = currentGroup?.closest('.nested-group')?.parentElement?.closest('.field-group');

    if (radio.value === 'text') {
        fieldsDiv.innerHTML = buildTextField(namePrefix, idSuffix);

        // Re-enable parent's Add Nested button
        if (parentGroup) {
            const btn = parentGroup.querySelector('button.btn-secondary');
            if (btn) btn.style.display = 'inline-block';
        }

    } else if (radio.value === 'description') {
        const textareaId = `summernote-${idSuffix}`;

        if (tinymce.get(textareaId)) {
            tinymce.get(textareaId).remove();
        }
        
        fieldsDiv.innerHTML = `
            <div class="mb-2">
                <label>Video Link</label>
                <input type="text" name="${namePrefix}[video_link]" placeholder="Enter link" class="form-control">
            </div>
            <div>
                <label>Description</label>
            <textarea name="${namePrefix}[description]" placeholder="Enter description" class="form-control summernote" id="${textareaId}"></textarea>
            </div>`;

           tinymce.init({
                selector: `#${textareaId}`,
                height: 300,
                menubar: false,
                plugins: [
                    'advlist autolink lists link image charmap print preview anchor',
                    'searchreplace visualblocks code fullscreen',
                    'insertdatetime media table paste code help wordcount'
                ],
                toolbar: "aligncenter alignjustify alignleft alignnone alignright| anchor | blockquote blocks | backcolor | bold | copy | cut | fontfamily fontsize forecolor h1 h2 h3 h4 h5 h6 hr indent | italic | language | lineheight | newdocument | outdent | paste pastetext | print | redo | remove removeformat | selectall | strikethrough | styles | subscript superscript underline | undo | visualaid | a11ycheck advtablerownumbering typopgraphy anchor restoredraft casechange charmap checklist code codesample addcomment showcomments ltr rtl editimage fliph flipv imageoptions rotateleft rotateright emoticons export footnotes footnotesupdate formatpainter fullscreen help image insertdatetime link openlink unlink bullist numlist media mergetags mergetags_list nonbreaking pagebreak pageembed permanentpen preview quickimage quicklink quicktable cancel save searchreplace spellcheckdialog spellchecker | table tablecellprops tablecopyrow tablecutrow tabledelete tabledeletecol tabledeleterow tableinsertdialog tableinsertcolafter tableinsertcolbefore tableinsertrowafter tableinsertrowbefore tablemergecells tablepasterowafter tablepasterowbefore tableprops tablerowprops tablesplitcells tableclass tablecellclass tablecellvalign tablecellborderwidth tablecellborderstyle tablecaption tablecellbackgroundcolor tablecellbordercolor tablerowheader tablecolheader | tableofcontents tableofcontentsupdate | template typography | insertfile | visualblocks visualchars | wordcount",
                content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
            });

        // Hide parent's Add Nested button
        if (parentGroup) {
            const btn = parentGroup.querySelector('button.btn-secondary');
            if (btn) btn.style.display = 'none';
        }
    }
}


function buildTextField(namePrefix, idSuffix) {
    return `
        <div class="value-inputs">
            <input type="text" name="${namePrefix}[values][]" placeholder="Enter value" class="form-control my-1">
        </div>
        <button type="button" class="btn btn-sm btn-secondary" onclick="addNested('${namePrefix}', '${idSuffix}', this)">+ Add Nested</button>
    `;
}

function addNested(parentPrefix, parentId, btn) {
    // Ensure parent is of type 'text'
    const selectedRadio = document.querySelector(`input[name="${parentPrefix}[type]"]:checked`);
    if (!selectedRadio || selectedRadio.value !== 'text') {
        alert("Cannot add nested fields inside a Description type.");
        return;
    }

    const container = document.createElement('div');
    const nestedId = groupCounter++;
    container.className = 'nested-group ms-4 border p-2 mt-2';
    container.id = `wrapper-${nestedId}`; 
    container.innerHTML = buildGroupFields(`${parentPrefix}[children][${nestedId}]`, nestedId);
    btn.parentNode.appendChild(container);
}
</script>
<script>
function renderSavedGroups(groups, containerId, parentPrefix = 'groups') {
    const container = document.getElementById(containerId);

    groups.forEach(group => {
        const groupId = groupCounter++;
        const wrapper = document.createElement('div');
        wrapper.className = 'group-block border p-3 mt-3';
        wrapper.id = `wrapper-${groupId}`;

        const namePrefix = `${parentPrefix}[${groupId}]`;

        wrapper.innerHTML = buildGroupFields(namePrefix, groupId);
        container.appendChild(wrapper);

        // Set type radio
        const typeRadio = wrapper.querySelector(`input[value="${group.type}"]`);
        if (typeRadio) {
            typeRadio.checked = true;
            toggleFields(typeRadio, namePrefix, groupId);
        }

        const fieldsDiv = wrapper.querySelector(`#fields-${groupId}`);

        if (group.type === 'text') {
            const input = fieldsDiv.querySelector('input[name^="' + namePrefix + '[values]"]');
            if (input && group.value) {
                input.value = group.value;
            }
        } else if (group.type === 'description') {
            const descTextarea = fieldsDiv.querySelector(`textarea[name="${namePrefix}[description]"]`);
            if (descTextarea && group.description) {
                descTextarea.value = group.description;
            }

            const videoInput = fieldsDiv.querySelector(`input[name="${namePrefix}[video_link]"]`);
            if (videoInput && group.video_link) {
                videoInput.value = group.video_link;
            }

            // Trigger TinyMCE update after short delay
            setTimeout(() => {
                const editor = tinymce.get(descTextarea.id);
                if (editor) {
                    editor.setContent(group.description || '');
                }
            }, 300);
        }

        // Render nested children recursively
        if (group.children && group.children.length > 0) {
            const nestedContainer = document.createElement('div');
            nestedContainer.id = `wrapper-${groupId}`;
            fieldsDiv.appendChild(nestedContainer);

            renderSavedGroups(group.children, nestedContainer.id, `${namePrefix}[children]`);
        }
    });
}
</script>
@endsection