@extends('operations.layout.mainlayout')
@section('content')
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid card">
            <div class="row mb-2">
                <div class="col-sm-6 card-body">
                    <h1 class="m-0 text-dark" style="color: var(--blazma-text)!important;">@if(!empty($test->NAME_EN)){{$test->NAME_EN}} @else Edit Test @endif</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="/operations">Home</a></li>
                        <li class="breadcrumb-item active">Test Details</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="mx-auto col-md-8">
                    <div class="card">
                        <div class="card-body">
                            <ul class="nav nav-tabs" id="custom-content-below-tab" role="tablist" style="margin-bottom: 15px;">
                                <li class="nav-item">
                                    <a class="nav-link active" style="color: #007bff !important;@if(empty($test->NAME_EN)) color:#a9a9a9 !important; @endif" id="custom-content-below-home-tab" data-toggle="pill" href="#custom-content-below-home" role="tab" aria-controls="custom-content-below-home" aria-selected="true">Test Information</a>
                                </li>
                            </ul>

                            <div class="tab-content" id="custom-content-below-tabContent">
                                <div class="tab-pane fade active show" id="custom-content-below-home" role="tabpanel" aria-labelledby="custom-content-below-home-tab">
                                    <form method="post" action="/operations/questionnaire/form-builder" enctype="multipart/form-data" id="questionnaire-formBuilder-form">
                                        <input id="questionnaire_id" type="hidden" name="questionnaire_id" value="@if(!empty($questionnaire->ID)){{$questionnaire->ID}}@endif">
                                        <div class="row">
                                            <div class="col-md-12 mb-3">
                                                <h4>Questionnaire: {{$questionnaire->NAME_EN}}</h4>
                                            </div>
                                            <div id="fb-editor" style="width: 100%"></div>
                                        </div>
                                        <div class="row">
                                            <div class="col mt-5" style="text-align: center">
                                                @permission('manage_administration_questionnaire_builder')
                                                    <input style="width:130px" type="button" class="btn btn-info questionnaire-formBuilder-form-btn" value="Save Questions" />
                                                @endpermission
                                            </div>
                                        </div>
                                    </form>
                                    <!-- File Upload Modal for Download File Fields -->
                                    <div class="modal fade" id="downloadFileUploadModal" tabindex="-1" role="dialog" aria-labelledby="downloadFileUploadModalLabel" aria-hidden="true">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="downloadFileUploadModalLabel">Upload File for Download Field</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <form id="downloadFileUploadForm">
                                                        <input type="hidden" id="questionIdForFile" name="question_id">
                                                        <div class="form-group">
                                                            <label for="downloadFile">Select File to Upload:</label>
                                                            <input type="file" class="form-control" id="downloadFile" name="download_file" required>
                                                        </div>
                                                    </form>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                    <button type="button" class="btn btn-primary" id="saveDownloadFileBtn">Upload File</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection

@section('footer-scripts')
    <script src="/js/jquery-ui.min.js"></script>
    <script src="/js/form-builder.min.js"></script>
<script>
    jQuery(function($) {
        var fbEditor = document.getElementById('fb-editor');
        var options = {
            disableHTMLLabels: true,
            disabledActionButtons: ['data', 'clear', 'save'],
            disableFields: ['autocomplete', 'checkbox-group', 'header', 'hidden', 'paragraph', 'starRating', 'button', 'radio-group'],
            disabledAttrs: ['access', 'inline', 'max', 'maxlength', 'min', 'name', 'other', 'placeholder', 'rows', 'step', 'style', 'subtype', 'toggle', 'value'],
            typeUserDisabledAttrs: {},
            // Add the custom field using the default field type but with special handling
            fields: [
                // Add the Download File field to the form builder
                {
                    label: 'Download File',
                    attrs: {
                        type: 'download-file',
                        name: 'download_file'
                    },
                    icon: '📎'
                }
            ],
            typeUserAttrs: function() {
                var attrs = {};
                var commonFieldTypes = ['text', 'date', 'select', 'textarea', 'number', 'file'];
                var commonConfig = {
                    className: { value: 'form-control' },
                    arLabel: { label: 'Ar-Label', value: '' },
                    isOneTime: { label: 'One Time', value: false, type: 'checkbox', checked: false },
                    hideFromReport: { label: 'Hide from Report', value: false, type: 'checkbox', checked: false }
                };
                commonFieldTypes.forEach(function(type) {
                    attrs[type] = JSON.parse(JSON.stringify(commonConfig));
                });
                attrs['download-file'] = {
                    label: { label: 'Field Label', value: 'Download File' },
                    name: { label: 'Name', value: 'download_file' },
                    required: { label: 'Required', value: false, type: 'checkbox' },
                    description: { label: 'Description', type: 'textarea' },
                    arLabel: { label: 'Ar-Label', value: '' },
                    className: { value: 'form-control' }
                };
                return attrs;
            }()
        };

        // Register the custom field template
        options.templates = options.templates || {};
        options.templates['download-file'] = function(fieldData) {
            var label = fieldData.label || 'Download File';
            var value = fieldData.name || 'download_file';
            var required = fieldData.required ? 'checked' : '';
            return {
                field: '<div class="form-group download-file-field"><label class="form-label">'+label+'</label><div class="input-group"><input type="text" class="form-control" data-field-type="download-file" value="Download File Field" disabled /><div class="input-group-append"><span class="input-group-text"><i class="fas fa-download"></i></span></div></div></div>',
                onRender: function(field) {
                    // This runs when the field is rendered in the form
                }
            };
        };

        // Add custom field attributes configuration to include file upload in edit panel
        if (!options.typeUserEvents) {
            options.typeUserEvents = {};
        }

        // Custom configuration for the edit panel of download file fields
        options.typeUserEvents['download-file'] = function(e, field) {
            // When a download-file field is edited, we can add custom behavior here if needed
        };

        var formBuilder = $(fbEditor).formBuilder(options);
        console.log(@json($formBuilderData))
        formBuilder.promise.then(function(fb) {
            // Add CSS to style the checkboxes
            var style = document.createElement('style');
            style.innerHTML = `
                .required-wrap, .isOneTime-wrap, .hideFromReport-wrap {
                    display: inline-block;
                    margin-right: 15px;
                    margin-bottom: 10px;
                }
                .isOneTime-wrap, .hideFromReport-wrap {
                    margin-left: 5px;
                }
                .fld-arLabel {
                    direction: rtl;
                    text-align: right;
                }
                .form-wrap.form-builder .frmb .sortable-options input.option-value[type=text] {
                    direction: rtl !important;
                    text-align: right !important;
                }
            `;
            document.head.appendChild(style);

            // Function to reorder the checkboxes
            function reorderCheckboxes() {
                $('.form-field').each(function() {
                    var $field = $(this);
                    var $required = $field.find('.required-wrap');
                    var $oneTime = $field.find('.isOneTime-wrap');
                    var $hideFromReport = $field.find('.hideFromReport-wrap');

                    if ($required.length && $oneTime.length) {
                        // Move One Time checkbox right after Required checkbox
                        $oneTime.insertAfter($required);
                    }

                    if ($oneTime.length && $hideFromReport.length) {
                        // Move Hide from Report checkbox right after One Time checkbox
                        $hideFromReport.insertAfter($oneTime);
                    }
                });
            }

            // Reorder checkboxes initially
            setTimeout(reorderCheckboxes, 100);

            // Reorder checkboxes when a field is added
            $(document).on('fieldAdded', function() {
                setTimeout(reorderCheckboxes, 100);
            });

            // Reorder checkboxes when field type is changed
            $(document).on('change', '.fld-type', function() {
                setTimeout(reorderCheckboxes, 100);
            });

            // Function to update the one-time label display
            function updateOneTimeLabel($field) {
                var $isOneTime = $field.find('.fld-isOneTime');
                var $label = $field.find('.field-label');

                // Remove any existing one-time label
                $field.find('.one-time-label').remove();

                // Add the one-time label if the checkbox is checked
                if ($isOneTime.is(':checked')) {
                    $label.after('<span class="one-time-label ml-2 badge badge-info">One Time Question</span>');
                }
            }

            // Function to update the hide-from-report label display
            function updateHideFromReportLabel($field) {
                var $hideFromReport = $field.find('.fld-hideFromReport');
                var $label = $field.find('.field-label');

                // Remove any existing hide-from-report label
                $field.find('.hide-from-report-label').remove();

                // Add the hide-from-report label if the checkbox is checked
                if ($hideFromReport.is(':checked')) {
                    $label.after('<span class="hide-from-report-label ml-2 badge badge-warning">Hidden from Report</span>');
                }
            }

            // Function to apply bilingual labels to edit panels
            function initBilingualEditPanel() {
                // Rename "Label" to "Eng-Label" in field edit panels
                $('.form-field .field-label[for="fld-label"], .form-field label:contains("Label")').each(function() {
                    var $this = $(this);
                    if ($this.text().trim() === 'Label' && $this.closest('.form-field').length) {
                        $this.text('Eng-Label');
                    }
                });

                // Move arLabel wrap right after label wrap
                $('.form-elements').each(function() {
                    var $arLabel = $(this).find('.arLabel-wrap');
                    var $label = $(this).find('.label-wrap');
                    if ($arLabel.length && $label.length && $label.next().is($arLabel) === false) {
                        $label.after($arLabel);
                    }
                });

                // Apply dir="rtl" to arLabel inputs
                $('.fld-arLabel').attr('dir', 'rtl').css('text-align', 'right');

                // Label option columns and set placeholders
                $('.sortable-options').each(function() {
                    var $options = $(this);
                    // Add column headers if not already present
                    if (!$options.parent().find('.option-column-headers').length) {
                        var $headers = $('<div class="option-column-headers" style="display:flex;gap:4px;margin-bottom:4px;font-size:12px;font-weight:600">' +
                            '<span style="width:24px"></span>' +
                            '<span style="flex:1;padding-left:4px">English label</span>' +
                            '<span style="flex:1;padding-left:4px">Arabic Label</span>' +
                            '</div>');
                        $options.before($headers);
                    }
                    // Set placeholders and RTL on inputs
                    $options.find('.option-label input').attr('placeholder', 'English label');
                    $options.find('input.option-value').attr('placeholder', 'Arabic Label').attr('dir', 'rtl').css('text-align', 'right');
                });
            }

            // Re-apply bilingual labels whenever the edit panel changes
            $(document).on('click', '.form-field .field-actions .del-button, .form-field .field-actions .copy-button, .form-field .field-actions .edit-button, .toggle-form', function() {
                setTimeout(initBilingualEditPanel, 50);
            });

            // Update labels initially
            function updateAllFieldLabels() {
                $('.form-field').each(function() {
                    updateOneTimeLabel($(this));
                    updateHideFromReportLabel($(this));
                });
            }

            // Call immediately and also after a delay to ensure fields are fully rendered
            updateAllFieldLabels();
            initBilingualEditPanel();
            setTimeout(updateAllFieldLabels, 500);
            setTimeout(initBilingualEditPanel, 500);

            // Also update after form data is set
            fb.actions.setData(@json($formBuilderData ?? '[]'));
            setTimeout(updateAllFieldLabels, 500);
            setTimeout(initBilingualEditPanel, 500);

            // Update one-time label when the checkbox is changed
            $(document).on('change', '.fld-isOneTime', function() {
                updateOneTimeLabel($(this).closest('.form-field'));
            });

            // Update hide-from-report label when the checkbox is changed
            $(document).on('change', '.fld-hideFromReport', function() {
                updateHideFromReportLabel($(this).closest('.form-field'));
            });

            // Update labels when a field is added
            $(document).on('fieldAdded', function(event, field) {
                setTimeout(function() {
                    updateOneTimeLabel($(field));
                    updateHideFromReportLabel($(field));
                    initBilingualEditPanel();
                }, 200);
            });

            $('.questionnaire-formBuilder-form-btn').on('click', function(e) {
                e.preventDefault();
                var formBuilderData = fb.actions.save(false);

                $.ajax({
                    url: '/operations/questionnaire/form-builder',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        questionnaire_id: $('#questionnaire_id').val(),
                        formBuilderData: JSON.stringify(formBuilderData)
                    },
                    success: function(response) {
                        if(response.success) {
                            toastr.success('Questions saved successfully');
                        }
                    },
                    error: function(response) {
                        if(response && response.responseJSON && response.responseJSON.errorMessage) {
                            toastr.error(response.responseJSON.errorMessage);
                        } else {
                            toastr.error('Internal error encountered');
                        }
                    }
                });
            });

            // Use MutationObserver to detect when new form fields are added
            function initDownloadFileUploadButtons() {
                // Function to process existing and new fields
                function processFields() {
                    // Look for form fields that contain download file type using more comprehensive selectors
                    // Exclude elements from the control list (sidebar where you drag fields from)
                    $('.fb-preview .form-field, .form-builder .form-field, .frm-elements .form-field, .control-group, .fld-container, .form-elements .form-field, [data-type="download-file"], .download-file-field, .field-download-file').each(function() {
                        var fieldContainer = $(this);

                        // Skip if this is in the control list (sidebar where you drag fields from)
                        if (fieldContainer.closest('.frmb-control, .cb-wrap, .formbuilder-controls').length > 0) {
                            return; // Skip this element
                        }

                        // Look for indicators that this is a download file field
                        var isDownloadFile = false;

                        // Check if field has type attribute set to download-file
                        if (fieldContainer.data('type') === 'download-file' || fieldContainer.attr('data-type') === 'download-file') {
                            isDownloadFile = true;
                        }

                        // Check if field has type set to download-file in input attributes
                        if (!isDownloadFile && fieldContainer.find('input[value="download-file"]').length > 0) {
                            isDownloadFile = true;
                        }

                        // Check if field has class indicating download file type
                        if (!isDownloadFile && (fieldContainer.hasClass('download-file-field') || fieldContainer.hasClass('field-download-file') || fieldContainer.hasClass('field-download-file-type'))) {
                            isDownloadFile = true;
                        }

                        // Check if field has specific input with download-file type
                        if (!isDownloadFile && fieldContainer.find('input[type="hidden"][name$="[type]"][value="download-file"]').length > 0) {
                            isDownloadFile = true;
                        }

                        // Check if field label contains "Download File"
                        if (!isDownloadFile) {
                            var fieldLabel = fieldContainer.find('label, .field-label, .fld-label').first();
                            if (fieldLabel.length > 0 && fieldLabel.text().toLowerCase().includes('download file')) {
                                isDownloadFile = true;
                            }
                        }

                        // Check if field has a name that looks like download file
                        if (!isDownloadFile) {
                            var nameField = fieldContainer.find('input[name*="[name]"]');
                            if (nameField.length > 0 && nameField.val() && (nameField.val().includes('download-file') || nameField.val().includes('download_file'))) {
                                isDownloadFile = true;
                            }
                        }

                        // Check if container has class that contains download-file
                        if (!isDownloadFile) {
                            if (fieldContainer.attr('class') && fieldContainer.attr('class').toLowerCase().includes('download-file')) {
                                isDownloadFile = true;
                            }
                        }

                        // If this is a download file field and doesn't already have an upload button
                        if (isDownloadFile && fieldContainer.find('.upload-download-file-btn').length === 0) {
                            var nameInput = fieldContainer.find('input[name*="[name]"]').first();
                            var questionName = nameInput.val() || 'download_file_' + Date.now();

                            // Add upload button - only inside the field container
                            var uploadBtn = $('<button type="button" class="btn btn-sm btn-primary upload-download-file-btn ml-2 mt-1">Upload File</button>');
                            uploadBtn.attr('data-question-name', questionName);

                            // Add the button only inside the field container to avoid duplicates
                            // Find the appropriate place to insert the button
                            var inputGroup = fieldContainer.find('.input-group').last();
                            if (inputGroup.length > 0) {
                                inputGroup.append($('<div class="input-group-append">').append(uploadBtn));
                            } else {
                                var previewDiv = fieldContainer.find('.prev-holder').last();
                                if (previewDiv.length > 0) {
                                    previewDiv.append($('<div class="d-inline-block ml-2">').append(uploadBtn));
                                } else {
                                    fieldContainer.append($('<div class="d-inline-block ml-2">').append(uploadBtn));
                                }
                            }

                            // Add event handler for the upload button
                            uploadBtn.on('click', function() {
                                // Re-fetch the name when clicked to ensure we have the current value
                                var currentNameInput = fieldContainer.find('input[name*="[name]"]').first();
                                var currentQuestionName = currentNameInput.val();

                                // If no name found, try alternative selectors
                                if (!currentQuestionName) {
                                    currentNameInput = fieldContainer.find('input.fld-name, input.field-name, [data-name="name"]').first();
                                    currentQuestionName = currentNameInput.val();
                                }

                                // If still no name, use the stored name
                                if (!currentQuestionName) {
                                    currentQuestionName = questionName;
                                }

                                $('#questionIdForFile').val(currentQuestionName); // Use name to identify the field
                                $('#downloadFileUploadModal').modal('show');
                            });
                        }
                    });

                    // Remove any orphaned upload buttons that are not inside field containers
                    $('.upload-download-file-btn').each(function() {
                        var btn = $(this);
                        // If the button is not inside a field container, remove it
                        if (!btn.closest('.form-field, .control-group, .fld-container, [data-type="download-file"], .download-file-field, .field-download-file').length) {
                            btn.remove();
                        }
                    });
                }

                // Process fields immediately after a small delay to ensure DOM is ready
                setTimeout(processFields, 500);

                // Use MutationObserver to detect new fields being added
                var observer = new MutationObserver(function(mutations) {
                    var shouldProcess = false;
                    for (var i = 0; i < mutations.length; i++) {
                        if (mutations[i].addedNodes.length > 0) {
                            shouldProcess = true;
                            break;
                        }
                    }
                    if (shouldProcess) {
                        setTimeout(processFields, 100); // Small delay to let fields render
                    }
                });

                // Observe changes to the form builder container
                var formBuilderContainer = document.querySelector('#fb-editor') || document.querySelector('.formbuilder') || document.querySelector('body');
                if (formBuilderContainer) {
                    observer.observe(formBuilderContainer, {
                        childList: true,
                        subtree: true
                    });
                }

                // Run processFields again after additional time to catch any remaining fields
                setTimeout(processFields, 1500);
                setTimeout(processFields, 3000);
            }

            // Initialize after form builder is fully loaded
            setTimeout(initDownloadFileUploadButtons, 1000);

            // Watch for edit panel & options table changes to apply bilingual labels
            function initBilingualObserver() {
                var targetNode = document.querySelector('#fb-editor') || document.querySelector('.formbuilder') || document.querySelector('.fb-preview');
                if (!targetNode) return;
                var observer = new MutationObserver(function() {
                    setTimeout(initBilingualEditPanel, 50);
                });
                observer.observe(targetNode, { childList: true, subtree: true });
            }
            setTimeout(initBilingualObserver, 1000);
        });

        // Handle file upload button click
        $('#saveDownloadFileBtn').on('click', function() {
            var questionId = $('#questionIdForFile').val();
            var file = $('#downloadFile')[0].files[0];

            if (!questionId || !file) {
                toastr.error('Please select a file and question');
                return;
            }

            var formData = new FormData();
            formData.append('question_id', questionId);
            formData.append('download_file', file);

            $.ajax({
                url: '/operations/questionnaire/upload-download-file',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success) {
                        toastr.success('File uploaded successfully');
                        $('#downloadFileUploadModal').modal('hide');
                        $('#downloadFileUploadForm')[0].reset();
                    } else {
                        toastr.error(response.message || 'Error uploading file');
                    }
                },
                error: function() {
                    toastr.error('Error uploading file, Make sure to save the question first.');
                }
            });
        });
    });
</script>
@endsection