{% set can_insert = user.can('system_localization_insert') %}
{% set can_update = user.can('system_localization_update') %}
{% set can_delete = user.can('system_localization_delete') %}
<script defer src="https://cdn.jsdelivr.net/npm/sweetalert2@11" type="text/javascript"></script>
<div class="d-flex flex-wrap justify-content-between align-items-center text-uppercase rounded p-1 mb-2 shadow">
    <h3 class="px-1 my-auto fs-6 text-danger text-uppercase">
        <i class="bi bi-globe"></i> {{ 'localization'|text }}
    </h3>
    <div class="ms-auto">
    </div>
</div>
<ul class="nav nav-tabs text-uppercase" role="tablist">
    <li class="nav-item">
        <a class="nav-link active show" data-bs-toggle="tab" href="#tab-language">
            <i class="bi bi-flag"></i> {{ 'language'|text }}
        </a>
    </li>
    {% for name in texts|keys %}
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#tab-text-{{ name }}">
                <i class="bi bi-translate"></i> {{ name }}
            </a>
        </li>
    {% endfor %}
</ul>
<div class="tab-content pt-1">
    <div class="tab-pane active show" id="tab-language" role="tabpanel">
        {% if can_insert %}
            <a class="btn btn-sm btn-outline-success text-uppercase shadow-sm mt-2" href="{{ 'language-insert'|link }}" data-bs-target="#static-modal" data-bs-toggle="modal">
                <i class="bi bi-plus-circle-dotted"></i> {{ 'new'|text }}
            </a>
        {% endif %}
        <table class="table table-hover table-striped-columns table-bordered" id="languages">
            <thead>
                <tr>
                    <th scope="col">{{ 'code'|text }}</th>
                    <th scope="col">{{ 'flag'|text }}</th>
                    <th scope="col">{{ 'name'|text }}</th>
                    <th scope="col">{{ 'description'|text }}</th>
                    <th scope="col">{{ 'date-created'|text }}</th>
                    <th scope="col" style="width:8rem">{{ 'action'|text }}</th>
                </tr>
            </thead>
            <tbody>
                {% for language in languages %}
                    <tr>
                        <th scope="row">{{ language['code'] }}</th>
                        <td>
                            {% set flag = language['code'] == 'en' ? 'us' : language['code'] %}
                            <img src="https://flagcdn.com/20x15/{{ flag }}.png" srcset="https://flagcdn.com/40x30/{{ flag }}.png 2x" width="20" height="15" alt="{{ language['full']|e }}">
                            {{ language['is_default'] ? ' <i class="bi bi-check-all text-primary ps-2"></i>' : '' }}
                        </td>
                        <td>{{ language['full'] }}</td>
                        <td>{{ language['description'] }}</td>
                        <td>{{ language['created_at'] }}</td>
                        <td>
                            <a class="ajax-modal btn btn-sm btn-info mt-1 shadow-sm" href="{{ 'language-view'|link({'id':language['id']}) }}" data-bs-target="#static-modal" data-bs-toggle="modal">
                                <i class="bi bi-eye"></i>
                            </a>
                            {% if can_update %}
                                <a class="ajax-modal btn btn-sm btn-primary mt-1 shadow-sm" href="{{ 'language-update'|link({'id':language['id']}) }}" data-bs-target="#static-modal" data-bs-toggle="modal">
                                    <i class="bi bi-pencil-square"></i>
                                </a>
                            {% endif %}
                            {% if can_delete %}
                                <button class="delete-language btn btn-sm btn-danger mt-1 shadow-sm" value="{{ language['id'] }}" type="button">
                                    <i class="bi bi-trash"></i>
                                </button>
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% for name,rows in texts %}
        <div class="tab-pane" id="tab-text-{{ name }}" role="tabpanel">
            {% if can_insert %}
                <a class="btn btn-sm btn-outline-success text-uppercase shadow-sm mt-2" href="{{ 'text-insert'|link({'table':name}) }}" data-bs-target="#static-modal" data-bs-toggle="modal">
                    <i class="bi bi-plus-circle-dotted"></i> {{ 'new'|text }}
                </a>
            {% endif %}
            <table class="table table-hover table-striped table-bordered" data-table="{{ name }}">
                <thead>
                    <tr>
                        <th scope="col">{{ 'keyword'|text }}</th>
                        {% for lang in localization.language %}
                            <th scope="col">{{ 'title'|text }} ({{ lang }})</th>
                        {% endfor %}
                        <th scope="col">{{ 'type'|text }}</th>
                        <th scope="col" style="width:8rem">{{ 'action'|text }}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in rows %}
                        <tr>
                            <td>{{ row['keyword'] }}</td>
                            {% for code in localization.language|keys %}
                                <td>{{ row['content']['text'][code] }}</td>
                            {% endfor %}
                            <td>{{ row['type'] }}</td>
                            <td>
                                <a class="ajax-modal btn btn-sm btn-info mt-1 shadow-sm" href="{{ 'text-view'|link({'table':name,'id':row['id']}) }}" data-bs-target="#static-modal" data-bs-toggle="modal">
                                    <i class="bi bi-eye"></i>
                                </a>
                                {% if can_update %}
                                    <a class="ajax-modal btn btn-sm btn-primary mt-1 shadow-sm" href="{{ 'text-update'|link({'table':name,'id':row['id']}) }}" data-bs-target="#static-modal" data-bs-toggle="modal">
                                        <i class="bi bi-pencil-square"></i>
                                    </a>
                                {% endif %}
                                {% if can_delete %}
                                    <button class="delete-text btn btn-sm btn-danger mt-1 shadow-sm" value="{{ row['id'] }}" type="button">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endfor %}
</div>
<script type="text/javascript">
    var tabLink = window.location.hash;
    if (tabLink) {
        let activeTab = document.querySelector('ul.nav.nav-tabs > li.nav-item > a.active.show');
        if (activeTab.href !== tabLink) {
            let linkTab = document.querySelector(`ul.nav.nav-tabs > li.nav-item > a[href="${tabLink}"]`);
            if (linkTab) {
                activeTab.classList.remove('active', 'show');
                linkTab.classList.add('active', 'show');
                document.querySelector(`div.tab-content > div.tab-pane.active.show`).classList.remove('active', 'show');
                document.querySelector(`div.tab-pane[id="${tabLink.substr(1)}"]`).classList.add('active', 'show');
            }
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        let tabLinks = document.querySelectorAll('ul.nav.nav-tabs > li > a.nav-link');
        tabLinks.forEach(navLink => navLink.addEventListener('click', function (e) {
            e.preventDefault();
            window.location.hash = navLink.href.substr(navLink.href.indexOf("#"));
        }));
        
        const languages = new motable('table#languages');

        const deleteLanguages = languages.table.querySelectorAll('.delete-language');
        deleteLanguages.forEach(btn => btn.addEventListener('click', function (e) {
            e.preventDefault();

            let thisRow = btn.closest('tr');
            if (!thisRow) {
                return NotifyTop('warning', `{{ 'error'|text|e }}`, 'Cannot select row!');
            }

            let questiondel;
            if (document.documentElement.lang === 'mn') {
                questiondel = '<p class="text-danger mb-3">Та ({0}) хэлийг устгахдаа итгэлтэй байна уу?</p>';
            } else {
                questiondel = '<p class="text-danger mb-3">Are you sure to delete the language ({0})?</p>';
            }
            let name = thisRow.children[2].innerHTML;
            let ask = questiondel.format(name.replace(/<\/?[^>]+(>|$)/g, ''));
            let src = '';
            let flag = thisRow.children[1].querySelector('img');
            if (flag) {
                src = flag.src;
            }
            Swal.fire({
                imageUrl: src,
                imageHeight: 16,
                html: ask,
                input: 'text',
                showCancelButton: true,
                cancelButtonText: `{{ 'cancel'|text|e }}`,
                confirmButtonText: `<i class="bi bi-trash"></i> {{ 'delete'|text|e }}`,
                confirmButtonColor: '#df4759',
                showLoaderOnConfirm: true,
                allowOutsideClick: () => !Swal.isLoading(),
                backdrop: true,
                preConfirm: (reason) => {
                    return fetch(
                        `{{ 'language-delete'|link }}`,
                        {
                            method: 'DELETE',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({
                                name,
                                reason,
                                id: btn.value
                            })
                        }
                    ).then(res => {
                        return res.json();
                    }).then(response => {
                        if (response.status !== 'success') {
                            throw new Error(response.message ?? 'Invalid response!');
                        }

                        window.location.reload();

                        NotifyTop('success', `{{ 'success'|text|e }}`, response.message ?? `Language (${name}) deleted`);
                    }).catch(error => {
                        Swal.showValidationMessage(error.message);
                    });
                }
            });
        }));
        
        const textTables = document.querySelectorAll('table[data-table]');
        textTables.forEach(table => {
            let text = new motable(table);
            text.setReady();
            
            let name = text.table.getAttribute('data-table');
            if (!name) return;
            
            const deleteText = text.table.querySelectorAll('.delete-text');
            deleteText.forEach(btn => btn.addEventListener('click', function (e) {
                e.preventDefault();

                let thisRow = btn.closest('tr');
                if (!thisRow) {
                    return NotifyTop('warning', `{{ 'error'|text|e }}`, 'Cannot select row!');
                }
                
                let questiondel;
                if (document.documentElement.lang === 'mn') {
                    questiondel = '<p class="text-danger mb-3">Та [{0}] текст бичлэгийг устгахдаа итгэлтэй байна уу?</p>';
                } else {
                    questiondel = '<p class="text-danger mb-3">Are you sure to delete the text with keyword [{0}]?</p>';
                }
                let keyword = thisRow.children[0].innerHTML;
                let question = questiondel.format(keyword.replace(/<\/?[^>]+(>|$)/g, ''));
                Swal.fire({
                    html: question,
                    showCancelButton: true,
                    cancelButtonText: `{{ 'cancel'|text|e }}`,
                    confirmButtonText: `<i class="bi bi-trash"></i> {{ 'delete'|text|e }}`,
                    confirmButtonColor: '#df4759',
                    showLoaderOnConfirm: true,
                    allowOutsideClick: () => !Swal.isLoading(),
                    backdrop: true,
                    preConfirm: () => {
                        return fetch(
                            `{{ 'text-delete'|link }}`,
                            {
                                method: 'DELETE',
                                headers: {
                                    'Content-Type': 'application/json'
                                },
                                body: JSON.stringify({
                                    keyword,
                                    table: name,
                                    id: btn.value
                                })
                            }
                        ).then(res => {
                            return res.json();
                        }).then(response => {
                            if (response.status !== 'success') {
                                throw new Error(response.message ?? 'Invalid response!');
                            }

                            Swal.close();

                            thisRow.remove();
                            text.setReady();

                            NotifyTop('success', `{{ 'success'|text|e }}`, response.message ?? `Text ${keyword} deleted`);
                        }).catch(error => {
                            Swal.showValidationMessage(error.message);
                        });
                    }
                });
            }));
        });
    });
</script>