@extends('frontend.layouts.partials.default')
@section('title','Search images')

@section('main')
@include('frontend.layouts.partials.extnavbar')

<div class="section">
    <div class="container-fluid py-5">
                <div class="grid">
                    <div class="grid-sizer"></div>
                    <div class="infinite-scroll">
                    @foreach($allItems as $image)
                    @if(isset($image->image_id))
                    <a href="imagedetails?image={{$image->image_secret}}"  target="_blank">
                        <div class="grid-item">
                            <img src="uploads/thumbnail/{{$image->image_link}}" />
                            <div class="text-center text-white overlay-options">
                                <a href="searchfilter?license={{$image->license_type}}" class="text-decoration-none"><span class="px-2 font-weight-bold">
                                @if($image->license_type == 0)
                                RF
                                @elseif($image->license_type == 2)
                                Premium RF
                                @else
                                RM
                                @endif
                                </span></a>
                                                                <a href="searchfilter?series={{$image->Series}}" title="Same Series"><span class="px-2"><i class="fa fa-folder-open"></i></span></a>
                                <a href="searchfilter?category={{$image->category}}" title="Similar Images"><span class="px-2"><i class="fa fa-th-large"></i></span></a>
                                @if (session('is_login'))
                                
                                <a href="" class="download_item text-decoration-none" item_id="{{$image->image_id}}" token="{{Session::get('user_id')}}" item_type="1" item_secret="{{$image->image_secret}}"><span class="px-2"><i class="fa fa-download"></i></span></a>
                                @else
                                <a href="" data-toggle="modal" data-target="#exampleModal" class="text-decoration-none"><span class="px-2"><i class="fa fa-download"></i></span></a>
                                    
                                @endif
                                
                                <a href="uploads/watermark/{{$image->image_link}}" class="image-popup-fit-width"><span class="px-2" style="display:inline-block;vertical-align: middle;line-height: 14px;"><i class="fa fa-eye">
                                    </i><br><span class="text-decoration-none" style="text-align:right;">Preview</span></span>
                                </a>
                            </div>
                        </div>
                    </a>
                    @elseif(isset($image->video_id))
                    <a href="videodetails?video={{$image->video_secret}}"  target="_blank">
                    <div class="grid-item">
                        <video class="video" id="{{$image->video_secret}}"  poster="uploads/thumbnailvideo/{{$image->video_secret}}.jpeg" autoplay loop muted>
                            <source src="uploads/videos/{{$image->video_secret}}/watermarked.mp4" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                        <div class="text-center text-white overlay-options">
                                <a href="searchfilter?license={{$image->license_type}}" class="text-decoration-none"><span class="px-2 font-weight-bold">
                                @if($image->license_type == 0)
                                RF
                                @elseif($image->license_type == 2)
                                Premium RF
                                @else
                                RM
                                @endif
                                </span></a>
                                <a href="searchfilter?series={{$image->Series}}" title="Same Series"><span class="px-2"><i class="fa fa-folder-open"></i></span></a>
                                <a href="javascript:void(0);"><span class="px-2" videoid="{{$image->video_secret}}" onclick="playvideo(this)"><i class="fa fa-play"></i></span></a>

                                <a href="searchfilter?category={{$image->category}}" title="Similar Images"><span class="px-2"><i class="fa fa-th-large"></i></span></a>
                                @if (session('is_login'))
                                
                                <a href="" class="download_item" item_id="{{$image->video_id}}" token="{{Session::get('user_id')}}" item_type="2" item_secret="{{$image->video_secret}}" class="text-decoration-none"><span class="px-2"><i class="fa fa-download"></i></span></a>
                                @else
                                <a href="" data-toggle="modal" data-target="#exampleModal" class="text-decoration-none"><span class="px-2"><i class="fa fa-download"></i></span></a>
                                    
                                @endif

                                <!-- <a href="uploads/watermark/{{$image->image_link}}" target="_blank"><span class="px-2"><i class="fa fa-eye"></i></span></a> -->
                            </div>
                        </div>
                    </a>
                    @else
                    <div>Invalid Data</div>
                    @endif

                    @endforeach
                    {{-- {{ $allItems->links() }} --}}
                    </div>
                </div>
    </div>
</div>
<script>
    function playvideo(playbutton){
        let video_id = playbutton.getAttribute("videoid");
        let video =  document.getElementById(video_id);
        video.paused?video.play():video.pause();
    }
</script>
<script src="{{ config('app.asset_url') }}/assets_front/js/pagination.js" defer></script>
@endsection