@extends('layouts.front-layout')

@section('content')
    <div class="preLoader black">
        <img src="{{ isset($setting) && $setting->getFirstMediaUrl('logo') ? $setting->getFirstMediaUrl('logo') : asset('upload/placeholder.png') }}"
            alt="img">
    </div>
    <div class="preLoader white"></div>


    <section class="innerBaner">
        <img src="{{ isset($portfolio_single) && $portfolio_single->getFirstMediaUrl('portfolio_top_banner_image') ? $portfolio_single->getFirstMediaUrl('portfolio_top_banner_image') : asset('upload/placeholder.png') }}
            "
            class="w-100" alt="img">
        <div class="container">
            <div class="content">
                <h2>Portfolio</h2>
                <!-- <ul>
                            <li><a href="{{ route('home') }}">Home</a></li>
                            <li><i class="far fa-long-arrow-alt-right"></i></li>
                            <li><span>{{ $pageData['Portfolio']['top_title'] ?? '' }}</span></li>
                        </ul> -->
            </div>
        </div>
    </section>

    <section class="portfolio">
        <div class="container">
            <div class="text-center">
                <!-- <h2 class="sub-heading">{{ $pageData['Portfolio']['heading'] ?? '' }}</h2> -->
                <h3 class="heading">{{ $pageData['Portfolio']['sub_heading'] ?? '' }}</h3>
            </div>
            <div class="row">

                @forelse($get_portfolios as $portfolio)
                    {{-- @dd($portfolio->portfolioImages('portfolio_gallery')) --}}
                    <div class="col-md-4">
                        <div class="portfolio-card">
                            <figure class="w-100 h-100">
                                <img src="{{ isset($portfolio) && $portfolio->getFirstMediaUrl('portfolio_image') ? $portfolio->getFirstMediaUrl('portfolio_image') : asset('upload/placeholder.png') }}
                                "
                                    alt="image" class="img-fluid w-100 h-100">
                            </figure>
                            <div class="portfolio-card__content">
                                <a href="{{ isset($portfolio) && $portfolio->getFirstMediaUrl('portfolio_image') ? $portfolio->getFirstMediaUrl('portfolio_image') : asset('upload/placeholder.png') }}"
                                    data-fancybox="" class="title">Morning Star Carpentry</a>
                                <a data-portfolio-id="{{ $portfolio->id }}" data-toggle="modal" data-target="#portfolioModal"
                                    class="plusIcon"><i class="fas fa-plus"></i></a>
                            </div>
                        </div>
                    </div>
                @empty
                    <h3>Not Found Portfolio</h3>
                @endforelse



            </div>
           

        </div>
    </section>
    <div class="modal fade" id="portfolioModal" tabindex="-1" role="dialog" aria-labelledby="portfolioModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            {{-- <div class="modal-header">
                <h5 class="modal-title" id="portfolioModalLabel">Portfolio Galeries</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div> --}}
            <div class="modal-body">
                <!-- Swiper -->
                <div class="swiper-container portfolio-image-container">
                    <div class="swiper-wrapper" id="portfolioGallery">
                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                   
                </div>
                <p id="noImagesMessage" style="display: none;">Portfolio Galeries images not found</p>
            </div>
        </div>
    </div>
</div>
@endsection