@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">
            <div class="col-md-12 table-responsive-sm" style="padding-bottom: 15px;">
                <div class="pro_trans_table">
                    <div id="_branch" class="container tab-pane active p-0">
                        <div class="" id="">
                            <table class="table table-bordered table-hover p-0" id="datatable_apply">
                                <thead class="">
                                    <tr>
                                        <th>#</th>
                                        <th><input type="text" placeholder="Key" id="k-0" value="" class="form-control"></th>
                                        <th><input type="text" placeholder="English" id="en-0" value="" class="form-control"></th>
                                        <th><input type="text" placeholder="Bengali" id="bn-0" value="" class="form-control"></th>
                                        <th class="d-flex"><input type="Arabic" placeholder="Key" id="ar-0" value="" class="form-control">
                                            @if(request()->edit)
                                                <input type="button" value="AddNew" onclick="setNewKey()" class="form-control">
                                            @endif
                                        </th>
                                    </tr>
                                    <tr>
                                        <th>#</th>
                                        <th>Key</th>
                                        <th>English</th>
                                        <th>Bengali</th>
                                        <th>Arabic</th>
                                    </tr>
                                </thead>
                                <tbody id="report_html">
                                    @php
                                        $i=1;
                                    @endphp
                                    @forelse($langsEn as $key=>$englishValue)
                                        
                                            <tr>
                                                <td>{{$i++}}</td>
                                                <td>{{$key}}</td>
                                                @if(request()->edit)
                                                    <input type="hidden" name="" class="lan_key"  value="{{$key}}">
                                                    <td><input type="text" id="en-{{$key}}" onkeyup="updateLangArray(1,'{{$key}}')" value="{{$englishValue}}" class="form-control"></td>
                                                    <td><input type="text" id="bn-{{$key}}" onkeyup="updateLangArray(2,'{{$key}}')" value="{{array_key_exists($key,$langsBn)?$langsBn[$key]:$englishValue.' (Missing In File)'}}" class="form-control"></td>
                                                    <td><input type="text" id="ar-{{$key}}" onkeyup="updateLangArray(3,'{{$key}}')" value="{{array_key_exists($key,$langsAr)?$langsAr[$key]:$englishValue.' (Missing In File)'}}" class="form-control"></td>
                                                @else
                                                    <td>{{$englishValue}}</td>
                                                    <td>{{array_key_exists($key,$langsBn)?$langsBn[$key]:''}}</td>
                                                    <td>{{array_key_exists($key,$langsAr)?$langsAr[$key]:''}}</td>
                                                @endif
                                            </tr>
                                    @empty
                                    @endforelse
                                    @if(request()->edit)
                                    <tr>
                                        <td colspan="4"></td>
                                        <td><button class="btn-sina-submit" type="submit" onclick="syncLanguageFile()"><i class="fa fa-save"></i> {{__('obs.save')}} </button></td>
                                    </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> 
    @include('admin.global.loader')
@endsection
@section('script')
<script>
   let en=@json($langsEn);
   let bn=@json($langsBn);
   let ar=@json($langsAr);
    
    const updateLangArray=(t,k)=>{
        if(t==1){
            en[k]=$('#en-'+k).val();
        }
        if(t==2){
            bn[k]=$('#bn-'+k).val();
        }
        if(t==3){
            ar[k]=$('#ar-'+k).val();
        }
    }
    const setNewKey=()=>{
        let str='';
        let kv=$('#k-0').val().toLowerCase().replace(' ','_');
        let env=$('#en-0').val();
        let bnv=$('#bn-0').val();
        let arv=$('#ar-0').val();
        if(kv && env && bnv && arv){
            en[kv]=env
            bn[kv]=bnv;
            ar[kv]=arv;
            Swal.fire('Added Successfully', '', 'success');
            str+=`<tr>
                    <td>*</td>
                    <td>${kv}</td>
                    <td>
                        <input type="hidden" name="" class="lan_key"  value="${kv}">
                            <input type="text" id="en-${kv}" onkeyup="updateLangArray(1,'${kv}')" value="${env}" class="form-control"></td>
                        <td><input type="text" id="bn-${kv}" onkeyup="updateLangArray(2,'${kv}')" value="${bnv}" class="form-control"></td>
                        <td><input type="text" id="ar-${kv}" onkeyup="updateLangArray(3,'${kv}')" value="${arv}" class="form-control"></td>
                    </tr>`;
            $('#k-0').val('');
            $('#en-0').val('');
            $('#bn-0').val('');
            $('#ar-0').val('');
    
            $(str).appendTo('#report_html')
        }else{
            Swal.fire('Invalid Data!', '', 'warning');
        }
    }
    const syncLanguageFile=()=> {
        let enKeyLength=Object.keys(en).length;
        let bnKeyLength=Object.keys(bn).length;
        let arKeyLength=Object.keys(ar).length;
        if (enKeyLength > 0 && (enKeyLength==bnKeyLength) && (enKeyLength==arKeyLength)) {
            let link="{{route('default.sync_languages')}}";
            let int_data_param={
                update:100,
                en:en,
                bn:bn,
                ar:ar,
            }
            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 searchPermission=()=>
    {
       $('.hidden_row').hide();//.slow();
    //    $('.table_type_btn'+type).addClass('table_type_active');
    //    $('.table_type_btn'+(type==1?0:1)).removeClass('table_type_active');
        let link="{{route('permission.index')}}";
        let c=null;
        let int_data_param={
            module:$('#module').val(),
            sub_module:$('#sub_module').val(),
            group_name:$('#group_name').val(),
            type:Number($('#type').val()),
            task:Number($('#task').val()),
            search:1
        }
        const setReportHtml = data => {
            $('#report_html').html(data);
            $('#loader').hide();
        }
        ajaxCall(link,'GET',int_data_param, setReportHtml);
}
const getInputForEdit=(type,td_id,text)=>{
    let srt=['','str_','str_l_','str_cl_','str_sl_'];
    let cls_key=['','name','local_name','icon_cls','sorting_index'];
    let td_ids=td_id.split(srt[type]);
    var html=`<input class="form-control-sm text-center" type="text" onblur="updatePermissionData('`+cls_key[type]+`',`+td_ids[1]+`,this.value,'`+text+`')" value="`+text+`">`;
    $('#'+td_id).html(html);
}
const updatePermissionData=(cls_key,permission_id,newdata,oldData)=>{
    if(newdata!=oldData){
        Swal.fire({
            icon: 'warning',
            title: 'Confirmation',
            html: 'Are You Sure?',
            showConfirmButton: true,
            showDenyButton: true,
            position: 'center',
            timer: null,
        }).then((res) => {
            if(res.isConfirmed){
                $.ajax({
                type: "POST",
                url: "{{route('permission.store')}}",
                data: {
                    _token:"{{csrf_token()}}",
                    search_group_name:oldData,
                    set_group_name:newdata,
                    permission_id:permission_id,
                    key:cls_key,
                    type:100
                },
                success: function (data) {
                    Swal.fire('Update Successfull', '', 'success');
                    $('#loader').hide();
                    searchPermission();
                },
                error: function (response) {
                },
            });
            }
        });
    }else{
        Swal.fire('There is No update', '', 'warning');
    }
}
</script>
@stop