@extends('layouts.landing-page')

@section('content')
    <!-- Explore Navigation -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold mb-2">Cari</h1>
        <p class="text-gray-300 text-base">
            berikut hasil pencarian dengan kata "{{ $cari }}"
        </p>
    </div>

    <section class="mb-11">
        <div class="section-header flex items-center justify-between mb-5">
            <h2 class="section-title text-2xl font-bold text-white">Hasil pencarian lagu</h2>
        </div>

        <ul class="divide-y divide-gray-800">

            @forelse ($songs as $song)
                @php
                    $imageUrl = app(\App\Services\SongServices::class)->getCoverImageS3($song, 'sm');
                    $artistArray = app(\App\Services\SongServices::class)::getArtistContributor(
                        $song->songContributors,
                    );
                    $names = array_column($artistArray, 'name');
                    $artistSeparated = implode(', ', $names);
                    $composerName =
                        $song->songContributors
                            ->where('role', 'Composer')
                            ->pluck('user.name')
                            ->filter()
                            ->implode(', ') ?? '';

                    if (empty($composerName)) {
                        $composerName = '';
                    }
                @endphp
                <li class="flex items-center gap-3 py-3 hover:bg-gray-800 rounded-lg px-2 transition cursor-pointer"
                    data-url="{{ route('users.songs.view', ['id' => $song->id]) }}" onclick="viewUrl(this)">
                    <img src="{{ $imageUrl }}" alt="{{ $song->title }}"
                        class="w-12 h-12 rounded object-cover flex-shrink-0">
                    <div class="flex-1">
                        <h3 class="text-sm font-semibold text-white">{{ $song->title }} </h3>
                        <p class="text-xs text-gray-300">
                            {{ $artistSeparated }} {{ optional($song->genre)->name ? '• ' . $song->genre->name : '' }}
                        </p>
                        <div class="text-xs text-gray-400">Cipt. {{ $composerName }}</div>

                    </div>
                    <span class="text-gray-500 group-hover:text-white transition">
                        ➔
                    </span>
                </li>
            @empty
                <div class="text-sm mt-10"> data tidak ditemukan</div>
            @endforelse

        </ul>

        <div class="text-sm mt-5">
            {{ $songs->links() }}
        </div>


    </section>




    <section class="mb-11">
        <div class="section-header flex items-center justify-between mb-5">
            <h2 class="section-title text-2xl font-bold">Hasil pencarian Artis , Cover , Composer</h2>

        </div>

        <ul class="divide-y divide-gray-800">

            @forelse ($users as $user)
                @php
                    $userUrl = route('artist.profile', $user->id);
                    foreach($user->roles as $role){
                        if($role->name=='Composer'){
                            $userUrl = route('composer.profile', $user->id);
                        }
                    }
                @endphp

                <li class="flex items-center gap-3 py-3 hover:bg-gray-800 rounded-lg px-2 transition cursor-pointer"
                    data-url="{{$userUrl}}"
                    onclick="viewUrl(this)">
                    <img src="{{ app('App\Services\UserServices')->getAvatar($user, 'sm') }}" alt="{{ $user->name }}"
                        class="w-10 h-10 rounded-full object-cover flex-shrink-0 me-2">

                    <div class="flex-1">
                        <h3 class="text-sm font-semibold text-white">{{ $user->name }}</h3>

                        <div class="flex flex-wrap gap-1 mt-1">
                            @foreach ($user->roles as $role)
                                <span class="text-xs text-white px-2 rounded-xl bg-red-600">
                                    {{ $role->name }}
                                </span>
                            @endforeach
                        </div>
                    </div>

                    <span class="text-gray-500 group-hover:text-white transition">
                        ➔
                    </span>
                </li>

            @empty
                <div class="text-sm mt-10"> data tidak ditemukan</div>
            @endforelse


        </ul>

        <div class="text-sm mt-5">
            {{ $users->links() }}
        </div>

    </section>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Category 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');

                    // Here you would filter content based on the selected category
                });
            });

            // Toggle menu function
            window.toggleMenu = function(menuId) {
                const menu = document.getElementById(menuId);
                if (menu) {
                    menu.classList.toggle('hidden');

                    // Close when clicking outside
                    const closeMenu = function(e) {
                        if (!menu.contains(e.target) && !e.target.closest(
                                `[onclick="toggleMenu('${menuId}')"]`)) {
                            menu.classList.add('hidden');
                            document.removeEventListener('click', closeMenu);
                        }
                    };

                    document.addEventListener('click', closeMenu);
                }
            };

            // Add animation delay to grid 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;
                    }
                });
            });

            // Initialize AOS animation library if it exists
            if (typeof AOS !== 'undefined') {
                AOS.init({
                    duration: 800,
                    once: true
                });
            }
        });
    </script>
    <script>
        function viewUrl(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>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const elMain = document.getElementById('mainContent');
            elMain.classList.add('w-full');
        });
    </script>
@endsection