@extends('layouts.app')
@section('style')
    <link href="{{url('css/custome-table.css')}}" rel="stylesheet" type="text/css">
    <style type="text/css">

.checkbox {
      width: 46px;
      height: 46px;
    }

/*.checkbox.checkbox-lg{
  width: 46px;
  height: 46px;
  padding-left: 4px;
  font-size: 36px;
  left: 1px;
  top: -31px;
}*/





    </style>

@stop
@section('content')
@include('inventories.cmodal')  

    <div class="row">

        <div class="portlet light bg-inverse" style="min-height: 100%;">
            <div class="portlet-title">
                <div class="caption">
                    <i class="icon-equalizer font-green-haze"></i>&nbsp;
                    <span class="caption-subject font-green-haze bold uppercase"> @lang('layout.EditTranslation') </span>
                    <!-- <span class="caption-helper">some info...</span> -->
                </div>
                <div class="tools">

                </div>
            </div>
            <div id="attendance" class="portlet-body form" style="margin-bottom:50%;" v-cloak>



  <div class="tabbable-line tabbable-custom-profile">
  <ul class="nav nav-tabs">  
    <li class="active">
      <a href="#both" data-toggle="tab" id="tab-on" style="color:red">
       <i class="fa  "></i><b> @lang('layout.TranslateWord') </b></a>
     </li> 
     <li class="">
      <a href="#ex-transport" data-toggle="tab" id="tab-trasnport" style="color: red">
       <i class="fa  "></i><b> @lang('layout.ReplaceTranslationFiles') </b></a>
     </li> 

     
 <!--     <li class="">
      <a href="#ex-vendor" data-toggle="tab" id="tab-vendor" style="color: red">
       <i class="fa  "></i><b> @lang('menu.Vendor') </b></a>
     </li> -->
    


   </ul>  
   <div class="tab-content padding" style="padding: 0px;">
    <div class="tab-pane active" id="both">
     <div class="row">
      <div class="col-md-12">
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
    <div class="portlet light bg-inverse">
      
        <div class="portlet-body">
            
                            <!-- BEGIN FORM--> 
                {!! Form::open(array('route' => 'languageTranslate.store','method'=>'POST','class'=>'form-horizontal','id'=>'language-form')) !!}
                {{ csrf_field() }}
                <div class="form-body">
                        <div class="row">
                        <div class="row col-md-12">
                            <div class="row">
                                 <div class="col-md-3">
                                    <label class="control-label ">@lang('layout.Language')</label>
                                     

                                                <select class="form-control" name="lang" id="lang">
                                                    <option value="">@lang('layout.SelectLanguage')</option>
                                                    <option value="en">English</option>
                                                    <option value="fa">فارسی</option>
                                                    <option value="pa">پښتو</option>
                                                    <option value="ru">Россия</option>
                                                    <option value="zh">Chinese</option>
                                                </select>
                                </div> 
                                <div class="col-md-3">
                                    <label class="control-label ">@lang('layout.File')</label>
                                     

                                                <select class="form-control" name="lang_file" id="lang_file">
                                                    <option value="">@lang('layout.SelectFile')</option>
                                                    <option value="layout">@lang('layout.Layout')</option>
                                                    <option value="type">@lang('layout.Types')</option>

                                                    @if(systemConfig()[10] != 0 )
                                                    <option value="menu">@lang('layout.Menu')</option>
                                                    <option value="backup">@lang('layout.Backup')</option>
                                                    <option value="message">@lang('layout.Message')</option>
                                                    <option value="permission">@lang('layout.Permission')</option>
                                                    <option value="help">@lang('menu.Help')</option>
                                                    <option value="button">@lang('layout.Buttons')</option>
                                                    <option value="invoice">@lang('menu.CustomizeForm')</option>
                                                    @endif

                                                </select>
                                </div>
                                <div class="col-md-1">
                                    <br>
                                    <button type="button" @click="searchType" class="btn green">
                                        <i class="fa fa-search"></i>@lang('layout.Search')
                                    </button>

                                </div> 
                                
                                <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">
                                    <div class="form-group">

                                        <div class="col-md-12">
                                            <textarea  rows="2"  class="form-control" disabled="disabled" style="color: red">@lang('message.TranslateDescription')</textarea>
                                        </div>
                                    </div>
                                </div>    
                       

                            </div>
                 


                        </div>


                    </div>
                    <br>
                    <!-- begin items -->
                    <div class="row" style="overflow-x: scroll;" v-if="show_table" >
                        <div class="col-md-6" style=" overflow-y: scroll; height:600px;">
                            <table id="table_content" class="table table-bordered table-advance table-hover">
                                <thead>
                                <tr>
                                    <th>@lang('layout.Phrase') </th>
                                    <th>@lang('layout.Translate') </th>
                                    <th> <i class="fa fa-check" style="font-size: 25px;color: green"></i> </th>
                            
                                </tr>
                                </thead>

                                <tbody>
                              
                               <input type="hidden" name="file_path"  v-model="file_path">
                               <input type="hidden" name="file_name"  v-model="file_name">
                               <input type="hidden" name="folder"  v-model="folder">

                                <tr v-for="(lang,index) in langs">
                                    
                                    <td>
                                        <input type="text" :name="'keys['+index+']'"  class="form-control" :value="index" readonly="readonly">
                                    </td> 
                                    <td>
                                        <input type="text" :name="'translate['+index+']'"  class="form-control" :value="lang">
                                    </td>
                                    <td>
                                        <input type="checkbox" :name="'selected_item['+index+']'"  class="form-control">
                                    </td>
                                  
                                </tr>
                                
                                </tbody>
                            </table>


                        </div>

                    </div>

                    <div class="col-md-4 col-md-offset-4 text-center">
                        <br>
                        <button type="button" class="btn green"  
                                onclick="regForm(this)">@lang('layout.Submit')</button>

                        <a href="{{route('attendanceSheet.index')}}" class="btn default"><i
                                    class="fa fa-mail-reply"></i> @lang('layout.Cancel')</a>
                    </div>
                </div>


                {!! Form::close() !!}

        </div>
    </div>
    <!-- END EXAMPLE TABLE PORTLET-->
      </div>
    </div>
  </div> 

  <div class="tab-pane" id="ex-transport">
   <div class="row">
    <div class="col-md-12">
      <!-- BEGIN EXAMPLE TABLE PORTLET-->
    <div class="portlet light bg-inverse">
  
        <div class="portlet-body">
           
                        {{Form::open(['route' => 'languageTranslate.editTranslation','method' => 'DELETE','class' => 'inline'])}}
                <div class="row">
                     <div class="row col-md-12">
                            <div class="row">
                               




                                 <div class="col-md-3">
                                    <label class="control-label ">@lang('layout.Language')</label>
                                     

                                                <select class="form-control" name="lang" id="lang">
                                                    <option value="">@lang('layout.SelectLanguage')</option>
                                                    <option value="en">English</option>
                                                    <option value="fa">فارسی</option>
                                                    <option value="pa">پښتو</option>
                                                    <option value="ru">Россия</option>
                                                    <option value="zh">Chinese</option>
                                                </select>
                                </div>      

                                <div class="col-md-3">
                                    <label class="control-label ">@lang('layout.File')</label>
                                     

                                                <select class="form-control" name="lang_file" id="lang_file">
                                                    <option value="">@lang('layout.SelectFile')</option>
                                                    <option value="layout">@lang('layout.Layout')</option>
                                                    <option value="type">@lang('layout.Types')</option>

                                                  @if(systemConfig()[10] != 0 )
                                                    <option value="menu">@lang('layout.Menu')</option>
                                                    <option value="backup">@lang('layout.Backup')</option>
                                                    <option value="message">@lang('layout.Message')</option>
                                                    <option value="permission">@lang('layout.Permission')</option>
                                                    <option value="help">@lang('menu.Help')</option>
                                                    <option value="button">@lang('layout.Buttons')</option>
                                                    <option value="invoice">@lang('menu.CustomizeForm')</option>
                                                    @endif
                                                </select>
                                </div>

                                


                                <div class="col-md-1">
                                    <br>
                                  <button type="submit" class="btn btn-success"> <i class="fa fa-pencil"></i> @lang('layout.Update') </button>
                                </div> 
                                
                                <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">
                                    <div class="form-group">

                                        <div class="col-md-12">
                                            <textarea  rows="2"  class="form-control" disabled="disabled" style="color: red">@lang('message.TranslateDescription')</textarea>
                                        </div>
                                    </div>
                                </div>  
                            </div>
                        </div>
                </div>
                    
                {{Form::close()}}
              

        </div>
    </div>
    <!-- END EXAMPLE TABLE PORTLET-->
    </div>
  </div>
</div>  


</div>
</div>



    

            </div>

            <!-- END FORM-->
        </div>






    </div>

@endsection
@push('scripts')

   <script type="text/javascript">
        Vue.component('v-select', VueSelect.VueSelect);

            var Modal = Vue.component('cmodal',
                {
                    template:'#cmodal-template',
                    props: ['show'],
                });



        var vm = new Vue({
            el: '#attendance',
            data: {
                
                selected_type:'',
                inventories :[],
                employess:[],
                selected_leave_type:'',
                leave:'',
                hideHead:false,
                showLeave:false,
                langs:[],
                file_path:null,
                file_name:null,
                folder:null,
                show_table:false

            },
            created(){
            },


            methods: {
 

       
            
             
        
                // search members
                searchType() {
                    var lang = document.getElementById('lang').value;
                    var lang_file = document.getElementById('lang_file').value;

                    console.log('dddpp',lang);
                    this.employess = [];
                    // this.typeInfo = null;
                    if (lang || lang_file ) {
                        axios.get("{{route('languageTranslate.callMethod')}}", {
                            params: {
                                method_name: 'searchInfile',
                                lang: lang,
                                lang_file: lang_file
                            }
                        })
                            .then(function (response) {
                                console.log('search');

                                if (response.data) {
                                    console.log('ddd',response.data);
                                    vm.show_table = true;

                                        vm.langs = response.data.data;
                                        vm.file_path = response.data.path;
                                        vm.file_name = response.data.file_name;
                                        vm.folder = response.data.folder;

                                        // console.log('alal',vm.data)

                                }
                           
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                    }

                },
                // end search type





                // generic function for adding item to list
                addNew(type = null, index) {
                    this.temp_items = [];
                    if (type != null) {
                        if (type == 'inventory') {
                            if (this.inventories[index + 1] == undefined) {
                                this.temp_items = [];
                                this.inventories.push({item: null});
                            }
                        }
                        if (type == 'payment') {
                            if (this.payments[index + 1] == undefined) {
                                this.checkExistingPayment(index, '');
                                this.payments.push({
                                    items: this.banks,
                                    item: null,
                                });
                            }
                        }
                    }

                },

                // delete item from list
                deleteItem(index) {
                    this.employess.splice(index, 1);
                },

            }
        });

    </script>
@endpush