@extends('layouts.app')

@section('title')
    Gallery
@endsection


@section('content')

    <div class="headerImage">
        <div class="page-heading-back">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="page-heading heading-blue p-tb80">
                            <ul>
                                <li>{!! Html::link('/', trans('menu.home')) !!}</li>
                                <li> {!! trans('menu.gallery') !!}</li>
                            </ul>
                            <h2>{!! trans('menu.gallery') !!}</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <!--Content-->
    <div id="page-wrapper">
        <div class="container">
            <div class="row">
                <div class="gallery">

                    @foreach($galleries as $gallery)
                        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                            <div class="proItem">
                                <div class="cont">
                                    <div>
                                        <h2>{!! $gallery->title !!}</h2>
                                        <div class="ic">
                                            <a href="{!! URL::to('images/photoGallery/'.$gallery->image) !!}"
                                               data-toggle="lightbox"
                                               data-title="Gallery Title"
                                               title="Zoom">
                                                <i class="fa fa-search-plus"></i>
                                            </a>
                                            <a href="{!! route('gallery.gallery.show', $gallery->id) !!}" class="link"
                                               title="Show Gallery"><i
                                                        class="fa fa-link"></i></a>
                                        </div>
                                    </div>
                                </div>
                                <img src="{!! URL::to('images/photoGallery/'.$gallery->image) !!}" class="img-fluid">
                            </div>
                        </div>
                    @endforeach

                </div>
            </div>

        </div>
    </div>
@endsection

@section('js')
    <!-- ekko-lightbox -->
    {!! Html::script('siteroot/plugins/lightbox/ekko-lightbox.js') !!}
    <script type="text/javascript">
        $(document).ready(function ($) {
            // delegate calls to data-toggle="lightbox"
            $(document).on('click', '[data-toggle="lightbox"]:not([data-gallery="navigateTo"]):not([data-gallery="example-gallery-11"])', function (event) {
                event.preventDefault();
                return $(this).ekkoLightbox({
                    onShown: function () {
                        if (window.console) {
                            return console.log('Checking our the events huh?');
                        }
                    },
                    onNavigate: function (direction, itemIndex) {
                        if (window.console) {
                            return console.log('Navigating ' + direction + '. Current item: ' + itemIndex);
                        }
                    }
                });
            });

            // disable wrapping
            $(document).on('click', '[data-toggle="lightbox"][data-gallery="example-gallery-11"]', function (event) {
                event.preventDefault();
                return $(this).ekkoLightbox({
                    wrapping: false
                });
            });

            //Programmatically call
            $('#open-image').click(function (e) {
                e.preventDefault();
                $(this).ekkoLightbox();
            });
            $('#open-youtube').click(function (e) {
                e.preventDefault();
                $(this).ekkoLightbox();
            });

            // navigateTo
            $(document).on('click', '[data-toggle="lightbox"][data-gallery="navigateTo"]', function (event) {
                event.preventDefault();

                return $(this).ekkoLightbox({
                    onShown: function () {

                        this.modal().on('click', '.modal-footer a', function (e) {

                            e.preventDefault();
                            this.navigateTo(2);

                        }.bind(this));

                    }
                });
            });


            /**
             * Documentation specific - ignore this
             */
            anchors.options.placement = 'left';
            anchors.add('h3');
            $('code[data-code]').each(function () {

                var $code = $(this),
                    $pair = $('div[data-code="' + $code.data('code') + '"]');

                $code.hide();
                var text = $code.text($pair.html()).html().trim().split("\n");
                var indentLength = text[text.length - 1].match(/^\s+/)
                indentLength = indentLength ? indentLength[0].length : 24;
                var indent = '';
                for (var i = 0; i < indentLength; i++)
                    indent += ' ';
                if ($code.data('trim') === 'all') {
                    for (var i = 0; i < text.length; i++)
                        text[i] = text[i].trim();
                } else {
                    for (var i = 0; i < text.length; i++)
                        text[i] = text[i].replace(indent, '    ').replace('    ', '');
                }
                text = text.join("\n");
                $code.html(text).show();

            });
        });
    </script>
@endsection