@php
    use Modules\Project\Entities\Project;
    $posts = App\Post::all();
    $projects = $posts
        ->where('post_type', 'Modules\Project\Entities\Project')
        ->where('published', 1);
@endphp

@foreach($projects->chunk(4) as $chunk)

    <div class="row projects-wrapper justify-content-center">

        @foreach($chunk as $project)

            @php
                $location = Project::find($project->post_id)->location;
            @endphp

            <div class="column col-md-3">
                <div class="project-overlay-wrapper position-relative">
                    <div class="project-overlay position-relative">
                        <div class="d-block project-column">
                            <div class="bg-white box-shadow">
                                <div class="overlay-image position-relative embed-responsive embed-responsive-1by1">
                                    @php
                                        $thumb = (preg_replace('/(.*)(\/)([^\/]+)$/', '$1/thumbs/' . $project->slug . '.jpeg', $project->featured_image));

                                        if(file_exists(public_path( $thumb ))){
                                            $thumb = $thumb;
                                        } else {
                                            $thumb = $project->featured_image;
                                        }
                                    @endphp
                                    <img src="{{ $thumb }}" alt="{{ $project->alt_text ?: $project->title . ' landscape design by Costata' }}" class="embed-responsive-item img-fluid">
                                </div>
                                <div class="h4 project-title overlay-text position-absolute text-center border-bottom" data-title="{{$project->title}}">
                                    {{$project->title}}
                                    <p class="text-white pt-2 mb-1">
                                        {{$location}}
                                    </p>
                                </div>
                                <div class="project-description overlay-text position-absolute text-center text-white w-100">
                                    {!!$project->description!!}

                                    <button class="btn-modal"
                                            data-toggle="modal"
                                            data-target="#fsModal-{{$project->id}}"
                                            data-whatever="@mdo">
                                    View More
                                    </button>
                                </div>
                                <p class="h4 project-name position-absolute text-center">
                                    {{$project->title}}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            @if($project->slug == 'before-and-after')
                @include('componentproject::layouts.before-and-after-modal')
            @else
                @include('componentproject::layouts.modal')
            @endif

        @endforeach

    </div>

@endforeach