From d9c3512285f1b10e94d723e0d9bd12260acc38ae Mon Sep 17 00:00:00 2001
From: abiyasa05 <abiyasap24@gmail.com>
Date: Sun, 6 Jul 2025 10:11:47 +0700
Subject: [PATCH] create: add loading screen on assessment page

---
 .../assessments/modals/confirmation.blade.php | 45 +++++++++++++++----
 .../assessments/modals/loading.blade.php      | 23 ++++++++++
 2 files changed, 60 insertions(+), 8 deletions(-)
 create mode 100644 Penilaian Literasi/iClOP-V2/resources/views/literacy/student/assessments/modals/loading.blade.php

diff --git a/Penilaian Literasi/iClOP-V2/resources/views/literacy/student/assessments/modals/confirmation.blade.php b/Penilaian Literasi/iClOP-V2/resources/views/literacy/student/assessments/modals/confirmation.blade.php
index 95fe7e7..a0802e8 100644
--- a/Penilaian Literasi/iClOP-V2/resources/views/literacy/student/assessments/modals/confirmation.blade.php	
+++ b/Penilaian Literasi/iClOP-V2/resources/views/literacy/student/assessments/modals/confirmation.blade.php	
@@ -1,3 +1,5 @@
+@include('literacy.student.assessments.modals.loading')
+
 <!-- Modal Konfirmasi -->
 <div class="modal fade" id="confirmSubmitModal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
@@ -19,30 +21,57 @@
 
 <!-- Skrip JavaScript untuk Submit Assessment -->
 <script>
+    function showLoadingFeedback() {
+        $('#loadingIcon').show();
+        $('#successIcon').hide();
+        $('#errorIcon').hide();
+        $('#loadingText').text("Mohon tunggu, sedang menyelesaikan asesmen...");
+        $('#loadingModal').modal({backdrop: 'static', keyboard: false});
+        $('#loadingModal').modal('show');
+    }
+
+    function showSuccessFeedback() {
+        $('#loadingIcon').hide();
+        $('#successIcon').show();
+        $('#errorIcon').hide();
+        $('#loadingText').text("Berhasil menyelesaikan asesmen!");
+    }
+
+    function showErrorFeedback(message) {
+        $('#loadingIcon').hide();
+        $('#successIcon').hide();
+        $('#errorIcon').show();
+        $('#loadingText').text(message || "Terjadi kesalahan saat menyelesaikan asesmen.");
+    }
+
     function submitAssessment() {
-        var assessmentId = {{ $assessment->id ?? 'null' }}; // Pastikan ID ada
+        var assessmentId = {{ $assessment->id ?? 'null' }};
 
         if (!assessmentId) {
             alert("Terjadi kesalahan: ID asesmen tidak ditemukan.");
             return;
         }
 
+        $('#confirmSubmitModal').modal('hide');
+        showLoadingFeedback();
+
         $.ajax({
-            url: "/literacy/student/assessment/submit/" + assessmentId, // Perbaiki URL sesuai route
+            url: "/literacy/student/assessment/submit/" + assessmentId,
             type: "POST",
             headers: {
-                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content') // Pastikan CSRF Token dikirim
+                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
             },
             success: function(response) {
-                alert(response.message);
-                window.location.href = "/literacy/student/assessments"; // Redirect ke halaman indeks asesmen
+                showSuccessFeedback();
+                setTimeout(function() {
+                    $('#loadingModal').modal('hide');
+                    window.location.href = "/literacy/student/assessments";
+                }, 2000);
             },
             error: function(xhr) {
                 console.error(xhr);
-                alert(xhr.responseJSON?.error || "Gagal menyelesaikan asesmen.");
+                showErrorFeedback(xhr.responseJSON?.error || "Gagal menyelesaikan asesmen.");
             }
         });
-
-        $('#confirmSubmitModal').modal('hide'); // Tutup modal setelah klik tombol
     }
 </script>
\ No newline at end of file
diff --git a/Penilaian Literasi/iClOP-V2/resources/views/literacy/student/assessments/modals/loading.blade.php b/Penilaian Literasi/iClOP-V2/resources/views/literacy/student/assessments/modals/loading.blade.php
new file mode 100644
index 0000000..d120ddd
--- /dev/null
+++ b/Penilaian Literasi/iClOP-V2/resources/views/literacy/student/assessments/modals/loading.blade.php	
@@ -0,0 +1,23 @@
+<!-- Modal Loading (Bootstrap 4 Compatible) -->
+<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-md" role="document">
+        <div class="modal-content text-center py-5" style="background: rgba(255, 255, 255, 0.95); border: none;">
+            <div class="d-flex flex-column align-items-center justify-content-center">
+                <!-- Spinner -->
+                <div id="loadingIcon" class="spinner-border text-primary mb-4" role="status" style="width: 4rem; height: 4rem; display: none;">
+                    <span class="sr-only">Loading...</span>
+                </div>
+                <!-- Success -->
+                <div id="successIcon" class="text-success mb-4" style="display: none;">
+                    <i class="fa fa-check-circle" style="font-size: 4rem;"></i>
+                </div>
+                <!-- Error -->
+                <div id="errorIcon" class="text-danger mb-4" style="display: none;">
+                    <i class="fa fa-times-circle" style="font-size: 4rem;"></i>
+                </div>
+                <!-- Text -->
+                <p id="loadingText" style="font-size: 1.25rem; font-weight: 500;">Mohon tunggu, sedang memproses...</p>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file