@extends('layouts.app', ['title' => ($pageTitle ?? '')])
@php
    $languageType = request()->languageType;
@endphp

@section('content')
<style>
    .spin {
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    .form-control {
        padding: 0.270rem .75rem;
        height: calc(2rem + 6px);
    }

    .toggle-switch {
        width: 275px;
    }

    .list-group-item {
        border-left: 0;
        border-right: 0;
    }
</style>

{{-- Header --}}
<div class="header pb-6">
    <div class="container-fluid container-fluid-padding p-1">
        <div class="header-body">
            <div class="row align-items-center py-4">
                <div class="col-lg-6 col-7">
                </div>
                <div class="col-lg-6 col-5 text-right">
                    <a href="{{ route('manage.translations.languages') }}" class="btn btn-neutral btn-sm btn-primary btn-icon">
                        <span class="btn-inner--icon"><i class="fs-15 mdi mdi-arrow-left-thick"></i></span>
                        <span>{{ __tr('Back to languages') }}</span>
                    </a>
                    <a id="reScanBtn" href="{{ route('manage.translations.scan', ['languageId' => $languageInfo['id']]) }}" class="btn btn-neutral btn-sm btn-primary btn-icon lw-ajax-link-action">
                        <span class="btn-inner--icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 26 26" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M4 8V4h4M20 8V4h-4M4 16v4h4M20 16v4h-4" />
                            </svg>
                        </span>
                        <span>{{ __tr('Re-Scan') }}</span>
                    </a>
                    <div class="btn-group">
                        <button type="button" class="btn btn-neutral btn-sm btn-primary dropdown-toggle" data-toggle="dropdown">
                            {{ __tr('Auto Translate') }}
                        </button>
                        <div class="dropdown-menu dropdown-menu-right">
                            @if (getAppSettings("microsoft_translator_api_key"))
                            <a class="dropdown-item lw-ajax-link-action" data-method="post" href="{{ route('manage.translations.auto_translate', ['serviceId' => 'microsoft', 'languageId' => $languageInfo['id']]) }}">
                                <i class="fs-15 mdi mdi-microsoft"></i> {{ __tr('Microsoft Translator') }}
                            </a>
                            @else
                            <span class="dropdown-item disabled text-muted">{{ __tr('Microsoft Translator - Key not added') }}</span>
                            @endif
                            <a class="dropdown-item" href="#" data-toggle="modal" data-target="#autoTranslationDialog">
                                <i class="fs-15 mdi mdi-google-drive"></i> {{ __tr('Google Spreadsheet') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{-- End Header --}}

<div class="container-fluid mt--6">
    <div class="row">
        <div class="col-xl-12 mb-4">
            <div class="alert alert-warning shadow-sm rounded-3 d-flex align-items-center gap-3">
                <i class="fs-15 mdi mdi-alert-circle-outline fs-20"></i>
                <div>
                    <h5 class="alert-heading fw-bold mb-1">{{ __tr('Heads Up!') }}</h5>
                    <p class="mb-0">{{ __tr('The Google Auto Translate feature is API-key-less. Your IP may be blocked temporarily if you make too many requests.') }}</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Tabs --}}
    <div class="row">
        <div class="toggle-switch ml-15" id="campaignTabs">
            <input type="radio"
                id="activeTab"
                name="tab"
                class="tab-toggle"
                data-url="{{ route('manage.translations.lists', ['languageId' => $languageInfo['id'], 'languageType' => 'translated']) }}"
                {{ $languageType == 'translated' ? 'checked' : '' }}>
            <label for="activeTab">All Translations</label>

            <input type="radio"
                id="archivedTab"
                name="tab"
                class="tab-toggle"
                data-url="{{ route('manage.translations.lists', ['languageId' => $languageInfo['id'], 'languageType' => 'untranslated']) }}"
                {{ $languageType == 'untranslated' ? 'checked' : '' }}>
            <label for="archivedTab">Untranslated Only</label>

            <span class="toggle-slider"></span>
        </div>
    </div>

    {{-- Main Content --}}
    <div class="row" id="mainContentArea">
        <div class="col-xl-12 {{ $languageInfo['is_rtl'] ? 'lw-lang-direction-rtl' : 'lw-lang-direction-ltr' }}">

            <div class="card shadow-sm mb-4 border-0">
                <div class="card-header">
                    <h5 class="mb-0">{{ __tr('Translation Strings') }}</h5>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        @php $hasData = false; @endphp
                        @foreach ($translations as $translationsItemKey => $translationsItem)
                        @if($languageType == "translated" || ($languageType == "untranslated" && !$translationsItem->isTranslated()))
                        @php $hasData = true; @endphp
                        <li class="list-group-item px-3 py-3">
                            <p class="mb-2 fw-bold text-dark">{{ $translationsItem->getOriginal() }}</p>

                            {{-- Singular form --}}
                            <form class="lw-ajax-form lw-form mb-2" method="post"
                                action="{{ route('manage.translations.update', ['languageType' => $languageType]) }}"
                                data-show-processing="true">
                                <div class="input-group">
                                    @if ($translationsItem->getPlural())
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-secondary text-white">{{ __tr('Singular') }}</span>
                                    </div>
                                    @endif
                                    <input type="text" class="form-control"
                                        name="message_str"
                                        id="{{ $translationsItemKey }}"
                                        value="{{ $translationsItem->getTranslation() }}">
                                    <input type="hidden" name="message_id" value="{{ $translationsItem->getOriginal() }}">
                                    <input type="hidden" name="message_for_translate" value="{{ $translationsItem->getOriginal() }}">
                                    <input type="hidden" name="id" value="{{ $translationsItemKey }}">
                                    <input type="hidden" name="language_id" value="{{ $languageId }}">
                                    <input type="hidden" name="old_message_str" value="{{ $translationsItem->getTranslation() }}">
                                    <div class="input-group-append">
                                        <button class="btn btn-primary lw-auto-translate-action" type="button">
                                            <i class="mdi mdi-translate-variant fs-15"></i>
                                        </button>
                                        <button class="btn btn-success lw-save-translation lw-ajax-form-submit-action" type="button">
                                            <i class="mdi mdi-content-save"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>

                            {{-- Plural form --}}
                            @if ($translationsItem->getPlural())
                            <form class="lw-ajax-form lw-form" method="post"
                                action="{{ route('manage.translations.update', ['languageType' => $languageType]) }}"
                                data-show-processing="true">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-secondary text-white">{{ __tr('Plural') }}</span>
                                    </div>
                                    <input type="text" class="form-control"
                                        name="message_str_plural"
                                        id="{{ $translationsItemKey }}Plural"
                                        value="{{ $translationsItem->getPluralTranslations(2)[0] }}">
                                    <input type="hidden" name="message_id" value="{{ $translationsItem->getOriginal() }}">
                                    <input type="hidden" name="message_for_translate" value="{{ $translationsItem->getPlural() }}">
                                    <input type="hidden" name="is_plural" value="true">
                                    <input type="hidden" name="id" value="{{ $translationsItemKey }}Plural">
                                    <input type="hidden" name="language_id" value="{{ $languageId }}">
                                    <input type="hidden" name="old_message_str_plural" value="{{ $translationsItem->getPluralTranslations(2)[0] }}">
                                    <div class="input-group-append">
                                        <button class="btn btn-primary lw-auto-translate-action" type="button">
                                            <i class="mdi mdi-translate-variant fs-15"></i>
                                        </button>
                                        <button class="btn btn-success lw-save-translation lw-ajax-form-submit-action" type="button">
                                            <i class="mdi mdi-content-save"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                            @endif
                        </li>
                        @endif
                        @endforeach

                        @if(!$hasData)
                        <li class="list-group-item text-center">
                            {{ __tr('There are no untranslated string available.') }}
                        </li>
                        @endif
                    </ul>
                </div>
            </div>
            <div class="col-xl-12 text-right mb-2">
                <div class="btn btn-sm-group" role="group">
                    <a class="btn btn-sm light" href="