@extends('master')

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


<div class="container category">

    <ul class="breadcrumb">
        <li><a class="default" href="/">Home</a></li>
        <li><a href="{{ $sector->get_route() }}" class="default">{{ $sector->title }}</a></li>
        @if (!empty($category)) {{-- Empty on New Products page --}}
        <li><a href="{{ $category->get_route() }}" class="default">{{ $category->title }}</a></li>
        @endif
        @if ($subcategory->uri != $sector->uri) {{-- A bit of a hack to handle New Products; we shold revisit the breadcrumb really --}}
        <li class="current {{ $sector->uri }}">{{ $subcategory->title }}</li>
        @endif
    </ul>
</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>
</div>

<!-- Jssor Slider End -->
    

<div class="container subcategory">
    <!--div class="row grid-header">
    <!--div class="col-md-7 col-xs-12">
            <h1 class="{{ $sector->uri }}">{{ $subcategory->title }}</h1>			
            @if ($subcategory->content)
                    {!! $subcategory->content !!}
            @else
                    <p>{{ $subcategory->summary }}</p>
            @endif
    </div-->

    <!--@if ($subcategory->image && !$subcategory->hero_image)
    <!--div class="col-md-4 col-md-offset-1 hidden-xs">
            {{-- <img src="{{ Croppa::url($subcategory->image, 400, 400) }}" class="img-responsive" alt="{{ $subcategory->title }}"> --}}
            <img src="/imagecache/square/{{ $subcategory->image }}?size=400" class="img-responsive" alt="{{ $subcategory->title }}">
    </div>
    @endif
</div-->

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

        @foreach ($products as $product)

        <div class="col-sm-3 col-xs-6">
            <div class="product">
                <a href="{{ $product->get_route() }}">			
                    <div class="image-wrapper category-box-inner" style="border: 1px solid #eeeeee;box-sizing: border-box;position:relative;">
                        <img src="/imagecache/square/{{ $product->image() }}" class="img-responsive" alt="{{ $product->title }}">
                        @if (Auth::check() && !Auth::user()->is_restricted())
                    <form class="form-inline favform" action="{{ route('toggle_favourite') }}" method="post">
		          		{!! csrf_field() !!}		          		          	
		          		<button type="submit" class="btn btn-sm btn-success">							
		          				<input type="hidden" name="product_id" value="{{ $product->id }}">		
			          			@if (Auth::user()->favouriteproducts()->where('product_id',$product->id)->get()->count())
			          				<i class="fa fa-heart active" aria-hidden="true"></i>
			          			@else		          				
			          				<i class="fa fa-heart" aria-hidden="true"></i>
			          			@endif			          		
		          		</button>
		          	</form>
		          	@endif
                    </div>
                    <h3 class="{{ $sector->uri }}">{{ $product->title }}</h3>
                    {{-- <p>Product code: {{ $product->pid }}</p> --}} {{-- Redundant here --}}
                </a>
                @if (Auth::check() && !Auth::user()->is_restricted())
                <form class="form-inline" action="{{ route('add_to_basket') }}" method="post">
                    {!! csrf_field() !!}
                    @if ($product->variants->count())
                    <div class="form-group variant-select">
                        <select class="form-control input-sm" required="required" name="variant_id">
                            @foreach ($product->variants as $variant)
                            @if ($loop->index == 0)
                            <option value="">{{ $variant->property }}</option>
                            @endif
                            <option value="{{ $variant->id }}">{{ $variant->value }}</option>
                            @endforeach							
                        </select>
                    </div>
                    @else
                    <input type="hidden" name="product_id" value="{{ $product->id }}">
                    @endif
                    <div class="form-group">					    
                        <input type="number" min="1" id="quantity-{{ $product->id }}" length="1" class="form-control input-sm" style="width: 4em" name="quantity" value="1">		   	
                    </div>	  
                    <button class="btn btn-orange" type="submit" value="Submit">Add to basket</button>

                </form>
                @endif

            </div>
        </div>

        @if (($loop->index +1) % 4 == 0)
        <div class="hidden-xs clearfix"></div>			
        @endif
        @if (($loop->index +1) % 2 == 0)
        <div class="hidden visible-xs clearfix"></div>
        @endif

        @endforeach
    </div>
    @endif


</div>
@endsection