@extends('layouts.app')
@section('content')
@if($objProducts!=null)
<main class="products">
    <section class="section sec-main">
        <div class="sec-main__con0 o_ring--before o_ring--after">
            <div class="sxs-container sec-main__con1">
                <div class="sec-main__fct">
                    <div aria-hidden="false" class="sxs-fcdrp sec-main__fct-fct"><button type="button" class="sxs-fcdrp__btn"><span class="sxs-fcdrp__tit">Ordenar por</span><span class="sxs-fcdrp__icon"><i class="icon icon-flecha1 abajo"></i></span></button>
                        <div class="sxs-fcdrp__drp" style="height: 0px;">
                            <ul class="sxs-fcdrp__lis">
                                <li class="sxs-fcdrp__ite"><button type="button" class="sxs-fcdrp__op active">Recomendados</button></li>
                                <li class="sxs-fcdrp__ite"><button type="button" class="sxs-fcdrp__op">Precio (mayor a menor)</button></li>
                                <li class="sxs-fcdrp__ite"><button type="button" class="sxs-fcdrp__op">Precio (menor a mayor)</button></li>
                                <li class="sxs-fcdrp__ite"><button type="button" class="sxs-fcdrp__op">Nombre (A - Z)</button></li>
                                <li class="sxs-fcdrp__ite"><button type="button" class="sxs-fcdrp__op">Nombre (Z - A)</button></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <ul class="sec-main__con2 row row--f">
                    @foreach($objProducts as $a)
                    <li class="sec-main__ite col col--f"><a aria-hidden="false" class="sxs-pcrd" href="{{env('VITE_HTML_BASE').'productos/'.$a['url']}}">
                            <div class="sxs-pcrd__samp"><span class="sxs-pcrd__samp-wtm-1"></span><span class="sxs-pcrd__samp-wtm-2"></span>
                                <figure class="figure media-con media-cover"><img loading="lazy" alt="" class="lazy loaded t-opacity" src="{{(isset($a['galeria'][0]['img'])?$a['galeria'][0]['img']:'')}}"></figure>
                            </div>
                            <div class="sxs-pcrd__text">
                                <div class="sxs-pcrd__txt">
                                    <div class="sxs-pcrd__tit">{{$a['titulo']}}</div>
                                    <div class="sxs-pcrd__pce">{{$a['precio_original']}} MXN</div>
                                </div>
                                <div class="sxs-pcrd__ftr">
                                    <div class="sxs-qpckr sxs-qpckr--v1"><button type="button" class="sxs-qpckr__btn" aria-label="Disminuir cantidad" aria-disabled="false"><i class="icon icon-misc1 menos"></i></button>
                                        <div class="sxs-qpckr__amt" aria-live="polite" aria-atomic="true" role="status">1</div><button type="button" class="sxs-qpckr__btn" aria-label="Aumentar cantidad"><i class="icon icon-misc1 mas"></i></button>
                                    </div>
                                      @php $class = ($a['es_verde'] == true?" sxs-btn--style-bg-green sxs-pcrd__btn":" sxs-pcrd__btn"); @endphp
                                    <button type="button" aria-hidden="false" class="sxs-btn sxs-btn--primary sxs-btn--style-primary {{$class}}">
                                        <div class="sxs-btn__con0"><span class="sxs-btn__wv"></span>
                                            <div class="sxs-btn__con1">
                                                <div class="sxs-btn__con2"><span class=""><span class="sas-bs" style="--sas-idx: 0;">A</span><span class="sas-bs" style="--sas-idx: 1;">g</span><span class="sas-bs" style="--sas-idx: 2;">r</span><span class="sas-bs" style="--sas-idx: 3;">e</span><span class="sas-bs" style="--sas-idx: 4;">g</span><span class="sas-bs" style="--sas-idx: 5;">a</span><span class="sas-bs" style="--sas-idx: 6;">r</span></span></div>
                                                <div class="sxs-btn__con2"><span class=""><span class="sas-bs" style="--sas-idx: 0;">A</span><span class="sas-bs" style="--sas-idx: 1;">g</span><span class="sas-bs" style="--sas-idx: 2;">r</span><span class="sas-bs" style="--sas-idx: 3;">e</span><span class="sas-bs" style="--sas-idx: 4;">g</span><span class="sas-bs" style="--sas-idx: 5;">a</span><span class="sas-bs" style="--sas-idx: 6;">r</span></span></div>
                                            </div>
                                        </div>
                                    </button>
                                </div>
                            </div>
                        </a></li>
                    @endforeach
                </ul>
            </div>
        </div>
    </section>
</main>
@else
@if($objProductsSearch!=null)
<main class="products">
    <section class="section sec-main">
        <div class="sec-main__con0 o_ring--before o_ring--after">
            <div class="sxs-container sec-main__con1">                
                @php echo html_entity_decode($objProductsSearch) @endphp
            </div>
        </div>
    </section>
</main>
@endif
@endif
@endsection