
<?php 
  $album = $val->album;
 ?>

<style>
  .d-none {
    display: none;
  }
</style>

<?php if(!empty($val->album)): ?>
  <div class="album" data-slug="<?php echo e($album->slug); ?>">
    <div class="masonry-grid">
      <div class="row">
        <?php $__currentLoopData = $album->galleries()->orderBy("order")->get(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <div class="masonry-grid-item <?php echo e($loop->first ? 'col-lg-8 col-md-8 col-sm-12 col-xs-12' : 'col-lg-4 col-md-4 col-sm-6 col-xs-6'); ?> <?php echo e($loop->index > 1 ? 'height-low' : ''); ?> <?php echo e($loop->index > 4 ? 'd-none' : ''); ?> no-gutter">

          
          <div class="item-overlay" data-fancybox="gallery" href="<?php echo e(asset($storage_url.'img/gallery/'.$album->slug.'/'.str_replace('.', '.', $item->path))); ?>">
            <h3 class="caption"><?php echo e(isset($item->caption) ? $item->caption : ''); ?></h3>
            <img src="<?php echo e(asset($storage_url.'img/gallery/'.$album->slug.'/'.str_replace('.', '_tn.', $item->path))); ?>">
          </div>
          

        </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>               
      </div>

    </div>
  </div>
  
<?php endif; ?>


<?php $__env->startSection("script"); ?>
  <script>
    // var imgSrc, mGallery, mContainer, mCaption, mSlug, mControl, lastInView = 0, firstInView = 1

    // // Thumbnail on click
    // $(".item-overlay").on("click", function() {
    //   loading.open()
    //   imgSrc = $(this).find("img").attr("src"),
    //   mGallery = $("#gallery_modal"),
    //   mContainer = $(this).closest(".masonry-grid"),
    //   mCaption = $(this).find(".caption").text(),
    //   mSlug = $(this).closest(".album").attr("data-slug"),
    //   mControl = $("#previewControl")

    //   mImg = mGallery.find("img.gallery-preview")
    //   mImg.attr("src", imgSrc.replace("_tn.", "."))
    //   mGallery.find(".caption").text(mCaption)
      
    //   // Get image list
    //   $.ajax({
    //     headers: {
    //       'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    //     },
    //     type: 'POST',
    //     url: route('image.list', mSlug),
    //     error: function(response) {
    //       if( response.status === 401 ) {
    //         $(location).prop('pathname', 'auth/login');
    //       }
    //       if ( response.status === 422 ) {
    //         var errors = response.responseJSON.errors;
    //         $.each( errors, function(key, value) {
    //             console.log(value);
    //         });
    //       }
    //       if ( response.status === 500 ) {
    //         console.log(response);
    //       } 
    //       else {
    //         console.log(response);
    //       }
    //     },
    //     success: function (response) {
    //       mControl.empty().append(response.list)
    //       mGallery.modal("show")
    //       toggleCount = response.count
    //     },
    //     always : function() {
    //       loading.close()
    //     }
    //   });

    // })

    // // Handle hide modal
    // $(".gallery-preview").on("click", function() {
    //   $("#gallery_modal").modal("hide")
    // })

    // // Handle thumbnail toggle on click
    // $(document).on("click", "img.preview-toggle", function() {
    //   imgSrc = $(this).attr("src")
    //   imgCaption = $(this).attr("data-caption")
    //   mGallery = $(this).closest("#gallery_modal")
    //   mGallery.find(".caption").text(imgCaption)

    //   mImg = mGallery.find("img.gallery-preview")

    //   mImg.fadeOut('fast', function() {
    //     mImg.attr("src", imgSrc.replace("_tn.", "."))
    //     mImg.fadeIn('fast')
    //   });
      
    //   $(this).closest("li").addClass("active").siblings().removeClass("active")
    // })

    // // Handle slide
    // $("a.scroll-right").on("click", function() {

    //   var lastChild = mControl.find("li.last-toggle")
    //   lastChild.on('inview', function(event, isInView) {
    //     if(isInView) {
    //       lastInView = 1
    //     } else {
    //       lastInView = 0
    //     }
    //   })

    //   if(lastInView==0) {
    //     var margin = $("#previewControl").css("margin-left")
    //     var offset = margin.replace("px","")-200
    //     $("#previewControl").css("margin-left", offset+"px")
    //   }

    // })
    // $("a.scroll-left").on("click", function() {
      
    //   var firstChild = mControl.find("li.first-toggle")
    //   firstChild.on('inview', function(event, isInView) {
    //     if(isInView) {
    //       firstInView = 1
    //     } else {
    //       firstInView = 0
    //     }
    //   })

    //   if(firstInView==0) {  
    //     var margin = $("#previewControl").css("margin-left")
    //     var offset = margin.replace("px","")-(-200)
    //     $("#previewControl").css("margin-left", offset+"px")        
    //   }

    // })
  </script>
<?php $__env->stopSection(); ?>