@extends('layouts.landing-page')

@section('content')
    <!-- Breadcrumb Navigation -->
    <div class="mb-6">
        <nav class="flex items-center gap-2 text-sm text-gray-400 mb-4">
            <a href="" class="hover:text-white transition-colors">Home</a>
            <i class="ti ti-chevron-right text-xs"></i>
            <a href="" class="hover:text-white transition-colors">Explore</a>
            <i class="ti ti-chevron-right text-xs"></i>
            <span class="text-white">Song Versions</span>
        </nav>
        
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-white mb-2">Versi Lainnya</h1>
            <p class="text-gray-400">Temukan berbagai versi dan cover dari lagu favorit Anda</p>
        </div>
    </div>

    <!-- Original Song Section -->
    <section class="mb-12">
        <div class="section-header flex items-center justify-between mb-6">
            <h2 class="section-title text-2xl font-bold">Original Song</h2>
        </div>
        
        <div class="bg-gray-900/50 backdrop-blur-sm border border-gray-700/50 rounded-xl p-6">
            <div class="flex items-center justify-between gap-8">
                <!-- Left Section - Song Info -->
                <div class="flex items-center gap-6 flex-1">
                    <div class="relative group">
                        <img src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=200&h=200&fit=crop" 
                             alt="Song Cover" 
                             class="w-20 h-20 rounded-lg object-cover">
                        <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg flex items-center justify-center">
                            <button class="w-10 h-10 bg-red-600 hover:bg-red-700 rounded-full flex items-center justify-center transition-colors">
                                <i class="ti ti-player-play text-white"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="flex-1">
                        <div class="text-xs text-gray-400 uppercase tracking-wide mb-1">Original Song</div>
                        <h3 class="text-xl font-bold text-white mb-2">Blinding Lights</h3>
                        <p class="text-gray-400 mb-3">The Weeknd</p>
                        
                        <div class="flex items-center gap-6 text-sm">
                            <div class="flex items-center gap-2">
                                <button class="flex items-center gap-1 text-gray-400 hover:text-red-500 transition-colors">
                                    <i class="ti ti-heart"></i>
                                    <span>2.4M</span>
                                </button>
                            </div>
                            <div class="flex items-center gap-2 text-gray-400">
                                <i class="ti ti-calendar"></i>
                                <span>2019</span>
                            </div>
                            <div class="flex items-center gap-2 text-gray-400">
                                <i class="ti ti-clock"></i>
                                <span>3:21</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Right Section - Artist Info -->
                <div class="flex items-center gap-4 bg-gray-800/30 rounded-lg p-4 min-w-80">
                    <img src="https://images.unsplash.com/photo-1566753323558-f4e0952af115?w=100&h=100&fit=crop" 
                         alt="Artist" 
                         class="w-12 h-12 rounded-full object-cover">
                    
                    <div class="flex-1">
                        <div class="flex items-center gap-2 mb-1">
                            <h4 class="font-semibold text-white">The Weeknd</h4>
                            <i class="ti ti-badge-filled text-blue-500 text-sm"></i>
                        </div>
                        <p class="text-sm text-gray-400">1.2M followers</p>
                    </div>
                    
                    <button class="bg-white text-black hover:bg-gray-200 px-4 py-2 rounded-full font-medium text-sm transition-colors">
                        Follow
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- Sorting and Filter Section -->
    <section class="mb-8">
        <div class="flex items-center justify-between gap-4">
            <div class="flex items-center gap-4">
                <div class="flex items-center gap-2">
                    <span class="text-gray-400 text-sm">Sort by:</span>
                    <select class="bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-sm text-white focus:border-red-500 focus:outline-none">
                        <option>Most Popular</option>
                        <option>Newest</option>
                        <option>Oldest</option>
                        <option>Artist Name</option>
                    </select>
                </div>
                
                <div class="flex items-center gap-2">
                    <span class="text-gray-400 text-sm">Type:</span>
                    <select class="bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-sm text-white focus:border-red-500 focus:outline-none">
                        <option>All Versions</option>
                        <option>Covers</option>
                        <option>Remixes</option>
                        <option>Acoustic</option>
                        <option>Live</option>
                    </select>
                </div>
            </div>
            
            <div class="flex items-center gap-2 text-gray-400 text-sm">
                <span>Found 25 versions</span>
            </div>
        </div>
    </section>

    <!-- Song Versions Grid -->
    <section class="mb-12">
        <div class="section-header flex items-center justify-between mb-6">
            <h2 class="section-title text-2xl font-bold">All Versions</h2>
        </div>
        
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-5 gap-4">
            @php
                $songVersions = [
                    [
                        'title' => 'Blinding Lights (Acoustic)',
                        'artist' => 'John Mayer',
                        'type' => 'Acoustic Version',
                        'duration' => '3:45',
                        'views' => '850K',
                        'image' => 'https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=300&h=300&fit=crop'
                    ],
                    [
                        'title' => 'Blinding Lights (Remix)',
                        'artist' => 'Calvin Harris',
                        'type' => 'Electronic Remix',
                        'duration' => '4:12',
                        'views' => '1.2M',
                        'image' => 'https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=300&h=300&fit=crop'
                    ],
                    [
                        'title' => 'Blinding Lights (Live)',
                        'artist' => 'The Weeknd',
                        'type' => 'Live Performance',
                        'duration' => '3:52',
                        'views' => '2.1M',
                        'image' => 'https://images.unsplash.com/photo-1453090927415-5f45085b65c0?w=300&h=300&fit=crop'
                    ],
                    [
                        'title' => 'Blinding Lights (Cover)',
                        'artist' => 'Billie Eilish',
                        'type' => 'Cover Version',
                        'duration' => '3:18',
                        'views' => '950K',
                        'image' => 'https://images.unsplash.com/photo-1494232410401-ad00d5433cfa?w=300&h=300&fit=crop'
                    ],
                    [
                        'title' => 'Blinding Lights (Piano)',
                        'artist' => 'Ludovico Einaudi',
                        'type' => 'Piano Cover',
                        'duration' => '4:05',
                        'views' => '720K',
                        'image' => 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=300&h=300&fit=crop'
                    ],
                    [
                        'title' => 'Blinding Lights (Orchestral)',
                        'artist' => 'London Symphony',
                        'type' => 'Orchestral Version',
                        'duration' => '5:20',
                        'views' => '580K',
                        'image' => 'https://images.unsplash.com/photo-1465281815158-6fde50ab8ade?w=300&h=300&fit=crop'
                    ],
                    [
                        'title' => 'Blinding Lights (Country)',
                        'artist' => 'Keith Urban',
                        'type' => 'Country Version',
                        'duration' => '3:35',
                        'views' => '430K',
                        'image' => 'https://images.unsplash.com/photo-1487180144351-b8472da7d491?w=300&h=300&fit=crop'
                    ],
                    [
                        'title' => 'Blinding Lights (Jazz)',
                        'artist' => 'Norah Jones',
                        'type' => 'Jazz Cover',
                        'duration' => '4:18',
                        'views' => '380K',
                        'image' => 'https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=300&h=300&fit=crop'
                    ],
                    [
                        'title' => 'Blinding Lights (Reggae)',
                        'artist' => 'Bob Marley Jr.',
                        'type' => 'Reggae Version',
                        'duration' => '3:58',
                        'views' => '620K',
                        'image' => 'https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=300&h=300&fit=crop'
                    ],
                    [
                        'title' => 'Blinding Lights (Spanish)',
                        'artist' => 'Bad Bunny',
                        'type' => 'Spanish Cover',
                        'duration' => '3:25',
                        'views' => '890K',
                        'image' => 'https://images.unsplash.com/photo-1453090927415-5f45085b65c0?w=300&h=300&fit=crop'
                    ],
                    [
                        'title' => 'Blinding Lights (Metal)',
                        'artist' => 'Metallica',
                        'type' => 'Metal Cover',
                        'duration' => '4:45',
                        'views' => '1.1M',
                        'image' => 'https://images.unsplash.com/photo-1494232410401-ad00d5433cfa?w=300&h=300&fit=crop'
                    ],
                    [
                        'title' => 'Blinding Lights (Violin)',
                        'artist' => 'Lindsey Stirling',
                        'type' => 'Violin Cover',
                        'duration' => '3:42',
                        'views' => '670K',
                        'image' => 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=300&h=300&fit=crop'
                    ],
                    [
                        'title' => 'Blinding Lights (Unplugged)',
                        'artist' => 'Ed Sheeran',
                        'type' => 'Unplugged Version',
                        'duration' => '3:28',
                        'views' => '1.5M',
                        'image' => 'https://images.unsplash.com/photo-1465281815158-6fde50ab8ade?w=300&h=300&fit=crop'
                    ],
                    [
                        'title' => 'Blinding Lights (Dubstep)',
                        'artist' => 'Skrillex',
                        'type' => 'Dubstep Remix',
                        'duration' => '4:32',
                        'views' => '920K',
                        'image' => 'https://images.unsplash.com/photo-1487180144351-b8472da7d491?w=300&h=300&fit=crop'
                    ],
                    [
                        'title' => 'Blinding Lights (K-Pop)',
                        'artist' => 'BTS',
                        'type' => 'K-Pop Version',
                        'duration' => '3:36',
                        'views' => '2.3M',
                        'image' => 'https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=300&h=300&fit=crop'
                    ],
                    [
                        'title' => 'Blinding Lights (Classical)',
                        'artist' => 'Yo-Yo Ma',
                        'type' => 'Classical Version',
                        'duration' => '4:55',
                        'views' => '450K',
                        'image' => 'https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=300&h=300&fit=crop'
                    ],
                    [
                        'title' => 'Blinding Lights (House)',
                        'artist' => 'David Guetta',
                        'type' => 'House Remix',
                        'duration' => '5:15',
                        'views' => '1.8M',
                        'image' => 'https://images.unsplash.com/photo-1453090927415-5f45085b65c0?w=300&h=300&fit=crop'
                    ],
                    [
                        'title' => 'Blinding Lights (Blues)',
                        'artist' => 'B.B. King Jr.',
                        'type' => 'Blues Version',
                        'duration' => '4:02',
                        'views' => '320K',
                        'image' => 'https://images.unsplash.com/photo-1494232410401-ad00d5433cfa?w=300&h=300&fit=crop'
                    ],
                    [
                        'title' => 'Blinding Lights (Trap)',
                        'artist' => 'Travis Scott',
                        'type' => 'Trap Remix',
                        'duration' => '3:48',
                        'views' => '1.3M',
                        'image' => 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=300&h=300&fit=crop'
                    ],
                    [
                        'title' => 'Blinding Lights (Folk)',
                        'artist' => 'Bon Iver',
                        'type' => 'Folk Version',
                        'duration' => '4:12',
                        'views' => '280K',
                        'image' => 'https://images.unsplash.com/photo-1465281815158-6fde50ab8ade?w=300&h=300&fit=crop'
                    ],
                    [
                        'title' => 'Blinding Lights (Gospel)',
                        'artist' => 'Kirk Franklin',
                        'type' => 'Gospel Version',
                        'duration' => '4:38',
                        'views' => '510K',
                        'image' => 'https://images.unsplash.com/photo-1487180144351-b8472da7d491?w=300&h=300&fit=crop'
                    ],
                    [
                        'title' => 'Blinding Lights (Funk)',
                        'artist' => 'Bruno Mars',
                        'type' => 'Funk Version',
                        'duration' => '3:55',
                        'views' => '740K',
                        'image' => 'https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=300&h=300&fit=crop'
                    ],
                    [
                        'title' => 'Blinding Lights (Lofi)',
                        'artist' => 'ChilledCow',
                        'type' => 'Lofi Hip Hop',
                        'duration' => '3:21',
                        'views' => '1.9M',
                        'image' => 'https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=300&h=300&fit=crop'
                    ],
                    [
                        'title' => 'Blinding Lights (8-bit)',
                        'artist' => 'Chiptune Artists',
                        'type' => '8-bit Version',
                        'duration' => '3:21',
                        'views' => '390K',
                        'image' => 'https://images.unsplash.com/photo-1453090927415-5f45085b65c0?w=300&h=300&fit=crop'
                    ],
                    [
                        'title' => 'Blinding Lights (Ambient)',
                        'artist' => 'Brian Eno',
                        'type' => 'Ambient Version',
                        'duration' => '6:45',
                        'views' => '180K',
                        'image' => 'https://images.unsplash.com/photo-1494232410401-ad00d5433cfa?w=300&h=300&fit=crop'
                    ]
                ];
            @endphp
            
            @foreach($songVersions as $index => $version)
                <div class="music-card group cursor-pointer">
                    <div class="music-card-img relative overflow-hidden rounded-lg mb-3">
                        <img src="{{ $version['image'] }}" 
                             alt="{{ $version['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="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>
                        
                        <!-- Version Type Badge -->
                        <div class="absolute top-2 left-2 bg-black/70 backdrop-blur-sm text-white text-xs px-2 py-1 rounded-full">
                            {{ $version['type'] }}
                        </div>
                        
                        <!-- Duration -->
                        <div class="absolute bottom-2 right-2 bg-black/70 backdrop-blur-sm text-white text-xs px-2 py-1 rounded-full">
                            {{ $version['duration'] }}
                        </div>
                    </div>
                    
                    <div class="music-card-content">
                        <h3 class="font-semibold text-sm text-white truncate mb-1" title="{{ $version['title'] }}">
                            {{ $version['title'] }}
                        </h3>
                        <p class="text-xs text-gray-400 truncate mb-1" title="{{ $version['artist'] }}">
                            {{ $version['artist'] }}
                        </p>
                        <p class="text-xs text-gray-500">
                            {{ $version['views'] }} views
                        </p>
                    </div>
                </div>
            @endforeach
        </div>
        
        <!-- Load More Button -->
        <div class="text-center mt-8">
            <button class="bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-lg font-medium transition-colors border border-gray-600">
                Load More Versions
            </button>
        </div>
    </section>

@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Play buttons hover effects
            const musicCards = document.querySelectorAll('.music-card');
            musicCards.forEach(card => {
                const playButton = card.querySelector('.w-12.h-12');

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

                    card.addEventListener('mouseleave', function() {
                        playButton.classList.remove('opacity-100');
                        playButton.style.transform = 'translateY(10px)';
                    });
                    
                    playButton.addEventListener('click', function(e) {
                        e.preventDefault();
                        const title = card.querySelector('h3').textContent;
                        console.log('Playing:', title);
                        // Add your play logic here
                    });
                }
            });
            
            // Sort functionality
            const sortSelects = document.querySelectorAll('select');
            sortSelects.forEach(select => {
                select.addEventListener('change', function() {
                    console.log('Sort changed:', this.value);
                    // Add your sort logic here
                });
            });
        });
    </script>
@endsection