@extends('admin.setting.index')

@section('sub_content')
    <div class="company-detail-body">
        <div class="company-detail-top-bar py-3 d-flex justify-content-end gap-2">
            <button type="button" class="btn btn--sm btn--base me-1" data-bs-toggle="modal" data-bs-target="#createModal"><i class="las la-plus"></i> @lang('Add New')</button>
            <button type="button" class="btn btn--sm btn--secondary keyBtn" data-bs-toggle="modal" data-bs-target="#getLangModal"><i class="las la-code"></i> @lang('Language Keywords')</button>
        </div>

        <div class="company-detail-body-inner p-0">
            <div class="p-3">
                <div class="alert alert--base">
                    <div class="alert__icon">
                        <i class="las la-info"></i>
                    </div>
                    <div class="alert__content">
                        @lang('While you are adding a new keyword, it will only add to this current language only. Please be careful on entering a keyword, please make sure there is no extra space. It needs to be exact and case-sensitive.')
                    </div>
                </div>
            </div>
            <div class="table-scroller">
                <table class="table">
                    <thead>
                        <tr>
                            <th>@lang('Name')</th>
                            <th>@lang('Code')</th>
                            <th>@lang('Default')</th>
                            <th>@lang('Actions')</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($languages as $language)
                            <tr>
                                <td>
                                    <div class="flag-wrapper">
                                        <div class="flag-wrapper-thumb">
                                            <img src="{{ getImage(getFilePath('language') . '/' . $language->image, getFileSize('language')) }}" alt="{{ $language->name }}" class="plugin_bg">
                                            <span class="name">{{ __($language->name) }}</span>
                                        </div>
                                    </div>
                                </td>
                                <td><strong>{{ __($language->code) }}</strong></td>
                                <td>
                                    @if ($language->is_default == Status::YES)
                                        <span class="badge badge--success">@lang('Default')</span>
                                    @else
                                        <span class="badge badge--warning">@lang('Selectable')</span>
                                    @endif
                                </td>

                                <td>
                                    <div class="flex-end gap-4">
                                        <a class="text--body" href="{{ route('admin.language.key', $language->id) }}" data-bs-toggle="tooltip" title="@lang('Translate')">
                                            <i class="la la-language fs-20"></i>
                                        </a>
                                        <button class="editBtn" data-url="{{ route('admin.language.manage.update', $language->id) }}" data-lang="{{ json_encode($language->only('name', 'text_align', 'is_default', 'image')) }}" data-image="{{ getImage(getFilePath('language') . '/' . $language->image, getFileSize('language')) }}" data-bs-toggle="tooltip" title="@lang('Edit')">
                                            @include('admin.partials.svg.edit')
                                        </button>
                                        @if ($language->id != 1)
                                            <button class="confirmationBtn" data-question="@lang('Are you sure to remove this language from this system?')" data-action="{{ route('admin.language.manage.delete', $language->id) }}" data-bs-toggle="tooltip" title="@lang('Delete')">
                                                @include('admin.partials.svg.delete')
                                            </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table><!-- table end -->
            </div>
        </div>
    </div>

    {{-- NEW MODAL --}}
    <div class="modal custom--modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="createModalLabel"> @lang('Add New Language')</h4>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><i class="las la-times"></i></button>
                </div>
                <form class="form-horizontal" method="post" action="{{ route('admin.language.manage.store') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="form-group col-12">
                                <div class="image-uploader imageUploader">
                                    <label class="image-uploader-preview">
                                        <img class="imagePreview" src="{{ getImage(null, getFileSize('language')) }}" alt="Preview" />
                                        <span class="icon">
                                            <i class="fa-solid fa-plus"></i>
                                        </span>
                                        <input type="file" name="image" class="d-none imageInput" accept=".jpg, .jpeg, .png" />
                                    </label>
                                    <div class="image-uploader-content">
                                        <p class="title">@lang('Flag Image')</p>
                                        <p class="note">
                                            @lang('Supported formats'): @lang('PNG'), @lang('JPG'), @lang('JPEG')
                                        </p>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="form--label style-two">@lang('Language Name')</label>
                            <div class="col-sm-12">
                                <input type="text" class="form--control md-style" value="{{ old('name') }}" name="name" required>
                            </div>
                        </div>

                        <div class="row form-group">
                            <label class="form--label style-two">@lang('Language Code')</label>
                            <div class="col-sm-12">
                                <input type="text" class="form--control md-style" value="{{ old('code') }}" name="code" required>
                            </div>
                        </div>

                        <div class="row form-group">
                            <div class="col-md-12">
                                <label class="form--label style-two" for="inputName">@lang('Default Language')</label>
                                <select name="is_default" class="form--control md-style select2-basic" data-minimum-results-for-search="-1">
                                    <option value="1">@lang('Yes')</option>
                                    <option value="0" selected>@lang('No')</option>
                                </select>
                            </div>

                        </div>

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

    {{-- EDIT MODAL --}}
    <div class="modal custom--modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="editModalLabel">@lang('Edit Language')</h4>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><i class="las la-times"></i></button>
                </div>
                <form method="post" class="disableSubmission" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <div class="image-uploader imageUploader">
                                <label class="image-uploader-preview">
                                    <img class="imagePreview" src="{{ getImage(null, getFileSize('language')) }}" alt="Preview" />
                                    <span class="icon">
                                        <i class="fa-solid fa-plus"></i>
                                    </span>
                                    <input type="file" name="image" class="d-none imageInput" accept=".jpg, .jpeg, .png" />
                                </label>
                                <div class="image-uploader-content">
                                    <p class="title">@lang('Flag Image')</p>
                                    <p class="note">
                                        @lang('Supported formats'): @lang('PNG'), @lang('JPG'), @lang('JPEG')
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form--label style-two">@lang('Language Name')</label>
                            <div class="col-sm-12">
                                <input type="text" class="form--control md-style" value="{{ old('name') }}" name="name" required>
                            </div>
                        </div>

                        <div class="form-group mt-2">
                            <label class="form--label style-two" for="inputName">@lang('Default Language')</label>
                            <select name="is_default" class="form--control md-style select2-basic" data-minimum-results-for-search="-1">
                                <option value="1">@lang('Yes')</option>
                                <option value="0">@lang('No')</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn--base btn--md w-100" id="btn-save" value="add">@lang('Submit')</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <div class="modal custom--modal fade" id="getLangModal" tabindex="-1" role="dialog" aria-labelledby="getLangModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="getLangModalLabel">@lang('Language 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">
                    <p class="mb-3">@lang('All of the possible language keywords are available here. However, some keywords may be missing due to variations in the database. If you encounter any missing keywords, you can add them manually.')</p>
                    <p class="text--primary mb-3">@lang('You can import these keywords from the translate page of any language as well.')</p>
                    <div class="form-group">
                        <textarea class="form--control md-style langKeys key-added" id="langKeys" rows="25" readonly></textarea>
                        <button type="button" class="btn btn--base btn--md w-100 mt-3 copyBtn"><i class="las la-copy"></i> <span class="text-white copy-text">@lang('Copy')</span></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <x-confirmation-modal />
@endsection


@push('script')
    <script>
        (function($) {
            "use strict";
            $('.editBtn').on('click', function() {
                var modal = $('#editModal');
                var url = $(this).data('url');
                var lang = $(this).data('lang');

                modal.find('form').attr('action', url);
                modal.find('input[name=name]').val(lang.name);
                modal.find('select[name=text_align]').val(lang.text_align);
                modal.find('.imagePreview').attr('src', `${$(this).data('image')}`);
                modal.find('[name=is_default]').val(lang.is_default).trigger('change');
                modal.modal('show');
            });

            $('.keyBtn').on('click', function(e) {
                e.preventDefault();
                $.get("{{ route('admin.language.get.key') }}", {}, function(data) {
                    $('.langKeys').text(data);
                });
            });

            $('.copyBtn').on('click', function() {
                var copyText = document.getElementById("langKeys");
                copyText.select();
                document.execCommand("copy");
                $('.copy-text').text('Copied');
                setTimeout(() => {
                    $('.copy-text').text('Copy');
                }, 2000);
            });

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

@push('style')
    <style>
        textarea.langKeys {
            height: 400px;
        }

        .flag-wrapper-thumb {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .flag-wrapper-thumb img {
            height: 40px;
            width: 40px;
            border-radius: 50%;
            overflow: hidden;
        }

        .table-scroller {
            height: auto;
        }

        .table-scroller .table {
            min-width: 500px;
        }
    </style>
@endpush
