@extends('web.layouts.container')

@section('content')
    <section class="media-pg section">
        <div class="container">
            <ul class="nav 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/icon.svg')}}" alt="" class="icon"/> {{__('galleries.all')}}--}}
{{--                    </button>--}}
{{--                </li>--}}
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="pills-tab2-tab" data-bs-toggle="pill" data-bs-target="#pills-tab2" type="button" role="tab" aria-controls="pills-tab2" aria-selected="true">
                        <i class="bi bi-camera d-block fs-5"></i> {{__('galleries.image_type')}}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-tab3-tab" data-bs-toggle="pill" data-bs-target="#pills-tab3" type="button" role="tab" aria-controls="pills-tab3" aria-selected="false">
                        <i class="bi bi-camera-video d-block fs-5"></i> {{__('galleries.video_type')}}
                    </button>
                </li>
{{--                <li class="nav-item" role="presentation">--}}
{{--                    <button class="nav-link" id="pills-tab4-tab" data-bs-toggle="pill" data-bs-target="#pills-tab4" type="button" role="tab" aria-controls="pills-tab4" aria-selected="false">--}}
{{--                        <i class="bi bi-newspaper d-block fs-5"></i> {{__('galleries.magazine_type')}}--}}
{{--                    </button>--}}
{{--                </li>--}}
            </ul>
            <div class="tab-content" id="pills-tabContent">
                {{-- All media --}}
{{--                <div class="tab-pane fade show active" id="pills-tab1" role="tabpanel" aria-labelledby="pills-tab1-tab">--}}
{{--                    <div class="tab_wrapper mb-4">--}}
{{--                        <div class="row">--}}
{{--                            @if(count($galleries['image_type']))--}}
{{--                                @foreach($galleries['image_type'] as $imageType)--}}
{{--                                    <div class="col-lg-{{$loop->iteration == 1 ? '12' : '3'}}">--}}
{{--                                        <a href="{{asset($imageType['image'])}}" data-fancybox>--}}
{{--                                            <div class="media_card {{$loop->iteration == 1 ? 'lg_card' : ''}}">--}}
{{--                                                <img src="{{asset($imageType['image'])}}" alt="" class="sec-img"/>--}}
{{--                                            </div>--}}
{{--                                        </a>--}}
{{--                                    </div>--}}
{{--                                @endforeach--}}
{{--                            @endif--}}
{{--                        </div>--}}
{{--                    </div>--}}

{{--                    <!------->--}}
{{--                    <div class="tab_wrapper mb-4">--}}
{{--                        <div class="row">--}}
{{--                            @if(count($galleries['video_type']))--}}
{{--                                @foreach($galleries['video_type'] as $videoType)--}}
{{--                                    <div class="col-lg-{{$loop->iteration == 1 ? '12' : '3'}}">--}}
{{--                                        <a href="{{$videoType['video_url']}}" data-fancybox>--}}
{{--                                            <div class="media_card {{$loop->iteration == 1 ? 'lg_card' : ''}}">--}}
{{--                                                <img src="{{asset($videoType['image'])}}" alt="" class="sec-img"/>--}}
{{--                                                <div class="content">--}}
{{--                                                    <span class="icon"><i class="fa-regular fa-circle-play"></i></span>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
{{--                                        </a>--}}
{{--                                    </div>--}}
{{--                                @endforeach--}}
{{--                            @endif--}}
{{--                        </div>--}}
{{--                    </div>--}}


{{--                    <!-------->--}}
{{--                    <div class="tab_wrapper">--}}
{{--                        <div class="row">--}}
{{--                            @if(count($galleries['magazine_type']))--}}
{{--                                @foreach($galleries['magazine_type'] as $magazineType)--}}
{{--                                    <div class="col-lg-4">--}}
{{--                                        <div class="file_card">--}}
{{--                                            <?php--}}
{{--                                            /** @var TYPE_NAME $magazineType */--}}
{{--                                            $fileOrImage = strpos($magazineType['image'], '.pdf') ? 'assets/web/images/icons/file.png' : $magazineType['image'];--}}
{{--                                            $thumbnail = strpos($magazineType['image'], '.pdf') ? 'assets/web/images/icons/pdf.svg' : $magazineType['image'];--}}
{{--                                            ?>--}}
{{--                                            <a href="{{asset('assets/web/images/partners-2.png')}}" data-fancybox>--}}
{{--                                                <!--<img src="{{asset($fileOrImage)}}" alt="" class="icon"/>-->--}}
{{--                                                <img src="{{asset('assets/web/images/partners-2.png')}}" alt="" class="icon"/>--}}
{{--                                            </a>--}}
{{--                                            <!--<h5 class="title text-center color-secondary">{{__('main.file') . ' - ' . $loop->iteration}}</h5>-->--}}
{{--                                            <h5 class="title text-center color-secondary"> {{__('main.file') . ' - ' . $loop->iteration}}  </h5>--}}
{{--                                            <a download href="{{asset($magazineType['image'])}}" class="butn white_butn">--}}
{{--                                                <img src="{{asset($thumbnail)}}" alt="" class="icon_pdf"/> {{__('main.download_file')}}--}}
{{--                                            </a>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                @endforeach--}}
{{--                            @endif--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
                {{-- Image media --}}
                <div class="tab-pane fade show active" id="pills-tab2" role="tabpanel" aria-labelledby="pills-tab2-tab">
                    <div class="tab_wrapper">
                        <div class="row">
                            @if(count($galleries['image_type']))
                                @foreach($galleries['image_type'] as $imageType)
                                    <div class="col-lg-{{$loop->iteration == 1 ? '12' : '3'}}">
                                        <a href="{{asset($imageType['image'])}}" data-fancybox>
                                            <div class="media_card {{$loop->iteration == 1 ? 'lg_card' : ''}}">
                                                <img src="{{asset($imageType['image'])}}" alt="" class="sec-img"/>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            @else
                                <div class="col-lg-12 alert alert-secondary text-danger text-center"><b>{{__('main.no_data')}}</b></div>
                            @endif
                        </div>
                        <!-- Start gallery_swiper -->
{{--                          <div class="swiper-container gallery_swiper">--}}
{{--                            <div class="swiper-wrapper pb-4">--}}
{{--                                <div class="swiper-slide">--}}
{{--                                        <a href="{{asset($imageType['image'])}}" data-fancybox>--}}
{{--                                        <div class="media_card">--}}
{{--                                            <img src="{{asset($imageType['image'])}}" alt="" class="sec-img"/>--}}
{{--                                        </div>--}}
{{--                                    </a>--}}
{{--                                </div>--}}
{{--                                <div class="swiper-pagination w-100"></div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
                    </div>
                </div>

                {{-- Video media --}}
                <div class="tab-pane fade" id="pills-tab3" role="tabpanel" aria-labelledby="pills-tab3-tab">
                    <div class="tab_wrapper">
                        <div class="row">
                            @if(count($galleries['video_type']))
                                @foreach($galleries['video_type'] as $videoType)
                                    <div class="col-lg-{{$loop->iteration == 1 ? '12' : '3'}}">
                                        <a href="{{$videoType['video_url']}}" data-fancybox>
                                            <div class="media_card {{$loop->iteration == 1 ? 'lg_card' : ''}}">
                                                <img src="{{asset($videoType['image'])}}" alt="" class="sec-img"/>
                                                <div class="content">
                                                    <span class="icon"><i class="fa-regular fa-circle-play"></i></span>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            @else
                                <div class="col-lg-12 alert alert-secondary text-danger text-center"><b>{{__('main.no_data')}}</b></div>
                            @endif


                        </div>
                    </div>
                </div>
                

                {{-- Magazine media --}}
{{--                <div class="tab-pane fade" id="pills-tab4" role="tabpanel" aria-labelledby="pills-tab4-tab">--}}
{{--                    <div class="tab_wrapper">--}}
{{--                        <div class="row">--}}
{{--                            @if(count($galleries['magazine_type']))--}}
{{--                                @foreach($galleries['magazine_type'] as $magazineType)--}}
{{--                                    <div class="col-lg-4">--}}
{{--                                        <div class="file_card">--}}
{{--                                            <?php--}}
{{--                                            /** @var TYPE_NAME $magazineType */--}}
{{--                                            $fileOrImage = strpos($magazineType['image'], '.pdf') ? 'assets/web/images/icons/file.png' : $magazineType['image'];--}}
{{--                                            $thumbnail = strpos($magazineType['image'], '.pdf') ? 'assets/web/images/icons/pdf.svg' : $magazineType['image'];--}}
{{--                                            ?>--}}
{{--                                                <a href="{{asset('assets/web/images/procare_icon.png')}}" data-fancybox>--}}
{{--                                                    <img src="{{asset('assets/web/images/procare_icon.png')}}" alt="" class="icon"/>--}}
{{--                                                </a>--}}
{{--                                            <h5 class="title text-center color-secondary">{{__('main.file') . ' - ' . $loop->iteration}}</h5>--}}
{{--                                            <a download href="{{asset($magazineType['image'])}}" class="butn white_butn">--}}
{{--                                                <img src="{{asset($thumbnail)}}" alt="" class="icon_pdf"/> {{__('main.download_file')}}--}}
{{--                                            </a>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                @endforeach--}}
{{--                            @else--}}
{{--                                <div class="col-lg-12 alert alert-secondary text-danger text-center"><b>{{__('main.no_data')}}</b></div>--}}
{{--                            @endif--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
            </div>
        </div>
    </section>
    
    <section class="about_video">
        <div class="container">
            <div class="content text-center">
                <h2 class="mb-5 fs-1 text-uppercase"> {{__('main.see_more_about_us')}} </h2>
                <a href="{{asset($pages[0]['meta']['video'])}}" class="icon" data-fancybox="vid">
                    <i class="al-play"></i>
                    <span class="float_icon mt-1 ms-1"> <i class="fas fa-play"></i> </span>
                </a>
            </div>
        </div>
    </section>
    
@endsection

@section('inner_js')
    <script>
        var swiper = new Swiper('.media-pg .gallery_swiper', {
            // loop: true,
            speed: 900,
            slidesPerView: 1,
            spaceBetween: 10,
            observer: true,
            observeParents: true,
            // centeredSlides: true,
            // autoplay: {
            //     delay: 2500,
            // },
            navigation: {
                nextEl: '.media-pg .swiper-button-next',
                prevEl: '.media-pg .swiper-button-prev',
            },
            pagination: {
                el: '.media-pg .swiper-pagination',
                clickable: true
            },
            breakpoints: {
                640: {
                    slidesPerView: 2,
                    spaceBetween: 20,
                },
                768: {
                    slidesPerView: 3,
                    spaceBetween: 20,
                },
                1024: {
                    slidesPerView: 4,
                    spaceBetween: 20,
                },
            }
        });
    </script>
@endsection