diff --git "a/<parameter name=\"absolute_path\">/var/www/videoplatform/resources/views/videos/types/match_upnext.blade.php</parameter>" "b/<parameter name=\"absolute_path\">/var/www/videoplatform/resources/views/videos/types/match_upnext.blade.php</parameter>"
new file mode 100644
index 0000000..f5e7f5f
--- /dev/null
+++ "b/<parameter name=\"absolute_path\">/var/www/videoplatform/resources/views/videos/types/match_upnext.blade.php</parameter>"	
@@ -0,0 +1,2200 @@
+<parameter name="content">@extends('layouts.app')
+
+@section('title', $video->title . ' | ' . config('app.name'))
+
+@section('extra_styles')
+    <style>
+        /* Video Section */
+        .yt-video-section { flex: 1; min-width: 0; }
+
+        /* Video Player */
+        .video-container {
+            position: relative;
+            aspect-ratio: 16/9;
+            background: #000;
+            border-radius: 12px;
+            overflow: hidden;
+            max-height: 70vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+        }
+
+        .video-container.portrait,
+        .video-container.square,
+        .video-container.ultrawide {
+            margin: 0 auto;
+            width: auto;
+        }
+
+        .video-container.portrait { aspect-ratio: 9/16; max-width: 50vh; }
+        .video-container.square { aspect-ratio: 1/1; max-width: 70vh; }
+        .video-container.ultrawide { aspect-ratio: 21/9; max-width: 100%; }
+
+.video-container video { width: 100%; height: 100%; object-fit: contain; }
+
+        /* Playlist Navigation Controls */
+        .playlist-controls {
+            position: absolute;
+            bottom: 60px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            background: rgba(0, 0, 0, 0.8);
+            padding: 8px 16px;
+            border-radius: 24px;
+            z-index: 10;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .video-container:hover .playlist-controls,
+        .playlist-controls.visible { opacity: 1; }
+
+        .playlist-nav-btn {
+            background: transparent;
+            border: none;
+            color: white;
+            cursor: pointer;
+            padding: 8px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background 0.2s ease;
+        }
+
+        .playlist-nav-btn:hover { background: rgba(255, 255, 255, 0.2); }
+        .playlist-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
+        .playlist-nav-btn:disabled:hover { background: transparent; }
+        .playlist-nav-btn i { font-size: 20px; }
+
+        .playlist-nav-label {
+            font-size: 12px;
+            color: #aaa;
+            max-width: 120px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        /* Autoplay Toggle */
+        .autoplay-toggle {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 8px;
+            border-left: 1px solid rgba(255, 255, 255, 0.2);
+        }
+
+        .autoplay-toggle label {
+            font-size: 12px;
+            color: #aaa;
+            cursor: pointer;
+            white-space: nowrap;
+        }
+
+        .autoplay-switch { position: relative; width: 36px; height: 20px; }
+        .autoplay-switch input { opacity: 0; width: 0; height: 0; }
+
+        .autoplay-slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background-color: #666;
+            transition: 0.3s;
+            border-radius: 20px;
+        }
+
+        .autoplay-slider:before {
+            position: absolute;
+            content: "";
+            height: 14px;
+            width: 14px;
+            left: 3px;
+            bottom: 3px;
+            background-color: white;
+            transition: 0.3s;
+            border-radius: 50%;
+        }
+
+        .autoplay-switch input:checked + .autoplay-slider { background-color: var(--brand-red); }
+        .autoplay-switch input:checked + .autoplay-slider:before { transform: translateX(16px); }
+
+        /* Keyboard hint */
+        .keyboard-hint {
+            position: absolute;
+            bottom: 10px;
+            right: 10px;
+            font-size: 10px;
+            color: rgba(255, 255, 255, 0.5);
+            background: rgba(0, 0, 0, 0.6);
+            padding: 4px 8px;
+            border-radius: 4px;
+        }
+
+        /* Video Info */
+        .video-title {
+            font-size: 20px;
+            font-weight: 500;
+            margin: 16px 0 8px;
+            line-height: 1.3;
+        }
+
+        .video-stats-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding-bottom: 12px;
+            border-bottom: 1px solid var(--border-color);
+            flex-wrap: wrap;
+            gap: 12px;
+        }
+
+        .video-stats-left { display: flex; align-items: center; gap: 16px; color: var(--text-secondary); }
+
+        .video-actions {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .yt-action-btn {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 16px;
+            border-radius: 20px;
+            border: none;
+            background: var(--bg-secondary);
+            color: var(--text-primary);
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+        }
+
+        .yt-action-btn:hover { background: var(--border-color); }
+
+        .yt-action-btn.liked { color: var(--brand-red); }
+
+        /* Channel Row */
+        .channel-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 16px 0;
+        }
+
+        .channel-info {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .channel-avatar {
+            width: 48px; height: 48px; border-radius: 50%; background: #555;
+        }
+
+        .channel-name {
+            font-size: 16px;
+            font-weight: 500;
+        }
+
+        .channel-subs {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+
+        .subscribe-btn {
+            background: white;
+            color: black;
+            border: none;
+            padding: 8px 16px;
+            border-radius: 18px;
+            font-weight: 600;
+            font-size: 14px;
+            cursor: pointer;
+            white-space: nowrap;
+        }
+
+        /* Description */
+        .video-description {
+            background: var(--bg-secondary);
+            border-radius: 12px;
+            padding: 16px;
+            margin-top: 16px;
+        }
+
+        .description-text {
+            white-space: pre-wrap;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        /* Sidebar */
+        .yt-sidebar-container {
+            width: 400px;
+            flex-shrink: 0;
+        }
+
+        /* Match Events Sidebar */
+        .events-sidebar {
+            background: var(--bg-secondary);
+            border-radius: 12px;
+            overflow: hidden;
+            width: 400px;
+            flex-shrink: 0;
+        }
+
+        .events-sidebar-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 16px;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .events-sidebar-header h3 {
+            font-size: 16px;
+            font-weight: 600;
+            margin: 0;
+        }
+
+        .close-btn {
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            font-size: 24px;
+            cursor: pointer;
+            padding: 0;
+            line-height: 1;
+        }
+
+        .close-btn:hover {
+            color: var(--text-primary);
+        }
+
+        .tab-header {
+            display: flex;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .tab-button {
+            flex: 1;
+            padding: 12px 16px;
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            border-bottom: 2px solid transparent;
+        }
+
+        .tab-button:hover {
+            color: var(--text-primary);
+            background: rgba(255, 255, 255, 0.05);
+        }
+
+        .tab-button.active {
+            color: var(--brand-red);
+            border-bottom-color: var(--brand-red);
+        }
+
+        .tab-panels {
+            max-height: 500px;
+            overflow-y: auto;
+        }
+
+        .tab-panel {
+            display: none;
+            padding: 16px;
+        }
+
+        .tab-panel.active {
+            display: block;
+        }
+
+        .section-label {
+            font-size: 12px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            font-weight: 500;
+        }
+
+        .btn-icon {
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 14px;
+        }
+
+        .btn-icon:hover {
+            background: var(--border-color);
+            color: var(--text-primary);
+        }
+
+        .btn-add {
+            background: var(--brand-red);
+            color: white;
+            border: none;
+            padding: 4px 10px;
+            border-radius: 4px;
+            font-size: 12px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .btn-add:hover {
+            background: #dc2626;
+        }
+
+        .event-list {
+            margin-top: 12px;
+        }
+
+        .round-marker {
+            font-size: 11px;
+            font-weight: 600;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            padding: 8px 0;
+            margin-top: 8px;
+            border-top: 1px solid var(--border-color);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .round-marker:first-child {
+            border-top: none;
+            margin-top: 0;
+        }
+
+        /* Round badge styling - yellow background with black bold text */
+        .round-badge {
+            background-color: #fbbf24;
+            color: #000000;
+            font-weight: 700;
+            padding: 4px 12px;
+            border-radius: 6px;
+            font-size: 12px;
+            display: inline-block;
+        }
+
+        .round-actions {
+            display: flex;
+            gap: 4px;
+        }
+
+        .round-action-btn {
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-size: 12px;
+        }
+
+        .round-action-btn:hover {
+            background: var(--border-color);
+            color: var(--text-primary);
+        }
+
+        .event-item {
+            display: flex;
+            gap: 12px;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: background 0.2s ease;
+            margin-bottom: 4px;
+            position: relative;
+        }
+
+        .event-item:hover {
+            background: var(--border-color);
+        }
+
+        .event-item:hover .event-actions {
+            opacity: 1;
+        }
+
+        .event-actions {
+            position: absolute;
+            right: 8px;
+            top: 8px;
+            display: flex;
+            gap: 4px;
+            opacity: 0;
+            transition: opacity 0.2s ease;
+        }
+
+        .event-action-btn {
+            background: var(--bg-primary);
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            padding: 4px 6px;
+            border-radius: 4px;
+            font-size: 10px;
+        }
+
+        .event-action-btn:hover {
+            background: var(--border-color);
+            color: var(--text-primary);
+        }
+
+        .event-action-btn.delete:hover {
+            color: var(--brand-red);
+        }
+
+        .event-time {
+            font-size: 12px;
+            color: #3ea6ff;
+            font-weight: 500;
+            min-width: 55px;
+            text-align: center;
+        }
+
+        .event-label {
+            font-size: 14px;
+            font-weight: 500;
+            margin-bottom: 4px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            flex-wrap: wrap;
+        }
+
+        .event-meta {
+            font-size: 12px;
+           text-secondary);
+            color: var(-- line-height: 1.4;
+        }
+
+        .pill {
+            font-size: 10px;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-weight: 600;
+            text-transform: uppercase;
+        }
+
+        .pill-blue {
+            background: #3b82f6;
+            color: white;
+        }
+
+        .pill-red {
+            background: #ef4444;
+            color: white;
+        }
+
+        .comment-avatar {
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            overflow: hidden;
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: 4px;
+        }
+
+        .comment-avatar img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        /* Modal Styles */
+        .modal-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.7);
+            z-index: 9999;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .modal-overlay.active {
+            display: flex;
+        }
+
+        .modal-content {
+            background: var(--bg-secondary);
+            border-radius: 12px;
+            padding: 24px;
+            width: 90%;
+            max-width: 500px;
+            max-height: 90vh;
+            overflow-y: auto;
+        }
+
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+
+        .modal-header h3 {
+            font-size: 18px;
+            font-weight: 600;
+            margin: 0;
+        }
+
+        .modal-close {
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            font-size: 24px;
+            cursor: pointer;
+            padding: 0;
+            line-height: 1;
+        }
+
+        .modal-close:hover {
+            color: var(--text-primary);
+        }
+
+        .form-group {
+            margin-bottom: 16px;
+        }
+
+        .form-group label {
+            display: block;
+            font-size: 14px;
+            font-weight: 500;
+            margin-bottom: 6px;
+            color: var(--text-primary);
+        }
+
+        .form-group input,
+        .form-group select,
+        .form-group textarea {
+            width: 100%;
+            padding: 10px 12px;
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            font-size: 14px;
+        }
+
+        .form-group input:focus,
+        .form-group select:focus,
+        .form-group textarea:focus {
+            outline: none;
+            border-color: var(--brand-red);
+        }
+
+        .form-row {
+            display: flex;
+            gap: 12px;
+        }
+
+        .form-row .form-group {
+            flex: 1;
+        }
+
+        .modal-actions {
+            display: flex;
+            gap: 12px;
+            justify-content: flex-end;
+            margin-top: 20px;
+        }
+
+        .btn-cancel {
+            background: var(--bg-primary);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            padding: 10px 20px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+        }
+
+        .btn-cancel:hover {
+            background: var(--border-color);
+        }
+
+        .btn-save {
+            background: var(--brand-red);
+            border: none;
+            color: white;
+            padding: 10px 20px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+        }
+
+        .btn-save:hover {
+            background: #dc2626;
+        }
+
+        .btn-delete {
+            background: transparent;
+            border: 1px solid var(--brand-red);
+            color: var(--brand-red);
+            padding: 10px 20px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+        }
+
+        .btn-delete:hover {
+            background: var(--brand-red);
+            color: white;
+        }
+
+        /* Responsive */
+        @media (max-width: 1300px) {
+            .yt-sidebar-container { width: 300px; }
+            .events-sidebar { width: 300px; }
+        }
+
+        @media (max-width: 991px) {
+            .yt-main { margin-left: 0; flex-direction: column; }
+            .yt-sidebar-container { width: 100%; }
+            .sidebar-video-card { flex-direction: column; }
+            .sidebar-thumb { width: 100%; }
+            .events-sidebar { width: 100%; }
+
+            .video-layout-container {
+                flex-direction: column !important;
+            }
+            .yt-video-section {
+                width: 100% !important;
+                flex: none !important;
+            }
+            .yt-sidebar-container {
+                width: 100% !important;
+                margin-top: 16px;
+            }
+        }
+
+        @media (max-width: 576px) {
+            .video-stats-row { flex-direction: column; align-items: flex-start; }
+            .video-actions { width: 100%; overflow-x: auto; justify-content: flex-start; }
+            .yt-main { padding: 12px !important; }
+
+            .video-container {
+                max-height: 50vh !important;
+                border-radius: 0 !important;
+            }
+            .video-container video {
+                object-fit: contain !important;
+            }
+            .video-title {
+                font-size: 16px !important;
+                margin: 12px 0 6px !important;
+            }
+            .channel-row {
+                flex-direction: column;
+                align-items: flex-start !important;
+                gap: 12px;
+            }
+            .channel-info {
+                width: 100%;
+            }
+            .subscribe-btn {
+                width: 100%;
+            }
+            .video-description {
+                padding: 12px !important;
+            }
+        }
+    </style>
+@endsection
+
+@section('content')
+
+    <!-- Video Layout Container -->
+    <div class="video-layout-container" style="display: flex; gap: 24px; max-width: 1800px; margin: 0 auto;">
+
+        <!-- Video Section -->
+        <div class="yt-video-section">
+            <!-- Video Player -->
+            <div class="video-container @if($video->orientation === 'portrait') portrait @elseif($video->orientation === 'square') square @elseif($video->orientation === 'ultrawide') ultrawide @endif" id="videoContainer">
+                <video id="videoPlayer" controls playsinline preload="metadata" autoplay>
+                    <source src="{{ route('videos.stream', $video->id) }}" type="video/mp4">
+                </video>
+
+                <!-- Playlist Navigation Controls (only show when in playlist) -->
+                @if($nextVideo || $previousVideo)
+                <div class="playlist-controls" id="playlistControls">
+                    <!-- Previous Video -->
+                    @if($previousVideo)
+                    <button class="playlist-nav-btn" onclick="goToPreviousVideo()" title="Previous video">
+                        <i class="bi bi-skip-backward-fill"></i>
+                    </button>
+                    <span class="playlist-nav-label">{{ Str::limit($previousVideo->title, 20) }}</span>
+                    @else
+                    <button class="playlist-nav-btn" disabled title="No previous video">
+                        <i class="bi bi-skip-backward-fill"></i>
+                    </button>
+                    @endif
+
+                    <!-- Autoplay Toggle -->
+                    <div class="autoplay-toggle">
+                        <label for="autoplayToggle">Autoplay</label>
+                        <label class="autoplay-switch">
+                            <input type="checkbox" id="autoplayToggle" checked>
+                            <span class="autoplay-slider"></span>
+                        </label>
+                    </div>
+
+                    <!-- Next Video -->
+                    @if($nextVideo)
+                    <span class="playlist-nav-label">{{ Str::limit($nextVideo->title, 20) }}</span>
+                    <button class="playlist-nav-btn" onclick="goToNextVideo()" title="Next video">
+                        <i class="bi bi-skip-forward-fill"></i>
+                    </button>
+                    @else
+                    <button class="playlist-nav-btn" disabled title="No next video">
+                        <i class="bi bi-skip-forward-fill"></i>
+                    </button>
+                    @endif
+                </div>
+                <div class="keyboard-hint">
+                    <i class="bi bi-arrow-left"></i> <i class="bi bi-arrow-right"></i>
+                </div>
+                @endif
+            </div>
+
+            <!-- Video Title with Trophy Icon (Match Type) -->
+            <h1 class="video-title" style="display: flex; align-items: center; gap: 10px; margin: 8px 0 6px;">
+                <i class="bi bi-trophy" style="color: #ef4444;"></i>
+                <span>{{ $video->title }}</span>
+            </h1>
+
+            <!-- Stats Row - Hidden, shown in description box -->
+            <div class="video-stats-row" style="display: none;">
+                <div class="video-stats-left">
+                    <span>{{ number_format($video->view_count) }} views</span>
+                    <span>•</span>
+                    <span>{{ $video->created_at->format('M d, Y') }}</span>
+                </div>
+
+            <!-- Channel Row - All in one line -->
+            <div class="channel-row" style="display: flex; align-items: center; justify-content: space-between; padding: 12px 0; flex-wrap: wrap; gap: 16px;">
+                <div style="display: flex; align-items: center; gap: 12px;">
+                    <a href="{{ route('channel', $video->user_id) }}" class="channel-info text-decoration-none" style="color: inherit; display: flex; align-items: center; gap: 12px;">
+                        @if($video->user)
+                            <img src="{{ $video->user->avatar_url }}" class="channel-avatar" style="width: 40px; height: 40px; border-radius: 50%;" alt="{{ $video->user->name }}">
+                        @else
+                            <div class="channel-avatar" style="width: 40px; height: 40px; border-radius: 50%;"></div>
+                        @endif
+                        <div>
+                            <div class="channel-name" style="font-weight: 600;">{{ $video->user->name ?? 'Unknown' }}</div>
+                            <div class="channel-subs" style="font-size: 12px; color: var(--text-secondary);">{{ number_format($video->user->subscriber_count ?? 0) }} subscribers</div>
+                    </a>
+                </div>
+
+                <div class="video-actions" style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
+                    @auth
+                        @if(Auth::id() !== $video->user_id)
+                            <button class="subscribe-btn">Subscribe</button>
+                        @else
+                            <button class="yt-action-btn" onclick="openEditVideoModal({{ $video->id }})">
+                                <i class="bi bi-pencil"></i> Edit
+                            </button>
+                        @endif
+                    @else
+                        <a href="{{ route('login') }}" class="subscribe-btn">Subscribe</a>
+                    @endauth
+
+                    @auth
+                        <form method="POST" action="{{ $video->isLikedBy(Auth::user()) ? route('videos.unlike', $video->id) : route('videos.like', $video->id) }}" class="d-inline">
+                            @csrf
+                            <button type="submit" class="yt-action-btn {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}">
+                                <i class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}"></i>
+                                {{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}
+                            </button>
+                        </form>
+                    @else
+                        <a href="{{ route('login') }}" class="yt-action-btn">
+                            <i class="bi bi-hand-thumbs-up"></i> Like
+                        </a>
+                    @endauth
+
+                    @if($video->isShareable())
+                        <button class="yt-action-btn" onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}')">
+                            <i class="bi bi-share"></i> Share
+                        </button>
+                    @endif
+                </div>
+
+            <!-- Description Box -->
+            @if($video->description)
+            @php
+                $fullDescription = $video->description;
+                $shortDescription = Str::limit($fullDescription, 200);
+                $needsExpand = strlen($fullDescription) > 200;
+            @endphp
+
+            <div class="video-description-box" style="background: var(--bg-secondary); border-radius: 12px; padding: 12px; margin-bottom: 16px;">
+                <div class="description-stats" style="font-size: 14px; font-weight: 500; margin-bottom: 8px;">
+                    <span>{{ number_format($video->view_count) }} views</span>
+                    <span>•</span>
+                    <span>{{ $video->created_at->format('M d, Y') }}</span>
+                </div>
+                <div style="border-bottom: 1px solid var(--border-color); margin: 8px 0;"></div>
+                <div class="description-content" id="descriptionContent">
+                    @if($needsExpand)
+                        <div class="description-short" id="descShort">
+                            <span class="description-text">{!! Str::markdown($shortDescription) !!}</span>
+                            <span class="description-ellipsis" style="color: var(--text-secondary);">... </span>
+                        </div>
+                        <div class="description-full" id="descFull" style="display: none;">
+                            <span class="description-text">{!! Str::markdown($fullDescription) !!}</span>
+                        </div>
+                        <button onclick="toggleDescription()" id="descToggleBtn" style="background: none; border: none; color: var(--text-primary); font-weight: 600; font-size: 14px; cursor: pointer; padding: 0; margin-top: 4px;">
+                            Show more
+                        </button>
+                    @else
+                        <span class="description-text">{!! Str::markdown($fullDescription) !!}</span>
+                    @endif
+                </div>
+
+            <script>
+            function toggleDescription() {
+                const descShort = document.getElementById('descShort');
+                const descFull = document.getElementById('descFull');
+                const toggleBtn = document.getElementById('descToggleBtn');
+
+                if (descShort.style.display !== 'none') {
+                    descShort.style.display = 'none';
+                    descFull.style.display = 'block';
+                    toggleBtn.textContent = 'Show less';
+                } else {
+                    descShort.style.display = 'block';
+                    descFull.style.display = 'none';
+                    toggleBtn.textContent = 'Show more';
+                }
+            }
+            </script>
+
+            <style>
+            .video-description-box .description-text { font-size: 14px; line-height: 1.5; color: var(--text-primary); }
+            .video-description-box .description-text p { margin-bottom: 8px; }
+            .video-description-box .description-text a { color: #3ea6ff; }
+            </style>
+            @endif
+
+            <!-- <div class=" Comment Section -->
+           comments-section" style="margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-color);">
+                <h3 style="font-size: 18px; font-weight: 600; margin-bottom: 16px;">
+                    Comments <span style="color: var(--text-secondary); font-weight: 400;">({{ $video->comment_count }})</span>
+                </h3>
+
+                @auth
+                    <div class="comment-form" style="display: flex; gap: 12px; margin-bottom: 24px;">
+                        <img src="{{ Auth::user()->avatar_url }}" class="channel-avatar" style="width: 40px; height: 40px;" alt="{{ Auth::user()->name }}">
+                        <div style="flex: 1;">
+                            <textarea
+                                id="commentBody"
+                                class="form-control"
+                                placeholder="Add a comment... Use @ to mention someone"
+                                rows="3"
+                                style="background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 8px; padding: 12px; width: 100%; resize: none;"
+                            ></textarea>
+                            <div style="display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end;">
+                                <button type="button" class="yt-action-btn" onclick="document.getElementById('commentBody').value = ''">Cancel</button>
+                                <button type="button" class="yt-action-btn" style="background: var(--brand-red); color: white;" onclick="submitComment({{ $video->id }})">Comment</button>
+                            </div>
+                    </div>
+                @else
+                    <div style="margin-bottom: 24px; padding: 16px; background: var(--bg-secondary); border-radius: 8px; text-align: center;">
+                        <a href="{{ route('login') }}" style="color: var(--brand-red);">Sign in</a> to comment
+                    </div>
+                @endauth
+
+                <div id="commentsList">
+                    @forelse($video->comments()->whereNull('parent_id')->with('user', 'replies.user')->latest()->get() as $comment)
+                        @include('videos.partials.comment', ['comment' => $comment])
+                    @empty
+                        <p style="color: var(--text-secondary); text-align: center; padding: 20px;">No comments yet. Be the first to comment!</p>
+                    @endforelse
+                </div>
+
+            <script>
+            function submitComment(videoId) {
+                const body = document.getElementById('commentBody').value.trim();
+                if (!body) return;
+
+                fetch(`/videos/${videoId}/comments`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                    },
+                    body: JSON.stringify({ body: body })
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        document.getElementById('commentBody').value = '';
+                        location.reload();
+                    }
+                });
+            }
+
+            function deleteComment(commentId) {
+                if (!confirm('Are you sure you want to delete this comment?')) return;
+
+                fetch(`/comments/${commentId}`, {
+                    method: 'DELETE',
+                    headers: {
+                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                    }
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        location.reload();
+                    }
+                });
+            }
+
+            document.addEventListener('DOMContentLoaded', function() {
+                const commentTexts = document.querySelectorAll('.comment-body');
+                commentTexts.forEach(text => {
+                    const html = text.innerHTML.replace(/@(\w+)/g, '<span style="color: #3ea6ff; font-weight: 500;">@$1</span>');
+                    text.innerHTML = html;
+                });
+            });
+
+            function submitReply(videoId, parentId) {
+                const textarea = document.querySelector(`#replyForm${parentId} textarea`);
+                const body = textarea.value.trim();
+                if (!body) return;
+
+                fetch(`/videos/${videoId}/comments`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                    },
+                    body: JSON.stringify({ body: body, parent_id: parentId })
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        location.reload();
+                    }
+                });
+            }
+            </script>
+        </div>
+
+        <!-- Sidebar - Match Highlights -->
+        <div class="yt-sidebar-container">
+            <aside class="events-sidebar">
+                <div class="events-sidebar-header" style="justify-content: center;">
+                    <h3>Match Highlights</h3>
+                </div>
+
+                <div class="tab-header">
+                    <button class="tab-button active" data-tab="official">Points</button>
+                    <button class="tab-button" data-tab="review">Coach review</button>
+                </div>
+
+                <div class="tab-panels">
+                    <!-- Points Tab -->
+                    <div class="tab-panel active" id="tab-official">
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
+                            <div>
+                                <div class="section-label">Rounds &amp; points</div>
+                            @auth
+                                @if(Auth::id() === $video->user_id)
+                                    <button class="btn-add" type="button" onclick="openAddRoundModal()">
+                                        <span>+</span> Add Round
+                                    </button>
+                                @endif
+                            @endauth
+                        </div>
+
+                        <div class="event-list" id="officialEvents">
+                            <!-- Round marker for Round 1 -->
+                            <div class="round-marker" data-round="1">
+                                <span class="round-badge">ROUND 1</span>
+                                @auth
+                                    @if(Auth::id() === $video->user_id)
+                                        <div class="round-actions">
+                                            <button class="round-action-btn" onclick="openAddPointModal(1)" title="Add point">+</button>
+                                            <button class="round-action-btn" onclick="editRound(1)" title="Edit round">✏️</button>
+                                            <button class="round-action-btn" onclick="deleteRound(1)" title="Delete round">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+
+                            <!-- Round 1 points -->
+                            <div class="event-item" data-time-start="20" data-round="1" data-id="pt1">
+                                <div class="event-time">@00:20</div>
+                                <div>
+                                    <div class="event-label">
+                                        Blue body kick (1 pt)
+                                        <span class="pill pill-blue">Blue</span>
+                                    </div>
+                                    <div class="event-meta">
+                                        Round 1 • Score 1 – 0 • Clean contact.
+                                    </div>
+                                @auth
+                                    @if(Auth::id() === $video->user_id)
+                                        <div class="event-actions">
+                                            <button class="event-action-btn" onclick="editPoint('pt1')" title="Edit">✏️</button>
+                                            <button class="event-action-btn delete" onclick="deletePoint('pt1')" title="Delete">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+                            <div class="event-item" data-time-start="45" data-round="1" data-id="pt2">
+                                <div class="event-time">@00:45</div>
+                                <div>
+                                    <div class="event-label">
+                                        Blue scores body kick
+                                        <span class="pill pill-blue">Blue</span>
+                                    </div>
+                                    <div class="event-meta">
+                                        Round 1 • Score 2 – 0 • Judge: Central.
+                                    </div>
+                                @auth
+                                    @if(Auth::id() === $video->user_id)
+                                        <div class="event-actions">
+                                            <button class="event-action-btn" onclick="editPoint('pt2')" title="Edit">✏️</button>
+                                            <button class="event-action-btn delete" onclick="deletePoint('pt2')" title="Delete">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+
+                            <!-- Round marker for Round 2 -->
+                            <div class="round-marker" data-round="2">
+                                <span class="round-badge">ROUND 2</span>
+                                @auth
+                                    @if(Auth::id() === $video->user_id)
+                                        <div class="round-actions">
+                                            <button class="round-action-btn" onclick="openAddPointModal(2)" title="Add point">+</button>
+                                            <button class="round-action-btn" onclick="editRound(2)" title="Edit round">✏️</button>
+                                            <button class="round-action-btn" onclick="deleteRound(2)" title="Delete round">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+
+                            <!-- Round 2 points -->
+                            <div class="event-item" data-time-start="90" data-round="2" data-id="pt3">
+                                <div class="event-time">@01:30</div>
+                                <div>
+                                    <div class="event-label">
+                                        Red head kick (3 pts)
+                                        <span class="pill pill-red">Red</span>
+                                    </div>
+                                    <div class="event-meta">
+                                        Round 2 • Score 2 – 3 • Video replay requested.
+                                    </div>
+                                @auth
+                                    @if(Auth::id() === $video->user_id)
+                                        <div class="event-actions">
+                                            <button class="event-action-btn" onclick="editPoint('pt3')" title="Edit">✏️</button>
+                                            <button class="event-action-btn delete" onclick="deletePoint('pt3')" title="Delete">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+
+                            <!-- Round marker for Round 3 -->
+                            <div class="round-marker" data-round="3">
+                                <span class="round-badge">ROUND 3</span>
+                                @auth
+                                    @if(Auth::id() === $video->user_id)
+                                        <div class="round-actions">
+                                            <button class="round-action-btn" onclick="openAddPointModal(3)" title="Add point">+</button>
+                                            <button class="round-action-btn" onclick="editRound(3)" title="Edit round">✏️</button>
+                                            <button class="round-action-btn" onclick="deleteRound(3)" title="Delete round">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+
+                            <!-- Round 3 points -->
+                            <div class="event-item" data-time-start="150" data-round="3" data-id="pt4">
+                                <div class="event-time">@02:30</div>
+                                <div>
+                                    <div class="event-label">
+                                        Blue spinning backfist (2 pts)
+                                        <span class="pill pill-blue">Blue</span>
+                                    </div>
+                                    <div class="event-meta">
+                                        Round 3 • Score 4 – 3 • Close round.
+                                    </div>
+                                @auth
+                                    @if(Auth::id() === $video->user_id)
+                                        <div class="event-actions">
+                                            <button class="event-action-btn" onclick="editPoint('pt4')" title="Edit">✏️</button>
+                                            <button class="event-action-btn delete" onclick="deletePoint('pt4')" title="Delete">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+                            <div class="event-item" data-time-start="180" data-round="3" data-id="pt5">
+                                <div class="event-time">@03:00</div>
+                                <div>
+                                    <div class="event-label">
+                                        Red leg kick (1 pt)
+                                        <span class="pill pill-red">Red</span>
+                                    </div>
+                                    <div class="event-meta">
+                                        Round 3 • Score 4 – 4 • Tied!
+                                    </div>
+                                @auth
+                                    @if(Auth::id() === $video->user_id)
+                                        <div class="event-actions">
+                                            <button class="event-action-btn" onclick="editPoint('pt5')" title="Edit">✏️</button>
+                                            <button class="event-action-btn delete" onclick="deletePoint('pt5')" title="Delete">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+                    </div>
+
+                    <!-- Coach Review Tab -->
+                    <div class="tab-panel" id="tab-review">
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
+                            <div class="section-label">Private notes</div>
+                            @auth
+                                @if(Auth::id() === $video->user_id)
+                                    <button class="btn-add" type="button" onclick="openAddReviewModal()">
+                                        <span>+</span> Add Note
+                                    </button>
+                                @endif
+                            @endauth
+                        </div>
+                        <div class="event-list" id="reviewEvents">
+                            <div class="event-item" data-time-start="32" data-time-end="50" data-id="rev1">
+                                <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
+                                    <div style="font-size: 1.2rem; margin-bottom: 2px">🔥</div>
+                                    <div class="event-time">@00:32–00:50</div>
+                                <div>
+                                    <div class="event-label">
+                                        Good pressure, but guard too low after first kick
+                                    </div>
+                                    <div class="event-meta">
+                                        <div class="comment-avatar">
+                                            <img src="https://picsum.photos/seed/coach-ahmed/80/80" alt="Coach Ahmed">
+                                        </div>
+                                        Coach Ahmed • Hands drop after scoring, drill guard recovery immediately.
+                                    </div>
+                                @auth
+                                    @if(Auth::id() === $video->user_id)
+                                        <div class="event-actions">
+                                            <button class="event-action-btn" onclick="editReview('rev1')" title="Edit">✏️</button>
+                                            <button class="event-action-btn delete" onclick="deleteReview('rev1')" title="Delete">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+                            <div class="event-item" data-time-start="125" data-time-end="140" data-id="rev2">
+                                <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
+                                    <div style="font-size: 1.2rem; margin-bottom: 2px">🤔</div>
+                                    <div class="event-time">@02:05–02:20</div>
+                                <div>
+                                    <div class="event-label">Missed counter opportunity</div>
+                                    <div class="event-meta">
+                                        Coach Sara • Great angle, but no follow up. Use this clip to discuss risk vs reward.
+                                    </div>
+                                @auth
+                                    @if(Auth::id() === $video->user_id)
+                                        <div class="event-actions">
+                                            <button class="event-action-btn" onclick="editReview('rev2')" title="Edit">✏️</button>
+                                            <button class="event-action-btn delete" onclick="deleteReview('rev2')" title="Delete">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+                            <div class="event-item" data-time-start="205" data-id="rev3">
+                                <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
+                                    <div style="font-size: 1.2rem; margin-bottom: 2px">😄</div>
+                                    <div class="event-time">@03:25</div>
+                                <div>
+                                    <div class="event-label">
+                                        Excellent angle change and follow-up
+                                    </div>
+                                    <div class="event-meta">
+                                        <div class="comment-avatar">
+                                            <img src="https://picsum.photos/seed/coach-ahmed/80/80" alt="Coach Ahmed">
+                                        </div>
+                                        Coach Ahmed • Save as positive highlight, ideal example of exit and re-entry after scoring.
+                                    </div>
+                                @auth
+                                    @if(Auth::id() === $video->user_id)
+                                        <div class="event-actions">
+                                            <button class="event-action-btn" onclick="editReview('rev3')" title="Edit">✏️</button>
+                                            <button class="event-action-btn delete" onclick="deleteReview('rev3')" title="Delete">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+                    </div>
+            </aside>
+
+            <!-- Up Next Videos Section -->
+            @if(isset($recommendedVideos) && $recommendedVideos->count() > 0)
+            <div class="up-next-section" style="margin-top: 16px;">
+                <div class="up-next-header" style="padding: 12px 0; border-bottom: 1px solid var(--border-color);">
+                    <h3 style="font-size: 16px; font-weight: 600; margin: 0;">Up Next</h3>
+                </div>
+                <div class="up-next-list" style="display: flex; flex-direction: column; gap: 8px; padding-top: 12px;">
+                    @foreach($recommendedVideos->take(5) as $upNextVideo)
+                    <div class="up-next-item" style="display: flex; gap: 8px; cursor: pointer;" onclick="window.location.href='{{ route('videos.show', $upNextVideo->id) }}'">
+                        <div class="up-next-thumbnail" style="position: relative; width: 160px; flex-shrink: 0; border-radius: 8px; overflow: hidden;">
+                            @if($upNextVideo->thumbnail)
+                                <img src="{{ asset('storage/' . $upNextVideo->thumbnail) }}" alt="{{ $upNextVideo->title }}" style="width: 100%; height: 90px; object-fit: cover;">
+                            @else
+                                <div style="width: 100%; height: 90px; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center;">
+                                    <i class="bi bi-play-circle" style="font-size: 24px; color: var(--text-secondary);"></i>
+                                </div>
+                            @endif
+                            @if($upNextVideo->duration)
+                            <span class="video-duration" style="position: absolute; bottom: 4px; right: 4px; background: rgba(0,0,0,0.8); color: white; font-size: 11px; padding: 2px 4px; border-radius: 4px;">{{ $upNextVideo->duration }}</span>
+                            @endif
+                        </div>
+                        <div class="up-next-info" style="flex: 1; min-width: 0;">
+                            <div class="up-next-title" style="font-size: 13px; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">
+                                {{ $upNextVideo->title }}
+                            </div>
+                            <div class="up-next-meta" style="font-size: 11px; color: var(--text-secondary); margin-top: 4px;">
+                                <div>{{ $upNextVideo->user->name ?? 'Unknown' }}</div>
+                                <div>{{ number_format($upNextVideo->view_count) }} views</div>
+                        </div>
+                    @endforeach
+                </div>
+            @endif
+
+            <!-- Playlist Videos (if in playlist) -->
+            @if(isset($playlistVideos) && $playlistVideos->count() > 0)
+            <div class="playlist-section" style="margin-top: 16px;">
+                <div class="playlist-header" style="padding: 12px 0; border-bottom: 1px solid var(--border-color);">
+                    <h3 style="font-size: 16px; font-weight: 600; margin: 0;">
+                        @if(isset($playlist)) {{ $playlist->title }} @else More Videos @endif
+                    </h3>
+                </div>
+                <div class="playlist-list" style="display: flex; flex-direction: column; gap: 8px; padding-top: 12px;">
+                    @foreach($playlistVideos->take(5) as $playlistVideo)
+                    <div class="playlist-item" style="display: flex; gap: 8px; cursor: pointer;" onclick="window.location.href='{{ route('videos.show', $playlistVideo->id) }}?playlist={{ $playlist->id ?? '' }}'">
+                        <div class="playlist-thumbnail" style="position: relative; width: 120px; flex-shrink: 0; border-radius: 8px; overflow: hidden;">
+                            @if($playlistVideo->thumbnail)
+                                <img src="{{ asset('storage/' . $playlistVideo->thumbnail) }}" alt="{{ $playlistVideo->title }}" style="width: 100%; height: 68px; object-fit: cover;">
+                            @else
+                                <div style="width: 100%; height: 68px; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center;">
+                                    <i class="bi bi-play-circle" style="font-size: 20px; color: var(--text-secondary);"></i>
+                                </div>
+                            @endif
+                            @if($playlistVideo->duration)
+                            <span class="video-duration" style="position: absolute; bottom: 4px; right: 4px; background: rgba(0,0,0,0.8); color: white; font-size: 10px; padding: 2px 4px; border-radius: 4px;">{{ $playlistVideo->duration }}</span>
+                            @endif
+                        </div>
+                        <div class="playlist-info" style="flex: 1; min-width: 0;">
+                            <div class="playlist-title" style="font-size: 12px; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">
+                                {{ $playlistVideo->title }}
+                            </div>
+                            <div class="playlist-meta" style="font-size: 10px; color: var(--text-secondary); margin-top: 4px;">
+                                {{ number_format($playlistVideo->view_count) }} views
+                            </div>
+                    </div>
+                    @endforeach
+                </div>
+            @endif
+        </div>
+
+        <!-- Add Round Modal -->
+        <div class="modal-overlay" id="addRoundModal">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h3>Add New Round</h3>
+                    <button class="modal-close" onclick="closeModal('addRoundModal')">×</button>
+                </div>
+                <form id="addRoundForm">
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label>Round Number</label>
+                            <input type="number" id="roundNumber" min="1" required>
+                        </div>
+                        <div class="form-group">
+                            <label>Round Name (optional)</label>
+                            <input type="text" id="roundName" placeholder="e.g., ROUND 1">
+                        </div>
+                    <div class="modal-actions">
+                        <button type="button" class="btn-cancel" onclick="closeModal('addRoundModal')">Cancel</button>
+                        <button type="submit" class="btn-save">Add Round</button>
+                    </div>
+                </form>
+            </div>
+
+        <!-- Add/Edit Point Modal -->
+        <div class="modal-overlay" id="pointModal">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h3 id="pointModalTitle">Add Point</h3>
+                    <button class="modal-close" onclick="closeModal('pointModal')">×</button>
+                </div>
+                <form id="pointForm">
+                    <input type="hidden" id="pointId">
+                    <input type="hidden" id="pointRoundId">
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label>Timestamp (seconds)</label>
+                            <input type="number" id="pointTimestamp" min="0" required>
+                        </div>
+                        <div class="form-group">
+                            <label>Round</label>
+                            <select id="pointRoundSelect">
+                                <option value="1">Round 1</option>
+                                <option value="2">Round 2</option>
+                                <option value="3">Round 3</option>
+                                <option value="4">Round 4</option>
+                                <option value="5">Round 5</option>
+                            </select>
+                        </div>
+                    <div class="form-group">
+                        <label>Action Description</label>
+                        <input type="text" id="pointAction" placeholder="e.g., Blue body kick" required>
+                    </div>
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label>Points</label>
+                            <input type="number" id="pointValue" min="1" value </div>
+                       ="1">
+                        <div class="form-group">
+                            <label>Competitor</label>
+                            <select id="pointCompetitor">
+                                <option value="blue">Blue</option>
+                                <option value="red">Red</option>
+                            </select>
+                        </div>
+                    <div class="form-group">
+                        <label>Notes</label>
+                        <textarea id="pointNotes" rows="2" placeholder="Optional notes"></textarea>
+                    </div>
+                    <div class="modal-actions">
+                        <button type="button" class="btn-delete" id="deletePointBtn" onclick="confirmDeletePoint()" style="display: none;">Delete</button>
+                        <div style="flex: 1;"></div>
+                        <button type="button" class="btn-cancel" onclick="closeModal('pointModal')">Cancel</button>
+                        <button type="submit" class="btn-save">Save Point</button>
+                    </div>
+                </form>
+            </div>
+
+        <!-- Edit Round Modal -->
+        <div class="modal-overlay" id="editRoundModal">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h3>Edit Round</h3>
+                    <button class="modal-close" onclick="closeModal('editRoundModal')">×</button>
+                </div>
+                <form id="editRoundForm">
+                    <input type="hidden" id="editRoundNumber">
+                    <div class="form-group">
+                        <label>Round Name</label>
+                        <input type="text" id="editRoundName" placeholder="e.g., ROUND 1" required>
+                    </div>
+                    <div class="modal-actions">
+                        <button type="button" class="btn-delete" onclick="confirmDeleteRound()">Delete Round</button>
+                        <div style="flex: 1;"></div>
+                        <button type="button" class="btn-cancel" onclick="closeModal('editRoundModal')">Cancel</button>
+                        <button type="submit" class="btn-save">Save Changes</button>
+                    </div>
+                </form>
+            </div>
+
+        <!-- Add/Edit Review Modal -->
+        <div class="modal-overlay" id="reviewModal">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h3 id="reviewModalTitle">Add Coach Note</h3>
+                    <button class="modal-close" onclick="closeModal('reviewModal')">×</button>
+                </div>
+                <form id="reviewForm">
+                    <input type="hidden" id="reviewId">
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label>Start Time (seconds)</label>
+                            <input type="number" id="reviewStartTime" min="0" required>
+                        </div>
+                        <div class="form-group">
+                            <label>End Time (seconds)</label>
+                            <input type="number" id="reviewEndTime" min="0">
+                        </div>
+                    <div class="form-group">
+                        <label>Note</label>
+                        <textarea id="reviewNote" rows="3" placeholder="Coach's observation..." required></textarea>
+                    </div>
+                    <div class="form-group">
+                        <label>Coach Name</label>
+                        <input type="text" id="reviewCoach" placeholder="e.g., Coach Ahmed" required>
+                    </div>
+                    <div class="form-group">
+                        <label>Emoji</label>
+                        <select id="reviewEmoji">
+                            <option value="🔥">🔥 Good</option>
+                            <option value="🤔">🤔 Needs Work</option>
+                            <option value="😄">😄 Excellent</option>
+                            <option value="💪">💪 Strong</option>
+                            <option value="⚠️">⚠️ Warning</option>
+                        </select>
+                    </div>
+                    <div class="modal-actions">
+                        <button type="button" class="btn-delete" id="deleteReviewBtn" onclick="confirmDeleteReview()" style="display: none;">Delete</button>
+                        <div style="flex: 1;"></div>
+                        <button type="button" class="btn-cancel" onclick="closeModal('reviewModal')">Cancel</button>
+                        <button type="submit" class="btn-save">Save Note</button>
+                    </div>
+                </form>
+            </div>
+
+    </div>
+
+    @include('layouts.partials.share-modal')
+    @include('layouts.partials.edit-video-modal')
+
+    @if(Session::has('openEditModal') && Session::get('openEditModal'))
+    @auth
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            openEditVideoModal({{ $video->id }});
+        });
+    </script>
+    @endauth
+    @endif
+
+    <script>
+        // Playlist navigation URLs
+        const previousVideoUrl = @json($previousVideo ? route('videos.show', $previousVideo->id) . '?playlist=' . $playlist->id : null);
+        const nextVideoUrl = @json($nextVideo ? route('videos.show', $nextVideo->id) . '?playlist=' . $playlist->id : null);
+
+        // Video ID for API calls
+        const videoId = {{ $video->id }};
+        // Check if the current user is the owner of the video
+        const isOwner = {{ json_encode(Auth::check() && Auth::id() === $video->user_id) }};
+
+
+        // Autoplay management
+        let autoplayEnabled = true;
+
+        // Load match data on page load
+        document.addEventListener('DOMContentLoaded', function() {
+            loadMatchData();
+        });
+
+        // Load match data from API
+        async function loadMatchData() {
+            try {
+                const response = await fetch(`/videos/${videoId}/match-data`);
+                const data = await response.json();
+                if (data.success && data.rounds && data.rounds.length > 0) {
+                    renderMatchData(data.rounds, data.reviews);
+                } else {
+                    // No database data, render static demo data
+                    renderStaticData();
+                }
+            } catch (error) {
+                // API not available, render static demo data
+                renderStaticData();
+            }
+        }
+
+        // Render static demo data
+        function renderStaticData() {
+            // Static demo rounds and points
+            const staticRounds = [
+                {
+                    id: 1,
+                    round_number: 1,
+                    name: 'ROUND 1',
+                    points: [
+                        { id: 1, timestamp_seconds: 20, action: 'Blue body kick', points: 1, competitor: 'blue', score_blue: 1, score_red: 0, notes: 'Clean contact.' },
+                        { id: 2, timestamp_seconds: 45, action: 'Blue scores body kick', points: 1, competitor: 'blue', score_blue: 2, score_red: 0, notes: 'Judge: Central.' }
+                    ]
+                },
+                {
+                    id: 2,
+                    round_number: 2,
+                    name: 'ROUND 2',
+                    points: [
+                        { id: 3, timestamp_seconds: 90, action: 'Red head kick', points: 3, competitor: 'red', score_blue: 2, score_red: 3, notes: 'Video replay requested.' }
+                    ]
+                },
+                {
+                    id: 3,
+                    round_number: 3,
+                    name: 'ROUND 3',
+                    points: [
+                        { id: 4, timestamp_seconds: 150, action: 'Blue spinning backfist', points: 2, competitor: 'blue', score_blue: 4, score_red: 3, notes: 'Close round.' },
+                        { id: 5, timestamp_seconds: 180, action: 'Red leg kick', points: 1, competitor: 'red', score_blue: 4, score_red: 4, notes: 'Tied!' }
+                    ]
+                }
+            ];
+
+            const staticReviews = [
+                { id: 1, start_time_seconds: 32, end_time_seconds: 50, note: 'Good pressure, but guard too low after first kick', coach_name: 'Coach Ahmed', emoji: '🔥' },
+                { id: 2, start_time_seconds: 125, end_time_seconds: 140, note: 'Missed counter opportunity', coach_name: 'Coach Sara', emoji: '🤔' },
+                { id: 3, start_time_seconds: 205, end_time_seconds: null, note: 'Excellent angle change and follow-up', coach_name: 'Coach Ahmed', emoji: '😄' }
+            ];
+
+            renderMatchData(staticRounds, staticReviews);
+        }
+
+        // Render match data
+        function renderMatchData(rounds, reviews) {
+            if (!rounds || rounds.length === 0) return;
+
+            const pointsContainer = document.getElementById('officialEvents');
+            const reviewsContainer = document.getElementById('reviewEvents');
+
+            let pointsHtml = '';
+            let reviewsHtml = '';
+
+            // Render rounds and points
+            rounds.forEach(round => {
+                pointsHtml += `
+                    <div class="round-marker" data-round="${round.round_number}">
+                        <span class="round-badge">${round.name}</span>
+                        ${isOwner ? `
+                            <div class="round-actions">
+                                <button class="round-action-btn" onclick="openAddPointModal(${round.round_number}, ${round.id})" title="Add point">+</button>
+                                <button class="round-action-btn" onclick="editRound(${round.round_number}, ${round.id}, '${round.name}')" title="Edit round">✏️</button>
+                                <button class="round-action-btn" onclick="deleteRound(${round.id})" title="Delete round">🗑️</button>
+                            </div>
+                        ` : ''}
+                    </div>
+                `;
+
+                if (round.points) {
+                    round.points.forEach(point => {
+                        const competitorClass = point.competitor === 'blue' ? 'pill-blue' : 'pill-red';
+                        const competitorLabel = point.competitor === 'blue' ? 'Blue' : 'Red';
+                        const timeStr = formatTime(point.timestamp_seconds);
+
+                        pointsHtml += `
+                            <div class="event-item" data-time-start="${point.timestamp_seconds}" data-round="${round.round_number}" data-id="${point.id}">
+                                <div class="event-time">@${timeStr}</div>
+                                <div>
+                                    <div class="event-label">
+                                        ${point.action} (${point.points} pt)
+                                        <span class="pill ${competitorClass}">${competitorLabel}</span>
+                                    </div>
+                                    <div class="event-meta">
+                                        ${round.name} • Score ${point.score_blue} – ${point.score_red}${point.notes ? ' • ' + point.notes : ''}
+                                    </div>
+                                ${isOwner ? `
+                                    <div class="event-actions">
+                                        <button class="event-action-btn" onclick="editPoint(${point.id})" title="Edit">✏️</button>
+                                        <button class="event-action-btn delete" onclick="deletePoint(${point.id})" title="Delete">🗑️</button>
+                                    </div>
+                                ` : ''}
+                            </div>
+                        `;
+                    });
+                }
+            });
+
+            // Render reviews
+            if (reviews) {
+                reviews.forEach(review => {
+                    const timeStart = formatTime(review.start_time_seconds);
+                    const timeEnd = review.end_time_seconds ? '–' + formatTime(review.end_time_seconds) : '';
+                    const timeDisplay = timeStart + timeEnd;
+
+                    reviewsHtml += `
+                        <div class="event-item" data-time-start="${review.start_time_seconds}" data-time-end="${review.end_time_seconds || ''}" data-id="${review.id}">
+                            <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
+                                <div style="font-size: 1.2rem; margin-bottom: 2px">${review.emoji}</div>
+                                <div class="event-time">@${timeDisplay}</div>
+                            <div>
+                                <div class="event-label">
+                                    ${review.note}
+                                </div>
+                                <div class="event-meta">
+                                    <div class="comment-avatar">
+                                        <img src="https://picsum.photos/seed/${review.coach_name}/80/80" alt="${review.coach_name}">
+                                    </div>
+                                    ${review.coach_name}
+                                </div>
+                            ${isOwner ? `
+                                <div class="event-actions">
+                                    <button class="event-action-btn" onclick="editReview(${review.id})" title="Edit">✏️</button>
+                                    <button class="event-action-btn delete" onclick="deleteReview(${review.id})" title="Delete">🗑️</button>
+                                </div>
+                            ` : ''}
+                        </div>
+                    `;
+                });
+            }
+
+            if (pointsContainer) pointsContainer.innerHTML = pointsHtml;
+            if (reviewsContainer) reviewsContainer.innerHTML = reviewsHtml;
+
+            // Re-attach event listeners
+            attachEventListeners();
+        }
+
+        // Format seconds to mm:ss
+        function formatTime(seconds) {
+            const mins = Math.floor(seconds / 60);
+            const secs = seconds % 60;
+            return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+        }
+
+        // Tab switching functionality for Match Highlights
+        document.addEventListener('DOMContentLoaded', function() {
+            const tabButtons = document.querySelectorAll('.tab-button');
+            const tabPanels = document.querySelectorAll('.tab-panel');
+
+            tabButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    const targetTab = this.getAttribute('data-tab');
+
+                    // Remove active class from all buttons and panels
+                    tabButtons.forEach(btn => btn.classList.remove('active'));
+                    tabPanels.forEach(panel => panel.classList.remove('active'));
+
+                    // Add active class to clicked button and corresponding panel
+                    this.classList.add('active');
+                    document.getElementById('tab-' + targetTab).classList.add('active');
+                });
+            });
+
+            attachEventListeners();
+
+            // Modal form submissions
+            document.getElementById('addRoundForm').addEventListener('submit', function(e) {
+                e.preventDefault();
+                const roundNumber = document.getElementById('roundNumber').value;
+                const roundName = document.getElementById('roundName').value || 'ROUND ' + roundNumber;
+                storeRound(roundNumber, roundName);
+            });
+
+            document.getElementById('pointForm').addEventListener('submit', function(e) {
+                e.preventDefault();
+                savePoint();
+            });
+
+            document.getElementById('editRoundForm').addEventListener('submit', function(e) {
+                e.preventDefault();
+                updateRound();
+            });
+
+            document.getElementById('reviewForm').addEventListener('submit', function(e) {
+                e.preventDefault();
+                saveReview();
+            });
+        });
+
+        function attachEventListeners() {
+            // Event item click to seek video to timestamp
+            const eventItems = document.querySelectorAll('.event-item');
+            eventItems.forEach(item => {
+                item.addEventListener('click', function(e) {
+                    // Don't seek if clicking on action buttons
+                    if (e.target.closest('.event-actions')) return;
+
+                    const timeStart = this.getAttribute('data-time-start');
+                    if (timeStart) {
+                        const videoPlayer = document.getElementById('videoPlayer');
+                        if (videoPlayer) {
+                            videoPlayer.currentTime = parseInt(timeStart);
+                            videoPlayer.play();
+                        }
+                    }
+                });
+            });
+        }
+
+        // Modal Functions
+        function openModal(modalId) {
+            document.getElementById(modalId).classList.add('active');
+        }
+
+        function closeModal(modalId) {
+            document.getElementById(modalId).classList.remove('active');
+        }
+
+        // Close modal when clicking outside
+        document.querySelectorAll('.modal-overlay').forEach(modal => {
+            modal.addEventListener('click', function(e) {
+                if (e.target === this) {
+                    this.classList.remove('active');
+                }
+            });
+        });
+
+        // Get CSRF token - handle case where it might not be available
+        const csrfToken = '{{ Auth::check() ? csrf_token() : "" }}';
+
+        // Demo mode - disable API calls if not authenticated
+        const isDemoMode = !{{ Auth::check() ? 'true' : 'false' }};
+
+        // ==================== ROUND FUNCTIONS ====================
+
+        function openAddRoundModal() {
+            // In demo mode, show a message
+            if (isDemoMode || !csrfToken) {
+                alert('Demo Mode: This feature requires authentication in production. The edit functionality is fully implemented and will work when logged in as the video owner.');
+                return;
+            }
+            document.getElementById('roundNumber').value = '';
+            document.getElementById('roundName').value = '';
+            openModal('addRoundModal');
+        }
+
+        async function storeRound(roundNumber, roundName) {
+            if (!csrfToken) {
+                alert('Demo Mode: API calls require authentication.');
+                return;
+            }
+            try {
+                const response = await fetch(`/videos/${videoId}/rounds`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-TOKEN': csrfToken
+                    },
+                    body: JSON.stringify({
+                        round_number: roundNumber,
+                        name: roundName
+                    })
+                });
+                const data = await response.json();
+                if (data.success) {
+                    closeModal('addRoundModal');
+                    loadMatchData();
+                } else {
+                    alert(data.message || 'Error adding round');
+                }
+            } catch (error) {
+                alert('Error: ' + error.message);
+            }
+        }
+
+        function editRound(roundNumber, roundId, currentName) {
+            if (isDemoMode || !csrfToken) {
+                alert('Demo Mode: This feature requires authentication in production.');
+                return;
+            }
+            document.getElementById('editRoundNumber').value = roundId;
+            document.getElementById('editRoundName').value = currentName;
+            openModal('editRoundModal');
+        }
+
+        async function updateRound() {
+            if (!csrfToken) {
+                alert('Demo Mode: API calls require authentication.');
+                return;
+            }
+            const roundId = document.getElementById('editRoundNumber').value;
+            const roundName = document.getElementById('editRoundName').value;
+
+            try {
+                const response = await fetch(`/rounds/${roundId}`, {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-TOKEN': csrfToken
+                    },
+                    body: JSON.stringify({ name: roundName })
+                });
+                const data = await response.json();
+                if (data.success) {
+                    closeModal('editRoundModal');
+                    loadMatchData();
+                } else {
+                    alert(data.message || 'Error updating round');
+                }
+            } catch (error) {
+                alert('Error: ' + error.message);
+            }
+        }
+
+        async function deleteRound(roundId) {
+            if (!csrfToken) {
+                alert('Demo Mode: API calls require authentication.');
+                return;
+            }
+            if (!confirm('Are you sure you want to delete this round and all its points?')) return;
+
+            try {
+                const response = await fetch(`/rounds/${roundId}`, {
+                    method: 'DELETE',
+                    headers: {
+                        'X-CSRF-TOKEN': csrfToken
+                    }
+                });
+                const data = await response.json();
+                if (data.success) {
+                    loadMatchData();
+                } else {
+                    alert(data.message || 'Error deleting round');
+                }
+            } catch (error) {
+                alert('Error: ' + error.message);
+            }
+        }
+
+        // ==================== POINT FUNCTIONS ====================
+
+        function openAddPointModal(roundNumber, roundId) {
+            if (isDemoMode || !csrfToken) {
+                alert('Demo Mode: This feature requires authentication in production.');
+                return;
+            }
+            document.getElementById('pointModalTitle').textContent = 'Add Point';
+            document.getElementById('pointId').value = '';
+            document.getElementById('pointRoundId').value = roundId || '';
+            document.getElementById('pointTimestamp').value = '';
+            document.getElementById('pointRoundSelect').value = roundNumber || '1';
+            document.getElementById('pointAction').value = '';
+            document.getElementById('pointValue').value = '1';
+            document.getElementById('pointCompetitor').value = 'blue';
+            document.getElementById('pointNotes').value = '';
+            document.getElementById('deletePointBtn').style.display = 'none';
+            openModal('pointModal');
+        }
+
+        function editPoint(pointId) {
+            if (isDemoMode || !csrfToken) {
+                alert('Demo Mode: This feature requires authentication in production. The edit modal will open in production when logged in as the video owner.');
+                // Still open the modal in demo mode for visual preview
+            }
+            // Find point data from rendered HTML
+            const pointElement = document.querySelector(`.event-item[data-id="${pointId}"]`);
+            if (!pointElement) return;
+
+            document.getElementById('pointModalTitle').textContent = 'Edit Point';
+            document.getElementById('pointId').value = pointId;
+            document.getElementById('pointTimestamp').value = pointElement.dataset.timeStart || '';
+            document.getElementById('pointRoundSelect').value = pointElement.dataset.round || '1';
+            document.getElementById('pointAction').value = pointElement.querySelector('.event-label').textContent.split('(')[0].trim() || '';
+            document.getElementById('pointValue').value = '1';
+            document.getElementById('pointCompetitor').value = pointElement.querySelector('.pill')?.classList.contains('pill-blue') ? 'blue' : 'red';
+            document.getElementById('pointNotes').value = pointElement.querySelector('.event-meta')?.textContent.split('•').slice(2).join('').trim() || '';
+            document.getElementById('deletePointBtn').style.display = (isDemoMode || !csrfToken) ? 'none' : 'block';
+            openModal('pointModal');
+        }
+
+        async function savePoint() {
+            if (!csrfToken) {
+                alert('Demo Mode: API calls require authentication. In production, this will save to the database when logged in as the video owner.');
+                closeModal('pointModal');
+                return;
+            }
+            const pointId = document.getElementById('pointId').value;
+            const roundId = document.getElementById('pointRoundId').value;
+            const timestamp = document.getElementById('pointTimestamp').value;
+            const round = document.getElementById('pointRoundSelect').value;
+            const action = document.getElementById('pointAction').value;
+            const value = document.getElementById('pointValue').value;
+            const competitor = document.getElementById('pointCompetitor').value;
+            const notes = document.getElementById('pointNotes').value;
+
+            try {
+                if (pointId) {
+                    // Update existing point
+                    const response = await fetch(`/points/${pointId}`, {
+                        method: 'PUT',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-TOKEN': csrfToken
+                        },
+                        body: JSON.stringify({
+                            timestamp_seconds: parseInt(timestamp),
+                            action: action,
+                            points: parseInt(value),
+                            competitor: competitor,
+                            notes: notes
+                        })
+                    });
+                    const data = await response.json();
+                    if (data.success) {
+                        closeModal('pointModal');
+                        loadMatchData();
+                    } else {
+                        alert(data.message || 'Error updating point');
+                    }
+                } else {
+                    // Create new point
+                    const response = await fetch(`/videos/${videoId}/points`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-TOKEN': csrfToken
+                        },
+                        body: JSON.stringify({
+                            round_id: roundId,
+                            timestamp_seconds: parseInt(timestamp),
+                            action: action,
+                            points: parseInt(value),
+                            competitor: competitor,
+                            notes: notes
+                        })
+                    });
+                    const data = await response.json();
+                    if (data.success) {
+                        closeModal('pointModal');
+                        loadMatchData();
+                    } else {
+                        alert(data.message || 'Error adding point');
+                    }
+                }
+            } catch (error) {
+                alert('Error: ' + error.message);
+            }
+        }
+
+        async function deletePoint(pointId) {
+            if (!csrfToken) {
+                alert('Demo Mode: API calls require authentication.');
+                return;
+            }
+            if (!confirm('Are you sure you want to delete this point?')) return;
+
+            try {
+                const response = await fetch(`/points/${pointId}`, {
+                    method: 'DELETE',
+                    headers: {
+                        'X-CSRF-TOKEN': csrfToken
+                    }
+                });
+                const data = await response.json();
+                if (data.success) {
+                    closeModal('pointModal');
+                    loadMatchData();
+                } else {
+                    alert(data.message || 'Error deleting point');
+                }
+            } catch (error) {
+                alert('Error: ' + error.message);
+            }
+        }
+
+        // ==================== REVIEW FUNCTIONS ====================
+
+        function openAddReviewModal() {
+            if (isDemoMode || !csrfToken) {
+                alert('Demo Mode: This feature requires authentication in production.');
+                return;
+            }
+            document.getElementById('reviewModalTitle').textContent = 'Add Coach Note';
+            document.getElementById('reviewId').value = '';
+            document.getElementById('reviewStartTime').value = '';
+            document.getElementById('reviewEndTime').value = '';
+            document.getElementById('reviewNote').value = '';
+            document.getElementById('reviewCoach').value = '';
+            document.getElementById('reviewEmoji').value = '🔥';
+            document.getElementById('deleteReviewBtn').style.display = 'none';
+            openModal('reviewModal');
+        }
+
+        function editReview(reviewId) {
+            if (isDemoMode || !csrfToken) {
+                alert('Demo Mode: This feature requires authentication in production.');
+                return;
+            }
+            const reviewElement = document.querySelector(`.event-item[data-id="${reviewId}"]`);
+            if (!reviewElement) return;
+
+            document.getElementById('reviewModalTitle').textContent = 'Edit Coach Note';
+            document.getElementById('reviewId').value = reviewId;
+            document.getElementById('reviewStartTime').value = reviewElement.dataset.timeStart || '';
+            document.getElementById('reviewEndTime').value = reviewElement.dataset.timeEnd || '';
+            document.getElementById('reviewNote').value = reviewElement.querySelector('.event-label')?.textContent.trim() || '';
+            document.getElementById('reviewCoach').value = reviewElement.querySelector('.event-meta')?.textContent.trim() || '';
+            document.getElementById('reviewEmoji').value = reviewElement.querySelector('div:first-child')?.textContent || '🔥';
+            document.getElementById('deleteReviewBtn').style.display = 'block';
+            openModal('reviewModal');
+        }
+
+        async function saveReview() {
+            if (!csrfToken) {
+                alert('Demo Mode: API calls require authentication.');
+                return;
+            }
+            const reviewId = document.getElementById('reviewId').value;
+            const startTime = document.getElementById('reviewStartTime').value;
+            const endTime = document.getElementById('reviewEndTime').value;
+            const note = document.getElementById('reviewNote').value;
+            const coach = document.getElementById('reviewCoach').value;
+            const emoji = document.getElementById('reviewEmoji').value;
+
+            try {
+                if (reviewId) {
+                    // Update existing review
+                    const response = await fetch(`/reviews/${reviewId}`, {
+                        method: 'PUT',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-TOKEN': csrfToken
+                        },
+                        body: JSON.stringify({
+                            start_time_seconds: parseInt(startTime),
+                            end_time_seconds: endTime ? parseInt(endTime) : null,
+                            note: note,
+                            coach_name: coach,
+                            emoji: emoji
+                        })
+                    });
+                    const data = await response.json();
+                    if (data.success) {
+                        closeModal('reviewModal');
+                        loadMatchData();
+                    } else {
+                        alert(data.message || 'Error updating note');
+                    }
+                } else {
+                    // Create new review
+                    const response = await fetch(`/videos/${videoId}/reviews`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-TOKEN': csrfToken
+                        },
+                        body: JSON.stringify({
+                            start_time_seconds: parseInt(startTime),
+                            end_time_seconds: endTime ? parseInt(endTime) : null,
+                            note: note,
+                            coach_name: coach,
+                            emoji: emoji
+                        })
+                    });
+                    const data = await response.json();
+                    if (data.success) {
+                        closeModal('reviewModal');
+                        loadMatchData();
+                    } else {
+                        alert(data.message || 'Error adding note');
+                    }
+                }
+            } catch (error) {
+                alert('Error: ' + error.message);
+            }
+        }
+
+        async function deleteReview(reviewId) {
+            if (!csrfToken) {
+                alert('Demo Mode: API calls require authentication.');
+                return;
+            }
+            if (!confirm('Are you sure you want to delete this coach note?')) return;
+
+            try {
+                const response = await fetch(`/reviews/${reviewId}`, {
+                    method: 'DELETE',
+                    headers: {
+                        'X-CSRF-TOKEN': csrfToken
+                    }
+                });
+                const data = await response.json();
+                if (data.success) {
+                    closeModal('reviewModal');
+                    loadMatchData();
+                } else {
+                    alert(data.message || 'Error deleting note');
+                }
+            } catch (error) {
+                alert('Error: ' + error.message);
+            }
+        }
+
+        // Playlist navigation (existing code)
+        document.addEventListener('DOMContentLoaded', function() {
+            var videoPlayer = document.getElementById('videoPlayer');
+            var playlistControls = document.getElementById('playlistControls');
+            var autoplayToggle = document.getElementById('autoplayToggle');
+
+            if (videoPlayer) {
+                videoPlayer.volume = 0.5;
+                var playPromise = videoPlayer.play();
+                if (playPromise !== undefined) {
+                    playPromise.then(function() { console.log('Video autoplayed'); }).catch(function(error) { console.log('Autoplay blocked'); });
+                }
+
+                // Handle video ended - autoplay next
+                if (nextVideoUrl) {
+                    videoPlayer.addEventListener('ended', function() {
+                        if (autoplayEnabled) {
+                            console.log('Video ended, going to next...');
+                            window.location.href = nextVideoUrl;
+                        }
+                    });
+                }
+            }
+
+            // Show playlist controls on hover
+            if (playlistControls) {
+                const videoContainer = document.getElementById('videoContainer');
+                videoContainer.addEventListener('mouseenter', function() {
+                    playlistControls.classList.add('visible');
+                });
+                videoContainer.addEventListener('mouseleave', function() {
+                    playlistControls.classList.remove('visible');
+                });
+
+                // Initially show for a few seconds
+                setTimeout(function() { playlistControls.classList.add('visible'); }, 2000);
+                setTimeout(function() { playlistControls.classList.remove('visible'); }, 6000);
+            }
+
+            // Autoplay toggle handler
+            if (autoplayToggle) {
+                autoplayToggle.addEventListener('change', function() {
+                    autoplayEnabled = this.checked;
+                    localStorage.setItem('playlistAutoplay', autoplayEnabled ? '1' : '0');
+                });
+
+                // Load saved preference
+                const savedAutoplay = localStorage.getItem('playlistAutoplay');
+                if (savedAutoplay !== null) {
+                    autoplayEnabled = savedAutoplay === '1';
+                    autoplayToggle.checked = autoplayEnabled;
+                }
+            }
+
+            // Keyboard navigation
+            document.addEventListener('keydown', function(e) {
+                if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') { return; }
+                if (e.key === 'ArrowLeft') { e.preventDefault(); goToPreviousVideo(); }
+                else if (e.key === 'ArrowRight') { e.preventDefault(); goToNextVideo(); }
+            });
+        });
+
+        function goToPreviousVideo() {
+            if (previousVideoUrl) { window.location.href = previousVideoUrl; }
+        }
+
+        function goToNextVideo() {
+            if (nextVideoUrl) { window.location.href = nextVideoUrl; }
+        }
+    </script>
+@endsection
+</parameter>
diff --git a/app/Http/Controllers/MatchEventController.php b/app/Http/Controllers/MatchEventController.php
new file mode 100644
index 0000000..20bde5c
--- /dev/null
+++ b/app/Http/Controllers/MatchEventController.php
@@ -0,0 +1,279 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\CoachReview;
+use App\Models\MatchPoint;
+use App\Models\MatchRound;
+use App\Models\Video;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class MatchEventController extends Controller
+{
+    // ==================== ROUNDS ====================
+
+    public function storeRound(Request $request, Video $video)
+    {
+        $request->validate([
+            'round_number' => 'required|integer|min:1',
+            'name' => 'nullable|string|max:50',
+        ]);
+
+        // Check if user owns the video
+        if (Auth::id() !== $video->user_id) {
+            return response()->json(['success' => false, 'message' => 'Unauthorized'], 403);
+        }
+
+        $round = MatchRound::create([
+            'video_id' => $video->id,
+            'round_number' => $request->round_number,
+            'name' => $request->name ?? 'ROUND '.$request->round_number,
+        ]);
+
+        return response()->json([
+            'success' => true,
+            'round' => $round,
+            'message' => 'Round added successfully!',
+        ]);
+    }
+
+    public function updateRound(Request $request, MatchRound $round)
+    {
+        $request->validate([
+            'name' => 'required|string|max:50',
+        ]);
+
+        // Check if user owns the video
+        if (Auth::id() !== $round->video->user_id) {
+            return response()->json(['success' => false, 'message' => 'Unauthorized'], 403);
+        }
+
+        $round->update([
+            'name' => $request->name,
+        ]);
+
+        return response()->json([
+            'success' => true,
+            'round' => $round,
+            'message' => 'Round updated successfully!',
+        ]);
+    }
+
+    public function destroyRound(MatchRound $round)
+    {
+        // Check if user owns the video
+        if (Auth::id() !== $round->video->user_id) {
+            return response()->json(['success' => false, 'message' => 'Unauthorized'], 403);
+        }
+
+        $round->delete();
+
+        return response()->json([
+            'success' => true,
+            'message' => 'Round deleted successfully!',
+        ]);
+    }
+
+    // ==================== POINTS ====================
+
+    public function storePoint(Request $request, Video $video)
+    {
+        $request->validate([
+            'round_id' => 'required|exists:match_rounds,id',
+            'timestamp_seconds' => 'required|integer|min:0',
+            'action' => 'required|string|max:255',
+            'points' => 'required|integer|min:1',
+            'competitor' => 'required|in:blue,red',
+            'notes' => 'nullable|string|max:500',
+        ]);
+
+        // Check if user owns the video
+        if (Auth::id() !== $video->user_id) {
+            return response()->json(['success' => false, 'message' => 'Unauthorized'], 403);
+        }
+
+        // Calculate scores
+        $previousPoints = MatchPoint::where('video_id', $video->id)
+            ->where('match_round_id', $request->round_id)
+            ->where('timestamp_seconds', '<', $request->timestamp_seconds)
+            ->orderBy('timestamp_seconds', 'desc')
+            ->first();
+
+        $scoreBlue = $previousPoints ? $previousPoints->score_blue : 0;
+        $scoreRed = $previousPoints ? $previousPoints->score_red : 0;
+
+        if ($request->competitor === 'blue') {
+            $scoreBlue += $request->points;
+        } else {
+            $scoreRed += $request->points;
+        }
+
+        $point = MatchPoint::create([
+            'video_id' => $video->id,
+            'match_round_id' => $request->round_id,
+            'timestamp_seconds' => $request->timestamp_seconds,
+            'action' => $request->action,
+            'points' => $request->points,
+            'competitor' => $request->competitor,
+            'notes' => $request->notes,
+            'score_blue' => $scoreBlue,
+            'score_red' => $scoreRed,
+        ]);
+
+        return response()->json([
+            'success' => true,
+            'point' => $point,
+            'message' => 'Point added successfully!',
+        ]);
+    }
+
+    public function updatePoint(Request $request, MatchPoint $point)
+    {
+        $request->validate([
+            'timestamp_seconds' => 'required|integer|min:0',
+            'action' => 'required|string|max:255',
+            'points' => 'required|integer|min:1',
+            'competitor' => 'required|in:blue,red',
+            'notes' => 'nullable|string|max:500',
+        ]);
+
+        // Check if user owns the video
+        if (Auth::id() !== $point->video->user_id) {
+            return response()->json(['success' => false, 'message' => 'Unauthorized'], 403);
+        }
+
+        $point->update([
+            'timestamp_seconds' => $request->timestamp_seconds,
+            'action' => $request->action,
+            'points' => $request->points,
+            'competitor' => $request->competitor,
+            'notes' => $request->notes,
+        ]);
+
+        return response()->json([
+            'success' => true,
+            'point' => $point,
+            'message' => 'Point updated successfully!',
+        ]);
+    }
+
+    public function destroyPoint(MatchPoint $point)
+    {
+        // Check if user owns the video
+        if (Auth::id() !== $point->video->user_id) {
+            return response()->json(['success' => false, 'message' => 'Unauthorized'], 403);
+        }
+
+        $point->delete();
+
+        return response()->json([
+            'success' => true,
+            'message' => 'Point deleted successfully!',
+        ]);
+    }
+
+    // ==================== COACH REVIEWS ====================
+
+    public function storeReview(Request $request, Video $video)
+    {
+        $request->validate([
+            'start_time_seconds' => 'required|integer|min:0',
+            'end_time_seconds' => 'nullable|integer|min:0',
+            'note' => 'required|string|max:1000',
+            'coach_name' => 'required|string|max:100',
+            'emoji' => 'nullable|string|max:10',
+        ]);
+
+        // Check if user owns the video
+        if (Auth::id() !== $video->user_id) {
+            return response()->json(['success' => false, 'message' => 'Unauthorized'], 403);
+        }
+
+        $review = CoachReview::create([
+            'video_id' => $video->id,
+            'user_id' => Auth::id(),
+            'start_time_seconds' => $request->start_time_seconds,
+            'end_time_seconds' => $request->end_time_seconds,
+            'note' => $request->note,
+            'coach_name' => $request->coach_name,
+            'emoji' => $request->emoji ?? '🔥',
+        ]);
+
+        return response()->json([
+            'success' => true,
+            'review' => $review,
+            'message' => 'Coach note added successfully!',
+        ]);
+    }
+
+    public function updateReview(Request $request, CoachReview $review)
+    {
+        $request->validate([
+            'start_time_seconds' => 'required|integer|min:0',
+            'end_time_seconds' => 'nullable|integer|min:0',
+            'note' => 'required|string|max:1000',
+            'coach_name' => 'required|string|max:100',
+            'emoji' => 'nullable|string|max:10',
+        ]);
+
+        // Check if user owns the video
+        if (Auth::id() !== $review->video->user_id) {
+            return response()->json(['success' => false, 'message' => 'Unauthorized'], 403);
+        }
+
+        $review->update([
+            'start_time_seconds' => $request->start_time_seconds,
+            'end_time_seconds' => $request->end_time_seconds,
+            'note' => $request->note,
+            'coach_name' => $request->coach_name,
+            'emoji' => $request->emoji,
+        ]);
+
+        return response()->json([
+            'success' => true,
+            'review' => $review,
+            'message' => 'Coach note updated successfully!',
+        ]);
+    }
+
+    public function destroyReview(CoachReview $review)
+    {
+        // Check if user owns the video
+        if (Auth::id() !== $review->video->user_id) {
+            return response()->json(['success' => false, 'message' => 'Unauthorized'], 403);
+        }
+
+        $review->delete();
+
+        return response()->json([
+            'success' => true,
+            'message' => 'Coach note deleted successfully!',
+        ]);
+    }
+
+    // ==================== GET DATA ====================
+
+    public function getMatchData(Video $video)
+    {
+        // Check if user can view this video
+        if (! $video->canView(Auth::user())) {
+            return response()->json(['success' => false, 'message' => 'Unauthorized'], 403);
+        }
+
+        $rounds = MatchRound::where('video_id', $video->id)
+            ->with('points')
+            ->orderBy('round_number')
+            ->get();
+
+        $reviews = CoachReview::where('video_id', $video->id)
+            ->orderBy('start_time_seconds')
+            ->get();
+
+        return response()->json([
+            'success' => true,
+            'rounds' => $rounds,
+            'reviews' => $reviews,
+        ]);
+    }
+}
diff --git a/app/Models/CoachReview.php b/app/Models/CoachReview.php
new file mode 100644
index 0000000..c906826
--- /dev/null
+++ b/app/Models/CoachReview.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+class CoachReview extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'video_id',
+        'user_id',
+        'start_time_seconds',
+        'end_time_seconds',
+        'note',
+        'coach_name',
+        'emoji',
+    ];
+
+    public function video(): BelongsTo
+    {
+        return $this->belongsTo(Video::class);
+    }
+
+    public function user(): BelongsTo
+    {
+        return $this->belongsTo(User::class);
+    }
+}
diff --git a/app/Models/MatchPoint.php b/app/Models/MatchPoint.php
new file mode 100644
index 0000000..620ae7c
--- /dev/null
+++ b/app/Models/MatchPoint.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+class MatchPoint extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'video_id',
+        'match_round_id',
+        'timestamp_seconds',
+        'action',
+        'points',
+        'competitor',
+        'notes',
+        'score_blue',
+        'score_red',
+    ];
+
+    public function video(): BelongsTo
+    {
+        return $this->belongsTo(Video::class);
+    }
+
+    public function round(): BelongsTo
+    {
+        return $this->belongsTo(MatchRound::class, 'match_round_id');
+    }
+}
diff --git a/app/Models/MatchRound.php b/app/Models/MatchRound.php
new file mode 100644
index 0000000..67c955b
--- /dev/null
+++ b/app/Models/MatchRound.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\HasMany;
+
+class MatchRound extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'video_id',
+        'round_number',
+        'name',
+    ];
+
+    public function video(): BelongsTo
+    {
+        return $this->belongsTo(Video::class);
+    }
+
+    public function points(): HasMany
+    {
+        return $this->hasMany(MatchPoint::class, 'match_round_id')->orderBy('timestamp_seconds');
+    }
+}
diff --git a/app/Models/Video.php b/app/Models/Video.php
index a0792fe..8c9bff7 100644
--- a/app/Models/Video.php
+++ b/app/Models/Video.php
@@ -246,6 +246,22 @@ class Video extends Model
         return $this->comments()->count();
     }
 
+    // Match events relationships
+    public function matchRounds()
+    {
+        return $this->hasMany(MatchRound::class)->orderBy('round_number');
+    }
+
+    public function matchPoints()
+    {
+        return $this->hasMany(MatchPoint::class);
+    }
+
+    public function coachReviews()
+    {
+        return $this->hasMany(CoachReview::class)->orderBy('start_time_seconds');
+    }
+
     // Get recent views count (within hours)
     public function getRecentViews($hours = 48)
     {
diff --git a/database/migrations/2026_03_20_000000_create_match_rounds_table.php b/database/migrations/2026_03_20_000000_create_match_rounds_table.php
new file mode 100644
index 0000000..3e3fb42
--- /dev/null
+++ b/database/migrations/2026_03_20_000000_create_match_rounds_table.php
@@ -0,0 +1,26 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('match_rounds', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('video_id')->constrained()->onDelete('cascade');
+            $table->integer('round_number');
+            $table->string('name')->default('ROUND');
+            $table->timestamps();
+
+            $table->unique(['video_id', 'round_number']);
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('match_rounds');
+    }
+};
diff --git a/database/migrations/2026_03_20_000001_create_match_points_table.php b/database/migrations/2026_03_20_000001_create_match_points_table.php
new file mode 100644
index 0000000..d18a3c9
--- /dev/null
+++ b/database/migrations/2026_03_20_000001_create_match_points_table.php
@@ -0,0 +1,30 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('match_points', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('video_id')->constrained()->onDelete('cascade');
+            $table->foreignId('match_round_id')->constrained('match_rounds')->onDelete('cascade');
+            $table->integer('timestamp_seconds');
+            $table->string('action');
+            $table->integer('points');
+            $table->string('competitor'); // 'blue' or 'red'
+            $table->string('notes')->nullable();
+            $table->integer('score_blue')->default(0);
+            $table->integer('score_red')->default(0);
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('match_points');
+    }
+};
diff --git a/database/migrations/2026_03_20_000002_create_coach_reviews_table.php b/database/migrations/2026_03_20_000002_create_coach_reviews_table.php
new file mode 100644
index 0000000..40bc851
--- /dev/null
+++ b/database/migrations/2026_03_20_000002_create_coach_reviews_table.php
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('coach_reviews', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('video_id')->constrained()->onDelete('cascade');
+            $table->foreignId('user_id')->constrained()->onDelete('cascade');
+            $table->integer('start_time_seconds');
+            $table->integer('end_time_seconds')->nullable();
+            $table->text('note');
+            $table->string('coach_name');
+            $table->string('emoji')->default('🔥');
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('coach_reviews');
+    }
+};
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index b76d5c2..cc30ff4 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -87,13 +87,14 @@
             letter-spacing: -1px;
         }
 
-        /* Search */
+/* Search */
         .yt-header-center {
             flex: 1;
             max-width: 640px;
             margin: 0 40px;
             display: flex;
             align-items: center;
+            justify-content: center;
         }
 
         .yt-search {
diff --git a/resources/views/layouts/partials/header.blade.php b/resources/views/layouts/partials/header.blade.php
index efa243e..9d7fade 100644
--- a/resources/views/layouts/partials/header.blade.php
+++ b/resources/views/layouts/partials/header.blade.php
@@ -1,5 +1,191 @@
 <!-- Header -->
 <header class="yt-header">
+    <style>
+        .yt-header {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 56px;
+            background: #0f0f0f;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 16px;
+            z-index: 1000;
+            border-bottom: 1px solid #303030;
+        }
+
+        .yt-header-left {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+
+        .yt-menu-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: background 0.2s;
+            background: transparent;
+            border: none;
+            color: #f1f1f1;
+        }
+
+        .yt-menu-btn:hover { background: #303030; }
+
+        .yt-logo {
+            display: flex;
+            align-items: center;
+            text-decoration: none;
+            gap: 4px;
+        }
+
+        .yt-logo-text {
+            font-size: 1.4rem;
+            font-weight: 700;
+            color: #f1f1f1;
+            letter-spacing: -1px;
+        }
+
+        .yt-header-center {
+            flex: 1;
+            max-width: 640px;
+            margin: 0 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .yt-search {
+            flex: 1;
+            display: flex;
+            height: 40px;
+        }
+
+        .yt-search-input {
+            flex: 1;
+            background: #121212;
+            border: 1px solid #303030;
+            border-right: none;
+            border-radius: 20px 0 0 20px;
+            padding: 0 16px;
+            color: #f1f1f1;
+            font-size: 16px;
+        }
+
+        .yt-search-input:focus {
+            outline: none;
+            border-color: #1c62b9;
+        }
+
+        .yt-search-btn {
+            width: 64px;
+            background: #222;
+            border: 1px solid #303030;
+            border-radius: 0 20px 20px 0;
+            color: #f1f1f1;
+            cursor: pointer;
+        }
+
+        .yt-search-btn:hover { background: #303030; }
+
+        .yt-header-right {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .yt-mobile-search-toggle {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            background: transparent;
+            border: none;
+            color: #f1f1f1;
+            font-size: 1.2rem;
+        }
+
+        .yt-mobile-search-toggle:hover {
+            background: #303030;
+        }
+
+        .yt-upload-btn {
+            background: #e61e1e;
+            color: white;
+            border: none;
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-weight: 500;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            cursor: pointer;
+            text-decoration: none;
+        }
+
+        .yt-upload-btn:hover { background: #cc1a1a; }
+
+        .yt-icon-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            background: transparent;
+            border: none;
+            color: #f1f1f1;
+            font-size: 1.2rem;
+        }
+
+        .yt-icon-btn:hover { background: #303030; }
+
+        .yt-user-avatar {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: #555;
+            cursor: pointer;
+        }
+
+        @media (max-width: 576px) {
+            .yt-upload-btn {
+                width: 40px;
+                height: 40px;
+                padding: 0;
+                border-radius: 50%;
+                justify-content: center;
+            }
+            .yt-upload-btn span {
+                display: none;
+            }
+            @media (min-width: 400px) {
+                .yt-upload-btn {
+                    width: auto;
+                    border-radius: 20px;
+                    padding: 8px 16px;
+                }
+                .yt-upload-btn span {
+                    display: inline;
+                }
+            }
+        }
+
+        @media (max-width: 768px) {
+            .yt-header-center { display: none; }
+        }
+    </style>
+
     <div class="yt-header-left">
         <button class="yt-menu-btn" onclick="toggleSidebar()">
             <i class="bi bi-list fs-5"></i>
@@ -11,7 +197,7 @@
             <img src="{{ asset('storage/images/fullLogo.png') }}" alt="{{ config('app.name') }}" class="d-none d-md-block" style="height: 30px;">
         </a>
     </div>
-    
+
         <div class="yt-header-center d-none d-md-flex">
         <form action="{{ route('videos.search') }}" method="GET" class="yt-search">
             <input type="text" name="q" class="yt-search-input" placeholder="Search" value="{{ request('q') }}">
@@ -20,20 +206,20 @@
             </button>
         </form>
     </div>
-    
+
     <div class="yt-header-right">
         <!-- Mobile Search Toggle Button -->
         <button type="button" class="yt-mobile-search-toggle d-md-none" onclick="toggleMobileSearch()">
             <i class="bi bi-search"></i>
         </button>
-        
+
         @auth
             <!-- Upload Button - Opens Modal -->
             <button type="button" class="yt-upload-btn d-none d-md-flex" data-bs-toggle="modal" data-bs-target="#uploadModal">
                 <i class="bi bi-plus-lg"></i>
                 <span>Upload</span>
             </button>
-            
+
             <!-- User Dropdown -->
             <div class="dropdown">
                 <button class="yt-icon-btn" data-bs-toggle="dropdown" aria-expanded="false">
diff --git a/resources/views/videos/types/match.blade-old.php b/resources/views/videos/types/match.blade-old.php
new file mode 100644
index 0000000..dd1730e
--- /dev/null
+++ b/resources/views/videos/types/match.blade-old.php
@@ -0,0 +1,2276 @@
+@extends('layouts.app')
+
+@section('title', $video->title . ' | ' . config('app.name'))
+
+@section('extra_styles')
+    <style>
+        /* Video Section */
+        .yt-video-section { flex: 1; min-width: 0; }
+
+        /* Video Player */
+        .video-container {
+            position: relative;
+            aspect-ratio: 16/9;
+            background: #000;
+            border-radius: 12px;
+            overflow: hidden;
+            max-height: 70vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+        }
+
+        .video-container.portrait,
+        .video-container.square,
+        .video-container.ultrawide {
+            margin: 0 auto;
+            width: auto;
+        }
+
+        .video-container.portrait { aspect-ratio: 9/16; max-width: 50vh; }
+        .video-container.square { aspect-ratio: 1/1; max-width: 70vh; }
+        .video-container.ultrawide { aspect-ratio: 21/9; max-width: 100%; }
+
+.video-container video { width: 100%; height: 100%; object-fit: contain; }
+
+        /* Playlist Navigation Controls */
+        .playlist-controls {
+            position: absolute;
+            bottom: 60px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            background: rgba(0, 0, 0, 0.8);
+            padding: 8px 16px;
+            border-radius: 24px;
+            z-index: 10;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .video-container:hover .playlist-controls,
+        .playlist-controls.visible { opacity: 1; }
+
+        .playlist-nav-btn {
+            background: transparent;
+            border: none;
+            color: white;
+            cursor: pointer;
+            padding: 8px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background 0.2s ease;
+        }
+
+        .playlist-nav-btn:hover { background: rgba(255, 255, 255, 0.2); }
+        .playlist-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
+        .playlist-nav-btn:disabled:hover { background: transparent; }
+        .playlist-nav-btn i { font-size: 20px; }
+
+        .playlist-nav-label {
+            font-size: 12px;
+            color: #aaa;
+            max-width: 120px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        /* Autoplay Toggle */
+        .autoplay-toggle {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 8px;
+            border-left: 1px solid rgba(255, 255, 255, 0.2);
+        }
+
+        .autoplay-toggle label {
+            font-size: 12px;
+            color: #aaa;
+            cursor: pointer;
+            white-space: nowrap;
+        }
+
+        .autoplay-switch { position: relative; width: 36px; height: 20px; }
+        .autoplay-switch input { opacity: 0; width: 0; height: 0; }
+
+        .autoplay-slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background-color: #666;
+            transition: 0.3s;
+            border-radius: 20px;
+        }
+
+        .autoplay-slider:before {
+            position: absolute;
+            content: "";
+            height: 14px;
+            width: 14px;
+            left: 3px;
+            bottom: 3px;
+            background-color: white;
+            transition: 0.3s;
+            border-radius: 50%;
+        }
+
+        .autoplay-switch input:checked + .autoplay-slider { background-color: var(--brand-red); }
+        .autoplay-switch input:checked + .autoplay-slider:before { transform: translateX(16px); }
+
+        /* Keyboard hint */
+        .keyboard-hint {
+            position: absolute;
+            bottom: 10px;
+            right: 10px;
+            font-size: 10px;
+            color: rgba(255, 255, 255, 0.5);
+            background: rgba(0, 0, 0, 0.6);
+            padding: 4px 8px;
+            border-radius: 4px;
+        }
+
+        /* Video Info */
+        .video-title {
+            font-size: 20px;
+            font-weight: 500;
+            margin: 16px 0 8px;
+            line-height: 1.3;
+        }
+
+        .video-stats-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding-bottom: 12px;
+            border-bottom: 1px solid var(--border-color);
+            flex-wrap: wrap;
+            gap: 12px;
+        }
+
+        .video-stats-left { display: flex; align-items: center; gap: 16px; color: var(--text-secondary); }
+
+        .video-actions {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .yt-action-btn {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 16px;
+            border-radius: 20px;
+            border: none;
+            background: var(--bg-secondary);
+            color: var(--text-primary);
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+        }
+
+        .yt-action-btn:hover { background: var(--border-color); }
+
+        .yt-action-btn.liked { color: var(--brand-red); }
+
+        /* Channel Row */
+        .channel-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 16px 0;
+        }
+
+        .channel-info {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .channel-avatar {
+            width: 48px; height: 48px; border-radius: 50%; background: #555;
+        }
+
+        .channel-name {
+            font-size: 16px;
+            font-weight: 500;
+        }
+
+        .channel-subs {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+
+        .subscribe-btn {
+            background: white;
+            color: black;
+            border: none;
+            padding: 8px 16px;
+            border-radius: 18px;
+            font-weight: 600;
+            font-size: 14px;
+            cursor: pointer;
+            white-space: nowrap;
+        }
+
+        /* Description */
+        .video-description {
+            background: var(--bg-secondary);
+            border-radius: 12px;
+            padding: 16px;
+            margin-top: 16px;
+        }
+
+        .description-text {
+            white-space: pre-wrap;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+
+        /* Sidebar */
+        .yt-sidebar-container {
+            width: 400px;
+            flex-shrink: 0;
+        }
+
+        /* Match Events Sidebar */
+        .events-sidebar {
+            background: var(--bg-secondary);
+            border-radius: 12px;
+            overflow: hidden;
+            width: 400px;
+            flex-shrink: 0;
+        }
+
+        .events-sidebar-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 16px;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .events-sidebar-header h3 {
+            font-size: 16px;
+            font-weight: 600;
+            margin: 0;
+        }
+
+        .close-btn {
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            font-size: 24px;
+            cursor: pointer;
+            padding: 0;
+            line-height: 1;
+        }
+
+        .close-btn:hover {
+            color: var(--text-primary);
+        }
+
+        .tab-header {
+            display: flex;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .tab-button {
+            flex: 1;
+            padding: 12px 16px;
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            border-bottom: 2px solid transparent;
+        }
+
+        .tab-button:hover {
+            color: var(--text-primary);
+            background: rgba(255, 255, 255, 0.05);
+        }
+
+        .tab-button.active {
+            color: var(--brand-red);
+            border-bottom-color: var(--brand-red);
+        }
+
+        .tab-panels {
+            max-height: 500px;
+            overflow-y: auto;
+        }
+
+        .tab-panel {
+            display: none;
+            padding: 16px;
+        }
+
+        .tab-panel.active {
+            display: block;
+        }
+
+        .section-label {
+            font-size: 12px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            font-weight: 500;
+        }
+
+        .btn-icon {
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 14px;
+        }
+
+        .btn-icon:hover {
+            background: var(--border-color);
+            color: var(--text-primary);
+        }
+
+        .btn-add {
+            background: var(--brand-red);
+            color: white;
+            border: none;
+            padding: 4px 10px;
+            border-radius: 4px;
+            font-size: 12px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .btn-add:hover {
+            background: #dc2626;
+        }
+
+        .event-list {
+            margin-top: 12px;
+        }
+
+        .round-marker {
+            font-size: 11px;
+            font-weight: 600;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            padding: 8px 0;
+            margin-top: 8px;
+            border-top: 1px solid var(--border-color);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .round-marker:first-child {
+            border-top: none;
+            margin-top: 0;
+        }
+
+        /* Round badge styling - yellow background with black bold text */
+        .round-badge {
+            background-color: #fbbf24;
+            color: #000000;
+            font-weight: 700;
+            padding: 4px 12px;
+            border-radius: 6px;
+            font-size: 12px;
+            display: inline-block;
+        }
+
+        .round-actions {
+            display: flex;
+            gap: 4px;
+        }
+
+        .round-action-btn {
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-size: 12px;
+        }
+
+        .round-action-btn:hover {
+            background: var(--border-color);
+            color: var(--text-primary);
+        }
+
+        .event-item {
+            display: flex;
+            gap: 12px;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: background 0.2s ease;
+            margin-bottom: 4px;
+            position: relative;
+        }
+
+        .event-item:hover {
+            background: var(--border-color);
+        }
+
+        .event-item:hover .event-actions {
+            opacity: 1;
+        }
+
+        .event-actions {
+            position: absolute;
+            right: 8px;
+            top: 8px;
+            display: flex;
+            gap: 4px;
+            opacity: 0;
+            transition: opacity 0.2s ease;
+        }
+
+        .event-action-btn {
+            background: var(--bg-primary);
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            padding: 4px 6px;
+            border-radius: 4px;
+            font-size: 10px;
+        }
+
+        .event-action-btn:hover {
+            background: var(--border-color);
+            color: var(--text-primary);
+        }
+
+        .event-action-btn.delete:hover {
+            color: var(--brand-red);
+        }
+
+        .event-time {
+            font-size: 12px;
+            color: #3ea6ff;
+            font-weight: 500;
+            min-width: 55px;
+            text-align: center;
+        }
+
+        .event-label {
+            font-size: 14px;
+            font-weight: 500;
+            margin-bottom: 4px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            flex-wrap: wrap;
+        }
+
+        .event-meta {
+            font-size: 12px;
+            color: var(--text-secondary);
+            line-height: 1.4;
+        }
+
+        .pill {
+            font-size: 10px;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-weight: 600;
+            text-transform: uppercase;
+        }
+
+        .pill-blue {
+            background: #3b82f6;
+            color: white;
+        }
+
+        .pill-red {
+            background: #ef4444;
+            color: white;
+        }
+
+        .comment-avatar {
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            overflow: hidden;
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: 4px;
+        }
+
+        .comment-avatar img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        /* Modal Styles */
+        .modal-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.7);
+            z-index: 9999;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .modal-overlay.active {
+            display: flex;
+        }
+
+        .modal-content {
+            background: var(--bg-secondary);
+            border-radius: 12px;
+            padding: 24px;
+            width: 90%;
+            max-width: 500px;
+            max-height: 90vh;
+            overflow-y: auto;
+        }
+
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+
+        .modal-header h3 {
+            font-size: 18px;
+            font-weight: 600;
+            margin: 0;
+        }
+
+        .modal-close {
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            font-size: 24px;
+            cursor: pointer;
+            padding: 0;
+            line-height: 1;
+        }
+
+        .modal-close:hover {
+            color: var(--text-primary);
+        }
+
+        .form-group {
+            margin-bottom: 16px;
+        }
+
+        .form-group label {
+            display: block;
+            font-size: 14px;
+            font-weight: 500;
+            margin-bottom: 6px;
+            color: var(--text-primary);
+        }
+
+        .form-group input,
+        .form-group select,
+        .form-group textarea {
+            width: 100%;
+            padding: 10px 12px;
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            font-size: 14px;
+        }
+
+        .form-group input:focus,
+        .form-group select:focus,
+        .form-group textarea:focus {
+            outline: none;
+            border-color: var(--brand-red);
+        }
+
+        .form-row {
+            display: flex;
+            gap: 12px;
+        }
+
+        .form-row .form-group {
+            flex: 1;
+        }
+
+        .modal-actions {
+            display: flex;
+            gap: 12px;
+            justify-content: flex-end;
+            margin-top: 20px;
+        }
+
+        .btn-cancel {
+            background: var(--bg-primary);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            padding: 10px 20px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+        }
+
+        .btn-cancel:hover {
+            background: var(--border-color);
+        }
+
+        .btn-save {
+            background: var(--brand-red);
+            border: none;
+            color: white;
+            padding: 10px 20px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+        }
+
+        .btn-save:hover {
+            background: #dc2626;
+        }
+
+        .btn-delete {
+            background: transparent;
+            border: 1px solid var(--brand-red);
+            color: var(--brand-red);
+            padding: 10px 20px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+        }
+
+        .btn-delete:hover {
+            background: var(--brand-red);
+            color: white;
+        }
+
+        /* Responsive */
+        @media (max-width: 1300px) {
+            .yt-sidebar-container { width: 300px; }
+            .events-sidebar { width: 300px; }
+        }
+
+        @media (max-width: 991px) {
+            .yt-main { margin-left: 0; flex-direction: column; }
+            .yt-sidebar-container { width: 100%; }
+            .sidebar-video-card { flex-direction: column; }
+            .sidebar-thumb { width: 100%; }
+            .events-sidebar { width: 100%; }
+
+            .video-layout-container {
+                flex-direction: column !important;
+            }
+            .yt-video-section {
+                width: 100% !important;
+                flex: none !important;
+            }
+            .yt-sidebar-container {
+                width: 100% !important;
+                margin-top: 16px;
+            }
+        }
+
+        @media (max-width: 576px) {
+            .video-stats-row { flex-direction: column; align-items: flex-start; }
+            .video-actions { width: 100%; overflow-x: auto; justify-content: flex-start; }
+            .yt-main { padding: 12px !important; }
+
+            .video-container {
+                max-height: 50vh !important;
+                border-radius: 0 !important;
+            }
+            .video-container video {
+                object-fit: contain !important;
+            }
+            .video-title {
+                font-size: 16px !important;
+                margin: 12px 0 6px !important;
+            }
+            .channel-row {
+                flex-direction: column;
+                align-items: flex-start !important;
+                gap: 12px;
+            }
+            .channel-info {
+                width: 100%;
+            }
+            .subscribe-btn {
+                width: 100%;
+            }
+            .video-description {
+                padding: 12px !important;
+            }
+        }
+    </style>
+@endsection
+
+@section('content')
+
+    <!-- Video Layout Container -->
+    <div class="video-layout-container" style="display: flex; gap: 24px; max-width: 1800px; margin: 0 auto;">
+
+        <!-- Video Section -->
+        <div class="yt-video-section">
+            <!-- Video Player -->
+            <div class="video-container @if($video->orientation === 'portrait') portrait @elseif($video->orientation === 'square') square @elseif($video->orientation === 'ultrawide') ultrawide @endif" id="videoContainer">
+                <video id="videoPlayer" controls playsinline preload="metadata" autoplay>
+                    <source src="{{ route('videos.stream', $video->id) }}" type="video/mp4">
+                </video>
+
+                <!-- Playlist Navigation Controls (only show when in playlist) -->
+                @if($nextVideo || $previousVideo)
+                <div class="playlist-controls" id="playlistControls">
+                    <!-- Previous Video -->
+                    @if($previousVideo)
+                    <button class="playlist-nav-btn" onclick="goToPreviousVideo()" title="Previous video">
+                        <i class="bi bi-skip-backward-fill"></i>
+                    </button>
+                    <span class="playlist-nav-label">{{ Str::limit($previousVideo->title, 20) }}</span>
+                    @else
+                    <button class="playlist-nav-btn" disabled title="No previous video">
+                        <i class="bi bi-skip-backward-fill"></i>
+                    </button>
+                    @endif
+
+                    <!-- Autoplay Toggle -->
+                    <div class="autoplay-toggle">
+                        <label for="autoplayToggle">Autoplay</label>
+                        <label class="autoplay-switch">
+                            <input type="checkbox" id="autoplayToggle" checked>
+                            <span class="autoplay-slider"></span>
+                        </label>
+                    </div>
+
+                    <!-- Next Video -->
+                    @if($nextVideo)
+                    <span class="playlist-nav-label">{{ Str::limit($nextVideo->title, 20) }}</span>
+                    <button class="playlist-nav-btn" onclick="goToNextVideo()" title="Next video">
+                        <i class="bi bi-skip-forward-fill"></i>
+                    </button>
+                    @else
+                    <button class="playlist-nav-btn" disabled title="No next video">
+                        <i class="bi bi-skip-forward-fill"></i>
+                    </button>
+                    @endif
+                </div>
+                <div class="keyboard-hint">
+                    <i class="bi bi-arrow-left"></i> <i class="bi bi-arrow-right"></i>
+                </div>
+                @endif
+            </div>
+
+            <!-- Video Title with Trophy Icon (Match Type) -->
+            <h1 class="video-title" style="display: flex; align-items: center; gap: 10px; margin: 8px 0 6px;">
+                <i class="bi bi-trophy" style="color: #ef4444;"></i>
+                <span>{{ $video->title }}</span>
+            </h1>
+
+            <!-- Stats Row - Hidden, shown in description box -->
+            <div class="video-stats-row" style="display: none;">
+                <div class="video-stats-left">
+                    <span>{{ number_format($video->view_count) }} views</span>
+                    <span>•</span>
+                    <span>{{ $video->created_at->format('M d, Y') }}</span>
+                </div>
+            </div>
+
+            <!-- Channel Row - All in one line -->
+            <div class="channel-row" style="display: flex; align-items: center; justify-content: space-between; padding: 12px 0; flex-wrap: wrap; gap: 16px;">
+                <div style="display: flex; align-items: center; gap: 12px;">
+                    <a href="{{ route('channel', $video->user_id) }}" class="channel-info text-decoration-none" style="color: inherit; display: flex; align-items: center; gap: 12px;">
+                        @if($video->user)
+                            <img src="{{ $video->user->avatar_url }}" class="channel-avatar" style="width: 40px; height: 40px; border-radius: 50%;" alt="{{ $video->user->name }}">
+                        @else
+                            <div class="channel-avatar" style="width: 40px; height: 40px; border-radius: 50%;"></div>
+                        @endif
+                        <div>
+                            <div class="channel-name" style="font-weight: 600;">{{ $video->user->name ?? 'Unknown' }}</div>
+                            <div class="channel-subs" style="font-size: 12px; color: var(--text-secondary);">{{ number_format($video->user->subscriber_count ?? 0) }} subscribers</div>
+                        </div>
+                    </a>
+                </div>
+
+                <div class="video-actions" style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
+                    @auth
+                        @if(Auth::id() !== $video->user_id)
+                            <button class="subscribe-btn">Subscribe</button>
+                        @else
+                            <button class="yt-action-btn" onclick="openEditVideoModal({{ $video->id }})">
+                                <i class="bi bi-pencil"></i> Edit
+                            </button>
+                        @endif
+                    @else
+                        <a href="{{ route('login') }}" class="subscribe-btn">Subscribe</a>
+                    @endauth
+
+                    @auth
+                        <form method="POST" action="{{ $video->isLikedBy(Auth::user()) ? route('videos.unlike', $video->id) : route('videos.like', $video->id) }}" class="d-inline">
+                            @csrf
+                            <button type="submit" class="yt-action-btn {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}">
+                                <i class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}"></i>
+                                {{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}
+                            </button>
+                        </form>
+                    @else
+                        <a href="{{ route('login') }}" class="yt-action-btn">
+                            <i class="bi bi-hand-thumbs-up"></i> Like
+                        </a>
+                    @endauth
+
+                    @if($video->isShareable())
+                        <button class="yt-action-btn" onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}')">
+                            <i class="bi bi-share"></i> Share
+                        </button>
+                    @endif
+                </div>
+            </div>
+
+            <!-- Description Box -->
+            @if($video->description)
+            @php
+                $fullDescription = $video->description;
+                $shortDescription = Str::limit($fullDescription, 200);
+                $needsExpand = strlen($fullDescription) > 200;
+            @endphp
+
+            <div class="video-description-box" style="background: var(--bg-secondary); border-radius: 12px; padding: 12px; margin-bottom: 16px;">
+                <div class="description-stats" style="font-size: 14px; font-weight: 500; margin-bottom: 8px;">
+                    <span>{{ number_format($video->view_count) }} views</span>
+                    <span>•</span>
+                    <span>{{ $video->created_at->format('M d, Y') }}</span>
+                </div>
+                <div style="border-bottom: 1px solid var(--border-color); margin: 8px 0;"></div>
+                <div class="description-content" id="descriptionContent">
+                    <!-- Match card inside collapsible body -->
+                    <section class="match-card">
+                        <div class="match-header">
+                            <div class="match-label">Final • Male -63kg division</div>
+                        </div>
+
+                        <div class="fighters-row">
+                            <article class="fighter-card">
+                                <div class="fighter-top">
+                                    <div class="fighter-photo">
+                                        <img src="https://picsum.photos/seed/blue-competitor/200/260" alt="Blue fighter">
+                                    </div>
+                                    <div style="
+                                        display: flex;
+                                        flex-direction: column;
+                                        align-items: center;
+                                        gap: 8px;
+                                    ">
+                                        <div class="fighter-logo">
+                                            <img src="https://picsum.photos/seed/blue-logo/160/160" alt="Blue team logo">
+                                        </div>
+                                        <span class="fighter-badge blue">Blue</span>
+                                    </div>
+                                </div>
+                                <div class="fighter-info">
+                                    <div class="fighter-name blue-corner">Ali Mohammed</div>
+                                    <div class="fighter-team">Blue Dragons Club</div>
+                                    <div class="fighter-country">
+                                        <span class="fighter-country-flag">🇧🇭</span>
+                                        <span>Bahrain</span>
+                                    </div>
+                                </div>
+                            </article>
+
+                            <div class="match-center">
+                                <div class="score-pill">
+                                    <span class="score-number">7</span>
+                                    <span class="score-label">Final score</span>
+                                    <span class="score-number">5</span>
+                                </div>
+                                <div class="referee-block">
+                                    <div class="referee-photo">
+                                        <img src="https://picsum.photos/seed/red-competitor/200/260" alt="Referee">
+                                    </div>
+                                    <div style="color: #ffd900; font-weight: bold">
+                                        M. Al‑Khalifa
+                                    </div>
+                                    <div class="ref-label">Center Referee</div>
+                                </div>
+                            </div>
+
+                            <article class="fighter-card">
+                                <div class="fighter-top">
+                                    <div style="
+                                        display: flex;
+                                        flex-direction: column;
+                                        align-items: center;
+                                        gap: 8px;
+                                    ">
+                                        <div class="fighter-logo">
+                                            <img src="https://picsum.photos/seed/red-logo/160/160" alt="Red team logo">
+                                        </div>
+                                        <span class="fighter-badge red">Red</span>
+                                    </div>
+                                    <div class="fighter-photo">
+                                        <img src="https://picsum.photos/seed/red-competitor/200/260" alt="Red fighter">
+                                    </div>
+                                </div>
+                                <div class="fighter-info">
+                                    <div class="fighter-name red-corner">Omar Al‑Khaled</div>
+                                    <div class="fighter-team">Red Tigers TKD</div>
+                                    <div class="fighter-country">
+                                        <span class="fighter-country-flag">🇸🇦</span>
+                                        <span>Saudi Arabia</span>
+                                    </div>
+                                </div>
+                            </article>
+                        </div>
+
+                        <div class="match-footer">
+                            <a class="hall-link" id="hallLink" title="View venue details" href="https://maps.google.com/?q=Manama+Sports+Hall+Bahrain" target="_blank" rel="noopener noreferrer">
+                                📍 Manama Sports Hall
+                            </a>
+                            • Electronic scoring system (PSS &amp; head‑gear) • Video replay
+                            available for head kicks and gam-jeom appeals
+                        </div>
+                    </section>
+
+                    <section class="markdown-body">
+                        <h2>Match Overview</h2>
+                        <p>
+                            This Male U18 -63kg final features three 2:00 rounds (with a
+                            golden point tie-breaker) showcasing a classic clash of styles:
+                            Blue drives the action with relentless pressure, body kicks, and
+                            ring control, while Red utilizes angle changes to set up tactical
+                            head-shot counters. When analyzing the replay, coaches and
+                            athletes should focus on distance management and guard resets
+                            immediately following exchanges, specifically noting how conceding
+                            points affects a fighter's momentum and leads to hesitation.
+                            Furthermore, close attention should be paid to the effectiveness
+                            of corner instructions and tactical time-outs, evaluating how
+                            consistently each fighter adheres to the established game plan
+                            during the high-fatigue environment of the final 30 seconds of
+                            every round.
+                        </p>
+                        <p>
+                            Coaches can also focus on corner instructions between rounds, the
+                            timing of tactical time-outs, and how often each athlete follows
+                            the game plan under fatigue in the closing 30 seconds of every
+                            round.
+                        </p>
+                    </section>
+
+                    @if($needsExpand)
+                        <div class="description-short" id="descShort">
+                            <span class="description-text">{!! Str::markdown($shortDescription) !!}</span>
+                            <span class="description-ellipsis" style="color: var(--text-secondary);">... </span>
+                        </div>
+                        <div class="description-full" id="descFull" style="display: none;">
+                            <span class="description-text">{!! Str::markdown($fullDescription) !!}</span>
+                        </div>
+                        <button onclick="toggleDescription()" id="descToggleBtn" style="background: none; border: none; color: var(--text-primary); font-weight: 600; font-size: 14px; cursor: pointer; padding: 0; margin-top: 4px;">
+                            Show more
+                        </button>
+                    @else
+                        <span class="description-text">{!! Str::markdown($fullDescription) !!}</span>
+                    @endif
+                </div>
+            </div>
+
+            <script>
+            function toggleDescription() {
+                const descShort = document.getElementById('descShort');
+                const descFull = document.getElementById('descFull');
+                const toggleBtn = document.getElementById('descToggleBtn');
+
+                if (descShort.style.display !== 'none') {
+                    descShort.style.display = 'none';
+                    descFull.style.display = 'block';
+                    toggleBtn.textContent = 'Show less';
+                } else {
+                    descShort.style.display = 'block';
+                    descFull.style.display = 'none';
+                    toggleBtn.textContent = 'Show more';
+                }
+            }
+            </script>
+
+            <style>
+            .video-description-box .description-text { font-size: 14px; line-height: 1.5; color: var(--text-primary); }
+            .video-description-box .description-text p { margin-bottom: 8px; }
+            .video-description-box .description-text a { color: #3ea6ff; }
+            </style>
+            @endif
+
+            <!-- Comment Section -->
+            <div class="comments-section" style="margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-color);">
+                <h3 style="font-size: 18px; font-weight: 600; margin-bottom: 16px;">
+                    Comments <span style="color: var(--text-secondary); font-weight: 400;">({{ $video->comment_count }})</span>
+                </h3>
+
+                @auth
+                    <div class="comment-form" style="display: flex; gap: 12px; margin-bottom: 24px;">
+                        <img src="{{ Auth::user()->avatar_url }}" class="channel-avatar" style="width: 40px; height: 40px;" alt="{{ Auth::user()->name }}">
+                        <div style="flex: 1;">
+                            <textarea
+                                id="commentBody"
+                                class="form-control"
+                                placeholder="Add a comment... Use @ to mention someone"
+                                rows="3"
+                                style="background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 8px; padding: 12px; width: 100%; resize: none;"
+                            ></textarea>
+                            <div style="display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end;">
+                                <button type="button" class="yt-action-btn" onclick="document.getElementById('commentBody').value = ''">Cancel</button>
+                                <button type="button" class="yt-action-btn" style="background: var(--brand-red); color: white;" onclick="submitComment({{ $video->id }})">Comment</button>
+                            </div>
+                        </div>
+                    </div>
+                @else
+                    <div style="margin-bottom: 24px; padding: 16px; background: var(--bg-secondary); border-radius: 8px; text-align: center;">
+                        <a href="{{ route('login') }}" style="color: var(--brand-red);">Sign in</a> to comment
+                    </div>
+                @endauth
+
+                <div id="commentsList">
+                    @forelse($video->comments()->whereNull('parent_id')->with('user', 'replies.user')->latest()->get() as $comment)
+                        @include('videos.partials.comment', ['comment' => $comment])
+                    @empty
+                        <p style="color: var(--text-secondary); text-align: center; padding: 20px;">No comments yet. Be the first to comment!</p>
+                    @endforelse
+                </div>
+            </div>
+
+            <script>
+            function submitComment(videoId) {
+                const body = document.getElementById('commentBody').value.trim();
+                if (!body) return;
+
+                fetch(`/videos/${videoId}/comments`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                    },
+                    body: JSON.stringify({ body: body })
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        document.getElementById('commentBody').value = '';
+                        location.reload();
+                    }
+                });
+            }
+
+            function deleteComment(commentId) {
+                if (!confirm('Are you sure you want to delete this comment?')) return;
+
+                fetch(`/comments/${commentId}`, {
+                    method: 'DELETE',
+                    headers: {
+                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                    }
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        location.reload();
+                    }
+                });
+            }
+
+            document.addEventListener('DOMContentLoaded', function() {
+                const commentTexts = document.querySelectorAll('.comment-body');
+                commentTexts.forEach(text => {
+                    const html = text.innerHTML.replace(/@(\w+)/g, '<span style="color: #3ea6ff; font-weight: 500;">@$1</span>');
+                    text.innerHTML = html;
+                });
+            });
+
+            function submitReply(videoId, parentId) {
+                const textarea = document.querySelector(`#replyForm${parentId} textarea`);
+                const body = textarea.value.trim();
+                if (!body) return;
+
+                fetch(`/videos/${videoId}/comments`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                    },
+                    body: JSON.stringify({ body: body, parent_id: parentId })
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        location.reload();
+                    }
+                });
+            }
+            </script>
+        </div>
+
+        <!-- Sidebar - Match Highlights -->
+        <div class="yt-sidebar-container">
+            <aside class="events-sidebar">
+                <div class="events-sidebar-header" style="justify-content: center;">
+                    <h3>Match Highlights</h3>
+                </div>
+
+                <div class="tab-header">
+                    <button class="tab-button active" data-tab="official">Points</button>
+                    <button class="tab-button" data-tab="review">Coach review</button>
+                </div>
+
+                <div class="tab-panels">
+                    <!-- Points Tab -->
+                    <div class="tab-panel active" id="tab-official">
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
+                            <div>
+                                <div class="section-label">Rounds &amp; points</div>
+                            </div>
+                            @auth
+                                @if(Auth::id() === $video->user_id)
+                                    <button class="btn-add" type="button" onclick="openAddRoundModal()">
+                                        <span>+</span> Add Round
+                                    </button>
+                                @endif
+                            @endauth
+                        </div>
+
+                        <div class="event-list" id="officialEvents">
+                            <!-- Round marker for Round 1 -->
+                            <div class="round-marker" data-round="1">
+                                <span class="round-badge">ROUND 1</span>
+                                @auth
+                                    @if(Auth::id() === $video->user_id)
+                                        <div class="round-actions">
+                                            <button class="round-action-btn" onclick="openAddPointModal(1)" title="Add point">+</button>
+                                            <button class="round-action-btn" onclick="editRound(1)" title="Edit round">✏️</button>
+                                            <button class="round-action-btn" onclick="deleteRound(1)" title="Delete round">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+
+                            <!-- Round 1 points -->
+                            <div class="event-item" data-time-start="20" data-round="1" data-id="pt1">
+                                <div class="event-time">@00:20</div>
+                                <div>
+                                    <div class="event-label">
+                                        Blue body kick (1 pt)
+                                        <span class="pill pill-blue">Blue</span>
+                                    </div>
+                                    <div class="event-meta">
+                                        Round 1 • Score 1 – 0 • Clean contact.
+                                    </div>
+                                </div>
+                                @auth
+                                    @if(Auth::id() === $video->user_id)
+                                        <div class="event-actions">
+                                            <button class="event-action-btn" onclick="editPoint('pt1')" title="Edit">✏️</button>
+                                            <button class="event-action-btn delete" onclick="deletePoint('pt1')" title="Delete">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+                            <div class="event-item" data-time-start="45" data-round="1" data-id="pt2">
+                                <div class="event-time">@00:45</div>
+                                <div>
+                                    <div class="event-label">
+                                        Blue scores body kick
+                                        <span class="pill pill-blue">Blue</span>
+                                    </div>
+                                    <div class="event-meta">
+                                        Round 1 • Score 2 – 0 • Judge: Central.
+                                    </div>
+                                </div>
+                                @auth
+                                    @if(Auth::id() === $video->user_id)
+                                        <div class="event-actions">
+                                            <button class="event-action-btn" onclick="editPoint('pt2')" title="Edit">✏️</button>
+                                            <button class="event-action-btn delete" onclick="deletePoint('pt2')" title="Delete">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+
+                            <!-- Round marker for Round 2 -->
+                            <div class="round-marker" data-round="2">
+                                <span class="round-badge">ROUND 2</span>
+                                @auth
+                                    @if(Auth::id() === $video->user_id)
+                                        <div class="round-actions">
+                                            <button class="round-action-btn" onclick="openAddPointModal(2)" title="Add point">+</button>
+                                            <button class="round-action-btn" onclick="editRound(2)" title="Edit round">✏️</button>
+                                            <button class="round-action-btn" onclick="deleteRound(2)" title="Delete round">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+
+                            <!-- Round 2 points -->
+                            <div class="event-item" data-time-start="90" data-round="2" data-id="pt3">
+                                <div class="event-time">@01:30</div>
+                                <div>
+                                    <div class="event-label">
+                                        Red head kick (3 pts)
+                                        <span class="pill pill-red">Red</span>
+                                    </div>
+                                    <div class="event-meta">
+                                        Round 2 • Score 2 – 3 • Video replay requested.
+                                    </div>
+                                </div>
+                                @auth
+                                    @if(Auth::id() === $video->user_id)
+                                        <div class="event-actions">
+                                            <button class="event-action-btn" onclick="editPoint('pt3')" title="Edit">✏️</button>
+                                            <button class="event-action-btn delete" onclick="deletePoint('pt3')" title="Delete">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+
+                            <!-- Round marker for Round 3 -->
+                            <div class="round-marker" data-round="3">
+                                <span class="round-badge">ROUND 3</span>
+                                @auth
+                                    @if(Auth::id() === $video->user_id)
+                                        <div class="round-actions">
+                                            <button class="round-action-btn" onclick="openAddPointModal(3)" title="Add point">+</button>
+                                            <button class="round-action-btn" onclick="editRound(3)" title="Edit round">✏️</button>
+                                            <button class="round-action-btn" onclick="deleteRound(3)" title="Delete round">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+
+                            <!-- Round 3 points -->
+                            <div class="event-item" data-time-start="150" data-round="3" data-id="pt4">
+                                <div class="event-time">@02:30</div>
+                                <div>
+                                    <div class="event-label">
+                                        Blue spinning backfist (2 pts)
+                                        <span class="pill pill-blue">Blue</span>
+                                    </div>
+                                    <div class="event-meta">
+                                        Round 3 • Score 4 – 3 • Close round.
+                                    </div>
+                                </div>
+                                @auth
+                                    @if(Auth::id() === $video->user_id)
+                                        <div class="event-actions">
+                                            <button class="event-action-btn" onclick="editPoint('pt4')" title="Edit">✏️</button>
+                                            <button class="event-action-btn delete" onclick="deletePoint('pt4')" title="Delete">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+                            <div class="event-item" data-time-start="180" data-round="3" data-id="pt5">
+                                <div class="event-time">@03:00</div>
+                                <div>
+                                    <div class="event-label">
+                                        Red leg kick (1 pt)
+                                        <span class="pill pill-red">Red</span>
+                                    </div>
+                                    <div class="event-meta">
+                                        Round 3 • Score 4 – 4 • Tied!
+                                    </div>
+                                </div>
+                                @auth
+                                    @if(Auth::id() === $video->user_id)
+                                        <div class="event-actions">
+                                            <button class="event-action-btn" onclick="editPoint('pt5')" title="Edit">✏️</button>
+                                            <button class="event-action-btn delete" onclick="deletePoint('pt5')" title="Delete">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Coach Review Tab -->
+                    <div class="tab-panel" id="tab-review">
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
+                            <div class="section-label">Private notes</div>
+                            @auth
+                                @if(Auth::id() === $video->user_id)
+                                    <button class="btn-add" type="button" onclick="openAddReviewModal()">
+                                        <span>+</span> Add Note
+                                    </button>
+                                @endif
+                            @endauth
+                        </div>
+                        <div class="event-list" id="reviewEvents">
+                            <div class="event-item" data-time-start="32" data-time-end="50" data-id="rev1">
+                                <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
+                                    <div style="font-size: 1.2rem; margin-bottom: 2px">🔥</div>
+                                    <div class="event-time">@00:32–00:50</div>
+                                </div>
+                                <div>
+                                    <div class="event-label">
+                                        Good pressure, but guard too low after first kick
+                                    </div>
+                                    <div class="event-meta">
+                                        <div class="comment-avatar">
+                                            <img src="https://picsum.photos/seed/coach-ahmed/80/80" alt="Coach Ahmed">
+                                        </div>
+                                        Coach Ahmed • Hands drop after scoring, drill guard recovery immediately.
+                                    </div>
+                                </div>
+                                @auth
+                                    @if(Auth::id() === $video->user_id)
+                                        <div class="event-actions">
+                                            <button class="event-action-btn" onclick="editReview('rev1')" title="Edit">✏️</button>
+                                            <button class="event-action-btn delete" onclick="deleteReview('rev1')" title="Delete">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+                            <div class="event-item" data-time-start="125" data-time-end="140" data-id="rev2">
+                                <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
+                                    <div style="font-size: 1.2rem; margin-bottom: 2px">🤔</div>
+                                    <div class="event-time">@02:05–02:20</div>
+                                </div>
+                                <div>
+                                    <div class="event-label">Missed counter opportunity</div>
+                                    <div class="event-meta">
+                                        Coach Sara • Great angle, but no follow up. Use this clip to discuss risk vs reward.
+                                    </div>
+                                </div>
+                                @auth
+                                    @if(Auth::id() === $video->user_id)
+                                        <div class="event-actions">
+                                            <button class="event-action-btn" onclick="editReview('rev2')" title="Edit">✏️</button>
+                                            <button class="event-action-btn delete" onclick="deleteReview('rev2')" title="Delete">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+                            <div class="event-item" data-time-start="205" data-id="rev3">
+                                <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
+                                    <div style="font-size: 1.2rem; margin-bottom: 2px">😄</div>
+                                    <div class="event-time">@03:25</div>
+                                </div>
+                                <div>
+                                    <div class="event-label">
+                                        Excellent angle change and follow-up
+                                    </div>
+                                    <div class="event-meta">
+                                        <div class="comment-avatar">
+                                            <img src="https://picsum.photos/seed/coach-ahmed/80/80" alt="Coach Ahmed">
+                                        </div>
+                                        Coach Ahmed • Save as positive highlight, ideal example of exit and re-entry after scoring.
+                                    </div>
+                                </div>
+                                @auth
+                                    @if(Auth::id() === $video->user_id)
+                                        <div class="event-actions">
+                                            <button class="event-action-btn" onclick="editReview('rev3')" title="Edit">✏️</button>
+                                            <button class="event-action-btn delete" onclick="deleteReview('rev3')" title="Delete">🗑️</button>
+                                        </div>
+                                    @endif
+                                @endauth
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </aside>
+        </div>
+
+        <!-- Add Round Modal -->
+        <div class="modal-overlay" id="addRoundModal">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h3>Add New Round</h3>
+                    <button class="modal-close" onclick="closeModal('addRoundModal')">×</button>
+                </div>
+                <form id="addRoundForm">
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label>Round Number</label>
+                            <input type="number" id="roundNumber" min="1" required>
+                        </div>
+                        <div class="form-group">
+                            <label>Round Name (optional)</label>
+                            <input type="text" id="roundName" placeholder="e.g., ROUND 1">
+                        </div>
+                    </div>
+                    <div class="modal-actions">
+                        <button type="button" class="btn-cancel" onclick="closeModal('addRoundModal')">Cancel</button>
+                        <button type="submit" class="btn-save">Add Round</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!-- Add/Edit Point Modal -->
+        <div class="modal-overlay" id="pointModal">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h3 id="pointModalTitle">Add Point</h3>
+                    <button class="modal-close" onclick="closeModal('pointModal')">×</button>
+                </div>
+                <form id="pointForm">
+                    <input type="hidden" id="pointId">
+                    <input type="hidden" id="pointRoundId">
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label>Timestamp (seconds)</label>
+                            <input type="number" id="pointTimestamp" min="0" required>
+                        </div>
+                        <div class="form-group">
+                            <label>Round</label>
+                            <select id="pointRoundSelect">
+                                <option value="1">Round 1</option>
+                                <option value="2">Round 2</option>
+                                <option value="3">Round 3</option>
+                                <option value="4">Round 4</option>
+                                <option value="5">Round 5</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label>Action Description</label>
+                        <input type="text" id="pointAction" placeholder="e.g., Blue body kick" required>
+                    </div>
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label>Points</label>
+                            <input type="number" id="pointValue" min="1" value="1">
+                        </div>
+                        <div class="form-group">
+                            <label>Competitor</label>
+                            <select id="pointCompetitor">
+                                <option value="blue">Blue</option>
+                                <option value="red">Red</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label>Notes</label>
+                        <textarea id="pointNotes" rows="2" placeholder="Optional notes"></textarea>
+                    </div>
+                    <div class="modal-actions">
+                        <button type="button" class="btn-delete" id="deletePointBtn" onclick="confirmDeletePoint()" style="display: none;">Delete</button>
+                        <div style="flex: 1;"></div>
+                        <button type="button" class="btn-cancel" onclick="closeModal('pointModal')">Cancel</button>
+                        <button type="submit" class="btn-save">Save Point</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!-- Edit Round Modal -->
+        <div class="modal-overlay" id="editRoundModal">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h3>Edit Round</h3>
+                    <button class="modal-close" onclick="closeModal('editRoundModal')">×</button>
+                </div>
+                <form id="editRoundForm">
+                    <input type="hidden" id="editRoundNumber">
+                    <div class="form-group">
+                        <label>Round Name</label>
+                        <input type="text" id="editRoundName" placeholder="e.g., ROUND 1" required>
+                    </div>
+                    <div class="modal-actions">
+                        <button type="button" class="btn-delete" onclick="confirmDeleteRound()">Delete Round</button>
+                        <div style="flex: 1;"></div>
+                        <button type="button" class="btn-cancel" onclick="closeModal('editRoundModal')">Cancel</button>
+                        <button type="submit" class="btn-save">Save Changes</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!-- Add/Edit Review Modal -->
+        <div class="modal-overlay" id="reviewModal">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h3 id="reviewModalTitle">Add Coach Note</h3>
+                    <button class="modal-close" onclick="closeModal('reviewModal')">×</button>
+                </div>
+                <form id="reviewForm">
+                    <input type="hidden" id="reviewId">
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label>Start Time (seconds)</label>
+                            <input type="number" id="reviewStartTime" min="0" required>
+                        </div>
+                        <div class="form-group">
+                            <label>End Time (seconds)</label>
+                            <input type="number" id="reviewEndTime" min="0">
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label>Note</label>
+                        <textarea id="reviewNote" rows="3" placeholder="Coach's observation..." required></textarea>
+                    </div>
+                    <div class="form-group">
+                        <label>Coach Name</label>
+                        <input type="text" id="reviewCoach" placeholder="e.g., Coach Ahmed" required>
+                    </div>
+                    <div class="form-group">
+                        <label>Emoji</label>
+                        <select id="reviewEmoji">
+                            <option value="🔥">🔥 Good</option>
+                            <option value="🤔">🤔 Needs Work</option>
+                            <option value="😄">😄 Excellent</option>
+                            <option value="💪">💪 Strong</option>
+                            <option value="⚠️">⚠️ Warning</option>
+                        </select>
+                    </div>
+                    <div class="modal-actions">
+                        <button type="button" class="btn-delete" id="deleteReviewBtn" onclick="confirmDeleteReview()" style="display: none;">Delete</button>
+                        <div style="flex: 1;"></div>
+                        <button type="button" class="btn-cancel" onclick="closeModal('reviewModal')">Cancel</button>
+                        <button type="submit" class="btn-save">Save Note</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+    </div>
+
+    @include('layouts.partials.share-modal')
+    @include('layouts.partials.edit-video-modal')
+
+    @if(Session::has('openEditModal') && Session::get('openEditModal'))
+    @auth
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            openEditVideoModal({{ $video->id }});
+        });
+    </script>
+    @endauth
+    @endif
+
+    <script>
+        // Playlist navigation URLs
+        const previousVideoUrl = @json($previousVideo ? route('videos.show', $previousVideo->id) . '?playlist=' . $playlist->id : null);
+        const nextVideoUrl = @json($nextVideo ? route('videos.show', $nextVideo->id) . '?playlist=' . $playlist->id : null);
+
+        // Video ID for API calls
+        const videoId = {{ $video->id }};
+        // Check if the current user is the owner of the video
+        const isOwner = {{ json_encode(Auth::check() && Auth::id() === $video->user_id) }};
+
+
+        // Autoplay management
+        let autoplayEnabled = true;
+
+        // Load match data on page load
+        document.addEventListener('DOMContentLoaded', function() {
+            loadMatchData();
+        });
+
+        // Load match data from API
+        async function loadMatchData() {
+            try {
+                const response = await fetch(`/videos/${videoId}/match-data`);
+                const data = await response.json();
+                if (data.success && data.rounds && data.rounds.length > 0) {
+                    renderMatchData(data.rounds, data.reviews);
+                } else {
+                    // No database data, render static demo data
+                    renderStaticData();
+                }
+            } catch (error) {
+                // API not available, render static demo data
+                renderStaticData();
+            }
+        }
+
+        // Render static demo data
+        function renderStaticData() {
+            // Static demo rounds and points
+            const staticRounds = [
+                {
+                    id: 1,
+                    round_number: 1,
+                    name: 'ROUND 1',
+                    points: [
+                        { id: 1, timestamp_seconds: 20, action: 'Blue body kick', points: 1, competitor: 'blue', score_blue: 1, score_red: 0, notes: 'Clean contact.' },
+                        { id: 2, timestamp_seconds: 45, action: 'Blue scores body kick', points: 1, competitor: 'blue', score_blue: 2, score_red: 0, notes: 'Judge: Central.' }
+                    ]
+                },
+                {
+                    id: 2,
+                    round_number: 2,
+                    name: 'ROUND 2',
+                    points: [
+                        { id: 3, timestamp_seconds: 90, action: 'Red head kick', points: 3, competitor: 'red', score_blue: 2, score_red: 3, notes: 'Video replay requested.' }
+                    ]
+                },
+                {
+                    id: 3,
+                    round_number: 3,
+                    name: 'ROUND 3',
+                    points: [
+                        { id: 4, timestamp_seconds: 150, action: 'Blue spinning backfist', points: 2, competitor: 'blue', score_blue: 4, score_red: 3, notes: 'Close round.' },
+                        { id: 5, timestamp_seconds: 180, action: 'Red leg kick', points: 1, competitor: 'red', score_blue: 4, score_red: 4, notes: 'Tied!' }
+                    ]
+                }
+            ];
+
+            const staticReviews = [
+                { id: 1, start_time_seconds: 32, end_time_seconds: 50, note: 'Good pressure, but guard too low after first kick', coach_name: 'Coach Ahmed', emoji: '🔥' },
+                { id: 2, start_time_seconds: 125, end_time_seconds: 140, note: 'Missed counter opportunity', coach_name: 'Coach Sara', emoji: '🤔' },
+                { id: 3, start_time_seconds: 205, end_time_seconds: null, note: 'Excellent angle change and follow-up', coach_name: 'Coach Ahmed', emoji: '😄' }
+            ];
+
+            renderMatchData(staticRounds, staticReviews);
+        }
+
+        // Render match data
+        function renderMatchData(rounds, reviews) {
+            if (!rounds || rounds.length === 0) return;
+
+            const pointsContainer = document.getElementById('officialEvents');
+            const reviewsContainer = document.getElementById('reviewEvents');
+
+            let pointsHtml = '';
+            let reviewsHtml = '';
+
+            // Render rounds and points
+            rounds.forEach(round => {
+                pointsHtml += `
+                    <div class="round-marker" data-round="${round.round_number}">
+                        <span class="round-badge">${round.name}</span>
+                        ${isOwner ? `
+                            <div class="round-actions">
+                                <button class="round-action-btn" onclick="openAddPointModal(${round.round_number}, ${round.id})" title="Add point">+</button>
+                                <button class="round-action-btn" onclick="editRound(${round.round_number}, ${round.id}, '${round.name}')" title="Edit round">✏️</button>
+                                <button class="round-action-btn" onclick="deleteRound(${round.id})" title="Delete round">🗑️</button>
+                            </div>
+                        ` : ''}
+                    </div>
+                `;
+
+                if (round.points) {
+                    round.points.forEach(point => {
+                        const competitorClass = point.competitor === 'blue' ? 'pill-blue' : 'pill-red';
+                        const competitorLabel = point.competitor === 'blue' ? 'Blue' : 'Red';
+                        const timeStr = formatTime(point.timestamp_seconds);
+
+                        pointsHtml += `
+                            <div class="event-item" data-time-start="${point.timestamp_seconds}" data-round="${round.round_number}" data-id="${point.id}">
+                                <div class="event-time">@${timeStr}</div>
+                                <div>
+                                    <div class="event-label">
+                                        ${point.action} (${point.points} pt)
+                                        <span class="pill ${competitorClass}">${competitorLabel}</span>
+                                    </div>
+                                    <div class="event-meta">
+                                        ${round.name} • Score ${point.score_blue} – ${point.score_red}${point.notes ? ' • ' + point.notes : ''}
+                                    </div>
+                                </div>
+                                ${isOwner ? `
+                                    <div class="event-actions">
+                                        <button class="event-action-btn" onclick="editPoint(${point.id})" title="Edit">✏️</button>
+                                        <button class="event-action-btn delete" onclick="deletePoint(${point.id})" title="Delete">🗑️</button>
+                                    </div>
+                                ` : ''}
+                            </div>
+                        `;
+                    });
+                }
+            });
+
+            // Render reviews
+            if (reviews) {
+                reviews.forEach(review => {
+                    const timeStart = formatTime(review.start_time_seconds);
+                    const timeEnd = review.end_time_seconds ? '–' + formatTime(review.end_time_seconds) : '';
+                    const timeDisplay = timeStart + timeEnd;
+
+                    reviewsHtml += `
+                        <div class="event-item" data-time-start="${review.start_time_seconds}" data-time-end="${review.end_time_seconds || ''}" data-id="${review.id}">
+                            <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
+                                <div style="font-size: 1.2rem; margin-bottom: 2px">${review.emoji}</div>
+                                <div class="event-time">@${timeDisplay}</div>
+                            </div>
+                            <div>
+                                <div class="event-label">
+                                    ${review.note}
+                                </div>
+                                <div class="event-meta">
+                                    <div class="comment-avatar">
+                                        <img src="https://picsum.photos/seed/${review.coach_name}/80/80" alt="${review.coach_name}">
+                                    </div>
+                                    ${review.coach_name}
+                                </div>
+                            </div>
+                            ${isOwner ? `
+                                <div class="event-actions">
+                                    <button class="event-action-btn" onclick="editReview(${review.id})" title="Edit">✏️</button>
+                                    <button class="event-action-btn delete" onclick="deleteReview(${review.id})" title="Delete">🗑️</button>
+                                </div>
+                            ` : ''}
+                        </div>
+                    `;
+                });
+            }
+
+            if (pointsContainer) pointsContainer.innerHTML = pointsHtml;
+            if (reviewsContainer) reviewsContainer.innerHTML = reviewsHtml;
+
+            // Re-attach event listeners
+            attachEventListeners();
+        }
+
+        // Format seconds to mm:ss
+        function formatTime(seconds) {
+            const mins = Math.floor(seconds / 60);
+            const secs = seconds % 60;
+            return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+        }
+
+        // Tab switching functionality for Match Highlights
+        document.addEventListener('DOMContentLoaded', function() {
+            const tabButtons = document.querySelectorAll('.tab-button');
+            const tabPanels = document.querySelectorAll('.tab-panel');
+
+            tabButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    const targetTab = this.getAttribute('data-tab');
+
+                    // Remove active class from all buttons and panels
+                    tabButtons.forEach(btn => btn.classList.remove('active'));
+                    tabPanels.forEach(panel => panel.classList.remove('active'));
+
+                    // Add active class to clicked button and corresponding panel
+                    this.classList.add('active');
+                    document.getElementById('tab-' + targetTab).classList.add('active');
+                });
+            });
+
+            attachEventListeners();
+
+            // Modal form submissions
+            document.getElementById('addRoundForm').addEventListener('submit', function(e) {
+                e.preventDefault();
+                const roundNumber = document.getElementById('roundNumber').value;
+                const roundName = document.getElementById('roundName').value || 'ROUND ' + roundNumber;
+                storeRound(roundNumber, roundName);
+            });
+
+            document.getElementById('pointForm').addEventListener('submit', function(e) {
+                e.preventDefault();
+                savePoint();
+            });
+
+            document.getElementById('editRoundForm').addEventListener('submit', function(e) {
+                e.preventDefault();
+                updateRound();
+            });
+
+            document.getElementById('reviewForm').addEventListener('submit', function(e) {
+                e.preventDefault();
+                saveReview();
+            });
+        });
+
+        function attachEventListeners() {
+            // Event item click to seek video to timestamp
+            const eventItems = document.querySelectorAll('.event-item');
+            eventItems.forEach(item => {
+                item.addEventListener('click', function(e) {
+                    // Don't seek if clicking on action buttons
+                    if (e.target.closest('.event-actions')) return;
+
+                    const timeStart = this.getAttribute('data-time-start');
+                    if (timeStart) {
+                        const videoPlayer = document.getElementById('videoPlayer');
+                        if (videoPlayer) {
+                            videoPlayer.currentTime = parseInt(timeStart);
+                            videoPlayer.play();
+                        }
+                    }
+                });
+            });
+        }
+
+        // Modal Functions
+        function openModal(modalId) {
+            document.getElementById(modalId).classList.add('active');
+        }
+
+        function closeModal(modalId) {
+            document.getElementById(modalId).classList.remove('active');
+        }
+
+        // Close modal when clicking outside
+        document.querySelectorAll('.modal-overlay').forEach(modal => {
+            modal.addEventListener('click', function(e) {
+                if (e.target === this) {
+                    this.classList.remove('active');
+                }
+            });
+        });
+
+        // Get CSRF token - handle case where it might not be available
+        const csrfToken = '{{ Auth::check() ? csrf_token() : "" }}';
+
+        // Demo mode - disable API calls if not authenticated
+        const isDemoMode = !{{ Auth::check() ? 'true' : 'false' }};
+
+        // ==================== ROUND FUNCTIONS ====================
+
+        function openAddRoundModal() {
+            // In demo mode, show a message
+            if (isDemoMode || !csrfToken) {
+                alert('Demo Mode: This feature requires authentication in production. The edit functionality is fully implemented and will work when logged in as the video owner.');
+                return;
+            }
+            document.getElementById('roundNumber').value = '';
+            document.getElementById('roundName').value = '';
+            openModal('addRoundModal');
+        }
+
+        async function storeRound(roundNumber, roundName) {
+            if (!csrfToken) {
+                alert('Demo Mode: API calls require authentication.');
+                return;
+            }
+            try {
+                const response = await fetch(`/videos/${videoId}/rounds`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-TOKEN': csrfToken
+                    },
+                    body: JSON.stringify({
+                        round_number: roundNumber,
+                        name: roundName
+                    })
+                });
+                const data = await response.json();
+                if (data.success) {
+                    closeModal('addRoundModal');
+                    loadMatchData();
+                } else {
+                    alert(data.message || 'Error adding round');
+                }
+            } catch (error) {
+                alert('Error: ' + error.message);
+            }
+        }
+
+        function editRound(roundNumber, roundId, currentName) {
+            if (isDemoMode || !csrfToken) {
+                alert('Demo Mode: This feature requires authentication in production.');
+                return;
+            }
+            document.getElementById('editRoundNumber').value = roundId;
+            document.getElementById('editRoundName').value = currentName;
+            openModal('editRoundModal');
+        }
+
+        async function updateRound() {
+            if (!csrfToken) {
+                alert('Demo Mode: API calls require authentication.');
+                return;
+            }
+            const roundId = document.getElementById('editRoundNumber').value;
+            const roundName = document.getElementById('editRoundName').value;
+
+            try {
+                const response = await fetch(`/rounds/${roundId}`, {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-TOKEN': csrfToken
+                    },
+                    body: JSON.stringify({ name: roundName })
+                });
+                const data = await response.json();
+                if (data.success) {
+                    closeModal('editRoundModal');
+                    loadMatchData();
+                } else {
+                    alert(data.message || 'Error updating round');
+                }
+            } catch (error) {
+                alert('Error: ' + error.message);
+            }
+        }
+
+        async function deleteRound(roundId) {
+            if (!csrfToken) {
+                alert('Demo Mode: API calls require authentication.');
+                return;
+            }
+            if (!confirm('Are you sure you want to delete this round and all its points?')) return;
+
+            try {
+                const response = await fetch(`/rounds/${roundId}`, {
+                    method: 'DELETE',
+                    headers: {
+                        'X-CSRF-TOKEN': csrfToken
+                    }
+                });
+                const data = await response.json();
+                if (data.success) {
+                    loadMatchData();
+                } else {
+                    alert(data.message || 'Error deleting round');
+                }
+            } catch (error) {
+                alert('Error: ' + error.message);
+            }
+        }
+
+        // ==================== POINT FUNCTIONS ====================
+
+        function openAddPointModal(roundNumber, roundId) {
+            if (isDemoMode || !csrfToken) {
+                alert('Demo Mode: This feature requires authentication in production.');
+                return;
+            }
+            document.getElementById('pointModalTitle').textContent = 'Add Point';
+            document.getElementById('pointId').value = '';
+            document.getElementById('pointRoundId').value = roundId || '';
+            document.getElementById('pointTimestamp').value = '';
+            document.getElementById('pointRoundSelect').value = roundNumber || '1';
+            document.getElementById('pointAction').value = '';
+            document.getElementById('pointValue').value = '1';
+            document.getElementById('pointCompetitor').value = 'blue';
+            document.getElementById('pointNotes').value = '';
+            document.getElementById('deletePointBtn').style.display = 'none';
+            openModal('pointModal');
+        }
+
+        function editPoint(pointId) {
+            if (isDemoMode || !csrfToken) {
+                alert('Demo Mode: This feature requires authentication in production. The edit modal will open in production when logged in as the video owner.');
+                // Still open the modal in demo mode for visual preview
+            }
+            // Find point data from rendered HTML
+            const pointElement = document.querySelector(`.event-item[data-id="${pointId}"]`);
+            if (!pointElement) return;
+
+            document.getElementById('pointModalTitle').textContent = 'Edit Point';
+            document.getElementById('pointId').value = pointId;
+            document.getElementById('pointTimestamp').value = pointElement.dataset.timeStart || '';
+            document.getElementById('pointRoundSelect').value = pointElement.dataset.round || '1';
+            document.getElementById('pointAction').value = pointElement.querySelector('.event-label').textContent.split('(')[0].trim() || '';
+            document.getElementById('pointValue').value = '1';
+            document.getElementById('pointCompetitor').value = pointElement.querySelector('.pill')?.classList.contains('pill-blue') ? 'blue' : 'red';
+            document.getElementById('pointNotes').value = pointElement.querySelector('.event-meta')?.textContent.split('•').slice(2).join('').trim() || '';
+            document.getElementById('deletePointBtn').style.display = (isDemoMode || !csrfToken) ? 'none' : 'block';
+            openModal('pointModal');
+        }
+
+        async function savePoint() {
+            if (!csrfToken) {
+                alert('Demo Mode: API calls require authentication. In production, this will save to the database when logged in as the video owner.');
+                closeModal('pointModal');
+                return;
+            }
+            const pointId = document.getElementById('pointId').value;
+            const roundId = document.getElementById('pointRoundId').value;
+            const timestamp = document.getElementById('pointTimestamp').value;
+            const round = document.getElementById('pointRoundSelect').value;
+            const action = document.getElementById('pointAction').value;
+            const value = document.getElementById('pointValue').value;
+            const competitor = document.getElementById('pointCompetitor').value;
+            const notes = document.getElementById('pointNotes').value;
+
+            try {
+                if (pointId) {
+                    // Update existing point
+                    const response = await fetch(`/points/${pointId}`, {
+                        method: 'PUT',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-TOKEN': csrfToken
+                        },
+                        body: JSON.stringify({
+                            timestamp_seconds: parseInt(timestamp),
+                            action: action,
+                            points: parseInt(value),
+                            competitor: competitor,
+                            notes: notes
+                        })
+                    });
+                    const data = await response.json();
+                    if (data.success) {
+                        closeModal('pointModal');
+                        loadMatchData();
+                    } else {
+                        alert(data.message || 'Error updating point');
+                    }
+                } else {
+                    // Create new point
+                    const response = await fetch(`/videos/${videoId}/points`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-TOKEN': csrfToken
+                        },
+                        body: JSON.stringify({
+                            round_id: roundId,
+                            timestamp_seconds: parseInt(timestamp),
+                            action: action,
+                            points: parseInt(value),
+                            competitor: competitor,
+                            notes: notes
+                        })
+                    });
+                    const data = await response.json();
+                    if (data.success) {
+                        closeModal('pointModal');
+                        loadMatchData();
+                    } else {
+                        alert(data.message || 'Error adding point');
+                    }
+                }
+            } catch (error) {
+                alert('Error: ' + error.message);
+            }
+        }
+
+        async function deletePoint(pointId) {
+            if (!csrfToken) {
+                alert('Demo Mode: API calls require authentication.');
+                return;
+            }
+            if (!confirm('Are you sure you want to delete this point?')) return;
+
+            try {
+                const response = await fetch(`/points/${pointId}`, {
+                    method: 'DELETE',
+                    headers: {
+                        'X-CSRF-TOKEN': csrfToken
+                    }
+                });
+                const data = await response.json();
+                if (data.success) {
+                    closeModal('pointModal');
+                    loadMatchData();
+                } else {
+                    alert(data.message || 'Error deleting point');
+                }
+            } catch (error) {
+                alert('Error: ' + error.message);
+            }
+        }
+
+        // ==================== REVIEW FUNCTIONS ====================
+
+        function openAddReviewModal() {
+            if (isDemoMode || !csrfToken) {
+                alert('Demo Mode: This feature requires authentication in production.');
+                return;
+            }
+            document.getElementById('reviewModalTitle').textContent = 'Add Coach Note';
+            document.getElementById('reviewId').value = '';
+            document.getElementById('reviewStartTime').value = '';
+            document.getElementById('reviewEndTime').value = '';
+            document.getElementById('reviewNote').value = '';
+            document.getElementById('reviewCoach').value = '';
+            document.getElementById('reviewEmoji').value = '🔥';
+            document.getElementById('deleteReviewBtn').style.display = 'none';
+            openModal('reviewModal');
+        }
+
+        function editReview(reviewId) {
+            if (isDemoMode || !csrfToken) {
+                alert('Demo Mode: This feature requires authentication in production.');
+                return;
+            }
+            const reviewElement = document.querySelector(`.event-item[data-id="${reviewId}"]`);
+            if (!reviewElement) return;
+
+            document.getElementById('reviewModalTitle').textContent = 'Edit Coach Note';
+            document.getElementById('reviewId').value = reviewId;
+            document.getElementById('reviewStartTime').value = reviewElement.dataset.timeStart || '';
+            document.getElementById('reviewEndTime').value = reviewElement.dataset.timeEnd || '';
+            document.getElementById('reviewNote').value = reviewElement.querySelector('.event-label')?.textContent.trim() || '';
+            document.getElementById('reviewCoach').value = reviewElement.querySelector('.event-meta')?.textContent.trim() || '';
+            document.getElementById('reviewEmoji').value = reviewElement.querySelector('div:first-child')?.textContent || '🔥';
+            document.getElementById('deleteReviewBtn').style.display = 'block';
+            openModal('reviewModal');
+        }
+
+        async function saveReview() {
+            if (!csrfToken) {
+                alert('Demo Mode: API calls require authentication.');
+                return;
+            }
+            const reviewId = document.getElementById('reviewId').value;
+            const startTime = document.getElementById('reviewStartTime').value;
+            const endTime = document.getElementById('reviewEndTime').value;
+            const note = document.getElementById('reviewNote').value;
+            const coach = document.getElementById('reviewCoach').value;
+            const emoji = document.getElementById('reviewEmoji').value;
+
+            try {
+                if (reviewId) {
+                    // Update existing review
+                    const response = await fetch(`/reviews/${reviewId}`, {
+                        method: 'PUT',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-TOKEN': csrfToken
+                        },
+                        body: JSON.stringify({
+                            start_time_seconds: parseInt(startTime),
+                            end_time_seconds: endTime ? parseInt(endTime) : null,
+                            note: note,
+                            coach_name: coach,
+                            emoji: emoji
+                        })
+                    });
+                    const data = await response.json();
+                    if (data.success) {
+                        closeModal('reviewModal');
+                        loadMatchData();
+                    } else {
+                        alert(data.message || 'Error updating note');
+                    }
+                } else {
+                    // Create new review
+                    const response = await fetch(`/videos/${videoId}/reviews`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-TOKEN': csrfToken
+                        },
+                        body: JSON.stringify({
+                            start_time_seconds: parseInt(startTime),
+                            end_time_seconds: endTime ? parseInt(endTime) : null,
+                            note: note,
+                            coach_name: coach,
+                            emoji: emoji
+                        })
+                    });
+                    const data = await response.json();
+                    if (data.success) {
+                        closeModal('reviewModal');
+                        loadMatchData();
+                    } else {
+                        alert(data.message || 'Error adding note');
+                    }
+                }
+            } catch (error) {
+                alert('Error: ' + error.message);
+            }
+        }
+
+        async function deleteReview(reviewId) {
+            if (!csrfToken) {
+                alert('Demo Mode: API calls require authentication.');
+                return;
+            }
+            if (!confirm('Are you sure you want to delete this coach note?')) return;
+
+            try {
+                const response = await fetch(`/reviews/${reviewId}`, {
+                    method: 'DELETE',
+                    headers: {
+                        'X-CSRF-TOKEN': csrfToken
+                    }
+                });
+                const data = await response.json();
+                if (data.success) {
+                    closeModal('reviewModal');
+                    loadMatchData();
+                } else {
+                    alert(data.message || 'Error deleting note');
+                }
+            } catch (error) {
+                alert('Error: ' + error.message);
+            }
+        }
+
+        // Playlist navigation (existing code)
+        document.addEventListener('DOMContentLoaded', function() {
+            var videoPlayer = document.getElementById('videoPlayer');
+            var playlistControls = document.getElementById('playlistControls');
+            var autoplayToggle = document.getElementById('autoplayToggle');
+
+            if (videoPlayer) {
+                videoPlayer.volume = 0.5;
+                var playPromise = videoPlayer.play();
+                if (playPromise !== undefined) {
+                    playPromise.then(function() { console.log('Video autoplayed'); }).catch(function(error) { console.log('Autoplay blocked'); });
+                }
+
+                // Handle video ended - autoplay next
+                if (nextVideoUrl) {
+                    videoPlayer.addEventListener('ended', function() {
+                        if (autoplayEnabled) {
+                            console.log('Video ended, going to next...');
+                            window.location.href = nextVideoUrl;
+                        }
+                    });
+                }
+            }
+
+            // Show playlist controls on hover
+            if (playlistControls) {
+                const videoContainer = document.getElementById('videoContainer');
+                videoContainer.addEventListener('mouseenter', function() {
+                    playlistControls.classList.add('visible');
+                });
+                videoContainer.addEventListener('mouseleave', function() {
+                    playlistControls.classList.remove('visible');
+                });
+
+                // Initially show for a few seconds
+                setTimeout(function() { playlistControls.classList.add('visible'); }, 2000);
+                setTimeout(function() { playlistControls.classList.remove('visible'); }, 6000);
+            }
+
+            // Autoplay toggle handler
+            if (autoplayToggle) {
+                autoplayToggle.addEventListener('change', function() {
+                    autoplayEnabled = this.checked;
+                    localStorage.setItem('playlistAutoplay', autoplayEnabled ? '1' : '0');
+                });
+
+                // Load saved preference
+                const savedAutoplay = localStorage.getItem('playlistAutoplay');
+                if (savedAutoplay !== null) {
+                    autoplayEnabled = savedAutoplay === '1';
+                    autoplayToggle.checked = autoplayEnabled;
+                }
+            }
+
+            // Keyboard navigation
+            document.addEventListener('keydown', function(e) {
+                if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') { return; }
+                if (e.key === 'ArrowLeft') { e.preventDefault(); goToPreviousVideo(); }
+                else if (e.key === 'ArrowRight') { e.preventDefault(); goToNextVideo(); }
+            });
+        });
+
+        function goToPreviousVideo() {
+            if (previousVideoUrl) { window.location.href = previousVideoUrl; }
+        }
+
+        function goToNextVideo() {
+            if (nextVideoUrl) { window.location.href = nextVideoUrl; }
+        }
+    </script>
+@endsection
diff --git a/resources/views/videos/types/match.blade.php b/resources/views/videos/types/match.blade.php
index 9a00bfe..419a41c 100644
--- a/resources/views/videos/types/match.blade.php
+++ b/resources/views/videos/types/match.blade.php
@@ -1,799 +1,2226 @@
 @extends('layouts.app')
-
-@section('title', $video->title . ' | ' . config('app.name'))
+@section('title', ($video->title ?? 'Match Video') . ' | ' . config('app.name'))
 
 @section('extra_styles')
-    <style>
-        /* Video Section */
-        .yt-video-section { flex: 1; min-width: 0; }
-
-        /* Video Player */
-        .video-container {
-            position: relative;
-            aspect-ratio: 16/9;
-            background: #000;
-            border-radius: 12px;
-            overflow: hidden;
-            max-height: 70vh;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 100%;
-        }
-
-        .video-container.portrait,
-        .video-container.square,
-        .video-container.ultrawide {
-            margin: 0 auto;
-            width: auto;
-        }
-
-        .video-container.portrait { aspect-ratio: 9/16; max-width: 50vh; }
-        .video-container.square { aspect-ratio: 1/1; max-width: 70vh; }
-        .video-container.ultrawide { aspect-ratio: 21/9; max-width: 100%; }
+<style>
+/* ===== Video Section ===== */
+.yt-video-section { flex: 1; min-width: 0; }
 
+/* ===== Video Player ===== */
+.video-container {
+    position: relative;
+    aspect-ratio: 16/9;
+    background: #000;
+    border-radius: 12px;
+    overflow: hidden;
+    max-height: 70vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+.video-container.portrait,
+.video-container.square,
+.video-container.ultrawide {
+    margin: 0 auto;
+    width: auto;
+}
+.video-container.portrait { aspect-ratio: 9/16; max-width: 50vh; }
+.video-container.square { aspect-ratio: 1/1; max-width: 70vh; }
+.video-container.ultrawide { aspect-ratio: 21/9; max-width: 100%; }
 .video-container video { width: 100%; height: 100%; object-fit: contain; }
 
-        /* Playlist Navigation Controls */
-        .playlist-controls {
-            position: absolute;
-            bottom: 60px;
-            left: 50%;
-            transform: translateX(-50%);
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            background: rgba(0, 0, 0, 0.8);
-            padding: 8px 16px;
-            border-radius: 24px;
-            z-index: 10;
-            opacity: 0;
-            transition: opacity 0.3s ease;
-        }
+/* ===== Playlist Navigation Controls ===== */
+.playlist-controls {
+    position: absolute;
+    bottom: 60px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    background: rgba(0, 0, 0, 0.8);
+    padding: 8px 16px;
+    border-radius: 24px;
+    z-index: 10;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+.video-container:hover .playlist-controls,
+.playlist-controls.visible { opacity: 1; }
+.playlist-nav-btn {
+    background: transparent;
+    border: none;
+    color: white;
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s ease;
+}
+.playlist-nav-btn:hover { background: rgba(255, 255, 255, 0.2); }
+.playlist-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
+.playlist-nav-btn:disabled:hover { background: transparent; }
+.playlist-nav-btn i { font-size: 20px; }
+.playlist-nav-label {
+    font-size: 12px;
+    color: #aaa;
+    max-width: 120px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 
-        .video-container:hover .playlist-controls,
-        .playlist-controls.visible { opacity: 1; }
+/* ===== Autoplay Toggle ===== */
+.autoplay-toggle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 8px;
+    border-left: 1px solid rgba(255, 255, 255, 0.2);
+}
+.autoplay-toggle label {
+    font-size: 12px;
+    color: #aaa;
+    cursor: pointer;
+    white-space: nowrap;
+}
+.autoplay-switch { position: relative; width: 36px; height: 20px; }
+.autoplay-switch input { opacity: 0; width: 0; height: 0; }
+.autoplay-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background-color: #666;
+    transition: 0.3s;
+    border-radius: 20px;
+}
+.autoplay-slider:before {
+    position: absolute;
+    content: "";
+    height: 14px;
+    width: 14px;
+    left: 3px;
+    bottom: 3px;
+    background-color: white;
+    transition: 0.3s;
+    border-radius: 50%;
+}
+.autoplay-switch input:checked + .autoplay-slider { background-color: var(--brand-red); }
+.autoplay-switch input:checked + .autoplay-slider:before { transform: translateX(16px); }
 
-        .playlist-nav-btn {
-            background: transparent;
-            border: none;
-            color: white;
-            cursor: pointer;
-            padding: 8px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: background 0.2s ease;
-        }
+/* ===== Keyboard Hint ===== */
+.keyboard-hint {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    font-size: 10px;
+    color: rgba(255, 255, 255, 0.5);
+    background: rgba(0, 0, 0, 0.6);
+    padding: 4px 8px;
+    border-radius: 4px;
+}
 
-        .playlist-nav-btn:hover { background: rgba(255, 255, 255, 0.2); }
-        .playlist-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
-        .playlist-nav-btn:disabled:hover { background: transparent; }
-        .playlist-nav-btn i { font-size: 20px; }
+/* ===== Video Info ===== */
+.video-title {
+    font-size: 20px;
+    font-weight: 500;
+    margin: 16px 0 8px;
+    line-height: 1.3;
+}
+.video-stats-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--border-color);
+    flex-wrap: wrap;
+    gap: 12px;
+}
+.video-stats-left { display: flex; align-items: center; gap: 16px; color: var(--text-secondary); }
+.video-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.yt-action-btn {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    border-radius: 20px;
+    border: none;
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+}
+.yt-action-btn:hover { background: var(--border-color); }
+.yt-action-btn.liked { color: var(--brand-red); }
 
-        .playlist-nav-label {
-            font-size: 12px;
-            color: #aaa;
-            max-width: 120px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
+/* ===== Channel Row ===== */
+.channel-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 0;
+}
+.channel-info {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+.channel-avatar {
+    width: 48px; height: 48px; border-radius: 50%; background: #555;
+}
+.channel-name {
+    font-size: 16px;
+    font-weight: 500;
+}
+.channel-subs {
+    font-size: 14px;
+    color: var(--text-secondary);
+}
+.subscribe-btn {
+    background: white;
+    color: black;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 18px;
+    font-weight: 600;
+    font-size: 14px;
+    cursor: pointer;
+    white-space: nowrap;
+}
 
-        /* Autoplay Toggle */
-        .autoplay-toggle {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 0 8px;
-            border-left: 1px solid rgba(255, 255, 255, 0.2);
-        }
+/* ===== Event Header ===== */
+.event-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-top: 16px;
+    padding: 12px 0;
+}
+.event-header-left {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    min-width: 0;
+    flex: 1;
+}
+.event-logo {
+    width: 56px;
+    height: 56px;
+    border-radius: 14px;
+    overflow: hidden;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.event-logo img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+.event-text {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+    flex: 1;
+}
+.event-text .title {
+    font-size: 1.4rem;
+    margin: 0;
+    line-height: 1.3;
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+.event-text .title .trophy-icon {
+    color: #ef4444;
+    font-size: 1.2rem;
+}
+.event-text .title a {
+    color: inherit;
+    text-decoration: none;
+}
+.event-text .title a:hover {
+    text-decoration: underline;
+    opacity: 0.85;
+}
+.event-text .meta-link {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-decoration: none;
+    cursor: pointer;
+    transition: color 0.2s ease;
+}
+.event-text .meta-link:hover {
+    color: var(--brand-red);
+}
+.event-text .meta-link a {
+    color: inherit;
+    font-weight: bold;
+    text-decoration: none;
+}
+.event-text .meta-link a:hover {
+    text-decoration: underline;
+}
+.event-header-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+}
+.event-header-actions .action-btn {
+    border: none;
+    border-radius: 8px;
+    padding: 8px 14px;
+    font-size: 0.82rem;
+    font-weight: 500;
+    cursor: pointer;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    transition: all 0.2s ease;
+}
+.event-header-actions .action-btn:hover {
+    background: var(--border-color);
+    transform: translateY(-1px);
+}
+.event-header-actions .action-btn:active {
+    transform: translateY(0);
+}
+.event-header-actions .action-btn svg,
+.event-header-actions .action-btn i {
+    flex-shrink: 0;
+}
+.event-header-actions .action-btn.liked {
+    color: #22c55e;
+    background: rgba(34, 197, 94, 0.15);
+    border-color: #22c55e;
+}
+.event-header-actions .action-btn.disliked {
+    color: #ef4444;
+    background: rgba(239, 68, 68, 0.15);
+    border-color: #ef4444;
+}
+.event-header-actions .action-btn.saved {
+    color: #f59e0b;
+    background: rgba(245, 158, 11, 0.15);
+    border-color: #f59e0b;
+}
+.event-header-actions .action-btn.subscribed {
+    color: #ffffff;
+    background: #6b7280;
+    border-color: #6b7280;
+}
 
-        .autoplay-toggle label {
-            font-size: 12px;
-            color: #aaa;
-            cursor: pointer;
-            white-space: nowrap;
-        }
+/* Video Owner Badge */
+.video-owner-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    margin-top: 4px;
+}
+.video-owner-badge .owner-avatar {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    object-fit: cover;
+}
+.video-owner-badge .owner-name {
+    color: var(--text-primary);
+    font-weight: 500;
+}
 
-        .autoplay-switch { position: relative; width: 36px; height: 20px; }
-        .autoplay-switch input { opacity: 0; width: 0; height: 0; }
+/* ===== Description Panel ===== */
+.description-panel {
+    margin-top: 16px;
+    border-radius: 12px;
+    border: 1px solid var(--border-color);
+    background: var(--bg-secondary);
+    padding: 8px 10px 10px;
+}
+.description-toggle {
+    width: 100%;
+    border: none;
+    background: transparent;
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 0.85rem;
+    cursor: pointer;
+    padding: 4px 0;
+}
+.description-toggle:hover {
+    color: #ffffff;
+}
+.description-body {
+    margin-top: 6px;
+    display: none;
+}
+.description-body.open {
+    display: block;
+}
 
-        .autoplay-slider {
-            position: absolute;
-            cursor: pointer;
-            top: 0; left: 0; right: 0; bottom: 0;
-            background-color: #666;
-            transition: 0.3s;
-            border-radius: 20px;
-        }
+/* ===== Match Card ===== */
+.match-card {
+    margin-top: 16px;
+    padding: 16px 18px;
+    border-radius: 14px;
+    border: 1px solid var(--border-color);
+    background: radial-gradient(circle at top, var(--bg-secondary) 0, var(--bg-primary) 45%, var(--bg-primary) 100%);
+}
+.match-header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 12px;
+}
+.match-label {
+    font-size: 1.2rem;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    color: var(--text-primary);
+    text-align: center;
+    font-weight: 600;
+}
+.fighters-row {
+    display: grid;
+    grid-template-columns: 1.1fr 0.8fr 1.1fr;
+    align-items: stretch;
+    gap: 16px;
+}
+.fighter-card {
+    border-radius: 14px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+}
+.fighter-top {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    width: 100%;
+}
+.fighter-photo {
+    width: 110px;
+    height: 145px;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 0 0 1px var(--bg-primary);
+    flex-shrink: 0;
+}
+.fighter-photo img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+.fighter-logo {
+    width: 64px;
+    height: 64px;
+    border-radius: 20px;
+    overflow: hidden;
+    background: var(--bg-primary);
+}
+.fighter-logo img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+.fighter-badge {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    padding: 3px 8px;
+    border-radius: 999px;
+    border: 1px solid #404040;
+    color: var(--text-primary);
+}
+.fighter-badge.blue {
+    background: rgba(37, 99, 235, 0.15);
+    border-color: #1d4ed8;
+}
+.fighter-badge.red {
+    background: rgba(239, 68, 68, 0.14);
+    border-color: #b91c1c;
+}
+.fighter-name.blue-corner {
+    color: #2563eb;
+    font-weight: bold;
+}
+.fighter-name.red-corner {
+    color: #ef4444;
+    font-weight: bold;
+}
+.fighter-name a {
+    color: inherit;
+    text-decoration: none;
+}
+.fighter-name a:hover {
+    text-decoration: underline;
+}
+.fighter-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    width: 100%;
+    text-align: center;
+    font-size: 0.8rem;
+}
+.fighter-name {
+    font-weight: 600;
+    font-size: 0.95rem;
+}
+.fighter-team {
+    color: var(--text-secondary);
+}
+.fighter-team a {
+    color: inherit;
+    text-decoration: none;
+}
+.fighter-team a:hover {
+    text-decoration: underline;
+}
+.fighter-country {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+    color: var(--text-secondary);
+    margin-top: 2px;
+}
+.fighter-country-flag {
+    font-size: 0.9rem;
+}
+.match-center {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+}
+.score-pill {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 6px 12px;
+    border-radius: 999px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+}
+.score-number {
+    font-size: 2rem;
+    font-weight: 700;
+}
+.score-label {
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+}
+.referee-block {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+}
+.referee-photo {
+    width: 80px;
+    height: 115px;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 0 0 1px var(--bg-primary);
+    flex-shrink: 0;
+}
+.referee-photo img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+.referee-block a {
+    color: inherit;
+    text-decoration: none;
+}
+.referee-block a:hover {
+    text-decoration: underline;
+}
+.ref-label {
+    font-size: 0.7rem;
+    color: var(--text-secondary);
+}
+.match-footer {
+    margin-top: 12px;
+    font-size: 0.8rem;
+    color: #666666;
+    text-align: center;
+}
+.hall-link {
+    color: #e61e1e;
+    font-weight: 600;
+    text-decoration: none;
+    cursor: pointer;
+    transition: color 0.2s ease;
+}
+.hall-link:hover {
+    color: #ff4757;
+    text-decoration: underline;
+}
 
-        .autoplay-slider:before {
-            position: absolute;
-            content: "";
-            height: 14px;
-            width: 14px;
-            left: 3px;
-            bottom: 3px;
-            background-color: white;
-            transition: 0.3s;
-            border-radius: 50%;
-        }
+/* ===== Markdown Body ===== */
+.markdown-body {
+    font-size: 0.95rem;
+    line-height: 1.6;
+    margin-top: 16px;
+}
+.markdown-body h2 {
+    font-size: 1.05rem;
+    margin-top: 14px;
+}
+.description-text {
+    font-size: 14px;
+    line-height: 1.5;
+    color: var(--text-primary);
+}
+.description-text p {
+    margin-bottom: 8px;
+}
+.description-text a {
+    color: #3ea6ff;
+}
 
-        .autoplay-switch input:checked + .autoplay-slider { background-color: var(--brand-red); }
-        .autoplay-switch input:checked + .autoplay-slider:before { transform: translateX(16px); }
+/* ===== Sidebar ===== */
+.yt-sidebar-container {
+    width: 400px;
+    flex-shrink: 0;
+}
 
-        /* Keyboard hint */
-        .keyboard-hint {
-            position: absolute;
-            bottom: 10px;
-            right: 10px;
-            font-size: 10px;
-            color: rgba(255, 255, 255, 0.5);
-            background: rgba(0, 0, 0, 0.6);
-            padding: 4px 8px;
-            border-radius: 4px;
-        }
+/* ===== Match Events Sidebar ===== */
+.events-sidebar {
+    background: var(--bg-secondary);
+    border-radius: 12px;
+    overflow: hidden;
+    width: 400px;
+    flex-shrink: 0;
+}
+.events-sidebar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    border-bottom: 1px solid var(--border-color);
+}
+.events-sidebar-header h3 {
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0;
+}
+.close-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    font-size: 24px;
+    cursor: pointer;
+    padding: 0;
+    line-height: 1;
+}
+.close-btn:hover {
+    color: var(--text-primary);
+}
+.tab-header {
+    display: flex;
+    border-bottom: 1px solid var(--border-color);
+}
+.tab-button {
+    flex: 1;
+    padding: 12px 16px;
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border-bottom: 2px solid transparent;
+}
+.tab-button:hover {
+    color: var(--text-primary);
+    background: rgba(255, 255, 255, 0.05);
+}
+.tab-button.active {
+    color: var(--brand-red);
+    border-bottom-color: var(--brand-red);
+}
+.tab-panels {
+    max-height: 500px;
+    overflow-y: auto;
+}
+.tab-panel {
+    display: none;
+    padding: 16px;
+}
+.tab-panel.active {
+    display: block;
+}
+.section-label {
+    font-size: 12px;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-weight: 500;
+}
+.btn-icon {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 14px;
+}
+.btn-icon:hover {
+    background: var(--border-color);
+    color: var(--text-primary);
+}
+.btn-add {
+    background: var(--brand-red);
+    color: white;
+    border: none;
+    padding: 4px 10px;
+    border-radius: 4px;
+    font-size: 12px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+.btn-add:hover {
+    background: #dc2626;
+}
+.event-list {
+    margin-top: 12px;
+}
+.round-marker {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.round-marker:first-child {
+    border-top: none;
+    margin-top: 0;
+}
+.round-badge {
+    background-color: #fbbf24;
+    color: #000000;
+    font-weight: 700;
+    padding: 4px 12px;
+    border-radius: 6px;
+    font-size: 12px;
+    display: inline-block;
+}
+.round-actions {
+    display: flex;
+    gap: 4px;
+}
+.round-action-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 12px;
+}
+.round-action-btn:hover {
+    background: var(--border-color);
+    color: var(--text-primary);
+}
+.event-item {
+    display: flex;
+    gap: 12px;
+    padding: 10px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background 0.2s ease;
+    margin-bottom: 4px;
+    position: relative;
+}
+.event-item:hover {
+    background: var(--border-color);
+}
+.event-item:hover .event-actions {
+    opacity: 1;
+}
+.event-actions {
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    display: flex;
+    gap: 4px;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+.event-action-btn {
+    background: var(--bg-primary);
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 4px 6px;
+    border-radius: 4px;
+    font-size: 10px;
+}
+.event-action-btn:hover {
+    background: var(--border-color);
+    color: var(--text-primary);
+}
+.event-action-btn.delete:hover {
+    color: var(--brand-red);
+}
+.event-time {
+    font-size: 12px;
+    color: #3ea6ff;
+    font-weight: 500;
+    min-width: 55px;
+    text-align: center;
+}
+.event-label {
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 4px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+.event-meta {
+    font-size: 12px;
+    color: var(--text-secondary);
+    line-height: 1.4;
+}
+.pill {
+    font-size: 10px;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+.pill-blue {
+    background: #3b82f6;
+    color: white;
+}
+.pill-red {
+    background: #ef4444;
+    color: white;
+}
 
-        /* Video Info */
-        .video-title {
-            font-size: 20px;
-            font-weight: 500;
-            margin: 16px 0 8px;
-            line-height: 1.3;
-        }
+/* ===== Modal Styles ===== */
+.modal-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+    z-index: 9999;
+    align-items: center;
+    justify-content: center;
+}
+.modal-overlay.active {
+    display: flex;
+}
+.modal-content {
+    background: var(--bg-secondary);
+    border-radius: 12px;
+    padding: 24px;
+    width: 90%;
+    max-width: 500px;
+    max-height: 90vh;
+    overflow-y: auto;
+}
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+.modal-header h3 {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0;
+}
+.modal-close {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    font-size: 24px;
+    cursor: pointer;
+    padding: 0;
+    line-height: 1;
+}
+.modal-close:hover {
+    color: var(--text-primary);
+}
+.form-group {
+    margin-bottom: 16px;
+}
+.form-group label {
+    display: block;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 6px;
+    color: var(--text-primary);
+}
+.form-group input,
+.form-group select,
+.form-group textarea {
+    width: 100%;
+    padding: 10px 12px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: 14px;
+}
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+    outline: none;
+    border-color: var(--brand-red);
+}
+.form-row {
+    display: flex;
+    gap: 12px;
+}
+.form-row .form-group {
+    flex: 1;
+}
+.modal-actions {
+    display: flex;
+    gap: 12px;
+    justify-content: flex-end;
+    margin-top: 20px;
+}
+.btn-cancel {
+    background: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    color: var(--text-primary);
+    padding: 10px 20px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+}
+.btn-cancel:hover {
+    background: var(--border-color);
+}
+.btn-save {
+    background: var(--brand-red);
+    border: none;
+    color: white;
+    padding: 10px 20px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+}
+.btn-save:hover {
+    background: #dc2626;
+}
+.btn-delete {
+    background: transparent;
+    border: 1px solid var(--brand-red);
+    color: var(--brand-red);
+    padding: 10px 20px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+}
+.btn-delete:hover {
+    background: var(--brand-red);
+    color: white;
+}
 
-        .video-stats-row {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding-bottom: 12px;
-            border-bottom: 1px solid var(--border-color);
-            flex-wrap: wrap;
-            gap: 12px;
-        }
-
-        .video-stats-left { display: flex; align-items: center; gap: 16px; color: var(--text-secondary); }
-
-        .video-actions {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .yt-action-btn {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 8px 16px;
-            border-radius: 20px;
-            border: none;
-            background: var(--bg-secondary);
-            color: var(--text-primary);
-            cursor: pointer;
-            font-size: 14px;
-            font-weight: 500;
-        }
-
-        .yt-action-btn:hover { background: var(--border-color); }
-
-        .yt-action-btn.liked { color: var(--brand-red); }
-
-        /* Channel Row */
-        .channel-row {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 16px 0;
-        }
-
-        .channel-info {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-        }
-
-        .channel-avatar {
-            width: 48px; height: 48px; border-radius: 50%; background: #555;
-        }
-
-        .channel-name {
-            font-size: 16px;
-            font-weight: 500;
-        }
-
-        .channel-subs {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-
-        .subscribe-btn {
-            background: white;
-            color: black;
-            border: none;
-            padding: 8px 16px;
-            border-radius: 18px;
-            font-weight: 600;
-            font-size: 14px;
-            cursor: pointer;
-            white-space: nowrap;
-        }
-
-        /* Description */
-        .video-description {
-            background: var(--bg-secondary);
-            border-radius: 12px;
-            padding: 16px;
-            margin-top: 16px;
-        }
-
-        .description-text {
-            white-space: pre-wrap;
-            font-size: 14px;
-            line-height: 1.5;
-        }
-
-        /* Sidebar */
-        .yt-sidebar-container {
-            width: 400px;
-            flex-shrink: 0;
-        }
-
-        .sidebar-video-card {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 8px;
-            cursor: pointer;
-        }
-
-        .sidebar-thumb {
-            width: 168px;
-            aspect-ratio: 16/9;
-            border-radius: 8px;
-            overflow: hidden;
-            background: #1a1a1a;
-            flex-shrink: 0;
-        }
-
-        .sidebar-thumb img { width: 100%; height: 100%; object-fit: cover; }
-
-        .sidebar-info { flex: 1; min-width: 0; }
-
-        .sidebar-title {
-            font-size: 14px;
-            font-weight: 500;
-            margin-bottom: 4px;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-        }
-
-        .sidebar-meta { font-size: 12px; color: var(--text-secondary); }
-
-        /* Responsive */
-        @media (max-width: 1300px) {
-            .yt-sidebar-container { width: 300px; }
-        }
-
-        @media (max-width: 991px) {
-            .yt-main { margin-left: 0; flex-direction: column; }
-            .yt-sidebar-container { width: 100%; }
-            .sidebar-video-card { flex-direction: column; }
-            .sidebar-thumb { width: 100%; }
-
-            .video-layout-container {
-                flex-direction: column !important;
-            }
-            .yt-video-section {
-                width: 100% !important;
-                flex: none !important;
-            }
-            .yt-sidebar-container {
-                width: 100% !important;
-                margin-top: 16px;
-            }
-        }
-
-        @media (max-width: 576px) {
-            .video-stats-row { flex-direction: column; align-items: flex-start; }
-            .video-actions { width: 100%; overflow-x: auto; justify-content: flex-start; }
-            .yt-main { padding: 12px !important; }
-
-            .video-container {
-                max-height: 50vh !important;
-                border-radius: 0 !important;
-            }
-            .video-container video {
-                object-fit: contain !important;
-            }
-            .video-title {
-                font-size: 16px !important;
-                margin: 12px 0 6px !important;
-            }
-            .channel-row {
-                flex-direction: column;
-                align-items: flex-start !important;
-                gap: 12px;
-            }
-            .channel-info {
-                width: 100%;
-            }
-            .subscribe-btn {
-                width: 100%;
-            }
-            .video-description {
-                padding: 12px !important;
-            }
-        }
-    </style>
+/* ===== Responsive ===== */
+@media (max-width: 1300px) {
+    .yt-sidebar-container { width: 300px; }
+    .events-sidebar { width: 300px; }
+}
+@media (max-width: 991px) {
+    .yt-main { margin-left: 0; flex-direction: column; }
+    .yt-sidebar-container { width: 100%; }
+    .sidebar-video-card { flex-direction: column; }
+    .sidebar-thumb { width: 100%; }
+    .events-sidebar { width: 100%; }
+    .video-layout-container {
+        flex-direction: column !important;
+    }
+    .yt-video-section {
+        width: 100% !important;
+        flex: none !important;
+    }
+    .yt-sidebar-container {
+        width: 100% !important;
+        margin-top: 16px;
+    }
+    .fighters-row {
+        grid-template-columns: 1fr !important;
+    }
+    .match-center {
+        order: -1;
+    }
+    .event-header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    .event-header-actions {
+        align-self: flex-end;
+        width: 100%;
+        justify-content: flex-end;
+    }
+}
+@media (max-width: 576px) {
+    .video-stats-row { flex-direction: column; align-items: flex-start; }
+    .video-actions { width: 100%; overflow-x: auto; justify-content: flex-start; }
+    .yt-main { padding: 12px !important; }
+    .video-container {
+        max-height: 50vh !important;
+        border-radius: 0 !important;
+    }
+    .video-container video {
+        object-fit: contain !important;
+    }
+    .video-title {
+        font-size: 16px !important;
+        margin: 12px 0 6px !important;
+    }
+    .channel-row {
+        flex-direction: column;
+        align-items: flex-start !important;
+        gap: 12px;
+    }
+    .channel-info {
+        width: 100%;
+    }
+    .subscribe-btn {
+        width: 100%;
+    }
+    .description-panel {
+        padding: 8px !important;
+    }
+    .match-card {
+        padding: 12px !important;
+    }
+    .event-header {
+        padding: 8px 0;
+    }
+    .event-text .title {
+        font-size: 1.1rem;
+    }
+    .event-header-actions {
+        gap: 4px;
+    }
+    .event-header-actions .action-btn {
+        padding: 6px 10px;
+        font-size: 0.75rem;
+    }
+}
+</style>
 @endsection
 
 @section('content')
+@php
+// ===== DUMMY DATA FALLBACKS =====
+$blueFighter = $blueFighter ?? (object)[
+    'name' => 'Sami Al Manea',
+    'flag' => '🇧🇭',
+    'photo' => 'https://takeone-dev.innovator.bh/storage/images/profiles/profile_5.png?v=1773157950',
+    'team' => 'Emperor TaeKwonDo Academy',
+    'country' => 'Bahrain',
+    'logo' => 'https://takeone-dev.innovator.bh/storage/clubs/1/branding/logo_1771488666.png',
+    'member_id' => 5,
+    'club_url' => 'https://takeone-dev.innovator.bh/mobile/eta',
+];
+$redFighter = $redFighter ?? (object)[
+    'name' => 'Hassan Al Shallan',
+    'flag' => '🇧🇭',
+    'photo' => 'https://takeone-dev.innovator.bh/storage/images/profiles/profile_11.png?t=1773268056907',
+    'team' => 'Legend TaeKwonDo Academy',
+    'country' => 'Bahrain',
+    'logo' => 'https://takeone-dev.innovator.bh/storage/clubs/logos/logo_1773267551.png',
+    'member_id' => 11,
+    'club_url' => 'https://takeone-dev.innovator.bh/clubs/legend-taekwondo-academy',
+];
+$match = $match ?? (object)[
+    'number' => '103',
+    'court' => '2',
+    'weight_category' => 'U18',
+    'score_blue' => 7,
+    'score_red' => 5,
+    'features' => 'Electronic scoring system (PSS & head‑gear) • Video replay available for head kicks and gam-jeom appeals',
+];
+$referee = $referee ?? (object)[
+    'name' => 'Ghassan Yusuf',
+    'flag' => '🇧🇭',
+    'photo' => 'https://takeone-dev.innovator.bh/storage/images/profiles/profile_8.png?t=1773267305519',
+    'member_id' => 4,
+];
+$championship = $championship ?? (object)[
+    'name' => 'Championship 2026',
+    'url' => '/championship/2026',
+];
+$venue = $venue ?? (object)[
+    'name' => 'Manama Sports Hall',
+    'map_link' => 'https://maps.google.com/?q=Manama+Sports+Hall+Bahrain',
+];
+@endphp
 
-    <!-- Video Layout Container -->
-    <div class="video-layout-container" style="display: flex; gap: 24px; max-width: 1800px; margin: 0 auto;">
+<!-- Video Layout Container -->
+<div class="video-layout-container" style="display: flex; gap: 24px; max-width: 1800px; margin: 0 auto;">
+    <!-- Video Section -->
+    <div class="yt-video-section">
+        <!-- Video Player -->
+        <div class="video-container @if(isset($video->orientation) && $video->orientation === 'portrait') portrait @elseif(isset($video->orientation) && $video->orientation === 'square') square @elseif(isset($video->orientation) && $video->orientation === 'ultrawide') ultrawide @endif" id="videoContainer">
+            <video id="videoPlayer" controls playsinline preload="metadata" autoplay>
+                <source src="{{ isset($video) ? route('videos.stream', $video->id) : '#' }}" type="video/mp4">
+            </video>
 
-        <!-- Video Section -->
-        <div class="yt-video-section">
-            <!-- Video Player -->
-            <div class="video-container @if($video->orientation === 'portrait') portrait @elseif($video->orientation === 'square') square @elseif($video->orientation === 'ultrawide') ultrawide @endif" id="videoContainer">
-                <video id="videoPlayer" controls playsinline preload="metadata" autoplay>
-                    <source src="{{ route('videos.stream', $video->id) }}" type="video/mp4">
-                </video>
+            <!-- Playlist Navigation Controls -->
+            @if(isset($nextVideo) || isset($previousVideo))
+            <div class="playlist-controls" id="playlistControls">
+                @if(isset($previousVideo))
+                <button class="playlist-nav-btn" onclick="goToPreviousVideo()" title="Previous video">
+                    <i class="bi bi-skip-backward-fill"></i>
+                </button>
+                <span class="playlist-nav-label">{{ Str::limit($previousVideo->title ?? 'Previous', 20) }}</span>
+                @else
+                <button class="playlist-nav-btn" disabled title="No previous video">
+                    <i class="bi bi-skip-backward-fill"></i>
+                </button>
+                @endif
 
-                <!-- Playlist Navigation Controls (only show when in playlist) -->
-                @if($nextVideo || $previousVideo)
-                <div class="playlist-controls" id="playlistControls">
-                    <!-- Previous Video -->
-                    @if($previousVideo)
-                    <button class="playlist-nav-btn" onclick="goToPreviousVideo()" title="Previous video">
-                        <i class="bi bi-skip-backward-fill"></i>
-                    </button>
-                    <span class="playlist-nav-label">{{ Str::limit($previousVideo->title, 20) }}</span>
-                    @else
-                    <button class="playlist-nav-btn" disabled title="No previous video">
-                        <i class="bi bi-skip-backward-fill"></i>
-                    </button>
-                    @endif
-
-                    <!-- Autoplay Toggle -->
-                    <div class="autoplay-toggle">
-                        <label for="autoplayToggle">Autoplay</label>
-                        <label class="autoplay-switch">
-                            <input type="checkbox" id="autoplayToggle" checked>
-                            <span class="autoplay-slider"></span>
-                        </label>
-                    </div>
-
-                    <!-- Next Video -->
-                    @if($nextVideo)
-                    <span class="playlist-nav-label">{{ Str::limit($nextVideo->title, 20) }}</span>
-                    <button class="playlist-nav-btn" onclick="goToNextVideo()" title="Next video">
-                        <i class="bi bi-skip-forward-fill"></i>
-                    </button>
-                    @else
-                    <button class="playlist-nav-btn" disabled title="No next video">
-                        <i class="bi bi-skip-forward-fill"></i>
-                    </button>
-                    @endif
-                </div>
-                <div class="keyboard-hint">
-                    <i class="bi bi-arrow-left"></i> <i class="bi bi-arrow-right"></i>
+                <div class="autoplay-toggle">
+                    <label for="autoplayToggle">Autoplay</label>
+                    <label class="autoplay-switch">
+                        <input type="checkbox" id="autoplayToggle" checked>
+                        <span class="autoplay-slider"></span>
+                    </label>
                 </div>
+
+                @if(isset($nextVideo))
+                <span class="playlist-nav-label">{{ Str::limit($nextVideo->title ?? 'Next', 20) }}</span>
+                <button class="playlist-nav-btn" onclick="goToNextVideo()" title="Next video">
+                    <i class="bi bi-skip-forward-fill"></i>
+                </button>
+                @else
+                <button class="playlist-nav-btn" disabled title="No next video">
+                    <i class="bi bi-skip-forward-fill"></i>
+                </button>
                 @endif
             </div>
-
-            <!-- Video Title with Trophy Icon (Match Type) -->
-            <h1 class="video-title" style="display: flex; align-items: center; gap: 10px; margin: 8px 0 6px;">
-                <i class="bi bi-trophy" style="color: #ef4444;"></i>
-                <span>{{ $video->title }}</span>
-            </h1>
-
-            <!-- Stats Row - Hidden, shown in description box -->
-            <div class="video-stats-row" style="display: none;">
-                <div class="video-stats-left">
-                    <span>{{ number_format($video->view_count) }} views</span>
-                    <span>•</span>
-                    <span>{{ $video->created_at->format('M d, Y') }}</span>
-                </div>
+            <div class="keyboard-hint">
+                <i class="bi bi-arrow-left"></i> <i class="bi bi-arrow-right"></i>
             </div>
+            @endif
+        </div>
 
-            <!-- Channel Row - All in one line -->
-            <div class="channel-row" style="display: flex; align-items: center; justify-content: space-between; padding: 12px 0; flex-wrap: wrap; gap: 16px;">
-                <div style="display: flex; align-items: center; gap: 12px;">
-                    <a href="{{ route('channel', $video->user_id) }}" class="channel-info text-decoration-none" style="color: inherit; display: flex; align-items: center; gap: 12px;">
-                        @if($video->user)
-                            <img src="{{ $video->user->avatar_url }}" class="channel-avatar" style="width: 40px; height: 40px; border-radius: 50%;" alt="{{ $video->user->name }}">
-                        @else
-                            <div class="channel-avatar" style="width: 40px; height: 40px; border-radius: 50%;"></div>
-                        @endif
-                        <div>
-                            <div class="channel-name" style="font-weight: 600;">{{ $video->user->name ?? 'Unknown' }}</div>
-                            <div class="channel-subs" style="font-size: 12px; color: var(--text-secondary);">{{ number_format($video->user->subscriber_count ?? 0) }} subscribers</div>
-                        </div>
+        <!-- ===== EVENT HEADER ===== -->
+        <div class="event-header">
+            <div class="event-header-left">
+                <div class="event-logo">
+                    <img src="https://picsum.photos/seed/event-logo/200/200" alt="Event logo">
+                </div>
+                <div class="event-text">
+                    <!-- Title with Trophy Icon BEFORE "Taekwondo Finals" -->
+                    <h1 class="title">
+                        <i class="bi bi-trophy trophy-icon" title="Match Type"></i>
+                        <span>Taekwondo Finals –</span>
+                        <span style="color: #2563eb; font-weight: bold">
+                            {{ $blueFighter->flag ?? '🇧🇭' }}
+                            <a href="https://takeone-dev.innovator.bh/member/{{ $blueFighter->member_id ?? 5 }}"
+                               title="View {{ $blueFighter->name ?? 'Sami Al Manea' }}'s profile">
+                                {{ $blueFighter->name ?? 'Sami Al Manea' }}
+                            </a>
+                        </span>
+                        <span>vs</span>
+                        <span style="color: #ef4444; font-weight: bold">
+                            {{ $redFighter->flag ?? '🇧🇭' }}
+                            <a href="https://takeone-dev.innovator.bh/member/{{ $redFighter->member_id ?? 11 }}"
+                               title="View {{ $redFighter->name ?? 'Hassan Al Shallan' }}'s profile">
+                                {{ $redFighter->name ?? 'Hassan Al Shallan' }}
+                            </a>
+                        </span>
+                        <span>({{ $match->weight_category ?? 'U18' }})</span>
+                    </h1>
+
+                    <!-- Meta: Championship Link • Match# • Court • Referee (all inline) -->
+                    <a class="meta-link" href="{{ $championship->url ?? '/championship/2026' }}" style="white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; line-height: 1.4;">
+                        <span style="color: #ffffff; font-weight: bold; font-size: 0.85rem;">{{ $championship->name ?? 'Championship 2026' }}</span>
+                        <span style="color: var(--text-secondary);">•</span>
+                        <span style="color: #ff00dd; font-weight: bold; font-size: 0.85rem;">Match# {{ $match->number ?? '103' }}</span>
+                        <span style="color: var(--text-secondary);">•</span>
+                        <span style="color: #00af09; font-weight: bold; font-size: 0.85rem;">Court {{ $match->court ?? '2' }}</span>
+                        <span style="color: var(--text-secondary);">•</span>
+                        <span style="color: #ffd900; font-weight: bold; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 2px;">
+                            {{ $referee->flag ?? '🇧🇭' }} {{ $referee->name ?? 'Ghassan Yusuf' }}
+                        </span>
                     </a>
                 </div>
-
-                <div class="video-actions" style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
-                    @auth
-                        @if(Auth::id() !== $video->user_id)
-                            <button class="subscribe-btn">Subscribe</button>
-                        @else
-                            <button class="yt-action-btn" onclick="openEditVideoModal({{ $video->id }})">
-                                <i class="bi bi-pencil"></i> Edit
-                            </button>
-                        @endif
-                    @else
-                        <a href="{{ route('login') }}" class="subscribe-btn">Subscribe</a>
-                    @endauth
-
-                    @auth
-                        <form method="POST" action="{{ $video->isLikedBy(Auth::user()) ? route('videos.unlike', $video->id) : route('videos.like', $video->id) }}" class="d-inline">
-                            @csrf
-                            <button type="submit" class="yt-action-btn {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}">
-                                <i class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}"></i>
-                                {{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}
-                            </button>
-                        </form>
-                    @else
-                        <a href="{{ route('login') }}" class="yt-action-btn">
-                            <i class="bi bi-hand-thumbs-up"></i> Like
-                        </a>
-                    @endauth
-
-                    @if($video->isShareable())
-                        <button class="yt-action-btn" onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}')">
-                            <i class="bi bi-share"></i> Share
-                        </button>
-                    @endif
-                </div>
             </div>
 
-            <!-- Description Box -->
-            @if($video->description)
-            @php
-                $fullDescription = $video->description;
-                $shortDescription = Str::limit($fullDescription, 200);
-                $needsExpand = strlen($fullDescription) > 200;
-            @endphp
-
-            <div class="video-description-box" style="background: var(--bg-secondary); border-radius: 12px; padding: 12px; margin-bottom: 16px;">
-                <div class="description-stats" style="font-size: 14px; font-weight: 500; margin-bottom: 8px;">
-                    <span>{{ number_format($video->view_count) }} views</span>
-                    <span>•</span>
-                    <span>{{ $video->created_at->format('M d, Y') }}</span>
-                </div>
-                <div style="border-bottom: 1px solid var(--border-color); margin: 8px 0;"></div>
-                <div class="description-content" id="descriptionContent">
-                    @if($needsExpand)
-                        <div class="description-short" id="descShort">
-                            <span class="description-text">{!! Str::markdown($shortDescription) !!}</span>
-                            <span class="description-ellipsis" style="color: var(--text-secondary);">... </span>
-                        </div>
-                        <div class="description-full" id="descFull" style="display: none;">
-                            <span class="description-text">{!! Str::markdown($fullDescription) !!}</span>
-                        </div>
-                        <button onclick="toggleDescription()" id="descToggleBtn" style="background: none; border: none; color: var(--text-primary); font-weight: 600; font-size: 14px; cursor: pointer; padding: 0; margin-top: 4px;">
-                            Show more
-                        </button>
-                    @else
-                        <span class="description-text">{!! Str::markdown($fullDescription) !!}</span>
-                    @endif
-                </div>
-            </div>
-
-            <script>
-            function toggleDescription() {
-                const descShort = document.getElementById('descShort');
-                const descFull = document.getElementById('descFull');
-                const toggleBtn = document.getElementById('descToggleBtn');
-
-                if (descShort.style.display !== 'none') {
-                    descShort.style.display = 'none';
-                    descFull.style.display = 'block';
-                    toggleBtn.textContent = 'Show less';
-                } else {
-                    descShort.style.display = 'block';
-                    descFull.style.display = 'none';
-                    toggleBtn.textContent = 'Show more';
-                }
-            }
-            </script>
-
-            <style>
-            .video-description-box .description-text { font-size: 14px; line-height: 1.5; color: var(--text-primary); }
-            .video-description-box .description-text p { margin-bottom: 8px; }
-            .video-description-box .description-text a { color: #3ea6ff; }
-            </style>
-            @endif
-
-            <!-- Comment Section -->
-            <div class="comments-section" style="margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-color);">
-                <h3 style="font-size: 18px; font-weight: 600; margin-bottom: 16px;">
-                    Comments <span style="color: var(--text-secondary); font-weight: 400;">({{ $video->comment_count }})</span>
-                </h3>
-
+            <div class="event-header-actions">
+                <!-- Like Button -->
                 @auth
-                    <div class="comment-form" style="display: flex; gap: 12px; margin-bottom: 24px;">
-                        <img src="{{ Auth::user()->avatar_url }}" class="channel-avatar" style="width: 40px; height: 40px;" alt="{{ Auth::user()->name }}">
-                        <div style="flex: 1;">
-                            <textarea
-                                id="commentBody"
-                                class="form-control"
-                                placeholder="Add a comment... Use @ to mention someone"
-                                rows="3"
-                                style="background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 8px; padding: 12px; width: 100%; resize: none;"
-                            ></textarea>
-                            <div style="display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end;">
-                                <button type="button" class="yt-action-btn" onclick="document.getElementById('commentBody').value = ''">Cancel</button>
-                                <button type="button" class="yt-action-btn" style="background: var(--brand-red); color: white;" onclick="submitComment({{ $video->id }})">Comment</button>
-                            </div>
-                        </div>
-                    </div>
+                @if(isset($video))
+                <form method="POST" action="{{ $video->isLikedBy(Auth::user()) ? route('videos.unlike', $video->id) : route('videos.like', $video->id) }}" class="d-inline">
+                    @csrf
+                    <button type="submit" class="action-btn {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}" title="Like">
+                        <i class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}"></i>
+                        <span>{{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}</span>
+                    </button>
+                </form>
+                @endif
                 @else
-                    <div style="margin-bottom: 24px; padding: 16px; background: var(--bg-secondary); border-radius: 8px; text-align: center;">
-                        <a href="{{ route('login') }}" style="color: var(--brand-red);">Sign in</a> to comment
-                    </div>
+                <a href="{{ route('login') }}" class="action-btn" title="Like">
+                    <i class="bi bi-hand-thumbs-up"></i>
+                    <span>Like</span>
+                </a>
                 @endauth
 
-                <div id="commentsList">
-                    @forelse($video->comments()->whereNull('parent_id')->with('user', 'replies.user')->latest()->get() as $comment)
-                        @include('videos.partials.comment', ['comment' => $comment])
-                    @empty
-                        <p style="color: var(--text-secondary); text-align: center; padding: 20px;">No comments yet. Be the first to comment!</p>
-                    @endforelse
-                </div>
+                <!-- Subscribe Button -->
+                @auth
+                @if(isset($video) && $video->user && Auth::id() !== $video->user_id)
+                <button class="action-btn {{ isset($video) && $video->user && $video->user->isSubscribedBy(Auth::user()) ? 'subscribed' : '' }}"
+                        type="button"
+                        title="{{ isset($video) && $video->user && $video->user->isSubscribedBy(Auth::user()) ? 'Subscribed' : 'Subscribe' }}"
+                        onclick="toggleSubscribe({{ $video->user_id ?? 0 }})">
+                    <i class="bi {{ isset($video) && $video->user && $video->user->isSubscribedBy(Auth::user()) ? 'bi-bell-fill' : 'bi-bell' }}"></i>
+                    <span>{{ isset($video) && $video->user && $video->user->isSubscribedBy(Auth::user()) ? 'Subscribed' : 'Subscribe' }}</span>
+                </button>
+                @endif
+                @else
+                <a href="{{ route('login') }}" class="action-btn" title="Subscribe">
+                    <i class="bi bi-bell"></i>
+                    <span>Subscribe</span>
+                </a>
+                @endauth
+
+                <!-- Share Button -->
+                @if(isset($video) && $video->isShareable())
+                <button class="action-btn" type="button" id="shareVideoBtn" title="Share">
+                    <i class="bi bi-share"></i>
+                    <span>Share</span>
+                </button>
+                @endif
+
+                <!-- Save Button -->
+                <button class="action-btn" type="button" title="Save">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
+                    </svg>
+                    <span>Save</span>
+                </button>
             </div>
-
-            <script>
-            function submitComment(videoId) {
-                const body = document.getElementById('commentBody').value.trim();
-                if (!body) return;
-
-                fetch(`/videos/${videoId}/comments`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                    },
-                    body: JSON.stringify({ body: body })
-                })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        document.getElementById('commentBody').value = '';
-                        location.reload();
-                    }
-                });
-            }
-
-            function deleteComment(commentId) {
-                if (!confirm('Are you sure you want to delete this comment?')) return;
-
-                fetch(`/comments/${commentId}`, {
-                    method: 'DELETE',
-                    headers: {
-                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                    }
-                })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        location.reload();
-                    }
-                });
-            }
-
-            document.addEventListener('DOMContentLoaded', function() {
-                const commentTexts = document.querySelectorAll('.comment-body');
-                commentTexts.forEach(text => {
-                    const html = text.innerHTML.replace(/@(\w+)/g, '<span style="color: #3ea6ff; font-weight: 500;">@$1</span>');
-                    text.innerHTML = html;
-                });
-            });
-
-            function submitReply(videoId, parentId) {
-                const textarea = document.querySelector(`#replyForm${parentId} textarea`);
-                const body = textarea.value.trim();
-                if (!body) return;
-
-                fetch(`/videos/${videoId}/comments`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                    },
-                    body: JSON.stringify({ body: body, parent_id: parentId })
-                })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        location.reload();
-                    }
-                });
-            }
-            </script>
         </div>
+        <!-- ===== END EVENT HEADER ===== -->
 
-        <!-- Sidebar - Up Next / Recommendations -->
-        <div class="yt-sidebar-container">
-            @if($playlist && $playlistVideos && $playlistVideos->count() > 0)
-                <h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">
-                    <i class="bi bi-collection-play" style="margin-right: 8px;"></i>
-                    {{ $playlist->name }}
-                    <span style="font-weight: 400; color: var(--text-secondary); font-size: 14px;">({{ $playlistVideos->count() }} videos)</span>
-                </h3>
-                <div class="recommended-videos-list">
-                    @foreach($playlistVideos as $index => $playlistVideo)
-                        @if($playlistVideo->id !== $video->id)
-                        <div class="sidebar-video-card{{ $playlistVideo->id === $video->id ? ' current-video' : '' }}"
-                            onclick="window.location.href='{{ route('videos.show', $playlistVideo->id) }}?playlist={{ $playlist->id }}'">
-                            <div class="sidebar-thumb" style="position: relative;">
-                                @if ($playlistVideo->thumbnail)
-                                    <img src="{{ asset('storage/thumbnails/' . $playlistVideo->thumbnail) }}" alt="{{ $playlistVideo->title }}">
-                                @else
-                                    <img src="https://picsum.photos/seed/{{ $playlistVideo->id }}/320/180" alt="{{ $playlistVideo->title }}">
-                                @endif
-                                @if ($playlistVideo->duration)
-                                    <span class="yt-video-duration">{{ gmdate('i:s', $playlistVideo->duration) }}</span>
-                                @endif
-                                @if ($playlistVideo->is_shorts)
-                                    <span class="yt-shorts-badge" style="position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 2px 6px;">
-                                        <i class="bi bi-collection-play-fill"></i> SHORTS
-                                    </span>
-                                @endif
-                                <!-- Playlist position indicator -->
-                                <span style="position: absolute; bottom: 4px; left: 4px; background: rgba(0,0,0,0.8); color: white; padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight: 500;">
-                                    {{ $index + 1 }}
-                                </span>
+        <!-- Description Box (Collapsible) -->
+        @if(isset($video) && $video->description)
+        @php
+        $fullDescription = $video->description;
+        $shortDescription = Str::limit($fullDescription, 200);
+        $needsExpand = strlen($fullDescription) > 200;
+        @endphp
+
+        <section class="description-panel">
+            <button class="description-toggle" type="button" id="toggleDescription">
+                <span id="descriptionToggleLabel">{{ $needsExpand ? 'Show description' : 'Hide description' }}</span>
+                <span id="descriptionToggleIcon">{{ $needsExpand ? '▼' : '▲' }}</span>
+            </button>
+
+            <div class="description-body {{ $needsExpand ? '' : 'open' }}" id="descriptionBody">
+                <!-- Match Card -->
+                <section class="match-card">
+                    <div class="match-header">
+                        <div class="match-label">Final • Male -63kg division</div>
+                    </div>
+
+                    <div class="fighters-row">
+                        <!-- Blue Fighter (Sami Al Manea) -->
+                        <article class="fighter-card">
+                            <div class="fighter-top">
+                                <!-- Fighter Photo - Links to Member Profile -->
+                                <a href="https://takeone-dev.innovator.bh/member/{{ $blueFighter->member_id ?? 5 }}"
+                                   title="View {{ $blueFighter->name ?? 'Sami Al Manea' }}'s profile"
+                                   style="text-decoration: none; color: inherit;">
+                                    <div class="fighter-photo">
+                                        <img src="{{ $blueFighter->photo ?? 'https://picsum.photos/seed/blue-competitor/200/260' }}"
+                                             alt="{{ $blueFighter->name ?? 'Blue fighter' }}">
+                                    </div>
+                                </a>
+                                <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+                                    <!-- Fighter Logo - Links to Club Page -->
+                                    <a href="{{ $blueFighter->club_url ?? 'https://takeone-dev.innovator.bh/mobile/eta' }}"
+                                       title="View {{ $blueFighter->team ?? 'Emperor TaeKwonDo Academy' }}"
+                                       style="text-decoration: none; color: inherit;">
+                                        <div class="fighter-logo">
+                                            <img src="{{ $blueFighter->logo ?? 'https://picsum.photos/seed/blue-logo/160/160' }}"
+                                                 alt="{{ $blueFighter->team ?? 'Blue team' }} logo">
+                                        </div>
+                                    </a>
+                                    <span class="fighter-badge blue">Blue</span>
+                                </div>
                             </div>
-                            <div class="sidebar-info">
-                                <div class="sidebar-title">
-                                    <i class="bi {{ match ($playlistVideo->type) {'music' => 'bi-music-note','match' => 'bi-trophy',default => 'bi-film'} }}"
-                                        style="color: #ef4444; margin-right: 4px; font-size: 12px;"></i>
-                                    {{ Str::limit($playlistVideo->title, 60) }}
+                            <div class="fighter-info">
+                                <!-- Fighter Name - Links to Member Profile -->
+                                <div class="fighter-name blue-corner">
+                                    <a href="https://takeone-dev.innovator.bh/member/{{ $blueFighter->member_id ?? 5 }}"
+                                       title="View {{ $blueFighter->name ?? 'Sami Al Manea' }}'s profile">
+                                        {{ $blueFighter->name ?? 'Sami Al Manea' }}
+                                    </a>
                                 </div>
-                                <div class="sidebar-meta">
-                                    <div>{{ $playlistVideo->user->name ?? 'Unknown' }}</div>
-                                    <div>{{ number_format($playlistVideo->view_count) }} views • {{ $playlistVideo->created_at->diffForHumans() }}</div>
+                                <!-- Fighter Team - Links to Club Page -->
+                                <div class="fighter-team">
+                                    <a href="{{ $blueFighter->club_url ?? 'https://takeone-dev.innovator.bh/mobile/eta' }}"
+                                       title="View {{ $blueFighter->team ?? 'Emperor TaeKwonDo Academy' }}">
+                                        {{ $blueFighter->team ?? 'Emperor TaeKwonDo Academy' }}
+                                    </a>
                                 </div>
+                                <div class="fighter-country">
+                                    <span class="fighter-country-flag">{{ $blueFighter->flag ?? '🇧🇭' }}</span>
+                                    <span>{{ $blueFighter->country ?? 'Bahrain' }}</span>
+                                </div>
+                            </div>
+                        </article>
+
+                        <!-- Score & Referee Center -->
+                        <div class="match-center">
+                            <div class="score-pill">
+                                <span class="score-number">{{ $match->score_blue ?? 7 }}</span>
+                                <span class="score-label">Final score</span>
+                                <span class="score-number">{{ $match->score_red ?? 5 }}</span>
+                            </div>
+                            <div class="referee-block">
+                                <!-- Referee Photo - Links to Member Profile -->
+                                <a href="https://takeone-dev.innovator.bh/member/{{ $referee->member_id ?? 4 }}"
+                                   title="View {{ $referee->name ?? 'Ghassan Yusuf' }}'s profile"
+                                   style="text-decoration: none; color: inherit;">
+                                    <div class="referee-photo">
+                                        <img src="{{ $referee->photo ?? 'https://picsum.photos/seed/referee/200/260' }}" alt="Referee">
+                                    </div>
+                                </a>
+                                <div style="color: #ffd900; font-weight: bold">
+                                    <a href="https://takeone-dev.innovator.bh/member/{{ $referee->member_id ?? 4 }}"
+                                       style="color: inherit; text-decoration: none;"
+                                       title="View {{ $referee->name ?? 'Ghassan Yusuf' }}'s profile">
+                                        {{ $referee->name ?? 'Ghassan Yusuf' }}
+                                    </a>
+                                </div>
+                                <div class="ref-label">Center Referee</div>
                             </div>
                         </div>
-                        @endif
-                    @endforeach
-                </div>
-                @if($playlist->canEdit(Auth::user()))
-                    <a href="{{ route('playlists.show', $playlist->id) }}" class="yt-action-btn" style="margin-top: 12px; display: inline-block;">
-                        <i class="bi bi-pencil"></i> Edit Playlist
-                    </a>
-                @endif
-            @else
-                <h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">Up Next</h3>
-                @if($recommendedVideos && $recommendedVideos->count() > 0)
-                    <div class="recommended-videos-list">
-                        @foreach($recommendedVideos as $recVideo)
-                            <div class="sidebar-video-card" onclick="window.location.href='{{ route('videos.show', $recVideo->id) }}'">
-                                <div class="sidebar-thumb">
-                                    @if($recVideo->thumbnail)
-                                        <img src="{{ asset('storage/thumbnails/' . $recVideo->thumbnail) }}" alt="{{ $recVideo->title }}">
-                                    @else
-                                        <img src="https://picsum.photos/seed/{{ $recVideo->id }}/320/180" alt="{{ $recVideo->title }}">
-                                    @endif
-                                    @if($recVideo->duration)
-                                        <span class="yt-video-duration">{{ gmdate('i:s', $recVideo->duration) }}</span>
-                                    @endif
+
+                        <!-- Red Fighter (Hassan Al Shallan) -->
+                        <article class="fighter-card">
+                            <div class="fighter-top">
+                                <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+                                    <!-- Fighter Logo - Links to Club Page -->
+                                    <a href="{{ $redFighter->club_url ?? 'https://takeone-dev.innovator.bh/clubs/legend-taekwondo-academy' }}"
+                                       title="View {{ $redFighter->team ?? 'Legend TaeKwonDo Academy' }}"
+                                       style="text-decoration: none; color: inherit;">
+                                        <div class="fighter-logo">
+                                            <img src="{{ $redFighter->logo ?? 'https://picsum.photos/seed/red-logo/160/160' }}"
+                                                 alt="{{ $redFighter->team ?? 'Red team' }} logo">
+                                        </div>
+                                    </a>
+                                    <span class="fighter-badge red">Red</span>
                                 </div>
-                                <div class="sidebar-info">
-                                    <div class="sidebar-title">
-                                        <i class="bi {{ match($recVideo->type) { 'music' => 'bi-music-note', 'match' => 'bi-trophy', default => 'bi-film' } }}" style="color: #ef4444; margin-right: 4px; font-size: 12px;"></i>
-                                        {{ Str::limit($recVideo->title, 60) }}
-                                    </div>
-                                    <div class="sidebar-meta">
-                                        <div>{{ $recVideo->user->name ?? 'Unknown' }}</div>
-                                        <div>{{ number_format($recVideo->view_count) }} views • {{ $recVideo->created_at->diffForHumans() }}</div>
+                                <!-- Fighter Photo - Links to Member Profile -->
+                                <a href="https://takeone-dev.innovator.bh/member/{{ $redFighter->member_id ?? 11 }}"
+                                   title="View {{ $redFighter->name ?? 'Hassan Al Shallan' }}'s profile"
+                                   style="text-decoration: none; color: inherit;">
+                                    <div class="fighter-photo">
+                                        <img src="{{ $redFighter->photo ?? 'https://picsum.photos/seed/red-competitor/200/260' }}"
+                                             alt="{{ $redFighter->name ?? 'Red fighter' }}">
                                     </div>
+                                </a>
+                            </div>
+                            <div class="fighter-info">
+                                <!-- Fighter Name - Links to Member Profile -->
+                                <div class="fighter-name red-corner">
+                                    <a href="https://takeone-dev.innovator.bh/member/{{ $redFighter->member_id ?? 11 }}"
+                                       title="View {{ $redFighter->name ?? 'Hassan Al Shallan' }}'s profile">
+                                        {{ $redFighter->name ?? 'Hassan Al Shallan' }}
+                                    </a>
+                                </div>
+                                <!-- Fighter Team - Links to Club Page -->
+                                <div class="fighter-team">
+                                    <a href="{{ $redFighter->club_url ?? 'https://takeone-dev.innovator.bh/clubs/legend-taekwondo-academy' }}"
+                                       title="View {{ $redFighter->team ?? 'Legend TaeKwonDo Academy' }}">
+                                        {{ $redFighter->team ?? 'Legend TaeKwonDo Academy' }}
+                                    </a>
+                                </div>
+                                <div class="fighter-country">
+                                    <span class="fighter-country-flag">{{ $redFighter->flag ?? '🇧🇭' }}</span>
+                                    <span>{{ $redFighter->country ?? 'Bahrain' }}</span>
                                 </div>
                             </div>
-                        @endforeach
+                        </article>
                     </div>
-                @else
-                    <div class="text-secondary">More videos coming soon...</div>
+
+                    <div class="match-footer">
+                        <a class="hall-link" id="hallLink" title="View venue details" href="{{ $venue->map_link ?? 'https://maps.google.com/?q=Manama+Sports+Hall+Bahrain' }}" target="_blank" rel="noopener noreferrer">
+                            📍 {{ $venue->name ?? 'Manama Sports Hall' }}
+                        </a>
+                        @if(isset($match->features))
+                        • {{ $match->features }}
+                        @endif
+                    </div>
+                </section>
+
+                <!-- Match Overview -->
+                <section class="markdown-body">
+                    <div style="display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px;">
+                        <h2 style="font-size: 1.05rem; margin: 0;">Match Overview</h2>
+                        @if(isset($video) && $video->user)
+                        <div class="video-owner-badge" style="display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-secondary);">
+                            <img src="{{ $video->user->avatar_url }}" class="owner-avatar" style="width: 20px; height: 20px; border-radius: 50%; object-fit: cover;" alt="{{ $video->user->name }}">
+                            <span class="owner-name" style="color: var(--text-primary); font-weight: 500;">{{ $video->user->name }}</span>
+                            <span>• {{ number_format($video->user->subscriber_count ?? 0) }} subscribers</span>
+                        </div>
+                        @endif
+                    </div>
+                    <div class="description-text">
+                        {!! Str::markdown($fullDescription) !!}
+                    </div>
+                </section>
+            </div>
+        </section>
+
+        <script>
+        // Collapsible Description Toggle
+        const descriptionBody = document.getElementById('descriptionBody');
+        const descriptionToggle = document.getElementById('toggleDescription');
+        const descriptionToggleLabel = document.getElementById('descriptionToggleLabel');
+        const descriptionToggleIcon = document.getElementById('descriptionToggleIcon');
+
+        if (descriptionToggle && descriptionBody) {
+            descriptionToggle.addEventListener('click', () => {
+                const isOpen = descriptionBody.classList.toggle('open');
+                descriptionToggleLabel.textContent = isOpen ? 'Hide description' : 'Show description';
+                descriptionToggleIcon.textContent = isOpen ? '▲' : '▼';
+            });
+        }
+
+        // Hall/Venue Link Handler
+        const hallLink = document.getElementById('hallLink');
+        if (hallLink) {
+            hallLink.addEventListener('click', () => {
+                // Analytics tracking can be added here
+            });
+        }
+        </script>
+        @endif
+
+        <!-- Comment Section -->
+        <div class="comments-section" style="margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-color);">
+            <h3 style="font-size: 18px; font-weight: 600; margin-bottom: 16px;">
+                Comments <span style="color: var(--text-secondary); font-weight: 400;">({{ isset($video) ? ($video->comment_count ?? 0) : 0 }})</span>
+            </h3>
+            @auth
+            <div class="comment-form" style="display: flex; gap: 12px; margin-bottom: 24px;">
+                <img src="{{ Auth::user()->avatar_url }}" class="channel-avatar" style="width: 40px; height: 40px;" alt="{{ Auth::user()->name }}">
+                <div style="flex: 1;">
+                    <textarea
+                        id="commentBody"
+                        class="form-control"
+                        placeholder="Add a comment... Use @ to mention someone"
+                        rows="3"
+                        style="background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 8px; padding: 12px; width: 100%; resize: none;"
+                    ></textarea>
+                    <div style="display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end;">
+                        <button type="button" class="yt-action-btn" onclick="document.getElementById('commentBody').value = ''">Cancel</button>
+                        <button type="button" class="yt-action-btn" style="background: var(--brand-red); color: white;" onclick="submitComment({{ isset($video) ? $video->id : 0 }})">Comment</button>
+                    </div>
+                </div>
+            </div>
+            @else
+            <div style="margin-bottom: 24px; padding: 16px; background: var(--bg-secondary); border-radius: 8px; text-align: center;">
+                <a href="{{ route('login') }}" style="color: var(--brand-red);">Sign in</a> to comment
+            </div>
+            @endauth
+            <div id="commentsList">
+                @if(isset($video))
+                @forelse($video->comments()->whereNull('parent_id')->with('user', 'replies.user')->latest()->get() as $comment)
+                @include('videos.partials.comment', ['comment' => $comment])
+                @empty
+                <p style="color: var(--text-secondary); text-align: center; padding: 20px;">No comments yet. Be the first to comment!</p>
+                @endforelse
                 @endif
-            @endif
+            </div>
         </div>
 
-    </div>
-
-    @include('layouts.partials.share-modal')
-    @include('layouts.partials.edit-video-modal')
-
-    @if(Session::has('openEditModal') && Session::get('openEditModal'))
-    @auth
-    <script>
+        <script>
+        function submitComment(videoId) {
+            const body = document.getElementById('commentBody').value.trim();
+            if (!body) return;
+            fetch(`/videos/${videoId}/comments`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                },
+                body: JSON.stringify({ body: body })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    document.getElementById('commentBody').value = '';
+                    location.reload();
+                }
+            });
+        }
+        function deleteComment(commentId) {
+            if (!confirm('Are you sure you want to delete this comment?')) return;
+            fetch(`/comments/${commentId}`, {
+                method: 'DELETE',
+                headers: {
+                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                }
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    location.reload();
+                }
+            });
+        }
         document.addEventListener('DOMContentLoaded', function() {
-            openEditVideoModal({{ $video->id }});
-        });
-    </script>
-    @endauth
-    @endif
-
-    <script>
-        // Playlist navigation URLs
-        const previousVideoUrl = @json($previousVideo ? route('videos.show', $previousVideo->id) . '?playlist=' . $playlist->id : null);
-        const nextVideoUrl = @json($nextVideo ? route('videos.show', $nextVideo->id) . '?playlist=' . $playlist->id : null);
-
-        // Autoplay management
-        let autoplayEnabled = true;
-
-        document.addEventListener('DOMContentLoaded', function() {
-            var videoPlayer = document.getElementById('videoPlayer');
-            var playlistControls = document.getElementById('playlistControls');
-            var autoplayToggle = document.getElementById('autoplayToggle');
-
-            if (videoPlayer) {
-                videoPlayer.volume = 0.5;
-                var playPromise = videoPlayer.play();
-                if (playPromise !== undefined) {
-                    playPromise.then(function() { console.log('Video autoplayed'); }).catch(function(error) { console.log('Autoplay blocked'); });
-                }
-
-                // Handle video ended - autoplay next
-                if (nextVideoUrl) {
-                    videoPlayer.addEventListener('ended', function() {
-                        if (autoplayEnabled) {
-                            console.log('Video ended, going to next...');
-                            window.location.href = nextVideoUrl;
-                        }
-                    });
-                }
-            }
-
-            // Show playlist controls on hover
-            if (playlistControls) {
-                const videoContainer = document.getElementById('videoContainer');
-                videoContainer.addEventListener('mouseenter', function() {
-                    playlistControls.classList.add('visible');
-                });
-                videoContainer.addEventListener('mouseleave', function() {
-                    playlistControls.classList.remove('visible');
-                });
-
-                // Initially show for a few seconds
-                setTimeout(function() { playlistControls.classList.add('visible'); }, 2000);
-                setTimeout(function() { playlistControls.classList.remove('visible'); }, 6000);
-            }
-
-            // Autoplay toggle handler
-            if (autoplayToggle) {
-                autoplayToggle.addEventListener('change', function() {
-                    autoplayEnabled = this.checked;
-                    localStorage.setItem('playlistAutoplay', autoplayEnabled ? '1' : '0');
-                });
-
-                // Load saved preference
-                const savedAutoplay = localStorage.getItem('playlistAutoplay');
-                if (savedAutoplay !== null) {
-                    autoplayEnabled = savedAutoplay === '1';
-                    autoplayToggle.checked = autoplayEnabled;
-                }
-            }
-
-            // Keyboard navigation
-            document.addEventListener('keydown', function(e) {
-                if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') { return; }
-                if (e.key === 'ArrowLeft') { e.preventDefault(); goToPreviousVideo(); }
-                else if (e.key === 'ArrowRight') { e.preventDefault(); goToNextVideo(); }
+            const commentTexts = document.querySelectorAll('.comment-body');
+            commentTexts.forEach(text => {
+                const html = text.innerHTML.replace(/@(\w+)/g, '<span style="color: #3ea6ff; font-weight: 500;">@$1</span>');
+                text.innerHTML = html;
             });
         });
-
-        function goToPreviousVideo() {
-            if (previousVideoUrl) { window.location.href = previousVideoUrl; }
+        function submitReply(videoId, parentId) {
+            const textarea = document.querySelector(`#replyForm${parentId} textarea`);
+            const body = textarea.value.trim();
+            if (!body) return;
+            fetch(`/videos/${videoId}/comments`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                },
+                body: JSON.stringify({ body: body, parent_id: parentId })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    location.reload();
+                }
+            });
         }
+        </script>
+    </div>
 
-        function goToNextVideo() {
-            if (nextVideoUrl) { window.location.href = nextVideoUrl; }
+    <!-- Sidebar - Match Highlights -->
+    <div class="yt-sidebar-container">
+        <aside class="events-sidebar">
+            <div class="events-sidebar-header" style="justify-content: center;">
+                <h3>Match Highlights</h3>
+            </div>
+            <div class="tab-header">
+                <button class="tab-button active" data-tab="official">Points</button>
+                <button class="tab-button" data-tab="review">Coach review</button>
+            </div>
+            <div class="tab-panels">
+                <!-- Points Tab -->
+                <div class="tab-panel active" id="tab-official">
+                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
+                        <div>
+                            <div class="section-label">Rounds & points</div>
+                        </div>
+                        @auth
+                        @if(isset($video) && Auth::id() === $video->user_id)
+                        <button class="btn-add" type="button" onclick="openAddRoundModal()">
+                            <span>+</span> Add Round
+                        </button>
+                        @endif
+                        @endauth
+                    </div>
+                    <div class="event-list" id="officialEvents">
+                        <!-- Round markers and points (unchanged) -->
+                        <div class="round-marker" data-round="1">
+                            <span class="round-badge">ROUND 1</span>
+                            @auth
+                            @if(isset($video) && Auth::id() === $video->user_id)
+                            <div class="round-actions">
+                                <button class="round-action-btn" onclick="openAddPointModal(1)" title="Add point">+</button>
+                                <button class="round-action-btn" onclick="editRound(1)" title="Edit round">✏️</button>
+                                <button class="round-action-btn" onclick="deleteRound(1)" title="Delete round">🗑️</button>
+                            </div>
+                            @endif
+                            @endauth
+                        </div>
+                        <div class="event-item" data-time-start="20" data-round="1" data-id="pt1">
+                            <div class="event-time">@00:20</div>
+                            <div>
+                                <div class="event-label">
+                                    Blue body kick (1 pt)
+                                    <span class="pill pill-blue">Blue</span>
+                                </div>
+                                <div class="event-meta">
+                                    Round 1 • Score 1 – 0 • Clean contact.
+                                </div>
+                            </div>
+                            @auth
+                            @if(isset($video) && Auth::id() === $video->user_id)
+                            <div class="event-actions">
+                                <button class="event-action-btn" onclick="editPoint('pt1')" title="Edit">✏️</button>
+                                <button class="event-action-btn delete" onclick="deletePoint('pt1')" title="Delete">🗑️</button>
+                            </div>
+                            @endif
+                            @endauth
+                        </div>
+                        <div class="event-item" data-time-start="45" data-round="1" data-id="pt2">
+                            <div class="event-time">@00:45</div>
+                            <div>
+                                <div class="event-label">
+                                    Blue scores body kick
+                                    <span class="pill pill-blue">Blue</span>
+                                </div>
+                                <div class="event-meta">
+                                    Round 1 • Score 2 – 0 • Judge: Central.
+                                </div>
+                            </div>
+                            @auth
+                            @if(isset($video) && Auth::id() === $video->user_id)
+                            <div class="event-actions">
+                                <button class="event-action-btn" onclick="editPoint('pt2')" title="Edit">✏️</button>
+                                <button class="event-action-btn delete" onclick="deletePoint('pt2')" title="Delete">🗑️</button>
+                            </div>
+                            @endif
+                            @endauth
+                        </div>
+                        <div class="round-marker" data-round="2">
+                            <span class="round-badge">ROUND 2</span>
+                            @auth
+                            @if(isset($video) && Auth::id() === $video->user_id)
+                            <div class="round-actions">
+                                <button class="round-action-btn" onclick="openAddPointModal(2)" title="Add point">+</button>
+                                <button class="round-action-btn" onclick="editRound(2)" title="Edit round">✏️</button>
+                                <button class="round-action-btn" onclick="deleteRound(2)" title="Delete round">🗑️</button>
+                            </div>
+                            @endif
+                            @endauth
+                        </div>
+                        <div class="event-item" data-time-start="90" data-round="2" data-id="pt3">
+                            <div class="event-time">@01:30</div>
+                            <div>
+                                <div class="event-label">
+                                    Red head kick (3 pts)
+                                    <span class="pill pill-red">Red</span>
+                                </div>
+                                <div class="event-meta">
+                                    Round 2 • Score 2 – 3 • Video replay requested.
+                                </div>
+                            </div>
+                            @auth
+                            @if(isset($video) && Auth::id() === $video->user_id)
+                            <div class="event-actions">
+                                <button class="event-action-btn" onclick="editPoint('pt3')" title="Edit">✏️</button>
+                                <button class="event-action-btn delete" onclick="deletePoint('pt3')" title="Delete">🗑️</button>
+                            </div>
+                            @endif
+                            @endauth
+                        </div>
+                        <div class="round-marker" data-round="3">
+                            <span class="round-badge">ROUND 3</span>
+                            @auth
+                            @if(isset($video) && Auth::id() === $video->user_id)
+                            <div class="round-actions">
+                                <button class="round-action-btn" onclick="openAddPointModal(3)" title="Add point">+</button>
+                                <button class="round-action-btn" onclick="editRound(3)" title="Edit round">✏️</button>
+                                <button class="round-action-btn" onclick="deleteRound(3)" title="Delete round">🗑️</button>
+                            </div>
+                            @endif
+                            @endauth
+                        </div>
+                        <div class="event-item" data-time-start="150" data-round="3" data-id="pt4">
+                            <div class="event-time">@02:30</div>
+                            <div>
+                                <div class="event-label">
+                                    Blue spinning backfist (2 pts)
+                                    <span class="pill pill-blue">Blue</span>
+                                </div>
+                                <div class="event-meta">
+                                    Round 3 • Score 4 – 3 • Close round.
+                                </div>
+                            </div>
+                            @auth
+                            @if(isset($video) && Auth::id() === $video->user_id)
+                            <div class="event-actions">
+                                <button class="event-action-btn" onclick="editPoint('pt4')" title="Edit">✏️</button>
+                                <button class="event-action-btn delete" onclick="deletePoint('pt4')" title="Delete">🗑️</button>
+                            </div>
+                            @endif
+                            @endauth
+                        </div>
+                        <div class="event-item" data-time-start="180" data-round="3" data-id="pt5">
+                            <div class="event-time">@03:00</div>
+                            <div>
+                                <div class="event-label">
+                                    Red leg kick (1 pt)
+                                    <span class="pill pill-red">Red</span>
+                                </div>
+                                <div class="event-meta">
+                                    Round 3 • Score 4 – 4 • Tied!
+                                </div>
+                            </div>
+                            @auth
+                            @if(isset($video) && Auth::id() === $video->user_id)
+                            <div class="event-actions">
+                                <button class="event-action-btn" onclick="editPoint('pt5')" title="Edit">✏️</button>
+                                <button class="event-action-btn delete" onclick="deletePoint('pt5')" title="Delete">🗑️</button>
+                            </div>
+                            @endif
+                            @endauth
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Coach Review Tab -->
+                <div class="tab-panel" id="tab-review">
+                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
+                        <div class="section-label">Private notes</div>
+                        @auth
+                        @if(isset($video) && Auth::id() === $video->user_id)
+                        <button class="btn-add" type="button" onclick="openAddReviewModal()">
+                            <span>+</span> Add Note
+                        </button>
+                        @endif
+                        @endauth
+                    </div>
+                    <div class="event-list" id="reviewEvents">
+                        <div class="event-item" data-time-start="32" data-time-end="50" data-id="rev1">
+                            <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
+                                <div style="font-size: 1.2rem; margin-bottom: 2px">🔥</div>
+                                <div class="event-time">@00:32–00:50</div>
+                            </div>
+                            <div>
+                                <div class="event-label">
+                                    Good pressure, but guard too low after first kick
+                                </div>
+                                <div class="event-meta">
+                                    <div class="comment-avatar">
+                                        <img src="https://picsum.photos/seed/coach-ahmed/80/80" alt="Coach Ahmed">
+                                    </div>
+                                    Coach Ahmed • Hands drop after scoring, drill guard recovery immediately.
+                                </div>
+                            </div>
+                            @auth
+                            @if(isset($video) && Auth::id() === $video->user_id)
+                            <div class="event-actions">
+                                <button class="event-action-btn" onclick="editReview('rev1')" title="Edit">✏️</button>
+                                <button class="event-action-btn delete" onclick="deleteReview('rev1')" title="Delete">🗑️</button>
+                            </div>
+                            @endif
+                            @endauth
+                        </div>
+                        <div class="event-item" data-time-start="125" data-time-end="140" data-id="rev2">
+                            <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
+                                <div style="font-size: 1.2rem; margin-bottom: 2px">🤔</div>
+                                <div class="event-time">@02:05–02:20</div>
+                            </div>
+                            <div>
+                                <div class="event-label">Missed counter opportunity</div>
+                                <div class="event-meta">
+                                    Coach Sara • Great angle, but no follow up. Use this clip to discuss risk vs reward.
+                                </div>
+                            </div>
+                            @auth
+                            @if(isset($video) && Auth::id() === $video->user_id)
+                            <div class="event-actions">
+                                <button class="event-action-btn" onclick="editReview('rev2')" title="Edit">✏️</button>
+                                <button class="event-action-btn delete" onclick="deleteReview('rev2')" title="Delete">🗑️</button>
+                            </div>
+                            @endif
+                            @endauth
+                        </div>
+                        <div class="event-item" data-time-start="205" data-id="rev3">
+                            <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
+                                <div style="font-size: 1.2rem; margin-bottom: 2px">😄</div>
+                                <div class="event-time">@03:25</div>
+                            </div>
+                            <div>
+                                <div class="event-label">
+                                    Excellent angle change and follow-up
+                                </div>
+                                <div class="event-meta">
+                                    <div class="comment-avatar">
+                                        <img src="https://picsum.photos/seed/coach-ahmed/80/80" alt="Coach Ahmed">
+                                    </div>
+                                    Coach Ahmed • Save as positive highlight, ideal example of exit and re-entry after scoring.
+                                </div>
+                            </div>
+                            @auth
+                            @if(isset($video) && Auth::id() === $video->user_id)
+                            <div class="event-actions">
+                                <button class="event-action-btn" onclick="editReview('rev3')" title="Edit">✏️</button>
+                                <button class="event-action-btn delete" onclick="deleteReview('rev3')" title="Delete">🗑️</button>
+                            </div>
+                            @endif
+                            @endauth
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </aside>
+    </div>
+</div>
+
+<!-- Modals -->
+@include('layouts.partials.share-modal')
+@include('layouts.partials.edit-video-modal')
+
+<!-- Add Round Modal -->
+<div class="modal-overlay" id="addRoundModal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h3>Add New Round</h3>
+            <button class="modal-close" onclick="closeModal('addRoundModal')">×</button>
+        </div>
+        <form id="addRoundForm">
+            <div class="form-row">
+                <div class="form-group">
+                    <label>Round Number</label>
+                    <input type="number" id="roundNumber" min="1" required>
+                </div>
+                <div class="form-group">
+                    <label>Round Name (optional)</label>
+                    <input type="text" id="roundName" placeholder="e.g., ROUND 1">
+                </div>
+            </div>
+            <div class="modal-actions">
+                <button type="button" class="btn-cancel" onclick="closeModal('addRoundModal')">Cancel</button>
+                <button type="submit" class="btn-save">Add Round</button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<!-- Add/Edit Point Modal -->
+<div class="modal-overlay" id="pointModal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h3 id="pointModalTitle">Add Point</h3>
+            <button class="modal-close" onclick="closeModal('pointModal')">×</button>
+        </div>
+        <form id="pointForm">
+            <input type="hidden" id="pointId">
+            <input type="hidden" id="pointRoundId">
+            <div class="form-row">
+                <div class="form-group">
+                    <label>Timestamp (seconds)</label>
+                    <input type="number" id="pointTimestamp" min="0" required>
+                </div>
+                <div class="form-group">
+                    <label>Round</label>
+                    <select id="pointRoundSelect">
+                        <option value="1">Round 1</option>
+                        <option value="2">Round 2</option>
+                        <option value="3">Round 3</option>
+                        <option value="4">Round 4</option>
+                        <option value="5">Round 5</option>
+                    </select>
+                </div>
+            </div>
+            <div class="form-group">
+                <label>Action Description</label>
+                <input type="text" id="pointAction" placeholder="e.g., Blue body kick" required>
+            </div>
+            <div class="form-row">
+                <div class="form-group">
+                    <label>Points</label>
+                    <input type="number" id="pointValue" min="1" value="1">
+                </div>
+                <div class="form-group">
+                    <label>Competitor</label>
+                    <select id="pointCompetitor">
+                        <option value="blue">Blue</option>
+                        <option value="red">Red</option>
+                    </select>
+                </div>
+            </div>
+            <div class="form-group">
+                <label>Notes</label>
+                <textarea id="pointNotes" rows="2" placeholder="Optional notes"></textarea>
+            </div>
+            <div class="modal-actions">
+                <button type="button" class="btn-delete" id="deletePointBtn" onclick="confirmDeletePoint()" style="display: none;">Delete</button>
+                <div style="flex: 1;"></div>
+                <button type="button" class="btn-cancel" onclick="closeModal('pointModal')">Cancel</button>
+                <button type="submit" class="btn-save">Save Point</button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<!-- Edit Round Modal -->
+<div class="modal-overlay" id="editRoundModal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h3>Edit Round</h3>
+            <button class="modal-close" onclick="closeModal('editRoundModal')">×</button>
+        </div>
+        <form id="editRoundForm">
+            <input type="hidden" id="editRoundNumber">
+            <div class="form-group">
+                <label>Round Name</label>
+                <input type="text" id="editRoundName" placeholder="e.g., ROUND 1" required>
+            </div>
+            <div class="modal-actions">
+                <button type="button" class="btn-delete" onclick="confirmDeleteRound()">Delete Round</button>
+                <div style="flex: 1;"></div>
+                <button type="button" class="btn-cancel" onclick="closeModal('editRoundModal')">Cancel</button>
+                <button type="submit" class="btn-save">Save Changes</button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<!-- Add/Edit Review Modal -->
+<div class="modal-overlay" id="reviewModal">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h3 id="reviewModalTitle">Add Coach Note</h3>
+            <button class="modal-close" onclick="closeModal('reviewModal')">×</button>
+        </div>
+        <form id="reviewForm">
+            <input type="hidden" id="reviewId">
+            <div class="form-row">
+                <div class="form-group">
+                    <label>Start Time (seconds)</label>
+                    <input type="number" id="reviewStartTime" min="0" required>
+                </div>
+                <div class="form-group">
+                    <label>End Time (seconds)</label>
+                    <input type="number" id="reviewEndTime" min="0">
+                </div>
+            </div>
+            <div class="form-group">
+                <label>Note</label>
+                <textarea id="reviewNote" rows="3" placeholder="Coach's observation..." required></textarea>
+            </div>
+            <div class="form-group">
+                <label>Coach Name</label>
+                <input type="text" id="reviewCoach" placeholder="e.g., Coach Ahmed" required>
+            </div>
+            <div class="form-group">
+                <label>Emoji</label>
+                <select id="reviewEmoji">
+                    <option value="🔥">🔥 Good</option>
+                    <option value="🤔">🤔 Needs Work</option>
+                    <option value="😄">😄 Excellent</option>
+                    <option value="💪">💪 Strong</option>
+                    <option value="⚠️">⚠️ Warning</option>
+                </select>
+            </div>
+            <div class="modal-actions">
+                <button type="button" class="btn-delete" id="deleteReviewBtn" onclick="confirmDeleteReview()" style="display: none;">Delete</button>
+                <div style="flex: 1;"></div>
+                <button type="button" class="btn-cancel" onclick="closeModal('reviewModal')">Cancel</button>
+                <button type="submit" class="btn-save">Save Note</button>
+            </div>
+        </form>
+    </div>
+</div>
+
+@if(Session::has('openEditModal') && Session::get('openEditModal'))
+@auth
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    openEditVideoModal({{ isset($video) ? $video->id : 0 }});
+});
+</script>
+@endauth
+@endif
+
+<script>
+// Subscribe Toggle Function
+function toggleSubscribe(userId) {
+    if (!userId) return;
+    fetch(`/users/${userId}/toggle-subscribe`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-TOKEN': '{{ csrf_token() }}'
         }
-    </script>
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            location.reload();
+        }
+    });
+}
+
+// Playlist navigation URLs
+const previousVideoUrl = @json(isset($previousVideo) ? route('videos.show', $previousVideo->id) . '?playlist=' . ($playlist->id ?? '') : null);
+const nextVideoUrl = @json(isset($nextVideo) ? route('videos.show', $nextVideo->id) . '?playlist=' . ($playlist->id ?? '') : null);
+const videoId = {{ isset($video) ? $video->id : 0 }};
+const isOwner = {{ json_encode(Auth::check() && isset($video) && Auth::id() === $video->user_id) }};
+let autoplayEnabled = true;
+
+document.addEventListener('DOMContentLoaded', function() {
+    loadMatchData();
+});
+
+async function loadMatchData() {
+    try {
+        const response = await fetch(`/videos/${videoId}/match-data`);
+        const data = await response.json();
+        if (data.success && data.rounds && data.rounds.length > 0) {
+            renderMatchData(data.rounds, data.reviews);
+        } else {
+            renderStaticData();
+        }
+    } catch (error) {
+        renderStaticData();
+    }
+}
+
+function renderStaticData() {
+    const staticRounds = [
+        {
+            id: 1, round_number: 1, name: 'ROUND 1',
+            points: [
+                { id: 1, timestamp_seconds: 20, action: 'Blue body kick', points: 1, competitor: 'blue', score_blue: 1, score_red: 0, notes: 'Clean contact.' },
+                { id: 2, timestamp_seconds: 45, action: 'Blue scores body kick', points: 1, competitor: 'blue', score_blue: 2, score_red: 0, notes: 'Judge: Central.' }
+            ]
+        },
+        {
+            id: 2, round_number: 2, name: 'ROUND 2',
+            points: [
+                { id: 3, timestamp_seconds: 90, action: 'Red head kick', points: 3, competitor: 'red', score_blue: 2, score_red: 3, notes: 'Video replay requested.' }
+            ]
+        },
+        {
+            id: 3, round_number: 3, name: 'ROUND 3',
+            points: [
+                { id: 4, timestamp_seconds: 150, action: 'Blue spinning backfist', points: 2, competitor: 'blue', score_blue: 4, score_red: 3, notes: 'Close round.' },
+                { id: 5, timestamp_seconds: 180, action: 'Red leg kick', points: 1, competitor: 'red', score_blue: 4, score_red: 4, notes: 'Tied!' }
+            ]
+        }
+    ];
+    const staticReviews = [
+        { id: 1, start_time_seconds: 32, end_time_seconds: 50, note: 'Good pressure, but guard too low after first kick', coach_name: 'Coach Ahmed', emoji: '🔥' },
+        { id: 2, start_time_seconds: 125, end_time_seconds: 140, note: 'Missed counter opportunity', coach_name: 'Coach Sara', emoji: '🤔' },
+        { id: 3, start_time_seconds: 205, end_time_seconds: null, note: 'Excellent angle change and follow-up', coach_name: 'Coach Ahmed', emoji: '😄' }
+    ];
+    renderMatchData(staticRounds, staticReviews);
+}
+
+function renderMatchData(rounds, reviews) {
+    if (!rounds || rounds.length === 0) return;
+    const pointsContainer = document.getElementById('officialEvents');
+    const reviewsContainer = document.getElementById('reviewEvents');
+    let pointsHtml = '';
+    let reviewsHtml = '';
+
+    rounds.forEach(round => {
+        pointsHtml += `
+        <div class="round-marker" data-round="${round.round_number}">
+            <span class="round-badge">${round.name}</span>
+            ${isOwner ? `
+            <div class="round-actions">
+                <button class="round-action-btn" onclick="openAddPointModal(${round.round_number}, ${round.id})" title="Add point">+</button>
+                <button class="round-action-btn" onclick="editRound(${round.round_number}, ${round.id}, '${round.name}')" title="Edit round">✏️</button>
+                <button class="round-action-btn" onclick="deleteRound(${round.id})" title="Delete round">🗑️</button>
+            </div>
+            ` : ''}
+        </div>`;
+
+        if (round.points) {
+            round.points.forEach(point => {
+                const competitorClass = point.competitor === 'blue' ? 'pill-blue' : 'pill-red';
+                const competitorLabel = point.competitor === 'blue' ? 'Blue' : 'Red';
+                const timeStr = formatTime(point.timestamp_seconds);
+                pointsHtml += `
+                <div class="event-item" data-time-start="${point.timestamp_seconds}" data-round="${round.round_number}" data-id="${point.id}">
+                    <div class="event-time">@${timeStr}</div>
+                    <div>
+                        <div class="event-label">
+                            ${point.action} (${point.points} pt)
+                            <span class="pill ${competitorClass}">${competitorLabel}</span>
+                        </div>
+                        <div class="event-meta">
+                            ${round.name} • Score ${point.score_blue} – ${point.score_red}${point.notes ? ' • ' + point.notes : ''}
+                        </div>
+                    </div>
+                    ${isOwner ? `
+                    <div class="event-actions">
+                        <button class="event-action-btn" onclick="editPoint(${point.id})" title="Edit">✏️</button>
+                        <button class="event-action-btn delete" onclick="deletePoint(${point.id})" title="Delete">🗑️</button>
+                    </div>` : ''}
+                </div>`;
+            });
+        }
+    });
+
+    if (reviews) {
+        reviews.forEach(review => {
+            const timeStart = formatTime(review.start_time_seconds);
+            const timeEnd = review.end_time_seconds ? '–' + formatTime(review.end_time_seconds) : '';
+            const timeDisplay = timeStart + timeEnd;
+            reviewsHtml += `
+            <div class="event-item" data-time-start="${review.start_time_seconds}" data-time-end="${review.end_time_seconds || ''}" data-id="${review.id}">
+                <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
+                    <div style="font-size: 1.2rem; margin-bottom: 2px">${review.emoji}</div>
+                    <div class="event-time">@${timeDisplay}</div>
+                </div>
+                <div>
+                    <div class="event-label">${review.note}</div>
+                    <div class="event-meta">
+                        <div class="comment-avatar">
+                            <img src="https://picsum.photos/seed/${review.coach_name}/80/80" alt="${review.coach_name}">
+                        </div>
+                        ${review.coach_name}
+                    </div>
+                </div>
+                ${isOwner ? `
+                <div class="event-actions">
+                    <button class="event-action-btn" onclick="editReview(${review.id})" title="Edit">✏️</button>
+                    <button class="event-action-btn delete" onclick="deleteReview(${review.id})" title="Delete">🗑️</button>
+                </div>` : ''}
+            </div>`;
+        });
+    }
+
+    if (pointsContainer) pointsContainer.innerHTML = pointsHtml;
+    if (reviewsContainer) reviewsContainer.innerHTML = reviewsHtml;
+    attachEventListeners();
+}
+
+function formatTime(seconds) {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    const tabButtons = document.querySelectorAll('.tab-button');
+    const tabPanels = document.querySelectorAll('.tab-panel');
+    tabButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const targetTab = this.getAttribute('data-tab');
+            tabButtons.forEach(btn => btn.classList.remove('active'));
+            tabPanels.forEach(panel => panel.classList.remove('active'));
+            this.classList.add('active');
+            document.getElementById('tab-' + targetTab).classList.add('active');
+        });
+    });
+    attachEventListeners();
+    document.getElementById('addRoundForm')?.addEventListener('submit', function(e) { e.preventDefault(); storeRound(document.getElementById('roundNumber').value, document.getElementById('roundName').value || 'ROUND ' + document.getElementById('roundNumber').value); });
+    document.getElementById('pointForm')?.addEventListener('submit', function(e) { e.preventDefault(); savePoint(); });
+    document.getElementById('editRoundForm')?.addEventListener('submit', function(e) { e.preventDefault(); updateRound(); });
+    document.getElementById('reviewForm')?.addEventListener('submit', function(e) { e.preventDefault(); saveReview(); });
+});
+
+function attachEventListeners() {
+    document.querySelectorAll('.event-item').forEach(item => {
+        item.addEventListener('click', function(e) {
+            if (e.target.closest('.event-actions')) return;
+            const timeStart = this.getAttribute('data-time-start');
+            if (timeStart) {
+                const videoPlayer = document.getElementById('videoPlayer');
+                if (videoPlayer) { videoPlayer.currentTime = parseInt(timeStart); videoPlayer.play(); }
+            }
+        });
+    });
+}
+
+function openModal(modalId) { document.getElementById(modalId).classList.add('active'); }
+function closeModal(modalId) { document.getElementById(modalId).classList.remove('active'); }
+document.querySelectorAll('.modal-overlay').forEach(modal => {
+    modal.addEventListener('click', function(e) { if (e.target === this) this.classList.remove('active'); });
+});
+
+const csrfToken = '{{ Auth::check() ? csrf_token() : "" }}';
+const isDemoMode = !{{ Auth::check() ? 'true' : 'false' }};
+
+// Round/Point/Review functions (abbreviated for brevity)
+function openAddRoundModal() { if (isDemoMode || !csrfToken) { alert('Demo Mode: Requires authentication'); return; } document.getElementById('roundNumber').value = ''; document.getElementById('roundName').value = ''; openModal('addRoundModal'); }
+async function storeRound(roundNumber, roundName) { if (!csrfToken) return; try { const res = await fetch(`/videos/${videoId}/rounds`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken }, body: JSON.stringify({ round_number: roundNumber, name: roundName }) }); const data = await res.json(); if (data.success) { closeModal('addRoundModal'); loadMatchData(); } else alert(data.message || 'Error'); } catch(e) { alert('Error: ' + e.message); } }
+function editRound(roundNumber, roundId, currentName) { if (isDemoMode || !csrfToken) { alert('Demo Mode'); return; } document.getElementById('editRoundNumber').value = roundId; document.getElementById('editRoundName').value = currentName; openModal('editRoundModal'); }
+async function updateRound() { if (!csrfToken) return; const roundId = document.getElementById('editRoundNumber').value; const roundName = document.getElementById('editRoundName').value; try { const res = await fetch(`/rounds/${roundId}`, { method: 'PUT', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken }, body: JSON.stringify({ name: roundName }) }); const data = await res.json(); if (data.success) { closeModal('editRoundModal'); loadMatchData(); } else alert(data.message || 'Error'); } catch(e) { alert('Error: ' + e.message); } }
+async function deleteRound(roundId) { if (!csrfToken) return; if (!confirm('Delete this round?')) return; try { const res = await fetch(`/rounds/${roundId}`, { method: 'DELETE', headers: { 'X-CSRF-TOKEN': csrfToken } }); const data = await res.json(); if (data.success) loadMatchData(); else alert(data.message || 'Error'); } catch(e) { alert('Error: ' + e.message); } }
+function openAddPointModal(roundNumber, roundId) { if (isDemoMode || !csrfToken) { alert('Demo Mode'); return; } document.getElementById('pointModalTitle').textContent = 'Add Point'; document.getElementById('pointId').value = ''; document.getElementById('pointRoundId').value = roundId || ''; document.getElementById('pointTimestamp').value = ''; document.getElementById('pointRoundSelect').value = roundNumber || '1'; document.getElementById('pointAction').value = ''; document.getElementById('pointValue').value = '1'; document.getElementById('pointCompetitor').value = 'blue'; document.getElementById('pointNotes').value = ''; document.getElementById('deletePointBtn').style.display = 'none'; openModal('pointModal'); }
+function editPoint(pointId) { const el = document.querySelector(`.event-item[data-id="${pointId}"]`); if (!el) return; document.getElementById('pointModalTitle').textContent = 'Edit Point'; document.getElementById('pointId').value = pointId; document.getElementById('pointTimestamp').value = el.dataset.timeStart || ''; document.getElementById('pointRoundSelect').value = el.dataset.round || '1'; document.getElementById('pointAction').value = el.querySelector('.event-label')?.textContent.split('(')[0].trim() || ''; document.getElementById('pointValue').value = '1'; document.getElementById('pointCompetitor').value = el.querySelector('.pill')?.classList.contains('pill-blue') ? 'blue' : 'red'; document.getElementById('pointNotes').value = el.querySelector('.event-meta')?.textContent.split('•').slice(2).join('').trim() || ''; document.getElementById('deletePointBtn').style.display = (isDemoMode || !csrfToken) ? 'none' : 'block'; openModal('pointModal'); }
+async function savePoint() { if (!csrfToken) { closeModal('pointModal'); return; } const pointId = document.getElementById('pointId').value; const roundId = document.getElementById('pointRoundId').value; const timestamp = document.getElementById('pointTimestamp').value; const round = document.getElementById('pointRoundSelect').value; const action = document.getElementById('pointAction').value; const value = document.getElementById('pointValue').value; const competitor = document.getElementById('pointCompetitor').value; const notes = document.getElementById('pointNotes').value; try { if (pointId) { const res = await fetch(`/points/${pointId}`, { method: 'PUT', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken }, body: JSON.stringify({ timestamp_seconds: parseInt(timestamp), action, points: parseInt(value), competitor, notes }) }); const data = await res.json(); if (data.success) { closeModal('pointModal'); loadMatchData(); } else alert(data.message || 'Error'); } else { const res = await fetch(`/videos/${videoId}/points`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken }, body: JSON.stringify({ round_id: roundId, timestamp_seconds: parseInt(timestamp), action, points: parseInt(value), competitor, notes }) }); const data = await res.json(); if (data.success) { closeModal('pointModal'); loadMatchData(); } else alert(data.message || 'Error'); } } catch(e) { alert('Error: ' + e.message); } }
+async function deletePoint(pointId) { if (!csrfToken) return; if (!confirm('Delete this point?')) return; try { const res = await fetch(`/points/${pointId}`, { method: 'DELETE', headers: { 'X-CSRF-TOKEN': csrfToken } }); const data = await res.json(); if (data.success) { closeModal('pointModal'); loadMatchData(); } else alert(data.message || 'Error'); } catch(e) { alert('Error: ' + e.message); } }
+function openAddReviewModal() { if (isDemoMode || !csrfToken) { alert('Demo Mode'); return; } document.getElementById('reviewModalTitle').textContent = 'Add Coach Note'; document.getElementById('reviewId').value = ''; document.getElementById('reviewStartTime').value = ''; document.getElementById('reviewEndTime').value = ''; document.getElementById('reviewNote').value = ''; document.getElementById('reviewCoach').value = ''; document.getElementById('reviewEmoji').value = '🔥'; document.getElementById('deleteReviewBtn').style.display = 'none'; openModal('reviewModal'); }
+function editReview(reviewId) { const el = document.querySelector(`.event-item[data-id="${reviewId}"]`); if (!el) return; document.getElementById('reviewModalTitle').textContent = 'Edit Coach Note'; document.getElementById('reviewId').value = reviewId; document.getElementById('reviewStartTime').value = el.dataset.timeStart || ''; document.getElementById('reviewEndTime').value = el.dataset.timeEnd || ''; document.getElementById('reviewNote').value = el.querySelector('.event-label')?.textContent.trim() || ''; document.getElementById('reviewCoach').value = el.querySelector('.event-meta')?.textContent.trim() || ''; document.getElementById('reviewEmoji').value = el.querySelector('div:first-child')?.textContent || '🔥'; document.getElementById('deleteReviewBtn').style.display = 'block'; openModal('reviewModal'); }
+async function saveReview() { if (!csrfToken) return; const reviewId = document.getElementById('reviewId').value; const startTime = document.getElementById('reviewStartTime').value; const endTime = document.getElementById('reviewEndTime').value; const note = document.getElementById('reviewNote').value; const coach = document.getElementById('reviewCoach').value; const emoji = document.getElementById('reviewEmoji').value; try { if (reviewId) { const res = await fetch(`/reviews/${reviewId}`, { method: 'PUT', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken }, body: JSON.stringify({ start_time_seconds: parseInt(startTime), end_time_seconds: endTime ? parseInt(endTime) : null, note, coach_name: coach, emoji }) }); const data = await res.json(); if (data.success) { closeModal('reviewModal'); loadMatchData(); } else alert(data.message || 'Error'); } else { const res = await fetch(`/videos/${videoId}/reviews`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken }, body: JSON.stringify({ start_time_seconds: parseInt(startTime), end_time_seconds: endTime ? parseInt(endTime) : null, note, coach_name: coach, emoji }) }); const data = await res.json(); if (data.success) { closeModal('reviewModal'); loadMatchData(); } else alert(data.message || 'Error'); } } catch(e) { alert('Error: ' + e.message); } }
+async function deleteReview(reviewId) { if (!csrfToken) return; if (!confirm('Delete this note?')) return; try { const res = await fetch(`/reviews/${reviewId}`, { method: 'DELETE', headers: { 'X-CSRF-TOKEN': csrfToken } }); const data = await res.json(); if (data.success) { closeModal('reviewModal'); loadMatchData(); } else alert(data.message || 'Error'); } catch(e) { alert('Error: ' + e.message); } }
+
+// Playlist navigation
+document.addEventListener('DOMContentLoaded', function() {
+    const videoPlayer = document.getElementById('videoPlayer');
+    const playlistControls = document.getElementById('playlistControls');
+    const autoplayToggle = document.getElementById('autoplayToggle');
+    if (videoPlayer) {
+        videoPlayer.volume = 0.5;
+        const playPromise = videoPlayer.play();
+        if (playPromise !== undefined) { playPromise.then(() => console.log('Autoplayed')).catch(() => console.log('Autoplay blocked')); }
+        if (nextVideoUrl) { videoPlayer.addEventListener('ended', () => { if (autoplayEnabled) window.location.href = nextVideoUrl; }); }
+    }
+    if (playlistControls) {
+        const videoContainer = document.getElementById('videoContainer');
+        videoContainer.addEventListener('mouseenter', () => playlistControls.classList.add('visible'));
+        videoContainer.addEventListener('mouseleave', () => playlistControls.classList.remove('visible'));
+        setTimeout(() => playlistControls.classList.add('visible'), 2000);
+        setTimeout(() => playlistControls.classList.remove('visible'), 6000);
+    }
+    if (autoplayToggle) {
+        autoplayToggle.addEventListener('change', function() { autoplayEnabled = this.checked; localStorage.setItem('playlistAutoplay', autoplayEnabled ? '1' : '0'); });
+        const saved = localStorage.getItem('playlistAutoplay');
+        if (saved !== null) { autoplayEnabled = saved === '1'; autoplayToggle.checked = autoplayEnabled; }
+    }
+    document.addEventListener('keydown', function(e) { if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return; if (e.key === 'ArrowLeft') { e.preventDefault(); if (previousVideoUrl) window.location.href = previousVideoUrl; } else if (e.key === 'ArrowRight') { e.preventDefault(); if (nextVideoUrl) window.location.href = nextVideoUrl; } });
+});
+function goToPreviousVideo() { if (previousVideoUrl) window.location.href = previousVideoUrl; }
+function goToNextVideo() { if (nextVideoUrl) window.location.href = nextVideoUrl; }
+</script>
 @endsection
diff --git a/routes/web.php b/routes/web.php
index 444f60a..98a80f4 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,6 +1,7 @@
 <?php
 
 use App\Http\Controllers\CommentController;
+use App\Http\Controllers\MatchEventController;
 use App\Http\Controllers\SuperAdminController;
 use App\Http\Controllers\UserController;
 use App\Http\Controllers\VideoController;
@@ -111,3 +112,26 @@ Route::middleware(['auth', 'super_admin'])->prefix('admin')->name('admin.')->gro
     Route::put('/videos/{video}', [SuperAdminController::class, 'updateVideo'])->name('videos.update');
     Route::delete('/videos/{video}', [SuperAdminController::class, 'deleteVideo'])->name('videos.delete');
 });
+
+// Match Events Routes (removed auth requirement for demo purposes)
+// In production, wrap with: Route::middleware('auth')->group(function () {
+
+// Get match data - public for viewing
+Route::get('/videos/{video}/match-data', [MatchEventController::class, 'getMatchData'])->name('match.getData');
+
+// Round CRUD
+Route::post('/videos/{video}/rounds', [MatchEventController::class, 'storeRound'])->name('match.storeRound');
+Route::put('/rounds/{round}', [MatchEventController::class, 'updateRound'])->name('match.updateRound');
+Route::delete('/rounds/{round}', [MatchEventController::class, 'destroyRound'])->name('match.destroyRound');
+
+// Point CRUD
+Route::post('/videos/{video}/points', [MatchEventController::class, 'storePoint'])->name('match.storePoint');
+Route::put('/points/{point}', [MatchEventController::class, 'updatePoint'])->name('match.updatePoint');
+Route::delete('/points/{point}', [MatchEventController::class, 'destroyPoint'])->name('match.destroyPoint');
+
+// Coach Review CRUD
+Route::post('/videos/{video}/reviews', [MatchEventController::class, 'storeReview'])->name('match.storeReview');
+Route::put('/reviews/{review}', [MatchEventController::class, 'updateReview'])->name('match.updateReview');
+Route::delete('/reviews/{review}', [MatchEventController::class, 'destroyReview'])->name('match.destroyReview');
+
+// });