@extends('layouts.app')

@section('seoheader')
    {!! $seo ?? '' !!}
@endsection


@section('content')

@include('utils.preloader')

@include('layouts.header')


<section class="shop-area">
    <div class="container-fluid custom-container">
        <div class="row flex-md-row-reverse justify-content-end">

            <div class="col-lg-12">

                <div class="banner-image banner-2 mt-1">
                    <img class="" src="{{ $bannertop->multimedia_url }}" alt="banner">
                </div>

                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="grid" role="tabpanel" aria-labelledby="grid-tab" style="max-height: 2325px;overflow:auto;">
                        <div class="row">
                            @forelse ($products as $prod)
                                <div class="product-col col-md-2 col-sm-3">
                                    <div class="single-product mt-1">
                                        <div class="product-image">
                                            <a href="{{ route('combo', ['q' => $prod->title]) }}">
                                                <img class="first-image " src="{{ $prod->images[0]->rm_url }}" alt="product">
                                            </a>
                                        </div>
                                        <div class="product-content">
                                            <ul class="product-rating">
                                                <li class="{{ ($prod->average_rate < 2) ? '': 'rating-on' }}" ><i class="fas fa-star"></i></li>
                                                <li class="{{ ($prod->average_rate < 3) ? '': 'rating-on' }}"><i class="fas fa-star"></i></li>
                                                <li class="{{ ($prod->average_rate < 4) ? '': 'rating-on' }}"><i class="fas fa-star"></i></li>
                                                <li class="{{ ($prod->average_rate < 5) ? '': 'rating-on' }}"><i class="fas fa-star"></i></li>
                                                <li class="{{ ($prod->average_rate < 6) ? '': 'rating-on' }}"><i class="fas fa-star"></i></li>
                                            </ul>
                                            <h4 class="product-title">
                                                <a class="font-weight-bold">
                                                    {{$prod->title}}
                                                </a>
                                            </h4>
                                            <div class="product-price">
                                                <span class="price-sale">
                                                    ${{ number_format($prod->detail->price, 2, '.', ' ') }} -
                                                    S/{{ number_format(($prod->detail->price * $configGeneral->cambio), 2, '.', ' ') }}
                                                </span>
                                            </div>
                                        </div>
                                    </div> <!-- single product -->
                                </div>
                            @empty
                            <div class="col-md-12 text-center">
                                <h2 class="bg-light text-muted p-5">NO HAY REGISTROS EN LA BUSQUEDA</h2>
                            </div>
                            @endforelse
                        </div> <!-- row -->
                    </div>
                </div> <!-- Tab Content -->
                <div class="row" style="background:#f2f2f2;">
                    <div class="col-md-5 p-0"></div>
                    <div class="col-md-6 p-0">{{ $products->withQueryString('pagination::custom') }}</div>
                    <div class="col-md-1 p-0"></div>
                </div>
            </div>
        </div> <!-- row -->
    </div> <!-- container -->
</section>

@include('layouts.brand')

@include('layouts.newsletter')

@include('layouts.footer')

@include('utils.backtop')

@endsection