@extends('frontend.layouts.app')

@section('title', 'Families Help')

@section('content')

<section class="breadcrumb-area" style="background-image: 
linear-gradient(to right bottom, rgba(113, 5, 36, 0.87), rgba(28, 114, 81, 0.78)), url({{asset('frontend/images/breadcrumb/cover02.jpg')}});">  <div class="container">
      <div class="row">
          <div class="col-xl-12">
              <div class="inner-content clearfix">
                  <div class="title">
                     <h1>Videos              </h1>
                  </div>
                  <div class="breadcrumb-menu">
                      <ul class="clearfix">
                          <li><a href="/">Accueil</a></li>
                          <li class="active">Videos</li>
                      </ul>    
                  </div>
              </div>
          </div>
      </div>
  </div>
</section>


<section class="about-style1-area">
  <div class="container">
      <div class="row align-items-center">

        @foreach($videos as $video)
          <div class="col-xl-6 col-lg-10">
              <div class="about-style1-left-content clearfix p-bottom-40">
                  <div class="img-box">
                      <img src="{{asset('storage/videos/'.$video->img)}}" alt="Awesome Image">
                      <div class="video-section-content">
                        <h3>{{$video->title}}</h3>
                        <button type="button" class="btn btn-primary video-btn" data-toggle="modal" data-src="{{$video->link}}" data-target="#myModal">
                          <i class="fa fa-play"></i>
                          </button>
                      </div>
                  </div>
              </div>     
          </div>
        @endforeach
{{-- 
          <div class="col-xl-6 col-lg-10">
            <div class="about-style1-left-content clearfix">
                <div class="img-box">
                    <img src="http://geoparc-mgoun.ma/images/vd1.png" alt="Awesome Image">
                    <div class="video-section-content">
                      <h3>Spot Unesco Global Geoparks Network</h3>
                      <button type="button" class="btn btn-primary video-btn" data-toggle="modal" data-src="https://player.vimeo.com/video/244738230?badge=0" data-target="#myModal">
                        <i class="fa fa-play"></i>
                        </button>
                    </div>
                </div>
            </div>     
        </div>
           --}}
      </div> 
  </div>    
</section>







<div class="container" style="display:none">


  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary video-btn" data-toggle="modal" data-src="https://www.youtube.com/embed/Jfrjeg26Cwk" data-target="#myModal">
  Play Video 1 - autoplay
  </button>
  
   <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary video-btn" data-toggle="modal" data-src="https://www.youtube.com/embed/IP7uGKgJL8U" data-target="#myModal">
  Play Video 2
  </button>
  
  
   <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary video-btn" data-toggle="modal" data-src="https://www.youtube.com/embed/A-twOC3W558" data-target="#myModal">
  Play Video 3
  </button>
  
  
     <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary video-btn" data-toggle="modal" data-src="https://player.vimeo.com/video/244738230?badge=0" data-target="#myModal">
  Play Vimeo Video
  </button>
  
  
  
  
  
  </div>
  
  
  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
    
        
        <div class="modal-body">
    
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>        
          <!-- 16:9 aspect ratio -->
    <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="" id="video"  allowscriptaccess="always" allow="autoplay"></iframe>
    </div>
          
          
        </div>
    
      </div>
    </div>
    </div> 

@endsection

@section('scripts')

@endsection