@php
    use Carbon\Carbon;
    use App\Models\Post;
    use App\Models\User;
    use App\Models\Profile;
    use App\Models\Audios;

    $posts = Post::where('visibility', 'public')->get();

@endphp
@extends("layouts.foruzone_layout")

@section("title", "Emotion")
@section("link-logo") {{route('emotion')}} @endsection
@section("logo", "../images/emotion.png")
@section("name-logo", "Emotion")
@section("icon", "../images/emotion.ico")

@section("side-menu")
    <li class="nav-line"><a draggable="false" class="link-nondeco nav-link btn-menu" href="/"><img draggable="false" class="image-menu image-smed" src="../images/ForUZON.png" alt="Image not found"><label for="" class="label-logos-links deactive">{{_(" ForUZONE")}}</label></a></li>
    <li class="nav-line"><a draggable="false" class="link-nondeco nav-link btn-menu" href="{{route('zooner')}}"><img draggable="false" class="image-menu image-smed" src="../images/Zooner.png" alt="Image not found"><label for="" class="label-logos-links deactive">{{_(" Zooner")}}</label></a></li>
    <li class="nav-line"><a draggable="false" class="link-nondeco nav-link btn-menu" href="{{route('ordle')}}"><img draggable="false" class="image-menu image-smed" src="./images/Ordle.png" alt="Image not found"><label for="" class="label-logos-links deactive">{{_(" Ordle")}}</label></a></li>
    <li class="nav-line"><a draggable="false" class="link-nondeco nav-link btn-menu" href="{{route('neophoto')}}"><img draggable="false" class="image-menu image-smed" src="./images/Neophoto.png" alt="Image not found"><label for="" class="label-logos-links deactive">{{_(" Neophoto")}}</label></a></li>
@endsection

@section("content")
    <h2 class="h2-posts">Publicações de aúdios</h2>
        <div class="block-audio-posts">
            @foreach ($posts as $post)
                @if ($post->type_id == 4)
                @php
                    $profile = Profile::where('id', $post->profile_id)->first();
                    $user = User::where('id', $profile->user_id)->first();
                    $audio = Audios::where('post_id', $post->id)->first();
                @endphp
                        <div class="block-post-link">
                            <div class="block-audio-view">
                                <div class="block-uploader-info">
                                    <a class="uploader-link" href="{{ route('user.profile', ['username' => $user->username])}}">
                                        <img class="image-icon" src="{{ asset('storage/' . $profile->image) }}" alt="Perfil">
                                        <div class="block-uploader-info-text">
                                            <span>{{$user->username}}</span>
                                            <span>{{$post->created_at->diffForHumans()}}</span>
                                            <span class="label-views">{{ _('Visualizações') }}: {{ $post->views_count }}</span>
                                        </div>
                                    </a>
                                </div>
                                <div class="block-audio-review block-audio-link reverse-text" data-url="{{ route('post.post_audio', ['token' => $post->token]) }}" data-cover="{{ asset('storage/' . $audio->cover) }}" data-title="{{ $post->title }}" data-artist="{{ $audio->artists }}">
                                    <a class="audio-post-link" href="{{ route('post.post_audio', ['token' => $post->token]) }}">
                                        {{--Musica com sua imagem de capa--}}
                                        <div class="block-audio-info">
                                            <img class="image-cover-audio" src="{{ asset('storage/' . $audio->cover) }}" alt="thumbnail">
                                            <label class="audio-title audio-title-link">{{$post->title}}</label>
                                            <label class="audio-artist audio-artist-link">{{$audio->artists}}</label>
                                        </div>
                                    </a>
                                    <div class="block-audio-player">
                                        <button class="audio-play-start-btn"><img class="image-icon" src="{{asset("images/play.png")}}" alt="Play"></button>
                                    </div>
                                    
                                    <audio class="audio-view" style="position: block; bottom: 10px; width: 100%; background-color: transparent;">
                                        <source src="{{ asset('storage/' . $audio->audio) }}" type="audio/mp3">
                                    </audio>
                                </div>
                            </div>
                        </div>
                @endif
            @endforeach
        </div>
        @if ($posts->where('type_id', 4)->count() > 4)
            <div class="block-audio-posts-arrows">
                <button class="slick-prev" type="button"><img class="image-arrows" class="image" src="{{asset("images/leftArrow.png")}}" alt="{{ __('Seta da esquerda') }}"></button>
                <button class="slick-next" type="button"><img class="image-arrows" src="{{asset("images/rightArrow.png")}}" alt="{{ __('Seta da direita') }}"></button>
            </div>
        @endif
@endsection
@push('scripts')
<script src="{{ asset('js/audioPlayer.js') }}"></script>
@endpush