v1.4.12 - Added Category created funtion on guides & web.php route

fixed css
Added guide picture on guides show on app

skolehjem/resources/views/admin/guides/create.blade.php

@@ -22,6 +22,37 @@
         #editor {
             margin-bottom: 1rem;
         }
+        .modal {
+            display: none; /* Hidden by default */
+            position: fixed; /* Stay in place */
+            z-index: 1; /* Sit on top */
+            padding-top: 100px; /* Location of the box */
+            left: 0;
+            top: 0;
+            width: 100%; /* Full width */
+            height: 100%; /* Full height */
+            overflow: auto; /* Enable scroll if needed */
+            background-color: rgb(0,0,0); /* Fallback color */
+            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+        }
+
+        /* Modal Content */
+        .modal-content {
+            background-color: #fefefe;
+            margin: auto;
+            padding: 20px;
+            border: 1px solid #888;
+            width: 330px;
+            min-width: 400px;
+        }
+
+        /* The Close Button */
+        .close {
+            color: #aaaaaa;
+            float: right;
+            font-size: 28px;
+            font-weight: bold;
+        }
     </style>
     <link href="{{ asset("/css/quill/quill.snow.css") }}" rel="stylesheet">
     <h1 id="errormesseages" >Opret Vejledning</h1>
@@ -30,14 +61,14 @@
         <label for="title">Titel på guiden</label>
         <label hidden id="error" for="errormesseages">Navn findes allerede</label>
         <input type="text" name="name" id="title" required>
-        <div>
+        <div id="selectDiv">
             <select name="guide_category_id" id="guidesCategory" required>
                 <option disabled selected value> -- Vælg en kategori -- </option>
                 @foreach(\App\GuidesCategory::query()->get() as $guideCategory)
                     <option value="{{ $guideCategory->id }}">{{ $guideCategory->guidesCategoryName }}</option>
                 @endforeach
             </select> <label>Vælg en kategori</label>
-            <a class="btn btn-inline btn-sde-blue mb-0 ml-1" href="{{ route('guides-category.create') }}"><img src="{{ asset('/images/icons/plus.svg') }}" alt="Create">Opret kategori</a>
+            <i class="btn btn-inline btn-sde-blue mb-0 ml-1" aria-hidden="true" onclick="modalContent()"><img src="{{ asset('/images/icons/plus.svg') }}" alt="Create">Opret kategori</i>
         </div>
         <label for="editor">Vejledning</label>
         <small class="form-text text-muted">For at kunne indsætte et link, skal du markere den text du vil lave som et link først.</small>
@@ -57,6 +88,16 @@
         <input id="fileuploade" type="file" name="resource" accept="image/*">
         <input type="submit" id="disable" class="btn btn-dark text-white" value="Opret">
     </form>
+    <div id="myModal" class="modal zindex-100">
+        <div id="modal-content" class="modal-content text-black-50 d-block">
+            <span class="close" onclick="closeModal()">&times;</span>
+            <form id="modal-form" onsubmit="return createLocation()">
+                <label hidden id="errorModal" for="errormesseages">Kategori findes allerede</label>
+                <input type="text" name="category_name" id="category_name" placeholder="Bygning A" required>
+                <input type="submit" id="disableModal" class="btn btn-dark text-white" value="Opret">
+            </form>
+        </div>
+    </div>
 
     <script src="{{ asset("/js/quill/quill.js") }}"></script>
     <script>
@@ -87,6 +128,59 @@
     </script>
 @endsection
 @section("scripts")
+    <!-- Modal Script -->
+    <script>
+        // Get the modal
+        var modal = document.getElementById("myModal");
+
+        // Close the modal when you click on the span (x)
+        function closeModal() {
+            modal.style.display = "none";
+        }
+
+        // When the user clicks anywhere outside of the modal, close it
+        window.onmousedown = function(event) {
+            if (event.target == modal) {
+                modal.style.display = "none";
+            }
+        }
+
+        function modalContent() {
+            modal.style.display = "block";
+        }
+
+        function createLocation() {
+            $category_name = $('#category_name').val();
+
+            $.ajax({
+                type: 'get',
+                url: '{{route('guides-category.guideCategoryCreate')}}',
+                data: { guidesCategoryName: $category_name },
+                success:function (data) {
+                    if(data) {
+                        $("#errorModal").show(100);
+                        $("#errorModal").css('color', 'red');
+                        $("#disableModal").prop('disabled', true);
+                        $('#disableModal').css('cursor','not-allowed');
+                    } else {
+                        $("#error").hide();
+                        $("#disable").prop('disabled', false);
+                        $('#disable').css('cursor','pointer');
+
+                        //Load Categories again
+                        // There has to be a space between " and # or it will not load correctly
+                        $('#selectDiv').load(" #selectDiv");
+
+                        modal.style.display = "none";
+                    }
+                },
+                error:function (data) {
+                    console.log(data);
+                }
+            });
+            return false;
+        }
+    </script>
     <script>
         $(function() {
             $('form').areYouSure(