@extends('adminlayout.admin')

 @section('content')

 <style >
     .cursor{
        cursor: pointer;
     }
     .nk-content-fluid{
        margin-top: 65px;
        position: relative;
     }
     .video-card{
        border-radius: 4px;
        box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
     }
 </style>


<div class="content-wrapper">
 <section class="content-header" style="float:right;">
    @if(Auth::user()->hasRole('super_admin'))


                                      <a href="{{route('dashboard')}}" class="btn btn-outline-light bg-white d-none d-sm-inline-flex"><em class="icon ni ni-arrow-left"></em><span>Back</span></a>
                                            

  @endif
        
</section>

<section class="content">     
  
    <div class="row">
        <div class="col-xs-12">

         <div class="row">
        @foreach(getTrainingVideo(getUser()->roles[0]->slug) as $tv)
        

        <div class="col-md-4 col-sm-4 col-xs-12" >
        
            <div class="box box-info">
              <div class="box-header with-border">
                <h4 class="box-title" id="dynamic-content">
                  {{$tv->heading}}    </h4>
              </div>
              <div class="box-body"><!-- {{$tv->link}} -->
                <iframe  width="100%" height="340" src="{{$tv->link}}"  title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                
              </div>
            </div>

              </div>

        @endforeach
    </div>  

          </div>
          <!-- /.card-body -->
        </div>
        <!-- /.card -->
     
      <!-- /.col -->
  
    
</section>   

</div>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
    var element = document.getElementById('dynamic-content');
    var text = element.textContent || element.innerText;
    var word = 'word';
    var index = text.indexOf(word);

    if (index !== -1) {
        var newText = text.substring(0, index + word.length);
        element.innerHTML = newText;
    }
});

  </script>.  


@endsection