@extends('layouts.landing-page')
@section('styles')
    <style>
        .transition-max-height {
            transition: max-height 0.5s ease-in-out;
            overflow: hidden;
            max-height: 0;
        }

        .transition-max-height.open {
            max-height: 1000px;
            /* kira-kira cukup besar untuk konten */
        }

        .card-item.active {
            border-color: white !important;
            background-color: #cc1f1a !important;
        }
    </style>

    <style>
        .fav-button .ti-heart {
            color: #888;
            /* Warna abu-abu default */
            transition: color 0.3s ease;

        }

        /* Warna hati ketika aktif (di-wishlist) */
        .fav-button.active .ti-heart {
            color: #ff0000;
            /* Warna merah */
        }

        .fav-button.active {
            background-color: rgba(255, 0, 0, 0.1);
            /* /* border-color: #ff0000; */
        }

        /* Warna default ikon jempol */
        .like-button .ti-thumb-up {
            color: #888;
            /* Warna abu-abu default */
            transition: color 0.3s ease;
        }

        .like-button.active .ti-thumb-up {
            color: #007bff;
        }

        .like-button.active {}

        .youtube-player-layout {
            display: flex;
            gap: 24px;
            max-width: 1280px;
            margin: 0 auto;
            padding: 20px;
            background: #0f0f0f;
            color: #fff;
            min-height: 100vh;
        }

        .main-video-section {
            flex: 1;
            max-width: calc(100% - 420px);
        }

        .video-player-wrapper {
            position: relative;
            background: #000;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 16px;
        }

        .video-iframe-container {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 56.25%;
        }

        .video-content-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .video-content-wrapper iframe {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 12px;
        }

        .video-info-section {
            margin-bottom: 24px;
        }

        .video-title-actions-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px;
            margin-bottom: 16px;
        }

        .video-main-title {
            font-size: 20px;
            font-weight: 600;
            line-height: 1.3;
            margin: 0;
            color: #fff;
            flex: 1;
            min-width: 0;
        }

        .video-action-buttons {
            display: flex;
            gap: 8px;
            flex-shrink: 0;
        }

        .action-button {
            display: flex;
            align-items: center;
            gap: 6px;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            border-radius: 18px;
            padding: 8px 16px;
            color: #fff;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .action-button:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .action-button i {
            font-size: 16px;
        }

        .like-button.liked {
            background: var(--color-primary, #e62117);
        }

        .dislike-button.disliked {
            background: var(--color-primary, #e62117);
        }

        .channel-info-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0;
            border-bottom: 1px solid #3f3f3f;
        }

        .channel-left-info {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
        }

        .channel-avatar-wrapper {
            flex-shrink: 0;
        }

        .channel-avatar-img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }

        .channel-info-details {
            flex: 1;
            min-width: 0;
        }

        .channel-name-row {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 2px;
        }

        .channel-name-link {
            font-size: 16px;
            font-weight: 600;
            color: #fff;
            margin: 0;
            text-decoration: none;
        }

        .verified-badge-inline {
            color: #aaa;
            font-size: 14px;
        }

        .channel-stats-row {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: #aaa;
        }

        .stats-separator {
            color: #666;
        }

        .channel-follow-section {
            flex-shrink: 0;
        }

        .follow-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            background: #fff;
            color: #0f0f0f;
            border: none;
            border-radius: 18px;
            padding: 10px 16px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .follow-btn:hover {
            background: #d9d9d9;
        }

        .follow-btn.following {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            border: 1px solid #3f3f3f;
        }

        .follow-btn.following:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .comments-section {
            margin-top: 24px;
        }

        .comments-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24px;
        }

        .sort-comments {
            position: relative;

            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .comments-title {
            font-size: 20px;
            font-weight: 600;
            margin: 0;
            color: #fff;
        }

        .sort-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background-color: transparent;
            border: none;
            color: #fff;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.2s ease, transform 0.2s ease;
        }

        .sort-btn:hover {
            background-color: rgba(255, 255, 255, 0.1);

        }

        .sort-btn:focus {
            outline: none;
            background-color: rgba(255, 255, 255, 0.15);
        }

        .sort-btn .ti-sort-descending {
            font-size: 18px;
            vertical-align: middle;
        }


        .sort-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            background-color: #333;
            border: 1px solid #444;
            border-radius: 4px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            z-index: 100;
            min-width: 180px;
            padding: 8px 0;
        }

        .sort-dropdown ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .sort-dropdown li {
            padding: 10px 16px;
            cursor: pointer;
            color: #ccc;
            font-size: 14px;
            transition: background-color 0.2s ease;
        }

        .sort-dropdown li:hover {
            background-color: #444;
            color: #fff;
        }



        .add-comment-form {
            margin-bottom: 32px;
        }

        .comment-input-row {
            display: flex;
            gap: 12px;
            align-items: flex-start;
        }

        .user-comment-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            flex-shrink: 0;
            object-fit: cover;
        }

        .comment-input-container {
            flex: 1;
        }

        .comment-textarea {
            width: 100%;
            background: transparent;
            border: none;
            border-bottom: 1px solid #3f3f3f;
            color: #fff;
            font-size: 14px;
            padding: 8px 0;
            resize: none;
            font-family: inherit;
            overflow-y: hidden;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .comment-textarea::-webkit-scrollbar {
            display: none;
        }

        .comment-textarea:focus {
            outline: none;
            box-shadow: none;
        }

        .comment-textarea::placeholder {
            color: #aaa;
        }

        .comment-actions {
            display: none;
            gap: 8px;
            margin-top: 12px;
            justify-content: flex-end;
        }

        .comment-textarea:focus+.comment-actions,
        .comment-actions:hover {
            display: flex;
        }

        .cancel-comment-btn,
        .submit-comment-btn {
            padding: 8px 16px;
            border: none;
            border-radius: 18px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .cancel-comment-btn {
            background: transparent;
            color: #aaa;
        }

        .cancel-comment-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        .submit-comment-btn {
            background: var(--color-primary, #e62117);
            color: #fff;
        }

        .submit-comment-btn:hover {
            background: var(--color-primary-dark, #cc1f1a);
        }

        .comments-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .comment-item {
            margin-bottom: 15px;
        }

        .comment-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            flex-shrink: 0;
            object-fit: cover;
        }

        .reply-item .comment-avatar {
            width: 32px;
            height: 32px;
        }

        .comment-content {
            flex: 1;
            min-width: 0;
        }

        .comment-header-info {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 4px;
        }

        .commenter-name {
            font-size: 13px;
            font-weight: 600;
            color: #fff;
        }

        .creator-badge {
            background: rgba(255, 255, 255, 0.1);
            color: #aaa;
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 2px;
        }

        .comment-time {
            font-size: 12px;
            color: #aaa;
        }

        .comment-text {
            font-size: 14px;
            line-height: 1.4;
            color: #fff;
            margin: 0 0 8px 0;
            word-wrap: break-word;
        }

        .comment-actions-row {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        /* .comment-like-btn  */

        .comment-reply-btn {
            cursor: pointer;
            color: #3ea6ff;
            font-size: 13px;
            font-weight: 500;
        }

        .comment-like-btn:hover,
        .comment-dislike-btn:hover,
        .comment-reply-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            text-decoration: underline;
        }

        .comment-replies {
            margin-left: 50px;
            border-left: 2px solid #3f3f3f;
            padding-left: 10px;
            margin-top: 15px;
        }

        .show-more-comments {
            text-align: center;
            margin-top: 24px;
        }

        .replies-toggle {
            cursor: pointer;
            color: #3ea6ff;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 4px;
        }


        .comment-item.reply-item {
            margin-left: 0;
            border-left: none;
            padding-left: 0;

        }

        .comment-item:not(.reply-item) {
            margin-left: 0;
        }

        .show-more-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            background: transparent;
            border: none;
            color: #aaa;
            font-size: 14px;
            cursor: pointer;
            padding: 12px 16px;
            border-radius: 4px;
            transition: all 0.2s ease;
            margin: 0 auto;
        }

        .show-more-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        .video-sidebar-section {
            width: 400px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .sidebar-action-buttons {
            display: flex;
            gap: 8px;
            margin-bottom: 8px;
        }

        .action-btn {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 12px 14px;
            border: none;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
            min-width: 0;
        }

        .action-btn i {
            font-size: 14px;
        }

        .primary-btn {
            background: var(--color-primary, #e62117);
            color: #fff;
        }

        .primary-btn:hover {
            background: var(--color-primary-dark, #cc1f1a);
        }

        .secondary-btn {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .secondary-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .sidebar-tabs {
            display: flex;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px 8px 0 0;
            overflow: hidden;
            margin-bottom: 0;
        }

        .tab-button {
            flex: 1;
            background: transparent;
            border: none;
            color: #aaa;
            font-size: 11px;
            font-weight: 500;
            padding: 10px 6px;
            cursor: pointer;
            transition: all 0.2s ease;
            border-bottom: 2px solid transparent;
        }

        .tab-button:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        .tab-button.active {
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
            border-bottom-color: var(--color-primary, #e62117);
        }

        .tab-content-wrapper {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 0 0 12px 12px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-top: none;
        }

        .tab-content {
            display: none;
            padding: 20px;
        }

        .tab-content.active {
            display: block;
        }

        .sidebar-content {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .section-header {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 16px;
        }

        .header-links {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .header-link {
            color: #aaa;
            font-size: 12px;
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .header-link:hover {
            color: #fff;
        }

        .separator {
            color: #666;
            font-size: 12px;
        }

        .section-title {
            font-size: 14px;
            font-weight: 600;
            color: #fff;
            margin: 0 0 12px 0;
        }

        .artist-section {
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 16px;
        }

        .artist-info-row {
            display: flex;
            align-items: center;
            gap: 12px;
            position: relative;
        }

        .artist-profile-image {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }

        .artist-details-info {
            flex: 1;
            min-width: 0;
        }

        .artist-name-text {
            font-size: 14px;
            font-weight: 600;
            margin: 0 0 2px 0;
            color: #fff;
            display: flex;
            align-items: center;
        }

        .artist-followers-text {
            font-size: 12px;
            color: #aaa;
            margin: 0 0 6px 0;
        }

        .follow-artist-btn {
            background: transparent;
            border: 1px solid #aaa;
            color: #aaa;
            font-size: 11px;
            font-weight: 500;
            padding: 4px 12px;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .follow-artist-btn:hover {
            border-color: #fff;
            color: #fff;
        }

        .verified-badge {
            position: relative;
            margin-left: 8px;
            display: inline-flex;
            align-items: center;
        }

        .verified-img {
            width: 16px;
            height: 16px;
        }

        .composer-section {
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 16px;
        }

        .composer-info-row {
            display: flex;
            align-items: center;
            gap: 12px;
            position: relative;
            margin-bottom: 12px;
        }

        .composer-info-row:last-child {
            margin-bottom: 0;
        }

        .composer-profile-image {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }

        .composer-details-info {
            flex: 1;
            min-width: 0;
        }

        .composer-name-text {
            font-size: 14px;
            font-weight: 600;
            margin: 0 0 2px 0;
            color: #fff;
            display: flex;
            align-items: center;
        }

        .composer-followers-text {
            font-size: 12px;
            color: #aaa;
            margin: 0 0 6px 0;
        }

        .follow-composer-btn {
            background: transparent;
            border: 1px solid #aaa;
            color: #aaa;
            font-size: 11px;
            font-weight: 500;
            padding: 4px 12px;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .follow-composer-btn:hover {
            border-color: #fff;
            color: #fff;
        }

        .song-details-section {
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 16px;
        }

        .detail-item {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin-bottom: 8px;
            font-size: 12px;
            color: #aaa;
        }

        .detail-item:last-child {
            margin-bottom: 0;
        }

        .detail-icon {
            font-size: 14px;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .detail-info-group {
            display: flex;
            flex-direction: column;
            gap: 4px;
            flex: 1;
        }

        .detail-text {
            color: #fff;
        }

        .streaming-stats {}

        .stats-header {
            margin-bottom: 12px;
        }

        .stats-header h4 {
            font-size: 13px;
            font-weight: 600;
            color: #fff;
            margin: 0;
        }

        .stats-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .stats-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 11px;
            padding: 2px 0;
        }

        .platform {
            color: #aaa;
            font-weight: 500;
        }

        .count {
            color: #fff;
            font-weight: 500;
        }

        .stats-item:last-child {
            color: var(--color-primary, #e62117);
            font-weight: 500;
            cursor: pointer;
            margin-top: 8px;
        }

        .stats-item:last-child:hover {
            text-decoration: underline;
        }

        .coming-soon {
            text-align: center;
            padding: 40px 20px;
        }

        .coming-soon h4 {
            font-size: 16px;
            font-weight: 600;
            color: #fff;
            margin: 0 0 8px 0;
        }

        .coming-soon p {
            font-size: 14px;
            color: #aaa;
            margin: 0;
        }

        .lyrics-content h4 {
            font-size: 16px;
            font-weight: 600;
            color: #fff;
            margin: 0 0 16px 0;
        }

        .lyrics-text {
            line-height: 1.6;
        }

        .lyrics-text p {
            font-size: 14px;
            color: #fff;
            margin: 0 0 4px 0;
        }

        .lyrics-text em {
            font-size: 12px;
            color: #aaa;
            font-style: italic;
        }

        .other-versions h4 {
            font-size: 16px;
            font-weight: 600;
            color: #fff;
            margin: 0;
        }

        .versions-header {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-bottom: 16px;
            padding: 16px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .current-song-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .current-song-thumbnail {
            flex-shrink: 0;
        }

        .current-song-thumbnail img {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            object-fit: cover;
        }

        .current-song-details {
            flex: 1;
            min-width: 0;
        }

        .current-song-title {
            font-size: 16px;
            font-weight: 600;
            color: #fff;
            margin: 0 0 4px 0;
        }

        .current-song-stats {
            font-size: 12px;
            color: #aaa;
            margin: 0 0 8px 0;
        }

        .current-song-actions {
            display: flex;
            gap: 8px;
        }

        .mini-action-btn {
            display: flex;
            align-items: center;
            gap: 4px;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            border-radius: 12px;
            padding: 4px 8px;
            color: #aaa;
            font-size: 11px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .mini-action-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
        }

        .mini-action-btn i {
            font-size: 12px;
        }

        .like-mini.liked {
            background: var(--color-primary, #e62117);
            color: #fff;
        }

        .dislike-mini.disliked {
            background: var(--color-primary, #e62117);
            color: #fff;
        }

        .versions-title-section {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .versions-title-section h4 {
            font-size: 14px;
            font-weight: 600;
            color: #fff;
            margin: 0;
        }

        .view-all-btn {
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: #fff;
            font-size: 11px;
            font-weight: 500;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
            display: inline-block;
        }

        .view-all-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.5);
        }

        .versions-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }

        .version-card {
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .version-card:hover {
            transform: translateY(-2px);
        }

        .version-thumbnail {
            position: relative;
            width: 100%;
            aspect-ratio: 1;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 8px;
        }

        .version-thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .play-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: all 0.2s ease;
        }

        .version-card:hover .play-overlay {
            opacity: 1;
        }

        .play-overlay i {
            color: #fff;
            font-size: 24px;
        }

        .version-details h6 {
            font-size: 11px;
            font-weight: 600;
            color: #fff;
            margin: 0 0 2px 0;
            line-height: 1.2;
        }

        .version-details p {
            font-size: 9px;
            color: #aaa;
            margin: 0;
            line-height: 1.2;
        }

        @media (max-width: 1200px) {
            .main-video-section {
                max-width: calc(100% - 380px);
            }

            .video-sidebar-section {
                width: 360px;
            }
        }

        @media (max-width: 1024px) {
            .youtube-player-layout {
                flex-direction: column;
                gap: 16px;
            }

            .main-video-section {
                max-width: 100%;
            }

            .video-sidebar-section {
                width: 100%;
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                gap: 16px;
            }

            .video-title-actions-row {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }

            .video-action-buttons {
                align-self: flex-end;
            }
        }

        @media (max-width: 768px) {
            .youtube-player-layout {
                padding: 12px;
            }

            .video-main-title {
                font-size: 18px;
                line-height: 1.3;
            }

            .channel-info-container {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }

            .channel-follow-section {
                align-self: flex-start;
                width: 100%;
            }

            .follow-btn {
                width: 100%;
                justify-content: center;
            }

            .comments-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }

            .video-sidebar-section {
                grid-template-columns: 1fr;
            }

            .sidebar-action-buttons {
                flex-direction: column;
                gap: 8px;
            }

            .action-btn {
                padding: 14px 16px;
                font-size: 14px;
            }

            .video-title-actions-row {
                gap: 16px;
            }

            .video-action-buttons {
                align-self: flex-start;
                width: 100%;
                justify-content: flex-start;
            }
        }

        @media (max-width: 480px) {
            .youtube-player-layout {
                padding: 8px;
            }

            .video-main-title {
                font-size: 16px;
                line-height: 1.4;
            }

            .video-action-buttons {
                flex-wrap: wrap;
                gap: 8px;
            }

            .action-button {
                font-size: 12px;
                padding: 8px 12px;
                min-width: 60px;
            }

            .comment-replies {
                margin-left: 24px;
            }

            .channel-left-info {
                gap: 8px;
            }

            .channel-avatar-img {
                width: 32px;
                height: 32px;
            }

            .channel-name-link {
                font-size: 14px;
            }

            .subscriber-count-text,
            .video-views-text {
                font-size: 11px;
            }

            .comments-title {
                font-size: 16px;
            }

            .comment-text {
                font-size: 13px;
            }

            .sidebar-action-buttons {
                gap: 6px;
            }

            .action-btn {
                padding: 12px 14px;
                font-size: 12px;
            }

            .tab-button {
                font-size: 10px;
                padding: 8px 4px;
            }

            .versions-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
            }
        }
    </style>
@endsection

@section('content')
    <div class="youtube-player-layout">
        <div class="main-video-section">

            <div class="video-player-wrapperx mb-4">
                <div class="relative w-full rounded-lg overflow-hidden shadow">
                    <!-- 16:9 ratio -->
                    <div class="relative w-full pt-[56.25%]">
                        <iframe class="absolute inset-0 w-full h-full" src="{{ $embedLink }}" title="{{ $song->title }}"
                            frameborder="0" loading="lazy"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                            allowfullscreen></iframe>
                    </div>
                </div>
            </div>


            <div class="video-info-section">
                <div class="video-title-actions-row">
                    <div class="flex ">
                        @php
                            $imageUrl = app(\App\Services\SongServices::class)->getCoverImageS3($song, 'sm');
                        @endphp
                        <div class="flex items-center justify-center">
                            <div class="w-12 h-12 me-4 rounded-xl overflow-hidden ring-1 ring-black/10 shadow-sm">
                                <img src="{{ $imageUrl }}" alt="Thumbnail" class="w-full h-full object-cover" />
                            </div>
                        </div>

                        <div class="flex flex-col">
                            <h1 class="video-main-title"> {{ $song->title }}
                            </h1>
                            <div class="text-sm">{{ $song->labels ?? '' }}</div>
                        </div>

                    </div>

                    <div class="video-action-buttons">
                        <button
                            class="action-button fav-button {{ Auth::check() && Auth::user()->wishlists->contains('song_id', $song->id) ? 'active' : '' }}"
                            onclick="actionWishlist(this)" data-song-id="{{ $song->id }}"
                            data-is-wishlisted="{{ Auth::check() && Auth::user()->wishlists->contains('song_id', $song->id) ? 'true' : 'false' }}">
                            <i class="ti ti-heart"></i>
                            <span class="wishlist-count">{{ $song->wishlists->count() }}</span>
                        </button>

                        <button
                            class="action-button like-button {{ Auth::check() && Auth::user()->likes->contains('song_id', $song->id) ? 'active' : '' }}"
                            onclick="actionLike(this)" data-song-id="{{ $song->id }}"
                            data-is-liked="{{ Auth::check() && Auth::user()->likes->contains('song_id', $song->id) ? 'true' : 'false' }}">
                            <i class="ti ti-thumb-up"></i>
                            <span class="like-count">{{ $song->likes->count() }}</span>
                        </button>

                        <button class="action-button playlist-button" onclick="actionPlaylist(this)"
                            data-song-id="{{ $song->id }}">
                            <i class="ti ti-playlist-add"></i>
                            <span class="playlist-label">Playlist</span>
                        </button>

                        {{-- <button class="action-button dislike-button">
                            <i class="ti ti-thumb-down"></i>
                            <span>15</span>
                        </button> --}}
                    </div>
                </div>
                @foreach ($artists as $row)
                    <div class="channel-info-container">
                        <div class="channel-left-info">
                            <div class="channel-avatar-wrapper">
                                <img src="{{ $row['avatar'] }}" alt="{{ $row['name'] }}" class="channel-avatar-img">
                            </div>
                            <div class="channel-info-details">
                                <div class="channel-name-row">
                                    <h3 class="channel-name-link"> {{ $row['name'] }} </h3>
                                    @if ($row['is_verified'] > 0)
                                        <span class="verified-badge-inline cursor-pointer" data-tooltip="telah terverifikasi">
                                            <svg width="15" data-e2e="" height="15" 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>
                                        </span>
                                    @endif
                                </div>
                                <div class="channel-stats-row">
                                    <p class="artist-followers-text">{{ $row['followers_count'] }} followers</p>
                                    <span class="stats-separator">•</span>
                                    <span class="video-views-text">2.8M views</span>
                                </div>
                            </div>
                        </div>

                        <div class="channel-follow-section">
                            @if (Auth::check() && Auth::id() !== $row['id'])
                                <button class="follow-btn {{ $row['is_following'] ? 'following' : '' }}"
                                    data-artist-id="{{ $row['id'] }}"
                                    data-is-following="{{ $row['is_following'] ? 'true' : 'false' }}"
                                    onclick="toggleFollow(this, '{{ $row['id'] }}', '{{ $row['name'] }}')">
                                    <i class="ti {{ $row['is_following'] ? 'ti-check' : 'ti-user-plus' }}"></i>
                                    <span>
                                        {{ $row['is_following'] ? 'Following' : 'Follow' }}
                                    </span>
                                </button>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="song-description relative overflow-hidden transition-all duration-500 ease-in-out max-h-24"
                id="songDesc">
                <div class="w-full p-4 text-sm">
                    {!! nl2br($song->description) !!}
                </div>

                <!-- Gradient fade bottom -->
                <div class="absolute bottom-0 left-0 w-full h-12 bg-gradient-to-t from-gray-900 to-transparent pointer-events-none"
                    id="fadeMask"></div>

                <!-- Button -->
                <button id="toggleBtn"
                    class="absolute bottom-2 right-4 text-xs font-semibold text-slate-400 hover:text-slate-300 transition-colors">
                    View More
                </button>
            </div>

            <div class="comments-section">
                <div class="comments-header">
                    <h3 class="comments-title"><span id="total-comments-count">{{ $totalComments }}</span> Komentar</h3>
                    <div class="sort-comments">
                        <button class="sort-btn">
                            <i class="ti ti-sort-descending"></i>
                            <span>Urutkan berdasarkan</span>
                        </button>
                    </div>
                </div>

                <div class="add-comment-form">
                    <div class="comment-input-row">
                        <img src="{{ Auth::check() ? app('App\Services\UserServices')->getAvatar(Auth::user(), 'sm') : 'https://i.pravatar.cc/36' }}"
                            alt="User Avatar" class="user-comment-avatar">

                        <div class="comment-input-container">
                            <textarea class="comment-textarea" placeholder="Tambahkan komentar..." rows="1"></textarea>
                            <div class="comment-actions" style="display: none;">
                                <button class="cancel-comment-btn">Batal</button>
                                <button class="submit-comment-btn" data-song-id="{{ $song->id }}">Komentar</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="comments-list">
                    @foreach ($comments as $comment)
                        @include('partials.comment_item', [
                            'comment' => $comment,
                            'songCreatorId' => $song->created_by,
                        ])
                    @endforeach

                    @if ($comments->count() > 0 && $comments->count() < $totalComments)
                        <div class="show-more-comments">
                            <button class="show-more-btn">
                                <i class="ti ti-chevron-down"></i>
                                <span>Tampilkan komentar lainnya</span>
                            </button>
                        </div>
                    @endif
                </div>
            </div>
        </div>


        <div class="video-sidebar-section">

            @if (session('user_active_role') != 'Composer')
                <div class="sidebar-action-buttons" style="margin-bottom:1px !important;">


                    <button id="btnSHowLicense" class="action-btn primary-btn btnSHowLicense">
                        <i class="ti ti-shopping-cart"></i>
                        <span>Beli Lisensi</span>
                    </button>


                    {{-- <button class="action-btn secondary-btn">
                    <i class="ti ti-plus"></i>
                    <span>Tambahkan Order</span>
                </button>
                <button class="action-btn secondary-btn">
                    <i class="ti ti-share"></i>
                    <span>Sharing Profit</span>
                </button> --}}
                </div>
            @endif

            <div class="license-card-container transition-max-height">
                <div class="license-card rounded-lg shadow-md p-4 hover:shadow-lg transition duration-300"
                    style="background-color:#1b1b1b;">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

                        @if ($song->parent_song_id == null)
                            {{-- gunakan lisensi song ini sendiri --}}

                            @forelse ($song->licenses as $item)
                                @php
                                    // dd($userZone,$item->zone);
                                @endphp

                                @if ($userZone == $item->zone && $song->types == $item->song_types && $item->payment_type == 'Beli Harga')
                                    <div class="card-item card-item-license relative bg-black rounded-lg p-4 text-white border border-transparent
                                 hover:border-white hover:bg-[#cc1f1a] transition-all duration-300 ease-in-out cursor-pointer flex flex-col justify-between"
                                        onclick="setOrderLicense(this)" data-id="{{ $item->id }}"
                                        data-songid="{{ $song->id }}">
                                        <input type="hidden" id="license_description-{{ $item->id }}"
                                            name="license_description" value="{{ $item->description }}">
                                        <div class="license-icon absolute top-2 left-2 text-white">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                fill="currentColor" class="bi bi-bookmark-star-fill" viewBox="0 0 16 16">
                                                <path fill-rule="evenodd"
                                                    d="M2 15.5V2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.74.439L8 13.069l-5.26 2.87A.5.5 0 0 1 2 15.5M8.16 4.1a.178.178 0 0 0-.32 0l-.634 1.285a.18.18 0 0 1-.134.098l-1.42.206a.178.178 0 0 0-.098.303L6.58 6.993c.042.041.061.1.051.158L6.39 8.565a.178.178 0 0 0 .258.187l1.27-.668a.18.18 0 0 1 .165 0l1.27.668a.178.178 0 0 0 .257-.187L9.368 7.15a.18.18 0 0 1 .05-.158l1.028-1.001a.178.178 0 0 0-.098-.303l-1.42-.206a.18.18 0 0 1-.134-.098z" />
                                            </svg>
                                        </div>
                                        <h3 class="text-sm font-semibold mb-2 mt-3">
                                            {{ $item->license_type }}
                                            {{ $item->time_amount > 0 ? $item->time_amount : '' }}
                                            {{ $item->time_type != null ? $item->time_type : '' }} &nbsp;
                                            ({{ $item->zone }})
                                        </h3>
                                        <div class="mt-auto">
                                            <div class="flex justify-between mb-2">
                                                <div class="text-xs rounded-md bg-red-600 text-white px-2">
                                                    {{ $item->payment_type }}</div>
                                                {{-- <div class="text-xs">{{ $item->zone }}</div> --}}
                                            </div>
                                            <div class="flex">
                                                @if ($item->payment_type == 'Beli Harga')
                                                    <div class="text-sm">Rp. {{ number_format($item->amount) }}</div>
                                                @else
                                                    <div class="text-sm">{{ number_format($item->amount) }}%</div>
                                                @endif
                                            </div>

                                        </div>
                                    </div>
                                @endif
                            @empty
                                <div class="text-sm text-white px-2"> belum tersedia </div>
                            @endforelse
                        @else
                            {{-- gunakan lisensi song parent --}}
                        @endif




                    </div>

                    <div class="w-full rounded-md bg-black mt-4 p-4 text-sm hidden" id="ctrDescription">
                        <div class="flex flex-col">
                            <div class="mb-4">Deskripsi Produk</div>
                            <div id="lcsDescription">

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

                    <button id="btnOrder" data-id="{{ $song->id }}" data-mode="buy" onclick="orderSong(this)"
                        type="button"
                        class="px-5 py-3 bg-red-600 text-white rounded-md mt-4  ml-auto flex items-center hover:bg-red-800 btnOrder">
                        <span class="me-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                class="bi bi-bag-check-fill" viewBox="0 0 16 16">
                                <path fill-rule="evenodd"
                                    d="M10.5 3.5a2.5 2.5 0 0 0-5 0V4h5zm1 0V4H15v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4h3.5v-.5a3.5 3.5 0 1 1 7 0m-.646 5.354a.5.5 0 0 0-.708-.708L7.5 10.793 6.354 9.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0z" />
                            </svg>
                        </span>
                        Order
                    </button>
                </div>
            </div>


            <div class="sidebar-tabs">
                <button class="tab-button active" data-tab="detail">Detail Lagu</button>
                <button class="tab-button" data-tab="lirik">Lirik</button>
                <button class="tab-button" data-tab="versi">Lihat Versi Lainnya</button>
            </div>

            <div class="tab-content-wrapper">
                <div class="tab-content active" id="detail-tab">
                    <div class="sidebar-content">

                        <div class="artist-section">
                            <h4 class="section-title">Official Artist</h4>
                            @forelse ($artists as $row)
                                <div class="artist-info-row">
                                    <img src="{{ $row['avatar'] }}" alt="{{ $row['name'] }}"
                                        class="artist-profile-image">

                                    <div class="artist-details-info">
                                        <h5 class="artist-name-text">
                                            {{ $row['name'] }}
                                            @if ($row['is_verified'] > 0)
                                                <div class="verified-badge cursor-pointer" data-tooltip="telah terverifikasi"  >
                                                    <svg width="15" data-e2e="" height="15"
                                                        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
                                        </h5>
                                        <p class="artist-followers-text">{{ $row['followers_count'] }} followers</p>
                                        <div class="channel-follow-section">
                                            @if (Auth::check() && Auth::id() !== $row['id'])
                                                <button class="follow-btn {{ $row['is_following'] ? 'following' : '' }}"
                                                    data-artist-id="{{ $row['id'] }}"
                                                    data-is-following="{{ $row['is_following'] ? 'true' : 'false' }}"
                                                    onclick="toggleFollow(this, '{{ $row['id'] }}', '{{ $row['name'] }}')">
                                                    <i
                                                        class="ti {{ $row['is_following'] ? 'ti-check' : 'ti-user-plus' }}"></i>
                                                    <span>
                                                        {{ $row['is_following'] ? 'Following' : 'Follow' }}
                                                    </span>
                                                </button>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div>belum terdapat artis</div>
                            @endforelse
                        </div>
                        <div class="composer-section">
                            <h4 class="section-title">Composer / Pencipta Lagu:</h4>
                            @foreach ($composers as $row)
                                <div class="composer-info-row">
                                    <img src="{{ $row['avatar'] }}" alt="{{ $row['name'] }}"
                                        class="composer-profile-image">
                                    <div class="composer-details-info">
                                        <h5 class="composer-name-text">
                                            {{ $row['name'] }}
                                            @if ($row['is_verified'] > 0)
                                                <div class="verified-badge cursor-pointer" data-tooltip="telah terverifikasi">
                                                    <svg width="15" data-e2e="" height="15"
                                                        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
                                        </h5>
                                        <p class="composer-followers-text">{{ $row['followers_count'] }} followers</p>
                                        <div class="channel-follow-section">
                                            @if (Auth::check() && Auth::id() !== $row['id'])
                                                <button class="follow-btn {{ $row['is_following'] ? 'following' : '' }}"
                                                    data-artist-id="{{ $row['id'] }}"
                                                    data-is-following="{{ $row['is_following'] ? 'true' : 'false' }}"
                                                    onclick="toggleFollow(this, '{{ $row['id'] }}', '{{ $row['name'] }}')">
                                                    <i
                                                        class="ti {{ $row['is_following'] ? 'ti-check' : 'ti-user-plus' }}"></i>
                                                    <span>
                                                        {{ $row['is_following'] ? 'Following' : 'Follow' }}
                                                    </span>
                                                </button>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <div class="song-details-section">
                            <div class="detail-item">
                                <span class="detail-icon">🎵</span>
                                <div class="detail-info-group">
                                    <span class="detail-text">Arranger : {{ $arrangerNames }}</span>
                                    <span class="detail-text">Tanggal Rilis :
                                        {{ \Carbon\Carbon::parse($song->release_date)->translatedFormat('d F Y') }}
                                    </span>
                                    <span class="detail-text">Label : {{ $song->labels }}</span>
                                    <span class="detail-text">Tipe : {{ $song->types }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="streaming-stats">
                            <div class="stats-header">
                                <h4>Total Penayangan: 845,047 Stream</h4>
                            </div>
                            <div class="stats-list">
                                <div class="stats-item">
                                    <span class="platform">Youtube :</span>
                                    <span class="count">63,794 Views</span>
                                </div>
                                <div class="stats-item">
                                    <span class="platform">Spotify :</span>
                                    <span class="count">209,936 Stream</span>
                                </div>
                                <div class="stats-item">
                                    <span class="platform">Apple Music :</span>
                                    <span class="count">151,432 Stream</span>
                                </div>
                                <div class="stats-item">
                                    <span class="platform">TikTok :</span>
                                    <span class="count">3,467 Download</span>
                                </div>
                                <div class="stats-item">
                                    <span class="platform">Lain - Lain :</span>
                                    <span class="count">267,568 Stream</span>
                                </div>
                                <div class="stats-item">
                                    {{-- <span class="platform">Lihat berapa diputstik</span> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="tab-content" id="lirik-tab">
                    <div class="sidebar-content">
                        <div class="lyrics-content">
                            <h4>Lirik Lagu - {{ $song->title }}</h4>
                            <div class="lyrics-text">
                                {!! nl2br(e($song->lyrics)) !!}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab-content" id="versi-tab">
                    <div class="sidebar-content">
                        <div class="other-versions">
                            <div class="versions-header">
                                <div class="current-song-info">
                                    <div class="current-song-thumbnail">


                                        <img src="{{ $coverImg }}" alt="Permisi">
                                    </div>
                                    <div class="current-song-details">
                                        <h5 class="current-song-title">{{ $song->title }}</h5>
                                        <p class="current-song-stats">2,478,523 stream</p>
                                        <div class="current-song-actions">
                                            <button class="mini-action-btn like-mini">
                                                <i class="ti ti-thumb-up"></i>
                                                <span>363</span>
                                            </button>
                                            <button class="mini-action-btn dislike-mini">
                                                <i class="ti ti-thumb-down"></i>
                                                <span>15</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="versions-title-section">
                                    <h4>Versi Lainnya</h4>
                                    <a href="{{ route('song-versions', ['id' => 1]) }}" class="view-all-btn">Lihat
                                        Semua</a>
                                </div>
                            </div>

                            <div class="versions-grid">

                                @foreach ($otherSongs as $row)
                                    @if ($song->id != $row->song_id && $row->song->status == 'registered')
                                        @php
                                            $othCoverUrl = app(\App\Services\SongServices::class)->getCoverImageS3(
                                                $row->song,
                                                'sm',
                                            );
                                        @endphp
                                        <div class="version-card">
                                            <a href="{{ route('users.songs.view', ['id' => $row->song_id]) }}">
                                                <div class="version-thumbnail">
                                                    <img src="{{ $othCoverUrl }}" alt="Acoustic Version">
                                                    <div class="play-overlay">
                                                        <i class="ti ti-play"></i>
                                                    </div>
                                                </div>
                                            </a>
                                            <div class="version-details">
                                                <h6>{{ $row->song->title }}</h6>
                                                <p>
                                                    {{ $row->song->songContributors->filter(fn($contributor) => $contributor->user && $contributor->user->hasRole('Artist'))->map(fn($contributor) => $contributor->user->name)->implode(', ') }}
                                                </p>
                                            </div>

                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal untuk playlist     --}}
    {{-- <div id="playlistModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
        <div class="bg-[#2a2a2a] rounded-lg p-6 w-11/12 md:w-1/3">
            <div class="flex justify-between items-center border-b border-gray-600 pb-3 mb-4">
                <h4 class="text-xl font-semibold text-white">Tambahkan ke Playlist</h4>
                <button id="closeModalBtn" class="text-gray-400 hover:text-white">&times;</button>
            </div>
            <div id="playlistContent">
            </div>
        </div>
    </div> --}}
    <div id="playlistModal"
        class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 transition-all duration-300 opacity-0 invisible">

        <div
            class="bg-[#2a2a2a] rounded-xl shadow-2xl p-6 w-11/12 md:w-1/3 transform scale-95 transition-all duration-300">

            <div class="flex justify-between items-center border-b border-gray-600 pb-4 mb-4">
                <h4 class="text-2xl font-bold text-white tracking-wide">Tambahkan ke Playlist</h4>
                <button id="closeModalBtn"
                    class="text-gray-400 hover:text-white text-3xl font-light transition-colors duration-200">&times;</button>
            </div>

            <div id="playlistContent">
            </div>

        </div>
    </div>
@endsection

@section('scripts')
    {{-- js untuk playlist modal --}}
    <script>
        function actionPlaylist(button) {
            const songId = button.dataset.songId;
            const modal = document.getElementById('playlistModal');
            const content = document.getElementById('playlistContent');


            modal.classList.remove('opacity-0', 'invisible');
            modal.classList.add('opacity-100', 'visible');


            setTimeout(() => {
                const modalContent = modal.querySelector('div.bg-\\[\\#2a2a2a\\]');
                modalContent.classList.remove('scale-95');
                modalContent.classList.add('scale-100');
            }, 10);


            window.onclick = function(event) {
                if (event.target === modal) {
                    closeModal();
                }
            };
            const closeModalBtn = document.getElementById('closeModalBtn');
            closeModalBtn.onclick = closeModal;

            content.innerHTML = '<p class="text-center text-gray-400">Memuat playlist...</p>';
            fetch('/playlists')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Gagal memuat playlist.');
                    }
                    return response.json();
                })
                .then(playlists => {
                    renderPlaylistModalContent(playlists, songId);
                })
                .catch(error => {
                    content.innerHTML =
                        '<p class="text-center text-red-400 font-medium">Gagal memuat playlist. Coba lagi nanti.</p>';
                    console.error('Error:', error);
                });
        }

        function closeModal() {
            const modal = document.getElementById('playlistModal');
            const modalContent = modal.querySelector('div.bg-\\[\\#2a2a2a\\]');


            modalContent.classList.remove('scale-100');
            modalContent.classList.add('scale-95');


            modal.classList.remove('opacity-100', 'visible');
            modal.classList.add('opacity-0', 'invisible');
        }

        function renderPlaylistModalContent(playlists, songId) {
            const content = document.getElementById('playlistContent');
            content.innerHTML = '';

            if (playlists.length === 0) {
                content.innerHTML = `
    <div class="p-4 bg-gray-800 rounded-lg text-center">
        <p class="text-gray-400 mb-4">Anda belum memiliki playlist.</p>
        <a href="/playlist" class="w-full bg-red-600 text-white font-semibold py-2 rounded-lg hover:bg-red-700 transition-colors duration-200 shadow-md block">
            Buat Playlist Baru
        </a>
    </div>
    `;
            } else {
                const listHtml = playlists.map(playlist => `
            <div class="flex items-center justify-between p-3 border-b border-gray-700 last:border-none hover:bg-gray-700 transition-colors duration-200 rounded-md">
                <span class="text-white font-medium">${playlist.name}</span>
                <button onclick="addSongToPlaylist('${playlist.id}', '${songId}')" class="bg-gray-700 hover:bg-gray-600 text-white text-sm px-3 py-1 rounded-md transition-colors duration-200">
                     <i class="ti ti-plus"></i>
                </button>
            </div>
        `).join('');

                content.innerHTML = `
    <div class="space-y-2">
        <div class="max-h-60 overflow-y-auto pr-2 custom-scrollbar">${listHtml}</div>
        <hr class="border-gray-600">
        <a href="/playlist" class="w-full bg-red-600 hover:bg-red-700 text-center text-white font-semibold py-2 rounded-lg transition-colors duration-200 block">
            Buat Playlist Baru
        </a>
    </div>
    `;
            }
        }
        // method add song to playlist
        function addSongToPlaylist(playlistId, songId) {
            const API_URL = '/playlists/add-song';

            const data = {
                playlist_id: playlistId,
                song_id: songId,

                _token: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            };



            fetch(API_URL, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify(data)
                })
                .then(response => {

                    if (!response.ok) {

                        return response.json().then(errorData => {

                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal!',
                                text: errorData.message || 'Terjadi kesalahan saat menambahkan lagu.'
                            });
                            throw new Error(errorData.message);
                        });
                    }
                    return response.json();
                })
                .then(result => {

                    Swal.fire({
                        title: 'Berhasil!',
                        text: result.message || 'Lagu berhasil ditambahkan ke playlist!',
                        icon: 'success',
                        showConfirmButton: false,
                        timer: 3000
                    });
                })
                .catch(error => {

                    console.error('Error:', error);

                });
        }
    </script>
    <script>
        let isFollowing = false;
        let isLiked = false;
        let isDisliked = false;
        let likeCount = 363;
        let dislikeCount = 15;

        document.addEventListener('DOMContentLoaded', function() {
            initializeTabs();
        });

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


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


                    tabButtons.forEach(btn => btn.classList.remove('active'));
                    tabContents.forEach(content => content.classList.remove('active'));

                    // Add active class to clicked button
                    this.classList.add('active');

                    // Show corresponding tab content
                    const targetContent = document.getElementById(targetTab + '-tab');
                    if (targetContent) {
                        targetContent.classList.add('active');
                    }

                    // Animation effect
                    animateButton(this);
                });
            });

            // Initialize action buttons
            initializeActionButtons();
        }
        // Action buttons functionality
        function initializeActionButtons() {
            const actionButtons = document.querySelectorAll('.action-btn');

            actionButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const buttonText = this.querySelector('span').textContent;

                    if (buttonText === 'Beli Lisensi') {
                        // showNotification('Membuka halaman pembelian lisensi...', 'info');
                        // You can redirect to license purchase page here
                        // window.location.href = '/license/purchase';
                    } else if (buttonText === 'Tambahkan Order') {
                        showNotification('Membuka form tambah order...', 'info');
                        // You can redirect to add order page here
                        // window.location.href = '/orders/create';
                    } else if (buttonText === 'Sharing Profit') {
                        showNotification('Membuka halaman sharing profit...', 'info');
                        // You can redirect to profit sharing page here
                        // window.location.href = '/profit-sharing';
                    }

                    // Animation effect
                    animateButton(this);
                });
            });

            // Initialize version play buttons
            initializeVersionButtons();
        }

        // Version buttons functionality
        function initializeVersionButtons() {
            document.addEventListener('click', function(e) {
                // Handle mini like button
                if (e.target.closest('.like-mini')) {
                    e.stopPropagation();
                    const likeBtn = e.target.closest('.like-mini');
                    const countSpan = likeBtn.querySelector('span');
                    let count = parseInt(countSpan.textContent) || 0;

                    if (likeBtn.classList.contains('liked')) {
                        likeBtn.classList.remove('liked');
                        count--;
                        showNotification('Like dibatalkan', 'info');
                    } else {
                        likeBtn.classList.add('liked');
                        // Remove dislike if active
                        const dislikeBtn = document.querySelector('.dislike-mini');
                        if (dislikeBtn && dislikeBtn.classList.contains('disliked')) {
                            dislikeBtn.classList.remove('disliked');
                            const dislikeCount = dislikeBtn.querySelector('span');
                            dislikeCount.textContent = parseInt(dislikeCount.textContent) - 1;
                        }
                        count++;
                        showNotification('Lagu disukai', 'success');
                    }
                    countSpan.textContent = count;
                    animateButton(likeBtn);
                    return;
                }

                // Handle mini dislike button
                if (e.target.closest('.dislike-mini')) {
                    e.stopPropagation();
                    const dislikeBtn = e.target.closest('.dislike-mini');
                    const countSpan = dislikeBtn.querySelector('span');
                    let count = parseInt(countSpan.textContent) || 0;

                    if (dislikeBtn.classList.contains('disliked')) {
                        dislikeBtn.classList.remove('disliked');
                        count--;
                        showNotification('Dislike dibatalkan', 'info');
                    } else {
                        dislikeBtn.classList.add('disliked');
                        // Remove like if active
                        const likeBtn = document.querySelector('.like-mini');
                        if (likeBtn && likeBtn.classList.contains('liked')) {
                            likeBtn.classList.remove('liked');
                            const likeCount = likeBtn.querySelector('span');
                            likeCount.textContent = parseInt(likeCount.textContent) - 1;
                        }
                        count++;
                        showNotification('Lagu tidak disukai', 'info');
                    }
                    countSpan.textContent = count;
                    animateButton(dislikeBtn);
                    return;
                }

                // Handle version card clicks
                if (e.target.closest('.version-card')) {
                    const versionCard = e.target.closest('.version-card');
                    const versionTitle = versionCard.querySelector('h6').textContent;

                    showNotification(`Memutar ${versionTitle}...`, 'success');
                    animateButton(versionCard);
                }
            });
        }

        // Like/Dislike functionality
        function initializeLikeButtons() {

            const likeButton = document.querySelector('.like-button');
            // const dislikeButton = document.querySelector('.dislike-button');

            if (likeButton) {
                likeButton.addEventListener('click', toggleLike);
            }

            // if (dislikeButton) {
            //     dislikeButton.addEventListener('click', toggleDislike);
            // }
        }
    </script>
    <script>
        document.getElementById('btnSHowLicense').addEventListener('click', function() {
            const container = document.querySelector('.license-card-container');
            container.classList.toggle('open');
        });

        function setOrderLicense(el) {
            // hilangkan active dari semua card
            document.querySelectorAll('.card-item').forEach(card => {
                card.classList.remove('active');
            });

            // tambahkan active ke elemen yang diklik
            el.classList.add('active');

            // Ambil ID item dari elemen yang diklik
            const id = el.getAttribute('data-id');

            // Ambil value dari input hidden berdasarkan ID
            const descriptionInput = document.getElementById(`license_description-${id}`);
            console.log('deskripsi');
            console.log(descriptionInput);
            const description = descriptionInput ? descriptionInput.value : '';

            // Tampilkan kontainer deskripsi
            const ctrDescription = document.getElementById('ctrDescription');
            ctrDescription.classList.remove('hidden'); // remove hidden

            // Masukkan isi deskripsi ke dalam elemen #lcsDescription
            document.getElementById('lcsDescription').textContent = description;

        }

        function orderSong(el) {
            var songId = el.getAttribute('data-id');
            var mode = el.getAttribute('data-mode');

            // cari elemen dengan class active
            var activeLicense = document.querySelector('.card-item.card-item-license.active');

            if (!activeLicense) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Pesan',
                    text: 'Harap pilih lisensi yang akan dibeli',
                });
                return;
            }

            var idLicense = activeLicense.getAttribute('data-id');

            // redirect ke route Laravel
            window.location.href = '/payment/' + mode + '/' + idLicense;
        }
    </script>

    <script>
        // untuk fitur wishlist song
        function actionWishlist(button) {
            const songId = $(button).data('song-id');
            $.ajax({
                url: `/songs/${songId}/wishlist`,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {

                        $(button).toggleClass('active', response.isWishlisted);
                        // Update jumlah wishlist
                        $(button).find('.wishlist-count').text(response.wishlistCount);

                        $(button).data('is-wishlisted', response.isWishlisted);
                    } else {

                        alert('Gagal melakukan aksi wishlist: ' + response.message);
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 401) {
                        alert('Anda harus login untuk menambahkan ke wishlist.');
                        window.location.href = '/login';
                    } else {
                        alert('Terjadi kesalahan. Silakan coba lagi.');
                        console.error(xhr.responseText);
                    }
                }
            });
        }

        // untuk fitur like song
        function actionLike(button) {
            const songId = $(button).data('song-id');

            $.ajax({
                url: `/songs/${songId}/like`,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {

                        $(button).toggleClass('active', response.isLiked);

                        // Update jumlah like
                        $(button).find('.like-count').text(response.likeCount);

                        // Update data-is-liked di tombol
                        $(button).data('is-liked', response.isLiked);


                    } else {
                        alert('Gagal melakukan aksi like: ' + response.message);
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 401) {
                        alert('Anda harus login untuk melakukan like.');
                        window.location.href = '/login';
                    } else {
                        alert('Terjadi kesalahan. Silakan coba lagi.');
                        console.error(xhr.responseText);
                    }
                }
            });
        }

        // untuk fitur follow / unfollow user
        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');
                        }

                        animateButton(buttonElement);
                    } else {
                        console.error('Follow/Unfollow Error:', data.message || 'Terjadi kesalahan.');

                    }
                },
                error: function(xhr) {

                    if (xhr.status === 401) {
                        alert('Anda harus login untuk mengikuti artis.');

                    } else {
                        alert('Terjadi kesalahan. Silakan coba lagi.');
                        console.error('Error:', xhr.responseText);
                    }
                }
            });
        }

        function animateButton(button) {
            $(button).addClass('animated');
            setTimeout(() => {
                $(button).removeClass('animated');
            }, 500);
        }
    </script>
    <script>
        $(document).ready(function() {
            const csrfToken = $('meta[name="csrf-token"]').attr('content');
            const songId = "{{ $song->id }}";

            function autoExpandTextarea(textarea) {
                textarea.style.height = 'auto';
                textarea.style.height = (textarea.scrollHeight) + 'px';
            }

            function createCommentHtml(comment) {
                const replyButtonHtml = (comment.level < 2) ?
                    `<button class="comment-reply-btn">Balas</button>` : '';

                let repliesHtml = '';
                if (comment.replies && comment.replies.length > 0) {
                    const repliesToggleButton = `
                    <div class="replies-toggle" data-comment-id="${comment.id}" data-replies-count="${comment.replies.length}">
                        <i class="ti ti-chevron-down replies-icon"></i>
                        <span class="replies-count">${comment.replies.length} balasan</span>
                    </div>
                `;

                    let nestedRepliesHtml = '';
                    comment.replies.forEach(reply => {
                        nestedRepliesHtml += createCommentHtml(reply);
                    });

                    repliesHtml = `
                    ${repliesToggleButton}
                    <div class="comment-replies" style="display: none;">
                        ${nestedRepliesHtml}
                    </div>
                `;
                }

                return `
                <div class="comment-item ${comment.parent_id ? 'reply-item' : ''}" data-comment-id="${comment.id}">
                    <img src="${comment.user_avatar}" alt="${comment.user_name}" class="comment-avatar">
                    <div class="comment-content">
                        <div class="comment-header-info">
                            <span class="commenter-name">@${comment.user_name}</span>
                            ${comment.is_creator ? '<span class="creator-badge">Creator</span>' : ''}
                            <span class="comment-time">${comment.time_ago}</span>
                        </div>
                        <p class="comment-text">${comment.text}</p>
                        <div class="comment-actions-row">
                            ${replyButtonHtml}
                        </div>
                        ${repliesHtml}
                    </div>
                </div>
            `;
            }

            function renderComments(comments, totalComments) {
                const commentsList = $('.comments-list');
                commentsList.empty();

                if (comments.length === 0) {
                    commentsList.html('<p class="no-comments-message">Belum ada komentar.</p>');
                } else {
                    comments.forEach(comment => {
                        commentsList.append(createCommentHtml(comment));
                    });
                }
                $('#total-comments-count').text(totalComments);
            }

            // --- Fungsi untuk memuat komentar dari server ---
            function loadComments(sortBy = 'latest') {
                const commentsList = $('.comments-list');
                commentsList.html('<p class="loading-message">Memuat komentar...</p>');

                $.ajax({
                    url: `/songs/${songId}/comments`,
                    type: 'GET',
                    data: {
                        sort_by: sortBy
                    },
                    success: function(response) {
                        renderComments(response.comments, response.total_comments);
                    },
                    error: function() {
                        commentsList.html(
                            '<p class="error-message">Gagal memuat komentar. Silakan coba lagi.</p>'
                        );
                    }
                });
            }

            // --- Fitur Sorting Komentar ---
            const sortButton = $('.sort-btn');
            const commentsHeader = $('.comments-header');

            const sortDropdownHtml = `
            <div class="sort-dropdown" style="display: none;">
                <ul>
                    <li data-sort="latest">Terbaru</li>
                    <li data-sort="oldest">Terlama</li>
                    <li data-sort="popular">Terpopuler</li>
                </ul>
            </div>
        `;
            sortButton.parent().append(sortDropdownHtml);
            const sortDropdown = commentsHeader.find('.sort-dropdown');

            sortButton.on('click', function() {
                sortDropdown.toggle();
            });

            sortDropdown.on('click', 'li', function() {
                const sortBy = $(this).data('sort');
                const newSortText = $(this).text();

                sortDropdown.hide();
                $('#current-sort-option').text(newSortText);

                loadComments(sortBy);
            });

            $(document).on('click', function(e) {
                if (!$(e.target).closest('.sort-comments').length) {
                    sortDropdown.hide();
                }
            });


            $('.comment-textarea').on('focus', function() {
                $(this).closest('.comment-input-container').find('.comment-actions').slideDown(200);
                autoExpandTextarea(this);
            }).on('input', function() {
                autoExpandTextarea(this);
            });

            // Event listener untuk tombol batal di komentar utama
            $('.cancel-comment-btn').on('click', function() {
                const container = $(this).closest('.comment-input-container');
                container.find('.comment-textarea').val('');
                container.find('.comment-actions').slideUp(200);
                container.find('.comment-textarea').css('height', 'auto');
            });

            // Event listener untuk tombol Balas (delegasi event)
            $(document).on('click', '.comment-reply-btn', function() {
                const commentItem = $(this).closest('.comment-item');
                const parentCommentId = commentItem.data('comment-id');
                const existingReplyForm = commentItem.find('.add-reply-form');

                $('.add-reply-form').not(existingReplyForm).remove();

                if (existingReplyForm.length) {
                    existingReplyForm.remove();
                } else {
                    const userAvatar =
                        "{{ Auth::check() ? app('App\Services\UserServices')->getAvatar(Auth::user(), 'sm') : 'https://i.pravatar.cc/36' }}";
                    const replyFormHtml = `
                    <div class="add-reply-form mt-3" data-parent-id="${parentCommentId}">
                        <div class="comment-input-row">
                            <img src="${userAvatar}" alt="User Avatar" class="user-comment-avatar">
                            <div class="comment-input-container">
                                <textarea class="comment-textarea reply-textarea" placeholder="Tambahkan balasan..." rows="1"></textarea>
                                <div class="comment-actions">
                                    <button class="cancel-reply-btn">Batal</button>
                                    <button class="submit-comment-btn submit-reply-btn" data-song-id="${songId}">Balas</button>
                                </div>
                            </div>
                        </div>
                    </div>
                `;

                    let repliesContainer = commentItem.find('.comment-replies:first');

                    if (repliesContainer.length > 0) {
                        if (!repliesContainer.is(':visible')) {
                            repliesContainer.slideDown(200);
                            const repliesToggle = commentItem.find('.replies-toggle');
                            const totalReplies = repliesToggle.data('replies-count');
                            repliesToggle.find('.replies-count').text('Sembunyikan balasan');
                        }
                        repliesContainer.before(replyFormHtml);
                    } else {
                        commentItem.find('.comment-content').append(replyFormHtml);
                    }

                    const newReplyTextarea = commentItem.find('.reply-textarea');
                    newReplyTextarea.focus();
                    autoExpandTextarea(newReplyTextarea[0]);

                    newReplyTextarea.closest('.comment-input-container').find('.comment-actions').slideDown(
                        200);
                }
            });

            $(document).on('click', '.cancel-reply-btn', function() {
                const container = $(this).closest('.add-reply-form');
                container.remove();
            });

            $(document).on('click', '.replies-toggle', function() {
                const commentItem = $(this).closest('.comment-item');
                const repliesContainer = commentItem.find('.comment-replies:first');
                const repliesCountElement = $(this).find('.replies-count');
                const totalReplies = $(this).data('replies-count');
                const repliesIcon = $(this).find('.replies-icon');

                repliesContainer.slideToggle(200, function() {
                    if (repliesContainer.is(':visible')) {
                        repliesCountElement.text('Sembunyikan balasan');
                        repliesIcon.addClass('expanded');
                    } else {
                        repliesCountElement.text(`${totalReplies} balasan`);
                        repliesIcon.removeClass('expanded');
                    }
                });
            });

            $(document).on('click', '.submit-comment-btn', function() {
                const button = $(this);
                const textarea = button.closest('.comment-input-container').find('.comment-textarea');
                const commentText = textarea.val().trim();
                const parentId = button.closest('.add-reply-form').data('parent-id');

                if (commentText === '') {
                    alert('Komentar tidak boleh kosong.');
                    return;
                }

                button.prop('disabled', true).text('Mengirim...');

                $.ajax({
                    url: `/songs/${songId}/comments`,
                    type: 'POST',
                    data: {
                        _token: csrfToken,
                        comment: commentText,
                        parent_id: parentId
                    },
                    success: function(response) {
                        if (response.success) {
                            // Buat HTML untuk komentar/balasan baru
                            const newCommentHtml = createCommentHtml(response.comment);

                            if (parentId) {

                                const parentCommentItem = $(`[data-comment-id="${parentId}"]`);
                                let repliesContainer = parentCommentItem.find(
                                    '.comment-replies:first');


                                if (repliesContainer.length === 0) {

                                    repliesContainer = $(
                                        `<div class="comment-replies" style="display: none;"></div>`
                                    );
                                    parentCommentItem.find('.comment-content').append(
                                        repliesContainer);
                                    const repliesToggleHtml =
                                        `<div class="replies-toggle" data-comment-id="${parentId}" data-replies-count="1"><i class="ti ti-chevron-down replies-icon"></i><span class="replies-count">1 balasan</span></div>`;
                                    parentCommentItem.find('.comment-actions-row').after(
                                        repliesToggleHtml);
                                }

                                repliesContainer.prepend(newCommentHtml);
                                parentCommentItem.find('.add-reply-form').remove();
                                const repliesToggle = parentCommentItem.find('.replies-toggle');
                                const totalRepliesFromServer = response
                                    .total_replies_for_parent;


                                repliesToggle.data('replies-count', totalRepliesFromServer);
                                repliesToggle.find('.replies-count').text(
                                    `${totalRepliesFromServer} balasan`);


                                repliesContainer.slideDown(200);

                            } else {

                                $('.comments-list').prepend(newCommentHtml);


                                textarea.val('');
                                textarea.closest('.comment-input-container').find(
                                    '.comment-actions').slideUp(200);
                                textarea.css('height', 'auto');
                            }


                            $('#total-comments-count').text(response.total_comments);

                        } else {

                            alert('Gagal menambahkan komentar: ' + response.message);
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 401) {
                            alert('Anda harus login untuk berkomentar.');
                            window.location.href = '/login';
                        } else if (xhr.status === 400 || xhr.status === 422) {
                            const errorMsg = xhr.responseJSON && xhr.responseJSON.message ? xhr
                                .responseJSON.message : 'Terjadi kesalahan validasi.';
                            alert(errorMsg);
                        } else {
                            alert('Terjadi kesalahan. Silakan coba lagi.');
                            console.error(xhr.responseText);
                        }
                    },
                    complete: function() {
                        button.prop('disabled', false).text(parentId ? 'Balas' : 'Komentar');
                    }
                });
            });

            $('.comment-textarea').each(function() {
                autoExpandTextarea(this);
            });
        });
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const desc = document.getElementById("songDesc");
            const fadeMask = document.getElementById("fadeMask");
            const toggleBtn = document.getElementById("toggleBtn");

            let expanded = false;

            toggleBtn.addEventListener("click", () => {
                expanded = !expanded;

                if (expanded) {
                    desc.classList.remove("max-h-24");
                    desc.classList.add("max-h-[1000px]"); // biar cukup tinggi
                    fadeMask.classList.add("hidden");
                    toggleBtn.textContent = "View Less";
                } else {
                    desc.classList.remove("max-h-[1000px]");
                    desc.classList.add("max-h-24");
                    fadeMask.classList.remove("hidden");
                    toggleBtn.textContent = "View More";
                }
            });
        });
    </script>


    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const elMain = document.getElementById('mainContent');

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