@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>{{__('menu.business')}}</h2>
                        <span><a href="{{route('site.index')}}" title="{{__('menu.home')}}">{{__('menu.home')}}</a></span>
                        <span><a href="{{route('site.units.index')}}" title="{{__('menu.business')}}">{{__('menu.business')}}</a></span>
                        <a href="#" title="{{$subcategory->transName}}">{{$subcategory->transName}}</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>{{__('menu.business')}}</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->subcategories as $sub)
                                            <li @if(Request::url() == route('site.units.detail', $sub->slug)) class="active" @endif>
                                                <a href="{{route('site.units.detail', $sub->slug)}}" title="{{$sub->transName}}" rel="nofollow">
                                                    <div class="subm-bg">
                                                        <img src="{{$sub->coverBanner}}" 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-4 col-lg-offset-1 col-sm-5 col-xs-12">
                <div class="uni-cca-img sameHeight">
                    <img src="{{ $subcategory->cover }}" width="285" alt="{{ $subcategory->transName }}" />
                    @if ($subcategory->facebook || $subcategory->link || $subcategory->linkedin || $subcategory->instagram || $subcategory->twitter || $subcategory->tiktok || $subcategory->youtube)
                        <div class="uni-side-redes hidden-xs hidden-sm brand-socials-container">
                            <h4>{{__('home.rrss')}}</h4>
                            @if ($subcategory->facebook)
                                <a href="{{ $subcategory->facebook }}" target="_blank"><span><i class="fab fa-facebook"></i></span></a>
                            @endif
                            @if ($subcategory->instagram)
                                <a href="{{ $subcategory->instagram }}" target="_blank"><span><i class="fab fa-instagram"></i></span></a>
                            @endif
                            @if ($subcategory->twitter)
                                <a href="{{ $subcategory->twitter }}" target="_blank"><span><i class="fab fa-twitter"></i></span></a>
                            @endif
                            @if ($subcategory->linkedin)
                                <a href="{{ $subcategory->linkedin }}" target="_blank"><span><i class="fab fa-linkedin"></i></span></a>
                            @endif
                            @if ($subcategory->link)
                                <a href="{{ $subcategory->link }}" target="_blank"><span><i class="fa fa-globe"></i></span></a>
                            @endif
                            @if ($subcategory->youtube)
                                <a href="{{ $subcategory->youtube }}" target="_blank"><span><i class="fab fa-youtube"></i></span></a>
                            @endif
                        </div>
                    @endif
                </div>
            </div>
            <div class="col-lg-7 col-sm-7 col-xs-12 sameHeight">
                <div class="uni-cca-text">
                    <h3>{{$subcategory->transName}}</h3>
                    {!! $subcategory->transContent !!}
                </div>
            </div>
        </div>
    </div>
</div>

@if ($subcategory->brands->isNotEmpty())
<div class="u-marcas">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="marcas-area">
                    <div class="marcas-title col-lg-offset-1">
                        <h3>{{$subcategory->section}}</h3>
                    </div>
                    @if ($subcategory->type == 1)
                        <div class="row col-lg-offset-1">
                            <div class="col-lg-4 col-xs-4 pl-0">
                                <div class="unidades-tabs-area">
                                    <div class="unidades-tabss ">
                                        <ul>
                                            @foreach ($subcategory->brands as $brand)
                                                <li class="{{ $loop->first ? 'active' : '' }}">
                                                    <a href="#{{ $brand->slug }}" rel="nofollow" data-toggle="tab">{{ $brand->transName }}</a>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                    <!-- Redes Sociales de las Marcas -->
                                    @foreach ($subcategory->brands as $brand)
                                        @if ($brand->facebook || $brand->link || $brand->linkedin || $brand->instagram || $brand->twitter || $brand->tiktok || $brand->youtube)
                                            <div class="uni-side-redes hidden-xs hidden-sm brand-socials-container {{ $loop->first ? '' : 'hidden' }}" data-brand-slug="{{ $brand->slug }}">
                                                <h4>{{__('home.rrss')}}</h4>
                                                @if ($brand->facebook)
                                                    <a href="{{ $brand->facebook }}" target="_blank"><span><i class="fab fa-facebook"></i></span></a>
                                                @endif
                                                @if ($brand->instagram)
                                                    <a href="{{ $brand->instagram }}" target="_blank"><span><i class="fab fa-instagram"></i></span></a>
                                                @endif
                                                @if ($brand->twitter)
                                                    <a href="{{ $brand->twitter }}" target="_blank"><span><i class="fab fa-twitter"></i></span></a>
                                                @endif
                                                @if ($brand->linkedin)
                                                    <a href="{{ $brand->linkedin }}" target="_blank"><span><i class="fab fa-linkedin"></i></span></a>
                                                @endif
                                                @if ($brand->link)
                                                    <a href="{{ $brand->link }}" target="_blank"><span><i class="fa fa-globe"></i></span></a>
                                                @endif
                                                @if ($brand->youtube)
                                                    <a href="{{ $brand->youtube }}" target="_blank"><span><i class="fab fa-youtube"></i></span></a>
                                                @endif
                                            </div>
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                            <div class="col-lg-8 col-xs-8">
                                <div class="tab-content">
                                    @foreach ($subcategory->brands as $brand)
                                    <div id="{{ $brand->slug }}" class="tab-pane {{ $loop->first ? 'active' : '' }}">
                                        <div class="d-flex">
                                            <div class="row">
                                                @foreach ($brand->imagens as $image)
                                                    <div class="col-lg-6 mb-5">
                                                        <div class="single-tab">
                                                            <div class="tab-border"></div>
                                                            <div class="tab-overlay"></div>
                                                            <div class="single-tab-img">
                                                                <img src="/assets/images/brands/galleries/original/{{$image->name}}" alt="{{ $brand->transName }}" style="height: 215px;">
                                                            </div>
                                                            <div class="single-tab-content">
                                                                <h4>{{ $brand->transName }}</h4>
                                                                <a data-fancybox data-src="#unitab-{{ $brand->slug }}" href="javascript:;" rel="nofollow">{{__('home.news_view_more')}}</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                    <!-- Single lightbox -->
                                    <div class="uni-tab-light-box-area">
                                        @foreach ($subcategory->brands as $brand)
                                        <div class="uni-tab-light-box">
                                            <div style="display: none;" id="unitab-{{ $brand->slug }}">
                                                <img src="{{ $brand->bonner }}" alt="{{ $brand->transName }}">
                                                <h2>{{ $brand->transName }}</h2>
                                                <img src="{{ $brand->cover }}" alt="{{ $brand->transName }}">
                                                <br>
                                                {!! $brand->transContent !!}
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>

                                </div>
                            </div>
                        </div>
                    @elseif ($subcategory->type == 2)
                        <div class="row col-lg-offset-1">
                            <div class="uni-emcesa">
                                @foreach ($subcategory->brands as $brand)
                                    <div class="col-xs-6 col-md-6 col-lg-4">
                                        <div>
                                            <img src="{{$brand->cover}}" alt="{{$brand->transName}}">
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endif

<div class="u-marcas u-gallery">
    <div class="container">
        <!-- Galería -->
        <div class="row">
            <div class="col-lg-11 col-lg-offset-1 col-xs-12">
                <div class="marcas-area">
                    <div class="marcas-title">
                        <h3>{{__('business.gallery')}}</h3>
                    </div>
                    <div class="gallery-items">
                        <div class="row">
                            @foreach ($subcategory->imagens as $imagen)
                                <div class="col-sm-12 col-md-6 col-lg-6">
                                    <div class="single-tab">
                                        <div class="tab-border"></div>
                                        <div class="tab-overlay"></div>
                                        <div class="single-tab-img">
                                            <img src="/assets/images/subcategories/original/{{$imagen->name}}" height="270" alt="{{$subcategory->transName}}">
                                        </div>
                                        <div class="single-tab-content">
                                            <a data-fancybox="images-{{$subcategory->slug}}" data-src="/assets/images/subcategories/original/{{$imagen->name}}" href="javascript:;"><i class="fa fa-search-plus" aria-hidden="true"></i> {{__('business.galery_extend')}}</a>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    document.querySelectorAll('.unidades-tabss a').forEach(tab => {
        tab.addEventListener('click', function(event) {
            event.preventDefault();
            document.querySelectorAll('.brand-socials-container:not(:first-child)').forEach(container => {
                container.classList.add('hidden');
            });
            const targetSlug = this.getAttribute('href').replace('#', '');
            document.querySelector(`.brand-socials-container[data-brand-slug="${targetSlug}"]`).classList.remove('hidden');
        });
    });
</script>
@endpush