@extends('admin.layout')
@section('content')
    <form action="" method="post" id="mainEditForm" class="ps-3 pe-3" enctype="multipart/form-data">
        @csrf
    </form>

    <datalist id="fileNames"></datalist>
    <script src="https://cdn.jsdelivr.net/npm/tinymce@5.10.9/tinymce.min.js"></script>
    <script>
        window.getLocaleFromUrl = () => {
            return location.pathname.slice(0, location.pathname.indexOf('/', 1));
        }

        function initTextArea(sel) {
            const searchArgs = typeof sel == "string" ? {
                selector: sel
            } : {
                target: sel
            };

            tinymce.init({
                ...searchArgs,
                plugins: 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen link codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons',
                toolbar: 'undo redo | bold italic | alignleft aligncenter alignright',
                height: 400
            });
        }

        function convertToDatetimeLocal(val) {
            if (!val) return null;
            let date = new Date(val);
            let formattedDate = date.toISOString().slice(0, 16);
            return formattedDate;
        }

        function createElementP(name, args = null, fnc = null, parent = null, instandAdd = false) {
            const element = document.createElement(name);
            if (args != null) {
                Object.assign(element, args);
                if (args.style && typeof args.style != "string") {
                    Object.assign(element.style, args.style);
                }
                if (args.attrs) {
                    for (let attr in args.attrs) element.setAttribute(attr, args.attrs[attr]);
                }
            }
            if (instandAdd && parent) {
                parent.appendChild(element);
            }
            if (fnc) {
                fnc(element);
            }
            if (!instandAdd && parent) {
                parent.appendChild(element);
            }
            return element;
        }

        let UID = 0;
        const render_collections = {{ Js::from($render_collections) }};
        const mainEditForm = document.getElementById('mainEditForm');
        const mainClass = render_collections['_mainClass'];

        mainEditForm.addEventListener('submit', (e) => {
            e.preventDefault();
            (async () => {
                tinymce.triggerSave(); // Sync TinyMCE content to textarea
                const formData = new FormData(e.srcElement);
                const response = await fetch(e.srcElement.action, {
                    method: "POST",
                    body: formData,
                });
                const resp = await response.json();
                console.log(resp);

                document.querySelectorAll('.error-pos-global,.error-pos').forEach(e => {
                    e.classList.toggle('hidden', true);
                });
                document.querySelectorAll('.fieldInput').forEach(e => {
                    e.classList.toggle('is-invalid', false);
                });

                if (resp.success) {
                    if (window.location.pathname.endsWith("new")) {
                        window.location.href += '/../view';
                    } else if (window.location.pathname.endsWith("new/")) {
                        window.location.href += '../view';
                    } else window.location.reload();
                    return;
                }

                let fncls = (className, classFieldList, idprefix = '') => {
                    for (let classFieldId in classFieldList) {
                        if (classFieldId == '_new') {
                            fncls(className, classFieldList['_new'], '_');
                        } else {
                            for (let errField in classFieldList[classFieldId]) {
                                if (errField == '_global') {
                                    let targetNode = document.querySelector(
                                        `[g-for-class="${className.replaceAll('\\', '/')}"] [g-group-nid="${idprefix+classFieldId}"] .error-pos-global`
                                    );
                                    if (!targetNode) targetNode = document.querySelector(
                                        `[g-for-class="${className.replaceAll('\\', '/')}"] .error-pos-global`
                                    );
                                    targetNode.innerText = classFieldList[classFieldId][errField].data[
                                        0];
                                    targetNode.classList.toggle('hidden', false);
                                } else {
                                    let targetField, targetNode = document.querySelector(
                                        `[g-for-class="${className.replaceAll('\\', '/')}"] [g-group-nid="${idprefix+classFieldId}"] [g-for-class-fields="${errField}"] .error-pos`
                                    );
                                    if (targetNode) {
                                        targetField = document.querySelector(
                                            `[g-for-class="${className.replaceAll('\\', '/')}"] [g-group-nid="${idprefix+classFieldId}"] [g-for-class-fields="${errField}"] .fieldInput`
                                        );
                                    } else {
                                        targetNode = document.querySelector(
                                            `[g-for-class="${className.replaceAll('\\', '/')}"] [g-for-class-fields="${errField}"] [g-group-nidd="${idprefix+classFieldId}"] .error-pos`
                                        );
                                        targetField = document.querySelector(
                                            `[g-for-class="${className.replaceAll('\\', '/')}"] [g-for-class-fields="${errField}"] [g-group-nidd="${idprefix+classFieldId}"] .fieldInput`
                                        );
                                    }
                                    targetNode.innerText = classFieldList[classFieldId][errField].data[
                                        0];
                                    targetNode.classList.toggle('hidden', false);
                                    targetField.classList.toggle('is-invalid', true);
                                }
                            }
                        }
                    }
                };

                for (let className in resp.errors) {
                    fncls(className, resp.errors[className]);
                }
            })();
        });

        async function getImages() {
            const resp = await fetch(location.origin + window.getLocaleFromUrl() + '/admin/images/list');
            if (!resp.ok) return null;
            let jsonData = await resp.json();
            const parent = document.getElementById('fileNames');
            parent.innerHTML = '';
            for (let i = 0; i < jsonData.length; i++) {
                createElementP('option', {
                    value: jsonData[i]
                }, null, parent);
            }
        }
        getImages();

        function insertNodeField(render_collection_class, node, definition_key, class_container, uid = null) {
            const render_collection_data = render_collections[render_collection_class];
            const definitions = render_collection_data['definition'];
            const node_id_key = render_collection_data['_id'] || 'id';
            const node_id = node[node_id_key];
            let numericStep = 'any';

            return createElementP('div', {
                className: 'fieldData mb-3',
                attrs: {
                    'g-for-class-field-node': node_id,
                    'g-for-class-field-idenkey': node[render_collection_data['ident_key']],
                    'g-group-nidd': node_id || '_' + uid
                }
            }, (class_node) => {
                if (render_collection_data['ident_key']) {
                    createElementP('div', {
                        className: 'fieldDataName form-label',
                        innerText: render_collection_data['ident'][node[render_collection_data[
                            'ident_key']]]
                    }, null, class_node);
                }

                let nameKey = `nodes[${render_collection_class}][${node_id || '_new]['+uid}][${definition_key}]`;
                if (definitions[definition_key]['type'] === 'enum') {
                    const enumData = render_collection_data['enums'][definition_key];
                    if (enumData && Array.isArray(enumData)) {
                        createElementP('select', {
                            className: 'fieldInput form-select',
                            attrs: {
                                'name': nameKey
                            }
                        }, (select) => {
                            createElementP('option', {
                                value: '',
                                innerText: 'Select a type',
                                disabled: true,
                                selected: node[definition_key] === undefined
                            }, null, select);
                            enumData.forEach(option => {
                                createElementP('option', {
                                    value: option,
                                    innerText: option,
                                    selected: option === node[definition_key]
                                }, null, select);
                            });
                        }, class_node);
                    }
                }
                if (definitions[definition_key]['enum']) {
                    const enumData = render_collection_data['enums'][Array.isArray(definitions[definition_key][
                        'enum'
                    ]) ? render_collection_class + definition_key : definitions[definition_key]['enum']];
                    createElementP('select', {
                        className: 'fieldInput form-select',
                        attrs: {
                            'name': nameKey
                        }
                    }, (select) => {
                        Array.isArray(definitions[definition_key]['enum']) || createElementP('option', {
                            value: '',
                            innerText: ''
                        }, null, select);
                        for (let enumKey in enumData) {
                            createElementP('option', {
                                value: enumKey,
                                innerText: enumData[enumKey],
                                selected: enumKey == node[definition_key]
                            }, null, select);
                        }
                    }, class_node);
                } else {
                    switch (definitions[definition_key]['type']) {
                        case 'string':
                            createElementP('input', {
                                className: 'fieldInput form-control form-control-sm',
                                attrs: {
                                    'name': nameKey
                                },
                                value: node[definition_key] || ''
                            }, null, class_node);
                            break;
                        case 'password':
                            createElementP('input', {
                                className: 'fieldInput form-control form-control-sm',
                                attrs: {
                                    'name': nameKey
                                },
                                value: node[definition_key] || ''
                            }, null, class_node);
                            break;
                        case 'text':
                            const newEl = createElementP('textarea', {
                                className: 'fieldInput form-control ckeditor-textarea',
                                attrs: {
                                    'name': nameKey
                                },
                                innerText: node[definition_key] || ''
                            }, null, class_node, true);
                            initTextArea(newEl);
                            break;
                        case 'int':
                            numericStep = '1';
                        case 'float':
                        case 'number':
                            createElementP('input', {
                                className: 'fieldInput form-control form-control-sm',
                                attrs: {
                                    'name': nameKey
                                },
                                value: node[definition_key] || '',
                                type: 'number',
                                step: numericStep
                            }, null, class_node);
                            break;
                        case 'bool':
                            createElementP('input', {
                                className: 'fieldInput form-check-input',
                                attrs: {
                                    'name': nameKey
                                },
                                checked: node[definition_key] || '',
                                type: 'checkbox'
                            }, null, class_node);
                            break;
                        case 'date':
                            createElementP('input', {
                                className: 'fieldInput form-control form-control-sm',
                                attrs: {
                                    'name': nameKey
                                },
                                value: convertToDatetimeLocal(node[definition_key] || ''),
                                type: 'datetime-local'
                            }, null, class_node);
                            break;
                        case 'image':
                            createElementP('div', {
                                className: 'input-group'
                            }, element => {
                                createElementP('input', {
                                    className: 'fieldInput form-control form-control-sm',
                                    attrs: {
                                        'name': nameKey,
                                        'list': 'fileNames'
                                    },
                                    value: node[definition_key] || ''
                                }, null, element);
                                createElementP('a', {
                                    className: 'btn btn-outline-secondary',
                                    href: location.origin + window.getLocaleFromUrl() +
                                        '/admin/images/view',
                                    target: '_blank',
                                    innerText: 'Manage images'
                                }, null, element);
                                createElementP('btn', {
                                    className: 'btn btn-outline-secondary',
                                    innerText: 'reload'
                                }, (btn) => {
                                    btn.addEventListener('click', () => {
                                        getImages();
                                    });
                                }, element);
                            }, class_node);
                            break;
                        case 'upload_image':
                            createElementP('input', {
                                type: 'file',
                                className: 'fieldInput form-control form-control-sm',
                                attrs: {
                                    'name': nameKey,
                                    'accept': 'image/png'
                                }
                            }, null, class_node);
                            if (node[definition_key]) {
                                createElementP('div', {
                                    style: {
                                        marginTop: '10px'
                                    }
                                }, div => {
                                    createElementP('img', {
                                        src: node[definition_key],
                                        style: {
                                            maxWidth: '200px'
                                        }
                                    }, null, div);
                                }, class_node);
                            }
                            break;
                    }
                }
                createElementP('span', {
                    className: 'error-pos alert-text hidden',
                    attrs: {
                        'name': nameKey
                    }
                }, null, class_node);
            }, class_container, true);
        }

        function insertNode(render_collection_class, node) {
            const render_collection_data = render_collections[render_collection_class];
            const definitions = render_collection_data['definition'];
            const node_id_key = render_collection_data['_id'] || 'id';
            const node_id = node[node_id_key];
            const uid = ++UID;
            const is_exisitng = !!node_id;

            if (!render_collection_data['additive'] || render_collection_data['ident_key']) {
                for (let definition_key in definitions) {
                    let definition_data = render_collection_data['definition'][definition_key];
                    let isHidden = false;
                    if (definition_key[0] == '_' || ((isHidden = definition_data['group_for'] || definition_data[
                            'id_for']) && !node[definition_key])) continue;
                    const class_container = document.querySelector(
                        `[g-for-class="${render_collection_class.replaceAll('\\', '/')}"] [g-for-class-fields="${definition_key}"]`
                    );
                    let field = insertNodeField(render_collection_class, node, definition_key, class_container, uid);
                    if (isHidden) field.style.display = 'none';
                }
            } else {
                const class_container = document.querySelector(
                    `[g-for-class="${render_collection_class.replaceAll('\\', '/')}"]`
                );
                createElementP('div', {
                    className: 'fieldGroup',
                    attrs: {
                        'g-group-nid': node_id || '_' + uid
                    }
                }, (group) => {
                    createElementP('span', {
                        className: 'error-pos-global alert-text hidden'
                    }, null, group);
                    for (let definition_key in definitions) {
                        let definition_data = definitions[definition_key];
                        let isHidden = false;
                        if (definition_key[0] == '_' || ((isHidden = definition_data['group_for'] ||
                                definition_data['id_for']) && !node[definition_key])) continue;
                        let field = createElementP('div', {
                            className: 'fieldGroup'
                        }, (subGroup) => {
                            createElementP('h5', {
                                className: 'fieldTitle',
                                innerText: definition_data['name'] || definition_key
                            }, null, subGroup);
                            createElementP('div', {
                                className: 'fieldContainer',
                                attrs: {
                                    'g-for-class-fields': definition_key
                                }
                            }, fieldLocation => {
                                insertNodeField(render_collection_class, node, definition_key,
                                    fieldLocation, uid);
                            }, subGroup);
                        }, group);
                        if (isHidden) field.style.display = 'none';
                    }
                    createElementP('button', {
                        className: 'btn btn-danger',
                        innerText: "Delete",
                        type: 'button'
                    }, btn => {
                        btn.addEventListener('click', () => {
                            if (is_exisitng) {
                                let nameKey = `nodes[${render_collection_class}][_deleted][]`;
                                createElementP('input', {
                                    style: {
                                        display: 'none'
                                    },
                                    attrs: {
                                        'name': nameKey
                                    },
                                    value: node_id
                                }, null, mainEditForm);
                            }
                            group.remove();
                        });
                    }, group);
                }, class_container);
            }
        }

        for (let render_collection_class in render_collections) {
            if (render_collection_class[0] == '_') continue;
            createElementP('div', {
                className: 'entityBlock',
                attrs: {
                    'g-for-class': render_collection_class.replaceAll('\\', '/')
                }
            }, (collection_container) => {
                let render_collection_data = render_collections[render_collection_class];
                createElementP('h3', {
                    className: 'blockTitle g-col-md-12',
                    style: {
                        'display': 'flex',
                        'gap': '10px',
                        'margin': '10px 0'
                    },
                    innerText: render_collection_data['edit_title']
                }, title => {
                    if (render_collection_data['additive']) {
                        if (!render_collection_data['ident_key']) {
                            createElementP('button', {
                                className: 'btn btn-secondary',
                                innerText: "add",
                                type: 'button'
                            }, btn => {
                                const render_collection_class_p = render_collection_class;
                                const fillUpData = {};
                                btn.addEventListener('click', () => {
                                    insertNode(render_collection_class_p, fillUpData);
                                });
                            }, title);
                        } else {
                            createElementP('div', {
                                className: 'content',
                                style: {
                                    'display': 'flex',
                                    'gap': '10px',
                                    'align-items': 'baseline'
                                }
                            }, container => {
                                let takenKeys = [];
                                for (let node_id in render_collection_data['nodes']) {
                                    let node = render_collection_data['nodes'][node_id];
                                    takenKeys.push(+node[render_collection_data['ident_key']]);
                                }
                                createElementP('h6', {
                                    className: 'blockTitle',
                                    innerText: "Add:"
                                }, null, container);
                                const selectAdd = createElementP('select', {
                                    className: 'fieldInput form-select bg-green'
                                }, select => {
                                    const render_collection_class_p =
                                        render_collection_class;
                                    const fillUpData = {};
                                    select.addEventListener('change', () => {
                                        if (select.value == '') return;
                                        fillUpData[render_collection_data[
                                            'ident_key']] = select.value;
                                        takenKeys.push(+select.value);
                                        insertNode(render_collection_class_p,
                                            fillUpData);
                                        selectRemove.rebuildContent();
                                        selectAdd.rebuildContent();
                                    });
                                    select.rebuildContent = () => {
                                        select.innerHTML = '';
                                        select.value = '';
                                        let enumData = Object.entries(
                                            render_collection_data['ident']).filter(
                                            e => !takenKeys.includes(+e[0]));
                                        createElementP('option', {
                                            value: '',
                                            innerText: ''
                                        }, null, select);
                                        for (let [enumKey, enumValue] of enumData) {
                                            createElementP('option', {
                                                value: enumKey,
                                                innerText: enumValue
                                            }, null, select);
                                        }
                                    };
                                    select.rebuildContent();
                                }, container);
                                createElementP('h6', {
                                    className: 'blockTitle',
                                    innerText: "Remove:"
                                }, null, container);
                                const selectRemove = createElementP('select', {
                                    className: 'fieldInput form-select bg-red'
                                }, select => {
                                    const render_collection_class_p =
                                        render_collection_class;
                                    const fillUpData = {};
                                    select.takenKeys = [];
                                    select.addEventListener('change', () => {
                                        if (select.value == '') return;
                                        fillUpData[render_collection_data[
                                            'ident_key']] = select.value;
                                        takenKeys.splice(takenKeys.indexOf(+select
                                            .value), 1);
                                        let delnodes = document.querySelectorAll(
                                            `[g-for-class="${render_collection_class_p.replaceAll('\\', '/')}"] [g-for-class-field-idenkey="${select.value}"]`
                                        );
                                        let idAttrib = delnodes[0].getAttribute(
                                            'g-for-class-field-node');
                                        if (idAttrib != 'undefined') {
                                            let nameKey =
                                                `nodes[${render_collection_class_p}][_deleted][]`;
                                            createElementP('input', {
                                                style: {
                                                    display: 'none'
                                                },
                                                attrs: {
                                                    'name': nameKey
                                                },
                                                value: idAttrib
                                            }, null, mainEditForm);
                                        }
                                        delnodes.forEach(e => e.remove());
                                        selectRemove.rebuildContent();
                                        selectAdd.rebuildContent();
                                    });
                                    select.rebuildContent = () => {
                                        select.innerHTML = '';
                                        select.value = '';
                                        let enumData = Object.entries(
                                            render_collection_data['ident']).filter(
                                            e => takenKeys.includes(+e[0]));
                                        createElementP('option', {
                                            value: '',
                                            innerText: ''
                                        }, null, select);
                                        for (let [enumKey, enumValue] of enumData) {
                                            createElementP('option', {
                                                value: enumKey,
                                                innerText: enumValue
                                            }, null, select);
                                        }
                                    };
                                    select.rebuildContent();
                                }, container);
                            }, title);
                        }
                    }
                }, collection_container);
                createElementP('span', {
                    className: 'error-pos-global alert-text hidden'
                }, null, collection_container);
                if (!render_collection_data['additive'] || render_collection_data['ident_key']) {
                    for (let definition_key in render_collection_data['definition']) {
                        let definition_data = render_collection_data['definition'][definition_key];
                        if (definition_key[0] == '_') continue;
                        let fieldBlock = createElementP('div', {
                            className: 'fieldGroup'
                        }, (group) => {
                            createElementP('h5', {
                                className: 'fieldTitle',
                                innerText: definition_data['name'] || definition_key
                            }, null, group);
                            createElementP('div', {
                                className: 'fieldContainer',
                                attrs: {
                                    'g-for-class-fields': definition_key
                                }
                            }, null, group);
                        }, collection_container);
                        if (definition_data['group_for'] || definition_data['id_for']) fieldBlock.style.display =
                            'none';
                    }
                }
                for (let node_id in render_collection_data['nodes']) {
                    let node = render_collection_data['nodes'][node_id];
                    insertNode(render_collection_class, node);
                }
            }, mainEditForm, true);
        }

        createElementP('input', {
            type: 'submit',
            className: 'btn btn-primary',
            value: 'Save'
        }, null, mainEditForm);
    </script>
    <div style="padding:0px 30px;">
        @if ($devEditName === 'Orders' && isset($render_collections['App\\Models\\Order']['user']))
            <div class="mt-3">
                <h4>User Details</h4>
                <p><strong>Name:</strong> {{ $render_collections['App\\Models\\Order']['user']->name }}
                    {{ $render_collections['App\\Models\\Order']['user']->surname }}</p>
                <p><strong>Email:</strong> {{ $render_collections['App\\Models\\Order']['user']->email }}</p>
                <p><strong>Phone:</strong> {{ $render_collections['App\\Models\\Order']['user']->phone_number }}</p>
            </div>
        @endif

        @if ($devEditName === 'Orders' && isset($render_collections['App\\Models\\Order']['address']))
            <div class="mt-3">
                <h4>Address Details</h4>
                <p><strong>Address:</strong> {{ $render_collections['App\\Models\\Order']['address']->street }},
                    {{ $render_collections['App\\Models\\Order']['address']->city }},
                    {{ $render_collections['App\\Models\\Order']['address']->state }},
                    {{ $render_collections['App\\Models\\Order']['address']->country }},
                    {{ $render_collections['App\\Models\\Order']['address']->zipcode }}</p>
                <p><strong>Phone:</strong> {{ $render_collections['App\\Models\\Order']['address']->phone_number }}</p>
            </div>
        @endif

        @if ($devEditName === 'Orders' && isset($render_collections['App\\Models\\Order']['orderItems']))
            <div class="mt-3">
                <h4>Order Items</h4>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Vehicle Part</th>
                            <th>Quantity</th>
                            <th>Price</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($render_collections['App\\Models\\Order']['orderItems'] as $item)
                            <tr>
                                <td>{{ $item->vehiclePart->name ?? 'N/A' }}</td>
                                <td>{{ $item->quantity }}</td>
                                <td>{{ $item->pvnPrice }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif

        @if (
            $devEditName === 'Orders' &&
                isset($render_collections['App\\Models\\Order']['nodes']) &&
                !empty($render_collections['App\\Models\\Order']['nodes']))
            @php
                $orderId = array_key_first($render_collections['App\\Models\\Order']['nodes']);
            $locale = Session::get('locale', app()->getLocale()); @endphp
            @if ($orderId !== -2)
                <div class="mt-3">
                    <a href="{{ route('admin.orders.invoice', [$locale, $orderId]) }}" class="btn btn-primary">Download
                        Invoice</a>
                </div>
            @endif
        @endif
    </div>
    <script>
        initTextArea('textarea.fieldInput.form-control, textarea.form-control.ckeditor-textarea');
    </script>
@endsection