@section('style')
    @parent
    <style>
        .tooltip {
            pointer-events: none;
        }
    </style>
@endsection

@section('script')
    @parent
    <!-- DataTables -->
{{--    <script src="{{ asset('assets/bower/datatables.net/js/jquery.dataTables.min.js') }}" defer></script>--}}
{{--    <script src="{{ asset('assets/bower/datatables.net-bs/js/dataTables.bootstrap.min.js') }}" defer></script>--}}
{{--    <script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js" defer></script>--}}
{{--    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js" defer></script>--}}
    <script>
        var URL_TRANS_MANAGER_ACT = '{{ route('admin.settings.act.trans') }}';
        var URL_GET_LOCALE = '{!! route('admin.settings.get.locale') !!}';
        var URL_ADD_LOCALE = '{{ route('admin.settings.add.locale') }}';
        var URL_GET_TRANS_GROUP = '{!! route('admin.settings.get.trans_group') !!}';
        var TXT_LOADING = '{!! addslashes(__('label.loading')) !!}';
        $('[data-toggle="tooltip"]').tooltip()
    </script>
    <script src="{{ mix('js/admin/translation_setting.js') }}" defer></script>
@endsection

<div class="card card-outline card-info card-manager">
    <div class="card-header w-100">
        <h3 class="card-title">{{ __('admin_setting.labelTranslationManager') }}</h3>
    </div>
    <!-- /.card-header -->

    <div class="card-body text-center panel-trans-manager" id="panel-trans-manager">
        <button type="submit" class="btn btn-warning btn-sm btn-with-confirmation mr-1" data-type="append" data-toggle="tooltip"
                  title="Adds new translations fields added by dev, existing values modified by admin will not affected" >
                <i class='fas fa-file-import mr-2'></i>{{ __('admin_setting.btnAppendNewTranslations') }}

        </button>
        <button type="submit" class="btn btn-outline-danger btn-sm btn-with-confirmation mr-1" data-type="replace" data-toggle="tooltip"
                  title="Resets all the fields to the default value">
            <i class="fas fa-exclamation-triangle mr-2"></i>{{ __('admin_setting.btnReplaceExistingTranslations') }}
        </button>
        <button type="submit" class="btn btn-success btn-sm btn-with-confirmation mr-1" data-type="export" data-toggle="tooltip"
                  title="Updates all the edited translation fields">
            <i class='fas fa-file-export mr-2'></i>{{ __('admin_setting.btnPublishAllTranslations') }}
        </button>
{{--        <div class="border px-2 mt-3 bg-light text-sm text-left">--}}
{{--            <b>Append new translations</b> appends new translation added by dev, existing values modified by admin will not affected--}}
{{--            <br><b>Replace original translations</b> resets all the value updated by user to the default value defined by dev--}}
{{--            <br><b>Export all translations</b> exports all the translations imported or updated to production lang file--}}
{{--        </div>--}}
    </div>
    <!-- /.card-body -->
</div>

<div class="card card-outline card-info card-locale">
    <div class="card-header w-100">
        <h3 class="card-title">{{ __('admin_setting.titleListLocale') }}</h3>
        <div class="float-right">
            <button type="button" data-route="{{ route('admin.settings.add.locale') }}" class="btn btn-xs btn-primary btn-toggle-modal">
                <i class="fas fa-plus mr-1"></i>{{ __('admin_setting.btnAdd') }}
            </button>
        </div>
    </div>
    <!-- /.card-header -->

    <div class="card-body table-responsive p-0">
        <table id="locale_table" class="table table-bordered table-hover dataTable">
            <thead>
                <tr>
                    <th>No.</th>
                    <th>Locales</th>
                    <th></th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <!-- /.card-body -->

    @component('components.utility.template_popup', ['id' => 'modal_add_locale', 'custom_dialog_class' => 'modal-sm'])
        @slot('slot_header')
            <label>{{ __('admin_setting.titleAddLocale') }}</label>
        @endslot

        @slot('slot')
            <div class="form-group">
                <input type="text" class="form-control" name="locale" autocomplete="off" required>
            </div>
        @endslot

        @slot('slot_footer')
            <button type="button" class="btn btn-primary btn-xs btn-submit">{{ __('admin_setting.btnAdd') }}</button>
        @endslot
    @endcomponent
</div>

<div class="card card-outline card-info card-group">
    <div class="card-header w-100">
        <h3 class="card-title">{{ __('admin_setting.titleListGroup') }}</h3>
    </div>
    <!-- /.card-header -->

    <div class="card-body table-responsive p-0">
        <table id="group_table" class="table table-bordered table-hover dataTable">
            <thead>
                <tr>
                    <th>No.</th>
                    <th>Group</th>
                    <th></th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <!-- /.card-body -->

    @component('components.utility.template_popup', ['id' => 'modal_add_locale', 'custom_dialog_class' => 'modal-sm'])
        @slot('slot_header')
            <label>{{ __('admin_setting.titleAddLocale') }}</label>
        @endslot

        @slot('slot')
            <div class="form-group">
                <input type="text" class="form-control" name="locale" autocomplete="off" required>
            </div>
        @endslot

        @slot('slot_footer')
            <button type="button" class="btn btn-primary btn-xs btn-submit">{{ __('admin_setting.btnAdd') }}</button>
        @endslot
    @endcomponent
</div>

@component('components.utility.modal_confirmation')
@endcomponent

@component('components.utility.modal_confirmation_delete')
@endcomponent