@section('title', '- Products Search')

@extends('layouts.app')

@section('section')

    <div class="container">
        <input type="hidden" name="" id='token' value="{{csrf_token()}}">
        <div class="section-content">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-content">
                        @if($search==1)
                            @if($find!="")
                                <h4>@lang('products.results_text'): "{{$find}}"</h4>
                            @else
                                <h4>@lang('products.list_text')</h4>
                            @endif
                        @else
                            <h4>@lang('products.list_text')</h4>
                        @endif
                        <hr>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="filters-container">
                                    <div class="filters-heading" id="show-filters">
                                        <h4>@lang('products.filter_text')
                                            <i class="fa fa-arrow-down visible-xs" aria-hidden="true"></i>
                                        </h4>
                                    </div>
                                    <div id="body-filters" class="filters-body  hidden-xs">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <form action="{{ route('search') }}" method="get">
                                                    <input type="hidden" name="search" value="{{$find}}">
                                                    <label>@lang('products.price')</label>
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <input type="text" class="form-control" name="min"
                                                                   placeholder="min"
                                                                   value="@if(isset($filters['min_price'])) {{$filters['min_price']}} @endif">
                                                        </div>
                                                        <div class="col-md-6">
                                                            <input type="text" class="form-control" name="max"
                                                                   placeholder="max"
                                                                   value="@if(isset($filters['max_price'])) {{$filters['max_price']}} @endif">
                                                        </div>
                                                    </div>
                                                    <br>
                                                    <label for="">
                                                        <input type="radio" name="new" value="1"
                                                               @if(isset($filters['new']) && $filters['new']==1) checked @endif>
                                                        @lang('products.new_arti')
                                                    </label>
                                                    <label for="">
                                                        <input type="radio" name="new" value="0"
                                                               @if(isset($filters['used']) && $filters['used']==1) checked @endif>
                                                        @lang('products.used_arti')
                                                    </label>

                                                    @if($categories)
                                                        <hr>

                                                        <label for="">@lang('products.categories')</label>
                                                        @foreach ($categories as $key => $value)
                                                            <br>
                                                            <label>
                                                                <input type="checkbox" name="categories[]"
                                                                       value="{{$key}}"
                                                                       @if(isset($filters['categories']) && in_array("$key", $filters['categories'])) checked @endif>
                                                                @lang('categories.'.$value.'')
                                                            </label></option>
                                                        @endforeach
                                                        <br>
                                                    @endif
                                                    <br>
                                                    <button type="submit" class="center-block btn btn-ebit">
                                                        @lang('products.filter')
                                                    </button>
                                                </form>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="banner_vertical_search hidden-xs">
                                    <img src="imagenes/banner/banner_left.jpg" alt="" class="banner_ver">
                                </div>

                            </div>

                            <!--Articles section lists-->
                            <div class="col-md-9" id="list_articles">
                                @if(!$articles->items())
                                    <h3>@lang('products.not_found')</h3>
                                @endif
                                @foreach ($articles->items() as $article)
                                    <div class="col-md-12 item-article">
                                        <a href="{{ route("articles.show", $article->id) }}" class="list-item">
                                            <div class="col-md-2 img-item">
                                                <img src="{{$article->photos[0]->file}}" alt="{{$article->name}}"
                                                     class="img-articles img-responsive">
                                            </div>
                                            <!--More Info-->
                                            <div class="col-md-10 info-articule">
                                                <div class="row">
                                                    <div class="col-md-9 title-article">
                                                        <h4 class="articles-title">{{$article->name}}</h4>
                                                    </div>
                                                    <div class="col-md-3 pull-right">
                                                        <h4 class="articles-title text-price">{{$article->price}}
                                                            eBits</h4>
                                                    </div>
                                                </div>

                                                <p class="categories-article">
                                                    @foreach ($article->categories as $categories)
                                                        @lang('categories.'.$categories->category->category.'')
                                                        @if (!$loop->last)
                                                            |
                                                        @endif
                                                    @endforeach
                                                </p>

                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <p class="articles-description">{{str_limit($article->description, 190,'')}}</p>
                                                    </div>
                                                </div>
                                        </a>
                                        <div class="row">
                                            <div class="col-md-1 col-md-offset-11 col-xs-2 col-xs-offset-10 text-center">
                                                <i class="fa fa-2x @if(isset($article->whislist) && $article->whislist==1) fa-heart color-red @else fa-heart-o @endif add-whishlist"
                                                   data-id='{{$article->id}}' aria-hidden="true"></i>
                                            </div>
                                            <!--
                                            <div class="col-md-1 col-md-offset-11 col-xs-2 col-xs-offset-10 text-center">
                                                <i class="fa fa-2x @if(isset($article->favorite) && $article->favorite==1) fa-heart color-red @else fa-heart-o @endif add-favorite"
                                                   data-id='{{$article->id}}' aria-hidden="true"></i>
                                            </div>
                                            -->
                                        </div>

                                    </div>

                            </div>
                            @endforeach
                            {{ $articles->links() }}
                        </div>
                        <!--End list-->

                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    @push('css')
        <style media="screen">

            .color-red {
                color: red;
            }

            .filters-container {
                opacity: 0.80;
                border-radius: 3px;
                background-color: #ecf0f1;
            }

            .filters-heading {
                background-color: #404148;
                padding: 10px;
                margin-bottom: 10px;
            }

            .filters-heading > h4 {
                color: #f6f8f8;
                font-family: Roboto;
                font-size: 16px !important;
                font-weight: bold;
                text-align: center;
                margin-top: 0px;
                margin-bottom: 0px;
            }

            .filters-body {
                padding: 15px;
            }

            .item-article {
                -moz-border-radius: 0;
                border-radius: 0;
                padding: 2px;
                position: relative;
                overflow: hidden;
                border: 1px solid #f5f5f5;
                min-height: 150px;
            }

            .item-article:hover {
                -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
                -moz-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
                box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
                z-index: 50;
            }

            .img-item {
                margin: 0;
                padding: 0;
                position: relative;
                text-align: center;
            }

            .vertical_fix {
                margin: 2em 0;
            }

            .pagination > .active > span {
                background-color: #f9d357;
                border-color: #f9d357;
            }

            .pagination > .active > span:hover, .pagination > .active > span:focus {
                opacity: 0.8 !important;
                background-color: #f9d357;
                border-color: #f9d357;
            }

            .pagination > li > a, .pagination > li > span {
                color: #3c3c47;
            }

            .pagination > li > a:hover {
                color: #a1a1a1;
            }

            .banner_vertical_search {
                margin-top: 10px;
            }
        </style>
    @endpush
    @push('js')
        <script type="text/javascript">
            $('#show-filters').on('click', function () {
                var element = $('#body-filters');
                if (element.hasClass('hidden-xs')) {
                    element.removeClass('hidden-xs');
                } else {
                    element.addClass('hidden-xs');
                }
            });

            $("#list_articles .item-article").each(function (index, element) {
                var n = $(this).find(".img-articles").attr('src');
                var width = $(this).find(".img-articles").width();
                var height = $(this).find(".img-articles").height();
                if (height < 100)
                    $(this).find(".img-articles").addClass('vertical_fix');
            });

            var url_project = "{{ route('home') }}";
        </script>

        <script type="text/javascript">
            var message_no_login = "@lang('products.no_login_fav')";
        </script>
        <script src="{{ url('/js/favorite.js') }}"></script>
    @endpush
@endsection