@extends('master')

@section('css')
<link href="{{ asset('assets/css/sector.css') }}" rel="stylesheet">
@endsection
@section('js')
<script src="{{ asset('assets/js/slider.js') }}"></script>
@endsection

@section('content')
<!--div class="visible-xs">
    <a href="/dog/training-control/agility"><img src="/assets/img/slider/mobile.jpg" class="img-responsive" /></a>
</div-->
<div>
    <!-- Jssor Slider Begin -->
    <!-- To move inline styles to css file/block, please specify a class name for each element. -->
    <div id="banner_slider" style="position: relative; margin: 0 auto;
         top: 0px; left: 0px; width: 1600px; height: 485px; overflow: hidden;" class="hidden-xs">
        <!-- Loading Screen -->
        <div u="loading" style="position: absolute; top: 0px; left: 0px;">
            <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block;
                 top: 0px; left: 0px; width: 100%; height: 100%;">
            </div>
            <div style="position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;">
            </div>
        </div>
        <!-- Slides Container -->
        <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1600px;
             height: 485px; overflow: hidden;">

            @foreach ($slides as $slide)
                <div>
                    <a href="{{ $slide->url }}">
                        <img u="image" src="{{ $slide->image  }}" />
                        <div class="slide-conent-title">{{ $slide->content_title }}</div>
                        <div class="slide-conent">{{ $slide->content }}</div>
                    </a>
                </div>
            @endforeach            

        </div>

        <!--#region Arrow Navigator Skin Begin -->
        <!-- Help: http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html -->
                <style>

        </style>
        <!-- Arrow Left -->
        <span u="arrowleft" class="jssora21l" style="top: 123px; left: 0px">
        </span>
        <!-- Arrow Right -->
        <span u="arrowright" class="jssora21r" style="top: 123px; right: 0px">
        </span>
        <!--#endregion Arrow Navigator Skin End -->
            <div u="navigator" class="jssorb13" style="position: absolute; bottom: 16px; right: 6px;HEIGHT: 35px;border-width: 5px">
        <!-- bullet navigator item prototype -->
        <div u="prototype" style="POSITION: absolute; WIDTH: 16px; HEIGHT: 16px;"></div>
    </div>



    <!-- Jssor Slider End -->
</div>
<div class="gray-homepage-box2">
    <h3 class="{{ $sector->uri }}">{{ $sector->strapline }}</h3>
    <p>
        {!! $sector->content !!}
    </p>
</div>

<div class="container sector sector-box">


    <!--	<ul class="breadcrumb">
                    <li><a class="default" href="/">Home</a></li>
                    <li class="current {{ $sector->uri }}">{{ $sector->title }}</li>
            </ul>

            <div class="row grid-header">
                    <div class="col-md-7 col-xs-12">
                            <h1 class="{{ $sector->uri }}">{{ $sector->title }} category</h1>
                            <h2>{{ $sector->strapline }}</h2>
                            {!! $sector->content !!}
                    </div>
                    <div class="col-md-3 col-md-offset-2 hidden-xs">
                            <img src="{{ Croppa::url($sector->image, 400, 400) }}" class="img-responsive" alt="{{ $sector->title }}">
                    </div>
            </div>-->

    @if ($categories->count())
    <div class="row grid-links">

                        @if ( (count($categories)) == 2)
                                @elseif ( (count($categories)) == 1)
                                @endif
        
        
        
        @foreach ($categories as $category)
            <div class="{{ $boxClass }}" onclick="javascript:location.href ='{{ $category->get_route() }}'">

                @if ($boxClassType == 3)
                <img src="/imagecache/category/{{ $category->image }}" class="img-responsive" alt="{{ $category->title }}">
                @elseif ($boxClassType == 2)
                <img src="/imagecache/category/{{ $category->image_half }}" class="img-responsive" alt="{{ $category->title }}">
                @else
                <img src="/imagecache/category/{{ $category->image_full }}" class="img-responsive" alt="{{ $category->title }}">
                @endif
                
                <div class="over-section-box over{{ $sector->uri }}">
                    <div>
                        <h3 class="{{ $sector->uri }}">{{ $category->title }}</h3>
                        <p>{{ $category->summary }}</p>
                    </div>
                </div>

            </div>

            @if (($loop->index + 1) % 3 == 0)
            <div class="hidden-xs clearfix"></div>
            @endif
            @if (($loop->index + 1) % 2 == 0)
            <div class="hidden visible-xs clearfix"></div>
            @endif
            
            
            @if ((($loop->index + 1) % 3 == 0) && ((count($categories)-1 - $loop->index+2) < 3) && ($boxClassType == 3))
            
                @if ( (count($categories)-1 - $loop->index+2) == 2)
                                                        @else
                                                        @endif
            @endif            

        @endforeach
        
            </div>
    @endif


</div>
<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>

@endsection