@extends('admin.layout.master')
@section('title', 'LANGUAGE SETTING')
@section('custom_style')
    <style>
        @media print {
            thead {
                display: table-header-group;
            }

            .table th {
                background: #fff;
                color: #000 !important;
            }
        }

        .hidden_row {
            display: none;
        }
    </style>
@endsection
@section('content')
    <div class="card sina-card">
        @include('admin.layout.title_header', ['title' => 'All Languages'])
        <div class="card-body" id="divTableDataHolder">
            <ul class="nav nav-tabs" style="padding: 2px 15px; position:sticky;top:45px;background:#000">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#general" data-bs-target="#general" data-bs-toggle="tab"
                        aria-selected="true">General</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#report" data-bs-target="#report"
                        data-bs-toggle="tab">Menus</a>
                </li>
            </ul>
            <div class="col-md-12 table-responsive-sm" style="padding-bottom: 15px;">
                <div class="tab-content pt-0">
                    <form action="{{ route('default.sync_languages') }}" method="get" class="form mb-2 mt-2">
                        <div class="row">
                            @php
                                $pers = $permissions;
                                if (session('sidebar_module_id') != 0) {
                                    $pers = $permissions->where('module_id', session('sidebar_module_id'));
                                }

                            @endphp
                            <input type="hidden" name="edit" id="edit" value="1">
                            <div class="col-3">
                                <label for="page_id">Routes</label>
                                <select name="page_id" id="page_id" class="form-control select_2">
                                    <option value="">Choose One</option>
                                    @foreach ($pers as $pr)
                                        <option value="{{ $pr->page_id }}"
                                            @if (request()->page_id != '' && $pr->page_id == request()->page_id) selected @endif>{{ $pr->name }}
                                            ({{ $pr->route_name }})</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-3">
                                <input type="hidden" name="is_filter" value="1" />
                                <label>Modules</label>
                                <select name="module_id" id="module_id" class="form-control select_2">
                                    <option value="">Choose One</option>
                                    @foreach ($modules as $module)
                                        <option value="{{ $module->id }}"
                                            @if (request()->module_id != '' && request()->module_id == $module->id) selected @endif>{{ $module->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-3">
                                <label for="key">Key</label>
                                <input type="text" name="key" id="key" class="form-control" placeholder="Key" value="{{ request()->key }}"/>
                            </div>
                            <div class="col-3">
                                <br>
                                <button type="submit" class="btn btn-info">Filter</button>
                            </div>
                            <div class="col-3"></div>
                        </div>
                    </form>

                    <div id="general" class="container tab-pane active p-0">
                        <div class="" id="">

                            <table class="table table-bordered table-hover p-0" id="">
                                <thead class="">
                                    @php
                                        $sl = 0;
                                        $langCounter = count($langs);
                                        $localeWiselangsArray = [];
                                        $tbody = '';
                                        $thead = '<tr style="position:sticky;top:70px;background:#000;color:#fff;">
                                                    <th>#</th>
                                                    <th>Key</th>';
                                        $form = '<tr>
                                                    <th>#</th>
                                                    <th><input type="text" placeholder="Key" id="k-0" value="" class="form-control"></th>';
                                        foreach ($langs as $l) {
                                            $sl++;
                                            $thead .= '<th>' . $l->title . '</th>';
                                            $form .=
                                                '<th><div class="d-flex"><input type="text" placeholder="' .
                                                $l->title .
                                                '" id="' .
                                                $l->locale .
                                                '-0" value="" class="form-control">';
                                            if ($sl == $langCounter) {
                                                $form .=
                                                    '<input type="button" value="AddNew" onclick="setNewKey()" class="form-control">';
                                            }

                                            $form .= '</div></th>';
                                        }
                                        $thead .= '<th class="text-center">Pages</th>';
                                        $form .= '<th class="text-center"><input type="checkbox" class="btn btn-warning" name="show_page" id="show_page" onchange="showOtherPages()" value="1">  <label for="show_page"> Show Pages </label>  </th>';
                                        $thead .= '<th class="text-center"><i class="fas fa-save" onclick="updateSyncStatus()"></i></th></tr>';
                                        $form .= '<th><label class="d-flex"><input type="checkbox" name="sync" class="all_sync" onclick="checkAllSync()" />&nbsp;Sync</label></th></tr>';
                                    @endphp
                                    {!! $form !!}
                                    {!! $thead !!}
                                </thead>
                                <tbody id="report_html">
                                    @php
                                        $i = 1;
                                    @endphp
                                    @forelse($defaultKeys as $defaultKey)
                                        <tr>
                                            <td>{{ $i++ }}</td>
                                            <td>{{ $defaultKey->default_key }}</td>
                                            @forelse ($langs as $l)
                                                @php
                                                    $val = $defaultKey->{$l->locale};
                                                @endphp
                                                <td>
                                                    @php
                                                        $status_sync =
                                                            $defaultKey->status_sync == 1
                                                                ? __('obs.active')
                                                                : __('obs.inactive');
                                                    @endphp
                                                    <div class="d-flex"><input type="text"
                                                            @if (!request()->edit) readonly @endif
                                                            id="{{ $l->locale }}-{{ $defaultKey->id }}"
                                                            value="{{ $val }}" class="form-control">
                                                        <button type="button"
                                                            onclick="updateLangArray({{ $defaultKey->id }})"
                                                            class="btn-xs btn-primary"><i class="fa fa-wrench"></i></button>
                                                        <a class="btn btn-sm btn-link"
                                                            href="{{ route('default.sync_language_status', ['id' => $defaultKey->id, 'status' => !$defaultKey->status_sync]) }}">
                                                            <i
                                                                class="{{ $defaultKey->status_sync ? 'text-success' : 'text-danger' }} fas fa-thumbs-down"></i>
                                                        </a>
                                                    </div>
                                                </td>
                                            @empty
                                            @endforelse
                                            <td class="pages_td" style="display:none">
                                                @php
                                                    $arr = array_filter(explode(',', $defaultKey->page_ids));
                                                    $modules = adminAsignedModuleList()->pluck('name', 'id')->toArray();
                                                    $arr = $permissions
                                                        ->whereIn('page_id', $arr)
                                                        ->map(function ($q) use ($modules) {
                                                            return '<a target="_blank" href="/admin/sync_languages?edit=1&page_id=' .
                                                                $q->page_id .
                                                                '" class="badge badge-sm badge-primary">' .
                                                                $q->name .
                                                                '(' .
                                                                $q->route_name .
                                                                ' - ' .
                                                                (isset($modules[$q->module_id])
                                                                    ? $modules[$q->module_id]
                                                                    : '') .
                                                                ')</a>';
                                                        })
                                                        ->toArray();
                                                @endphp
                                                {!! implode(', ', $arr) !!}
                                            </td>
                                            <td class="temp_page"></td>
                                            <td>
                                                <input type="checkbox" name="sync" {{ $defaultKey->is_syncable == 1 ?'checked':'' }} class="sync" value="{{ $defaultKey->id }}" />
                                            </td>
                                        </tr>
                                    @empty
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div id="report" class="container tab-pane p-0">
                        <div class="" id="">
                            <table class="table table-bordered table-hover p-0" id="">
                                <thead class="">
                                    @php
                                        $sl = 0;
                                        $langCounter = count($langs);
                                        $tbody = '';
                                        $thead = '<tr style="position:sticky;top:70px;background:#000;color:#fff">
                                                    <th>#</th>
                                                    <th>Route</th>';
                                        // $form='<tr>
//             <th>#</th>
//             <th><input type="text" placeholder="Key" id="k-0" value="" class="form-control"></th>';
                                        foreach ($langs as $l) {
                                            $sl++;
                                            $thead .= '<th>' . $l->title . '</th>';
                                        }
                                        $thead .= '</tr>';
                                        // $form.='</tr>';
                                    @endphp
                                    {!! $thead !!}
                                </thead>
                                <tbody id="">
                                    @php
                                        $i = 1;
                                        $groupKeys = [];
                                        $localeWisePermissions = [];
                                    @endphp
                                    @forelse($permissionKeys as $permission)
                                        @php
                                            if (array_key_exists($permission->default_key, $permissions_array)) {
                                                unset($permissions_array[$permission->default_key]);
                                                $class = '';
                                            } else {
                                                array_push($groupKeys, $permission->default_key);
                                                $class = 'bg-info';
                                            }
                                        @endphp
                                        <tr class="text-dark {{ $class }}">
                                            <td>{{ $i++ }}</td>
                                            <td>{{ $permission->default_key }}</td>
                                            @forelse ($langs as $l)
                                                @php
                                                    $val = $permission->{$l->locale};
                                                @endphp
                                                <td>
                                                    <div class="d-flex"><input type="text"
                                                            @if (!request()->edit) readonly @endif
                                                            id="{{ $l->locale }}-{{ $permission->id }}"
                                                            value="{{ $val }}" class="form-control">
                                                        <button type="button"
                                                            onclick="updateLangArray({{ $permission->id }})"
                                                            class="btn-xs btn-primary"><i class="fa fa-wrench"></i></button>
                                                    </div>
                                                </td>
                                            @empty
                                            @endforelse
                                        </tr>
                                        {{-- onblur="updateLangArray('{{$l->locale}}','{{$defaultKey->id}}')" --}}
                                    @empty
                                    @endforelse
                                    @forelse($permissions_group as $val)
                                        @php
                                            $group_name = str_replace(' ', '_', strtolower($val));
                                        @endphp
                                        @if (!in_array($group_name, $groupKeys))
                                            <tr class="bg-warning">
                                                <td>{{ $i++ }}</td>
                                                <td>{{ $group_name }}
                                                    <input type="hidden" data-row-id="n{{ $i }}"
                                                        id="default_new_key-n{{ $i }}" class="new_keys"
                                                        value="{{ $group_name }}">
                                                </td>
                                                @forelse ($langs as $l)
                                                    <td>
                                                        <input type="text"
                                                            @if (!request()->edit) readonly @endif
                                                            id="{{ $l->locale }}-n{{ $i }}"
                                                            value="{{ $val }}" class="form-control">
                                                    </td>
                                                @empty
                                                @endforelse
                                            </tr>
                                        @endif
                                    @empty
                                    @endforelse

                                    @forelse($permissions_array as $key=>$val)
                                        <tr class="bg-danger">
                                            <td>{{ $i++ }}</td>
                                            <td>{{ $key }}
                                                <input type="hidden" id="default_new_key-{{ $i }}"
                                                    data-row-id="n{{ $i }}" class="new_keys"
                                                    value="{{ $key }}">
                                            </td>
                                            @forelse ($langs as $l)
                                                <td>
                                                    <input type="text" @if (!request()->edit) readonly @endif
                                                        id="{{ $l->locale }}-n{{ $i }}"
                                                        value="{{ $val }}" class="form-control">
                                                </td>
                                            @empty
                                            @endforelse
                                        </tr>
                                    @empty
                                    @endforelse

                                </tbody>
                                <tfoot>
                                    @if (request()->edit)
                                        <tr>
                                            <td colspan="{{ count($langs) + 1 }}"></td>
                                            <td><button class="btn-sina-submit"
                                                    style="position: fixed;bottom:5px;right:100px" type="submit"
                                                    onclick="syncPerLanguageFile()"><i class="fa fa-save"></i>
                                                    {{ __('obs.submit') }} </button></td>
                                        </tr>
                                    @endif
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('admin.global.loader')
@endsection
@section('script')
    <script>
        $('#select_2').select2();
        let langs = @json($langs);
        const updateLangArray = (id) => {
            // langArrays[locale][id]=$(`#${locale}-${id}`).val();
            setNewKey(id);
        }
        const setNewKey = (update = 0) => {
            Swal.fire({
                icon: 'warning',
                title: (update == 0 ? 'Add New Key' : 'Update !'),
                html: 'Are You Sure?',
                showConfirmButton: true,
                showDenyButton: true,
                position: 'center',
                timer: null,
            }).then((res) => {
                console.log(res);
                if (res.isConfirmed) {
                    let langArrays = {};
                    if (update == 0) {
                        langArrays['default_key'] = $('#k-0').val();
                        langArrays['type'] = 1;
                    } else {
                        langArrays['id'] = update;
                    }
                    for (let index = 0; index < langs.length; index++) {
                        if (!$('#' + langs[index].locale + '-0').val() && update == 0) {
                            Swal.fire('Invalid Data!', '', 'warning');
                            return;
                        } else {
                            langArrays[langs[index].locale] = $('#' + langs[index].locale + (update > 0 ? '-' +
                                update : '-0')).val();
                            if (update == 0) {
                                $('#' + langs[index].locale + '-0').val('');
                            }
                        }
                        if (index == (langs.length - 1)) {
                            storeNewKeyData(update, langArrays);
                        }
                    }
                }
            });
        }
        const storeNewKeyData = (update, langArrays) => {
            console.log('langArrays', langArrays);
            let keyLength = Object.keys(langArrays).length;
            if (keyLength > 0) {
                let link = "{{ route('default.sync_languages') }}";
                let int_data_param = {
                    update: 10,
                    lang_array: langArrays
                }
                const showResponse = (data) => {
                    Swal.fire('Update Successfull', '', 'success');
                    $('#loader').hide();
                    if (update == 0) {
                        $('#k-0').val('');
                        let str = `<tr>
                        <td>*</td><td>${langArrays.default_key}</td>`;
                        for (let index = 0; index < langs.length; index++) {
                            str +=
                                `<td><input type="text" id="${langs[index].locale}-${data.id}" onblur="updateLangArray(${data.id})" value="${langArrays[langs[index].locale]}" class="form-control"></td>`;
                        }
                        str += `</tr>`;
                        // location.reload();
                        $('#report_html').prepend(str);
                    }
                }
                ajaxCall(link, 'POST', int_data_param, showResponse);
            } else {
                Swal.fire('KEY VALUE MISMATCH', '', 'success');
            }
        }
        const storeNewKeyDataBulk = (langArrays) => {
            console.log('langArrays', langArrays);
            let keyLength = Object.keys(langArrays).length;
            if (keyLength > 0) {
                let link = "{{ route('default.sync_languages') }}";
                let int_data_param = {
                    update: 100,
                    lang_array: langArrays
                }
                const showResponse = (data) => {
                    Swal.fire('Action Successfull', '', 'success');
                    $('#loader').hide();
                    location.reload();
                }
                ajaxCall(link, 'POST', int_data_param, showResponse);
            } else {
                Swal.fire('KEY VALUE MISMATCH', '', 'success');
            }
        }
        const syncLanguageFile = () => {
            let keyLength = Object.keys(langArrays).length;
            if (keyLength > 0) {
                let link = "{{ route('default.sync_languages') }}";
                let int_data_param = {
                    update: 100,
                    lang_array: langArrays
                }
                const showResponse = () => {
                    Swal.fire('Update Successfull', '', 'success');
                    $('#loader').hide();
                    // searchPermission();
                    location.reload();
                }
                ajaxCall(link, 'POST', int_data_param, showResponse);
            } else {
                Swal.fire('KEY VALUE MISMATCH', '', 'success');
            }
        }
        const syncPerLanguageFile = () => {
            var new_default_keys = [];
            var mainObj = [];
            $('.new_keys').each(function() {
                var permissionsObz = {};
                permissionsObz['default_key'] = $(this).val();
                permissionsObz['type'] = 2;
                permissionsObz['created_by'] = 1;
                let row_id = $(this).attr('data-row-id');
                for (let index = 0; index < langs.length; index++) {
                    permissionsObz[langs[index].locale] = $('#' + langs[index].locale + '-' + row_id).val();
                }
                mainObj.push(permissionsObz);
            });
            if (mainObj.length) {
                storeNewKeyDataBulk(mainObj);
            }
        }

        const showOtherPages = (e) => {
            if($("#show_page").is(":checked")){
                $(".pages_td").show();
                $(".temp_page").hide();
                return;
            }
            $(".pages_td").hide();
            $(".temp_page").show();

            // $("#show_page").is(":checked") ? $(".pages_td").show();$(".temp_page").show() : $(".pages_td").hide();$(".temp_page").hide();
        }

        const checkAllSync = ()=>{
            if($('.all_sync').is(':checked')){
                $('.sync').prop('checked', true);
                return
            }
            $('.sync').prop('checked', false);
        }

        const updateSyncStatus = () =>{
            let selectedValues = [];
            let unselectedValues = [];

            $('.sync').each(function() {
                let val = Number($(this).val());
                if ($(this).is(':checked')) {
                    selectedValues.push(val);
                } else {
                    unselectedValues.push(val);
                }
            });

            // if (selectedValues.length == 0 && unselectedValues.length == 0) {
            //     Swal.fire('Please select at least one', '', 'warning');
            //     return;
            // }

            ajaxCall("{{ route('admin.sync_status.update') }}", 'POST', {'syncable_ids':selectedValues, 'unsyncable_ids':unselectedValues}, function(){
                $('#loader').hide();
                Swal.fire('Action Successfull', '', 'success');
            });

        }
    </script>
@stop