Home Show Hashtag

@extends('layouts')

@section('content')
    <x-jumbotron/>
    <div class="container py-5">

        <div class="ads-code mb-3 bg-mode">
            @include('responsive')
        </div>

        {{-- <h3 class="h4 text-center py-5">Trending Profiles</h3>
        <div class="row g-4 mb-4">
            @foreach ($results->getResults() as $media)
                <x-profile-lists :media="$media"/>
            @endforeach
        </div> --}}

        <div class="box-photos-wrapper">
            <div class="row g-4 box-photos">
                @if (Cache::has("profile-love"))
                    @foreach (Cache::get("profile-love")->getResults()->medias as $media)
                        @if ($loop->index % 6 == 1)
                            <x-media-lists-ads/>
                        @endif
                        <x-media-lists :media="$media"/>
                    @endforeach
                @else
                    @foreach ((new App\Services\Instakrep())->getHashtag("love")->getResults()->medias as $media)
                        @if ($loop->index % 6 == 1)
                            <x-media-lists-ads/>
                        @endif
                        <x-media-lists :media="$media"/>
                    @endforeach
                @endif
            </div>
        </div>

        <div class="ads-code mt-5 bg-mode">
            @include('responsive')
        </div>
    </div>
@endsection

@push('foot')
    <script src="//unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
    <script src="//unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
    <script>
        var grid = document.querySelector('.box-photos');

        let msnry = new Masonry( grid, {
            itemSelector: '.box-item',
            gutter: 0,
            visibleStyle: { transform: 'translateY(0)', opacity: 1 },
            hiddenStyle: { transform: 'translateY(100px)', opacity: 0 },
        });

        imagesLoaded( grid ).on( 'progress', function() {
            msnry.layout();
        });
    </script>
@endpush