@php
    use app\Post;
    use Modules\Project\Entities\Project;
    use Modules\CaseStudy\Entities\CaseStudy;
    $posts = App\Post::all();
    $projects = $posts->where('post_type', 'Modules\Project\Entities\Project');
    $project->location = Project::find($project->post_id)->location ?? null;
    $post = Post::where('slug', $project->slug . '-case-study')->first();
    $slug = request()->segment(count(request()->segments()));

    if ($slug == 'gallery') {
        $back_button_text = 'Back To Gallery';
    } else {
        $current_page = $posts->where('slug', $slug)->first() ?? null;
        $back_button_text = 'Back To ' . $current_page->title;
    }

    // Awards Project Gallery
    if(isset($sub->project_url)) {
        $post = Post::where('slug', $sub->project_url)->where('post_type', 'Modules\Project\Entities\Project')->first();
        $project = $post ?? null;
    }

    // Case study for this project, looked up once $project is final. Null when there is none.
    $modal_case_study = Post::where('slug', $project->slug . '-case-study')
        ->where('post_type', 'Modules\CaseStudy\Entities\CaseStudy')
        ->where('published', 1)
        ->first();
@endphp

<!-- modal -->
<div id="fsModal-{{ $project->id }}"
    class="fsModal modal animated bounceIn"
    tabindex="-1"
    role="dialog"
    aria-labelledby="myModalLabel"
    aria-hidden="true">

     <!-- dialog -->
 <div class="modal-dialog">

   <!-- content -->
   <div class="modal-content project-modal-gallery">

     <!-- body -->
     <div class="modal-body">

       <!-- image carousel -->
       <div class="container pt-3 pt-md-0">
           <div class="row">
               <div class="col-12">
                   <a href="{{ $project->featured_image }}" data-src="{{ $project->featured_image }}" class="light-link carousel embed-responsive embed-responsive-16by9">
                       <img src="{{ $project->featured_image }}" loading="lazy" alt="{{ $project->alt_text ?: $project->title . ' landscape design by Costata' . ($project->location ? ', ' . $project->location : '') }}" title="" class="lightgallery-image img-fluid embed-responsive-item">
                   </a>
               </div>
           </div>
       </div>
       <!-- image carousel -->

       <!-- navigation -->
       <div class="modal-container position-absolute">
          <div class="modal-title-wrapper">
           <h2 class="modal-title pb-4 pb-md-2">{{ $project->title }} {{ $project->location ? ' | ' . $project->location : null }}</h2>
           <div class="modal-divider"></div>
           <div class="py-4 my-2 py-md-3 my-md-0">
             <p id="closemodal" class="modal-button text-uppercase d-inline mx-2">{{$back_button_text}}</p>
             @if($modal_case_study)
              <a class="modal-button text-uppercase mx-2" href="/{{ $modal_case_study->slug }}">View Case Study</a>
             @endif
           </div>
        <h2 class="modal-title pb-4">{{ $project->slug == 'swimming-pools' || $project->slug == 'firepits' ? 'Other images' : 'Other images from the same project'}}</h2>
         </div>
       </div>
       <!-- navigation -->

       {{-- Other Images From The Same Project --}}
        <div class="container modal-gallery container-case-study-gallery pt-md-5 position-absolute">
            <div class="container">
                @foreach($project->gallery->images->chunk(4) as $chunk)
                    <div class="row justify-content-center project-gallery-wrapper my-md-4 py-md-2">
                        @foreach($chunk as $image)

                            @php
                                $thumb = (preg_replace('/(.*)(\/)([^\/]+)$/', '$1/thumbs/' . basename($image->url), $image->url));

                                if(file_exists(public_path( $thumb ))){
                                    $thumb = $thumb;
                                } else {
                                    $thumb = $image->url;
                                }
                            @endphp

                            <div class="col-12 col-md-3 light-image-col light-image-border px-0 my-3 my-md-0">
                                <a href="{{ $image->url }}" data-src="{{ $image->url }}" class="light-link embed-responsive embed-responsive-1by1">
                                    <img src="{{ $thumb }}" loading="lazy" alt="{{ $image->alt ?: $project->title . ' landscape design, image ' . ($loop->parent->index * 4 + $loop->iteration) }}" title="" class="lightgallery-image img-fluid embed-responsive-item">
                                </a>
                            </div>
                        @endforeach
                    </div>
                @endforeach
            </div>
        </div>

     </div>
     <!-- body -->

     <!-- footer -->
     <div class="modal-footer">
       <button class="btn btn-secondary"
               data-dismiss="modal">
         close
       </button>
     </div>
     <!-- footer -->

   </div>
   <!-- content -->

 </div>
 <!-- dialog -->

</div>
<!-- modal -->