@php

$images = [];
$videos = [];

if(is_array($infoAsso['fotos'])){
    $images = array_filter($infoAsso['fotos'], function ($var) {
        return $var['tipus'] == 'foto';
    });

    $videos = array_filter($infoAsso['fotos'], function ($var) {
        return $var['tipus'] == 'video_youtube';
    });
}

@endphp

@extends('frontend.layouts.master')

@section('page_title')
    {{ __('about.title') }}
@endsection

@section('head')
@endsection

@section('content-wrapper')
    @if(view()->exists('tenants.' . $currentCompany->code . '.frontend.about-us.portada' ))

        @include('tenants.' . $currentCompany->code . '.frontend.about-us.portada')    

    @else

        <div class="py-5 text-center align-items-center d-flex portada jarallax" style="">
            <div class="tinte2"></div>
            <div class="container py-5">
                <div class="row text-center">
                    <div class="col-lg-12 col-md-12 col-12 col-sm-12">
                        <h1 class="display-4 mb-4 text-white">
                            {{ __('about.title') }}
                        </h1>
                    </div>
                </div>
            </div>
        </div>
        
    @endif
    
    
    <nav aria-label="breadcrumb text-center">
        <ol class="breadcrumb d-flex justify-content-center">
            <li class="breadcrumb-item s-text"><a href="{{ route('frontend.home.index') }}">{{ __('frontend-menu.home') }}</a></li>
            <li class="breadcrumb-item s-text active" aria-current="page">{{ __('frontend-menu.about-us') }}</li>
        </ol>
    </nav>
    
    <div class="container info_desc_page-about-us">
        <div class="row m-4 pt-3">

            {!! $infoAsso['info_desc'] !!}

        </div>
    </div>

    <div class="container">
        @if(count($images))
        <div class="row mt-4">
            <div class="card w-100 text-center">
                <div class="card-body">

                    <div class="lightbox-gallery">
                        <div class="container">
                            <div class="row photos d-flex justify-content-center">

                                @foreach($images as $image)
                                    <div class="col-sm-6 col-md-4 col-lg-3 mb-2 item">
                                        <a href="{{ $currentCompany->moneder_intranet }}/uploads/botiga/{{ $image['nom'] }}" data-lightbox="photos">
                                            <img class="img-fluid" src="{{ $currentCompany->moneder_intranet }}/uploads/botiga/{{ $image['nom'] }}">
                                        </a>
                                    </div>
                                @endforeach
                                
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        @endif

        @if(count($videos))
        <div class="row mt-4 mb-5">
            <div class="card w-100 text-center">
                <div class="card-body">
                    @foreach($videos as $video)
                    <div class="mt-4">
                        <iframe width="100%" height="315" src="https://www.youtube.com/embed/{{ $video['nom'] }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                    </div>
                    @endforeach

                </div>
            </div>
        </div>
        @endif
    </div>

@endsection