@extends('admin.layouts.master')
@section('content')
    <div class="row">
        <div class="col-12">
            <x-admin.back-button :route="route('admin.languages.index')"/>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-12 col-12 mb-3">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">{{__("dashboard.edit-language")}}</h3>
                </div>
                <div class="card-body">
                    <form action="{{route('admin.languages.update', $language->code)}}" method="POST"
                          enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="form-group row">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-12 mb-3">
                                <label class="form-label" for="code">{{ __("dashboard.code") }} <span
                                        class="text-danger">*</span></label>
                                <input class="form-control @error('code') is-invalid @enderror"
                                       type="text" id="code" name="code"
                                       value="{{ old('code', $language->code) }}" required/>
                                @error('code')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-12 mb-3">
                                <label class="form-label" for="name">{{ __("dashboard.name") }} <span
                                        class="text-danger">*</span></label>
                                <input class="form-control @error('name') is-invalid @enderror"
                                       type="text" id="name" name="name"
                                       value="{{ old('name', $language->name) }}" required/>
                                @error('name')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-12 mb-3">
                                <label class="form-label" for="native">{{ __("dashboard.native") }} <span
                                        class="text-danger">*</span></label>
                                <input class="form-control @error('native') is-invalid @enderror"
                                       type="text" id="native" name="native"
                                       value="{{ old('native', $language->native) }}" required/>
                                @error('native')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-12 mb-3">
                                <label class="form-label" for="script">{{ __("dashboard.script") }} <span
                                        class="text-danger">*</span></label>
                                <input class="form-control @error('script') is-invalid @enderror"
                                       type="text" id="script" name="script"
                                       value="{{ old('script', $language->script) }}" required/>
                                @error('script')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-12 mb-3">
                                <label class="form-label" for="regional">{{ __("dashboard.regional") }} <span
                                        class="text-info">*</span></label>
                                <input class="form-control @error('regional') is-invalid @enderror"
                                       type="text" id="regional" name="regional"
                                       value="{{ old('regional', $language->regional) }}"/>
                                @error('regional')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col">
                                <button type="submit" class="btn btn-primary">
                                    {{__("dashboard.submit")}}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-lg-12 col-md-6 col-sm-12 col-12 mb-3">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        {{__("dashboard.translations")}}
                    </h5>
                </div>
                <div class="card-body">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>{{__("dashboard.key")}}</th>
                            <th>{{__("dashboard.value")}}</th>
                            <th>{{__("dashboard.actions")}}</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($translations as $key => $value)
                            <tr>
                                <td>{{ $key }}</td>
                                <td>
                                    <input type="text" class="form-control translation-value" id="{{$key}}"
                                           data-key="{{ $key }}"
                                           data-lang="{{ $language->code }}" value="{{ $value }}">
                                </td>
                                <td class="d-flex gap-2 align-items-center">
                                    <button class="btn btn-info" onclick="translateBtn(this)"
                                            data-key="{{ $key }}"
                                            data-lang="{{ $language->code }}">
                                        {{__("dashboard.auto-translate")}}
                                    </button>


                                    <button class="btn btn-success save-translation" data-key="{{ $key }}"
                                            data-lang="{{ $language->code }}">
                                        {{__("dashboard.save")}}
                                    </button>
                                </td>
                            </tr>

                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
@endsection

@section('script')
    <script>
        function translateBtn(element) {
            let key = element.dataset['key'];
            let lang = element.dataset['lang'];
            let input = document.querySelector(`input[data-key="${key}"]`);

            if (!input || !input.value.trim()) {
                alert("{{__("dashboard.empty-text")}}");
                return;
            }

            element.disabled = true;
            element.innerHTML = `<div class='spinner-border spinner-border-sm' role='status'>
                            <span class='visually-hidden'>Loading...</span>
                         </div>`;

            $.get(`https://api.mymemory.translated.net/get?q=${encodeURIComponent(input.value)}&langpair=en|${lang}`)
                .done(function (response) {
                    if (input && response.responseData) {
                        input.value = response.responseData.translatedText;
                    }
                })
                .fail(function (error) {
                    console.error("Error fetching translation:", error);
                    alert("{{__("dashboard.such-as-error-try-again.")}}");
                })
                .always(function () {
                    element.disabled = false;
                    element.innerHTML = "{{__("dashboard.auto-translate")}}";
                });
        }




        $(document).ready(function () {
            $('.save-translation').on('click', function () {
                let key = $(this).data('key');
                let lang = $(this).data('lang');
                let value = $(this).closest('tr').find('.translation-value').val();

                $.ajax({
                    url: "{{ route('admin.languages.update-translation') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        key: key,
                        lang: lang,
                        value: value
                    },
                    success: function (response) {
                        successNotification(response.message);
                    },
                    error: function (xhr) {
                        errorNotification("{{__("dashboard.such-as-error-try-again.")}}");
                    }
                });
            });
        });
    </script>
@endsection