@extends('layouts.landing-page')

@section('styles')
    <style>
        .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;
        }

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

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

        .sort-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            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;
        }

        .comment-textarea:focus {
            outline: none;
            border-bottom-color: #fff;
        }

        .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 {
            display: flex;
            gap: 12px;
            align-items: flex-start;
        }

        .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-dislike-btn,
        .comment-reply-btn {
            display: flex;
            align-items: center;
            gap: 4px;
            background: transparent;
            border: none;
            color: #aaa;
            font-size: 12px;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 18px;
            transition: all 0.2s ease;
        }

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

        .comment-replies {
            margin-top: 12px;
            margin-left: 48px;
            padding-left: 12px;
            border-left: 1px solid #3f3f3f;
        }

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

        .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-wrapper">
                <div class="video-iframe-container">
                    <div class="video-content-wrapper">
                        <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                            allowfullscreen>
                        </iframe>
                    </div>
                </div>
            </div>

            <div class="video-info-section">
                <div class="video-title-actions-row">
                    <h1 class="video-main-title">Permisi - Suara Kita Studio (Cover)</h1>
                    <div class="video-action-buttons">
                        <button class="action-button like-button">
                            <i class="ti ti-thumb-up"></i>
                            <span>363</span>
                        </button>
                        <button class="action-button dislike-button">
                            <i class="ti ti-thumb-down"></i>
                            <span>15</span>
                        </button>
                    </div>
                </div>

                <div class="channel-info-container">
                    <div class="channel-left-info">
                        <div class="channel-avatar-wrapper">
                            <img src="https://via.placeholder.com/40x40/e62117/ffffff?text=SKS" alt="Suara Kita Studio"
                                class="channel-avatar-img">
                        </div>

                        <div class="channel-info-details">
                            <div class="channel-name-row">
                                <h3 class="channel-name-link">SUARA KITA STUDIO</h3>
                                <span class="verified-badge-inline">
                                    <img src="https://img.icons8.com/color/48/verified-badge.png" alt="Verified"
                                        class="verified-img">
                                </span>
                            </div>
                            <div class="channel-stats-row">
                                <span class="subscriber-count-text">1.2M followers</span>
                                <span class="stats-separator">•</span>
                                <span class="video-views-text">2.8M views</span>
                            </div>
                        </div>
                    </div>

                    <div class="channel-follow-section">
                        <button class="follow-btn" id="followBtn" onclick="toggleFollow()">
                            <i class="ti ti-user-plus" id="followIcon"></i>
                            <span id="followText">Follow</span>
                        </button>
                    </div>
                </div>
            </div>

            <div class="comments-section">
                <div class="comments-header">
                    <h3 class="comments-title">75 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="https://via.placeholder.com/36x36/6B7280/ffffff?text=U" 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">
                                <button class="cancel-comment-btn">Batal</button>
                                <button class="submit-comment-btn">Komentar</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="comments-list">
                    <div class="comment-item">
                        <img src="https://via.placeholder.com/36x36/e62117/ffffff?text=A" alt="Ahmad"
                            class="comment-avatar">
                        <div class="comment-content">
                            <div class="comment-header-info">
                                <span class="commenter-name">@ahmadmusik</span>
                                <span class="comment-time">2 jam yang lalu</span>
                            </div>
                            <p class="comment-text">Suaranya bagus banget! Cover yang sangat keren 🔥</p>
                            <div class="comment-actions-row">
                                <button class="comment-like-btn">
                                    <i class="ti ti-thumb-up"></i>
                                    <span>12</span>
                                </button>
                                <button class="comment-dislike-btn">
                                    <i class="ti ti-thumb-down"></i>
                                </button>
                                <button class="comment-reply-btn">Balas</button>
                            </div>
                        </div>
                    </div>

                    <div class="comment-item">
                        <img src="https://via.placeholder.com/36x36/4CAF50/ffffff?text=M" alt="Maria"
                            class="comment-avatar">
                        <div class="comment-content">
                            <div class="comment-header-info">
                                <span class="commenter-name">@mariamelodi</span>
                                <span class="comment-time">5 jam yang lalu</span>
                            </div>
                            <p class="comment-text">Mantap! Bikin video cover lagi dong 😍</p>
                            <div class="comment-actions-row">
                                <button class="comment-like-btn">
                                    <i class="ti ti-thumb-up"></i>
                                    <span>8</span>
                                </button>
                                <button class="comment-dislike-btn">
                                    <i class="ti ti-thumb-down"></i>
                                </button>
                                <button class="comment-reply-btn">Balas</button>
                            </div>
                        </div>
                    </div>

                    <div class="comment-item">
                        <img src="https://via.placeholder.com/36x36/FF9800/ffffff?text=R" alt="Rizki"
                            class="comment-avatar">
                        <div class="comment-content">
                            <div class="comment-header-info">
                                <span class="commenter-name">@rizkimusic</span>
                                <span class="comment-time">1 hari yang lalu</span>
                            </div>
                            <p class="comment-text">Lagu ini selalu bikin merinding setiap dengar. Great job!</p>
                            <div class="comment-actions-row">
                                <button class="comment-like-btn">
                                    <i class="ti ti-thumb-up"></i>
                                    <span>25</span>
                                </button>
                                <button class="comment-dislike-btn">
                                    <i class="ti ti-thumb-down"></i>
                                </button>
                                <button class="comment-reply-btn">Balas</button>
                            </div>

                            <div class="comment-replies">
                                <div class="comment-item reply-item">
                                    <img src="https://via.placeholder.com/32x32/e62117/ffffff?text=SKS"
                                        alt="Suara Kita Studio" class="comment-avatar">
                                    <div class="comment-content">
                                        <div class="comment-header-info">
                                            <span class="commenter-name">@suarakitastudio</span>
                                            <span class="creator-badge">Creator</span>
                                            <span class="comment-time">1 hari yang lalu</span>
                                        </div>
                                        <p class="comment-text">Terima kasih! ❤️</p>
                                        <div class="comment-actions-row">
                                            <button class="comment-like-btn">
                                                <i class="ti ti-thumb-up"></i>
                                                <span>5</span>
                                            </button>
                                            <button class="comment-dislike-btn">
                                                <i class="ti ti-thumb-down"></i>
                                            </button>
                                            <button class="comment-reply-btn">Balas</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="comment-item">
                        <img src="https://via.placeholder.com/36x36/9C27B0/ffffff?text=S" alt="Sari"
                            class="comment-avatar">
                        <div class="comment-content">
                            <div class="comment-header-info">
                                <span class="commenter-name">@sarivokal</span>
                                <span class="comment-time">2 hari yang lalu</span>
                            </div>
                            <p class="comment-text">Suara Kita Studio emang selalu ngasih yang terbaik. Keren!</p>
                            <div class="comment-actions-row">
                                <button class="comment-like-btn">
                                    <i class="ti ti-thumb-up"></i>
                                    <span>18</span>
                                </button>
                                <button class="comment-dislike-btn">
                                    <i class="ti ti-thumb-down"></i>
                                </button>
                                <button class="comment-reply-btn">Balas</button>
                            </div>
                        </div>
                    </div>

                    <div class="show-more-comments">
                        <button class="show-more-btn">
                            <i class="ti ti-chevron-down"></i>
                            <span>Tampilkan komentar lainnya</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="video-sidebar-section">
            <div class="sidebar-action-buttons">
                <button class="action-btn primary-btn">
                    <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>

            <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>
                            <div class="artist-info-row">
                                <img src="https://via.placeholder.com/48x48/e62117/ffffff?text=SA" alt="Siti Aliyah"
                                    class="artist-profile-image">
                                <div class="artist-details-info">
                                    <h5 class="artist-name-text">
                                        Siti Aliyah
                                        <div class="verified-badge">
                                            <img src="https://img.icons8.com/color/48/verified-badge.png" alt="Verified"
                                                class="verified-img">
                                        </div>
                                    </h5>
                                    <p class="artist-followers-text">458 rb followers</p>
                                    <button class="follow-artist-btn">Follow</button>
                                </div>
                            </div>
                        </div>

                        <div class="composer-section">
                            <h4 class="section-title">Composer / Pencipta Lagu:</h4>

                            <div class="composer-info-row">
                                <img src="https://via.placeholder.com/48x48/4CAF50/ffffff?text=M" alt="Maher"
                                    class="composer-profile-image">
                                <div class="composer-details-info">
                                    <h5 class="composer-name-text">
                                        Maher
                                        <div class="verified-badge">
                                            <img src="https://img.icons8.com/color/48/verified-badge.png" alt="Verified"
                                                class="verified-img">
                                        </div>
                                    </h5>
                                    <p class="composer-followers-text">21 rb followers</p>
                                    <button class="follow-composer-btn">Follow</button>
                                </div>
                            </div>

                            <div class="composer-info-row">
                                <img src="https://via.placeholder.com/48x48/FF9800/ffffff?text=JB" alt="Juna Bening"
                                    class="composer-profile-image">
                                <div class="composer-details-info">
                                    <h5 class="composer-name-text">Juna Bening</h5>
                                    <p class="composer-followers-text">8 rb followers</p>
                                    <button class="follow-composer-btn">Follow</button>
                                </div>
                            </div>
                        </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 : M. Wahyu Nurman</span>
                                    <span class="detail-text">Tanggal Rilis : 20 Juni 2024</span>
                                    <span class="detail-text">Label : Alpha Production</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 - Permisi</h4>
                            <div class="lyrics-text">
                                <p>Permisi aku ingin lewat</p>
                                <p>Aku tak ingin merepotkan</p>
                                <p>Hanya sebentar saja</p>
                                <p>Aku janji tak akan lama</p>
                                <br>
                                <p>Maafkan aku bila salah</p>
                                <p>Aku tak bermaksud menyakiti</p>
                                <p>Hanya ingin berbagi</p>
                                <p>Cerita yang ada di hati</p>
                                <br>
                                <p><em>*Lirik ini adalah interpretasi dan mungkin tidak 100% akurat</em></p>
                            </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="https://via.placeholder.com/60x60/e62117/ffffff?text=P" alt="Permisi">
                                    </div>
                                    <div class="current-song-details">
                                        <h5 class="current-song-title">Permisi</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">
                                <div class="version-card">
                                    <div class="version-thumbnail">
                                        <img src="https://via.placeholder.com/120x120/e62117/ffffff?text=🎵"
                                            alt="Acoustic Version">
                                        <div class="play-overlay">
                                            <i class="ti ti-play"></i>
                                        </div>
                                    </div>
                                    <div class="version-details">
                                        <h6>Permisi (Acoustic)</h6>
                                        <p>Siti Aliyah feat. Maher</p>
                                    </div>
                                </div>

                                <div class="version-card">
                                    <div class="version-thumbnail">
                                        <img src="https://via.placeholder.com/120x120/4CAF50/ffffff?text=🎼"
                                            alt="Instrumental">
                                        <div class="play-overlay">
                                            <i class="ti ti-play"></i>
                                        </div>
                                    </div>
                                    <div class="version-details">
                                        <h6>Permisi (Instrumental)</h6>
                                        <p>Suara Kita Studio</p>
                                    </div>
                                </div>

                                <div class="version-card">
                                    <div class="version-thumbnail">
                                        <img src="https://via.placeholder.com/120x120/FF9800/ffffff?text=🎤"
                                            alt="Karaoke">
                                        <div class="play-overlay">
                                            <i class="ti ti-play"></i>
                                        </div>
                                    </div>
                                    <div class="version-details">
                                        <h6>Permisi (Karaoke)</h6>
                                        <p>Suara Kita Studio</p>
                                    </div>
                                </div>

                                <div class="version-card">
                                    <div class="version-thumbnail">
                                        <img src="https://via.placeholder.com/120x120/9C27B0/ffffff?text=🎸"
                                            alt="Guitar Solo">
                                        <div class="play-overlay">
                                            <i class="ti ti-play"></i>
                                        </div>
                                    </div>
                                    <div class="version-details">
                                        <h6>Permisi (Guitar Solo)</h6>
                                        <p>Maher</p>
                                    </div>
                                </div>

                                <div class="version-card">
                                    <div class="version-thumbnail">
                                        <img src="https://via.placeholder.com/120x120/2196F3/ffffff?text=🎹"
                                            alt="Piano Cover">
                                        <div class="play-overlay">
                                            <i class="ti ti-play"></i>
                                        </div>
                                    </div>
                                    <div class="version-details">
                                        <h6>Permisi (Piano Cover)</h6>
                                        <p>Juna Bening</p>
                                    </div>
                                </div>

                                <div class="version-card">
                                    <div class="version-thumbnail">
                                        <img src="https://via.placeholder.com/120x120/795548/ffffff?text=🎺"
                                            alt="Jazz Version">
                                        <div class="play-overlay">
                                            <i class="ti ti-play"></i>
                                        </div>
                                    </div>
                                    <div class="version-details">
                                        <h6>Permisi (Jazz Version)</h6>
                                        <p>Suara Kita Studio</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        let isFollowing = false;
        let isLiked = false;
        let isDisliked = false;
        let likeCount = 363;
        let dislikeCount = 15;

        document.addEventListener('DOMContentLoaded', function() {
            initializeLikeButtons();
            initializeCommentForm();
            initializeCommentActions();
            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');

                    // Remove active class from all buttons and contents
                    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);
            }
        }

        function toggleLike() {
            const likeButton = document.querySelector('.like-button');
            const likeCountSpan = likeButton.querySelector('span');
            const dislikeButton = document.querySelector('.dislike-button');
            const dislikeCountSpan = dislikeButton.querySelector('span');

            if (isLiked) {
                // Unlike
                isLiked = false;
                likeButton.classList.remove('liked');
                likeCount--;
                likeCountSpan.textContent = likeCount;
                showNotification('Like dibatalkan', 'info');
            } else {
                // Like
                if (isDisliked) {
                    // Remove dislike first
                    isDisliked = false;
                    dislikeButton.classList.remove('disliked');
                    dislikeCount--;
                    dislikeCountSpan.textContent = dislikeCount;
                }

                isLiked = true;
                likeButton.classList.add('liked');
                likeCount++;
                likeCountSpan.textContent = likeCount;
                showNotification('Video disukai', 'success');
            }

            // Animation effect
            animateButton(likeButton);
        }

        function toggleDislike() {
            const dislikeButton = document.querySelector('.dislike-button');
            const dislikeCountSpan = dislikeButton.querySelector('span');
            const likeButton = document.querySelector('.like-button');
            const likeCountSpan = likeButton.querySelector('span');

            if (isDisliked) {
                // Remove dislike
                isDisliked = false;
                dislikeButton.classList.remove('disliked');
                dislikeCount--;
                dislikeCountSpan.textContent = dislikeCount;
                showNotification('Dislike dibatalkan', 'info');
            } else {
                // Dislike
                if (isLiked) {
                    // Remove like first
                    isLiked = false;
                    likeButton.classList.remove('liked');
                    likeCount--;
                    likeCountSpan.textContent = likeCount;
                }

                isDisliked = true;
                dislikeButton.classList.add('disliked');
                dislikeCount++;
                dislikeCountSpan.textContent = dislikeCount;
                showNotification('Video tidak disukai', 'info');
            }

            // Animation effect
            animateButton(dislikeButton);
        }

        // Follow/Unfollow functionality
        function toggleFollow() {
            const followBtn = document.getElementById('followBtn');
            const followIcon = document.getElementById('followIcon');
            const followText = document.getElementById('followText');

            if (isFollowing) {
                // Unfollow
                isFollowing = false;
                followBtn.classList.remove('following');
                followIcon.classList.remove('ti-check');
                followIcon.classList.add('ti-user-plus');
                followText.textContent = 'Follow';
                showNotification('Anda tidak lagi mengikuti SUARA KITA STUDIO', 'info');
            } else {
                // Follow
                isFollowing = true;
                followBtn.classList.add('following');
                followIcon.classList.remove('ti-user-plus');
                followIcon.classList.add('ti-check');
                followText.textContent = 'Following';
                showNotification('Anda sekarang mengikuti SUARA KITA STUDIO', 'success');
            }

            // Animation effect
            animateButton(followBtn);
        }

        // Comment form functionality
        function initializeCommentForm() {
            const commentTextarea = document.querySelector('.comment-textarea');
            const commentActions = document.querySelector('.comment-actions');
            const cancelBtn = document.querySelector('.cancel-comment-btn');
            const submitBtn = document.querySelector('.submit-comment-btn');

            if (commentTextarea) {
                commentTextarea.addEventListener('focus', function() {
                    commentActions.style.display = 'flex';
                    this.style.borderBottomColor = '#fff';
                });

                commentTextarea.addEventListener('blur', function(e) {
                    // Keep actions visible if clicking on action buttons
                    if (!commentActions.contains(e.relatedTarget)) {
                        setTimeout(() => {
                            if (this.value.trim() === '') {
                                commentActions.style.display = 'none';
                                this.style.borderBottomColor = '#3f3f3f';
                            }
                        }, 150);
                    }
                });

                commentTextarea.addEventListener('input', function() {
                    // Auto-resize textarea
                    this.style.height = 'auto';
                    this.style.height = Math.min(this.scrollHeight, 120) + 'px';

                    // Enable/disable submit button
                    if (submitBtn) {
                        submitBtn.disabled = this.value.trim() === '';
                    }
                });
            }

            if (cancelBtn) {
                cancelBtn.addEventListener('click', function() {
                    commentTextarea.value = '';
                    commentTextarea.style.height = 'auto';
                    commentActions.style.display = 'none';
                    commentTextarea.style.borderBottomColor = '#3f3f3f';
                });
            }

            if (submitBtn) {
                submitBtn.addEventListener('click', function() {
                    const commentText = commentTextarea.value.trim();
                    if (commentText) {
                        addNewComment(commentText);
                        commentTextarea.value = '';
                        commentTextarea.style.height = 'auto';
                        commentActions.style.display = 'none';
                        commentTextarea.style.borderBottomColor = '#3f3f3f';
                        showNotification('Komentar berhasil ditambahkan', 'success');
                    }
                });
            }
        }

        // Comment actions (like, dislike, reply)
        function initializeCommentActions() {
            document.addEventListener('click', function(e) {
                if (e.target.closest('.comment-like-btn')) {
                    toggleCommentLike(e.target.closest('.comment-like-btn'));
                }

                if (e.target.closest('.comment-dislike-btn')) {
                    toggleCommentDislike(e.target.closest('.comment-dislike-btn'));
                }

                if (e.target.closest('.comment-reply-btn')) {
                    handleCommentReply(e.target.closest('.comment-reply-btn'));
                }

                if (e.target.closest('.show-more-btn')) {
                    showMoreComments();
                }
            });
        }

        function toggleCommentLike(button) {
            const countSpan = button.querySelector('span');
            let count = parseInt(countSpan.textContent) || 0;

            if (button.classList.contains('liked')) {
                button.classList.remove('liked');
                count--;
                showNotification('Like komentar dibatalkan', 'info');
            } else {
                // Remove dislike if exists
                const commentItem = button.closest('.comment-item');
                const dislikeBtn = commentItem.querySelector('.comment-dislike-btn');
                if (dislikeBtn && dislikeBtn.classList.contains('disliked')) {
                    dislikeBtn.classList.remove('disliked');
                }

                button.classList.add('liked');
                count++;
                showNotification('Komentar disukai', 'success');
            }

            countSpan.textContent = count;
            animateButton(button);
        }

        function toggleCommentDislike(button) {
            if (button.classList.contains('disliked')) {
                button.classList.remove('disliked');
                showNotification('Dislike komentar dibatalkan', 'info');
            } else {
                // Remove like if exists
                const commentItem = button.closest('.comment-item');
                const likeBtn = commentItem.querySelector('.comment-like-btn');
                if (likeBtn && likeBtn.classList.contains('liked')) {
                    likeBtn.classList.remove('liked');
                    const likeCount = likeBtn.querySelector('span');
                    if (likeCount) {
                        let count = parseInt(likeCount.textContent) || 0;
                        likeCount.textContent = Math.max(0, count - 1);
                    }
                }

                button.classList.add('disliked');
                showNotification('Komentar tidak disukai', 'info');
            }

            animateButton(button);
        }

        function handleCommentReply(button) {
            const commentItem = button.closest('.comment-item');
            const commenterName = commentItem.querySelector('.commenter-name').textContent;

            // For now, just show a notification
            showNotification(`Membalas ${commenterName}...`, 'info');

            // You can implement actual reply functionality here
            // This might involve creating a reply form or opening a modal
        }

        function addNewComment(text) {
            const commentsList = document.querySelector('.comments-list');
            const newComment = document.createElement('div');
            newComment.className = 'comment-item';

            newComment.innerHTML = `
            <img src="https://via.placeholder.com/36x36/6B7280/ffffff?text=U" alt="User Avatar" class="comment-avatar">
            <div class="comment-content">
                <div class="comment-header-info">
                    <span class="commenter-name">@user</span>
                    <span class="comment-time">Baru saja</span>
                </div>
                <p class="comment-text">${text}</p>
                <div class="comment-actions-row">
                    <button class="comment-like-btn">
                        <i class="ti ti-thumb-up"></i>
                        <span>0</span>
                    </button>
                    <button class="comment-dislike-btn">
                        <i class="ti ti-thumb-down"></i>
                    </button>
                    <button class="comment-reply-btn">Balas</button>
                </div>
            </div>
        `;

            // Insert at the beginning of comments list
            const showMoreBtn = commentsList.querySelector('.show-more-comments');
            if (showMoreBtn) {
                commentsList.insertBefore(newComment, showMoreBtn);
            } else {
                commentsList.appendChild(newComment);
            }

            // Update comment count
            const commentsTitle = document.querySelector('.comments-title');
            if (commentsTitle) {
                const currentCount = parseInt(commentsTitle.textContent.match(/\d+/)[0]) || 0;
                commentsTitle.textContent = `${currentCount + 1} Komentar`;
            }
        }

        function showMoreComments() {
            const showMoreBtn = document.querySelector('.show-more-btn');
            if (showMoreBtn) {
                showMoreBtn.innerHTML = '<i class="ti ti-loader-2"></i><span>Memuat...</span>';

                // Simulate loading
                setTimeout(() => {
                    showNotification('Semua komentar telah dimuat', 'info');
                    showMoreBtn.style.display = 'none';
                }, 1500);
            }
        }

        // Utility functions
        function animateButton(button) {
            button.style.transform = 'scale(0.95)';
            setTimeout(() => {
                button.style.transform = 'scale(1)';
            }, 150);
        }

        function showNotification(message, type = 'info') {
            // Remove existing notifications
            const existingNotifications = document.querySelectorAll('.custom-notification');
            existingNotifications.forEach(notification => {
                notification.remove();
            });

            const notification = document.createElement('div');
            notification.className = 'custom-notification';

            const bgColor = type === 'success' ? '#4CAF50' : type === 'error' ? '#f44336' : '#2196F3';

            notification.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            background: ${bgColor};
            color: white;
            padding: 12px 20px;
            border-radius: 8px;
            z-index: 1000;
            font-size: 14px;
            font-weight: 500;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            transition: all 0.3s ease;
            max-width: 300px;
            word-wrap: break-word;
        `;

            notification.textContent = message;
            document.body.appendChild(notification);

            // Auto remove after 3 seconds
            setTimeout(() => {
                notification.style.opacity = '0';
                notification.style.transform = 'translateX(100%)';
                setTimeout(() => {
                    if (notification.parentNode) {
                        notification.parentNode.removeChild(notification);
                    }
                }, 300);
            }, 3000);
        }

        // Optional: Add CSS classes for liked/disliked states
        const additionalCSS = `
        .comment-like-btn.liked {
            color: #4CAF50 !important;
        }
        .comment-dislike-btn.disliked {
            color: #f44336 !important;
        }
        .like-button.liked {
            background: #4CAF50 !important;
        }
        .dislike-button.disliked {
            background: #f44336 !important;
        }
        .submit-comment-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
    `;

        // Inject additional CSS
        const styleSheet = document.createElement('style');
        styleSheet.textContent = additionalCSS;
        document.head.appendChild(styleSheet);

        // Optional: AJAX functions for backend communication
        /*
        function saveFollowStatus(following) {
            fetch('/api/channels/follow', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    channel_id: 'suara-kita-studio',
                    following: following
                })
            })
            .then(response => response.json())
            .then(data => {
                console.log('Follow status saved:', data);
            })
            .catch(error => {
                console.error('Error saving follow status:', error);
            });
        }

        function saveLikeStatus(liked, disliked) {
            fetch('/api/songs/like', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    song_id: 'current-song-id',
                    liked: liked,
                    disliked: disliked
                })
            })
            .then(response => response.json())
            .then(data => {
                console.log('Like status saved:', data);
            })
            .catch(error => {
                console.error('Error saving like status:', error);
            });
        }

        function saveComment(text) {
            fetch('/api/songs/comments', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    song_id: 'current-song-id',
                    comment: text
                })
            })
            .then(response => response.json())
            .then(data => {
                console.log('Comment saved:', data);
            })
            .catch(error => {
                console.error('Error saving comment:', error);
            });
        }
        */
    </script>
@endsection