@extends('layouts.frontend')

@section('title', $page->post->title ?? $category->title ?? 'Shop')

@section('content')
    <article id="shop">
        <div class="breadcrumb">
            <div class="container d-flex align-items-center">
                <a href="{{ url('/') }}">Inicio</a>
                <span>@yield('title')</span>
            </div>
        </div>
        <section>
            <div class="container">
                <div class="row row-grid flex-row-reverse flex-lg-row">
                    <div class="col-lg-3">
                        <aside class="sidebar">
                            <h3>Productos</h3>
                            <div class="products">
                                <ul class="list-unstyled">
                                    @foreach($latest_products as $product)
                                        <li>
                                            <div class="row row-grid row-grid-small align-items-center">
                                                <div class="col-4">
                                                    <a href="{{ route('product', $product->post->slug) }}">
                                                        <div class="img-holder img-full">
                                                            @if($product->thumbnail)
                                                                <img src="{{ asset($product->thumbnail) }}" alt="" class="cover">
                                                            @endif
                                                        </div>
                                                    </a>
                                                </div>
                                                <div class="col-8">
                                                    <h4>
                                                        <a href="{{ route('product', $product->post->slug) }}">{{ $product->post->title }}</a>
                                                    </h4>
                                                    <h5>{{ num_format($product->price) }}</h5>
                                                </div>
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                            <h3>Categorías</h3>
                            <ul class="list-unstyled">
                                @foreach($categories as $category)
                                    <li>
                                        <a href="#">{{ $category->title }} <sup>{{ $category->products_count }}</sup></a>
                                    </li>
                                @endforeach
                            </ul>
                            <h3>Etiquetas</h3>
                            <div class="tags">
                                <div class="row row-grid row-grid-small">
                                    @foreach($tags as $tag)
                                        <div class="col-auto">
                                            <a href="#">{{ $tag }}</a>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </aside>
                    </div>
                    <div class="col-lg-9">
                        <div class="row row-grid row-grid-small">
                            @foreach($products as $product)
                                <div class="col-lg-3 col-md-4 col-6">
                                    @include('partials.card', ['class' => 'card-sm'])
                                </div>
                            @endforeach
                            <div class="col-12">
                                {!! $products !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </article>
@endsection
