@extends('admin.setting.index')

@section('sub_content')
    <div class="company-detail-body">
        <div class="company-detail-top-bar d-flex justify-content-end">
            <button class="btn btn--secondary btn--sm me-1 importBtn"> <i class="las la-download"></i> @lang('Import Keywords')</button>
            <button class="btn btn--base btn--sm" data-bs-toggle="modal" data-bs-target="#addModal"> <i class="las la-plus"></i> @lang('Add New Key')</button>
        </div>
        <div class="company-detail-body-inner">
            <div class="table-scroller">
                <table class="table">
                    <thead>
                        <tr>
                            <th>
                                @lang('Key')
                            </th>
                            <th>
                                {{ __($lang->name) }}
                            </th>
                            <th>@lang('Action')</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($json as $k => $language)
                            <tr>
                                <td class="white-space-wrap">{{ $k }}</td>
                                <td class="text-left white-space-wrap">{{ $language }}</td>

                                <td>
                                    <div class="flex-end gap-4">

                                        <button type="button" data-title="{{ $k }}" data-key="{{ $k }}" data-value="{{ $language }}" class="editModal btn--sm" data-bs-toggle="tooltip" title="@lang('Edit')">
                                            @include('admin.partials.svg.edit')
                                        </button>

                                        <button type="button" data-key="{{ $k }}" data-value="{{ $language }}" class="deleteKey" data-bs-toggle="tooltip" title="@lang('Delete')">
                                            @include('admin.partials.svg.delete')
                                        </button>

                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="100%">
                                    <x-empty-message message="No language key found" />
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table><!-- table end -->

            </div>
        </div>
    </div>


    <div class="modal custom--modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="addModalLabel"> @lang('Add New')</h4>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>

                <form action="{{ route('admin.language.store.key', $lang->id) }}" method="post">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="form--label style-two" for="key">@lang('Key')</label>
                            <input type="text" class="form--control md-style" id="key" name="key" value="{{ old('key') }}" required>

                        </div>
                        <div class="form-group">
                            <label class="form--label style-two" for="value">@lang('Value')</label>
                            <input type="text" class="form--control md-style" id="value" name="value" value="{{ old('value') }}" required>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn--base btn--md w-100"> @lang('Submit')</button>
                    </div>
                </form>

            </div>
        </div>
    </div>


    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="editModalLabel">@lang('Edit')</h4>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><i class="las la-times"></i></button>
                </div>

                <form action="{{ route('admin.language.update.key', $lang->id) }}" method="post">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group ">
                            <label class="form--label style-two" for="inputName" class="form-title"></label>
                            <input type="text" class="form--control md-style" name="value" required>
                        </div>
                        <input type="hidden" name="key">
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn--base btn--md w-100">@lang('Submit')</button>
                    </div>
                </form>

            </div>
        </div>
    </div>


    <!-- Modal for DELETE -->
    <div class="modal fade" id="DelModal" tabindex="-1" role="dialog" aria-labelledby="DelModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="DelModalLabel"> @lang('Confirmation Alert!')</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><i class="las la-times"></i></button>
                </div>
                <div class="modal-body">
                    <p>@lang('Are you sure to delete this key from this language?')</p>
                </div>
                <form action="{{ route('admin.language.delete.key', $lang->id) }}" method="post">
                    @csrf
                    <input type="hidden" name="key">
                    <input type="hidden" name="value">
                    <div class="modal-footer">
                        <button type="button" class="btn btn--dark btn--sm" data-bs-dismiss="modal">@lang('No')</button>
                        <button type="submit" class="btn btn--base btn--sm">@lang('Yes')</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="importModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">@lang('Import Keywords')</h4>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><i class="las la-times"></i></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form--label style-two">@lang('Import From')</label>
                        <select class="form--control md-style select_lang select2-basic" data-minimum-results-for-search="-1" required>
                            <option value="">@lang('Select One')</option>
                            <option value="999">@lang('System')</option>
                            @foreach ($list_lang as $data)
                                @if ($data->id != $lang->id)
                                    <option value="{{ $data->id }}">{{ __($data->name) }}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn--dark btn--sm" data-bs-dismiss="modal">@lang('Close')</button>
                    <button type="button" class="btn btn--base btn--sm import_lang"> @lang('Import Now')</button>
                </div>
            </div>
        </div>
    </div>
@endsection



@push('script')
    <script>
        (function($) {
            "use strict";
            $(document).on('click', '.deleteKey', function() {
                var modal = $('#DelModal');
                modal.find('input[name=key]').val($(this).data('key'));
                modal.find('input[name=value]').val($(this).data('value'));
                modal.modal('show');
            });
            $(document).on('click', '.editModal', function() {
                var modal = $('#editModal');
                modal.find('.form-title').text($(this).data('title'));
                modal.find('input[name=key]').val($(this).data('key'));
                modal.find('input[name=value]').val($(this).data('value'));
                modal.modal('show');
            });


            $(document).on('click', '.importBtn', function() {
                $('#importModal').modal('show');
            });
            $(document).on('click', '.import_lang', function(e) {
                var id = $('.select_lang').val();

                if (id == '') {
                    notify('error', 'Invalid selection');

                    return 0;
                } else {
                    $.ajax({
                        type: "post",
                        url: "{{ route('admin.language.import.lang') }}",
                        data: {
                            id: id,
                            toLangid: "{{ $lang->id }}",
                            _token: "{{ csrf_token() }}"
                        },
                        success: function(data) {
                            if (data == 'success') {
                                notify('success', 'Import Data Successfully');
                                window.location.href = "{{ url()->current() }}"
                            }
                        }
                    });
                }

            });
        })(jQuery);
    </script>
@endpush
