@extends('base')

{{-- uncomment this section if want to override mobile menu
@section('mobile-menu')
    template specific mobile menu
@endsection
--}}

@section('template-content')

    @if( $isIndexPage )
        <div class="infinite-container clearfix TopBannerContainer" dir="ltr">
            <div class="hidden-xs swiper-wrapper">

                @for( $swiperBannerDex = 1; $swiperBannerDex <= 4; $swiperBannerDex++ )
                    <div class="swiper-slide">
                        <div class="infinite-overlay">
                            <div class="slide-content">
                                <div class='wsite-elements wsite-not-footer'></div>
                            </div>
                        </div>
                        @if( defined('INDEX_BANNER_HEADING_' . $swiperBannerDex) && defined('INDEX_BANNER_WRITEUP_' . $swiperBannerDex) )
                            <div class="TopBannerText">
                                <h1>{{ constant('INDEX_BANNER_HEADING_' . $swiperBannerDex) }}</h1>{{ constant('INDEX_BANNER_WRITEUP_' . $swiperBannerDex) }}
                            </div>
                        @endif
                        <div class="infinite-bgimg"><a href='#'><img
                                        src="{{ getResourceUrl('banner-' . $swiperBannerDex . '.jpg', 'images', true) }}"
                                        class="TopBannerImage"
                                        alt="{{ constant('INDEX_BANNER_HEADING_' . $swiperBannerDex) }}"/></a>
                        </div>
                        <div class="slide-content mobile-display">
                            <div class='wsite-elements wsite-not-footer'></div>
                        </div>
                    </div>
                @endfor

            </div>
            <a class="hidden-xs arrow-left" href="#"><span class="glyphicon glyphicon-chevron-left"></span></a>
            <a class="hidden-xs arrow-right" href="#"><span class="glyphicon glyphicon-chevron-right"></span></a>
        </div>
        <script>
            $(document).ready(function () {
                loadScript('{{ getResourceUrl('idangerous.swiper-2.4.min.js', 'js', false) }}', setupSwiper);
            });
            function setupSwiper() {
                var mySwiper = new Swiper('.infinite-container', {
                    centeredSlides: true,
                    loop: true,
                    slidesPerView: 'auto',
                    loopedSlides: 59,
                    speed: 2000,
                    autoplay: 7000,
                    calculateHeight: true
                });
                $('.arrow-left').on('click', function (e) {
                    e.preventDefault();
                    mySwiper.swipePrev();
                });
                $('.arrow-right').on('click', function (e) {
                    e.preventDefault();
                    mySwiper.swipeNext();
                });
            }
        </script>
    @else
        <div class="TopInnerBanner"
             style="background-image:url({{ getResourceUrl('banner-1.jpg', 'images', true) }})"></div>
    @endif

    <div class="TopLogoBar">
        <div class="container">
            <div class="row">
                <div class="hidden-xs col-sm-1 col-md-1 hidden-lg"></div>
                <div class="col-xs-10 col-sm-9 col-md-3 col-lg-4">
                    <a href="{{ getSeoUrl('/') }}"><img src="{{ getResourceUrl('logo.png', 'images', true) }}"
                                                        class="img-responsive TopLogo"
                                                        alt="{{ SCRIPT_COMPANY_NAME }}"
                                                        title="{{ SCRIPT_COMPANY_NAME }}"></a>
                </div>
                <div class="col-xs-2 col-sm-1 hidden-md hidden-lg">
                    <button type="button" class="m-menu">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="hidden-xs hidden-sm col-md-1" style="padding-right:0px;">
                    <div class="TopLinksBarLeft"></div>
                </div>
                <div class="hidden-xs hidden-sm col-md-6 col-lg-7" style="padding-left:0px;">
                    <div class="TopLinksBarLinks">
                        <a href="{{ getSeoUrl('category_taxonomy') }}"
                           class="AllCatsDDR">{{ ALL_CATEGORIES }} <span
                                    class="glyphicon glyphicon-chevron-down"></span></a> |
                        @if( defined('IS_COUPONS_INSTALLED') && IS_COUPONS_INSTALLED == 1 )
                            <a href="{{ getSeoUrl('coupons_category') }}">{{ COUPONS }}</a> |
                        @endif
                        <a href="{{ getSeoUrl('aboutus') }}">{{ ABOUT_US }}</a> |
                        <a href="{{ getSeoUrl('contactus') }}">{{ CONTACT_US }}</a> |
                        <a href="{{ getSeoUrl('faq') }}">{{ FAQ }}</a>
                    </div>
                    <div class="TopLinksBar"></div>

                    <div class="AllCatsDropMenu AllCatsDropMenuDDR">
                        <ul class="nav nav-pills nav-stacked nav-cats">
                                                    </ul>
                        <div style="clear:both; height:12px;"></div>
                    </div>
                    <script type="text/javascript">
                        <!--
                        $('.right-caret,.right-caret-wrapper').click(function (event) {
                            event.preventDefault();
                        });
                        //-->
                    </script>

                    <div style="height:5px"></div>
                    <div style="width:85px; float:right; margin-left:3px;">{!! $currencyString !!}</div>
                    <div style="width:130px; float:right; margin-left:3px;">{!! $languageString !!}</div>
                    @if( $currencyString != '' || $languageString != '' )
                        @push('footer-scripts')
                        <script type="text/javascript">
                            try {
                                $("select[rel=relJQDDR]").msDropDown();
                            } catch (e) {
                                alert(e.message);
                            }
                        </script>
                        @endpush
                    @endif
                </div>
            </div>
        </div>
    </div>
    <div style="clear:both;"></div>

    @if( $isIndexPage )
        <div style="height:150px;" class="hidden-xs"></div>
        <div style="height:100px;" class="hidden-xs hidden-sm"></div>
        <div style="height:154px;" class="hidden-xs hidden-sm hidden-md"></div>
    @else
        <div style="height:50px;" class="hidden-xs"></div>
    @endif
    <div style="height:85px;"></div>

    <div class="TopSearchBar">
        <div class="SearchTextCont"></div>
        <div class="hidden-xs col-sm-3 col-md-3 col-lg-4"></div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
            <div class="SearchTextBg">
                <form action="{{ getSeoUrl('search_products') }}" method="GET" name="formSearch" id="formSearch"
                      class="form-inline">
                    <input type="hidden" name="searchWithin" value="">
                    <div class="input-group" style="width:100%" dir="ltr">
                        <input type="text" name="searchText" class="input-lg form-control"
                               value="{{ cacheLivePart('header-search-text-ex') }}"
                               placeholder="{{ SEARCH_PRODUCTS }}">
                        <span class="input-group-addon"><a href="#" onclick="$('#formSearch').submit();"><span
                                        class="glyphicon glyphicon-search"></span></a></span>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div style="clear:both;"></div>

    <div style="height:66px;"></div>

    @if( ! $isIndexPage )
        <div class="container">
            <div class="row">
                <div class="BreadcrumbBar col-xs-12">
                    <div class="hidden-xs"><a
                                href="{{ getSeoUrl('/') }}">{{ HOME }}</a> {!! cacheLivePart('header-page-breadcrumb') !!}
                    </div>
                    @if( $lastUrl != '' && $lastTitle != '' )
                        <div class="visible-xs">
                            <a class="BreadCrumbLinkM" href="{{ $lastUrl }}"><span
                                        class="glyphicon glyphicon-chevron-left"></span> {{ BACK_TO }} {{ $lastTitle }}
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
        <div style="clear:both; height:2px;"></div>
    @else
        <div class="GradLite1 hidden-xs" style="height:30px"></div>
    @endif

    <div class="container">
        <div class="row" style="text-align:left;">
            {{ $info }}

            @if( $isContentPage )
                <div class="col-xs-12 col-md-8">
                    <div class="well">
                        <h1>{{ cacheLivePart('header-page-heading') }}</h1>
                        @endif

                        @if( $isIndexPage )
                    </div>
                </div>
            @endif

            @yield('content')

            @if( $isIndexPage )
                <div class="container">
                    <div class="row">
                        @endif

                        @if( $isContentPage )
                            <div style="clear:both;"></div>
                    </div>
                </div>
                <div class="hidden-xs hidden-sm col-md-4">
                    @if( FACEBOOK_PAGE_LINK != '#' )
                        <iframe src="//www.facebook.com/plugins/likebox.php?href={{ urlencode(FACEBOOK_PAGE_LINK) }}&amp;width=300&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true"
                                scrolling="no" frameborder="0"
                                style="border:none; overflow:hidden; width:300px; height:270px;"
                                allowTransparency="true"></iframe>
                        <div style="clear:both; height:10px;"></div>
                    @endif