@extends('layouts.app')
@section('content')
@if($objCategory!=null)
 <main class="cat">
    <section class="section sec-banner">
        <div class="sxs-bansc">
            <div class="sxs-bansc__bg sos-absolute before after">
                <figure class="figure media-cover"><img loading="lazy" class="lazy loaded t-opacity" alt="" src="{{$objCategoryBanner['img']}}"></figure>
                <div class="sxs-bansc__wtm absolute size-full o_ring--after"></div>
            </div>
            <div class="sxs-container sxs-bansc__con0">
                <ol class="sxs-bcrm sxs-bansc__bcrm">
                    <li class="sxs-bcrm__ite"><a href="/" data-discover="true">Inicio</a></li>
                    <li class="sxs-bcrm__ite"><span>{{$objCategoryBanner['titulo']}}</span></li>
                </ol>
                <div class="sxs-bansc__con1"><span class="sxs-icon sxs-icon--v1"><i class="icon icon-misc1 omega"></i></span>
                    <div class="sxs-bansc__con2">
                        <header class="sxs-headline sxs-bansc__hdr">
                            <h1 class="sxs-headline__tit sxs-headline__tit--shadowed sxs-headline__tit--align-start sxs-headline__tit--text-color-white sxs-headline__tit--text-weight-700 sxs-headline__tit--text-size-50">{{$objCategoryBanner['titulo']}}</h1>
                        </header>
                        <p class="sxs-bansc__des">{{$objCategoryBanner['descripcion']}}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="sections 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="true" 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" value="0">Recomendados</button></li>
                                <li class="sxs-fcdrp__ite"><button type="button" class="sxs-fcdrp__op" value="1">Precio (mayor a menor)</button></li>
                                <li class="sxs-fcdrp__ite"><button type="button" class="sxs-fcdrp__op" value="2">Precio (menor a mayor)</button></li>
                                <li class="sxs-fcdrp__ite"><button type="button" class="sxs-fcdrp__op" value="3">Nombre (A - Z)</button></li>
                                <li class="sxs-fcdrp__ite"><button type="button" class="sxs-fcdrp__op" value="4">Nombre (Z - A)</button></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <ul id="sec-main-category" class="sec-main__con2 row row--f">         
                            @foreach ($objCategory as $a)  
                   <li class="sec-main__ite col col--f">
                            <a aria-hidden="true" class="sxs-pcrd sxs-pcrd--squared" 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="{{$a['galeria'][0]['img']}}"></figure>
                                </div>
                            </a>
                            <div class="sxs-pcrd__text">
                                <a aria-hidden="true" class="sxs-pcrd sxs-pcrd--squared" href="{{ env('VITE_HTML_BASE').'productos/'.$a['url']}}">
                                    <div class="sxs-pcrd__txt">
                                        <div class="sxs-pcrd__tit">{{$a['titulo']}}</div>
                                        <div class="sxs-pcrd__pce">$ {{$a['productodetail']['precio_original']}} MXN</div>  
                                    </div>
                                </a>
                                <div class="sxs-pcrd__ftr">                                                           
                                    @if(isset($a['stock']))  
                                        @if(strlen(trim($a['stock'])) > 0 && trim($a['stock']) != "0")                                            
                                                <div class="sxs-qpckr sxs-qpckr--v1">
                                                    <button type="button" data-url="{{$a['url']}}" data-id="amt{{$a['url']}}" data-a="amt" data-tope="2" onclick=agritem(this) class="sxs-qpckr__btn" aria-label="Disminuir cantidad" aria-disabled="false"><i class="icon icon-misc1 menos"></i></button>
                                                    <div id="amt{{$a['url']}}" class="sxs-qpckr__amt" aria-live="polite" aria-atomic="true" role="status">1</div>
                                                    <button type="button" data-url="{{$a['url']}}" data-id="amt{{$a['url']}}" data-a="amt" data-tope="1" onclick=agritem(this) 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" data-url="{{$a['url']}}" data-a="amt" data-tope="1" onclick=addcard(this) 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>                                            
                                        @else
                                            <span>Agotado</span>
                                        @endif
                                    @else
                                         <span>Agotado</span>
                                    @endif 
                                </div>
                            </div>
                    </li>                                
                 @endforeach
                </ul>
            </div>
        </div>
    </section>
</main>
@endif
@endsection