@extends('admin.layout')
@section('content')
    <style>
        button[for-lang],
        button[for-width] {
            padding: 0px 12px;
            margin-right: 5px;
            transition: 200ms;
        }

        button[for-lang].btn-primary:not(.btn-secondary),
        button[for-width].btn-primary:not(.btn-secondary) {
            scale: 1.2;
            box-shadow: -1px -1px 5px 1px #0000aa;
        }

        h4.fieldTitle {
            background: linear-gradient(45deg, #0d6efd, 10%, transparent);
            border-left: 5px solid #1153b5;
            border-radius: 5px;
            padding: 2px 5px;
            text-shadow: 0px 0px 2px #223857;
        }
    </style>

    <div class="sticky-top sticky-top-part" style="overflow-x:hidden;">
        <div style="padding: 10px; border-bottom: solid 1px #ddd; background-color: #eee; overflow-x:hidden;">
            @foreach ($languages as $index => $lang)
                <button for-lang="{{ $index }}" class="btn btn-primary btn-secondary"
                    onclick="setActive({{ $index }})">{{ strtoupper($lang) }}</button>
            @endforeach
        </div>
        <div style="padding: 10px; border-bottom: solid 1px #ddd; background-color: #eee; overflow-x:hidden;">
            <span>Column count:</span>
            <button for-width="1" class="btn btn-primary btn-secondary" onclick="setWidth(1)">1</button>
            <button for-width="2" class="btn btn-primary btn-secondary" onclick="setWidth(2)">2</button>
            <button for-width="3" class="btn btn-primary btn-secondary" onclick="setWidth(3)">3</button>
            <button for-width="4" class="btn btn-primary btn-secondary" onclick="setWidth(4)">4</button>
            <button for-width="5" class="btn btn-primary btn-secondary" onclick="setWidth(5)">5</button>
        </div>
    </div>

    <form action="" method="post" enctype="multipart/form-data" class="ps-3 pe-3">
        @csrf
        <input type="hidden" value="0" name="_lang" id='importId'>
        <div class="entityBlock">
            <div class="fieldGroup" style="margin-top: 10px">
                <h5 class="fieldTitle">Import JSON:</h5>
                <div class="fieldContainer">
                    <div class="fieldData mb-3">
                        <input type="file" class="fieldInput form-control form-control-sm" name="file">
                    </div>
                </div>
                <input type="submit" class="btn btn-primary" value="Submit for current language">
            </div>
        </div>
    </form>

    @foreach ($languages as $index => $lang)
        <form action="" for-lang="{{ $index }}" method="post" id="mainEditForm" class="ps-3 pe-3 hidden"
            enctype="multipart/form-data">
            @csrf
            <input type="hidden" value="{{ $index }}" name="_lang">
            <div class="entityBlock">
                <h3 class="blockTitle g-col-md-12" style="display: flex; gap: 10px; margin: 10px 0px;">{{ $devEditName }}
                </h3>
                @foreach ($fileData as $fieldName => $fieldType)
                    @if (!is_array($fieldType))
                        @switch($fieldType)
                            @case('title')
                                <h4 class="fieldTitle" style="grid-column-start: 1; grid-column-end: -1;">{{ $fieldName }}:</h4>
                            @break

                            @default
                        @endswitch
                    @else
                        <div class="fieldGroup" style="margin-bottom: 0;">
                            <h5 class="fieldTitle">{{ $fieldType[1] }}</h5>
                            <div class="fieldContainer">
                                <div class="fieldData">
                                    @switch($fieldType[0])
                                        @case('string')
                                            <input class="fieldInput form-control form-control-sm" name="{{ $fieldName }}"
                                                value="{{ @$contents[$index][$fieldName] }}" onchange="chgd = true;">
                                        @break

                                        @case('text')
                                            <textarea class="fieldInput form-control form-control-sm tinymce-textarea" name="{{ $fieldName }}"
                                                onchange="chgd = true;">{{ @$contents[$index][$fieldName] }}</textarea>
                                        @break
                                    @endswitch
                                </div>
                                @if (@$fieldType[2])
                                    <details class="fieldHelper">
                                        <summary>Parameters</summary>
                                        @foreach ($fieldType[2] as $keyWord => $keyWordDescription)
                                            <div class="fieldHelperGroup">
                                                <input class="fieldHelperTag" value="{{ $keyWord }}" readonly
                                                    {{-- onclick="navigator.clipboard.writeText(this.value);" --}}></input>
                                                <div class="fieldHelperTagTip">{!! $keyWordDescription !!}</div>
                                            </div>
                                        @endforeach
                                    </details>
                                @endif
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
            <input type="submit" class="btn btn-primary" value="Save {{ strtoupper($lang) }}">
        </form>
    @endforeach

    <script src="https://cdn.jsdelivr.net/npm/tinymce@5.10.9/tinymce.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('.tinymce-textarea').forEach((textarea, index) => {
                if (!textarea.id) {
                    textarea.id = 'tinymce-' + Date.now() + '-' + index;
                }
                tinymce.init({
                    selector: '#' + textarea.id,
                    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 accordion',
                    toolbar: 'undo redo | bold italic | alignleft aligncenter alignright',
                    height: 400
                });
            });
        });

        document.querySelectorAll('form').forEach(form => {
            form.addEventListener('submit', (e) => {
                e.preventDefault();
                (async () => {
                    tinymce.triggerSave();
                    const formData = new FormData(e.srcElement);
                    const response = await fetch(e.srcElement.action, {
                        method: "POST",
                        body: formData,
                    });
                    const resp = +await response.text();
                    sysnotif(...(resp == 1 ? ['success', 'Saved successfully'] : ['fail',
                        'Save failed'
                    ]));
                })();
            });
        });

        function setActive(index) {
            document.querySelectorAll('form[for-lang]').forEach(e => {
                const isActive = +e.getAttribute('for-lang') === +index;
                e.classList.toggle('hidden', !isActive);
            });
            document.querySelectorAll('button[for-lang]').forEach(e => e.classList.toggle('btn-secondary', +e.getAttribute(
                'for-lang') != +index));
            document.getElementById('importId').value = index;
        }

        setActive(1);

        const extraStyle = document.createElement('style');
        document.head.appendChild(extraStyle);

        function setWidth(index) {
            document.querySelectorAll('button[for-width]').forEach(e => e.classList.toggle('btn-secondary', +e.getAttribute(
                'for-width') != +index));
            extraStyle.innerHTML = `
                [for-lang] h3{
                    grid-area: title;
                }
                [for-lang] .entityBlock{
                    display: grid;
                    gap: 10px;
                    grid-template: "${'title '.repeat(index)}" auto
                                    "${'content '.repeat(index)}" auto / ${'1fr '.repeat(index)}
                }
            `;
            window.admStorage.setTranslationColCnt(index);
        }

        document.addEventListener('DOMContentLoaded', () => {
            setWidth(window.admStorage.translationColCnt);
        });

        function sysnotif(className, message) {
            const el = document.createElement('div');
            el.classList.add('sysnotiv');
            el.classList.add(className);
            el.innerText = message;
            document.querySelector('.sticky-top-part').appendChild(el);
            setTimeout(() => {
                el.classList.add('appear');
            }, 1);
            setTimeout(() => {
                el.classList.add('vanish');
                setTimeout(() => {
                    el.remove();
                }, 500);
            }, 3000);
        }
    </script>
@endsection