@extends('backend.layouts.master')

@section('content')
<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-header align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">{{$language->name}}</h4>
                <div class="flex-shrink-0">
                    <div class="search-box mb-2">
                        <form id="language_search" class="app-search d-none d-md-block" method="GET" action="{{route('languages.index')}}" onChange="languageSearch()">
                            <div class="position-relative mb-2">
                                <input type="text" class="form-control" name="search" placeholder="Search..." autocomplete="off" id="search-options" value="">
                                <span class="mdi mdi-magnify search-widget-icon"></span>
                                <span class="mdi mdi-close-circle search-widget-icon search-widget-icon-close d-none" id="search-close-options"></span>
                            </div>
                        </form>
                    </div>
                </div>
            </div><!-- end card header -->

            <div class="card-body"><div class="live-preview">
                    <div class="table-responsive table-card">
                        <form action="{{route('languages.key_value_store')}}" method="POST">
                            @csrf
                            <input type="hidden" name="id" value="{{ $language->id }}">
                            <table class="table align-middle table-nowrap mbl-2">
                                <thead class="table-light">
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">Key</th>
                                        <th scope="col">Value</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($lang_keys as $key => $translation)
                                        <tr>
                                            
                                            <td>{{ ($key+1) + ($lang_keys->currentPage() - 1)*$lang_keys->perPage() }}</td>
                                            <td>{{ $translation->lang_value }}</td>
                                            <td>
                                                <input type="text" class="form-control value" style="width:100%" name="values[{{ $translation->lang_key }}]" @if (($traslate_lang = \App\Models\Translation::where('lang', $language->code)->where('lang_key', $translation->lang_key)->latest()->first()) != null)
                                                    value="{{ $traslate_lang->lang_value }}"
                                                @endif>
                                            </td>
                                            
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            <div class="container">
                                <div class="row justify-content-md-center">
                                    <div class="col col-lg-6">
                                        {{ $lang_keys->appends(request()->input())->links() }}
                                    </div>
                                    <div class="col-md-auto">
                                        <button type="button" class="btn btn-primary" onclick="copyTranslation()">{{ translate('Copy Translations') }}</button>
                                    </div>
                                    <div class="col col-lg-2">
                                        <button type="submit" class="btn btn-primary mb-2">{{translate('Save')}}</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div><!-- end card-body -->
        </div><!-- end card -->
    </div><!-- end col -->
</div><!-- end row -->
@endsection
@section('script')
    <script type="text/javascript">
        //translate in one click
        function copyTranslation() {
            $('#tranlation-table > tbody  > tr').each(function (index, tr) {
                $(tr).find('.value').val($(tr).find('.key').text());
            });
        }

        function sort_keys(el){
            $('#sort_keys').submit();
        }
    </script>
@endsection