@extends('site.app')
@section('pageTitle', __('menu.business'))
@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="Inicio">{{__('menu.home')}}</a></span>
                        <a href="{{route('site.units.index')}}" title="Unidades de negocio">{{__('menu.business')}}</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">
                            @if ($category && $category->subcategories->isNotEmpty())
                                @foreach ($categories as $category)
                                    <li>
                                        <h4>{{$category->transName}}</h4>
                                        <ul>
                                            @foreach ($category->subcategories as $subcategory)
                                                <li>
                                                    <a href="{{route('site.units.detail', $subcategory->slug)}}" title="{{$subcategory->transName}}" rel="nofollow">
                                                        <div class="subm-bg">
                                                            <img src="{{$subcategory->coverBanner}}" alt="{{$subcategory->transName}}">
                                                        </div>
                                                        <span>{{$subcategory->transName}}</span>
                                                    </a>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </li>
                                @endforeach
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@if ($activeSubcategory)
    <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="{{ $activeSubcategory->cover }}" width="285" alt="{{ $activeSubcategory->name }}" />
                        @if ($activeSubcategory->facebook || $activeSubcategory->link || $activeSubcategory->instagram || $activeSubcategory->twitter || $activeSubcategory->linkedin || $activeSubcategory->tiktok || $activeSubcategory->youtube)
                            <div class="uni-side-redes hidden-xs hidden-sm">
                                <h4>{{__('home.rrss')}}</h4>
                                @if ($activeSubcategory->facebook)
                                    <a href="{{ $activeSubcategory->facebook }}" target="_blank"><span><i class="fab fa-facebook"></i></span></a>
                                @endif
                                @if ($activeSubcategory->instagram)
                                    <a href="{{ $activeSubcategory->instagram }}" target="_blank"><span><i class="fab fa-instagram"></i></span></a>
                                @endif
                                @if ($activeSubcategory->twitter)
                                    <a href="{{ $activeSubcategory->twitter }}" target="_blank"><span><i class="fab fa-twitter"></i></span></a>
                                @endif
                                @if ($activeSubcategory->linkedin)
                                    <a href="{{ $activeSubcategory->linkedin }}" target="_blank"><span><i class="fab fa-linkedin"></i></span></a>
                                @endif
                                @if ($activeSubcategory->link)
                                    <a href="{{ $activeSubcategory->link }}" target="_blank"><span><i class="fa fa-globe"></i></span></a>
                                @endif
                                @if ($activeSubcategory->youtube)
                                    <a href="{{ $activeSubcategory->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>{{$activeSubcategory->transName}}</h3>
                        {!! $activeSubcategory->transContent !!}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <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>{{__('business.brands')}}</h3>
                        </div>
                        <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 ($activeBrands as $brand)
                                                <li class="{{ $loop->first ? 'active' : '' }}">
                                                    <a href="#{{ $brand->slug }}" rel="nofollow" data-toggle="tab">{{ $brand->transName }}</a>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                    @foreach ($activeBrands as $brand)
                                        @if ($brand->facebook || $brand->link || $brand->instagram || $brand->twitter || $brand->linkedin || $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 ($activeBrands 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 ($activeBrands 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>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <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 ($activeSubcategory->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="{{$activeSubcategory->transName}}">
                                            </div>
                                            <div class="single-tab-content">
                                                <a data-fancybox="images-{{$activeSubcategory->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>
@else
<h4 class="col-lg-offset-1">No hay unidades de negocios activos</h4>
@endif

@endsection

@push('scripts')
<script>
    // Agregar un controlador de eventos para cada pestaña de marca
    document.querySelectorAll('.unidades-tabss a').forEach(tab => {
        tab.addEventListener('click', function(event) {
            event.preventDefault(); // Evita el comportamiento predeterminado de la pestaña

            // Oculta todas las redes sociales de las marcas
            document.querySelectorAll('.brand-socials-container:not(:first-child)').forEach(container => {
                container.classList.add('hidden');
            });

            // Muestra las redes sociales de la marca correspondiente
            const targetSlug = this.getAttribute('href').replace('#', '');
            document.querySelector(`.brand-socials-container[data-brand-slug="${targetSlug}"]`).classList.remove('hidden');
        });
    });
</script>
@endpush