v1.5.8 Added model, but there is some problems.

skolehjem/resources/views/admin/news/index.blade.php

@@ -43,7 +43,7 @@
                     @endif
                     @if(auth()->user()->can('news.edit'))
                         <td><a href="{{ route("news.edit", [ "news" => $new ]) }}"><img class="w-100" src="{{ asset('/images/icons/pencil-dark.svg') }}" alt="Update"></a></td>
-                        <td><a href="#" id="preview" onclick="getPreviewValue({{$new->id}})" ><img class="w-100" src="{{ asset('/images/icons/preview-dark.svg') }}" alt="Update"></a></td>
+                        <td><a href="#" id="preview" onclick="modalNewsContent({{$new->id}})" ><img class="w-100" src="{{ asset('/images/icons/preview-dark.svg') }}" alt="Update"></a></td>
                     @endif
                     @if(auth()->user()->can('news.delete'))
                         <td>
@@ -55,8 +55,54 @@
             @endforeach
         </tbody>
     </table>
+
+    <div id="newsModal" class="modal zindex-100">
+        <div id="modal-content" class="modal-content text-black d-block w-50">
+            <span class="close" onclick="closeModal()">&times;</span>
+            <center>
+                <h1 id="titleEvent"></h1>
+                <p id="dateEvent"></p>
+                <hr>
+                <p id="descriptionEvent" style="white-space: pre-line"></p>
+
+            </center>
+        </div>
+    </div>
 @endsection
 @section('scripts')
+    <script>
+        var modalNews = document.getElementById("newsModal");
+
+        function modalNewsContent(id) {
+            $.ajax({
+                type: 'get',
+                url: '{{route('events.preview')}}',
+                data: {'preview':id},
+                success:function (data) {
+                    modalNews.style.display = "block";
+                    var l = JSON.parse(data);
+                    $("#titleEvent").text(l.name);
+                    $("#dateEvent").text(l.date);
+                    $("#descriptionEvent").text(l.description);
+
+
+                },
+                error:function (data) {
+                    console.log(data);
+                }
+            });
+        }
+
+        function closeModal() {
+            modalNews.style.display = "none";
+        }
+
+        window.onmousedown = function(event) {
+            if (event.target == modalNews) {
+                modalNews.style.display = "none";
+            }
+        }
+    </script>
     <script>
         $(document).ready( function () {
             $('#table_id').DataTable({
@@ -100,25 +146,5 @@
                 }
             })
         }
-
-        //Get the id and
-        function getPreviewValue(elm){
-            $.ajax({
-                type: 'get',
-                url: '{{route('events.preview')}}',
-                data: {'preview':elm},
-                success:function (data) {
-                    $l = JSON.parse(data);
-                    console.log($l);
-
-                },
-                error:function (data) {
-                    console.log(data);
-                }
-            });
-
-        }
-
-
     </script>
 @endsection