@include('front.layouts.head')
<!-- TOP TITLE -->
<section class="topSingleBkg topPageBkg topSingleBkgImg">
    <div class="item-img" style="background-image: url('{{ asset('storage/' . $portfolio->banner) }}');"></div>
    <div class="inner-desc">
        <h1 class="post-title single-post-title">{{ $portfolio->banner_title }}</h1>
        <span class="post-subtitle">{{ $portfolio->banner_subtitle }}</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 videos">
                    {!! $portfolio->description !!}
                    <div class="portfolio-masonry portfolio-layout-masonry margin-t24">
                        @foreach ($porfolio_galleries as $gallery)
                        <div class="item-portfolio item-3cols wedding">
                            <div class="post-image item-grid-image">
                                <a data-fancybox="gallery" href="{{ asset('storage/' . $gallery->image) }}">
                                    <img loading="lazy" src="{{ asset('storage/' . $gallery->image) }}" class="img-fluid" alt="{{ $portfolio->name }}">
                                </a>
                                <div class="gradient-overlay"></div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <!-- Responsive YouTube Embed -->
            @if (!empty($portfolio->youtube_link))
                <div class="responsive-video-container margin-t24">
                    <iframe
                        class="portfolio-video"
                        src="{{ $portfolio->youtube_embed_url }}"
                        frameborder="0"
                        allowfullscreen
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    ></iframe>
                </div>
            @endif

            <div class="seperator">
                <span class="seperator-text">PORTFÖYÜMÜZ</span>
            </div>
        </div>
        <!--row-->
    </div>
    <!--container-->
</section>
<!-- /CONTENT SECTION -->
@push('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>
    document.addEventListener('DOMContentLoaded', function () {
        Fancybox.bind("[data-fancybox='gallery']", {
            Toolbar: true,
            Thumbs: {
                autoStart: true, // Thumbnail'leri otomatik olarak gösterir
            },
            Image: {
                zoom: true, // Görsel zoom efekti
            },
        });
    });
</script>
@endpush

@include('front.layouts.footer')