@extends('master')

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

@section('content')

<!--    <span ng-show="showingProducts" class="ng-hide">Showing @{{ productCount }} products</span>

    <select ng-show="showingProducts" ng-change="loadProducts()" ng-model="sortfield" class="ng-hide">
        <option value="subcat">Subcategory Name</option>
        <option value="product">Product Name</option>
    </select>


    <span ng-show="showingProducts" class="ng-hide">Showing @{{ productCount }} products</span>

    <select ng-show="showingProducts" ng-change="loadProducts()" ng-model="sortfield" class="ng-hide">
        <option value="subcat">Subcategory Name</option>
        <option value="product">Product Name</option>
    </select>-->

<div class="container category">

    <ul class="breadcrumb">
        <li><a class="default" href="/">Home</a></li>
        <li><a class="default" href="{{ $sector->get_route() }}">{{ $sector->title }}</a></li>
        <li><a href="{{ $category->get_route() }}" class="default">{{ $category->title }}</a></li>
        <li class="current {{ $sector->uri }}">{{ $subcategory->title }}</li>
    </ul>
</div>
<div class="subcategory-header {{ $sector->uri }}">
    <h3 class="{{ $sector->uri }}">{{ $category->title }}</h3>
    <p>{!! $category->content !!}</p>

<!--		@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>

<div class="container category categoryclass-{{ $category->title }} " style="position: relative">
    <div class="ajax-loading-overlay" style="display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 999;">
        <div style="display: table; width: 100%; height: 100%; table-layout: fixed;">
            <div style="display: table-row; width: 100%; height: 100%; vertical-align: middle; text-align: center">
                <div style="display: table-cell; vertical-align: middle; text-align: center">
                    <span style="font-size: 20px; font-weight: bold; color: white;">Loading ...</span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 top-filter">
        <div class=" {{ $sector->uri }} ">
    {{--<span>xx Product found </span><a href="">View all</a>--}}
        <span ng-show="showingProducts" class="ng-hide"> @{{ productCount }} Products found</span>

<!--    <select ng-show="showingProducts" ng-change="loadProducts()" ng-model="sortfield" class="ng-hide">
        <option value="subcat">Collection</option>
        <option value="product">Product Name</option>
    </select>-->
        </div>
        </div>
    <div class="col-sm-3 col-xs-12 left-menu">

        <h3>Quick search</h3>
        <h4>Category</h4>
        <div class="left-menu-box-2">
            <select ng-model="category" ng-change="categoryChanged()">
                <option ng-repeat="category in categories"
                        ng-value="category.id" 
                        ng-bind-html="$sce.trustAsHtml(category.title)"
                        ng-selected="{{ $category->id }} == category.id"
                        ></option>
            </select>
        </div>
        
        <h4>Collection</h4>
        <div class="left-menu-box">
            <div>
                <input type="checkbox" 
                       ng-model="subcatAllSelected" 
                       ng-change="subcatAllSelectedChanged()"
                       ng-checked="subcatAllSelected"><span>All</span>
            </div>            
            <div ng-repeat="subcat in subcategories" ng-if="subcat.product_count > 0" ng-class="@{{ sector.uri }}">
                <input type="checkbox" ng-model="subcat.checked" ng-change="subcatSelectionChanged()"><span ng-bind-html="$sce.trustAsHtml(subcat.title)"></span>
            </div>
        </div>
    </div>
    <div class="col-sm-9 col-xs-12 detach-content {{ $sector->uri }} ">
        <div class="row grid-links">
            <h4 class="text-center">Loading...</h4>
        </div>
    </div>

</div>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript">
    var categories = {!! json_encode($categories) !!};
    var subcategories = {!! json_encode($allsubcategories) !!};
    var subcat_ajax_url = {!! json_encode(URL::Route('ajax_subcat_products')) !!};
    var subcatAllSelected = false;
</script>
<script type="text/javascript" src="{{ asset('assets/js/categories_ajax.js') }}"></script>
@endsection