@extends('master')

@section('css')
<link href="{{ asset('assets/css/home.css') }}" rel="stylesheet">
<link href="{{ asset('assets/css/page.css') }}" rel="stylesheet">
@endsection

@section('content')
<div class="container category">

    <ul class="breadcrumb">
        <li><a class="default" href="/">Home</a></li>
        <li class="current new-products">{{ $meta_title }}</li>
    </ul>
</div>




@foreach ($pages as $page)

    <a class="anchor" id="{{ Str::slug($page->submenu_title) }}"></a>
    <div class="orange-homepage-box orange-homepage-box about" id="{{ Str::slug($page->submenu_title) }}"  style="background-image: url({{$backgrounds[$backgroundRand]}})">
        <h2 class="hidden-xs">{{ $page->title }}</h2>
        <h2 class="visible-xs" >
            <span style="position:absolute;left:15px;">&#x276F;</span>{{ $page->submenu_title }}
        </h2>
        <div class="subheader-menu">
            @foreach ($pages as $pageMenu)
                <a href="#{{ Str::slug($pageMenu->submenu_title) }}" style="{{ $page->id == $pageMenu->id ? 'text-decoration: underline' : '' }}">{{ $pageMenu->submenu_title }}</a>
            @endforeach
        </div>
    </div>

    
    
    
    
    <div class="container page about-us-container" id="container-for-{{ Str::slug($page->submenu_title) }}">
        <div class="row">
            <div class="col-xs-12 ">
                <div class="first-text-aboutus">
                    {!! $page->content_before !!}
                </div>
                
                <div class="row">
                    <div class="col-md-5 hidden-xs">
                        @if ($page->image)
                            <img src="{{ Croppa::url($page->image, 400, null) }}" class="img-responsive pull-right" alt="{{ $page->title }}"/>
                        @endif
                    </div>
                    <div class="col-md-7 col-xs-12 ">
                        {!! $page->content !!}
                    </div>
                </div>



                @yield('below_content')
            </div>
        </div>
    </div>

    
    
@endforeach











<div class="container homepage-hr">
    <hr>
</div>
<div class="container two-orange-button">
    <a href="/contact-us#section22">Order a catalogue</a>
    <a href="/contact-us#section33">Become a stockist</a>
</div>
<script>
    $(".nav.navbar-nav.navbar-right li:first-of-type a").addClass("active-link");
    $(".orange-homepage-box").click(function () {
        id = $(this).attr("id");
        $("#container-for-"+id).toggleClass("autoheight2");
    });

</script>
@endsection