@extends('layouts.backend.master')
@section('title', __('Language'))
@section('content')
<div class="row">
    <div class="col-12">
        <div id="languageForm">
            <div class="box">
                <div class="box-header with-border">
                    <h4 class="box-title form-title">{{ __('Add Language') }}</h4>
                    <a href="{{ route('super-user.languages.downloadBaseFile', ['en']) }}" class="btn btn-sm btn-primary">
                        {{ __('Download base file') }}
                    </a>
                </div>
                <div class="box-body">
                    <form id="route_form" name="route_form" method="POST" action="{{ route('super-user.languages.store') }}" class="form" enctype="multipart/form-data">
                        {{ csrf_field() }}
                        <input type="hidden" name="language_id" id="language_id" value="">
                        <div class="form-row ">
                            <div class="form-group col-md-6">
                                <label for="inputEmail4" class="ul-form__label">{{ __('Name') }}</label>
                                <input type="text" name="name" id="name" class="form-control  @error('name') invalid-input @enderror" placeholder="{{ __('Please Enter name') }}" autofocus>
                                <span class="name_error text-danger error"></span>
                                @error('name')
                                <div class="invalid-div">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group col-md-6">
                                <label for="inputEmail4" class="ul-form__label">{{ __('Short Name') }}</label>
                                <input type="text" name="short_name" id="short_name" class="form-control  @error('short_name') invalid-input @enderror" placeholder="{{ __('Please Enter short name') }}" minlength="2" maxlength="2">
                                <span class="short_name_error text-danger error"></span>
                                @error('short_name')
                                <div class="invalid-div">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group col-md-6">
                                <label for="inputEmail4" class="ul-form__label">{{ __('Translator Manager') }}</label>
                                <select class="form-control select2" name="translate_manager" id="translate_manager" data-placeholder="{{ __('Please select Translator Manager') }}">
                                    <option></option>
                                    @foreach ($translatorManagers as $user)
                                    <option value="{{ $user->id }}">{{ $user->name }}</option>
                                    @endforeach
                                </select>
                                <span class="translate_manager_error text-danger error"></span>
                                @error('user_id')
                                <div class="invalid-div">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group col-md-6">
                                <label for="inputEmail4" class="ul-form__label">{{ __('Translator') }}</label>
                                <select class="form-control select2" name="user_id" id="user_id" data-placeholder="{{ __('Please select Translator') }}">
                                    <option></option>
                                    @foreach ($users as $user)
                                    <option value="{{ $user->id }}">{{ $user->name }}</option>
                                    @endforeach
                                </select>
                                <span class="user_id_error text-danger error"></span>
                                @error('user_id')
                                <div class="invalid-div">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group col-md-6">
                                <label for="inputEmail4" class="ul-form__label">{{ __('Flag Image') }}</label>
                                <input type="file" name="flag_image" id="flag_image" class="form-control file-input  @error('flag_image') invalid-input @enderror" accept="image">
                                <span class="flag_image_error text-danger error"></span>
                                @error('flag_image')
                                <div class="invalid-div">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-2 d-none" id="languageImage">
                                <img id="languageImg" src="">
                            </div>
                            <div class="form-group col-md-6" id="languageFile">
                                <label for="inputEmail4" class="ul-form__label">{{ __('Language File') }}</label>
                                <input type="file" name="language_file" id="language_file" class="form-control file-input  @error('language_file') invalid-input @enderror" accept="application/JSON">
                                <span class="language_file_error text-danger error"></span>
                                @error('language_file')
                                <div class="invalid-div">{{ $message }}</div>
                                @enderror
                            </div>

                        </div>
                        <div class="row">
                            <div class="col-xs-6 col-sm-6 col-md-6">
                                <button type="submit" id="submitLanguageBtn" class="btn btn-primary btn-save-record">{{ __('Save') }}</button>
                                <button type="button" id="cancelBtn" onclick="clearForm()" class="btn btn-primary">{{ __('Cancel') }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="box-header with-border">
                <h4 class="box-title title">{{ __('Manage Language') }} </h4>
            </div>
            <div class="box-body">
                <div class="row mb-3">
                    <div class="col-12">

                    </div>
                </div>
                <div class="table-responsive su_tables">
                    <div id="custom_toolbar" class="float-right">
                        <div class="btn-group float-right" role="group" data-toggle="tooltip" data-placement="top" title="Export Data">
                            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fa fa-download"></i>
                            </button>
                            <ul id="indexExportTasks" class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                <li><a class="dropdown-item" href="#" onclick="exportTasks('su_languages',['id','Name','ShortName','TranslatorManager','Translator'],'csv')">{{ __('CSV') }}</a>
                                </li>
                                <li><a class="dropdown-item" href="#" onclick="exportTasks('su_languages',['id','Name','ShortName','TranslatorManager','Translator'],'zip')">ZIP</a>
                                </li>
                            </ul>
                        </div>
                        <a id="addLanguageBtn" data-toggle="tooltip" data-placement="top" title="{{ __('Add New') }}" href="javascript:void(0)" class="btn btn-secondary"><i class="fas fa-plus"></i></a>
                        <a onclick="showArchived('index')" id="backToBtn" data-toggle="tooltip" data-placement="top" title="{{ __('Back to Languages') }}" class="btn btn-secondary text-white d-none float-right mr-65" href="javascript:void(0)"><i class="fas fa-undo"></i></a>
                        <a onclick="showArchived('archive')" id="archivedBtn" data-toggle="tooltip" data-placement="top" title="{{ __('Show Archived') }}" class="btn btn-secondary text-white" href="javascript:void(0)"><i class="fas fa-archive"></i></a>
                    </div>

                    <table id="bstable" data-icons="icons" data-icons-prefix="fas" data-search-time-out="2000" class="table-striped" data-show-export="false" data-filter-control="true" data-show-search-clear-button="true" data-pagination="true" data-search="false" data-toolbar="#custom_toolbar" data-toggle="table" data-show-columns="true" data-show-columns-toggle-all="true" data-show-toggle="false" table-for="tbl_super_users" data-unique-id="id" data-export-options='{"fileName": "{{ config('app.name') . ' - Language - ' . date('d/m/Y-H:m:s') }}"}'>

                        <thead>
                            <tr>
                                <th title="#" data-field="id" data-switchable="false" data-width="50" data-width-unit="px">#</th>
                                <th title="{{ __('Name') }}" data-field="Name" data-filter-control="input" data-sortable="true">
                                    {{ __('Name') }}
                                </th>
                                <th title="{{ __('Short Name') }}" data-field="ShortName" data-filter-control="input" data-sortable="true">{{ __('Short Name') }}</th>
                                <th title="{{ __('Translator Manager') }}" data-field="TranslatorManager" data-filter-control="select" data-sortable="true">{{ __('Translator Manager') }}
                                </th>
                                <th title="{{ __('Translator') }}" data-field="Translator" data-filter-control="select" data-sortable="true">{{ __('Translator') }}</th>
                                <th data-field="action" data-width="160" data-width-unit="px">{{ __('Action') }}
                                </th>
                            </tr>
                        </thead>
                        <tbody>

                            @foreach ($languages as $item)
                            <tr data-id="{{ $item->id }}">
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $item->name }} </td>
                                <td>{{ $item->short_name }} </td>
                                <td>{{ $item->translatorManger->name ?? 'N\A' }} </td>
                                <td>{{ $item->translator->name ?? 'N\A' }} </td>
                                <td class="d-flex">
                                    @can('lang_edit')
                                    <a class="btn btn-sm btn-info mr-1" onclick="editLanguage('{{ basicEncrypt($item->id) }}')" href="javascript:void(0)" data-toggle="tooltip" data-placement="top" title="{{ __('Edit') }}">
                                        <i class="fa fa-edit"></i>
                                    </a>
                                    <a class="btn btn-sm btn-danger mr-1" href="{{ route('super-user.languages.downloadBaseFile', $item->short_name) }}" data-toggle="tooltip" data-placement="top" title="{{ __('Download') }}">
                                        <i class="fa fa-arrow-down"></i>
                                    </a>
                                    @endcan
                                    @if ($item->short_name != 'en')
                                    <button type="button" class="btn btn-sm btn-info" onclick="isArchived({{ $item->id }}, {{ $loop->iteration }},'{{ route('super-user.languages.archive') }}', '{{ $item->name }}')" data-toggle="tooltip" data-placement="top" title="{{ __('Archive') }}">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection
@push('scripts')
<script src="{{ asset('frontend/js/pages-js/language.js') }}"></script>
@endpush