@extends('web.layouts.container')
@section('content')
    <section class="media-pg section">
        <div class="container">
            <ul class="nav nav-pills mb-5 wow left_to_right_apperance" 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/media-1.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="false">
                        <img src="{{asset('assets/web/images/icons/media-2.svg')}}" alt="" class="icon"/> {{__('galleries.pictures')}}
                    </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">
                        <img src="{{asset('assets/web/images/icons/media-3.svg')}}" alt="" class="icon"/> {{__('galleries.videos')}}
                    </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">
                        <img src="{{asset('assets/web/images/icons/media-4.svg')}}" alt="" class="icon"/> {{__('galleries.files')}}
                    </button>
                </li>
            </ul>
            <div class="tab-content" id="pills-tabContent">
                {{--- ALl box --}}
{{--                <div class="tab-pane fade show active" id="pills-tab1" role="tabpanel" aria-labelledby="pills-tab1-tab">--}}
{{--                    <div class="tab-wrapper">--}}
{{--                        <div class="row all_container">--}}
{{--                            @if($firstVideo->id ?? null)--}}
{{--                            <div class="col-lg-12">--}}
{{--                                <a href="{{$firstVideo->video_url ?? $firstVideo->video}}" data-fancybox>--}}
{{--                                    <div class="media_card lg_card wow left_to_right_apperance">--}}
{{--                                        <img src="{{asset($firstVideo->image)}}" alt="" class="sec-img"/>--}}
{{--                                        <div class="content">--}}
{{--                                            <div class="icon color-primary mb-4"><i class="fa-regular fa-circle-play"></i></div>--}}
{{--                                            <h2 class="title text-white">{{$firstVideo->title}}</h2>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                </a>--}}
{{--                            </div>--}}
{{--                            @endif--}}
{{--                                @if(count($galleries))--}}
{{--                                    @foreach($galleries as $gallery)--}}
{{--                                        @if($gallery[0]['type'] == 'image_type')--}}
{{--                                            <div class="col-lg-3">--}}
{{--                                                <a href="{{asset($gallery[0]['image'])}}" data-fancybox="images">--}}
{{--                                                    <div class="media_card wow left_to_right_apperance animated" style="visibility: visible;">--}}
{{--                                                        <img src="{{asset($gallery[0]['image'])}}" alt="" class="sec-img"/>--}}
{{--                                                        <h5 class="card_title text-center bg-white zi-5 mb-0 pt-3">{{$gallery[0]['title']}}</h5>--}}
{{--                                                    </div>--}}
{{--                                                </a>--}}
{{--                                            </div>--}}
{{--                                        @endif--}}


{{--                                        @if($gallery[0]['type'] == 'video_type')--}}
{{--                                            @if($gallery[0]['id'] == $firstVideo->id) @continue @endif--}}
{{--                                            <div class="col-lg-3">--}}
{{--                                                <a href="{{$gallery[0]['video_url'] ?? $gallery[0]['video']}}" data-fancybox>--}}
{{--                                                    <div class="media_card wow left_to_right_apperance animated" style="visibility: visible;">--}}
{{--                                                        <img src="{{asset($gallery[0]['image'])}}" alt="" class="sec-img"/>--}}
{{--                                                        <div class="content">--}}
{{--                                                            <div class="icon color-primary fs-1 mb-4"><i class="fa-regular fa-circle-play"></i></div>--}}
{{--                                                        </div>--}}
{{--                                                        <h5 class="card_title text-center bg-white zi-5 mb-0 pt-3">{{$gallery[0]['title']}}</h5>--}}
{{--                                                    </div>--}}
{{--                                                </a>--}}
{{--                                            </div>--}}
{{--                                        @endif--}}

{{--                                    @endforeach--}}

{{--                                @else--}}
{{--                                    <div class="alert alert-secondary text-danger text-center show_done">{{__('galleries.no_data')}}</div>--}}
{{--                                @endif--}}

{{--                        </div>--}}
{{--                        <a href="#" class="butn light_butn fw-bold m-auto mt-5 load_more_link" data-type="all_type" data-target=".all_container">--}}
{{--                            <img src="{{asset('assets/web/images/icons/down_arrow.png')}}" alt="" class="icon-15 filterPrimary me-2 ms-0"/> {{__('main.load_more')}}--}}
{{--                        </a>--}}
{{--                    </div>--}}
{{--                </div>--}}
                {{-- Images box--}}
                <div class="tab-pane fade show active" id="pills-tab2" role="tabpanel" aria-labelledby="pills-tab2-tab">
                    <div class="tab-wrapper">
                        <div class="row images_container">
                            @if(count($images))
                                @foreach($images as $image)
                                    @if($loop->iteration == 1)
                                        <div class="col-lg-12">
                                            <a href="{{asset($image->image)}}" data-fancybox="images">
                                                <div class="media_card lg_card">
                                                    <img src="{{asset($image->image)}}" alt="" class="sec-img"/>
                                                    <div class="content">
                                                        <h2 class="title text-white">{{$image->title}}</h2>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                        @else
                                        <div class="col-lg-3">
                                            <a href="{{asset($image->image)}}" data-fancybox="images">
                                                <div class="media_card">
                                                    <img src="{{asset($image->image)}}" alt="" class="sec-img"/>
                                                    <h5 class="card_title text-center bg-white zi-5 mb-0 pt-3">{{$image->title}}</h5>
                                                </div>
                                            </a>
                                        </div>

                                    @endif
                                @endforeach
                            @endif
                        </div>
                        @if(count($images) > 5)
                            <a href="#" class="butn light_butn fw-bold m-auto mt-5 load_more_link" data-type="image_type" data-target=".images_container">
                                <img src="{{asset('assets/web/images/icons/down_arrow.png')}}" alt="" class="icon-15 filterPrimary me-2 ms-0"/> {{__('main.load_more')}}
                            </a>
                        @endif
                    </div>
                </div>
                {{-- Videos box--}}
                <div class="tab-pane fade" id="pills-tab3" role="tabpanel" aria-labelledby="pills-tab3-tab">
                    <div class="tab-wrapper">
                        <div class="row videos_container">
                            @if(count($videos))
                                @foreach($videos as $video)
                                    @if($loop->iteration == 1)
                                        <div class="col-lg-12">
                                            <a href="{{$video->video_url ?? $video->video}}" data-fancybox>
                                                <div class="media_card lg_card">
                                                    <img src="{{asset($video->image)}}" alt="" class="sec-img"/>
                                                    <div class="content">
                                                        <div class="icon color-primary mb-4"><i class="fa-regular fa-circle-play"></i></div>
                                                        <h2 class="title text-white">{{$video->title}}</h2>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                        @else
                                        <div class="col-lg-3">
                                            <a href="{{$video->video_url ?? $video->video}}" data-fancybox>
                                                <div class="media_card">
                                                    <img src="{{asset($video->image)}}" alt="" class="sec-img"/>
                                                    <div class="content">
                                                        <div class="icon color-primary fs-1 mb-4"><i class="fa-regular fa-circle-play"></i></div>
                                                    </div>
                                                    <h5 class="card_title text-center bg-white zi-5 mb-0 pt-3">{{$video->title}}</h5>
                                                </div>
                                            </a>
                                        </div>
                                    @endif
                                @endforeach
                            @endif

                        </div>
                        @if(count($videos) > 4)
                        <a href="#" class="butn light_butn fw-bold m-auto mt-5 load_more_link" data-type="video_type" data-target=".videos_container">
                            <img src="{{asset('assets/web/images/icons/down_arrow.png')}}" alt="" class="icon-15 filterPrimary me-2 ms-0"/> {{__('main.load_more')}}
                        </a>
                        @endif
                    </div>
                </div>
                {{-- Files box--}}
                <div class="tab-pane fade" id="pills-tab4" role="tabpanel" aria-labelledby="pills-tab4-tab">
                    <div class="tab-wrapper">
                        <div class="row files_container">
                            @if(count($files))
                                @foreach($files as $file)
                                    <div class="col-lg-4">
                                        <div class="file_card">
                                            <img src="{{asset('assets/web/images/icons/file.svg')}}" alt="" class="icon"/>
                                            <h5 class="title text-center color-secondary">{{$file->title}}</h5>
                                            <a href="{{asset($file->file)}}" class="butn white_butn">
                                                <img src="{{asset('assets/web/images/icons/pdf.svg')}}" alt="" class="icon_pdf"/> {{__('galleries.download_pdf')}}
                                            </a>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                        @if(count($files) > 5)
                        <a href="#" class="butn light_butn fw-bold m-auto mt-5 load_more_link" data-type="file_type" data-target=".files_container">
                            <img src="{{asset('assets/web/images/icons/down_arrow.png')}}" alt="" class="icon-15 filterPrimary me-2 ms-0"/> {{__('main.load_more')}}
                        </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>@endsection

@section('inner_js')

    <script>
        let loadMoreRoute = "{{route('gallery.loadMore')}}",
            allSkip = 0,
            imageTypeSkip = 0,
            videoTypeSkip = 0,
            fileTypeSkip = 0;

        $('.load_more_link').click(async function (e) {
            e.preventDefault();
            $(this).prop('disabled', true);

            let typeSkip = 0,
                type = $(this).data('type');

            if(type === 'all_type'){
                allSkip = allSkip + 4;
                typeSkip = allSkip;

            }

            if(type === 'image_type'){
                imageTypeSkip = imageTypeSkip + 5;
                typeSkip = imageTypeSkip;
            }

            if(type === 'video_type'){
                videoTypeSkip = videoTypeSkip + 5;
                typeSkip = videoTypeSkip;
            }

            if(type === 'file_type'){
                fileTypeSkip = fileTypeSkip + 6;
                typeSkip = fileTypeSkip;
            }

            let data = {skip: typeSkip, type: type};


            let url = loadMoreRoute,
                method = 'get';

            const response=await ajax({
                url,
                data,
                dataType: 'html',
                method
            });

            if (response){
                console.log(response.search('show_done'))
                if (response.search('show_done') > -1){
                    $(this).remove();
                }
                $($(this).data('target')).append(response);
            }

        });

    </script>


@endsection