@php
    use Modules\Project\Entities\Project;
    $posts = App\Post::all();
    $projects = $posts->where('post_type', 'Modules\Project\Entities\Project')->where('published', 1);
    $project->location = Project::find($project->post_id)->location;
@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">

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

       {{-- Before and After Image Comparisons --}}
        <div class="container before-and-after-gallery container-case-study-gallery pt-md-5 position-absolute">

            <div class="container before-and-after-carousel" data-cols="1">
                <style>
                    .slick-cloned {
                        display: none !important;
                    }
                </style>

                @foreach($project->gallery->images->chunk(2) as $chunk)

                  <div class="slide-wrapper before-and-after-slide">

                    @php
                      if ($loop->iteration < 3) {
                        $project_name = 'Steep Site Sanctuary';
                      } elseif($loop->iteration >= 3) {
                        $project_name = 'Coastal Split View';
                      } elseif($loop->iteration >= 4 && $loop->iteration <= 8) {
                        $project_name = 'Valley View';
                      } else {
                        $project_name = 'Before And After';
                      }
					  $project_name = 'Before And After';
                    @endphp

                    <!-- Project Title -->
                    <div class="row">
                      <div class="col-12">
                        <div class="modal-title-wrapper">
                        <h2 class="modal-title pb-4">{{ $project_name }}</h2>
                        <div class="modal-divider"></div>
                        <div class="py-4">
                          <p id="closemodal" class="modal-button text-uppercase d-inline mx-2">Back to Gallery</p>
                        </div>
                        </div>
                      </div>
                    </div>

                    <!-- Project Image -->
                    <div class="row justify-content-center project-gallery-wrapper my-md-4">

                        @foreach($chunk as $image)
                            <div class="col-9 col-md-6 light-image-col px-md-3">
                                <a href="{{ $image->url }}" data-src="{{ $image->url }}" class="light-link embed-responsive embed-responsive-1by1">
                                <img src="{{ $image->url }}" alt="{{ $image->alt ?: $project->title . ($loop->iteration == 1 ? ' before' : ' after') . ' landscaping by Costata, pair ' . ($loop->parent->iteration) }}" title="" class="lightgallery-image img-fluid embed-responsive-item">
                                </a>
                                <h2 class="modal-title py-3 pt-md-2 pb-md-4">{{ $loop->iteration % 2 != 0 ? 'Before' : 'After' }}</h2>
                            </div>
                        @endforeach

                    </div>

                </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 -->