@extends('control-panel::layout/layout')


@section('content')
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body p-4">
            <h4>List keys</h4>
            <div class="row">
                <div class="col-md-8 mt-4">
                    <select class="form-select" id="selected-lang" aria-label="Default select example">
                        <option value="" selected>Target language</option>
                        @foreach ($langs as $lang)
                            <option value="{{ $lang }}">{{ $lang }}</option>
                        @endforeach
                        <option value="new">new</option>
                    </select>
                </div>
                <div class="col-md-4 mt-4">
                    <button type="button" class="btn btn btn-light border" id="lang-new-keys">New keys</button>
                    <button type="button" class="btn btn btn-light border" id="lang-all-keys">All keys</button>
                </div>

            </div>
            <div class="mt-4">

                <div class="alert alert-info d-none" id="lang-wrong-order-warning">
                    <strong class="alert-heading">Heads up!</strong>
                    <br>
                    The keys were placed in the wrong order: <span id="lang-wrong-order-items"></span>
                </div>
                <div id="loading" class="d-none">
                    <p class="card-text placeholder-glow">
                        <span class="placeholder col-12"></span>
                        <span class="placeholder col-12"></span>
                        <span class="placeholder col-12"></span>
                    </p>
                </div>
                <div id="lang-data">
                    No items.
                </div>
            </div>
            <br>
        </div>
    </div>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body p-4">
            <h4>Undot array</h4>
            <p class="text-muted">Copy paste directly from excel</p>
            <div>
                <div class="row g-3">
                    <div class="col-md-12">
                        <textarea class="form-control" rows="5" id="undot-input"></textarea>
                    </div>
                    <div class="col-md-12">
                        <button type="button" class="btn btn-light border" id="undot-submit">Submit</button>
                        <button type="button" class="btn btn-light border" id="undot-clear">Clear</button>
                    </div>
                    <div class="col-md-12">
                        <div id="undot-output">
                            {{-- <label class="form-label">Result:</label>
                        <textarea readonly class="form-control bg-light-subtle" rows="5"></textarea>
                        <div class="form-text">Paste this code to lang file. Make sure to format your code</div>
                         --}}
                        </div>
                    </div>
                </div>


            </div>

            <br>
        </div>
    </div>
@endsection


@push('scripts')
    <script>
        const loading = document.querySelector('#loading');
        const langData = document.querySelector('#lang-data');
        const selectedLang = document.querySelector('#selected-lang');
        const langWrongOrderWarning = document.querySelector('#lang-wrong-order-warning');
        const langWrongOrderItems = document.querySelector('#lang-wrong-order-items');

        let controller = null;

        const isLoading = (val) => {
            if (val) {
                loading.classList.remove('d-none');
                langData.classList.add('d-none');
                toggleLangWrongOrderWarning(false);
            } else {
                loading.classList.add('d-none');
                langData.classList.remove('d-none');
            }
        }

        // function selectTable(table) {
        //     var range = document.createRange();
        //     range.selectNodeContents(table);
        //     var selection = window.getSelection();
        //     selection.removeAllRanges();
        //     selection.addRange(range);
        // }

        const printAsTable = (data) => {

            const table = document.createElement('table');
            table.classList.add('table', 'table-bordered', 'table-striped');

            // Create the table body
            const tbody = document.createElement('tbody');

            Object.keys(data).forEach(index => {
                const row = document.createElement('tr');
                row.innerHTML = `<td>${index}</td><td>${data[index]}</td>`;
                tbody.appendChild(row);
            });

            if (!Object.keys(data).length) {
                const row = document.createElement('tr');
                row.innerHTML = `<td colspan=2>No difference</td>`;
                tbody.appendChild(row);
            }

            // Append tbody to table
            table.appendChild(tbody);

            langData.innerHTML = ''; // Clear previous content if any
            langData.appendChild(table);
        }

        const toggleLangWrongOrderWarning = (wrongOrderList) => {
            if (wrongOrderList.length) {
                langWrongOrderWarning.classList.remove('d-none');
                langWrongOrderItems.innerHTML = wrongOrderList.map(item => `<strong>${item}</strong>`).join(', ');
            } else {
                langWrongOrderWarning.classList.add('d-none');
            }
        }

        const bringItems = (isAllKeys) => {
            {

                if (!selectedLang.value) {
                    selectedLang.classList.add('is-invalid');
                    selectedLang.focus();
                    return false;
                }
                selectedLang.classList.remove('is-invalid');


                isLoading(true);
                if (controller) {
                    controller.abort();
                    controller = null;
                }

                controller = new AbortController();
                const signal = controller.signal;


                fetch(`lang-data?allKeys=${Number(isAllKeys)}&lang=${selectedLang.value}&_=${Date.now()}`, {
                        signal
                    })
                    .then(res => res.json())
                    .then(res => {
                        controller = null;
                        const {
                            translateNeeded,
                            translateNotNeeded,
                            langWrongOrders
                        } = res;

                        printAsTable(translateNeeded);
                        toggleLangWrongOrderWarning(langWrongOrders);
                        isLoading(false);
                    });

            }
        }

        document.querySelector('#lang-new-keys').addEventListener('click', () => bringItems(false));
        document.querySelector('#lang-all-keys').addEventListener('click', () => bringItems(true));
    </script>
@endpush


@push('scripts')
    <script>
        const undotInput = document.querySelector('#undot-input');
        const undotSubmit = document.querySelector('#undot-submit');
        const undotClear = document.querySelector('#undot-clear');
        const undotOutput = document.querySelector('#undot-output');

        let undotAPIController = null;

        undotSubmit.addEventListener('click', () => {

            if (!undotInput.value.length) {
                undotInput.classList.add('is-invalid');
                undotInput.focus();
                return false;
            }
            undotInput.classList.remove('is-invalid');

            undotOutput.innerHTML = 'Loading...';
            if (undotAPIController) {
                undotAPIController.abort();
                undotAPIController = null;
            }

            undotAPIController = new AbortController();
            const signal = undotAPIController.signal;

            const data = undotInput.value;
            fetch(`{{ route('control-panel.langDataUndot') }}?_=${Date.now()}`, {
                    signal,
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        'data': data
                    })
                })
                .then(res => res.json())
                .then(res => {
                    undotAPIController = null;
                    let printableHtml = '';

                    if (res.error) {
                        printableHtml = 'Error:' + res.error;
                    } else if (!res.data) {
                        printableHtml = JSON.stringify(res); // if error print full response
                    } else {

                        let printable = res.data;

                        Object.keys(printable).forEach((printableKey, index) => {

                            let fraction = `${index + 1}/${Object.keys(printable).length}`;

                            const trimmedHtml = printable[printableKey].replace(/^\[|\]$/g, '');

                            printableHtml += `
                                <div class="printable">
                                <div class="d-flex justify-content-between align-items-center">
                                    <label class="form-label">${fraction}. ${printableKey}.php:
                                    </label>
                                    <button class="btn btn-sm btn-light border mb-2" onClick="markTextareaText(this)">Select</button>
                                </div>
                                <textarea readonly class="form-control bg-light-subtle mb-3" rows="5">${trimmedHtml}</textarea>
                                </div>
                            `;
                        });
                    }

                    undotOutput.innerHTML = printableHtml
                });
        });

        undotClear.addEventListener('click', () => {
            undotInput.value = '';
            undotInput.classList.remove('is-invalid');

            undotOutput.innerHTML = '';

            if (undotAPIController) {
                undotAPIController.abort();
                undotAPIController = null;
            }
        });
        const markTextareaText = (item) => {
            const parentDiv = item.closest('.printable');
            const textarea = parentDiv.querySelector('textarea');
            if (textarea) {
                textarea.select();
                // document.execCommand('copy');
                // alert('Text copied!');
            }
        }
    </script>
@endpush