{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
    {{ $page_title }}
@endsection
<link rel="stylesheet" href="{{ asset('css/formio/app.css') . "?v=14022025" }}">
<style>
    /* .nav-item a[href="#data"], */
    .nav-item a[href="#api"],
    .nav-item a[href="#conditional"],
    .nav-item a[href="#logic"],
    .nav-item a[href="#layout"],
    .formio-component-errors,
    .formio-component-custom-validation-js,
    .formio-component-json-validation-json,
    .formio-component-errors,
    a[href*='help.form.io'],
    [ref="previewButton"],
    [data-value="s3"],
    [data-value="url"],
    [data-value="azure"],
    [data-value="indexeddb"],
    [data-value="googledrive"]
     {
        display: none !important;
    }

    .nav.nav-tabs {
        display: flex;
        flex-wrap: wrap;
    }

    :root {
        --tab-inactive-bg: #34495e;
        --tab-active-bg: #1e1e2d;
        --tab-hover-bg: #3d566e;
        --tab-text-color: rgba(255, 255, 255, 0.7);
        --tab-active-text-color: white;
    }

    /* Base styling for all tabs */
    .builder-sidebar .form-builder-group-header {
        background-color: var(--tab-active-bg) !important;
        color: var(--tab-active-text-color) !important;
        border: none !important;
        border-radius: 5px !important;
        margin: 2px 0 !important;
        padding: 10px 15px !important;
        transition: all 0.3s ease !important;
        cursor: pointer;
    }

    .builder-sidebar .form-builder-group-header [ref="sidebar-anchor"] {
        color: var(--tab-active-text-color) !important;
    }
    .drag-and-drop-alert {
        background-color: var(--tab-active-bg) !important;
        color: var(--tab-active-text-color) !important;
        /* border-color: var(--tab-active-bg) !important; */
    }

    .component-btn-group .component-settings-button {
        padding: 2px !important;
    }


    /* Card Styling */
    .formio-dialog .formio-dialog-content {
        background: white !important;
        border-radius: 8px !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
        padding: 20px !important;
        max-width: 1600px !important;
        width: 90% !important;
        margin: 0 auto !important;
    }

    /* Card Header */
    .formio-dialog .formio-dialog-header {
        background: #f8f9fa !important;
        border-bottom: 1px solid #e9ecef !important;
        border-radius: 8px 8px 0 0 !important;
        padding: 15px 20px !important;
        font-size: 1.25rem !important;
        font-weight: 500 !important;
        color: #495057 !important;
    }

    /* Card Body */
    .formio-dialog .formio-dialog-body {
        padding: 20px !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
    }

    /* Card Footer */
    .formio-dialog .formio-dialog-footer {
        background: #f8f9fa !important;
        border-top: 1px solid #e9ecef !important;
        border-radius: 0 0 8px 8px !important;
        padding: 15px 20px !important;
        text-align: right;
    }

    /* Buttons */
    .formio-dialog .formio-dialog-footer .btn {
        padding: 8px 16px !important;
        border-radius: 4px !important;
        font-size: 14px !important;
        cursor: pointer;
        margin-left: 10px !important;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    /* Primary Button */
    .formio-dialog .formio-dialog-footer .btn-primary {
        background-color: #007bff !important;
        border-color: #007bff !important;
        color: white !important;
    }

    .formio-dialog .formio-dialog-footer .btn-primary:hover {
        background-color: #0056b3 !important;
        border-color: #004085 !important;
    }

    /* Secondary Button */
    .formio-dialog .formio-dialog-footer .btn-secondary {
        background-color: #6c757d !important;
        border-color: #6c757d !important;
        color: white !important;
    }

    .formio-dialog .formio-dialog-footer .btn-secondary:hover {
        background-color: #5a6268 !important;
        border-color: #545b62 !important;
    }
</style>

{{-- Content --}}
@section('content')
    <!--begin::Card-->
    <form class="form" method="post" action="{{ $action }}" id="builder_form" enctype="multipart/form-data">
        @if (!empty($formDefinition['id']))
            @method('PUT')
        @endif
        @csrf
        <div class="card shadow-sm">
            <!--begin::Card header-->
            <div class="card-header card-header-tabs-line nav-tabs-line-3x">
                <!--begin::Toolbar-->
                <div class="card-toolbar">
                    <ul class="nav nav-tabs nav-line-tabs nav-stretch fs-6 border-0">
                        <!--begin::Item-->
                        <li class="nav-item me-3">
                            <a class="nav-link active" data-bs-toggle="tab" href="#kt_user_edit_tab_1">
                                <span class="nav-icon">
                                    <i class="fas fa-edit"></i>
                                </span>
                                <span class="nav-text font-size-lg">{{ $page_title }}</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <!--end::Toolbar-->
            </div>
            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body">

                <div class="tab-content">

                    <!--begin::Tab-->
                    <div class="tab-pane show active" id="kt_user_edit_tab_1" role="tabpanel">
                        <!--begin::Row-->
                        <div class="row">
                            @include('backend.errors')
                            {{-- <div class="col-2"></div> --}}
                            <div class="col-12 my-2">

                                <input type="hidden" name="definition" id="definition" value="">
                                <div class="form-group row mb-3 required">
                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                        <label class="col-form-label text-lg-right text-left">Form Name</label>
                                        <input class="form-control form-control-solid required" type="text"
                                            name="name" id="name" value="{{ $formDefinition['name'] ?? '' }}"
                                            autocomplete="off" />
                                    </div>
                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                        <label class="col-form-label text-lg-right text-left">Form Status</label>
                                        <select class="form-control form-control-solid required form-select" name="status"
                                            value="{{ $data['status'] ?? '' }}">
                                            @foreach (config('constant.form_builder_status') as $gN => $gV)
                                                <option value="{{ $gN }}"
                                                    {{ !empty($formDefinition['status']) && $formDefinition['status'] == $gN ? 'selected' : '' }}>
                                                    {{ $gV }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row mb-3 required">
                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                        <label class="col-form-label text-lg-right text-left">Form Submission Admin Email Alerts</label>
                                        <select class="form-control form-control-solid kt_select2_11 required" multiple name="admin_email_alerts[]" id="admin_email_alerts">
                                            @foreach($admin_email_alerts ?? [] as $tags)
                                                <option value="{{ $tags }}" selected>{{ $tags }}</option>
                                            @endforeach
                                        </select>
                                        <span class="form-text text-muted">Atleast one email address is required</span>
                                    </div>
                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                        <label class="col-form-label text-lg-right text-left">Allow Multiple Submissions</label>
                                        <select class="form-control form-control-solid required form-select" name="can_resubmit">
                                            @foreach (config('constant.yes_no_list') as $gN => $gV)
                                                <option value="{{ $gN }}"
                                                    {{ isset($formDefinition['can_resubmit']) && $formDefinition['can_resubmit'] == $gN ? 'selected' : '' }}>
                                                    {{ $gV }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div id="formio-builder"></div>

                            </div>
                        </div>
                        <!--end::Row-->
                    </div>
                    <!--end::Tab-->
                </div>
            </div>
            <!--begin::Card body-->
            <div class="card-footer text-right">
                <button type="submit" class="btn btn-primary me-2 btn-hover-rise" id="submit_btn" onclick="submitForm();">Save Form</button>
                <a href="{{ route('form_builder.index') }}"><button type="button" class="btn btn-secondary btn-hover-rise">Cancel</button></a>
            </div>
        </div>
        <!--end::Card-->
    </form>
@endsection

{{-- Scripts Section --}}
@section('scripts')
    <script src="{{ asset('js/formio/app.js') . "?v=14022025" }}"></script>
    <script lang="text/javascript">
        function submitForm(){
            if($('#builder_form').valid()){
                $('#submit_btn').attr('disabled', 'disabled');
                $('#builder_form').submit();
            }
        }

        window.onload = function() {
            const formDefinition = @json($formDefinition->definition ?? null);
            const builderConfig = getFormBuilderConfig();
            Formio.builder(
                document.getElementById('formio-builder'),
                formDefinition ? JSON.parse(formDefinition) : {
                    components: []
                }, builderConfig
            ).then(function(builder) {
                document.getElementById('definition').value = JSON.stringify(builder.schema);
                
                // Function to set default storage, filePattern, and maxFileSize for file components
                function setFileComponentDefaults(component) {
                    if (component && component.type === 'file') {
                        var changed = false;
                        if (!component.storage) {
                            component.storage = 'base64';
                            changed = true;
                        }
                        // Set filePattern to 'image/*' as default (File Pattern field in Formio File Tab)
                        if (!component.filePattern || (typeof component.filePattern === 'string' && component.filePattern.trim() === '')) {
                            component.filePattern = 'image/*';
                            changed = true;
                        }
                        // Set fileMaxSize to '5MB' as default (File Maximum Size field)
                        if (!component.fileMaxSize || component.fileMaxSize === 1073741824 || component.fileMaxSize === '1GB' || component.fileMaxSize === '1 GB') {
                            component.fileMaxSize = '5MB';
                            changed = true;
                        }
                        return changed;
                    }
                    return false;
                }
                
                // Recursive function to process all components including nested ones
                function processAllComponents(components) {
                    if (!components || !Array.isArray(components)) return;
                    
                    components.forEach(function(component) {
                        setFileComponentDefaults(component);
                        // Recursively process nested components
                        if (component.components && Array.isArray(component.components)) {
                            processAllComponents(component.components);
                        }
                    });
                }
                
                // Function to find and set filePattern and maxFileSize field values
                function setFileComponentFieldValues() {
                    var inputs = document.querySelectorAll('input[type="text"], input[type="number"], input:not([type])');
                    var found = false;
                    
                    for (var i = 0; i < inputs.length; i++) {
                        var input = inputs[i];
                        var name = input.name || input.getAttribute('name') || '';
                        var ref = input.getAttribute('ref') || '';
                        var id = input.id || '';
                        
                        // Set filePattern field
                        if (name.includes('filePattern') || ref.includes('filePattern') || id.includes('filePattern')) {
                            if (!input.value || input.value === '*' || input.value.trim() === '') {
                                input.value = 'image/*';
                                input.dispatchEvent(new Event('input', { bubbles: true }));
                                input.dispatchEvent(new Event('change', { bubbles: true }));
                                found = true;
                            }
                        }
                        
                        // Set fileMaxSize field to '5MB'
                        if (name.includes('fileMaxSize') || ref.includes('fileMaxSize') || id.includes('fileMaxSize') || 
                            name.includes('maxSize') || ref.includes('maxSize') || id.includes('maxSize')) {
                            var currentValue = input.value || '';
                            // If it's 1GB, '1GB', '1 GB', or empty, set to '5MB'
                            if (currentValue === '1073741824' || currentValue === '1GB' || currentValue === '1 GB' || 
                                currentValue === '' || parseInt(currentValue) === 1073741824 || parseInt(currentValue) === 0) {
                                input.value = '5MB';
                                input.dispatchEvent(new Event('input', { bubbles: true }));
                                input.dispatchEvent(new Event('change', { bubbles: true }));
                                found = true;
                            }
                        }
                    }
                    
                    return found;
                }
                
                // Watch for dialog opening and set field values when it appears
                var observer = new MutationObserver(function(mutations) {
                    var dialog = document.querySelector('.formio-dialog:not([style*="display: none"]), .formio-dialog-content');
                    if (dialog && dialog.offsetParent !== null) {
                        setTimeout(function() {
                            setFileComponentFieldValues();
                        }, 500);
                    }
                });
                
                observer.observe(document.body, {
                    childList: true,
                    subtree: true,
                    attributes: true,
                    attributeFilter: ['style', 'class']
                });
                
                // Set defaults when a file component is added
                builder.on('addComponent', function(component) {
                    if (component && component.type === 'file') {
                        setFileComponentDefaults(component);
                    }
                });
                
                // Set defaults when component is being edited
                builder.on('editComponent', function(component) {
                    if (component && component.type === 'file') {
                        setFileComponentDefaults(component);
                        setTimeout(function() {
                            setFileComponentFieldValues();
                        }, 500);
                    }
                });
                
                // Ensure defaults are set on change events
                builder.on('change', function(e) {
                    disableButtons();
                    
                    // Check all components in the schema and set defaults for file components
                    if (builder.schema && builder.schema.components) {
                        processAllComponents(builder.schema.components);
                    }
                    
                    document.getElementById('definition').value = JSON.stringify(builder.schema);
                });
                
                // Set defaults for existing components when builder loads
                if (builder.schema && builder.schema.components) {
                    processAllComponents(builder.schema.components);
                    document.getElementById('definition').value = JSON.stringify(builder.schema);
                }
                
                disableButtons();

                /* Code to apply expand-collapse functionality to the entire tab instead of only the tab text */
                $('.form-builder-group-header').each(function() {
                    const sidebarAnchor = $(this).find('[ref="sidebar-anchor"]');
                    $(this).attr({
                        'data-bs-parent': sidebarAnchor.attr("data-bs-parent"),
                        'data-bs-target': sidebarAnchor.attr("data-bs-target"),
                        'data-bs-toggle': sidebarAnchor.attr("data-bs-toggle")
                    });
                });
            });
        };

        function getFormBuilderConfig() {
            return {
                builder: {
                    basic: {
                        components: {
                            file: true
                        }
                    },
                    data: {
                        components: {
                            container: false,
                            datamap: false,
                            datagrid: false,
                            editgrid: false,
                            tree: false
                        }
                    },
                    premium: false
                },
                editForm: {
                    file: [
                        {
                            key: 'file',
                            ignore: false,
                            components: [
                                { key: 'storage', defaultValue: 'base64' },
                                { key: 'filePattern', defaultValue: 'image/*' },
                                { key: 'fileMaxSize', defaultValue: '5MB' }
                            ]
                        }
                    ]
                }
            };
        }

        function disableButtons() {
            setTimeout(() => {
                const buttons = document.querySelectorAll('[ref="button"]');
                buttons.forEach(button => {
                    button.disabled = true;
                });
            }, 100);
        }
    </script>
    <script type="text/javascript">
    $(document).ready(function() {
        // tagging support
        $('.kt_select2_11').select2({
            placeholder: "Add Admin Email Alert",
            tags: true
        });

        // atleast one email address is required validation
        $('#builder_form').on('submit', function(e) {
            const emailAlerts = $('#admin_email_alerts').val();
            if (!emailAlerts || emailAlerts.length === 0) {
                e.preventDefault();
                errorAlert['text'] = 'Please add at least one Admin Email Alert.';
                Swal.fire(errorAlert);
            }
        });
    });
</script>
@endsection