@if(auth()->user()!=null)
    <!-- welcome -->
    <section id="demos" class="mrg-top-30">
        <div class="container mixed-video">
            <div class="row">
                <div class="col-md-12 welcome_div">
                    <img src="{{ $user->image }}">
                    <h5>Music to get your started</h5>
                    <h1>Welcome {{ $user->name }}</h1>
                </div>
                <div class="large-12 columns">
                    <div id="" class="row my-welcome">
                        @if(isset($likedPlaylist->playlists))
                        @foreach($likedPlaylist->playlists as $play)
                        <div class="col-lg-2 col-6">
                            <a class="a-link" href="{{ route('web.playlist-detail',$play->id) }}">
                                <div class="row ">
                                    <div class="col-md-12 img-top-div">
                                        <div class="img-div">
                                            <img class="img-fluid" src="{{ $play->image }}">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <h2 class="overflow-ellipsis">{{ $play->name }} </h2>
                                        @if($play->user!=null)
                                        <p class="overflow-ellipsis">{{ $play->user->name }}</p>
                                        @endif
                                    </div>
                                    @if(($play->image_type=='D'))
                                    <h3 class="img-heading">{{ $play->name }}</h3>
                                    @endif
                                </div>
                            </a>
                        </div>
                        @endforeach
                        @endif
                        @if(isset($followedArtists->users))
                        @foreach($followedArtists->users as $user)
                        <div class="col-lg-2 col-6 ">
                            <a class="a-link" href="{{ route('web.artist-detail',$user->id) }}">
                                <div class="row ">
                                    <div class="col-md-12 img-top-div">
                                        <div class="img-div">
                                            <img class="img-fluid" src="{{ $user->image }}">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <h2 class="overflow-ellipsis">{{ $user->name }} </h2>
                                    </div>
                                    @if(($user->image_type=='D'))
                                    <h3 class="img-heading">{{ $user->name }}</h3>
                                    @endif
                                </div>
                            </a>
                        </div>
                        @endforeach
                        @endif
                        @if(isset($likedAlbum->albums))
                        @foreach($likedAlbum->albums as $alb)
                        <div class="col-lg-2 col-6 ">
                            <a class="a-link" href="{{ route('web.album-detail',$alb->id) }}">
                                <div class="row ">
                                    <div class="col-md-12 img-top-div">
                                        <div class="img-div">
                                            <img class="img-fluid" src="{{ $alb->image }}">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <h2 class="overflow-ellipsis">{{ $alb->user->name }} </h2>
                                    </div>
                                    @if(($alb->image_type=='D'))
                                    <h3 class="img-heading">{{ $alb->name }}</h3>
                                    @endif
                                </div>
                            </a>
                        </div>
                        @endforeach
                        @endif
                        @if(isset($likedTrack->tracks))
                        <div class="col-lg-2 col-6 json-div" json-data="{{ json_encode($likedTrack->tracks) }}">
                            @foreach($likedTrack->tracks as $tra)

                            <form action="{{ route('web.suggestion-tracks')}}" data-type="suggestion-tracks-{{ $tra->id }}" data-id="{{ $tra->id }}" index="0" class="w-color a-link track-item">

                                <div class="track-submit" data-type="suggestion-tracks-{{ $tra->id }}" data-id="{{ $tra->id }}" index="0">
                                    <div class="row ">
                                        <div class="col-md-12 img-top-div">
                                            <div class="img-div">
                                                <img class="img-fluid" src="{{ $tra->image }}">
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <h2 class="overflow-ellipsis">{{ $tra->name  }} </h2>
                                            @if(isset($tra->artist))
                                            <p class="overflow-ellipsis">{{ $tra->artist->name }} </p>
                                            @endif
                                        </div>
                                        @if(($tra->image_type=='D'))
                                        <h3 class="img-heading">{{ $tra->name }}</h3>
                                        @endif
                                    </div>
                                </div>

                                @endforeach
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--  end welcome -->

    <!--Slider2-->
    <section id="artistTracks" class="mrg-top-60">
        <div class="container mixed-video">
            <div class="row mrg-top-30">
                @if(isset($followedArtists->users))
                @foreach($followedArtists->users as $user)
                <h1 class="mrg-top-30">Top Tracks of - {{ $user->name }} </h1>
                <div class="large-12 columns json-div" json-data="{{ json_encode($user->tracks) }}">
                    <div id="artistTrack" class="owl-carousel   owl-theme">
                        @php $index=0; @endphp
                        @foreach($user->tracks as $track)
                        <div class="item my-welcome ">
                            <form action="{{ route('web.suggestion-tracks')}}" data-type="suggestion-tracks-{{ $track->id }}" data-id="{{ $track->id }}" index="{{ $index }}" class="w-color a-link track-item">
                                <div class="track-submit img-top-div" data-type="suggestion-tracks-{{ $track->id }}" data-id="{{ $track->id }}" index="{{ $index }}">
                                    <div class="img-div">
                                        <img class="img-fluid" src="{{ $track->image }}">
                                    </div>
                                </div>
                                <!-- <div class="track-submit" data-type="suggestion-tracks-{{ $track->id }}" data-id="{{ $track->id }}" index="{{ $index }}"> -->
                                <h2 class="overflow-ellipsis">{{ $track->name }}</h2>
                                @if(isset($track->album))
                                <h3 class="overflow-ellipsis">{{ $track->album->name }}</h3>
                                @endif
                                @if(($track->image_type=='D'))
                                <h3 class="img-heading">{{ $track->name }}</h3>
                                @endif
                                <!-- </div> -->
                            </form>
                        </div>
                        @php $index++; @endphp
                        @endforeach
                    </div>
                </div>
                @endforeach
                @endif
            </div>
        </div>
    </section>
    <!--Slider2-->
    @endif

    @if($playlists->count() > 0)
    <!--Slider1-->
    <section id="demos" class="mrg-top-30">
        <div class="container mixed-video">
            <div class="row">
                <h1>Latest Playlist </h1>
                <div class="large-12 columns">
                    <div id="mixed-video" class="owl-carousel  owl-theme">
                        @foreach($playlists as $playlist)
                        <div class="item video-text ">
                            <a class="a-link" href="{{ route('web.playlist-detail',$playlist->id) }}">
                                <div class="carousel-img-div">
                                    <img class="img-fluid" src="{{ $playlist->image }}">
                                </div>
                                <h2 class="overflow-ellipsis">{{ $playlist->name }}</h2>
                                @if(($playlist->image_type=='D'))
                                <h3 class="img-heading">{{ $playlist->name }}</h3>
                                @endif
                            </a>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Slider1-->
@endif

    <!--Slider2-->
    <section id="demos" class="mrg-top-60">
        <div class="container mixed-video">
            <div class="row mrg-top-30">
                <h1 class="mrg-top-30">Recommended Tracks</h1>
                <div class="large-12 columns">
                    <div id="recommended" class="owl-carousel json-div owl-theme" json-data='{{ json_encode($recommendedTracks) }}'>
                        @php $index=0; @endphp
                        @foreach($recommendedTracks as $track)
                        <div class="item video-text img-top-div ">
                            <a href="{{ route('web.tracks-list',['type'=>'home-recommended','id'=>$track->id, 'index' => $index] )}}" data-type="home-recommended" data-id="{{ $track->id }}" index="{{ $index }}" class="a-link track-item">
                                <div class="carousel-img-div">
                                    <img class="img-fluid" src="{{ $track->image }}">
                                </div>

                                <h2 class="overflow-ellipsis">{{ $track->name }} </h2>
                            </a>
                            @if(isset($track->artist->id))
                            <a href="{{ route('web.artist-detail',$track->artist->id) }}">
                                <p class="overflow-ellipsis slider-p">{{ $track->artist->name }}</p>
                            </a>
                            @endif

                            @if(($track->image_type=='D'))
                            <h3 class="img-heading">{{ $track->name }}</h3>
                            @endif
                        </div>
                        @php $index++; @endphp
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Slider2-->
    <!--artists -->
    <section>
        <div class="container artists-main">
            <div class="row">
                <div class="col-lg-8 col-12 rightpad150 text-right">
                    <img class="img-fluid" src="{{ asset('imgs/artists.png') }}">
                </div>
                <div class="col-lg-4 col-12 lefttpad50">
                    <h2>Tell us which artists you like</h2>
                    <h3>We'll create an experience just for you</h3>
                    <a class="a-link" href="{{ route('web.artists') }}"><button type="button" class="btn btn-light">Let's Go</button></a>
                </div>
            </div>
        </div>
    </section>
    <!--artists -->

    <!--Quick picks-->
    <section id="demos" class="mrg-top-60">
        <div class="container quick-video">
            <div class="row mrg-top-30">
                <h3 class="sub-heading rg-top-30"> START RADIO FROM A SONG</h3>
                <h1 class="mrg-top-30 main-heading">Trending</h1>
                <div class="large-12 columns">
                    <div id="quick" class="owl-carousel owl-theme json-div" json-data='{{ json_encode($quickPick) }}'>
                        @php $index=0; @endphp
                        @foreach($quickTracks as $pick)
                        <div class="item quick-text a_link">
                            <ul>
                                @for($i=0;$i<4;$i++) @if(isset($pick[$i])) <li>
                                    <a href="{{ route('web.tracks-list',['type'=>'home-trending','id'=>$pick[$i]->id, 'index' => $index] )}}" data-type="home-trending" data-id="{{ $pick[$i]->id }}" index="{{ $index }}" class="list-track track-item a-link">
                                        <span class="track-play-btn"><i class="bi bi-play-fill text-white"></i></span>
                                        <img class="img-fluid" src="{{ $pick[$i]->image }}">
                                    </a>
                                    <a href="{{ route('web.tracks-list',['type'=>'home-trending','id'=>$pick[$i]->id, 'index' => $index] )}}" data-type="home-trending" data-id="{{ $pick[$i]->id }}" index="{{ $index }}" class="list-track track-item a-link">
                                        <h2 class="overflow-ellipsis">{{ $pick[$i]->name }} </h2>
                                    </a>
                                    @if(isset($pick[$i]->artist->id))
                                    <a href="{{ route('web.artist-detail',$pick[$i]->artist->id) }}">
                                        <p class="overflow-ellipsis">{{ $pick[$i]->artist->name }}</p>
                                    </a>
                                    @endif
                                    </li>
                                    @endif
                                    @php $index=$index+1; @endphp
                                    @endfor

                            </ul>
                        </div>

                        @endforeach

                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Quick picks-->

    <!--Moods & genres-->
    <section id="demos" class="mrg-top-60">
        <div class="container mrg-top-30 quick-video">
            <div class="row mrg-top-30 ">

                <h1 class="main-heading mrg-top-30">Genres</h1>
                <div class="large-12 columns">
                    <div id="moods" class="owl-carousel owl-theme">
                        @php $m=1; @endphp
                        @foreach($genres as $gen)
                        <div class="item mood-main">
                            <ul>
                                @for($k=0;$k<4;$k++) @if(isset($gen[$k])) <li><a class="bor{{$m}} a-link" href="{{ route('web.albums',$gen[$k]->id ) }}">{{ $gen[$k]->name }}</a></li>
                                    @endif
                                    @php $m++; @endphp
                                    @endfor
                                    <ul>
                        </div>

                        @endforeach

                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Moods & genres-->

    <!--Quick picks-->
    <section id="demos2" class="mrg-top-60">
        <div class="container quick-video">
            <div class="row mrg-top-30">
                <h3 class="sub-heading rg-top-30"> START RADIO FROM A SONG</h3>
                <h1 class="mrg-top-30 main-heading">Latest Tracks</h1>
                <div class="large-12 columns">
                    <div id="trending" class="owl-carousel owl-theme json-div" json-data="{{ json_encode($trendingRes) }}">
                        @php $index=0; @endphp
                        @foreach($trending as $trend)
                        <div class="item quick-text">
                            <ul>
                                @for($p=0;$p<4;$p++) @if(isset($trend[$p])) <li>

                                    <a href="{{ route('web.tracks-list',['type'=>'home-latest','id'=>$trend[$p]->id, 'index' => $index] )}}" data-type="home-latest" data-id="{{ $trend[$p]->id }}" index="{{ $index }}" class="list-track track-item a-link">
                                        <span class="track-play-btn"><i class="bi bi-play-fill text-white"></i></span>
                                        <img class="img-fluid" src="{{ $trend[$p]->image }}">
                                    </a>
                                    <a href="{{ route('web.tracks-list',['type'=>'home-latest','id'=>$trend[$p]->id, 'index' => $index] )}}" data-type="home-latest" data-id="{{ $trend[$p]->id }}" index="{{ $index }}" class="list-track track-item a-link">
                                        <h2 class="overflow-ellipsis">{{ $trend[$p]->name }} </h2>
                                    </a>
                                    @if(isset($trend[$p]->artist->id))
                                    <a href="{{ route('web.artist-detail',$trend[$p]->artist->id) }}">
                                        <p class="overflow-ellipsis">{{ $trend[$p]->artist->name }}</p>
                                    </a>
                                    @endif
                                    </li>
                                    @endif
                                    @php $index++; @endphp
                                    @endfor

                            </ul>
                        </div>

                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Quick picks-->

    <!--Slider2-->
    @if($albums->count()>0)
    <section id="demos" class="">
        <div class="container mixed-video">
            <div class="row ">
                <h1 class="mrg-top-30">Latest Albums</h1>
                <div class="large-12 columns">
                    <div id="live" class="owl-carousel   owl-theme">
                        @foreach($albums as $album)
                        <div class="item video-text ">
                            <a class="a-link" href="{{ route('web.album-detail',$album->id) }}">
                                <div class="carousel-img-div">
                                    <img class="img-fluid" src="{{ $album->image }}">
                                </div>
                                <h2 class="overflow-ellipsis">{{ $album->name }}</h2>
                                <h3 class="overflow-ellipsis">{{ $album->user->name }}</h3>
                            </a>
                            @if(($album->image_type=='D'))
                            <h3 class="img-heading">{{ $album->name }}</h3>
                            @endif
                        </div>
                        @endforeach
                        <!-- <div class="item video-text">
                            <a href="#">
                                <img class="img-fluid" src="{{ asset('imgs/live2.png') }}">
                                <h2>Shabad Kirtan</h2>
                                <h3>Arijit Singh • 607M views</h3>
                            </a>

                        </div>
                        <div class="item video-text">
                            <a href="#">
                                <img class="img-fluid" src="{{ asset('imgs/live3.png') }}">
                                <h2>Shabad Kirtan</h2>
                                <h3>Arijit Singh • 607M views</h3>
                            </a>
                        </div>
                        <div class="item video-text">
                            <a href="#">
                                <img class="img-fluid" src="{{ asset('imgs/live4.png') }}">
                                <h2>Shabad Kirtan</h2>
                                <h3>Arijit Singh • 607M views</h3>
                            </a>
                        </div>
                        <div class="item video-text">
                            <a href="#">
                                <img class="img-fluid" src="{{ asset('imgs/live5.png') }}">
                                <h2>Shabad Kirtan</h2>
                                <h3>Arijit Singh • 607M views</h3>
                            </a>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif
    <!--Slider2-->
    <br />
    <br />
    <br />
    <br />