@extends('dashboard.admin.layouts.master')

@php
    $languageNames = ['ar' => 'العربية', 'en' => 'English'];
@endphp

@section('toolbar')
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">{{ trans('core.translations.title') }}</h1>
            <span class="text-muted fs-7 mt-1 mw-700px">{{ trans('core.translations.intro') }}</span>
        </div>
    </div>
@endsection

@section('content')
    <div id="kt_app_content_container" class="app-container container-xxxl">
        <div class="card card-flush">
            <div class="card-header border-0 pt-6 align-items-center gap-4">
                <div class="card-title gap-4 flex-wrap">
                    <form method="GET" class="d-flex align-items-center gap-2">
                        <label class="text-muted fw-semibold text-nowrap" for="groupSelect">{{ trans('core.translations.group') }}</label>
                        <select name="group" id="groupSelect" class="form-select form-select-solid w-200px" onchange="this.form.submit()">
                            @foreach ($groups as $option)
                                <option value="{{ $option }}" @selected($option === $group)>{{ $option }}.php</option>
                            @endforeach
                        </select>
                    </form>
                    <div class="d-flex align-items-center position-relative">
                        <i class="bi bi-search fs-5 position-absolute ms-4 text-muted"></i>
                        <input type="text" id="translationSearch" class="form-control form-control-solid w-275px ps-12" placeholder="{{ trans('core.translations.search') }}">
                    </div>
                </div>
                <div class="card-toolbar gap-4">
                    <span class="text-muted fs-7" id="keysCount">{{ trans('core.translations.keys_count', ['count' => count($lines)]) }}</span>
                    <label class="form-check form-switch mb-0">
                        <input class="form-check-input" type="checkbox" id="editedOnly">
                        <span class="form-check-label fw-semibold">{{ trans('core.translations.edited_only') }}</span>
                    </label>
                </div>
            </div>

            <div class="card-body pt-2">
                <div class="notice d-flex bg-light-info rounded border-info border border-dashed p-4 mb-6">
                    <i class="bi bi-info-circle fs-3 text-info me-3"></i>
                    <div class="fs-7 text-gray-700">{!! str_replace(':name', '<bdi dir="ltr"><code>:name</code></bdi>', e(trans('core.translations.placeholder_hint'))) !!}</div>
                </div>

                @if (empty($lines))
                    <p class="text-center text-muted py-10">{{ trans('core.translations.no_lines') }}</p>
                @else
                    <div class="table-responsive">
                        <table class="table align-top table-row-dashed fs-6 gy-4" id="translationsTable">
                            <thead>
                            <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                <th class="min-w-175px">{{ trans('core.translations.key') }}</th>
                                @foreach ($locales as $locale)
                                    <th class="min-w-250px">{{ $languageNames[$locale] ?? strtoupper($locale) }}</th>
                                @endforeach
                                <th class="text-end min-w-100px"></th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach ($lines as $key => $line)
                                @php($isEdited = collect($line['override'])->filter()->isNotEmpty())
                                <tr data-key="{{ $key }}" data-edited="{{ $isEdited ? 1 : 0 }}"
                                    data-search="{{ mb_strtolower($key . ' ' . implode(' ', array_filter($line['file'])) . ' ' . implode(' ', array_filter($line['override']))) }}">
                                    <td>
                                        <code class="fs-7 text-gray-700 text-break">{{ $key }}</code>
                                        <div><span class="badge badge-light-warning mt-2 {{ $isEdited ? '' : 'd-none' }}" data-edited-badge>{{ trans('core.translations.edited') }}</span></div>
                                    </td>
                                    @foreach ($locales as $locale)
                                        @php($file = $line['file'][$locale])
                                        @php($override = $line['override'][$locale])
                                        <td dir="{{ $locale === 'ar' ? 'rtl' : 'ltr' }}">
                                            <textarea rows="1" class="form-control form-control-sm translation-input {{ $override !== null ? 'border-warning' : '' }}"
                                                      data-locale="{{ $locale }}" data-file="{{ $file }}"
                                                      placeholder="{{ $file }}">{{ $override ?? $file }}</textarea>
                                            <div class="text-muted fs-8 mt-1 {{ $override !== null ? '' : 'd-none' }}" data-default-hint>
                                                {{ trans('core.translations.default') }}: <span class="text-gray-600">{{ $file ?? '—' }}</span>
                                            </div>
                                        </td>
                                    @endforeach
                                    <td class="text-end text-nowrap">
                                        <button type="button" class="btn btn-sm btn-primary" data-save disabled>{{ trans('core.translations.save') }}</button>
                                        <button type="button" class="btn btn-sm btn-icon btn-light-danger {{ $isEdited ? '' : 'd-none' }}" data-reset title="{{ trans('core.translations.reset') }}"><i class="bi bi-arrow-counterclockwise fs-5"></i></button>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        (function () {
            var group = @json($group);
            var updateUrl = @json(route('admin.core.translations.update'));
            var csrf = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            var table = document.getElementById('translationsTable');
            if (!table) {
                return;
            }

            function notify(type, message) {
                Swal.fire({toast: true, position: 'top-end', icon: type, title: message, showConfirmButton: false, timer: 2500, timerProgressBar: true});
            }

            function autosize(el) {
                el.style.height = 'auto';
                el.style.height = (el.scrollHeight + 2) + 'px';
            }

            function rowChanged(row) {
                return Array.prototype.some.call(row.querySelectorAll('.translation-input'), function (input) {
                    return input.value !== input.defaultValue;
                });
            }

            function applyFilters() {
                var term = document.getElementById('translationSearch').value.trim().toLowerCase();
                var editedOnly = document.getElementById('editedOnly').checked;
                var visible = 0;
                table.querySelectorAll('tbody tr').forEach(function (row) {
                    var show = (!term || row.dataset.search.indexOf(term) !== -1) && (!editedOnly || row.dataset.edited === '1');
                    row.classList.toggle('d-none', !show);
                    if (show) { visible++; }
                });
                document.getElementById('keysCount').textContent = @json(trans('core.translations.keys_count', ['count' => '__N__'])).replace('__N__', visible);
            }

            function markRow(row, override) {
                var edited = false;
                row.querySelectorAll('.translation-input').forEach(function (input) {
                    var value = override[input.dataset.locale];
                    var isOverridden = value !== undefined && value !== null && value !== '';
                    edited = edited || isOverridden;
                    input.value = isOverridden ? value : input.dataset.file;
                    input.defaultValue = input.value;
                    input.classList.toggle('border-warning', isOverridden);
                    input.closest('td').querySelector('[data-default-hint]').classList.toggle('d-none', !isOverridden);
                    autosize(input);
                });
                row.dataset.edited = edited ? '1' : '0';
                row.querySelector('[data-edited-badge]').classList.toggle('d-none', !edited);
                row.querySelector('[data-reset]').classList.toggle('d-none', !edited);
                row.querySelector('[data-save]').disabled = true;
            }

            function send(method, body) {
                return fetch(updateUrl, {
                    method: method,
                    headers: {'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf},
                    body: JSON.stringify(body)
                }).then(function (response) {
                    return response.json().then(function (json) { return {status: response.status, json: json}; });
                });
            }

            function save(row, confirmed) {
                var values = {};
                row.querySelectorAll('.translation-input').forEach(function (input) { values[input.dataset.locale] = input.value; });
                var button = row.querySelector('[data-save]');
                button.disabled = true;

                send('PUT', {group: group, key: row.dataset.key, values: values, confirmed: confirmed ? 1 : 0}).then(function (result) {
                    if (result.status === 409 && result.json.needs_confirmation) {
                        button.disabled = false;
                        Swal.fire({
                            text: result.json.message,
                            icon: 'warning',
                            showCancelButton: true,
                            buttonsStyling: false,
                            confirmButtonText: @json(trans('core.translations.save_anyway')),
                            cancelButtonText: @json(trans('dash_site.Cancel')),
                            customClass: {confirmButton: 'btn btn-warning', cancelButton: 'btn btn-light'}
                        }).then(function (choice) { if (choice.isConfirmed) { save(row, true); } });
                        return;
                    }
                    if (result.status !== 200) {
                        button.disabled = false;
                        notify('error', result.json.message || @json(trans('core.translations.error')));
                        return;
                    }
                    markRow(row, result.json.override || {});
                    notify('success', result.json.message);
                }).catch(function () {
                    button.disabled = false;
                    notify('error', @json(trans('core.translations.error')));
                });
            }

            table.querySelectorAll('.translation-input').forEach(function (input) {
                autosize(input);
                input.addEventListener('input', function () {
                    autosize(input);
                    var row = input.closest('tr');
                    row.querySelector('[data-save]').disabled = !rowChanged(row);
                });
                input.addEventListener('keydown', function (event) {
                    if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
                        event.preventDefault();
                        var row = input.closest('tr');
                        if (rowChanged(row)) { save(row, false); }
                    }
                });
            });

            table.addEventListener('click', function (event) {
                var row = event.target.closest('tr');
                if (event.target.closest('[data-save]')) {
                    save(row, false);
                }
                if (event.target.closest('[data-reset]')) {
                    Swal.fire({
                        text: @json(trans('core.translations.reset_confirm')),
                        icon: 'question',
                        showCancelButton: true,
                        buttonsStyling: false,
                        confirmButtonText: @json(trans('core.translations.reset')),
                        cancelButtonText: @json(trans('dash_site.Cancel')),
                        customClass: {confirmButton: 'btn btn-danger', cancelButton: 'btn btn-light'}
                    }).then(function (choice) {
                        if (!choice.isConfirmed) { return; }
                        send('DELETE', {group: group, key: row.dataset.key}).then(function (result) {
                            if (result.status === 200) {
                                markRow(row, {});
                                notify('success', result.json.message);
                            } else {
                                notify('error', @json(trans('core.translations.error')));
                            }
                        });
                    });
                }
            });

            var timer;
            document.getElementById('translationSearch').addEventListener('input', function () {
                clearTimeout(timer);
                timer = setTimeout(applyFilters, 200);
            });
            document.getElementById('editedOnly').addEventListener('change', applyFilters);

            window.addEventListener('beforeunload', function (event) {
                if (Array.prototype.some.call(table.querySelectorAll('tbody tr'), rowChanged)) {
                    event.preventDefault();
                    event.returnValue = '';
                }
            });
        })();
    </script>
@endsection