@extends('Backend.Layout.app')
@section('content')

    <div class="d-flex flex-column flex-column-fluid">
        <div id="kt_app_toolbar" class="app-toolbar  py-3 py-lg-6 ">

            <!--begin::Toolbar container-->
            <div id="kt_app_toolbar_container" class="app-container   d-flex flex-stack ">


                <!--begin::Page title-->
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3 ">
                    <!--begin::Title-->
                    <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">
                        {{ $language  }}
                    </h1>
                </div>

            </div>
            <!--end::Toolbar container-->
        </div>

        <!--begin::Content-->
        <div id="kt_app_content" class="app-content  flex-column-fluid  py-3">


            <!--begin::Content container-->
            <div id="kt_app_content_container" class="app-container   ">
                <!--begin::Card-->

                <!--end::Card-->
                <!--begin::Card-->

                <div class="card card-flush">
                        <div class="card-header align-items-center py-5 gap-2 gap-md-5">
                         <div class="col-md-4">
                           <form class="" id="sort_keys" action="" method="GET">
                             <div class="input-group input-group-sm">

                                 <input type="text" class="form-control" id="search" name="search"@isset($sort_search) value="{{ $sort_search }}" @endisset placeholder="{{ translate('Type key & Enter') }}">
                             </div>
                           </form>
                         </div>
                        </div>
                    <div class="card-body  py-4">
                        <form class="form-horizontal" action="{{ route('backend.settings.languages.key_value_store') }}" method="POST">
                            @csrf
                            <input type="hidden" name="lang" value="{{ $language }}">
                            <div class="card-body">
                                <table class="table table-striped table-bordered demo-dt-basic" id="tranlation-table" cellspacing="0" width="100%">
                                    <thead>
                                    <tr>
                                        <th>#</th>
                                        <th width="45%">{{translate('Key')}}</th>
                                        <th width="45%">{{translate('Value')}}</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    @foreach ($lang_keys as $key => $translation)
                                        <tr>
                                            <td>{{ ($key+1) + ($lang_keys->currentPage() - 1)*$lang_keys->perPage() }}</td>
                                            <td class="key">{{ Str::limit($translation->lang_key,100) }}</td>
                                            <td>
                                                <input type="text" class="form-control value" style="width:100%" name="values[{{ $translation->lang_key }}]" value="{{ $translation->lang_value }}"
                                                >
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                                <div class=" pagination">
                                    {{ $lang_keys->withQueryString()->links('pagination::bootstrap-5')}}
                                </div>

                                <div class="form-group mb-0 text-right">
                                    <button type="button" class="btn btn-primary" onclick="copyTranslation()">{{ translate('Copy Translations') }}</button>
                                    <button type="submit" class="btn btn-primary">{{translate('Save')}}</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

@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