@extends('web.layouts.container')

@section('content')
    <!----------- new images gallery ---------->
    <section class="portfolio bg-light gallery_pg bg-transparent section" id="gallery">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-4">
                    <div class="section-head side">
                        <h2 class="pg_title title half_r"> الصور</h2>
                    </div>
                </div>
                <div class="col-lg-8">
                    <ul class="nav nav-pills taps justify-content-lg-end justify-content-center" id="pills-tab" role="tablist">
                        <li class="" role="presentation">
                          <a href="#0" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">
                            <span class="border active"> الكل </span>
                          </a>
                        </li>
                        <li class="" role="presentation">
                          <a href="#0" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">
                            <span class="border">الفندق</span>
                          </a>
                        </li>
                        <li class="" role="presentation">
                          <a href="#0" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">
                            <span class="border">شقق ذوى الاحتياجات الخاصة</span>
                          </a>
                        </li>
                        <li class="" role="presentation">
                            <a href="#0" id="pills-tab4-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-tab4" aria-selected="false">
                                <span class="border">شقق عادية</span>
                            </a>
                          </li>
                      </ul>
                </div>
            </div>
            <div class="tab-content" id="pills-tabContent">
                <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                    <div class="content">
                        <div class="vid_gallery_slider">
                            <div class="swiper-container overflow-hidden position-relative pb-5">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <a href="https://nstar.b.alyomhost.org/uploads/images/636a3525851bb.jpg" data-fancybox class="items box_item p-2">
                                            <div class="img">
                                                <img src="https://nstar.b.alyomhost.org/uploads/images/636a3525851bb.jpg" alt="">
                                            </div>
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="https://nstar.b.alyomhost.org/uploads/images/636a3525851bb.jpg" data-fancybox class="items box_item p-2">
                                            <div class="img">
                                                <img src="https://nstar.b.alyomhost.org/uploads/images/636a3525851bb.jpg" alt="">
                                            </div>
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="https://nstar.b.alyomhost.org/uploads/images/636a3525851bb.jpg" data-fancybox class="items box_item p-2">
                                            <div class="img">
                                                <img src="https://nstar.b.alyomhost.org/uploads/images/636a3525851bb.jpg" alt="">
                                            </div>
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="https://nstar.b.alyomhost.org/uploads/images/636a3525851bb.jpg" data-fancybox class="items box_item p-2">
                                            <div class="img">
                                                <img src="https://nstar.b.alyomhost.org/uploads/images/636a3525851bb.jpg" alt="">
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="swiper-pagination"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                    <div class="content">
                        <div class="vid_gallery_slider">
                            <div class="swiper-container overflow-hidden position-relative pb-5">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <a href="https://nstar.b.alyomhost.org/uploads/images/636a3525851bb.jpg" data-fancybox class="items box_item p-2">
                                            <div class="img">
                                                <img src="https://nstar.b.alyomhost.org/uploads/images/636a3525851bb.jpg" alt="">
                                            </div>
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="https://nstar.b.alyomhost.org/uploads/images/636a3525851bb.jpg" data-fancybox class="items box_item p-2">
                                            <div class="img">
                                                <img src="https://nstar.b.alyomhost.org/uploads/images/636a3525851bb.jpg" alt="">
                                            </div>
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="https://nstar.b.alyomhost.org/uploads/images/636a3525851bb.jpg" data-fancybox class="items box_item p-2">
                                            <div class="img">
                                                <img src="https://nstar.b.alyomhost.org/uploads/images/636a3525851bb.jpg" alt="">
                                            </div>
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="https://nstar.b.alyomhost.org/uploads/images/636a3525851bb.jpg" data-fancybox class="items box_item p-2">
                                            <div class="img">
                                                <img src="https://nstar.b.alyomhost.org/uploads/images/636a3525851bb.jpg" alt="">
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="swiper-pagination"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!----------- end images gallery ---------->
        
        
    <section class="portfolio gallery_pg bg-transparent section img_gall" id="gallery">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-12">
                    <div class="section-head side">
                        <h2 class="pg_title title half_r"> {{__('galleries.images')}}</h2>
                    </div>
                </div>

                <div class="col-lg-12">
                    <!-- portfolio filter taps -->
                    <div class="taps text-lg-end nav justify-content-end">
                        <span class="active box_item" data-filter="all">{{__('galleries.all')}}</span>
                        @if(count($imagesGalleries))
                            @foreach($imagesGalleries as $categoryName => $imagesGallery)
                                <span class="box_item" data-filter=".images_galleries_{{$loop->iteration}}">{{$categoryName }}</span>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
            <div class="content">
                <!-- our projects -->
                <div class="row gx-0">
                    @if(count($imagesGalleries))
                        @foreach($imagesGalleries as $categoryName => $imagesGallery)
                            @foreach($imagesGallery as $imagesGall)
                                <div class="col-lg-3 mix images_galleries_{{$loop->parent->iteration}}">
                                    <a href="{{asset($imagesGall->image)}}"  data-fancybox="vid" class="items box_item p-2">
                                        <div class="img">
                                            <img src="{{asset($imagesGall->image)}}" alt="">
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        @endforeach
                    @endif
                    <!-- end projects -->
                </div>
            </div>
        </div>
    </section>
    <!-- ---------- portfolio ----------- -->
    <section class="portfolio bg-light gallery_pg section vid_gall" id="gallery">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-12">
                    <div class="section-head side">
                        <h2 class="pg_title title half_r"> {{__('galleries.videos')}}</h2>
                    </div>
                </div>
                <div class="col-lg-12">
                    <ul class="nav nav-pills taps justify-content-lg-end justify-content-center" id="pills-tab" role="tablist">
                        <li class="" role="presentation">
                            <a href="#0" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home"  role="tab" aria-controls="pills-home" aria-selected="true">
                                <span class="active"> {{__('galleries.all')}} </span>
                            </a>
                        </li>

                        @if(count($videoGalleries))
                            @foreach($videoGalleries as $categoryName => $videoGallery)
                                <li class="" role="presentation">
                                    <a href="#0" id="pills-{{$loop->iteration}}-tab" data-bs-toggle="pill" data-bs-target="#pills-{{$loop->iteration}}"  role="tab" aria-controls="pills-{{$loop->iteration}}" aria-selected="false">
                                        <span>{{$categoryName}}</span>
                                    </a>
                                </li>
                            @endforeach
                        @endif
                    </ul>
                </div>
            </div>
            <div class="tab-content" id="pills-tabContent">
                @if(count($videoGalleries))

                        <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                            <div class="content">
                                <div class="vid_gallery_slider">
                                    <div class="swiper-container overflow-hidden position-relative pb-5">
                                        <div class="swiper-wrapper">
                                            @foreach($videoGalleries as $videoGallery)
                                                @foreach($videoGallery as $gallery)
                                                    <div class="swiper-slide">
                                                        <a href="{{$gallery->video_url}}" data-fancybox class="items box_item p-2">
                                                            <div class="img">
                                                                <img src="{{asset($gallery->image)}}" alt="">
                                                                <div class="play_icon">
                                                                    <i class="bi bi-play"></i>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </div>
                                                @endforeach

                                            @endforeach
                                        </div>
                                        <div class="swiper-pagination"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    @foreach($videoGalleries as $categoryName => $videoGallery)
                            <div class="tab-pane fade" id="pills-{{$loop->iteration}}" role="tabpanel" aria-labelledby="pills-{{$loop->iteration}}-tab">
                                <div class="content">
                                    <div class="vid_gallery_slider">
                                        <div class="swiper-container overflow-hidden position-relative pb-5">
                                            <div class="swiper-wrapper">
                                                @foreach($videoGallery as $videoGall)
                                                <div class="swiper-slide">
                                                    <a href="{{$videoGall->video_url}}" data-fancybox class="items box_item p-2">
                                                        <div class="img">
                                                            <img src="{{asset($videoGall->image)}}" alt="">
                                                            <div class="play_icon">
                                                                <i class="bi bi-play"></i>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </div>
                                                @endforeach

                                            </div>
                                            <div class="swiper-pagination"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    @endforeach
                @endif
            </div>
        </div>
    </section>

@endsection

@section('inner_js')
    <script src="{{asset('assets/web/js/lib/mixitup.min.js')}}"></script>
@endsection