@extends('frontend.component.layout')

@section('head')

@stop

@section('extended_css')
<style type="text/css">
    :root {
        --theme: #023375 !important;
    }
    @media (max-width: 767px) {
        .container-fluid{
            padding: 0 5px !important;
        }
    }

    @media (min-width: 767px) {
        .img-desktop{
            width: auto !important;
            height: 640px !important;
        }

        .about-image{
            width: auto !important;
            height: 640px !important;
            margin-left: -10% !important;
        }

        .about-wrapper-3 .about-image img {
            width: auto !important;
            height: 640px !important;
        }
    }
    
    .about-wrapper-3 .about-image img {
        border-radius: 0px 26px 26px 0px;
    }

    /*.section-padding {
        padding: 30px 0 !important;
    }*/
    .section-padding {
        padding-top: 30px !important;
    }

    .offcanvas__wrapper {
        background-color: #023375 !important;
    }

    .back-to-top, .feature-provide-box-items:hover {
        background-color: #023375 !important;
    }

    .preloader p, .preloader .animation-preloader .txt-loading .letters-loading {
        color: #023375 !important;
    }

    .preloader .animation-preloader .spinner {

    }

    /*.breadcumb-container-wrapper {
        padding: 170px 0 170px !important;
    }*/

    p, ol li{
        color: #000 !important;
    }
</style>
@stop

@section('content')
<div class="breadcumb-section fix">
    <div class="breadcumb-container-wrapper background-image" style="background-image: url('{{ url('img/bg2.jpg') }}');">
        <div class="container">
            <div class="breadcumb-wrapper">
                <div class="page-heading">
                    <h1>Galeri</h1>
                    <div class="links">
                        <a href="{{ url('/') }}">Home<span class="slash">/</span></a>Video
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> 

<section class="project-details-section section-padding fix">
    <div class="project-details-container-wrapper">
        <div class="container">
            <div class="project-details-wapper">
                <div class="row g-4">
                    <div class="col-12 col-lg-8">
                        <div class="row clearfix">
                            @foreach ($video as $v)
                            <div class="col-lg-6 col-md-6 col-sm-12 col-12 my-2">
                                <div class="inner-box">
                                    <div class="card">
                                      <div class="card-body p-0">
                                        <iframe width="100%" height="200px" src="{{str_replace('watch?v=','embed/',$v->embed_youtube)}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                        <h4 class="mb-1 p-3"><a href="{{$v->embed_youtube }}" target="_blank" style="text-decoration: none; color: #000;" download>{{$v->judul_video}}</a></h4>
                                      </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <div class="row clearfix">
                            {{ $video->onEachSide(0)->links() }}
                        </div>
                        <div class="row modal-dialog"></div>
                    </div>
                    
                    @include('frontend.component.sidebar')
                </div>
            </div>
        </div>
    </div>
</section>
@stop

@section('extended_js')
    <script type="text/javascript">
      var onLoad = (function() {
          // $('.main-header').addClass('style-three fixed-header');
      })();
    </script>
@stop