// Initialize on DOM ready document.addEventListener('DOMContentLoaded', function() { // Initialize Bootstrap tooltips var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl); }); // Initialize navbar vertical toggle (Collapsed View button) const navbarVerticalToggle = document.querySelector('[data-navbar-vertical-toggle]'); if (navbarVerticalToggle) { navbarVerticalToggle.addEventListener('click', function(e) { e.preventDefault(); const navbar = document.querySelector('.navbar-vertical'); if (navbar) { navbar.classList.toggle('navbar-vertical-collapsed'); // Update localStorage for persistence const isCollapsed = navbar.classList.contains('navbar-vertical-collapsed'); localStorage.setItem('phoenixNavbarVerticalCollapsed', isCollapsed); } }); // Restore navbar state from localStorage const storedState = localStorage.getItem('phoenixNavbarVerticalCollapsed'); if (storedState === 'true') { const navbar = document.querySelector('.navbar-vertical'); if (navbar) { navbar.classList.add('navbar-vertical-collapsed'); } } } // Initialize hamburger menu toggle for mobile const hamburgerToggle = document.querySelector('[data-bs-target="#navbarVerticalCollapse"]'); if (hamburgerToggle) { hamburgerToggle.addEventListener('click', function() { const navbarCollapse = document.getElementById('navbarVerticalCollapse'); if (navbarCollapse) { const bsCollapse = new bootstrap.Collapse(navbarCollapse, { toggle: false }); if (navbarCollapse.classList.contains('show')) { bsCollapse.hide(); } else { bsCollapse.show(); } } }); // Theme toggle functionality const themeToggle = document.getElementById('themeControlToggle'); if (themeToggle) { themeToggle.addEventListener('change', function() { const htmlElement = document.documentElement; if (this.checked) { htmlElement.setAttribute('data-bs-theme', 'dark'); localStorage.setItem('phoenixTheme', 'dark'); } else { htmlElement.setAttribute('data-bs-theme', 'light'); localStorage.setItem('phoenixTheme', 'light'); } }); // Restore theme from localStorage const storedTheme = localStorage.getItem('phoenixTheme'); if (storedTheme) { document.documentElement.setAttribute('data-bs-theme', storedTheme); themeToggle.checked = storedTheme === 'dark'; } } // Close dropdown on mobile when clicking outside document.addEventListener('click', function(event) { if (window.innerWidth <= 768) { const dropdowns = document.querySelectorAll('.dropdown-menu.show'); dropdowns.forEach(dropdown => { if (!dropdown.contains(event.target) && !dropdown.previousElementSibling.contains(event.target)) { const dropdownInstance = bootstrap.Dropdown.getInstance(dropdown.previousElementSibling); if (dropdownInstance) { dropdownInstance.hide(); } } }); } }); }); function switchRole(roleId) { const button = document.querySelector(`[data-role-id="${roleId}"]`); const originalText = button.innerHTML; // Show loading state button.innerHTML = '
Switching...'; button.disabled = true; fetch('{{ route("user.roles.switch") }}', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'), 'Accept': 'application/json' }, body: JSON.stringify({ role_id: roleId }) }) .then(response => response.json()) .then(data => { if (data.success) { // Show success state button.innerHTML = '
Success!'; button.classList.remove('btn-phoenix-primary'); button.classList.add('btn-phoenix-success'); // Show success toast showToast('success', data.message || 'Role switched successfully!', 'Success'); // Reload page after short delay setTimeout(() => { window.location.reload(); }, 1000); } else { // Reset button and show error button.innerHTML = originalText; button.disabled = false; showToast('error', data.message || 'Failed to switch role. Please try again.', 'Error'); } }) .catch(error => { console.error('Error:', error); button.innerHTML = originalText; button.disabled = false; showToast('error', 'An error occurred. Please try again.', 'Error'); }); } // Toast notification system function showToast(type, message, title = '') { const toastId = 'toast-' + Date.now(); const iconMap = { success: 'check-circle', error: 'x-circle', warning: 'alert-triangle', info: 'info' }; const colorMap = { success: 'success', error: 'danger', warning: 'warning', info: 'info' }; const toastHtml = `
${title ? `
${title}
` : ''} ${message}
`; // Create toast container if it doesn't exist let toastContainer = document.querySelector('.toast-container'); if (!toastContainer) { toastContainer = document.createElement('div'); toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3'; toastContainer.style.zIndex = '1080'; document.body.appendChild(toastContainer); } // Add toast to container toastContainer.insertAdjacentHTML('beforeend', toastHtml); // Initialize feather icons in the new toast if (typeof feather !== 'undefined') { feather.replace(); } // Show toast const toastElement = document.getElementById(toastId); const toast = new bootstrap.Toast(toastElement, { autohide: true, delay: 3000 }); toast.show(); // Remove toast element after it's hidden toastElement.addEventListener('hidden.bs.toast', () => { toastElement.remove(); }); } // =============================== // SweetAlert2 Helper Functions // =============================== /** * Show a SweetAlert2 toast at the top-right corner (auto-close after 4s) * @param {string} type - 'success', 'error', 'info', 'warning', 'question' * @param {string} message - Message to display * @param {string} [title] - Optional title */ /** * Show a SweetAlert2 toast at the top-right corner (auto-close after 4s by default) * @param {Object} options - SweetAlert2 options object (icon, title, text, etc.) * @returns {Promise} - Returns Swal.fire promise for chaining .then() */ function showSwalToast(options = {}) { const defaultOptions = { toast: true, position: 'top-end', showConfirmButton: false, timer: 4000, timerProgressBar: true, customClass: { popup: 'swal2-toast' } }; return Swal.fire(Object.assign({}, defaultOptions, options)); } /** * Show a SweetAlert2 modal at the center (auto-close after 4s) * @param {string} type - 'success', 'error', 'info', 'warning', 'question' * @param {string} message - Message to display * @param {string} [title] - Optional title */ /** * Show a SweetAlert2 modal at the center (auto-close after 4s by default) * @param {Object} options - SweetAlert2 options object (icon, title, text, etc.) * @returns {Promise} - Returns Swal.fire promise for chaining .then() */ function showSwalCenter(options = {}) { const defaultOptions = { position: 'center', showConfirmButton: false, timer: 4000, timerProgressBar: true }; return Swal.fire(Object.assign({}, defaultOptions, options)); } // USAGE EXAMPLES: // USAGE EXAMPLES: // showSwalToast({ icon: 'success', title: 'Success', text: 'Saved successfully!' }); // showSwalCenter({ icon: 'error', title: 'Error', text: 'Something went wrong!' }); // showSwalCenter({ // icon: 'question', // title: 'Are you sure?', // text: 'Do you want to proceed?', // showCancelButton: true, // confirmButtonText: 'Yes', // cancelButtonText: 'No' // }).then((result) => { // if (result.isConfirmed) { // // Do something // } // }); // function switchRole(roleId) { // const roleItem = document.querySelector(`[data-role-id="${roleId}"]`); // const roleName = roleItem.getAttribute('data-role-name'); // const rolesList = document.getElementById('rolesList'); // // Show loading state // rolesList.classList.add('role-switch-loading'); // roleItem.innerHTML = ` //
//
//
//
//
//
//
//
Switching to ${roleName}...
//
Please wait
//
//
//
//
//
// `; // // Make AJAX request to switch role // fetch('{{ route("user.roles.switch") }}', { // method: 'POST', // headers: { // 'Content-Type': 'application/json', // 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'), // 'Accept': 'application/json' // }, // body: JSON.stringify({ // role_id: roleId // }) // }) // .then(response => { // if (!response.ok) { // throw new Error(`HTTP error! status: ${response.status}`); // } // return response.json(); // }) // .then(data => { // if (data.success) { // // Show success animation // roleItem.classList.add('role-switch-success'); // roleItem.innerHTML = ` //
//
//
//
//
//
//
//
Successfully switched!
//
Refreshing page...
//
//
//
//
//
// `; // // Show success toast // showToast('success', data.message, 'Role Switch Successful'); // // Redirect to role-specific dashboard if URL provided, otherwise reload // setTimeout(() => { // if (data.redirect_url) { // window.location.href = data.redirect_url; // } else { // window.location.reload(); // } // }, 1500); // } else { // throw new Error(data.message || 'Failed to switch role'); // } // }) // .catch(error => { // console.error('Error switching role:', error); // // Reset to original state with error indication // rolesList.classList.remove('role-switch-loading'); // roleItem.innerHTML = ` //
//
//
//
//
//
//
Switch failed
//
Click to retry
//
//
//
//
//
// `; // // Re-enable clicking // setTimeout(() => { // location.reload(); // Refresh to restore original state // }, 2000); // // Show error toast // showToast('error', error.message || 'An error occurred while switching roles', 'Role Switch Failed'); // }); // }