@extends('site.layouts.' . $pageTemplate)

@if ($page)
    <x-site.meta-component :model="$page" />
@endif

@push('styles')
    <link rel="stylesheet" href="{{ asset('site/css/magnific-popup.css') }}">
@endpush

@section('contents')
    @if ($page)
        {!! $page->contents !!}
    @endif

    <section class="portfolio section-padding p-3">
        <div class="container">

            @forelse ($portfolios as $portfolio)
                <div class="row">
                    <div class="col-sm-12 col-md-12 py-3">
                        <h1 style="font-size:22px">{{ $portfolio->name }}</h1>
                    </div>
                </div>
                <div class="row">
                    @forelse ($portfolio->galleryImages as $image)
                        <div class="col-sm-12 col-md-4 text-center">
                            <a class="image-popup-vertical-fit mb-2"
                                href="{{ asset('uploads/gallery-files/' . $image->file . '') }}"
                                title="{{ $image->file }}">
                                <img src="{{ asset('uploads/gallery-files/' . $image->file . '') }}"
                                    alt="{{ pathinfo($image->file, PATHINFO_FILENAME) }}"
                                    title="{{ pathinfo($image->file, PATHINFO_FILENAME) }}" style="max-height: 300px;" />
                            </a>
                        </div>
                    @empty
                        <div class="row m-0">
                            <div class="col-sm-12 col-md-12">
                                <h5>No Portfolio Found</h5>
                            </div>
                        </div>
                    @endforelse
                </div>
            @empty
                <div class="row m-0">
                    <div class="col-sm-12 col-md-12">
                        <h5>No Portfolio Found</h5>
                    </div>
                </div>
            @endforelse

        </div>
    </section>
@endsection

@section('footerScripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.image-popup-vertical-fit').magnificPopup({
                type: 'image',
                mainClass: 'mfp-with-zoom',
                gallery: {
                    enabled: true
                },
                zoom: {
                    enabled: true,
                    duration: 300, // duration of the effect, in milliseconds
                    easing: 'ease-in-out', // CSS transition easing function
                    opener: function(openerElement) {
                        return openerElement.is('img') ? openerElement : openerElement.find('img');
                    }
                }
            });
        });
    </script>
@endsection