fix preview video proposal (mhs)

resources/views/backend/mahasiswa/proposal/index.blade.php

 @extends('layouts.master')
 @section('css')
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
+    {{-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css"> --}}
 @endsection
 
 @section('title')
@@ -59,12 +59,6 @@
                     <div class="table-responsive">
                         <table id="datatable" class="table table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                             <thead style="text-align: center; vertical-align: middle;">
-                                {{-- <style>
-                                    th {
-                                        text-align: center;
-                                        vertical-align: middle;
-                                    }
-                                </style> --}}
                                 <tr>
                                     <th>No</th>
                                     <th width="5%">Kode Kelompok</th>
@@ -72,7 +66,7 @@
                                     <th>Identitas Dosen Pembimbing</th>
                                     <th>Kategori PMW</th>
                                     <th>Judul Proposal</th>
-                                    <th>Usulan Dana</th>
+                                    <th>Usulan Anggaran</th>
                                     <th>Status</th>
                                     <th>Aksi</th>
                                 </tr>
@@ -179,6 +173,7 @@
                                                                                 @dd($item->rProposalUrl->url);
                                                                             @endphp --}}
                                                                                 <button id="preview-video" class="btn btn-success btn-sm" data-video="{{ $item->rProposalUrl->url }}">
+                                                                                {{-- <button id="preview-video" class="btn btn-success btn-sm" data-video="https://youtu.be/9CHu8iOsxDE?feature=shared"> --}}
                                                                                     <i class="far fa-eye"></i> Lihat Video
                                                                                 </button>
                                                                             @else
@@ -256,10 +251,18 @@
     $(document).ready(function() {
         // Event handler untuk tombol "Lihat Video" dengan ID preview-video
         $('#preview-video').on('click', function() {
-            var videoUrl = $(this).data('video');
+            var videoUrl = $(this).attr('data-video');
+            // console.log(videoUrl);
 
             if (videoUrl) {
                 // Buka video dalam Magnific Popup
+                if (videoUrl.includes('youtu.be')) {
+                    // Konversi ke format youtube.com/watch?v=xxxxx
+                    videoUrl = videoUrl.replace('youtu.be/', 'youtube.com/watch?v=');
+                }
+
+                // Buka video dalam Magnific Popup jika valid, buka di tab baru jika tidak
+                if (isValidYouTubeUrl(videoUrl)) {
                     $.magnificPopup.open({
                         items: {
                             src: videoUrl
@@ -298,9 +301,16 @@
                     });
                 } else {
                     // Tampilkan pesan kesalahan jika URL video tidak valid
+                    window.open(videoUrl, '_blank');
+                    }
+                } else {
                     console.error('URL video tidak valid:', videoUrl);
                 }
             });
+            function isValidYouTubeUrl(url) {
+                // Lakukan validasi sederhana menggunakan ekspresi reguler
+                return /^(http(s)?:\/\/)?((w){3}.)?youtu(be|.be)?(\.com)?\/.+/gm.test(url);
+            }
         });
 
     </script>