@section('metatags')
<meta name="description" content="{{ empty($category->meta_description) ? 'Conheça todos os produtos que temos para lhe oferecer na nossa gama de '.$category->name : $category->meta_description }}">
<meta property="og:title" content="{{ empty($category->meta_title) ? $category->title : $category->meta_title }} | C117 - Casual Wear">
<meta property="og:description" content="{{ empty($category->meta_description) ? 'Conheça todos os produtos que temos para lhe oferecer na nossa gama de '.$category->name : $category->meta_description }}">
<meta property="og:image" content="{{ asset('assets/img/og_image.png') }}">
@stop

@section('title')
{{ empty($category->meta_title) ? $category->name : $category->meta_title }} | 
@stop


@section('content')
<div class="container">
    <div class="col-sm-12">
        @include('products.partials.breadcrumb')
    </div>
    <div class="col-sm-4 col-md-3">
        <div class="loading-state"></div>
        <div class="filters-container">
            @include('products.partials.filters')
        </div>
    </div>
    <div class="col-sm-8 col-md-9">
        <div class="loading-state">
            <i class="fa fa-spin fa-circle-o-notch bigger-300"></i><br/>
            A carregar...
        </div>
        <div class="products-container">
            @include('products.partials.listItems')
        </div>
    </div>
</div>
@stop

@section('scripts')
<script>
//    $(document).on('click', '.categories-menu a', function (e) {
//        e.preventDefault();
//        var url = $(this).attr('href');
//        $('.categories-menu li').removeClass('active');
//        $(this).parent().addClass('active')
//
//        window.history.pushState('', '', url);
//
//        $('.loading-state').show();
//
//        $.post(url, function (data) {
//            if (data.success) {
//                $('.products-container').html(data.html)
//            }
//        }).error(function () {
//            alert('erro');
//        }).always(function () {
//            $('.loading-state').hide();
//        })
//    });
//



    $(document).on('ifChanged', '.filter-group input[type="checkbox"]', function (e) {
        e.preventDefault();
        filterProducts($(this));
    });



    $(document).on('change', 'select[name="sort"]', function (e) {
        e.preventDefault();

        var $this = $(this);
        var $form = $this.closest('form');
        var url = $form.attr('action');
        var sort = $this.find(':selected').data('sort');
        var dir  = $this.find(':selected').data('dir');

        url = URL.updateParameter(url, 'sort', sort);
        url = URL.updateParameter(url, 'dir', dir);
        
        window.location = url;
    });

    $(document).on('click', '[data-toggle="show-all-filters"]', function (e) {
        e.preventDefault();

        $(this).prev().slideToggle();
        
        var tmp = $(this).data('toggle-text');
        $(this).data('toggle-text', $(this).html());
        $(this).html(tmp);
    });
    
    
    $('.filter-group input:checked').closest('ul').show(function(){
        var $target = $(this).next();
        var tmp = $target.data('toggle-text');
        $target.data('toggle-text', $target.html());
        $target.html(tmp);
    });
    
    function filterProducts($this) {
        
        var url = URL.current();
        var $form = $this.closest('form');
        var param = $this.data('target');
        var value = $this.val();
        var html  = '';
        var queryStr = '';
        
        $('.filter-group input[type="checkbox"]:checked').each(function(){
            var key = $(this).attr('name');
            if(queryStr == '') {
                queryStr = '?' + key + '=' + $(this).val();
            } else {
                queryStr = queryStr + '&' + key + '=' + $(this).val();
            }
        });

        url = URL.removeQueryString(url);
        window.history.pushState('', '', url + queryStr);

        $('.loading-state').show();

        $.post($form.attr('action'), $form.serialize(), function (data) {
            $('.products-container').html(data.content);
            $('.filters-container').html(data.filters);
            $('.filters-container input').iCheck(Init.iCheck());
        }).error(function () {
            html = '<div class="text-center"><h3 class="text-red font-weight-200">'
                   +'<i class="fa fa-exclamation-circle"></i><br/>'
                   +'<small class="text-red">Ocorreu um erro no carregamento de produtos.</small></h3></div>';
            $('.products-container').html(html);
        }).always(function () {
            $('.loading-state').hide();
        })
    }
</script>
@stop