@extends('layouts.landing-page')

@section('content')
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6" data-aos="fade-up">
        <div>
            <h2 class="text-3xl font-bold text-white mb-2">Favorite Songs</h2>
            <div class="text-gray-400">Your collection of liked songs</div>
        </div>
    </div>


    <section class="mb-12">
        <div class="section-header flex items-center justify-between mb-5">
            <h2 class="section-title text-2xl font-bold">You Might Also Like</h2>
        </div>

        <div class="scroll-container">

            @forelse ($recommendationSongs as $song)
                @php
                    $imageUrl = app(\App\Services\SongServices::class)->getCoverImageS3($song, 'sm');
                @endphp
                @php
                    $creatorName =
                        $song->songContributors
                            ->where('role', 'Composer')
                            ->pluck('user.name')
                            ->filter()
                            ->implode(', ') ?? '-';

                    if (empty($creatorName)) {
                        $creatorName = '-';
                    }

                    $artistName =
                        $song->songContributors
                            ->filter(function ($contributor) {
                                return in_array($contributor->role, ['Artist', 'Cover Creator']);
                            })
                            ->pluck('user.name')
                            ->filter()
                            ->implode(', ') ?:
                        '-';

                    if (empty($artistName)) {
                        $artistName = 'No Artist';
                    }
                @endphp

                <div class="scroll-item music-card-item" data-aos="fade-up" data-aos-delay="{{ 1 * 50 }}">
                    <div class="relative group overflow-hidden rounded-xl">
                        <img src="{{ $imageUrl }}" alt="{{ $song->title }}"
                            class="w-full aspect-square object-cover transition-transform duration-300 group-hover:scale-110">
                        <div
                            class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                        </div>
                        <button onclick="viewSong(this)"
                            class="play-song-btn absolute inset-0 flex items-center justify-center"
                            {{ Auth::guest() ? 'data-login-required=true onclick=window.location.href=\'' . route('login') . '\'' : '' }}
                            data-title="{{ $song->title }}" data-artist="{{ $artistName }}"
                            data-cover="{{ $imageUrl }}" data-url="{{ route('users.songs.view', ['id' => $song->id]) }}"
                            data-id="{{ $song->id }}" data-duration="{{ rand(180, 320) }}">
                            <div
                                class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center transform translate-y-4 opacity-0 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 shadow-lg hover:bg-red-700 hover:scale-105">
                                <i class="ti ti-player-play text-white text-xl"></i>
                            </div>
                        </button>
                    </div>
                    <div class="mt-3">
                        <h3 class="font-semibold text-base truncate" title="{{ $song->title }}">{{ $song->title }}
                        </h3>
                        <p class="text-sm text-gray-400 truncate" title="{{ $artistName }}">{{ $artistName }}</p>
                    </div>
                </div>
            @empty
                <div>belum terdapat data</div>
            @endforelse


        </div>
    </section>

    <!-- Similar Songs You Might Like -->
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const elMain = document.getElementById('mainContent');

            elMain.classList.add('w-full');
        });

        function viewSong(element) {
            var url = element.getAttribute('data-url');
            if (url) {
                window.location.href = url;
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal!',
                    text: 'URL tidak ditemukan pada elemen.',
                });
            }
        }
    </script>
@endsection