Find this useful? Enter your email to receive occasional updates for securing PHP code.

Signing you up...

Thank you for signing up!

PHP Decode

<?php // includes/header.php require_once $_SERVER['DOCUMENT_ROOT'] . '/technician-porta..

Decoded Output download

<?php 
// includes/header.php 
require_once $_SERVER['DOCUMENT_ROOT'] . '/technician-portal/config/config.php'; 
require_once $_SERVER['DOCUMENT_ROOT'] . '/technician-portal/config/functions.php'; 
require_once $_SERVER['DOCUMENT_ROOT'] . '/technician-portal/includes/classes/LicenseVerifier.php'; 
 
startSecureSession(); 
$currentUser = getCurrentUser(); 
 
// Verify license status on each page load (with caching) 
$licenseVerifier = new LicenseVerifier(); 
if ($licenseVerifier->isPortalLocked() || !$licenseVerifier->verifyLicense()) { 
    // Clear any existing sessions 
    session_destroy(); 
     
    // Redirect to a lock page or show error 
    die('Portal access has been revoked. Please contact your administrator.'); 
} 
?> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Technician Portal</title> 
 
    <!-- CSS Files --> 
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css" rel="stylesheet"> 
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet"> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> 
    <link href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" rel="stylesheet"> 
 
 
    <!-- JavaScript Files --> 
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> 
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script> 
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script> 
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> 
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script> 
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script> 
<!-- Add this after your existing Bootstrap and other CSS links --> 
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> 
 
 
<script src="<?php echo SITE_URL; ?>/assets/js/NotificationSystem.js"></script> 
    <!-- Custom CSS --> 
    <style> 
/* Header Theme Variables */ 
:root { 
  --header-height: 70px; 
  --header-bg: rgba(255, 255, 255, 0.98); 
  --header-border: rgba(229, 231, 235, 0.5); 
  --header-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); 
  --notification-primary: #4f46e5; 
  --notification-bg: #eff6ff; 
  --dropdown-shadow:  
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 
    0 4px 6px -2px rgba(0, 0, 0, 0.05); 
} 
 
/* Main Container */ 
.main-container { 
  display: flex; 
  flex-direction: column; 
  min-height: 100vh; 
} 
 
/* Top Header */ 
.top-header { 
  height: var(--header-height); 
  background: var(--header-bg); 
  border-bottom: 1px solid var(--header-border); 
  backdrop-filter: blur(10px); 
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  z-index: 1000; 
  padding: 0 1.5rem; 
  box-shadow: var(--header-shadow); 
} 
 
/* Page Title */ 
.top-header h4 { 
  color: #1f2937; 
  font-weight: 600; 
  font-size: 1.25rem; 
  margin-left: 1rem; 
  position: relative; 
} 
 
.top-header h4::after { 
  content: ''; 
  position: absolute; 
  bottom: -6px; 
  left: 0; 
  width: 40px; 
  height: 3px; 
  background: linear-gradient(90deg, #4f46e5, #818cf8); 
  border-radius: 2px; 
  opacity: 0; 
  transform: scaleX(0); 
  transition: all 0.3s ease; 
} 
 
.top-header h4:hover::after { 
  opacity: 1; 
  transform: scaleX(1); 
} 
 
/* Sidebar Toggle Button */ 
#sidebarToggle { 
  color: #4b5563; 
  padding: 0.5rem; 
  border-radius: 8px; 
  transition: all 0.2s ease; 
} 
 
#sidebarToggle:hover { 
  background: rgba(79, 70, 229, 0.1); 
  color: #4f46e5; 
} 
 
/* Notification Bell */ 
.notification-bell { 
  position: relative; 
  padding: 0.5rem; 
  cursor: pointer; 
  border-radius: 8px; 
  transition: all 0.2s ease; 
} 
 
.notification-bell:hover { 
  background: rgba(79, 70, 229, 0.1); 
} 
 
.notification-bell i { 
  color: #4b5563; 
  transition: all 0.2s ease; 
} 
 
.notification-bell:hover i { 
  color: #4f46e5; 
  transform: rotate(12deg); 
} 
 
.notification-count { 
  position: absolute; 
  top: 0; 
  right: 0; 
  background: #ef4444; 
  color: white; 
  font-size: 0.75rem; 
  padding: 0.125rem 0.375rem; 
  border-radius: 999px; 
  font-weight: 600; 
  transform: translate(25%, -25%); 
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2); 
} 
 
/* Notification Dropdown */ 
.notification-dropdown { 
  width: 320px; 
  padding: 0; 
  border: none; 
  border-radius: 12px; 
  box-shadow: var(--dropdown-shadow); 
  margin-top: 0.75rem; 
} 
 
.dropdown-header { 
  padding: 1rem; 
  font-weight: 600; 
  color: #1f2937; 
  background: rgba(249, 250, 251, 0.8); 
  border-radius: 12px 12px 0 0; 
} 
 
.notifications-content { 
  max-height: 360px; 
  overflow-y: auto; 
  padding: 0.5rem; 
} 
 
/* User Dropdown */ 
.dropdown-toggle { 
  padding: 0.5rem 1rem; 
  color: #1f2937; 
  font-weight: 500; 
  border-radius: 8px; 
  transition: all 0.2s ease; 
} 
 
.dropdown-toggle:hover { 
  background: rgba(79, 70, 229, 0.1); 
  color: #4f46e5; 
} 
 
.dropdown-toggle::after { 
  margin-left: 0.5rem; 
  vertical-align: middle; 
  transition: transform 0.2s ease; 
} 
 
.show .dropdown-toggle::after { 
  transform: rotate(180deg); 
} 
 
.dropdown-menu { 
  border: none; 
  border-radius: 12px; 
  box-shadow: var(--dropdown-shadow); 
  margin-top: 0.75rem; 
  padding: 0.5rem; 
} 
 
.dropdown-item { 
  padding: 0.75rem 1rem; 
  color: #4b5563; 
  border-radius: 8px; 
  transition: all 0.2s ease; 
} 
 
.dropdown-item:hover { 
  background: rgba(79, 70, 229, 0.1); 
  color: #4f46e5; 
} 
 
/* Content Wrapper */ 
.content-wrapper { 
  margin-top: var(--header-height); 
  margin-left: 250px; /* Adjust based on your sidebar width */ 
  padding: 2rem; 
  transition: margin-left 0.3s ease; 
} 
 
/* Responsive Design */ 
@media (max-width: 768px) { 
  .content-wrapper { 
    margin-left: 0; 
  } 
   
  .top-header { 
    padding: 0 1rem; 
  } 
   
  .notification-dropdown { 
    width: 280px; 
  } 
} 
    </style> 
 
    <script> 
        document.addEventListener('DOMContentLoaded', function() { 
    // Notification bell animation 
    const notificationBell = document.querySelector('.notification-bell'); 
    if (notificationBell) { 
        // Initial animation 
        setTimeout(() => { 
            notificationBell.style.animation = 'bellShake 1s cubic-bezier(0.36, 0, 0.66, -0.56) forwards'; 
        }, 1000); 
 
        // Animation on hover 
        notificationBell.addEventListener('mouseenter', () => { 
            notificationBell.style.animation = 'bellShake 0.5s cubic-bezier(0.36, 0, 0.66, -0.56)'; 
        }); 
    } 
 
    // Handle notification updates 
    function updateNotifications() { 
        const notificationCount = document.querySelector('.notification-count'); 
        const notificationsContent = document.querySelector('.notifications-content'); 
         
        // Fetch notifications (mock implementation) 
        fetch('/api/notifications') 
            .then(response => response.json()) 
            .then(data => { 
                if (data.count > 0) { 
                    notificationCount.textContent = data.count; 
                    notificationCount.style.display = 'block'; 
                     
                    if (data.count > parseInt(notificationCount.textContent)) { 
                        notificationBell.style.animation = 'bellShake 1s cubic-bezier(0.36, 0, 0.66, -0.56)'; 
                    } 
                } else { 
                    notificationCount.style.display = 'none'; 
                } 
            }) 
            .catch(error => console.error('Error fetching notifications:', error)); 
    } 
 
    // Mobile sidebar toggle 
    const sidebarToggle = document.getElementById('sidebarToggle'); 
    const mainContainer = document.querySelector('.main-container'); 
     
    if (sidebarToggle) { 
        sidebarToggle.addEventListener('click', () => { 
            mainContainer.classList.toggle('sidebar-open'); 
            const isOpen = mainContainer.classList.contains('sidebar-open'); 
             
            // Animate the icon 
            sidebarToggle.querySelector('i').style.transform = isOpen ? 'rotate(90deg)' : 'rotate(0)'; 
        }); 
    } 
 
    // Add animation styles 
    const style = document.createElement('style'); 
    style.textContent = ` 
        @keyframes bellShake { 
            0% { transform: rotate(0); } 
            15% { transform: rotate(15deg); } 
            30% { transform: rotate(-15deg); } 
            45% { transform: rotate(10deg); } 
            60% { transform: rotate(-10deg); } 
            75% { transform: rotate(5deg); } 
            85% { transform: rotate(-5deg); } 
            92% { transform: rotate(3deg); } 
            100% { transform: rotate(0); } 
        } 
 
        @keyframes slideDown { 
            from { 
                opacity: 0; 
                transform: translateY(-10px); 
            } 
            to { 
                opacity: 1; 
                transform: translateY(0); 
            } 
        } 
 
        .dropdown-menu.show { 
            animation: slideDown 0.2s ease forwards; 
        } 
    `; 
    document.head.appendChild(style); 
 
    // Update notifications periodically 
    updateNotifications(); 
    setInterval(updateNotifications, 30000); // Every 30 seconds 
}); 
    </script> 
 
<script> 
// Initialize Header Components 
document.addEventListener('DOMContentLoaded', function() { 
    // User Avatar Initial 
    const userAvatar = document.querySelector('.user-avatar'); 
    if (userAvatar) { 
        const userName = document.querySelector('.user-name').textContent; 
        userAvatar.textContent = userName.charAt(0).toUpperCase(); 
    } 
 
    // Mobile Menu Toggle 
    const menuToggle = document.getElementById('sidebarToggle'); 
    const body = document.body; 
     
    menuToggle?.addEventListener('click', () => { 
        body.classList.toggle('sidebar-open'); 
        document.querySelector('.sidebar').classList.toggle('show'); 
    }); 
 
    // Close sidebar when clicking outside 
    document.addEventListener('click', (e) => { 
        if (body.classList.contains('sidebar-open') &&  
            !e.target.closest('.sidebar') &&  
            !e.target.closest('#sidebarToggle')) { 
            body.classList.remove('sidebar-open'); 
            document.querySelector('.sidebar').classList.remove('show'); 
        } 
    }); 
 
    // Enhanced Notifications 
    let notificationTimeout; 
    const notificationBell = document.querySelector('.notification-bell'); 
     
    notificationBell?.addEventListener('mouseenter', () => { 
        clearTimeout(notificationTimeout); 
        notificationBell.classList.add('active'); 
    }); 
 
    notificationBell?.addEventListener('mouseleave', () => { 
        notificationTimeout = setTimeout(() => { 
            notificationBell.classList.remove('active'); 
        }, 300); 
    }); 
 
    // Smooth Scroll Shadow 
    const header = document.querySelector('.top-header'); 
    let lastScroll = 0; 
 
    window.addEventListener('scroll', () => { 
        const currentScroll = window.pageYOffset; 
        if (currentScroll > lastScroll && currentScroll > 80) { 
            header.style.boxShadow = '0 4px 12px rgba(0,0,0,0.05)'; 
        } else { 
            header.style.boxShadow = '0 2px 4px rgba(0,0,0,0.03)'; 
        } 
        lastScroll = currentScroll; 
    }); 
}); 
 
// Enhanced Notification Loading 
function loadNotifications() { 
    const notificationContent = document.querySelector('.notifications-content'); 
    if (!notificationContent) return; 
 
    fetch(SITE_URL + '/api/notifications.php') 
        .then(response => response.json()) 
        .then(data => { 
            document.querySelector('.notification-count').textContent = data.unread_count; 
            notificationContent.innerHTML = data.html; 
             
            // Add animation to new notifications 
            const newNotifications = notificationContent.querySelectorAll('.new-notification'); 
            newNotifications.forEach(notification => { 
                notification.classList.add('animate-in'); 
            }); 
        }) 
        .catch(error => console.error('Error loading notifications:', error)); 
} 
 
// Initialize on load 
document.addEventListener('DOMContentLoaded', () => { 
    loadNotifications(); 
    setInterval(loadNotifications, 60000); // Refresh every minute 
}); 
</script> 
</head> 
<body> 
    <?php if(isset($currentUser)): ?> 
        <div class="main-container"> 
            <!-- Include Top Header --> 
            <header class="top-header"> 
                <div class="d-flex justify-content-between align-items-center h-100"> 
                    <div class="d-flex align-items-center"> 
                        <button class="btn btn-link d-md-none" id="sidebarToggle"> 
                            <i class="fas fa-bars"></i> 
                        </button> 
                        <h4 class="mb-0 ms-2"><?php echo isset($pageTitle) ? $pageTitle : 'Dashboard'; ?></h4> 
                    </div> 
                    <div class="d-flex align-items-center"> 
                        <div class="dropdown me-3"> 
                            <div class="notification-bell" data-bs-toggle="dropdown"> 
                                <i class="fas fa-bell fa-lg"></i> 
                                <span class="notification-count">0</span> 
                            </div> 
                            <div class="dropdown-menu dropdown-menu-end notification-dropdown"> 
                                <div class="dropdown-header">Notifications</div> 
                                <div class="dropdown-divider"></div> 
                                <div class="notifications-content"> 
                                    <!-- Notifications will be loaded here --> 
                                </div> 
                            </div> 
                        </div> 
                        <div class="dropdown"> 
                            <button class="btn btn-link dropdown-toggle" type="button" data-bs-toggle="dropdown"> 
                                <?php echo htmlspecialchars($currentUser['full_name']); ?> 
                            </button> 
                            <ul class="dropdown-menu dropdown-menu-end"> 
                                <li><a class="dropdown-item" href="<?php echo SITE_URL; ?>/profile.php">My Profile</a></li> 
                                <li><hr class="dropdown-divider"></li> 
                                <li><a class="dropdown-item" href="<?php echo SITE_URL; ?>/change_password.php"> 
        <i class="fas fa-key"></i> Change Password 
    </a></li> 
                                <li><hr class="dropdown-divider"></li> 
                                <li><a class="dropdown-item" href="<?php echo SITE_URL; ?>/auth/logout.php">Logout</a></li> 
                            </ul> 
                        </div> 
                    </div> 
                </div> 
            </header> 
 
            <!-- Include Sidebar --> 
            <?php require_once $_SERVER['DOCUMENT_ROOT'] . '/technician-portal/includes/sidebar.php'; ?> 
 
            <!-- Content Wrapper --> 
            <div class="content-wrapper"> 
                <!-- Page content will be inserted here --> 
    <?php endif; ?> 
 
<!-- Common JavaScript functions --> 
<script src="<?php echo SITE_URL; ?>/assets/js/chat.js"></script> 
<script src="<?php echo SITE_URL; ?>/assets/js/main.js"></script> 
 
<script> 
// Notification functions 
function loadNotifications() { 
    $.get(SITE_URL + '/api/notifications.php', function(data) { 
        $('#notification-count').text(data.unread_count); 
        $('.notifications-content').html(data.html); 
    }); 
} 
 
// Initialize components 
$(document).ready(function() { 
    // Initialize Select2 
    $('.select2').select2(); 
     
    // Load initial notifications 
    loadNotifications(); 
     
    // Refresh notifications every minute 
    setInterval(loadNotifications, 60000); 
 
    // Mobile menu toggle 
    $('#menu-toggle').click(function(e) { 
        e.preventDefault(); 
        $('.sidebar').toggleClass('show'); 
    }); 
}); 
 
// Show loading spinner 
function showLoading() { 
    $('.loading-spinner').show(); 
} 
 
// Hide loading spinner 
function hideLoading() { 
    $('.loading-spinner').hide(); 
} 
</script> 
 
<!-- Add this right after your jQuery and Bootstrap script includes --> 
<script> 
    const SITE_URL = '<?php echo SITE_URL; ?>'; 
</script>

Did this file decode correctly?

Original Code

<?php
// includes/header.php
require_once $_SERVER['DOCUMENT_ROOT'] . '/technician-portal/config/config.php';
require_once $_SERVER['DOCUMENT_ROOT'] . '/technician-portal/config/functions.php';
require_once $_SERVER['DOCUMENT_ROOT'] . '/technician-portal/includes/classes/LicenseVerifier.php';

startSecureSession();
$currentUser = getCurrentUser();

// Verify license status on each page load (with caching)
$licenseVerifier = new LicenseVerifier();
if ($licenseVerifier->isPortalLocked() || !$licenseVerifier->verifyLicense()) {
    // Clear any existing sessions
    session_destroy();
    
    // Redirect to a lock page or show error
    die('Portal access has been revoked. Please contact your administrator.');
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Technician Portal</title>

    <!-- CSS Files -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" rel="stylesheet">


    <!-- JavaScript Files -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
<!-- Add this after your existing Bootstrap and other CSS links -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />


<script src="<?php echo SITE_URL; ?>/assets/js/NotificationSystem.js"></script>
    <!-- Custom CSS -->
    <style>
/* Header Theme Variables */
:root {
  --header-height: 70px;
  --header-bg: rgba(255, 255, 255, 0.98);
  --header-border: rgba(229, 231, 235, 0.5);
  --header-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  --notification-primary: #4f46e5;
  --notification-bg: #eff6ff;
  --dropdown-shadow: 
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Main Container */
.main-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Top Header */
.top-header {
  height: var(--header-height);
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  backdrop-filter: blur(10px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0 1.5rem;
  box-shadow: var(--header-shadow);
}

/* Page Title */
.top-header h4 {
  color: #1f2937;
  font-weight: 600;
  font-size: 1.25rem;
  margin-left: 1rem;
  position: relative;
}

.top-header h4::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #4f46e5, #818cf8);
  border-radius: 2px;
  opacity: 0;
  transform: scaleX(0);
  transition: all 0.3s ease;
}

.top-header h4:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Sidebar Toggle Button */
#sidebarToggle {
  color: #4b5563;
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}

#sidebarToggle:hover {
  background: rgba(79, 70, 229, 0.1);
  color: #4f46e5;
}

/* Notification Bell */
.notification-bell {
  position: relative;
  padding: 0.5rem;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.notification-bell:hover {
  background: rgba(79, 70, 229, 0.1);
}

.notification-bell i {
  color: #4b5563;
  transition: all 0.2s ease;
}

.notification-bell:hover i {
  color: #4f46e5;
  transform: rotate(12deg);
}

.notification-count {
  position: absolute;
  top: 0;
  right: 0;
  background: #ef4444;
  color: white;
  font-size: 0.75rem;
  padding: 0.125rem 0.375rem;
  border-radius: 999px;
  font-weight: 600;
  transform: translate(25%, -25%);
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

/* Notification Dropdown */
.notification-dropdown {
  width: 320px;
  padding: 0;
  border: none;
  border-radius: 12px;
  box-shadow: var(--dropdown-shadow);
  margin-top: 0.75rem;
}

.dropdown-header {
  padding: 1rem;
  font-weight: 600;
  color: #1f2937;
  background: rgba(249, 250, 251, 0.8);
  border-radius: 12px 12px 0 0;
}

.notifications-content {
  max-height: 360px;
  overflow-y: auto;
  padding: 0.5rem;
}

/* User Dropdown */
.dropdown-toggle {
  padding: 0.5rem 1rem;
  color: #1f2937;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.dropdown-toggle:hover {
  background: rgba(79, 70, 229, 0.1);
  color: #4f46e5;
}

.dropdown-toggle::after {
  margin-left: 0.5rem;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.show .dropdown-toggle::after {
  transform: rotate(180deg);
}

.dropdown-menu {
  border: none;
  border-radius: 12px;
  box-shadow: var(--dropdown-shadow);
  margin-top: 0.75rem;
  padding: 0.5rem;
}

.dropdown-item {
  padding: 0.75rem 1rem;
  color: #4b5563;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.dropdown-item:hover {
  background: rgba(79, 70, 229, 0.1);
  color: #4f46e5;
}

/* Content Wrapper */
.content-wrapper {
  margin-top: var(--header-height);
  margin-left: 250px; /* Adjust based on your sidebar width */
  padding: 2rem;
  transition: margin-left 0.3s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
  .content-wrapper {
    margin-left: 0;
  }
  
  .top-header {
    padding: 0 1rem;
  }
  
  .notification-dropdown {
    width: 280px;
  }
}
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
    // Notification bell animation
    const notificationBell = document.querySelector('.notification-bell');
    if (notificationBell) {
        // Initial animation
        setTimeout(() => {
            notificationBell.style.animation = 'bellShake 1s cubic-bezier(0.36, 0, 0.66, -0.56) forwards';
        }, 1000);

        // Animation on hover
        notificationBell.addEventListener('mouseenter', () => {
            notificationBell.style.animation = 'bellShake 0.5s cubic-bezier(0.36, 0, 0.66, -0.56)';
        });
    }

    // Handle notification updates
    function updateNotifications() {
        const notificationCount = document.querySelector('.notification-count');
        const notificationsContent = document.querySelector('.notifications-content');
        
        // Fetch notifications (mock implementation)
        fetch('/api/notifications')
            .then(response => response.json())
            .then(data => {
                if (data.count > 0) {
                    notificationCount.textContent = data.count;
                    notificationCount.style.display = 'block';
                    
                    if (data.count > parseInt(notificationCount.textContent)) {
                        notificationBell.style.animation = 'bellShake 1s cubic-bezier(0.36, 0, 0.66, -0.56)';
                    }
                } else {
                    notificationCount.style.display = 'none';
                }
            })
            .catch(error => console.error('Error fetching notifications:', error));
    }

    // Mobile sidebar toggle
    const sidebarToggle = document.getElementById('sidebarToggle');
    const mainContainer = document.querySelector('.main-container');
    
    if (sidebarToggle) {
        sidebarToggle.addEventListener('click', () => {
            mainContainer.classList.toggle('sidebar-open');
            const isOpen = mainContainer.classList.contains('sidebar-open');
            
            // Animate the icon
            sidebarToggle.querySelector('i').style.transform = isOpen ? 'rotate(90deg)' : 'rotate(0)';
        });
    }

    // Add animation styles
    const style = document.createElement('style');
    style.textContent = `
        @keyframes bellShake {
            0% { transform: rotate(0); }
            15% { transform: rotate(15deg); }
            30% { transform: rotate(-15deg); }
            45% { transform: rotate(10deg); }
            60% { transform: rotate(-10deg); }
            75% { transform: rotate(5deg); }
            85% { transform: rotate(-5deg); }
            92% { transform: rotate(3deg); }
            100% { transform: rotate(0); }
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .dropdown-menu.show {
            animation: slideDown 0.2s ease forwards;
        }
    `;
    document.head.appendChild(style);

    // Update notifications periodically
    updateNotifications();
    setInterval(updateNotifications, 30000); // Every 30 seconds
});
    </script>

<script>
// Initialize Header Components
document.addEventListener('DOMContentLoaded', function() {
    // User Avatar Initial
    const userAvatar = document.querySelector('.user-avatar');
    if (userAvatar) {
        const userName = document.querySelector('.user-name').textContent;
        userAvatar.textContent = userName.charAt(0).toUpperCase();
    }

    // Mobile Menu Toggle
    const menuToggle = document.getElementById('sidebarToggle');
    const body = document.body;
    
    menuToggle?.addEventListener('click', () => {
        body.classList.toggle('sidebar-open');
        document.querySelector('.sidebar').classList.toggle('show');
    });

    // Close sidebar when clicking outside
    document.addEventListener('click', (e) => {
        if (body.classList.contains('sidebar-open') && 
            !e.target.closest('.sidebar') && 
            !e.target.closest('#sidebarToggle')) {
            body.classList.remove('sidebar-open');
            document.querySelector('.sidebar').classList.remove('show');
        }
    });

    // Enhanced Notifications
    let notificationTimeout;
    const notificationBell = document.querySelector('.notification-bell');
    
    notificationBell?.addEventListener('mouseenter', () => {
        clearTimeout(notificationTimeout);
        notificationBell.classList.add('active');
    });

    notificationBell?.addEventListener('mouseleave', () => {
        notificationTimeout = setTimeout(() => {
            notificationBell.classList.remove('active');
        }, 300);
    });

    // Smooth Scroll Shadow
    const header = document.querySelector('.top-header');
    let lastScroll = 0;

    window.addEventListener('scroll', () => {
        const currentScroll = window.pageYOffset;
        if (currentScroll > lastScroll && currentScroll > 80) {
            header.style.boxShadow = '0 4px 12px rgba(0,0,0,0.05)';
        } else {
            header.style.boxShadow = '0 2px 4px rgba(0,0,0,0.03)';
        }
        lastScroll = currentScroll;
    });
});

// Enhanced Notification Loading
function loadNotifications() {
    const notificationContent = document.querySelector('.notifications-content');
    if (!notificationContent) return;

    fetch(SITE_URL + '/api/notifications.php')
        .then(response => response.json())
        .then(data => {
            document.querySelector('.notification-count').textContent = data.unread_count;
            notificationContent.innerHTML = data.html;
            
            // Add animation to new notifications
            const newNotifications = notificationContent.querySelectorAll('.new-notification');
            newNotifications.forEach(notification => {
                notification.classList.add('animate-in');
            });
        })
        .catch(error => console.error('Error loading notifications:', error));
}

// Initialize on load
document.addEventListener('DOMContentLoaded', () => {
    loadNotifications();
    setInterval(loadNotifications, 60000); // Refresh every minute
});
</script>
</head>
<body>
    <?php if(isset($currentUser)): ?>
        <div class="main-container">
            <!-- Include Top Header -->
            <header class="top-header">
                <div class="d-flex justify-content-between align-items-center h-100">
                    <div class="d-flex align-items-center">
                        <button class="btn btn-link d-md-none" id="sidebarToggle">
                            <i class="fas fa-bars"></i>
                        </button>
                        <h4 class="mb-0 ms-2"><?php echo isset($pageTitle) ? $pageTitle : 'Dashboard'; ?></h4>
                    </div>
                    <div class="d-flex align-items-center">
                        <div class="dropdown me-3">
                            <div class="notification-bell" data-bs-toggle="dropdown">
                                <i class="fas fa-bell fa-lg"></i>
                                <span class="notification-count">0</span>
                            </div>
                            <div class="dropdown-menu dropdown-menu-end notification-dropdown">
                                <div class="dropdown-header">Notifications</div>
                                <div class="dropdown-divider"></div>
                                <div class="notifications-content">
                                    <!-- Notifications will be loaded here -->
                                </div>
                            </div>
                        </div>
                        <div class="dropdown">
                            <button class="btn btn-link dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                <?php echo htmlspecialchars($currentUser['full_name']); ?>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li><a class="dropdown-item" href="<?php echo SITE_URL; ?>/profile.php">My Profile</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="<?php echo SITE_URL; ?>/change_password.php">
        <i class="fas fa-key"></i> Change Password
    </a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="<?php echo SITE_URL; ?>/auth/logout.php">Logout</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </header>

            <!-- Include Sidebar -->
            <?php require_once $_SERVER['DOCUMENT_ROOT'] . '/technician-portal/includes/sidebar.php'; ?>

            <!-- Content Wrapper -->
            <div class="content-wrapper">
                <!-- Page content will be inserted here -->
    <?php endif; ?>

<!-- Common JavaScript functions -->
<script src="<?php echo SITE_URL; ?>/assets/js/chat.js"></script>
<script src="<?php echo SITE_URL; ?>/assets/js/main.js"></script>

<script>
// Notification functions
function loadNotifications() {
    $.get(SITE_URL + '/api/notifications.php', function(data) {
        $('#notification-count').text(data.unread_count);
        $('.notifications-content').html(data.html);
    });
}

// Initialize components
$(document).ready(function() {
    // Initialize Select2
    $('.select2').select2();
    
    // Load initial notifications
    loadNotifications();
    
    // Refresh notifications every minute
    setInterval(loadNotifications, 60000);

    // Mobile menu toggle
    $('#menu-toggle').click(function(e) {
        e.preventDefault();
        $('.sidebar').toggleClass('show');
    });
});

// Show loading spinner
function showLoading() {
    $('.loading-spinner').show();
}

// Hide loading spinner
function hideLoading() {
    $('.loading-spinner').hide();
}
</script>

<!-- Add this right after your jQuery and Bootstrap script includes -->
<script>
    const SITE_URL = '<?php echo SITE_URL; ?>';
</script>

Function Calls

None

Variables

None

Stats

MD5 0a97b5483cb3411c26a6cadf9561a011
Eval Count 0
Decode Time 54 ms