@extends('layouts.app')

@section('page-title')
    Nos lunettes
@stop

@section('content')
<section id="products-category" class="cover" style="height:450px;background-position:50% 10%;background-image:url({{$cover}});"></section>
@include('includes.breadcrumb')
<section id="products-list" class="container">
    <div class="wrapper">
        <h3 class="heading mb-3">{{$title}}</h3>
        <div id="products-filter">
            <div class="filter-nb-items">8 lunettes trouvées</div>
            <div class="filter-method">
                <div class="filter-method-trigger">Trier par <i class="fa fa-sort-desc float-right" aria-hidden="true"></i></div>
                <ul class="filter-method-list">
                    <li class="active"><a href="" class="link link-black">Prix croissants</a></li>
                    <li><a href="" class="link link-black">Prix décroissants</a></li>
                    <li><a href="" class="link link-black">Nouveautés</a></li>
                </ul>
            </div>
            <div id="form-product-filter" class="mt-1 clearfix">
                <nav class="filter-nav">
                    <p>Filtrer par :</p>
                    <ul>
                        <li class="active"><a class="link">Genre</a></li>
                        <li><a class="link">Prix</a></li>
                        <li><a class="link">Marque</a></li>
                    </ul>
                </nav>
                <div class="filter-body" style="display:none;">
                    <div class="hr mb-2"></div>
                    <div id="gender-filter" class="clearfix">
                        <button class="btn btn-grey mr-3"><i class="fa fa-mars" aria-hidden="true"></i></button>
                        <button class="btn btn-grey"><i class="fa fa-venus" aria-hidden="true"></i></button>
                    </div>
                    <div id="price-filter" class="clearfix">
                        <input type="range">
                    </div>
                </div>
            </div>
        </div>
        <div class="hr mb-2"></div>
        <div class="grid grid-3 grid-m-3 clearfix">
            @for($i = 0; $i < 12; $i++)
            @foreach($products as $product)
            <div class="cell cell-4">
                <div class="product mb-3">
                    <div class="product-visuals">
                        @foreach($product['colors'] as $color)
                        <figure class="flex flex-vertical-center product-figure">
                            <img src="{{$color['images'][0]}}" alt="{{$product['name']}}">
                        </figure>
                        @endforeach
                    </div>
                    <div class="clearfix mb-1">
                        <div class="float-left product-brand">{{$product['brand']}}</div>
                        <div class="float-right product-action align-right">
                            <a href="#" title="Ajouter aux favoris" class="action-favorite"><i aria-hidden="true" class="fa fa-heart"></i></a>
                        </div>
                    </div>
                    <div class="clearfix">
                        <div class="float-left product-name">{{$product['name']}}</div>
                        <div class="float-right product-price align-right">{{$product['price']}}€</div>
                    </div>

                    <footer class="product-footer">
                        <div class="hr mt-2 mb-2"></div>

                        <ul class="product-colors">
                            @foreach($product['colors'] as $color)
                            <li class="active" style="background-color:{{$color['hex']}};"></li>
                            @endforeach
                        </ul>
                    </footer>
                </div>
            </div>
            @endforeach
            @endfor
        </div>

        <footer class="products-footer mt-3">
            <ul class="pagination float-right">
                <li class="active"><a href="{{ URL::to($type.'?page=1') }}">1</a></li>
                <li><a href="{{ URL::to($type.'?page=2') }}">2</a></li>
                <li><a href="{{ URL::to($type.'?page=3') }}">3</a></li>
                <li><a href="{{ URL::to($type.'?page=4') }}">4</a></li>
                <li><a href="{{ URL::to($type.'?page=5') }}">5</a></li>
            </ul>
        </footer>
    </div>
</section>
@stop