@extends('layouts.landing-page')

@section('content')
    @php
        $bgUrl = app(\App\Services\UserServices::class)->getBgProfile($artist, 'lg');
        $avatarUrl = app(\App\Services\UserServices::class)->getAvatar($artist, 'md');
        $genres = app(\App\Services\UserServices::class)->getAllGenre($artist);
        $roleArray = $artist->getRoleNames();
        $roleContent = '';
        foreach ($roleArray as $role) {
            if ($role == 'Composer') {
                $roleContent =
                    $roleContent .
                    '<span
                    class="bg-red-900/30 text-red-300 px-3 py-1 rounded-full text-sm font-medium border border-red-800">
                    🎵 Composer
                </span>';
            }
            if ($role == 'Artist') {
                $roleContent =
                    $roleContent .
                    '<span
                    class="bg-gray-800 text-gray-300 px-3 py-1 rounded-full text-sm font-medium border border-gray-700">
                    🎤 Artist
                </span>';
            }
            if ($role == 'Cover Creator') {
                $roleContent =
                    $roleContent .
                    '<span
                    class="bg-gray-800 text-gray-300 px-3 py-1 rounded-full text-sm font-medium border border-gray-700">
                    📹 Cover Creator
                </span>';
            }
        }
    @endphp

    <div class="artist-profile-content">
        <div class="relative mb-16 overflow-hidden">
            <div class="relative h-[600px] md:h-[700px] w-full">
                <div class="absolute inset-0">

                    {{-- <img src="{{ $bgUrl }}" class="w-full h-full object-cover" alt="{{ $artist->name }} Banner"> --}}
                    @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>

            </div>

            <div class="relative -mt-80 z-20">
                <div class="w-full">
                    <div class="relative bg-transparent overflow-hidden">
                        <div
                            class="absolute inset-0 bg-gradient-to-t from-black via-black/80 to-transparent backdrop-blur-sm">
                        </div>

                        <div class="p-4 md:p-6 pb-4 relative z-10">
                            <div class="flex flex-col lg:flex-row gap-6">
                                <div class="flex flex-col sm:flex-row gap-6 flex-1">
                                    <div class="relative flex justify-center sm:justify-start">
                                        <div
                                            class="relative w-32 h-32 md:w-40 md:h-40 rounded-full overflow-hidden border-4 border-white shadow-lg bg-white">
                                            <img src="{{ $avatarUrl }}" alt="{{ $artist->name }}"
                                                class="w-full h-full object-cover">
                                            <div
                                                class="absolute bottom-1 right-1 md:bottom-2 md:right-2 w-3 h-3 md:w-4 md:h-4 bg-green-500 rounded-full border-2 border-white">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="flex-1 text-center sm:text-left">
                                        <div
                                            class="flex flex-col items-center sm:items-start justify-center sm:justify-start">
                                            <div class="flex items-center gap-3 mb-3">
                                                <h1 class="text-2xl md:text-3xl lg:text-4xl font-bold text-white">
                                                    {{ $artist->name }}
                                                </h1>
                                                @if ($artist->hasRole('Artist'))
                                                    <div class="verified-badge cursor-pointer" data-tooltip="telah terverifikasi">
                                                        <svg width="24" height="24" data-e2e=""
                                                            viewBox="0 0 48 48" fill="none"
                                                            xmlns="http://www.w3.org/2000/svg">
                                                            <circle cx="24" cy="24" r="24" fill="#20D5EC">
                                                            </circle>
                                                            <path fill-rule="evenodd" clip-rule="evenodd"
                                                                d="M37.1213 15.8787C38.2929 17.0503 38.2929 18.9497 37.1213 20.1213L23.6213 33.6213C22.4497 34.7929 20.5503 34.7929 19.3787 33.6213L10.8787 25.1213C9.70711 23.9497 9.70711 22.0503 10.8787 20.8787C12.0503 19.7071 13.9497 19.7071 15.1213 20.8787L21.5 27.2574L32.8787 15.8787C34.0503 14.7071 35.9497 14.7071 37.1213 15.8787Z"
                                                                fill="white"></path>
                                                        </svg>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>

                                        <div class="flex justify-center sm:justify-start gap-6 md:gap-8 mb-4">
                                            <div class="text-center">
                                                <a href="{{ route('artist.followers', ['id' => $artist->id]) }}">
                                                    <div class="text-lg md:text-xl font-bold text-white">{{ $followers }}
                                                    </div>
                                                    <div class="text-xs md:text-sm text-gray-400">Followers</div>
                                                </a>
                                            </div>
                                            <div class="text-center">
                                                <a href="{{ route('artist.following', ['id' => $artist->id]) }}">
                                                    <div class="text-lg md:text-xl font-bold text-white">{{ $following }}
                                                    </div>
                                                    <div class="text-xs md:text-sm text-gray-400">Following</div>
                                                </a>
                                            </div>

                                            <div class="text-center">
                                                <div class="text-lg md:text-xl font-bold text-white">
                                                    {{ $totalPlayFormatted }}</div>
                                                <div class="text-xs md:text-sm text-gray-400">Plays</div>
                                            </div>
                                        </div>
                                        <div class="flex flex-wrap justify-center sm:justify-start gap-2 mb-4">
                                            {!! $roleContent !!}
                                        </div>

                                    </div>
                                </div>

                                <div class="flex flex-col gap-3 lg:w-72">
                                    <div class="flex gap-3">
                                        @if (auth()->check() && auth()->user()->id !== $artist->id)
                                            <button
                                                class="flex-1 bg-red-600 hover:bg-red-700 text-white px-3 lg:px-5 py-2.5 rounded-lg font-semibold transition-colors flex items-center justify-center gap-2 min-w-[100px]">
                                                <i class="ti ti-message text-sm"></i>
                                                Message
                                            </button>
                                            @php
                                                $isFollowingClass = $isFollowing ? 'following' : '';
                                                $iconClass = $isFollowing ? 'ti-check' : 'ti-user-plus';
                                                $buttonText = $isFollowing ? 'Following' : 'Follow';
                                            @endphp

                                            <button id="followButton"
                                                class="flex-grow-0 bg-gray-700 hover:bg-gray-600 text-white px-3 lg:px-5 py-2.5 rounded-lg font-semibold transition-colors flex items-center justify-center gap-2 min-w-[110px] {{ $isFollowingClass }}"
                                                data-artist-id="{{ $artist->id }}"
                                                data-artist-name="{{ $artist->name }}"
                                                data-is-following="{{ $isFollowing ? 'true' : 'false' }}">
                                                <i id="followIcon" class="ti {{ $iconClass }} text-sm"></i>
                                                <span id="followText">{{ $buttonText }}</span>
                                            </button>
                                        @endif
                                    </div>

                                    <div class="flex justify-center gap-4 pt-2">

                                        @foreach ($socialMedia as $media)
                                            <a href="{{ $media['url'] }}"
                                                class="w-10 h-10 bg-gray-800 hover:bg-red-900/30 rounded-full flex items-center justify-center text-gray-400 hover:text-red-400 transition-all duration-200"
                                                target="_blank" rel="noopener noreferrer">
                                                {!! $media['icon'] !!}
                                            </a>
                                        @endforeach

                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="border-t border-gray-700 relative z-10">
                            <div class="flex overflow-x-auto">
                                <button
                                    class="profile-tab-button px-4 md:px-6 py-4 text-red-600 font-semibold border-b-2 border-red-600 bg-red-900/20 transition-all duration-200 whitespace-nowrap"
                                    data-tab="biography">
                                    Biografi
                                </button>
                                <button
                                    class="profile-tab-button px-4 md:px-6 py-4 text-gray-400 font-semibold hover:text-white hover:bg-gray-800/50 transition-all duration-200 whitespace-nowrap"
                                    data-tab="about">
                                    Tentang
                                </button>
                                <button
                                    class="profile-tab-button px-4 md:px-6 py-4 text-gray-400 font-semibold hover:text-white hover:bg-gray-800/50 transition-all duration-200 whitespace-nowrap"
                                    data-tab="stats">
                                    Statistik
                                </button>
                            </div>
                        </div>

                        <div class="p-4 md:p-6 relative z-10">
                            <div class="profile-tab-content" id="biography">
                                @php
                                    $biography = 'Belum terdapat biografi';
                                    if ($artist->profile) {
                                        $biography = $artist->profile->bio;
                                    }
                                    $maxLength = 255;
                                    $isLong = strlen($biography) > $maxLength;
                                    $shortBio = $isLong ? substr($biography, 0, $maxLength) : $biography;
                                @endphp
                                {{-- <div class="biography-content">
                                    <p class="text-gray-300 leading-relaxed" id="biographyText">
                                        {{ $shortBio }}@if ($isLong)
                                            ...
                                        @endif
                                    </p>

                                    @if ($isLong)
                                        <button id="readMoreBtn"
                                            class="mt-3 text-red-400 hover:text-red-300 text-sm font-medium transition-colors duration-200 flex items-center gap-1"
                                            onclick="toggleBiography()">
                                            <span id="readMoreText">Lihat selengkapnya</span>
                                            <i id="readMoreIcon" class="ti ti-chevron-down text-xs"></i>
                                        </button>
                                    @endif
                                </div> --}}

                                {{-- Div ini akan menampung data biografi --}}
                                <div class="biography-content" id="biographyContent"
                                    data-full-bio="{{ htmlspecialchars($biography ?? '', ENT_QUOTES) }}"
                                    data-short-bio="{{ htmlspecialchars($shortBio ?? '', ENT_QUOTES) }}">

                                    <p class="text-gray-300 leading-relaxed" id="biographyText">
                                        {{ $shortBio }}
                                    </p>

                                    @if ($isLong)
                                        <button id="readMoreBtn"
                                            class="mt-3 text-red-400 hover:text-red-300 text-sm font-medium transition-colors duration-200 flex items-center gap-1">
                                            <span id="readMoreText">Lihat selengkapnya</span>
                                            <i id="readMoreIcon" class="ti ti-chevron-down text-xs"></i>
                                        </button>
                                    @endif
                                </div>
                            </div>

                            <div class="profile-tab-content hidden" id="about">
                                <div class="grid md:grid-cols-2 gap-6">
                                    <div class="space-y-4">
                                        <h4 class="font-semibold text-white mb-3">Informasi Personal</h4>
                                        <div class="space-y-3">
                                            <div class="flex items-center gap-3 p-3 bg-gray-800 rounded-lg">
                                                <i class="ti ti-calendar text-gray-400"></i>
                                                <div>
                                                    <div class="text-sm text-gray-400">Lahir</div>
                                                    <div class="font-medium text-white">
                                                        @php
                                                            $birthDate = $artist->profile ? \Carbon\Carbon::parse($artist->profile->birthdate)->translatedFormat('d F Y') : '-';
                                                        @endphp

                                                        {{ $birthDate }}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="flex items-center gap-3 p-3 bg-gray-800 rounded-lg">
                                                <i class="ti ti-map-pin text-gray-400"></i>
                                                <div>
                                                    <div class="text-sm text-gray-400">Asal</div>
                                                    <div class="font-medium text-white">{{ $artist->region }}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="space-y-4">
                                        <h4 class="font-semibold text-white mb-3">Karir Musik</h4>
                                        <div class="space-y-3">
                                            <div class="flex items-center gap-3 p-3 bg-gray-800 rounded-lg">
                                                <i class="ti ti-music text-gray-400"></i>
                                                <div>
                                                    <div class="text-sm text-gray-400">Genre</div>
                                                    <div class="font-medium text-white">
                                                        {{ $genres }}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="flex items-center gap-3 p-3 bg-gray-800 rounded-lg">
                                                <i class="ti ti-clock text-gray-400"></i>
                                                <div>
                                                    <div class="text-sm text-gray-400">Aktif sejak</div>
                                                    <div class="font-medium text-white">
                                                        {{ \Carbon\Carbon::parse($artist->created_at)->translatedFormat('Y') }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="profile-tab-content hidden" id="stats">
                                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                                    <div class="text-center p-4 md:p-6 bg-gray-800 rounded-lg border border-gray-700">
                                        <div class="text-2xl md:text-3xl font-bold text-red-400">{{ $totalPlayFormatted }}
                                        </div>
                                        <div class="text-xs md:text-sm text-gray-400 mt-1">Total Plays</div>
                                    </div>
                                    <div class="text-center p-4 md:p-6 bg-gray-800 rounded-lg border border-gray-700">
                                        <div class="text-2xl md:text-3xl font-bold text-white">{{ $totalSongs }}</div>
                                        <div class="text-xs md:text-sm text-gray-400 mt-1">Songs</div>
                                    </div>
                                    <div class="text-center p-4 md:p-6 bg-gray-800 rounded-lg border border-gray-700">
                                        <div class="text-2xl md:text-3xl font-bold text-white">{{ $totalAlbums }}</div>
                                        <div class="text-xs md:text-sm text-gray-400 mt-1">Albums</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <section class="mb-8 px-4 md:px-0">
            <div class="bg-black/40 backdrop-blur-sm rounded-xl p-4 md:p-6 border border-gray-800/50">
                <h2 class="text-xl md:text-2xl font-bold mb-6 text-white">Lagu Yang dirilis</h2>
                <div class="space-y-1" id="songsList">
                    @php
                        $index = 0;
                        $totalViews = 0;
                    @endphp
                    @forelse ($songPerforms as $song)
                        @php
                            $index++;
                            $imgUrl = app(\App\Services\SongServices::class)->getCoverImageS3($song->song, 'sm');
                            $penayangan = app(\App\Services\SongServices::class)->totalViews($song->song->id);
                            $totalPenayangan = app(\App\Services\SongServices::class)->getRawPlayCount($song->song->id);
                            $totalViews += $totalPenayangan;

                        @endphp
                        <div class="song-row flex items-center hover:bg-white/5 px-2 md:px-4 py-3 rounded-lg group transition-all duration-200 {{ $index > 4 ? 'hidden' : '' }}"
                            data-index="{{ $index }}">
                            <div class="flex items-center flex-1 min-w-0 pr-4">
                                <div
                                    class="w-10 h-10 md:w-12 md:h-12 rounded-lg overflow-hidden mr-3 md:mr-4 relative group-hover:shadow-lg transition-all flex-shrink-0">
                                    <img src="{{ $imgUrl }}" alt="{{ $song->song->title ?? '' }}"
                                        class="w-full h-full object-cover">
                                    <div
                                        class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                                        <i class="ti ti-player-play text-white text-sm md:text-lg"></i>
                                    </div>
                                </div>
                                <div class="min-w-0 flex-1">
                                    <div class="font-semibold text-white truncate mb-1 text-sm md:text-base">
                                        {{ $song->song->title ?? '' }}</div>

                                </div>
                            </div>
                            <div class="hidden md:block w-28 md:w-36 px-3 flex-shrink-0">
                                <div class="text-xs md:text-sm text-gray-400 text-center">{{ $penayangan }} penayangan
                                </div>
                            </div>

                            <div class="hidden lg:block w-24 md:w-28 pl-3 flex-shrink-0">
                                <div class="text-xs md:text-sm text-gray-400 text-right">
                                    {{ $song->song->genre->name ?? '' }}</div>
                            </div>

                            <div
                                class="sm:hidden flex flex-col items-end justify-center text-xs text-gray-500 pl-2 flex-shrink-0">
                                <div class="font-medium">{{ $index }}</div>
                                <div>{{ $song->song->genre->name ?? '' }}</div>
                            </div>
                        </div>
                    @empty

                        <div class="w-full d-flex justify-center">
                            <small>belum terdapat lagu</small>
                        </div>
                    @endforelse
                </div>

                <div
                    class="flex flex-col sm:flex-row justify-between items-start sm:items-center mt-6 pt-4 border-t border-gray-700 gap-4">
                    @if ($totalSongs > 5)
                        <button id="viewAllSongsBtn"
                            class="text-red-400 hover:text-red-300 font-medium transition-colors duration-200 flex items-center gap-2"
                            onclick="toggleAllSongs()">
                            <span id="viewAllText">Lihat semua ({{ $totalSongs }} lagu)</span>
                            <i id="viewAllIcon" class="ti ti-chevron-down text-sm"></i>
                        </button>
                    @endif

                    <div class="flex flex-col sm:flex-row gap-4 text-xs md:text-sm text-gray-400">
                        <div class="flex items-center gap-2">
                            <i class="ti ti-music text-red-400"></i>
                            <span>{{ $totalSongs }} Lagu</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <i class="ti ti-eye text-red-400"></i>
                            <span>{{ number_format($totalViews) }} Total Penayangan</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="mb-8 px-4 md:px-0">
            <div class="flex items-center justify-between mb-5">
                <h2 class="text-xl md:text-2xl font-bold text-white">Lagu Yang Di Nyanyikan (Official)</h2>
            </div>

            <div class="scroll-container overflow-x-auto pb-4">
                <div class="flex gap-4" style="width: max-content;">
                    @php

                    @endphp
                    @forelse ($songOfficial as $song)
                        @php
                            $imgUrl = app(\App\Services\SongServices::class)->getCoverImageS3($song->song, 'md');
                        @endphp
                        <div class="scroll-item flex-shrink-0 w-40 md:w-44">
                            <div class="relative group overflow-hidden rounded-xl">
                                <img src="{{ $imgUrl }}" alt="{{ $song->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-10 h-10 md:w-12 md: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-lg md:text-xl"></i>
                                    </div>
                                </button>
                            </div>
                            <div class="mt-3">
                                <h3 class="font-semibold text-sm md:text-base truncate text-white"
                                    title="{{ $song->song->title ?? '' }}">
                                    {{ $song->song->title ?? '' }}</h3>
                                <p class="text-xs md:text-sm text-gray-400 truncate">
                                    {{ $song->song->album ? $song->song->album->title : 'no album' }} •
                                    {{ $song->song->created_at->format('Y') }}</p>
                            </div>
                        </div>

                    @empty
                        <small>belum terdapat lagu</small>
                    @endforelse
                </div>
            </div>
        </section>

        <section class="mb-8 px-4 md:px-0">
            <div class="flex items-center justify-between mb-5">
                <h2 class="text-xl md:text-2xl font-bold text-white">Lagu Yang di Cover</h2>
            </div>

            <div class="scroll-container overflow-x-auto pb-4">
                <div class="flex gap-4" style="width: max-content;">
                    @php

                    @endphp
                    @forelse ($songCover as $song)
                        @php
                            $imgUrl = app(\App\Services\SongServices::class)->getCoverImageS3($song->song, 'md');
                        @endphp
                        <div class="scroll-item flex-shrink-0 w-40 md:w-44">
                            <div class="relative group overflow-hidden rounded-xl">
                                <img src="{{ $imgUrl }}" alt="{{ $song->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-10 h-10 md:w-12 md: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-lg md:text-xl"></i>
                                    </div>
                                </button>
                            </div>
                            <div class="mt-3">
                                <h3 class="font-semibold text-sm md:text-base truncate text-white"
                                    title="{{ $song->song->title ?? '' }}">{{ $song->song->title ?? '' }}</h3>
                                <p class="text-xs md:text-sm text-gray-400 truncate">
                                    {{ $song->song->album ? $song->song->album->title : 'no album' }} •
                                    {{ $song->song->created_at->format('Y') }}</p>
                            </div>
                        </div>
                    @empty
                        <small>belum terdapat cover</small>
                    @endforelse
                </div>
            </div>
        </section>

        <section class="mb-8 px-4 md:px-0">
            <div class="scroll-container overflow-x-auto pb-4">
                <div style="width: 1210px;"></div>
            </div>
        </section>
        <div class="w-full" style="height:100px;"></div>
    </div>
@endsection

@section('scripts')
    <script>
        function initDragScroll(container) {
            let isDown = false;
            let startX, scrollLeft;

            const onMouseDown = (e) => {
                isDown = true;
                container.style.cursor = 'grabbing';
                startX = e.pageX - container.offsetLeft;
                scrollLeft = container.scrollLeft;
            };

            const onMouseLeave = () => {
                isDown = false;
                container.style.cursor = 'grab';
            };

            const onMouseMove = (e) => {
                if (!isDown) return;
                e.preventDefault();
                const x = e.pageX - container.offsetLeft;
                const walk = (x - startX) * 2;
                container.scrollLeft = scrollLeft - walk;
            };

            const onWheel = (e) => {
                if (e.deltaY !== 0) {
                    e.preventDefault();
                    container.scrollLeft += e.deltaY;
                }
            };

            container.addEventListener('mousedown', onMouseDown);
            container.addEventListener('mouseleave', onMouseLeave);
            container.addEventListener('mouseup', onMouseLeave);
            container.addEventListener('mousemove', onMouseMove);
            container.addEventListener('wheel', onWheel);
        }

        function initProfileTabs() {
            const tabButtons = document.querySelectorAll('.profile-tab-button');
            const tabContents = document.querySelectorAll('.profile-tab-content');

            tabButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const targetTab = this.getAttribute('data-tab');

                    tabButtons.forEach(btn => {
                        btn.classList.remove('text-red-600', 'border-b-2', 'border-red-600',
                            'bg-red-900/20');
                        btn.classList.add('text-gray-400', 'hover:text-white',
                            'hover:bg-gray-800/50');
                    });

                    this.classList.remove('text-gray-400', 'hover:text-white', 'hover:bg-gray-800/50');
                    this.classList.add('text-red-600', 'border-b-2', 'border-red-600', 'bg-red-900/20');

                    tabContents.forEach(content => {
                        content.classList.add('hidden');
                    });

                    const targetContent = document.getElementById(targetTab);
                    if (targetContent) {
                        targetContent.classList.remove('hidden');
                    }
                });
            });
        }

        const readMoreBtn = document.getElementById('readMoreBtn');
        if (readMoreBtn) {
            readMoreBtn.addEventListener('click', function() {
                const biographyContent = document.getElementById('biographyContent');
                const biographyText = document.getElementById('biographyText');
                const readMoreText = document.getElementById('readMoreText');
                const readMoreIcon = document.getElementById('readMoreIcon');

                // Ambil data dari data-attributes
                const fullBio = biographyContent.dataset.fullBio;
                const shortBio = biographyContent.dataset.shortBio;

                if (readMoreText.textContent.includes('Lihat')) {
                    biographyText.textContent = fullBio;
                    readMoreText.textContent = 'Sembunyikan';
                    readMoreIcon.classList.remove('ti-chevron-down');
                    readMoreIcon.classList.add('ti-chevron-up');
                } else {
                    biographyText.textContent = shortBio;
                    readMoreText.textContent = 'Lihat selengkapnya';
                    readMoreIcon.classList.remove('ti-chevron-up');
                    readMoreIcon.classList.add('ti-chevron-down');
                }
            });
        }

        function toggleAllSongs() {
            console.log('toggleAllSongs called');
            const songsList = document.getElementById('songsList');
            const allRows = songsList.querySelectorAll('.song-row');
            const viewAllText = document.getElementById('viewAllText');
            const viewAllIcon = document.getElementById('viewAllIcon');
            const totalSongs = {{ $totalSongs }};

            console.log('Total rows found:', allRows.length);

            // Check if any songs after index 4 are hidden
            let hasHiddenSongs = false;
            allRows.forEach((row, index) => {
                if (index > 4 && (row.style.display === 'none' || row.classList.contains('hidden'))) {
                    hasHiddenSongs = true;
                }
            });

            if (hasHiddenSongs) {
                console.log('Showing all songs');
                // Show all songs
                allRows.forEach((row, index) => {
                    if (index > 4) {
                        row.style.display = 'flex';
                        row.classList.remove('hidden');
                    }
                });
                viewAllText.textContent = 'Sembunyikan';
                viewAllIcon.classList.remove('ti-chevron-down');
                viewAllIcon.classList.add('ti-chevron-up');
            } else {
                console.log('Hiding songs after index 4');
                // Hide songs after index 4
                allRows.forEach((row, index) => {
                    if (index > 4) {
                        row.style.display = 'none';
                        row.classList.add('hidden');
                    }
                });
                viewAllText.textContent = `Lihat semua (${totalSongs} lagu)`;
                viewAllIcon.classList.remove('ti-chevron-up');
                viewAllIcon.classList.add('ti-chevron-down');
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.scroll-container').forEach(initDragScroll);
            initProfileTabs();

            const followButton = document.getElementById('followButton');
            const followText = document.getElementById('followText');
            const followIcon = document.getElementById('followIcon');

            if (followButton) {
                let isFollowing = followButton.dataset.isFollowing === 'true';

                function updateButtonUI(followingStatus) {
                    if (followingStatus) {
                        followText.textContent = 'Following';
                        followIcon.classList.remove('ti-user-plus');
                        followIcon.classList.add('ti-check');
                        followButton.classList.remove('bg-gray-700', 'hover:bg-gray-600');
                        followButton.classList.add('bg-green-500', 'hover:bg-green-600');
                    } else {
                        followText.textContent = 'Follow';
                        followIcon.classList.remove('ti-check');
                        followIcon.classList.add('ti-user-plus');
                        followButton.classList.remove('bg-green-500', 'hover:bg-green-600');
                        followButton.classList.add('bg-gray-700', 'hover:bg-gray-600');
                    }
                }

                updateButtonUI(isFollowing);

                followButton.addEventListener('click', async function() {
                    followButton.disabled = true;
                    followButton.classList.add('opacity-50');

                    try {
                        isFollowing = !isFollowing;
                        updateButtonUI(isFollowing);
                    } catch (error) {
                        console.error('Error:', error);
                    } finally {
                        followButton.disabled = false;
                        followButton.classList.remove('opacity-50');
                    }
                });
            }
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const followButton = document.getElementById("followButton");
            // Pastikan tombol ditemukan
            if (followButton) {
                followButton.addEventListener("click", function() {
                    const artistId = this.dataset.artistId;
                    const artistName = this.dataset.artistName;

                    // Panggil fungsi toggleFollow dari sini
                    toggleFollow(this, artistId, artistName);
                });
            }
        });

        function toggleFollow(buttonElement, artistId, artistName) {
            const followIcon = $(buttonElement).find('.ti');
            const followText = $(buttonElement).find('span');

            let isFollowing = $(buttonElement).data('is-following') === true;

            const csrfToken = $('meta[name="csrf-token"]').attr('content');
            const url = "{{ route('follow.toggle', ['followedId' => ':artistId']) }}".replace(':artistId', artistId);


            $.ajax({
                url: url,
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                success: function(data) {
                    if (data.status === 'success') {
                        isFollowing = !isFollowing;
                        $(buttonElement).data('is-following', isFollowing);

                        if (isFollowing) {
                            $(buttonElement).addClass('following');
                            followIcon.removeClass('ti-user-plus').addClass('ti-check');
                            followText.text('Following');
                        } else {
                            $(buttonElement).removeClass('following');
                            followIcon.removeClass('ti-check').addClass('ti-user-plus');
                            followText.text('Follow');
                        }

                    } else {
                        console.error('Follow/Unfollow Error:', data.message || 'Terjadi kesalahan.');
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 401) {
                        window.location.href = '/login';
                    } else {
                        alert('Terjadi kesalahan. Silakan coba lagi.');
                        console.error('Error:', xhr.responseText);
                    }
                }
            });
        }
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const elMain = document.getElementById('mainContent');

            elMain.classList.add('w-full');
        });
    </script>
@endsection