@extends('front._layouts.master')

@section('css')

    {!! HTML::style('/assets/common/slick/slick.css') !!}

@endsection

@section('first-css')

    <style>
        .product img {
            width      : 100%;
            min-height : 54vw;
        }
    </style>

@endsection


@section('body')

    <div id="picture-menu">
        {{-- Top Menu --}}
        <div class="top-menu">
            <a class="compname">{{ $company->name }}</a>

            <div class="nav">
                <div class="prev">

                </div>
                <div class="left-arrow">
                    {!! HTML::image('/assets/front/images/arrow-left.png') !!}
                </div>

                <div class="center">

                </div>

                <div class="right-arrow">
                    {!! HTML::image('/assets/front/images/arrow-right.png') !!}
                </div>

                <div class="next">
                </div>
            </div>
            <div class="separator"></div>
        </div>

        {{-- Content --}}
        <div class="content menu">
            <div class="slick">
                @foreach($categories as $category)
                    <div>
                        @foreach($category->products as $product)
                            <a>
                                <div class="product">
                                    <img data-lazy="{{ $product->mainImage('thumb') }}" src="/assets/front/images/product-default.jpg" alt="">
                                    <div class="bar">
                                        <div class="left">
                                            <span class="name">{{ $product->name }}</span>
                                            <hr>
                                            <span class="detail">{{ $product->description }}</span>
                                        </div>
                                        @if($company->settingsGet('show_prices_on_menu'))
                                            <div class="right">
                                                <div class="price">
                                                    <span class="num">{{ $product->pricePart('whole') }}</span><span
                                                            class="dec">,{{ $product->pricePart('decimal') }}</span>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </a>
                        @endforeach
                    </div>
                @endforeach
            </div>
        </div>
    </div>

@endsection

{{-- Page-specific scripts --}}
@section('scripts')

    {!! HTML::script('/assets/common/slick/slick.min.js') !!}

    <script>
        var names = {!! $category_names !!};
        var ids   = {!! $category_ids !!};

        switchTitles(0)

        $(function () {

            var productId, $slick, slideChanged
            var categoryId = false

            var parameters = location.search
            if (parameters.length > 0 && parameters.indexOf('category_id=')) {
                categoryId = Number(parameters.substr(parameters.indexOf('category_id') + 'category_id='.length))
            }

            var $slick = $('.slick')
            $slick.slick({
                lazyLoad      : 'ondemand',
                adaptiveHeight: true,
                arrows        : false
            })

            // move to the second page if the table is preselected.
            if (categoryId && ids.indexOf(categoryId) != -1) {
                $slick.slick('slickGoTo', ids.indexOf(categoryId))
            }

            var currentPage = 0
            $slick.on('beforeChange', function (slick) {
                currentPage = $('.slick').slick('slickCurrentSlide')
            })
            $slick.on('afterChange', function (slick) {
                if (currentPage != $('.slick').slick('slickCurrentSlide')) {
                    window.scrollTo(0, 0)
                    switchTitles($('.slick').slick('slickCurrentSlide'))
                }
            })
            $('.nav .next, .nav .right-arrow').on('click', function () {
                $('.slick').slick('slickNext')
            })
            $('.nav .prev, .nav .left-arrow').on('click', function () {
                $('.slick').slick('slickPrev')
            })
        })

        function switchTitles(centerId) {
            if (centerId > 0) {
                $('.nav .prev').html(names[centerId - 1])
            } else {
                $('.nav .prev').html(names[names.length - 1])
            }

            $('.nav .center').html(names[centerId])

            if (centerId < names.length - 1) {
                $('.nav .next').html(names[centerId + 1])
            } else {
                $('.nav .next').html(names[0])
            }
        }
    </script>

@endsection