@extends('web.layouts.layout')

@section('content')

    <main>
        <!-- Start section -->
        <section class="gallery-pg section bg_lightblue3">
            <div class="container">
                <div class="main_inner bg-white pt-0">
                    <ul class="nav justify-content-center nav-pills mb-5" id="pills-tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="pills-tab1-tab" data-bs-toggle="pill" data-bs-target="#pills-tab1" type="button" role="tab" aria-controls="pills-tab1" aria-selected="true">
                                <img src="{{asset('assets/web/images/icons/gallery-2.svg')}}" alt="" class="icon"/> {{__('galleries.photos')}}
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-tab2-tab" data-bs-toggle="pill" data-bs-target="#pills-tab2" type="button" role="tab" aria-controls="pills-tab2" aria-selected="false">
                                <img src="{{asset('assets/web/images/icons/gallery-3.svg')}}" alt="" class="icon"/> {{__('galleries.videos')}}
                            </button>
                        </li>
                    </ul>
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-tab1" role="tabpanel" aria-labelledby="pills-tab1-tab">
                            <div class="tab_wrapper imgs_tab">
                                <div class="swiper-container imgGallery_swiper">
                                    <div class="swiper-wrapper pb-5">
                                        @foreach($chunkedPhotosGalleries as $photosGalley)
                                            <div class="swiper-slide">
                                                @foreach($photosGalley as $photoGalley)
                                                    <div class="media_card h_md">
                                                        <a href="{{ getImage($photoGalley['image']) }}" data-fancybox="images" >
                                                            <img src="{{ getImage($photoGalley['image']) }}"
                                                                 alt="{{ $photoGalley['title'] }}" class="sec-img"/>
                                                        </a>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endforeach
                                    </div>
                                    <div class="swiper-pagination"></div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="pills-tab2" role="tabpanel" aria-labelledby="pills-tab2-tab">
                            <div class="tab_wrapper vid_tab">
                                <div class="swiper-container vidGallery_swiper">
                                    <div class="swiper-wrapper pb-5">
                                        @php $videosClasses = ['col-lg-8 px-0', 'col-lg-4', 'col-lg-12 px-0'] @endphp
                                        @foreach($chunkedVideosGalleries as $videosGalleries)
                                            <div class="swiper-slide">
                                                <div class="row">
                                                    @foreach($videosGalleries as $videoGallery)
                                                        <div class="{{ $videosClasses[$loop->index] ?? 'col-lg-12' }}">
                                                            <div class="media_card h_md">
                                                                <img src="{{ getImage($videoGallery['image']) }}"
                                                                     alt="{{ $videoGallery['title'] }}" class="sec-img"/>
                                                                <a href="{{ $videoGallery['video_added_type'] == 'url' ? $videoGallery['video_url'] : asset($videoGallery['video']) }}"
                                                                   class="vid_link" data-fancybox >
                                                                    <img src="{{asset('assets/web/images/icons/video.svg')}}" alt="" class="icon filterSecondary"/>
                                                                </a>
                                                                <div class="txt_content">
                                                                    <h2 class="title text-white fw-bold zi-5">{{ $videoGallery['title'] }}</h2>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                    <div class="swiper-pagination"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

@endsection