@extends('layouts.landing-page')

@section('content')
    <!-- Page Header -->
    <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">Popular Songs</h2>
            <div class="text-gray-400">Top trending tracks loved by our community</div>
        </div>
    </div>

    <!-- Category Navigation -->
    <div class="category-nav mb-6 scrollable-container" data-aos="fade-up" data-aos-delay="100">
        <div class="category-pill active">All</div>
        @foreach ($genres as $row)
            <div class="category-pill">{{ $row->name }}</div>
        @endforeach
        {{-- <div class="category-pill">Pop</div>
        <div class="category-pill">Rock</div>
        <div class="category-pill">Hip Hop</div>
        <div class="category-pill">R&B</div>
        <div class="category-pill">Electronic</div>
        <div class="category-pill">Jazz</div>
        <div class="category-pill">Classical</div> --}}
    </div>

    <!-- Popular 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">Popular Tracks</h2>
        </div>

        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-5">

            @php
                $index = 0;
            @endphp
            @forelse ($songs as $row)
                @php
                    $index++;
                    $i = $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 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="{{ $row->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">{{ $row->release_date->format('M d, Y') }}</span>
                            </div>
                        </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>
                        {{-- <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 {{ $row->release_date->format('M d, Y') }}</span>
                        </div> --}}
                    </div>
                </div>

                {{-- <div class="scroll-item music-card-item" id="recently-item-music" data-id="123" data-aos="fade-up"
                    data-aos-delay="{{ $index * 50 }}">
                    <div class="relative group overflow-hidden rounded-lg">

                        <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 }}" loading="lazy"
                            class="w-full aspect-square object-cover object-center
                            transition-transform duration-300 group-hover:scale-105
                            rounded-lg shadow-md">
                        <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"
                            {{ Auth::guest() ? 'data-login-required=true onclick=window.location.href=\'' . route('login') . '\'' : '' }}
                            data-title="{{ $row->title }} #{{ $i }}"
                            data-artist="Trending Artist #{{ $i }}" data-cover="{{ $imageUrl }}"
                            data-id="{{ $i + 100 }}" 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="{{ $row->title }}">{{ $row->title }}
                        </h3>
                        <p class="text-sm text-gray-400 truncate" title="{{ $artistSeparated }}">{{ $artistSeparated }}
                        </p>
                    </div>
                </div> --}}
            @empty
            @endforelse



        </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">
                New Hits
                <span class="bg-red-600 text-white text-xs px-2 py-0.5 rounded-full">New</span>
            </h2>
        </div>

        <div class="mb-8">

            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">

                @php
                    $index = 0;
                @endphp
                @forelse ($newHits as $row)
                    @php
                        $index++;
                        $i = $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="bg-[var(--color-bg-card)] rounded-lg overflow-hidden group hover:bg-[var(--color-bg-hover)] transition duration-300">
                        <div class="relative">
                            <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="{{ $row->title }}"
                                class="w-full aspect-square object-cover">
                            <div
                                class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                                <button
                                    class="w-12 h-12 rounded-full bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] flex items-center justify-center transform translate-y-2 group-hover:translate-y-0 transition-transform">
                                    <i class="ti ti-player-play text-xl"></i>
                                </button>
                            </div>
                            <div class="absolute bottom-2 left-2">
                                <span
                                    class="bg-black/50 text-white/90 text-xs px-2 py-1 rounded-full">{{ \Carbon\Carbon::parse($row->release_date)->diffForHumans() }}</span>
                            </div>
                        </div>
                        <div class="p-3">
                            <div class="font-medium truncate">{{ $row->title }}</div>
                            <div class="text-sm text-gray-400 truncate mt-1">{{ $artistSeparated }}</div>
                        </div>
                    </div>

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

                {{-- @php
                    $recentSongs = [
                        [
                            'title' => 'Blinding Lights',
                            'artist' => 'The Weeknd',
                            'album' => 'After Hours',
                            'img' => 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?q=80&w=300',
                            'played' => 'Today'
                        ],
                        [
                            'title' => 'Bad Guy',
                            'artist' => 'Billie Eilish',
                            'album' => 'When We All Fall Asleep, Where Do We Go?',
                            'img' => 'https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?q=80&w=300',
                            'played' => 'Today'
                        ],
                        [
                            'title' => 'Stay',
                            'artist' => 'The Kid LAROI, Justin Bieber',
                            'album' => 'F*CK LOVE 3: OVER YOU',
                            'img' => 'https://images.unsplash.com/photo-1514525253161-7a46d19cd819?q=80&w=300',
                            'played' => 'Yesterday'
                        ],
                        [
                            'title' => 'Levitating',
                            'artist' => 'Dua Lipa',
                            'album' => 'Future Nostalgia',
                            'img' => 'https://images.unsplash.com/photo-1496293455970-f8581aae0e3b?q=80&w=300',
                            'played' => 'Yesterday'
                        ],
                        [
                            'title' => 'Anti-Hero',
                            'artist' => 'Taylor Swift',
                            'album' => 'Midnights',
                            'img' => 'https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?q=80&w=300',
                            'played' => '2 days ago'
                        ],
                        [
                            'title' => 'As It Was',
                            'artist' => 'Harry Styles',
                            'album' => "Harry's House",
                            'img' => 'https://images.unsplash.com/photo-1501612780327-45045538702b?q=80&w=300',
                            'played' => '2 days ago'
                        ],
                        [
                            'title' => 'Shivers',
                            'artist' => 'Ed Sheeran',
                            'album' => '=',
                            'img' => 'https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?q=80&w=300',
                            'played' => '3 days ago'
                        ],
                        [
                            'title' => 'STAY',
                            'artist' => 'The Kid LAROI, Justin Bieber',
                            'album' => 'F*CK LOVE 3: OVER YOU',
                            'img' => 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?q=80&w=300',
                            'time' => '2:21',
                            'played' => '3 days ago'
                        ],
                        [
                            'title' => 'Easy On Me',
                            'artist' => 'Adele',
                            'album' => '30',
                            'img' => 'https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?q=80&w=300',
                            'played' => '4 days ago'
                        ],
                        [
                            'title' => 'Woman',
                            'artist' => 'Doja Cat',
                            'album' => 'Planet Her',
                            'img' => 'https://images.unsplash.com/photo-1514525253161-7a46d19cd819?q=80&w=300',
                            'played' => '4 days ago'
                        ],
                        [
                            'title' => 'INDUSTRY BABY',
                            'artist' => 'Lil Nas X, Jack Harlow',
                            'album' => 'MONTERO',
                            'img' => 'https://images.unsplash.com/photo-1496293455970-f8581aae0e3b?q=80&w=300',
                            'played' => '5 days ago'
                        ],
                        [
                            'title' => 'MONTERO (Call Me By Your Name)',
                            'artist' => 'Lil Nas X',
                            'album' => 'MONTERO',
                            'img' => 'https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?q=80&w=300',
                            'played' => '5 days ago'
                        ],
                        [
                            'title' => 'good 4 u',
                            'artist' => 'Olivia Rodrigo',
                            'album' => 'SOUR',
                            'img' => 'https://images.unsplash.com/photo-1501612780327-45045538702b?q=80&w=300',
                            'played' => '6 days ago'
                        ],
                        [
                            'title' => 'Kiss Me More',
                            'artist' => 'Doja Cat ft. SZA',
                            'album' => 'Planet Her',
                            'img' => 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?q=80&w=300',
                            'played' => '6 days ago'
                        ],
                        [
                            'title' => 'Peaches',
                            'artist' => 'Justin Bieber ft. Daniel Caesar, Giveon',
                            'album' => 'Justice',
                            'img' => 'https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?q=80&w=300',
                            'played' => '1 week ago'
                        ],
                        [
                            'title' => 'drivers license',
                            'artist' => 'Olivia Rodrigo',
                            'album' => 'SOUR',
                            'img' => 'https://images.unsplash.com/photo-1514525253161-7a46d19cd819?q=80&w=300',
                            'played' => '1 week ago'
                        ],
                        [
                            'title' => 'Butter',
                            'artist' => 'BTS',
                            'album' => 'Butter',
                            'img' => 'https://images.unsplash.com/photo-1496293455970-f8581aae0e3b?q=80&w=300',
                            'played' => '1 week ago'
                        ],
                        [
                            'title' => 'Mood',
                            'artist' => '24kGoldn ft. iann dior',
                            'album' => 'El Dorado',
                            'img' => 'https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?q=80&w=300',
                            'played' => '1 week ago'
                        ],
                        [
                            'title' => 'Save Your Tears',
                            'artist' => 'The Weeknd',
                            'album' => 'After Hours',
                            'img' => 'https://images.unsplash.com/photo-1501612780327-45045538702b?q=80&w=300',
                            'played' => '1 week ago'
                        ],
                        [
                            'title' => 'Heartbreak Anniversary',
                            'artist' => 'Giveon',
                            'album' => 'Take Time',
                            'img' => 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?q=80&w=300',
                            'played' => '2 weeks ago'
                        ],
                    ];
                @endphp

                @foreach ($recentSongs as $index => $song)
                    <div class="bg-[var(--color-bg-card)] rounded-lg overflow-hidden group hover:bg-[var(--color-bg-hover)] transition duration-300">
                        <div class="relative">
                            <img src="{{ $song['img'] }}" alt="{{ $song['title'] }}" class="w-full aspect-square object-cover">
                            <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                                <button class="w-12 h-12 rounded-full bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] flex items-center justify-center transform translate-y-2 group-hover:translate-y-0 transition-transform">
                                    <i class="ti ti-player-play text-xl"></i>
                                </button>
                            </div>
                            <div class="absolute bottom-2 left-2">
                                <span class="bg-black/50 text-white/90 text-xs px-2 py-1 rounded-full">{{ $song['played'] }}</span>
                            </div>
                        </div>
                        <div class="p-3">
                            <div class="font-medium truncate">{{ $song['title'] }}</div>
                            <div class="text-sm text-gray-400 truncate mt-1">{{ $song['artist'] }}</div>
                        </div>
                    </div>
                @endforeach --}}
            </div>

        </div>


    </section>
@endsection

@section('scripts')
    <script>
        window.App = {
            loggedIn: @json(Auth::check())
        };
    </script>

    <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');

            categoryPills.forEach(pill => {
                pill.addEventListener('click', function() {
                    categoryPills.forEach(p => p.classList.remove('active'));
                    this.classList.add('active');
                });
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const slider = document.querySelector('.scrollable-container');
            let isDown = false;
            let startX;
            let scrollLeft;

            slider.addEventListener('mousedown', (e) => {
                isDown = true;
                slider.classList.add('active');
                startX = e.pageX - slider.offsetLeft;
                scrollLeft = slider.scrollLeft;
            });

            slider.addEventListener('mouseleave', () => {
                isDown = false;
                slider.classList.remove('active');
            });

            slider.addEventListener('mouseup', () => {
                isDown = false;
                slider.classList.remove('active');
            });

            slider.addEventListener('mousemove', (e) => {
                if (!isDown) return;
                e.preventDefault();
                const x = e.pageX - slider.offsetLeft;
                const walk = (x - startX) * 1.5; // scroll speed
                slider.scrollLeft = scrollLeft - walk;
            });
        });
    </script>
@endsection