@extends('layouts.app')

@section('title')
{{trans('title.translation_manager')}}
@stop

@section('plugin-styles')
    <link rel="stylesheet" href="{{asset('vendors/x-editable/bootstrap-editable.css')}}">
    <style>
        a.status-1{
            font-weight: bold;
        }
    </style>
@stop

@section('content')
    <div class="content">
        <x-content.header title="{{__('title.settings')}} - {{__('title.translation_manager')}}" />
        <div class="tw-card">
            <div class="p-6">
                <p>{!! trans('title.translations_visible_text')!!}</p>

                <div class="alert alert-success success-import" style="display:none;">
                    <p>{!! trans('title.done_importing') !!}</p>
                </div>
                <div class="alert alert-success success-find" style="display:none;">
                    <p>{!! trans('title.done_searching') !!}</p>
                </div>
                <div class="alert alert-success success-publish" style="display:none;">
                    <p>{{trans('title.publishing_translations')}} '{{$group}}'!</p>
                </div>
                <div class="alert alert-success success-publish-all" style="display:none;">
                    <p>{{trans('title.publishing_translations_all')}}</p>
                </div>
                @if(Session::has('successPublish'))
                    <div class="alert alert-info">
                        {{Session::get('successPublish')}}
                    </div>
                @endif
                <p>
                    @if(!isset($group))
                        <form class="form-import" method="POST" action="{{action('\App\Http\Controllers\TranslatorController@postImport')}}" data-remote="true" role="form">
                            <input type="hidden" name="_token" value="{{csrf_token()}}">
                            <div class="form-group">
                                <div class="row d-flex align-items-center">
                                    <div class="col-sm-4">
                                        <select name="replace" class="pd-dropdown w-100">
                                            <option value="0">{{trans('title.new_translations')}}</option>
                                            <option value="1">{{trans('title.replace_existing_translations')}}</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-3">
                                        <button type="submit" class="btn btn-success btn-block"  data-disable-with="{{trans('title.Loading')}}..">{{trans('title.import_groups')}}</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <form class="form-find" method="POST" action="{{action('\App\Http\Controllers\TranslatorController@postFind')}}" data-remote="true" role="form" data-confirm="{{trans('title.are_you_sure_app_folder')}}">
                            <div class="form-group">
                                <input type="hidden" name="_token" value="{{csrf_token()}}">
                                <button type="submit" class="btn btn-info" data-disable-with="{{trans('title.searching')}}.." >{{trans('title.find_translations')}}</button>
                            </div>
                        </form>
                    @endif
                    @if(isset($group))
                        <form class="form-inline form-publish my-4" method="POST" action="{{action('\App\Http\Controllers\TranslatorController@postPublish', $group)}}" data-remote="true" role="form" data-confirm="{{trans('title.are_you_sure_translation')}} '{{$group}}? {{trans('title.overwrite_existing_language')}}">
                            <input type="hidden" name="_token" value="{{csrf_token()}}">
                            <button type="submit" class="btn btn-info" data-disable-with="{{trans('title.publishing')}}.." >{{trans('title.publish_translations')}}</button>
                            <a href="{{action('\App\Http\Controllers\TranslatorController@getIndex')}}" class="btn btn-link">{{trans('title.back')}}</a>
                        </form>
                    @endif
                </p>
                <hr/>

                <form role="form" class="my-4" method="POST" action="{{action('\App\Http\Controllers\TranslatorController@postAddGroup')}}">
                    <input type="hidden" name="_token" value="{{csrf_token()}}">
                    <div class="form-group row">
                        <div class="col-sm-6">
                            <p>{{trans('title.choose_group_translations_text')}}</p>
                            <select name="group" id="group" class="pd-dropdown group-select">
                                @foreach($groups as $key => $value)
                                    <option value="{{$key}}"{{$key == $group ? ' selected':''}}>{{ucfirst($value)}}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-sm-6">
                            <label>{{trans('title.start_edit_translations')}}</label>
                            <input type="text" class="form-control form-control-sm" name="new-group" />
                            <div class="form-group mt-4">
                                <input type="submit" class="btn btn-light" name="add-group" value="{{trans('title.add_edit_keys')}}" />
                            </div>
                        </div>

                    </div>
                </form>
                @if($group)
                    @if($group != "all")
                        <form action="{{action('\App\Http\Controllers\TranslatorController@postAdd', array($group))}}" method="POST"  role="form">
                            <input type="hidden" name="_token" value="{{csrf_token()}}">
                            <div class="form-group">
                                <label>{{trans('title.add_new_keys')}}</label>
                                <textarea class="form-control" rows="3" name="keys" placeholder="{{trans('title.add_key_per_line')}}"></textarea>
                            </div>
                            <div class="form-group">
                                <input type="submit" value="{{trans('title.add_keys')}}" class="btn btn-primary">
                            </div>
                        </form>
                    @endif
                    <hr>
                <h4>{{trans('forms.lbl_total')}}: {{$numTranslations}}, {{trans('title.lbl_changed')}}: {{$numChanged}}</h4>

                <table class="table dt-responsive w-100" id="datatable">
                    <thead>
                        <tr>
                            <th width="15%">{{trans('title.lbl_key')}}</th>
                            @foreach ($locales as $locale)
                                <th>{{$locale}}</th>
                            @endforeach
                            @if ($deleteEnabled)
                                <th>&nbsp;</th>
                            @endif
                        </tr>
                    </thead>
                    <tbody>

                        @foreach ($translations as $key => $translation)
                            <tr id="{{htmlentities($key, ENT_QUOTES, 'UTF-8', false)}}">
                                <td>{{htmlentities($key, ENT_QUOTES, 'UTF-8', false)}}</td>
                                @php $temp_group = null; @endphp
                                @foreach ($locales as $locale)
                                    @php $t = isset($translation[$locale]) ? $translation[$locale] : null @endphp
                                    @php $temp_group = isset($translation[$locale]) ? $translation[$locale]->group :
                                        (isset($temp_group) ? $temp_group : null) @endphp

                                    <td>
                                        <a href="#edit"

                                        class="editable status-{{$t ? $t->status : 0}} locale-{{$locale}}"
                                        data-locale="{{$locale}}" data-name="{{$locale . "|" . htmlentities($key, ENT_QUOTES, 'UTF-8', false)}}"
                                        id="username" data-type="textarea" data-pk="{{$t ? $t->id : 0}}"
                                        data-url="{{$editUrl}}"
                                        data-title="Enter translation">{{$t ? htmlentities($t->value, ENT_QUOTES, 'UTF-8', false) : ''}}</a>
                                    </td>
                                @endforeach
                                @if ($deleteEnabled)
                                    <td>
                                        @if(isset($key) && isset($temp_group))
                                            <a href="{{action('\App\Http\Controllers\TranslatorController@postDelete', [$temp_group, $key])}}"
                                                class="delete-key"
                                                data-confirm="Are you sure you want to delete the translations for {{htmlentities($key, ENT_QUOTES, 'UTF-8', false)}}?"><span
                                                class="mdi mdi-delete"></span></a>
                                        @endif
                                    </td>
                                    @endif
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

                @else
                    <hr/>
                    <div class="row">
                        <div class="col-sm-6">
                            <fieldset>
                                <legend>{{trans('title.supported_locales')}}</legend>
                                <p>
                                    {{trans('title.current_supported_locales')}}:
                                </p>
                                <form  class="form-remove-locale" method="POST" role="form" action="{{action('\App\Http\Controllers\TranslatorController@postRemoveLocale')}}" data-confirm="Are you sure to remove this locale and all of data?">
                                    <input type="hidden" name="_token" value="{{csrf_token()}}">

                                    <ul class="list-locales">
                                    @foreach($locales as $locale)
                                        <li>
                                            <div class="form-group row">
                                                <div class="col-sm-3">
                                                    {{$locale}}
                                                </div>
                                                <div class="col-sm-2">
                                                    <button type="submit" name="remove-locale[{{$locale}}]" class="btn btn-outline-secondary btn-rounded btn-icon " data-disable-with="...">
                                                        <i class="mdi mdi-close text-danger"></i>
                                                    </button>
                                                </div>

                                            </div>
                                        </li>
                                    @endforeach
                                    </ul>
                                </form>

                                <form class="form-add-locale" method="POST" role="form" action="{{action('\App\Http\Controllers\TranslatorController@postAddLocale')}}">
                                    <input type="hidden" name="_token" value="{{csrf_token()}}">
                                    <div class="form-group">
                                        <p>
                                            {{trans('title.Enter_new_locale_key')}}:
                                        </p>
                                        <div class="form-group">
                                            <input type="text" name="new-locale" class="form-control form-control-sm" required/>
                                        </div>

                                        <div class="form-group">
                                            <input type="text" name="new-locale-full" placeholder="{{ __("forms.full_name") }}" class="form-control form-control-sm" required />
                                        </div>
                                        <div class="form-group" style="width: 40%">
                                            <button type="submit" class="btn btn-light btn-block"  data-disable-with="{{trans('title.adding')}}..">{{trans('title.add_new_locale')}}</button>
                                        </div>
                                    </div>
                                </form>
                            </fieldset>
                        </div>
                        <div class="col-sm-6">
                            <fieldset>
                                <legend>{{trans('title.export_all_translations')}}</legend>
                                <form class="form-inline form-publish-all" method="POST" action="{{action('\App\Http\Controllers\TranslatorController@postPublish', '*')}}" data-remote="true" role="form" data-confirm="{{trans('title.publish_translations_all')}}">
                                    <input type="hidden" name="_token" value="{{csrf_token()}}">
                                    <button type="submit" class="btn btn-primary" data-disable-with="{{trans('title.publishing')}}.." >{{trans('title.publish_all')}}</button>
                                </form>
                            </fieldset>
                        </div>
                    </div>



                @endif
            </div>
        </div>
    </div>

@stop

@section('footer-script')
    <script src="{{asset('vendors/x-editable/bootstrap-editable.min.js')}}"></script>
    <script src="{{asset('js/rails.js')}}"></script>

    <script>
        jQuery(document).ready(function($){
            $.fn.editable.defaults.mode = 'inline';
            $.ajaxSetup({
                beforeSend: function(xhr, settings) {
                    settings.data += "&_token={{csrf_token()}}";
                }
            });


            $("#datatable").DataTable({
                dom         : '<"row"<"col-sm-6 col-md-5 col-lg-4 text-left"f><"col-sm-6 col-md-7 col-lg-8 text-right" <"toolbar d-flex justify-content-end align-items-center">>>rt<"row page-length"<"col-md-6 col-xs-12 length-menu"l><"col-md-6  col-xs-12"p>><"clear">',

                oLanguage   : {
                "sProcessing"           : '<div class="d-flex justify-content-center align-items-center text-info ">'+localize_string.lbl_please_wait+' <div role="status"><span class="">...</span></div></div>',
                "sSearch"               : "",
                'sSearchPlaceholder'    : localize_string.lbl_search,
                "sEmptyTable"           : localize_string.lbl_nothing_found,
                "sZeroRecords"          : localize_string.lbl_nothing_found,
                "sLengthMenu"           : localize_string.lbl_show + " _MENU_" + localize_string.lbl_entries,
                "oPaginate": {
                    "sNext": "<span aria-hidden='true' class='mdi mdi-chevron-right'></span><span class='sr-only'>" + localize_string.lbl_next + "</span>",
                    "sPrevious": "<span aria-hidden='true' class='mdi mdi-chevron-left'></span><span class='sr-only'>" + localize_string.lbl_previous + "</span>"
                }

            },
                pageLength : 25,
                responsive  : {
                    details: {
                        type: 'row',
                        target: 'tr'
                    }
                },
                fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                    $('.editable').editable().on('hidden', function(e, reason){
                        var locale = $(this).data('locale');
                        if(reason === 'save'){
                            $(this).removeClass('status-0').addClass('status-1');
                        }
                        if(reason === 'save' || reason === 'nochange') {
                            var $next = $(this).closest('tr').next().find('.editable.locale-'+locale);
                            setTimeout(function() {
                                $next.editable('show');
                            }, 300);
                        }
                    });
                }
            });


            $('.group-select').on('change', function(){
                var group = $(this).val();
                if (group) {
                    window.location.href = '{{action('\App\Http\Controllers\TranslatorController@getView')}}/'+$(this).val();
                } else {
                    window.location.href = '{{action('\App\Http\Controllers\TranslatorController@getIndex')}}';
                }
            });

            $(document).on("click", "a.delete-key", function(event){
                event.preventDefault();
                var row = $(this).closest('tr');
                var url = $(this).attr('href');
                var id = row.attr('id');
                $.post( url, {id: id}, function(){
                    row.remove();
                });
            });

            $('.form-import').on('ajax:success', function (e, data) {
                $('div.success-import strong.counter').text(data.counter);
                $('div.success-import').slideDown();
                window.location.reload();
            });

            $('.form-find').on('ajax:success', function (e, data) {
                $('div.success-find strong.counter').text(data.counter);
                $('div.success-find').slideDown();
                window.location.reload();
            });

            $('.form-publish').on('ajax:success', function (e, data) {
                $('div.success-publish').slideDown();
            });

            $('.form-publish-all').on('ajax:success', function (e, data) {
                $('div.success-publish-all').slideDown();
            });

        })
    </script>

@stop