made the video cards components

resources/views/layouts/partials/edit-video-modal.blade.php

@@ -83,6 +83,35 @@
                                 class="form-textarea"
                                 placeholder="Tell viewers about your video"></textarea>
                         </div>
+
+                        <div class="form-group">
+                            <label class="form-label">
+                                <i class="bi bi-collection-play"></i> Video Type
+                            </label>
+                            <div class="video-type-options">
+                                <label class="video-type-option" id="type-generic">
+                                    <input type="radio" name="type" value="generic" checked>
+                                    <div class="video-type-content">
+                                        <i class="bi bi-film"></i>
+                                        <span>Generic</span>
+                                    </div>
+                                </label>
+                                <label class="video-type-option" id="type-music">
+                                    <input type="radio" name="type" value="music">
+                                    <div class="video-type-content">
+                                        <i class="bi bi-music-note"></i>
+                                        <span>Music</span>
+                                    </div>
+                                </label>
+                                <label class="video-type-option" id="type-match">
+                                    <input type="radio" name="type" value="match">
+                                    <div class="video-type-content">
+                                        <i class="bi bi-trophy"></i>
+                                        <span>Match</span>
+                                    </div>
+                                </label>
+                            </div>
+                        </div>
                         
                         <div class="step-navigation">
                             <div></div>
@@ -486,6 +515,63 @@
     color: #666;
 }
 
+/* Video Type Options */
+.video-type-options {
+    display: flex;
+    gap: 12px;
+}
+
+.video-type-option {
+    flex: 1;
+    cursor: pointer;
+}
+
+.video-type-option input {
+    display: none;
+}
+
+.video-type-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    padding: 16px 12px;
+    background: #1a1a1a;
+    border: 2px solid #333;
+    border-radius: 12px;
+    transition: all 0.2s;
+}
+
+.video-type-option:hover .video-type-content {
+    border-color: #555;
+    background: #1f1f1f;
+}
+
+.video-type-option.active .video-type-content {
+    border-color: #e61e1e;
+    background: rgba(230, 30, 30, 0.1);
+}
+
+.video-type-content i {
+    font-size: 24px;
+    color: #666;
+    transition: color 0.2s;
+}
+
+.video-type-option.active .video-type-content i {
+    color: #e61e1e;
+}
+
+.video-type-content span {
+    font-size: 13px;
+    font-weight: 500;
+    color: #aaa;
+}
+
+.video-type-option.active .video-type-content span {
+    color: #e5e5e5;
+}
+
 /* Dropzone */
 .dropzone-modal {
     border: 2px dashed #404040;
@@ -777,6 +863,10 @@
         width: 30px;
     }
     
+    .video-type-options {
+        flex-direction: column;
+    }
+    
     .step-navigation {
         flex-direction: column-reverse;
         gap: 12px;
@@ -826,6 +916,17 @@ function openEditVideoModal(videoId) {
                 thumbnailWrapper.classList.remove('has-thumbnail');
             }
             
+            // Set video type
+            const videoType = video.type || 'generic';
+            document.querySelectorAll('.video-type-option').forEach(opt => {
+                opt.classList.remove('active');
+                const radio = opt.querySelector('input[type="radio"]');
+                if (radio.value === videoType) {
+                    radio.checked = true;
+                    opt.classList.add('active');
+                }
+            });
+            
             // Set visibility
             const visibility = video.visibility || 'public';
             document.querySelectorAll('.visibility-option-modal').forEach(opt => {
@@ -987,6 +1088,16 @@ function removeEditThumbnail(e) {
     document.getElementById('edit-thumbnail-info').classList.remove('active');
 }
 
+// Video type options
+const videoTypeOptions = document.querySelectorAll('.video-type-option');
+videoTypeOptions.forEach(option => {
+    const radio = option.querySelector('input[type="radio"]');
+    radio.addEventListener('change', function() {
+        videoTypeOptions.forEach(opt => opt.classList.remove('active'));
+        option.classList.add('active');
+    });
+});
+
 // Visibility options
 const editVisibilityOptions = document.querySelectorAll('.visibility-option-modal');
 editVisibilityOptions.forEach(option => {
@@ -1048,4 +1159,3 @@ document.getElementById('edit-video-form-modal').addEventListener('submit', func
     });
 });
 </script>
-