feat: add fullscreen toggle functionality to the Mermaid flowchart card

resources/views/front/career/index.blade.php

@@ -93,7 +93,11 @@
           <div class="flex flex-col lg:flex-row gap-12 items-start mb-12">
             <!-- Mermaid Flowchart Canvas -->
             <div class="w-full lg:w-3/5">
-              <div class="bg-white p-6 md:p-8 rounded-3xl shadow-xl border border-slate-100 overflow-x-auto flex flex-col items-center">
+              <div id="mermaid-card" class="relative bg-white p-6 md:p-8 rounded-3xl shadow-xl border border-slate-100 overflow-x-auto flex flex-col items-center">
+                <!-- Fullscreen Toggle Button -->
+                <button type="button" onclick="toggleFullscreen()" class="absolute top-4 right-4 p-2.5 rounded-xl bg-slate-50 hover:bg-slate-100 border border-slate-100 hover:border-slate-200 text-slate-500 hover:text-slate-700 transition-all duration-200 shadow-sm flex items-center justify-center z-10" title="Tam Ekran / Fullscreen">
+                  <i id="fullscreen-icon" class="uil uil-expand-arrows-alt text-lg"></i>
+                </button>
                 <span class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4"><i class="uil uil-presentation-play mr-1"></i> {{ __('career.hr_flow_diagram') }}</span>
                 <div class="mermaid w-full flex justify-center" style="min-height: 500px;">
                   graph TD
@@ -488,6 +492,22 @@
   .mermaid svg {
     filter: drop-shadow(0px 10px 20px rgba(15, 23, 42, 0.05));
   }
+
+  /* Fullscreen styles for card container */
+  #mermaid-card:fullscreen,
+  #mermaid-card:-webkit-full-screen,
+  #mermaid-card:-ms-fullscreen {
+    background-color: #ffffff !important;
+    padding: 3rem 2rem !important;
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    justify-content: center !important;
+    overflow: auto !important;
+    border-radius: 0px !important;
+    width: 100% !important;
+    height: 100% !important;
+  }
 </style>
 @endpush
 
@@ -505,6 +525,44 @@
     }
   });
 
+  // Fullscreen toggle logic for Mermaid card
+  function toggleFullscreen() {
+    const card = document.getElementById('mermaid-card');
+    const icon = document.getElementById('fullscreen-icon');
+    
+    if (!document.fullscreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
+      if (card.requestFullscreen) {
+        card.requestFullscreen();
+      } else if (card.webkitRequestFullscreen) { /* Safari */
+        card.webkitRequestFullscreen();
+      } else if (card.msRequestFullscreen) { /* IE11 */
+        card.msRequestFullscreen();
+      }
+    } else {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      }
+    }
+  }
+
+  // Handle icon sync on fullscreen change
+  function handleFullscreenChange() {
+    const icon = document.getElementById('fullscreen-icon');
+    if (document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
+      icon.className = "uil uil-shrink text-lg";
+    } else {
+      icon.className = "uil uil-expand-arrows-alt text-lg";
+    }
+  }
+
+  document.addEventListener('fullscreenchange', handleFullscreenChange);
+  document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
+  document.addEventListener('msfullscreenchange', handleFullscreenChange);
+
   // Step variables
   let currentStep = 1;