@extends('site.app')
@section('pageTitle', __('menu.products'))
@section('content')
<!-- BANNER AREA -->
@if (isset($banner) && $banner->image)
    <div class="unidades-banner-area" style="background-image: url('/assets/images/banners/{{$banner->image}}');">
        <div class="container">
            <div class="row">
                <div class="col-lg-11 col-lg-offset-1 col-xs-12">
                    <div class="unidades-text cmn-style">
                        <h2>{{__('product.name')}}</h2>
                        <span><a href="{{route('site.index')}}" title="Inicio">{{__('menu.home')}}</a></span>
                        <a href="{{route('site.products.index')}}" title="Unidades de negocio">{{__('product.name')}}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif

<div class="unidades-text-area">
    <div class="container">
        <div class="row">
            <div class="col-lg-11 col-lg-offset-1 col-xs-12">
                <div class="unidades-title">
                    <h2>{{__('product.type')}}</h2>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="unidads-area">
    <div class="u-menu-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-11 col-lg-offset-1 col-xs-12">
                    <!-- Unidades Menu -->
                    <div class="unidades-mobile-menu"></div>
                    <div class="unidades-menu">
                        <ul id="unidades-menu" data-title="PRODUCTOS">
                            @foreach ($categories as $category)
                                <li>
                                    <h4>{{$category->transName}}</h4>
                                    <ul>
                                        @foreach ($category->subcategoryproducts as $subcategoryproducts)
                                            <li>
                                                <a href="{{route('site.products.detail', $subcategoryproducts->slug)}}" title="{{$subcategoryproducts->transName}}" rel="nofollow">
                                                    <div class="subm-bg">
                                                        <img src="{{$subcategoryproducts->cover}}" alt="{{$subcategoryproducts->transName}}">
                                                    </div>
                                                    <span>{{$subcategoryproducts->transName}}</span>
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@if ($activeSubcategory)

<div class="u-la-cca">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-sm-7 col-xs-12 sameHeight col-lg-offset-1">
                <div class="uni-cca-text">
                    <h4>{!!$categoryProduct->transContent!!}</h4>
                </div>
            </div>
        </div>
    </div>
</div>

    <div class="u-marcas">
        <div class="container">
            <div class="row">
                <div class="col-lg-11 col-lg-offset-1 col-xs-12">
                    <div class="marcas-area">
                        <div class="marcas-title">
                            <h3>{{__('product.our')}}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row col-lg-offset-1">
            @foreach ($activeSubcategory->products as $product)
                <div class="col-lg-3 sameHeight mb-5">
                    <div class=" mb-2">
                        <img src="{{$product->cover}}" alt="{{$product->transName}}" >
                    </div>
                    <div class="text-container mb-5">
                        <p><strong>{{$product->transName}}</strong></p>
                        <span>{{$product->transContent}}</span>
                    </div>
                    <div class="uni-cca-img sameHeight text-center">
                        @if ($product->facebook || $product->link || $product->linkedin || $product->instagram || $product->twitter || $product->tiktok || $product->youtube)
                            <div class="uni-side-redes hidden-xs hidden-sm brand-socials-container">
                                @if ($product->facebook)
                                    <a href="{{ $product->facebook }}" target="_blank"><span><i class="fab fa-facebook"></i></span></a>
                                @endif
                                @if ($product->instagram)
                                    <a href="{{ $product->instagram }}" target="_blank"><span><i class="fab fa-instagram"></i></span></a>
                                @endif
                                @if ($product->twitter)
                                    <a href="{{ $product->twitter }}" target="_blank"><span><i class="fab fa-twitter"></i></span></a>
                                @endif
                                @if ($product->linkedin)
                                    <a href="{{ $product->linkedin }}" target="_blank"><span><i class="fab fa-linkedin"></i></span></a>
                                @endif
                                @if ($product->link)
                                    <a href="{{ $product->link }}" target="_blank"><span><i class="fa fa-globe"></i></span></a>
                                @endif
                                @if ($product->youtube)
                                    <a href="{{ $product->youtube }}" target="_blank"><span><i class="fab fa-youtube"></i></span></a>
                                @endif
                            </div>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    </div>
    @else
    <h4 class="col-lg-offset-1">No hay productos activos</h4>
@endif

@endsection