@extends('layouts.landing-page')

@section('content')
    <!-- Category Navigation -->
    <div class="category-nav mb-6">
        <div class="category-pill active" data-category="untuk-anda">Untuk Anda</div>
        <div class="category-pill" data-category="tangga-lagu">Tangga Lagu</div>
        <div class="category-pill" data-category="hip-hop">Hip Hop</div>
        <div class="category-pill" data-category="pop">Pop</div>
        <div class="category-pill" data-category="rock">Rock</div>
        <div class="category-pill" data-category="rnb">R&B</div>
        <div class="category-pill" data-category="electronic">Electronic</div>
        <div class="category-pill" data-category="jazz">Jazz</div>
        <div class="category-pill" data-category="classical">Classical</div>
        <div class="category-pill" data-category="country">Country</div>
        <div class="category-pill" data-category="indie">Indie</div>
        <div class="category-pill" data-category="metal">Metal</div>
        <div class="category-pill" data-category="mood">Mood</div>
        <div class="category-pill" data-category="workout">Workout</div>
        <div class="category-pill" data-category="focus">Focus</div>
    </div>

    <!-- Category Results Section -->
    <section id="categoryResults" class="mb-12" style="display: none;">
        <div class="section-header flex items-center justify-between mb-5">
            <h2 id="categoryTitle" class="section-title text-2xl font-bold">Hip Hop</h2>
            <button id="clearCategory" class="section-link flex items-center gap-1 hover:text-red-500 transition-colors">
                <i class="ti ti-x text-sm"></i> Clear
            </button>
        </div>

        <div id="categoryGrid" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
            <!-- Songs will be populated here -->
        </div>
    </section>

    @if (isset($latestAnnouncement) && $latestAnnouncement)
        <div id="notificationBanner"
            class="notification-banner mb-6 p-4 bg-gradient-to-r from-gray-100/20 to-gray-100/20 border border-gray-500/30 rounded-lg backdrop-blur-sm">
            <div class="flex items-start justify-between gap-4">
                <div class="flex items-start gap-3">
                    {{-- Bagian untuk menampilkan gambar --}}
                    @if ($latestAnnouncement->picture)
                        <div class="flex-shrink-0 mt-1">
                            <img src="{{ asset('storage/' . $latestAnnouncement->picture) }}"
                                alt="{{ $latestAnnouncement->title }}" class="w-24 h-30 object-cover rounded-md">
                            {{-- Sesuaikan ukuran dan gaya gambar di sini --}}
                        </div>
                    @endif
                    {{-- Akhir bagian gambar --}}

                    <div class="flex-1">
                        <h3 class="text-white font-semibold mb-2">{{ $latestAnnouncement->title }}</h3>
                        <p class="text-gray-300 text-sm leading-relaxed">
                            {{ $latestAnnouncement->content }}
                        </p>
                    </div>
                </div>

            </div>
        </div>
    @endif
    <!-- Hero Section -->
    <section class="mb-10">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div class="lg:col-span-2">
                <div class="relative h-64 md:h-80 rounded-xl overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-black/20"></div>
                    @if (isset($banner) && $banner && $banner->picture)
                        <img src="{{ asset('storage/' . $banner->picture) }}" class="w-full h-full object-cover"
                            alt="{{ $banner->title ?? 'Featured artist' }}">
                    @else
                        <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?q=80&w=1200"
                            class="w-full h-full object-cover" alt="Featured artist default">
                    @endif

                    <div class="absolute bottom-0 left-0 p-6">

                        @if (isset($banner) && $banner)
                            @if ($banner->badge)
                                <span
                                    class="text-sm bg-red-600 text-white px-2 py-1 rounded-full">{{ $banner->badge }}</span>
                            @else
                                <span class="text-sm bg-gray-500 text-white px-2 py-1 rounded-full">Playlist
                                    Unggulan</span>
                            @endif
                            <h1 class="text-3xl font-bold mt-2 mb-1">{{ $banner->title }}</h1>

                            @if ($banner->description)
                                <p class="text-gray-300 mb-4">{{ $banner->description }}</p>
                            @else
                                <p class="text-gray-300 mb-4">Lihat karya musik dari para kreator yang telah mengurus
                                    lisensi secara resmi. Jadikan inspirasimu untuk berkarya tanpa batas.</p>
                            @endif
                        @else
                            <span class="text-sm bg-gray-500 text-white px-2 py-1 rounded-full">Playlist Terbaik</span>
                            <h1 class="text-3xl font-bold mt-2 mb-1">Karya Pilihan Bulan Ini</h1>
                            <p class="text-gray-300 mb-4">Lihat karya musik dari para kreator yang telah mengurus
                                lisensi
                                secara resmi. Jadikan inspirasimu untuk berkarya tanpa batas.</p>
                        @endif

                        <a href="{{ route('trending') }}"
                            class="inline-flex bg-white text-black hover:bg-gray-200 font-medium py-2 px-4 rounded-full items-center gap-2 transition">
                            <i class="ti ti-player-play"></i> Lihat Sekarang
                        </a>
                    </div>
                </div>
            </div>

            <div class="hidden lg:block">
                <div
                    class="rounded-xl overflow-hidden bg-gradient-to-br from-blue-700 to-purple-700 p-5 h-80 flex flex-col justify-between">
                    <div>
                        <h2 class="text-xl font-bold mb-1">List Terbaru</h2>
                        <p class="text-white/80 text-sm">Musik yang dipersonalisasi hanya untuk Anda</p>
                    </div>
                    <div>
                        <div class="flex -space-x-4">
                            <img class="w-12 h-12 rounded-full border-2 border-blue-800" src="https://i.pravatar.cc/400"
                                alt="">
                            <img class="w-12 h-12 rounded-full border-2 border-blue-800" src="https://i.pravatar.cc/400"
                                alt="">
                            <img class="w-12 h-12 rounded-full border-2 border-blue-800"
                                src="https://images.unsplash.com/photo-1577805947697-89e18249d767?q=80&w=100"
                                alt="">


                        </div>
                        <p class="mt-4 mb-2 text-sm text-white/80">Based on your recent listening</p>
                        <a href="{{ route('mix_trending') }}"
                            class="mt-5 bg-white/20 hover:bg-white/30 text-white font-medium py-2 px-4 rounded-full text-sm transition">
                            Play List
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Recently Played Section - horizontal scroll -->
    <section class="mb-12">
        <div class="section-header flex items-center justify-between mb-5">
            <h2 class="section-title text-2xl font-bold">List lagu yang sering dicari</h2>
            @if ($songs->isNotEmpty())
                <a href="{{ route('recently_played') }}"
                    class="section-link flex items-center gap-1 hover:text-red-500 transition-colors">
                    See All <i class="ti ti-chevron-right text-sm"></i>
                </a>
            @endif
        </div>

        <div class="scroll-container">

            @forelse ($songs 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>

    <!-- Popular Artists Section -->
    <section class="mb-12">
        <div class="section-header flex items-center justify-between mb-5">
            <h2 class="section-title text-2xl font-bold">List Artis Populer</h2>
            <a href="{{ route('artists') }}"
                class="section-link flex items-center gap-1 hover:text-red-500 transition-colors">
                See All <i class="ti ti-chevron-right text-sm"></i>
            </a>
        </div>

        <div class="scroll-container">
            @php
                $index = 0;
            @endphp
            @foreach ($artists as $artist)
                @php
                    $index++;
                @endphp
                <div class="scroll-item artist-card" data-aos="fade-up" data-aos-delay="{{ $index * 50 }}">
                    <div class="relative group">
                        <a href="{{ route('artist.profile', $artist->id) }}" class="block">
                            <div
                                class="overflow-hidden rounded-full aspect-square border-2 border-transparent group-hover:border-red-500 transition-all duration-300">
                                <img src="{{ app('App\Services\UserServices')->getAvatar($artist, 'md') }}"
                                    alt="{{ $artist->name }}"
                                    class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                            </div>
                        </a>
                    </div>
                    <h3 class="font-medium mt-3 text-center truncate" title="{{ $artist->name }}">
                        {{ $artist->name }}
                    </h3>
                </div>
            @endforeach

        </div>
    </section>

    <!-- Trending Songs Section -->
    <section class="mb-12">
        <div class="section-header flex items-center justify-between mb-5">
            <h2 class="section-title text-2xl font-bold">List Lagu Populer</h2>

            @if ($popularSongs)
                <a href="{{ route('popular-songs') }}"
                    class="section-link flex items-center gap-1 hover:text-red-500 transition-colors">
                    See All <i class="ti ti-chevron-right text-sm"></i>
                </a>
            @endif

        </div>

        <div class="scroll-container">
            @php
                $index = 0;
            @endphp
            @if ($popularSongs)
                @forelse ($popularSongs as $row)
                    @php
                        $index++;
                        $imageUrl = app(\App\Services\SongServices::class)->getCoverImageS3($row, 'md');
                        $artistArray = app(\App\Services\SongServices::class)::getArtistContributor($row->songContributors);
                    @endphp
                    <div class="scroll-item music-card-item">
                        <div class="relative group overflow-hidden rounded-xl">
                            <div
                                class="absolute top-2 left-2 z-10 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded-full">
                                #{{ $index }}
                            </div>
                            <img src="{{ $imageUrl }}" alt="{{ $row->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)"
                                data-url="{{ route('users.songs.view', ['id' => $row->id]) }}"
                                class="play-song-btn absolute inset-0 flex items-center justify-center">
                                <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="{{ $row->title }}">{{ $row->title }}
                            </h3>
                            <p class="text-sm text-gray-400 truncate" title="{{ $row->artist }}">{{ $row->artist }}
                            </p>
                        </div>
                    </div>

                @empty
                    <small>belum terdapat data</small>
                @endforelse
            @else
                <div>belum terdapat data</div>
            @endif


            {{-- @php
                $trendingSongs = [
                    [
                        'title' => 'Anti-Hero',
                        'artist' => 'Taylor Swift',
                        'img' => 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?q=80&w=300',
                    ],
                    [
                        'title' => 'Blinding Lights',
                        'artist' => 'The Weeknd',
                        'img' => 'https://images.unsplash.com/photo-1504509546545-e000b4a62425?q=80&w=300',
                    ],
                    [
                        'title' => 'Rich Flex',
                        'artist' =>
                        'img' => 'https://images.unsplash.com/photo-1514525253161-7a46d19cd819?q=80&w=300',
                    ],
                    [
                        'title' => 'Levitating',
                        'artist' => 'Dua Lipa',
                        'img' => 'https://images.unsplash.com/photo-1501386761578-eac5c94b800a?q=80&w=300',
                    ],
                    [
                        'title' => 'Shape of You',
                        'artist' => 'Ed Sheeran',
                        'img' => 'https://images.unsplash.com/photo-1468164016595-6108e4c60c8b?q=80&w=300',
                    ],
                    [
                        'title' => 'bad guy',
                        'artist' => 'Billie Eilish',
                        'img' => 'https://images.unsplash.com/photo-1514320291840-2e0a9bf2a9ae?q=80&w=300',
                    ],
                    [
                        'title' => 'Anti-Hero',
                        'artist' => 'Taylor Swift',
                        'img' => 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?q=80&w=300',
                    ],
                    [
                        'title' => 'Blinding Lights',
                        'artist' => 'The Weeknd',
                        'img' => 'https://images.unsplash.com/photo-1504509546545-e000b4a62425?q=80&w=300',
                    ],
                    [
                        'title' => 'Rich Flex',
                        'artist' => 'Drake',
                        'img' => 'https://images.unsplash.com/photo-1514525253161-7a46d19cd819?q=80&w=300',
                    ],
                    [
                        'title' => 'Levitating',
                        'artist' => 'Dua Lipa',
                        'img' => 'https://images.unsplash.com/photo-1501386761578-eac5c94b800a?q=80&w=300',
                    ],
                    [
                        'title' => 'Shape of You',
                        'artist' => 'Ed Sheeran',
                        'img' => 'https://images.unsplash.com/photo-1468164016595-6108e4c60c8b?q=80&w=300',
                    ],
                    [
                        'title' => 'bad guy',
                        'artist' => 'Billie Eilish',
                        'img' => 'https://images.unsplash.com/photo-1514320291840-2e0a9bf2a9ae?q=80&w=300',
                    ],
                ];
            @endphp

            @foreach ($trendingSongs as $index => $song)
                <div class="scroll-item music-card-item">
                    <div class="relative group overflow-hidden rounded-xl">
                        <div
                            class="absolute top-2 left-2 z-10 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded-full">
                            #{{ $index + 1 }}
                        </div>
                        <img src="{{ $song['img'] }}" 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 class="play-song-btn absolute inset-0 flex items-center justify-center">
                            <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="{{ $song['artist'] }}">{{ $song['artist'] }}
                        </p>
                    </div>
                </div>
            @endforeach --}}
        </div>
    </section>

    <!-- Cover Songs Section -->
    <section class="mb-12">
        <div class="section-header flex items-center justify-between mb-5">
            <h2 class="section-title text-2xl font-bold">List Lagu Cover Populer</h2>
            @if ($popularCoverSongs->isNotEmpty())
                <a href="{{ route('covers') }}"
                    class="section-link flex items-center gap-1 hover:text-red-500 transition-colors">
                    See All <i class="ti ti-chevron-right text-sm"></i>
                </a>
            @endif
        </div>

        <div class="scroll-container">
            @if ($popularCoverSongs)
                @php
                    $index = 0;
                @endphp
                @forelse ($popularCoverSongs as $row)
                    @php
                        $index++;
                        $imageUrl = app(\App\Services\SongServices::class)->getCoverImageS3($row, 'md');
                        $artistArray = app(\App\Services\SongServices::class)::getArtistContributor($row->songContributors);
                        $names = array_column($artistArray, 'name');
                        $artistSeparated = implode(', ', $names);

                    @endphp
                    <div class="scroll-item cover-card">
                        <div class="relative group overflow-hidden rounded-xl">
                            <img src="{{ $row->img }}" alt="{{ $row->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/80 to-transparent opacity-40 group-hover:opacity-80 transition-opacity duration-300">
                            </div>
                            <button class="play-song-btn absolute inset-0 flex items-center justify-center">
                                <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
                                class="absolute bottom-0 left-0 right-0 p-3 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-300">
                                <span class="bg-black/50 text-xs px-2 py-1 rounded-full backdrop-blur-sm">Cover Song</span>
                            </div>
                        </div>
                        <div class="mt-3">
                            <h3 class="font-semibold text-base truncate" title="{{ $row->title }}">
                                {{ $row->title }}
                            </h3>
                            <p class="text-sm text-gray-400 truncate" title="{{ $artistSeparated }}">
                                {{ $artistSeparated }}
                            </p>
                            <p class="text-xs text-gray-500 mt-1"> <span
                                    class="text-red-500">{{ $row->cover_version }}</span></p>
                        </div>
                    </div>

                @empty
                    <div>belum terdapat data</div>
                @endforelse
            @else
                <div>belum terdapat data</div>
            @endif
        </div>
    </section>

    <!-- Popular Composers Section -->
    <section class="mb-12">
        <div class="section-header flex items-center justify-between mb-5">
            <h2 class="section-title text-2xl font-bold">List Pencipta Lagu Populer</h2>
            <a href="{{ route('composers') }}"
                class="section-link flex items-center gap-1 hover:text-red-500 transition-colors">
                See All <i class="ti ti-chevron-right text-sm"></i>
            </a>
        </div>

        <div class="scroll-container">


            @foreach ($composers as $composer)
                <div class="scroll-item composer-card">
                    <a href="{{ route('composer.profile', $composer->id) }}" class="block">
                        <div class="relative group">
                            <div
                                class="overflow-hidden rounded-full border-2 border-gray-700 aspect-square group-hover:border-red-500 transition-all duration-300">
                                <img src="{{ app('App\Services\UserServices')->getAvatar($composer, 'md') }}"
                                    alt="{{ $composer->name }}"
                                    class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                            </div>
                        </div>
                        <div class="mt-3 text-center">
                            <h3 class="font-semibold truncate" title="{{ $composer->name }}">{{ $composer->name }}</h3>
                            <p class="text-sm text-gray-400 truncate" title="{{ $composer->genre ?? '' }}">
                                {{ $composer->genre ?? '' }}
                            </p>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>
    </section>

    <!-- New Releases Section -->
    <section class="mb-12">
        <div class="section-header flex items-center justify-between mb-5">
            <h2 class="section-title text-2xl font-bold flex items-center gap-2">
                List Terbaru
                <span class="bg-red-600 text-white text-xs px-2 py-0.5 rounded-full">New</span>
            </h2>
            @if ($newSongs->isNotEmpty())
                <a href="#" class="section-link flex items-center gap-1 hover:text-red-500 transition-colors">
                    See All <i class="ti ti-chevron-right text-sm"></i>
                </a>
            @endif
        </div>

        <div class="scroll-container">

            @if ($newSongs)
                @php
                    $index = 0;
                @endphp
                @forelse ($newSongs as $release)
                    @php
                        $index++;
                        $imageUrl = app(\App\Services\SongServices::class)->getCoverImageS3($release, 'md');
                        $artistArray = app(\App\Services\SongServices::class)::getArtistContributor($release->songContributors);
                        $names = array_column($artistArray, 'name');
                        $artistSeparated = implode(', ', $names);

                    @endphp
                    <div class="scroll-item new-release-card">
                        <div class="relative group overflow-hidden rounded-xl bg-gray-800/50">
                            <div class="absolute top-0 right-0 z-10">
                                <span class="bg-red-600 text-white text-xs px-2 py-1 opacity-80">NEW</span>
                            </div>
                            <img src="{{ $imageUrl }}" alt="{{ $release->title }}"
                                class="w-full aspect-square object-cover transition-transform duration-300 group-hover:scale-110 group-hover:opacity-70">
                            <div
                                class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-40 group-hover:opacity-80 transition-opacity duration-300">
                            </div>
                            <button onclick="viewSong(this)"
                                data-url="{{ route('users.songs.view', ['id' => $release->id]) }}"
                                class="play-song-btn absolute inset-0 flex items-center justify-center">
                                <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
                                class="absolute bottom-0 left-0 right-0 p-3 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-300">
                                <div class="flex justify-between items-center">
                                    <i class="ti ti-calendar text-xs"></i>
                                    <span class="text-xs">{{ $release->release_date }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="mt-3">
                            <h3 class="font-semibold text-base truncate" title="{{ $release->title }}">
                                {{ $release->title }}
                            </h3>
                            <p class="text-sm text-gray-400 truncate" title="{{ $artistSeparated }}">
                                {{ $artistSeparated }}
                            </p>
                            <div class="flex items-center mt-1 text-xs text-gray-500">
                                <i class="ti ti-calendar text-red-500 mr-1"></i>
                                <span>Released {{ $release->release_date }}</span>
                            </div>
                        </div>
                    </div>

                @empty
                    <div>belum terdapat data</div>
                @endforelse
            @else
                <div>belum terdapat data</div>
            @endif


            {{-- @php
                $newReleases = [
                    [
                        'title' => 'Midnight Rain',
                        'artist' => 'Taylor Swift',
                        'date' => 'Oct 21, 2023',
                        'img' => 'https://images.unsplash.com/photo-1494232410401-ad00d5433cfa?q=80&w=300',
                    ],
                    [
                        'title' => 'Last Night',
                        'artist' => 'Morgan Wallen',
                        'date' => 'Oct 20, 2023',
                        'img' => 'https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?q=80&w=300',
                    ],
                    [
                        'title' => 'Flowers',
                        'artist' => 'Miley Cyrus',
                        'date' => 'Oct 19, 2023',
                        'img' => 'https://images.unsplash.com/photo-1453090927415-5f45085b65c0?q=80&w=300',
                    ],
                    [
                        'title' => 'Kill Bill',
                        'artist' => 'SZA',
                        'date' => 'Oct 18, 2023',
                        'img' => 'https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?q=80&w=300',
                    ],
                    [
                        'title' => 'Anti-Hero',
                        'artist' => 'Taylor Swift',
                        'date' => 'Oct 17, 2023',
                        'img' => 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?q=80&w=300',
                    ],
                    [
                        'title' => 'Unholy',
                        'artist' => 'Sam Smith',
                        'date' => 'Oct 16, 2023',
                        'img' => 'https://images.unsplash.com/photo-1496293455970-f8581aae0e3b?q=80&w=300',
                    ],
                    [
                        'title' => 'As It Was',
                        'artist' => 'Harry Styles',
                        'date' => 'Oct 15, 2023',
                        'img' => 'https://images.unsplash.com/photo-1587653263995-422546a7a559?q=80&w=300',
                    ],
                    [
                        'title' => 'About Damn Time',
                        'artist' => 'Lizzo',
                        'date' => 'Oct 14, 2023',
                        'img' => 'https://images.unsplash.com/photo-1526218626217-dc65a29bb444?q=80&w=300',
                    ],
                    [
                        'title' => 'Stay With Me',
                        'artist' => 'Calvin Harris',
                        'date' => 'Oct 13, 2023',
                        'img' => 'https://images.unsplash.com/photo-1571266028997-41675a1b9b1f?q=80&w=300',
                    ],
                    [
                        'title' => 'Break My Soul',
                        'artist' => 'Beyoncé',
                        'date' => 'Oct 12, 2023',
                        'img' => 'https://images.unsplash.com/photo-1513883049090-d91fb58d69e1?q=80&w=300',
                    ],
                ];
            @endphp

            @foreach ($newReleases as $index => $release)
                <div class="scroll-item new-release-card">
                    <div class="relative group overflow-hidden rounded-xl bg-gray-800/50">
                        <div class="absolute top-0 right-0 z-10">
                            <span class="bg-red-600 text-white text-xs px-2 py-1 opacity-80">NEW</span>
                        </div>
                        <img src="{{ $release['img'] }}" alt="{{ $release['title'] }}"
                            class="w-full aspect-square object-cover transition-transform duration-300 group-hover:scale-110 group-hover:opacity-70">
                        <div
                            class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-40 group-hover:opacity-80 transition-opacity duration-300">
                        </div>
                        <button class="play-song-btn absolute inset-0 flex items-center justify-center">
                            <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
                            class="absolute bottom-0 left-0 right-0 p-3 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-300">
                            <div class="flex justify-between items-center">
                                <i class="ti ti-calendar text-xs"></i>
                                <span class="text-xs">{{ $release['date'] }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <h3 class="font-semibold text-base truncate" title="{{ $release['title'] }}">
                            {{ $release['title'] }}</h3>
                        <p class="text-sm text-gray-400 truncate" title="{{ $release['artist'] }}">
                            {{ $release['artist'] }}</p>
                        <div class="flex items-center mt-1 text-xs text-gray-500">
                            <i class="ti ti-calendar text-red-500 mr-1"></i>
                            <span>Released {{ $release['date'] }}</span>
                        </div>
                    </div>
                </div>
            @endforeach --}}
        </div>

    </section>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Set animation delay for scroll items
            document.querySelectorAll('.scroll-item').forEach((item, index) => {
                item.style.setProperty('--index', index);
            });

            // Smooth drag scrolling for horizontal containers
            const sliders = document.querySelectorAll('.scroll-container');

            sliders.forEach(container => {
                container.addEventListener('wheel', (e) => {
                    if (e.deltaY !== 0) {
                        e.preventDefault();
                        container.scrollLeft += e.deltaY;
                    }
                });
            });

            // Category navigation pill click
            const categoryPills = document.querySelectorAll('.category-pill');
            const categoryResults = document.getElementById('categoryResults');
            const categoryTitle = document.getElementById('categoryTitle');
            const categoryGrid = document.getElementById('categoryGrid');
            const clearButton = document.getElementById('clearCategory');
            const mainSections = document.querySelectorAll('section:not(#categoryResults)');

            const songsByCategory = {
                'hip-hop': [{
                        title: 'God\'s Plan',
                        artist: 'Drake',
                        img: 'https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?q=80&w=300'
                    },
                    {
                        title: 'HUMBLE.',
                        artist: 'Kendrick Lamar',
                        img: 'https://images.unsplash.com/photo-1514525253161-7a46d19cd819?q=80&w=300'
                    },
                    {
                        title: 'Sicko Mode',
                        artist: 'Travis Scott',
                        img: 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?q=80&w=300'
                    }
                ],
                'pop': [{
                        title: 'Blinding Lights',
                        artist: 'The Weeknd',
                        img: 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?q=80&w=300'
                    },
                    {
                        title: 'Watermelon Sugar',
                        artist: 'Harry Styles',
                        img: 'https://images.unsplash.com/photo-1496293455970-f8581aae0e3b?q=80&w=300'
                    },
                    {
                        title: 'Levitating',
                        artist: 'Dua Lipa',
                        img: 'https://images.unsplash.com/photo-1514525253161-7a46d19cd819?q=80&w=300'
                    }
                ],
                'rock': [{
                        title: 'Bohemian Rhapsody',
                        artist: 'Queen',
                        img: 'https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?q=80&w=300'
                    },
                    {
                        title: 'Stairway to Heaven',
                        artist: 'Led Zeppelin',
                        img: 'https://images.unsplash.com/photo-1453090927415-5f45085b65c0?q=80&w=300'
                    },
                    {
                        title: 'Sweet Child O\' Mine',
                        artist: 'Guns N\' Roses',
                        img: 'https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?q=80&w=300'
                    }
                ],
                'jazz': [{
                        title: 'Take Five',
                        artist: 'Dave Brubeck',
                        img: 'https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?q=80&w=300'
                    },
                    {
                        title: 'So What',
                        artist: 'Miles Davis',
                        img: 'https://images.unsplash.com/photo-1453090927415-5f45085b65c0?q=80&w=300'
                    },
                    {
                        title: 'Autumn Leaves',
                        artist: 'Bill Evans',
                        img: 'https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?q=80&w=300'
                    }
                ]
            };

            // Category pill click handler
            categoryPills.forEach(pill => {
                pill.addEventListener('click', function() {
                    const category = this.dataset.category;

                    if (category === 'untuk-anda') {
                        clearCategory();
                        return;
                    }

                    // Update active state
                    categoryPills.forEach(p => p.classList.remove('active'));
                    this.classList.add('active');

                    // Show category results
                    showCategoryResults(category);
                });
            });

            // Clear category handler
            clearButton.addEventListener('click', clearCategory);

            function showCategoryResults(category) {
                const songs = songsByCategory[category] || [];
                const categoryName = document.querySelector(`[data-category="${category}"]`).textContent;

                // Update title
                categoryTitle.textContent = categoryName;

                // Generate songs HTML
                categoryGrid.innerHTML = songs.map(song => `
                    <div class="music-card group cursor-pointer">
                        <div class="music-card-img relative overflow-hidden rounded-lg">
                            <img src="${song.img}" alt="${song.title}" class="w-full aspect-square object-cover">
                            <div class="card-overlay">
                                <button class="play-button">
                                    <i class="ti ti-player-play"></i>
                                </button>
                            </div>
                        </div>
                        <div class="music-card-content">
                            <h3 class="music-card-title">${song.title}</h3>
                            <p class="music-card-subtitle">${song.artist}</p>
                        </div>
                    </div>
                `).join('');

                // Hide main sections and show results
                mainSections.forEach(section => section.style.display = 'none');
                categoryResults.style.display = 'block';

                // Scroll to results
                categoryResults.scrollIntoView({
                    behavior: 'smooth'
                });
            }

            function clearCategory() {
                // Reset to "Untuk Anda"
                categoryPills.forEach(p => p.classList.remove('active'));
                document.querySelector('[data-category="untuk-anda"]').classList.add('active');

                // Show main sections and hide results
                mainSections.forEach(section => section.style.display = 'block');
                categoryResults.style.display = 'none';
            }

            // Play buttons hover effects
            const musicCards = document.querySelectorAll('.music-card');
            musicCards.forEach(card => {
                const overlay = card.querySelector('.card-overlay');
                const playButton = card.querySelector('.play-button');

                if (overlay && playButton) {
                    card.addEventListener('mouseenter', function() {
                        overlay.classList.add('opacity-100');
                        playButton.classList.add('opacity-100');
                        playButton.style.transform = 'translateY(0)';
                    });

                    card.addEventListener('mouseleave', function() {
                        overlay.classList.remove('opacity-100');
                        playButton.classList.remove('opacity-100');
                        playButton.style.transform = 'translateY(10px)';
                    });
                }
            });
        });
    </script>
    <script>
        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