@extends('frontend.layouts.master')

@section('videocss')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.0/css/lightgallery.min.css" rel="stylesheet">
    <style>
        .page-container {
            width: 100%; /* Sayfanın tam genişliğinde olmasını sağlar */
            margin: 0 auto; /* Sayfayı ortalar */
        }
    </style>

@endsection
@section('content')







    <section style=" background-image: url({{asset($pageresim->resim)}});" class="page-header">
        <div class="page-header-shape"></div>
        <div class="container">
            <div class="page-header-info">
                <h4>Resim Galeri</h4>


            </div>
        </div>
    </section>
    <!--/.page-header-->

    <section class="service-details bg-grey padding">
        <div class="container">
            <div id="lightgallery" class="row">
                @if(!empty($videogaleri))
                    @foreach($videogaleri as $videogaleris)
                        @if($videogaleris->id)
                            <div class="col-md-6 col-lg-4">
                                <a href="https://www.youtube.com/watch?v={{$videogaleris->link}}" data-lg-size="1280-720">
                                    <img style="width: 100%; height: auto;" src="{{ asset($videogaleris->resim) }}"
                                         alt="Video Thumbnail">
                                </a>
                            </div>
                        @endif
                    @endforeach
                @endif
            </div>

        </div>
    </section>
    <!--/.service-details-->



@endsection
@section('videojs')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.0/js/lightgallery-all.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#lightgallery').lightGallery({
                selector: 'a',
                youtubePlayerParams: {
                    modestbranding: 1,
                    showinfo: 0,
                    rel: 0,
                    autoplay: 1
                }
            });
        });
    </script>
@endsection