@section('metatags')
<meta name="description" content="">
<meta property="og:title" content="Resultados de Pesquisa | C117 - Casual Wear">
<meta property="og:description" content="">
<meta property="og:image" content="{{ asset('assets/img/og_image.png') }}">
@stop

@section('title')
Pesquisa por | 
@stop


@section('content')
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <ol class="breadcrumb">
                <li><a href="{{ route('home.index') }}">Início</a></li>
                <li class="active">Resultados da Pesquisa</li>
            </ol>
        </div>
        <div class="col-sm-6">
            <h3 class="margin-top-0">
                Resultados da Pesquisa
            </h3>
        </div>
        <div class="col-sm-12">
            {{ Form::open(['route' => 'search.index', 'method' => 'GET', 'class' => 'search']) }}
            <div class="input-group">
                {{ Form::text('search', Request::get('search'), ['class' => 'form-control','placeholder' => 'Pesquisar por nome ou referência...', 'autocomplete' => 'off', 'required']) }}
                <span class="input-group-btn">
                    <button class="btn btn-primary padding-top-8 padding-bottom-8" type="submit">
                        <i class="fa fa-search"></i>
                    </button>
                </span>
            </div>
            {{ Form::close() }}
        </div>
    </div>
    <div class="spacer-30"></div>
    @if(!$products->isEmpty())
    <div class="row">
        <div class="col-sm-4 col-md-3">
            <div class="loading-state"></div>
            <div class="filters-container">
                @include('search.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>
    @else
    <div class="spacer-50"></div>
    <div class="row">
        <div class="col-sm-12">
            <p class="search-no-results text-center">
                <i class="fa fa-search bigger-200"></i><br>
                Não foram encontrados produtos para a pesquisa por <b>"{{ Request::get('search') }}"</b><br>
            </p>
        </div>
    </div>
    <div class="spacer-100"></div>
    @endif
</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 = '?search={{ Request::get("search") }}';

        $('.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