@extends('layouts.khtc')
@section('title')
    {{$page->name}} Course
@endsection

@section('seo_meta')
    <meta name="description" content="{{$page->meta_description}}">
    <meta name="keywords" content="{{$page->meta_keywords}}">
@endsection
@section('breadcrumb')
    <!-- Start Page Title Area -->
    <div style="background-image:url('@if($page->banner){{asset('/uploads/'.$page->banner)}} @else {{asset('/assets/img/banner.png')}} @endif')" class="page-title-area">
        <div class="container">
            <div class="page-title-content">
                <ul>
                    <li><a href="index.php">Home</a></li>
                    <li> {{ $page->title }}</li>
                </ul>
                <h2> {{ $page->title }}</h2>
            </div>
        </div>
    </div>
    <!-- End Page Title Area -->
@endsection

@section('main')
    <!-- Start Team Area -->
    <section class="team-area ptb-100">
        <div class="container">
            <div class="section-title">
                {{--                <span class="sub-title">Make Connections</span>--}}
                <h2>{{$page->sub_heading}}</h2>
                {!! $page->body !!}
            </div>
            <!-- Start Gallery Area -->
            <section class="gallery-area pt-100 pb-70">
                <div class="container">
                    <div class="row">
                        <section id="gallery">
                    
                        <div id="image-gallery">
                          <div class="row">
                            @foreach($photos as $p)
                            <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
                              <div class="img-wrapper">
                                <a href="{{asset('/uploads/'.$p->image.'')}}"><img src="{{asset('/uploads/'.$p->image.'')}}" class="img-responsive" alt="{{$p->caption}}"></a>
                                <div class="img-overlay">
                                  <i class="fa fa-plus-circle" aria-hidden="true"></i>
                                </div>
                              </div>
                            </div>
                            @endforeach
                            
                          </div><!-- End row -->
                        </div><!-- End image gallery -->
                     
                    </section>
                       
                       
                       
                       
                       
                       
                       
                       
                       
                       
                       
                       
                       
                       
                       
                       
                       
                       
                       


                    </div>

                </div>
            </section>
            <!-- End Gallery Area -->

        </div>

        <div id="particles-js-circle-bubble-3"></div>
    </section>

    <!-- End Team Area -->
@endsection
@section('scripts')
<script>
    // Gallery image hover
$( ".img-wrapper" ).hover(
  function() {
    $(this).find(".img-overlay").animate({opacity: 1}, 600);
  }, function() {
    $(this).find(".img-overlay").animate({opacity: 0}, 600);
  }
);

// Lightbox
var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $prevButton = $('<div id="prevButton"><i class="fa fa-chevron-left"></i></div>');
var $nextButton = $('<div id="nextButton"><i class="fa fa-chevron-right"></i></div>');
var $exitButton = $('<div id="exitButton"><i class="fa fa-times"></i></div>');

// Add overlay
$overlay.append($image).prepend($prevButton).append($nextButton).append($exitButton);
$("#gallery").append($overlay);

// Hide overlay on default
$overlay.hide();

// When an image is clicked
$(".img-overlay").click(function(event) {
  // Prevents default behavior
  event.preventDefault();
  // Adds href attribute to variable
  var imageLocation = $(this).prev().attr("href");
  // Add the image src to $image
  $image.attr("src", imageLocation);
  // Fade in the overlay
  $overlay.fadeIn("slow");
});

// When the overlay is clicked
$overlay.click(function() {
  // Fade out the overlay
  $(this).fadeOut("slow");
});

// When next button is clicked
$nextButton.click(function(event) {
  // Hide the current image
  $("#overlay img").hide();
  // Overlay image location
  var $currentImgSrc = $("#overlay img").attr("src");
  // Image with matching location of the overlay image
  var $currentImg = $('#image-gallery img[src="' + $currentImgSrc + '"]');
  // Finds the next image
  var $nextImg = $($currentImg.closest(".image").next().find("img"));
  // All of the images in the gallery
  var $images = $("#image-gallery img");
  // If there is a next image
  if ($nextImg.length > 0) { 
    // Fade in the next image
    $("#overlay img").attr("src", $nextImg.attr("src")).fadeIn(800);
  } else {
    // Otherwise fade in the first image
    $("#overlay img").attr("src", $($images[0]).attr("src")).fadeIn(800);
  }
  // Prevents overlay from being hidden
  event.stopPropagation();
});

// When previous button is clicked
$prevButton.click(function(event) {
  // Hide the current image
  $("#overlay img").hide();
  // Overlay image location
  var $currentImgSrc = $("#overlay img").attr("src");
  // Image with matching location of the overlay image
  var $currentImg = $('#image-gallery img[src="' + $currentImgSrc + '"]');
  // Finds the next image
  var $nextImg = $($currentImg.closest(".image").prev().find("img"));
  // Fade in the next image
  $("#overlay img").attr("src", $nextImg.attr("src")).fadeIn(800);
  // Prevents overlay from being hidden
  event.stopPropagation();
});

// When the exit button is clicked
$exitButton.click(function() {
  // Fade out the overlay
  $("#overlay").fadeOut("slow");
});
</script>
@endsection