@extends('layout/main')
@section('title' , 'Videos | '. env('APP_NAME'))
@section('content')
<style>
    
.img {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.img:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  padding:0 55px ;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #ff0000;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  padding-top: 100px;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}
</style>

<div class="mb-30"></div>
<div class="container">
    <section class="card card-style-1 card-3 mb-32">
    <div class="flex flex-col items-right justify-right text-right mb-40">
            <h2 class="card-title inline-block">
                <a class="card-link inline-flex items-right transition-all hover:text-primary hover:translate-x-1"
                   ><span style="color:#02d959;" >{!! ___('Videos Galary') !!}</span></a>
            </h2>
        </div>
        <div class="card-body grid xs:grid-cols-2 md:grid-cols-4 gap-30">
            @foreach ($videos as $video )
            <div class="video" >
                <div class="rounded-2xl">
                    <div class="overflow-hidden relative rounded-t-2xl" style="cursor: pointer">
                       <div class="video-src" title="{{$video->src}}"> </div>
                        <div  style="position: absolute; top: 0;left:0; padding: 10px; margin:8px; background-color:#02d959; border-radius: 100px;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#ffffff"
                                class="bi bi-camera-video" viewBox="0 0 16 16">
                                <path fill-rule="evenodd"
                                    d="M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2V5zm11.5 5.175 3.5 1.556V4.269l-3.5 1.556v4.35zM2 4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H2z" />
                            </svg>
                        </div>
                        <img class="w-full h-full rounded-t-2xl object-cover transition-transform duration-500 group-hover:scale-110 lazyautosizes ls-is-cached lazyloaded " style="height:max(170px)"
                            src="{{$video->thumbnail}}" data-sizes="auto" data-src="{{$video->thumbnail}}" alt="{{ sessionLocale() == 'en' ? $video->title_en : $video->title_ar }}"
                            sizes="263px"> </a>
                    </div>
                    <div class="flex flex-col gap-10 border border-exgray rounded-b-2xl p-4 xs:p-6">
                        <p class="text-xs text-medium text-exgray5">{{$video->created_at->diffForHumans()}}</p>
                        <h3 class="text-xs font-bold text-exdark leading-5 line-clamp-2 hover:text-primary">
                            <a class="post-link text-current transition-colors" href="{{$video->src}}" target="_blank">{{ sessionLocale() == 'en' ? $video->title_en : $video->title_ar }}</a>
                        </h3>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        {{ $videos->links() }}
    </section>
</div>
</div>

<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <div class="modal-content" > <iframe class="videoPreview" width="1349" height="480" src="https://www.youtube.com/embed/3jC9aciQzV8"  frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div id="caption"></div>
</div>

@foreach($pageComponents as $component)
    @php $attrs=[]  @endphp
    @foreach($component->attr_values as $attr)
    @php $attrs[$attr->attribute->name]=$attr->value @endphp
    @endforeach
    <x-pageComponent path="{{$component->component->path}}" componentClass="{{$attrs['class'] ?? ' '}}" componentStyle="{{$attrs['style'] ?? ' '}}"   />
@endforeach


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function() {
    $('.video').on('click', function() {
        $('.videoPreview').attr('src', $(this).find('.video-src').attr('title'));
        $('#myModal').css("display", "block");
        $('#caption').html($(this).find('img').attr('alt'))
    });	
})

$('.close').on('click', function() {
    $('#myModal').css("display", "none");
});
</script>
@endsection