@extends('layouts.app')

@section('title')
    Products - {!! $cats->title !!}
@endsection

@section('content')

    <!--Breadcrumb-->
    <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('/', ' Home') !!}</li>
                                <li><a href="#">{!! $cats->title !!}</a></li>
                            </ul>
                            <h2>Technogas Products</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


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


                @foreach($products->proItem as $proItem)
                    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                        <div class="proItem">
                            <div class="cont">
                                <div>
                                    <div class="ic">
                                        <a href="{!! URL::to('images/products/'.$proItem->image) !!}"
                                           data-toggle="lightbox"
                                           data-title="Product Title" title="Zoom">
                                            <i class="fa fa-search-plus"></i>
                                        </a>
                                        <a href="{!! URL::to('product-details/'.$cats->title.'/'.$proItem->id ) !!}"
                                           class="link" title="More Details"><i
                                                    class="fa fa-link"></i></a>
                                    </div>
                                </div>
                            </div>
                            {!! Html::image('images/products/'.$proItem->image) !!}
                            <h2>{!! $proItem->title !!}</h2>
                            @if($proItem->price > 0)
                                <div class="price">Price <span>{!! $proItem->price !!} L.E</span></div>
                            @endif
                        </div>
                    </div>
                @endforeach


            </div>


            {{--<div class="row">
                <div class="col-xs-12">
                    <ul class="pagination">
                        <li><a href="#">1</a></li>
                        <li class="active"><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                    </ul>
                </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