@extends('rubandroll.layouts.app')

@section('meta-title')Webshop - Rub & Roll @endsection

@section('meta-keywords') @endsection

@section('meta-description') @endsection

@section('content')

    <section id="page-title" class="page-title bg-overlay {{--bg-parallax--}} bg-overlay-gradient">
        <div class="bg-section">
            <img src="/assets/images/page-title/4.jpg" alt="Background"/>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="title title-8 text-center">
                            <div class="title--content">
                                <div class="title--subtitle">Rub & Roll</div>
                                <div class="title--heading">
                                    <h1>Termékeink</h1>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="shop" class="shop shop-4 bg-gray pb-90">
        <div class="container">
            <div class="row">

                <div class="col-xs-12 col-sm-12  col-md-12 shop-filter">
                    <ul class="list-inline">
                        <li><a class="active-filter" href="#" data-filter="*">Mind</a></li>
                        @foreach($collections as $collection)
                            <li>
                                <a href="#" data-filter=".filter-{{ $collection->slug }}" class="">{{ $collection->name }}</a>
                            </li>
                        @endforeach
                    </ul>
                </div>

            </div>

            <div id="shop-all" class="row">

                @foreach($products as $product)
                    <div class="col-xs-12 col-sm-6 col-md-3 productFilter @foreach($product->collections as $collection) filter-{{ $collection->slug }} @endforeach">
                        <div class="product-item">
                            <div class="product--img">
                                <img src="{{ $product->getFirstMediaUrl('images', 'thumbnail') }}" alt="{{ $product->name }}"/>
                                <div class="product--hover">
                                    <div class="product--action">
                                        <a href="#" class="add-to-cart" data-id="{{ $product->id }}">Kosárba rakom</a>
                                    </div>
                                </div>

                                <div class="divider--shape-1down"></div>
                            </div>

                            <div class="product--content">
{{--                                <div class="product--type">--}}
{{--                                    <span>Light</span> - <span>Mexican</span> - <span>Organic</span>--}}
{{--                                </div>--}}
                                <div class="product--title">
                                    <h3><a href="{{ $product->getProductUrl() }}">{{ $product->name }}</a></h3>
                                </div>

                                <div class="product--price">
                                    <span>{{ \App\Utils::priceForHumans($product->price) }}</span>
                                </div>

                            </div>

                        </div>
                    </div>
                @endforeach

            </div>

        </div>

    </section>


@endsection