@include('front.layouts.head')
<!-- TOP TITLE -->
<section class="topSingleBkg topPageBkg topSingleBkgImg">
    <div class="item-img" style="background-image: url('{{ asset($banner ? 'storage/' . $banner : 'front/images/about-banner.jpg') }}');"></div>
    <div class="inner-desc">
        <h1 class="post-title single-post-title">Film</h1>
        <span class="post-subtitle">{{ $mainTitle }}</span>
    </div>
</section>
<!-- /TOP TITLE -->
<!-- CONTENT SECTION -->
<section id="wrap-content" class="page-content">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="portfolio-masonry-container">
                    {!! $mainText !!}
                    <div class="portfolio-masonry portfolio-layout-masonry margin-t24">
                        @foreach ($films as $film)
                        <div class="item-portfolio item-3cols wedding">
                            <a class="cursor-eye" data-fancybox="gallery" data-src="{{ $film->youtube_link }}" data-type="iframe">
                                <div class="post-image item-grid-image">
                                    <!-- Görsel -->
                                    <img loading="lazy" src="{{ asset('storage/' . $film->cover) }}" class="img-fluid" alt="{{ $film->name }}">
                                    <!-- Overlay ve Play İkonu -->
                                    <div class="gradient-overlay">
                                        <i class="play-icon fa fa-play-circle"></i>
                                    </div>
                                </div>
                                <div class="item-text-holder">
                                    <h2 class="article-title display-6">{{ $film->name }}</h2>
                                </div>
                            </a>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        <!--row-->
    </div>
    <!--container-->
</section>
<!-- /CONTENT SECTION -->
@push('style')
<style>

</style>
@endpush
@push('script')
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script>
    $(document).ready(function () {
        var $grid = $('.portfolio-masonry');

        $grid.imagesLoaded(function () {
            var $portfolioItems = $('.portfolio-layout-masonry');

            $portfolioItems.isotope({
                itemSelector: '.item-portfolio',
                layoutMode: 'masonry',
            });
        });
    });
</script>
<script>
    Fancybox.bind("[data-fancybox]", {
        Toolbar: false,
        smallBtn: true,
        iframe: {
            preload: false // Performans için ön yüklemeyi kapatabilirsiniz
        }
    });
</script>
@endpush

@include('front.layouts.footer')