@extends('backend.layouts.app')

@section('title', 'Translate Videos')

@push('styles')

    
@endpush

@section('content')

<form method="POST" action="{{url('admin/translate/Video')}}"  id="form_validation"  novalidate="novalidate">
    @csrf
    <div class="row clearfix">




   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
   <div class="card">

               <div class="header">
                    <h2><strong style="color:black">Traduction Video</strong></h2>
                </div>


  <div class="body">


<style type="text/css">
  table td {
  position: relative;
}
  table th {
  text-align:center;
  background-color:#02396C;
  color:#fff;
}
table td input {
  position: absolute;
  display: block;
  top:0;
  left:0;
  margin: 0;
  height: 100%;
  width: 100%;
  border: none;
  padding: 10px;
  box-sizing: border-box;
}
table td textarea {
  position: absolute;
  display: block;
  top:0;
  left:0;
  margin: 0;
  height: 100%;
  width: 100%;
  border: none;
  padding: 10px;
  box-sizing: border-box;
}
</style>
<div class="row clearfix">



@forelse($videos as $key=>$video)


           <div class="col-sm-12" style="border:1px solid black">  
                 <p style="color:#fff;background-color:#02396C;font-size:17px;border:3px;text-align:center;padding: 4px 8px;">Video : {{$key+1}}</p><br>
                  <div class="col-sm-1" style="color:black">  
                   <center><img src="{{asset('flag.png')}}" style="width:60px;height:40px"></center>
                  </div>
                 <div class="col-sm-11">           
                    <div class="form-group form-float">
                        <div class="form-line">
                            <input type="text" name="title" id="tag_title{{$video->id}}" class="form-control" value="{{$video->title}}">
                            <label class="form-label"> <strong style="color:black"> Title </strong></label>
                            </div>
                    </div>
                 </div>
                    
                      <div class="col-sm-1"></div>
                    <div class="col-sm-11">      
                     <div class="form-group form-float">
                        <label class="form-label"> <strong style="color:black">Description</strong></label>
                        <div class="form-line">
                         <textarea name="description{{$video->id}}" class="form-control tinymce" value="">
                              {{$video->description}}
                              </textarea>
                            </div>
                    </div>
                     </div>
                   
                @forelse($languages as $lang)

                  <div class="col-sm-1" style="color:black">  
                   <center><img src="{{asset('storage/languages/'.$lang->logo)}}" style="width:40px;height:40px" title="{{$lang->code}}"></center>
                  </div>
                 <div class="col-sm-11">           
                    <div class="form-group form-float">
                        <div class="form-line">

                            <input type="text" name="title{{$video->id}}{{$lang->code}}" id="tag_title{{$video->id}}{{$lang->id}}" class="form-control" 
                            value="{{getTranslation_Video($video->id,$lang->code)['title']}}" required="">
                            <label class="form-label"> <strong style="color:black"> Title </strong> <span style="color:red">*</span></label>
                            </div>
                    </div>
                 </div>
                    
                      <div class="col-sm-1"></div>
                    <div class="col-sm-11">     
                     <div class="form-group form-float">
                      <label class="form-label"> <strong style="color:black">Description</strong></label>
                        <div class="form-line">
                                <textarea name="description{{$video->id}}{{$lang->code}}" class="form-control tinymce">
                                 {{getTranslation_Video($video->id,$lang->code)['description']}}
                              </textarea>
                            </div>
                    </div>
                     </div>

                  
                    @empty
              <p><center style="color:red">Not existe any Langueges</center></p>
                   @endforelse

                </div>
                  @empty              
              <p><center style="color:red">Not existe any Videos</center></p>              
              @endforelse

</div>

          <button type="submit" class="btn btn-primary btn-block m-t-15 waves-effect"><i class="material-icons">save </i> Save</button>




           </div>
        </div>
      </div>
   
    </div>
</form>



@endsection




@push('scripts')
     <!-- validation -->
      <script src="{{ asset('backend/plugins/jquery-validation/jquery.validate.js')}}"></script>
        <!-- Custom Js -->
       <script src="{{ asset('backend/js/pages/forms/form-validation.js')}}"></script>



      <script>

        $(function () {
            tinymce.init({
                selector: "textarea.tinymce",
                theme: "modern",
                height: 300,
                plugins: [
                    'advlist autolink lists link image charmap print preview hr anchor pagebreak',
                    'searchreplace wordcount visualblocks visualchars code fullscreen',
                    'insertdatetime media nonbreaking save table contextmenu directionality',
                    'emoticons template paste textcolor colorpicker textpattern imagetools'
                ],
                toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
                toolbar2: 'print preview media | forecolor backcolor emoticons',
                image_advtab: true
            });
            tinymce.suffix = ".min";
            tinyMCE.baseURL = '{{asset('backend/plugins/tinymce')}}';
        });
    </script>


@endpush