@extends('site.app')
@section('pageTitle', $subcategory->meta_title)
@section('metaDescription', $subcategory->meta_description)
@section('metaKeywords', $subcategory->meta_keywords)
@section('otherMetas')
    <link rel="canonical" href="{{route('site.units.detail', $subcategory->slug)}}" />
    <meta property="og:title" content="{{$subcategory->name}}">
    <meta property="og:description" content="{{$subcategory->meta_description}}">
    <meta property="og:image" content="{{url('/') . $subcategory->cover}}" />
    <meta property="og:type" content="article" />
	<meta property="og:url" content="{{route('site.units.detail', $subcategory->slug)}}" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="{{ $subcategory->name }}" />
    <meta name="twitter:description" content="{{ $subcategory->meta_description }}" />
    <meta name="twitter:image" content="{{url('/') . $subcategory->cover}}" />
@endsection
@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="{{__('menu.home')}}">{{__('menu.home')}}</a></span>
                        <a href="{{route('site.products.index')}}" title="{{__('product.name')}}">{{__('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="UNIDADES DE NEGOCIO">
                            @foreach ($categories as $category)
                                <li>
                                    <h4>{{$category->transName}}</h4>
                                    <ul>
                                        @foreach ($category->subcategoryproducts as $sub)
                                            <li @if(Request::url() == route('site.products.detail', $sub->slug)) class="active" @endif>
                                                <a href="{{route('site.products.detail', $sub->slug)}}" title="{{$sub->transName}}" rel="nofollow">
                                                    <div class="subm-bg">
                                                        <img src="{{$sub->cover}}" alt="{{$sub->transName}}">
                                                    </div>
                                                    <span>{{$sub->transName}}</span>
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<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 ($subcategory->products as $product)
            <div class="col-lg-3 sameHeight mb-5">
                <div class="img-container  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>


@endsection