<?php
// Start session
require_once 'session_config_emp.php';

// Check if employee is logged in
if (!isset($_SESSION['employee_id']) || !isset($_SESSION['cnic'])) {
    header('Location: login_emp.php');
    exit();
}

require_once 'connect.php';

// Get employee data from session
$employee_id = $_SESSION['employee_id'];
$cnic = $_SESSION['cnic'];
$error = '';
$success = '';

// Check for success/error messages
if (isset($_SESSION['profile_update_success'])) {
    $success = $_SESSION['profile_update_success'];
    unset($_SESSION['profile_update_success']);
}
if (isset($_SESSION['profile_update_error'])) {
    $error = $_SESSION['profile_update_error'];
    unset($_SESSION['profile_update_error']);
}

// First, get the personal_no from registrations_emp
$sql_reg = "SELECT emp_numb FROM registrations_emp WHERE id = ? AND cnic = ?";
$stmt_reg = $conn->prepare($sql_reg);
$stmt_reg->bind_param("is", $employee_id, $cnic);
$stmt_reg->execute();
$result_reg = $stmt_reg->get_result();

if ($result_reg->num_rows > 0) {
    $reg_data = $result_reg->fetch_assoc();
    $personal_no = $reg_data['emp_numb'];
    
    // Now get full employee details from employees table with all joins
    $emp_sql = "SELECT e.*, 
               d.district_name, 
               t.tehsil_name,
               c.cons_name,
               u.uc_name,
               s.school_name,
               es.status_name,
               ds.designation_name as current_designation,
               ds2.designation_name as initially_appointed_as_name,
               nk.relationship_name,
               eq.quota_type,
               ts.ts_name as time_scale_name,
               bps.bps_name
        FROM employees e
        LEFT JOIN districts d ON e.district_id = d.district_id
        LEFT JOIN tehsils t ON e.tehsil_id = t.tehsil_id
        LEFT JOIN constituency c ON e.constituency_id = c.cons_id
        LEFT JOIN union_councils u ON e.union_council_id = u.uc_id
        LEFT JOIN school_emis s ON e.current_school_emis = s.emis_code
        LEFT JOIN employment_status es ON e.employment_type_id = es.status_id
        LEFT JOIN designations ds ON e.current_designation_id = ds.des_id
        LEFT JOIN designations ds2 ON e.initially_appointed_as_id = ds2.des_id
        LEFT JOIN next_kin nk ON e.next_of_kin_relation_id = nk.relationship_id
        LEFT JOIN quota eq ON e.employment_quota_id = eq.quota_id
        LEFT JOIN time_scales ts ON e.current_time_scale_id = ts.ts_id
        LEFT JOIN bps ON e.current_bps_id = bps.bps_id
        WHERE e.personal_no = ? LIMIT 1";
    
    $stmt_emp = $conn->prepare($emp_sql);
    $stmt_emp->bind_param("s", $personal_no);
    $stmt_emp->execute();
    $emp_result = $stmt_emp->get_result();
    
    if ($emp_result->num_rows > 0) {
        $row = $emp_result->fetch_assoc();
        $db_employee_id = $row['employee_id'];
    } else {
        // Try to find by CNIC if personal_no doesn't work
        $emp_sql2 = "SELECT e.*, 
                   d.district_name, 
                   t.tehsil_name,
                   c.cons_name,
                   u.uc_name,
                   s.school_name,
                   es.status_name,
                   ds.designation_name as current_designation,
                   ds2.designation_name as initially_appointed_as_name,
                   nk.relationship_name,
                   eq.quota_type,
                   ts.ts_name as time_scale_name,
                   bps.bps_name
            FROM employees e
            LEFT JOIN districts d ON e.district_id = d.district_id
            LEFT JOIN tehsils t ON e.tehsil_id = t.tehsil_id
            LEFT JOIN constituency c ON e.constituency_id = c.cons_id
            LEFT JOIN union_councils u ON e.union_council_id = u.uc_id
            LEFT JOIN school_emis s ON e.current_school_emis = s.emis_code
            LEFT JOIN employment_status es ON e.employment_type_id = es.status_id
            LEFT JOIN designations ds ON e.current_designation_id = ds.des_id
            LEFT JOIN designations ds2 ON e.initially_appointed_as_id = ds2.des_id
            LEFT JOIN next_kin nk ON e.next_of_kin_relation_id = nk.relationship_id
            LEFT JOIN quota eq ON e.employment_quota_id = eq.quota_id
            LEFT JOIN time_scales ts ON e.current_time_scale_id = ts.ts_id
            LEFT JOIN bps ON e.current_bps_id = bps.bps_id
            WHERE e.cnic = ? LIMIT 1";
        
        $stmt_emp2 = $conn->prepare($emp_sql2);
        $stmt_emp2->bind_param("s", $cnic);
        $stmt_emp2->execute();
        $emp_result2 = $stmt_emp2->get_result();
        
        if ($emp_result2->num_rows > 0) {
            $row = $emp_result2->fetch_assoc();
            $personal_no = $row['personal_no'];
            $db_employee_id = $row['employee_id'];
        } else {
            $error = "Employee record not found in main database.";
        }
    }
} else {
    $error = "Registration record not found.";
}

// Close statements
if (isset($stmt_reg)) $stmt_reg->close();
if (isset($stmt_emp)) $stmt_emp->close();
if (isset($stmt_emp2)) $stmt_emp2->close();

// Functions
function calculateRetirementDate($date_of_birth) {
    if (!empty($date_of_birth) && $date_of_birth != '0000-00-00') {
        $dob = new DateTime($date_of_birth);
        $dob->modify('+60 years');
        return $dob->format('Y-m-d');
    }
    return '';
}

function calculateYearsOfService($appointment_date) {
    if (!empty($appointment_date) && $appointment_date != '0000-00-00') {
        $appointment = new DateTime($appointment_date);
        $today = new DateTime();
        $interval = $appointment->diff($today);
        return $interval->y . ' years, ' . $interval->m . ' months';
    }
    return '';
}

function formatDate($date) {
    if (empty($date) || $date == '0000-00-00' || $date == '0000-00-00 00:00:00') {
        return 'Not set';
    }
    return date("d-m-Y", strtotime($date));
}

function formatDateForInput($date) {
    if (empty($date) || $date == '0000-00-00' || $date == '0000-00-00 00:00:00') {
        return '';
    }
    return date("Y-m-d", strtotime($date));
}

// Calculate additional information
if (isset($row) && !empty($row['date_of_birth']) && $row['date_of_birth'] != '0000-00-00') {
    $calculated_retirement = calculateRetirementDate($row['date_of_birth']);
    $row['calculated_retirement'] = $calculated_retirement;
    $row['years_of_service'] = calculateYearsOfService($row['appointment_date']);
    
    // Calculate age
    $birthDate = new DateTime($row['date_of_birth']);
    $today = new DateTime();
    $age = $birthDate->diff($today)->y;
    $row['age'] = $age;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Employee Profile</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
    :root {
        --primary-green: #198754;
        --secondary-green: #157347;
        --light-green: #d1e7dd;
        --purple: #6f42c1;
        --primary-blue: #0d6efd;
    }
    
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f8f9fa;
        margin: 0;
        padding: 0;
        min-height: 100vh;
    }
    
    /* Sidebar Styles */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: 280px;
        height: 100vh;
        background: linear-gradient(180deg, #198754 0%, #0d6efd 100%);
        color: white;
        z-index: 1000;
        overflow-y: auto;
        box-shadow: 3px 0 15px rgba(0,0,0,0.1);
    }
    
    .sidebar-header {
        padding: 25px 20px;
        text-align: center;
        background: rgba(0,0,0,0.2);
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .sidebar-photo-container {
        position: relative;
        width: 120px;
        height: 120px;
        margin: 0 auto 20px;
    }
    
    .sidebar-photo {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid rgba(255,255,255,0.3);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }
    
    .sidebar-photo-default {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: rgba(255,255,255,0.1);
        border: 4px solid rgba(255,255,255,0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 48px;
        color: rgba(255,255,255,0.5);
    }
    
    .sidebar-photo-change {
        position: absolute;
        bottom: 0;
        right: 0;
        background: var(--primary-green);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: 3px solid white;
        transition: all 0.3s ease;
    }
    
    .sidebar-photo-change:hover {
        background: var(--secondary-green);
        transform: scale(1.1);
    }
    
    .sidebar-employee-info {
        text-align: center;
    }
    
    .sidebar-employee-name {
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 5px;
        color: white;
    }
    
    .sidebar-employee-pno {
        font-size: 0.9rem;
        opacity: 0.9;
        margin-bottom: 5px;
    }
    
    .sidebar-employee-designation {
        font-size: 0.85rem;
        opacity: 0.8;
        font-style: italic;
    }
    
    .sidebar-btn {
        padding: 15px 25px;
        display: flex;
        align-items: center;
        gap: 15px;
        cursor: pointer;
        transition: all 0.3s ease;
        border-left: 4px solid transparent;
        text-decoration: none;
        color: white;
        border: none;
        background: none;
        width: 100%;
        text-align: left;
    }
    
    .sidebar-btn:hover {
        background: rgba(255,255,255,0.1);
        border-left-color: white;
        padding-left: 30px;
    }
    
    .sidebar-btn.active {
        background: rgba(255,255,255,0.15);
        border-left-color: white;
        font-weight: 500;
    }
    
    .sidebar-btn i {
        width: 20px;
        text-align: center;
        font-size: 1.1rem;
    }
    
    /* Main Content Styles */
    .main-content {
        margin-left: 280px;
        padding: 30px;
        min-height: 100vh;
    }
    
    @media (max-width: 768px) {
        .sidebar {
            width: 100%;
            height: auto;
            position: relative;
            margin-bottom: 20px;
        }
        .main-content {
            margin-left: 0;
            padding: 20px;
        }
    }
    
    /* Profile Card Styles */
    .profile-card {
        border: none;
        border-radius: 15px;
        box-shadow: 0 5px 25px rgba(0,0,0,0.1);
        background: white;
        overflow: hidden;
    }
    
    .profile-header {
        background: linear-gradient(135deg, #198754 0%, #0d6efd 100%);
        color: white;
        padding: 30px;
    }
    
    .status-badge {
        display: inline-block;
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 500;
        color: white;
    }
    
    .age-info {
        background: rgba(255,255,255,0.2);
        padding: 8px 15px;
        border-radius: 10px;
        font-size: 0.9rem;
    }
    
    .retirement-highlight {
        background: linear-gradient(135deg, #fff3cd 0%, #ffecb5 100%);
        border: 1px solid #ffeaa7;
        border-radius: 10px;
        padding: 20px;
        margin: 20px 0;
    }
    
    .info-card {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
        border-left: 4px solid var(--primary-green);
    }
    
    .section-title {
        font-weight: 600;
        color: var(--primary-green);
        margin-bottom: 15px;
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .info-label {
        font-weight: 500;
        color: #666;
        min-width: 200px;
    }
    
    .info-value {
        font-weight: 500;
        color: #333;
    }
    
    .info-row {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eaeaea;
    }
    
    .info-row:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    .profile-actions {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 20px;
        margin-top: 30px;
        border: 1px solid #dee2e6;
    }
    
    .profile-action-buttons {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }
    
    .btn-edit {
        background: var(--primary-green);
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    
    .btn-edit:hover {
        background: var(--secondary-green);
        color: white;
        transform: translateY(-2px);
    }
    
    .btn-back {
        background: #6c757d;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    
    .btn-back:hover {
        background: #5a6268;
        color: white;
        transform: translateY(-2px);
    }
    
    .btn-photo {
        background: var(--purple);
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    
    .btn-photo:hover {
        background: #5a2d9c;
        color: white;
        transform: translateY(-2px);
    }
    
    .alert-notification {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
        min-width: 300px;
        animation: slideIn 0.5s ease;
    }
    
    @keyframes slideIn {
        from { transform: translateX(100%); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
    
    /* Additional Styles */
    .profile-section {
        background: white;
        border-radius: 10px;
        padding: 25px;
        margin-bottom: 25px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    .profile-section-title {
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--primary-blue);
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--light-green);
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    /* Photo Upload Modal */
    .photo-upload-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 9999;
        align-items: center;
        justify-content: center;
    }
    
    .photo-upload-content {
        background: white;
        padding: 30px;
        border-radius: 10px;
        width: 90%;
        max-width: 500px;
        box-shadow: 0 5px 30px rgba(0,0,0,0.3);
    }
    
    /* Academic Qualifications Styles */
    .qualification-card {
        border: 1px solid #dee2e6;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
        transition: all 0.3s ease;
    }
    
    .qualification-card:hover {
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        transform: translateY(-2px);
    }
    
    .degree-badge {
        display: inline-block;
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 500;
        color: white;
        margin-bottom: 10px;
    }
    
    .badge-secondary {
        background: #6c757d;
    }
    
    .badge-higher-secondary {
        background: #0dcaf0;
    }
    
    .badge-bachelor {
        background: #198754;
    }
    
    .badge-master {
        background: #6f42c1;
    }
    
    .badge-mphil {
        background: #fd7e14;
    }
    
    .badge-phd {
        background: #dc3545;
    }
    
    .grade-badge {
        display: inline-block;
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 500;
        color: white;
    }
    
    .grade-1st {
        background: #198754;
    }
    
    .grade-2nd {
        background: #ffc107;
        color: #000;
    }
    
    .grade-3rd {
        background: #dc3545;
    }
    
    .empty-state {
        text-align: center;
        padding: 50px 20px;
        color: #6c757d;
    }
    
    .empty-state i {
        font-size: 64px;
        margin-bottom: 20px;
        color: #dee2e6;
    }
    
    .btn-add {
        background: var(--primary-green);
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        font-weight: 500;
        transition: all 0.3s ease;
    }
</style>
</head>
<body>

<!-- Photo Upload Modal -->
<div class="photo-upload-modal" id="photoUploadModal">
    <div class="photo-upload-content">
        <h4 class="mb-4 text-success">
            <i class="fas fa-camera me-2"></i>Change Profile Picture
        </h4>
        <form method="POST" action="upload_photo.php" enctype="multipart/form-data" id="photoUploadForm">
            <input type="hidden" name="personal_no" value="<?php echo isset($row) ? htmlspecialchars($row['personal_no']) : ''; ?>">
            <input type="hidden" name="employee_id" value="<?php echo $employee_id; ?>">
            
            <div class="mb-4">
                <label class="form-label fw-bold">Select New Photo</label>
                <input type="file" class="form-control" name="profile_photo" id="profilePhoto" accept="image/*" required>
                <div class="form-text">
                    Allowed formats: JPG, PNG, GIF (Max 2MB)
                </div>
            </div>
            
            <div class="mb-4 text-center">
                <h6>Preview:</h6>
                <div id="photoPreviewContainer" class="mb-3">
                    <div id="noPreview" class="text-muted">No preview available</div>
                </div>
            </div>
            
            <div class="d-flex gap-2">
                <button type="submit" name="upload_photo" class="btn btn-success flex-fill">
                    <i class="fas fa-upload me-2"></i>Upload Photo
                </button>
                <button type="button" class="btn btn-secondary flex-fill" onclick="closePhotoUpload()">
                    <i class="fas fa-times me-2"></i>Cancel
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Sidebar -->
<div class="sidebar" id="sidebar">
    <div class="sidebar-header">
        <!-- Employee Photo in Sidebar -->
        <div class="sidebar-photo-container">
            <?php if(isset($row) && !empty($row['photo_path']) && file_exists($row['photo_path'])): ?>
                <img src="<?php echo $row['photo_path']; ?>" class="sidebar-photo" alt="Profile Photo" id="sidebarPhoto">
            <?php else: ?>
                <div class="sidebar-photo-default">
                    <i class="fas fa-user"></i>
                </div>
            <?php endif; ?>
            <?php if(isset($row)): ?>
                <div class="sidebar-photo-change" onclick="openPhotoUpload()" title="Change Picture">
                    <i class="fas fa-camera"></i>
                </div>
            <?php endif; ?>
        </div>
        
        <!-- Employee Information in Sidebar -->
        <div class="sidebar-employee-info">
            <?php if(isset($row)): ?>
                <div class="sidebar-employee-name"><?php echo htmlspecialchars($row['full_name']); ?></div>
                <div class="sidebar-employee-pno"><?php echo htmlspecialchars($row['personal_no']); ?></div>
                <?php if(!empty($row['current_designation'])): ?>
                    <div class="sidebar-employee-designation"><?php echo htmlspecialchars($row['current_designation']); ?></div>
                <?php endif; ?>
            <?php else: ?>
                <div class="sidebar-employee-name"><?php echo htmlspecialchars($_SESSION['employee_name'] ?? 'Employee'); ?></div>
                <div class="sidebar-employee-pno">Personal No: ---</div>
            <?php endif; ?>
        </div>
    </div>
    
    <!-- Sidebar Menu -->
    <button class="sidebar-btn active" onclick="showSection('profile')">
        <i class="fas fa-eye"></i>
        <span>View Profile</span>
    </button>
    
    <button class="sidebar-btn" onclick="showSection('academic')">
        <i class="fas fa-graduation-cap"></i>
        <span>Academic Qualification</span>
    </button>
    
    <button class="sidebar-btn" onclick="showSection('professional')">
        <i class="fas fa-certificate"></i>
        <span>Professional Qualification</span>
    </button>
    
    <button class="sidebar-btn" onclick="showSection('trainings')">
        <i class="fas fa-chalkboard-teacher"></i>
        <span>Trainings</span>
    </button>
    
    <button class="sidebar-btn" onclick="showSection('timetable')">
        <i class="fas fa-calendar-alt"></i>
        <span>Time Table</span>
    </button>
    
    <button class="sidebar-btn" onclick="showSection('transfer')">
        <i class="fas fa-exchange-alt"></i>
        <span>Transfer/Posting</span>
    </button>
    
    <button class="sidebar-btn" onclick="showSection('promotions')">
        <i class="fas fa-chart-line"></i>
        <span>Promotions</span>
    </button>
    
    <a href="employee_dashboard.php" class="sidebar-btn">
        <i class="fas fa-tachometer-alt"></i>
        <span>Back to Dashboard</span>
    </a>
</div>

<!-- Main Content -->
<div class="main-content" id="mainContent">
    <!-- NOTIFICATION ALERTS -->
    <?php if(!empty($error)): ?>
        <div class="alert-notification">
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fas fa-exclamation-circle me-2"></i><?php echo htmlspecialchars($error); ?>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        </div>
    <?php endif; ?>
    
    <?php if(!empty($success)): ?>
        <div class="alert-notification">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fas fa-check-circle me-2"></i><?php echo htmlspecialchars($success); ?>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        </div>
    <?php endif; ?>

    <!-- PROFILE SECTION -->
    <div id="profileSection" class="content-section active">
        <?php if(isset($row)): ?>
            <!-- PROFILE VIEW -->
            <div class="profile-card" id="profileView">
                <!-- PROFILE HEADER -->
                <div class="profile-header">
                    <div class="row align-items-center">
                        <div class="col-md-12">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <h2 class="mb-1"><?php echo htmlspecialchars($row['full_name']); ?></h2>
                                    <p class="mb-2">
                                        <i class="fas fa-id-badge me-1"></i>
                                        Personal No: <strong><?php echo htmlspecialchars($row['personal_no']); ?></strong>
                                        |
                                        <i class="fas fa-id-card me-1"></i>
                                        CNIC: <strong><?php echo htmlspecialchars($row['cnic']); ?></strong>
                                    </p>
                                    <div class="d-flex align-items-center gap-2">
                                        <span class="status-badge <?php echo $row['status'] == 'active' ? 'bg-success' : ($row['status'] == 'retired' ? 'bg-secondary' : 'bg-warning'); ?>">
                                            <i class="fas fa-circle me-1"></i><?php echo ucfirst($row['status']); ?>
                                        </span>
                                        <?php if(!empty($row['current_designation'])): ?>
                                            <span class="status-badge bg-info">
                                                <i class="fas fa-user-tie me-1"></i><?php echo htmlspecialchars($row['current_designation']); ?>
                                            </span>
                                        <?php endif; ?>
                                        <?php if(!empty($row['status_name'])): ?>
                                            <span class="status-badge bg-warning">
                                                <i class="fas fa-briefcase me-1"></i><?php echo htmlspecialchars($row['status_name']); ?>
                                            </span>
                                        <?php endif; ?>
                                        <?php if(!empty($row['quota_type'])): ?>
                                            <span class="status-badge bg-purple">
                                                <i class="fas fa-users me-1"></i><?php echo htmlspecialchars($row['quota_type']); ?>
                                            </span>
                                        <?php endif; ?>
                                    </div>
                                </div>
                                <div class="text-end">
                                    <div class="age-info">
                                        <i class="fas fa-birthday-cake me-1"></i>
                                        <strong>Age:</strong> 
                                        <?php echo $row['age'] ?? 'N/A'; ?> years
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- PROFILE CONTENT -->
                <div class="p-4">
                    <?php if(isset($calculated_retirement)): ?>
                        <!-- RETIREMENT CALCULATION SECTION -->
                        <div class="retirement-highlight mb-4">
                            <div class="row align-items-center">
                                <div class="col-md-8">
                                    <h5 class="mb-1">
                                        <i class="fas fa-calendar-alt text-warning me-2"></i>
                                        Retirement & Service Information
                                    </h5>
                                    <div class="row mt-2">
                                        <div class="col-md-6">
                                            <p class="mb-1"><strong>Date of Birth:</strong> <?php echo formatDate($row['date_of_birth']); ?></p>
                                            <p class="mb-1"><strong>Calculated Retirement:</strong> 
                                                <span class="text-danger fw-bold"><?php echo formatDate($calculated_retirement); ?></span>
                                                (60 years from DOB)
                                            </p>
                                            <p class="mb-1"><strong>Years of Service:</strong> 
                                                <span class="text-primary fw-bold"><?php echo $row['years_of_service'] ?? 'N/A'; ?></span>
                                            </p>
                                        </div>
                                        <div class="col-md-6">
                                            <p class="mb-1"><strong>Actual Retirement Date:</strong> <?php echo formatDate($row['retirement_date']); ?></p>
                                            <p class="mb-1"><strong>Appointment Date:</strong> <?php echo formatDate($row['appointment_date']); ?></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 text-end">
                                    <?php if (!empty($calculated_retirement)): 
                                        $retirementDate = new DateTime($calculated_retirement);
                                        $today = new DateTime();
                                        $daysToRetirement = $today->diff($retirementDate)->days;
                                    ?>
                                        <div class="bg-white p-3 rounded text-center">
                                            <h6 class="text-danger mb-1">Days Until Retirement</h6>
                                            <h2 class="text-danger"><?php echo number_format($daysToRetirement); ?></h2>
                                            <small class="text-muted"><?php echo $retirementDate->format('d M Y'); ?></small>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                    <?php endif; ?>

                    <!-- SECTION 1: PERSONAL INFORMATION -->
                    <div class="profile-section">
                        <h5 class="profile-section-title">
                            <i class="fas fa-user text-primary"></i>Personal Information
                        </h5>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="info-row">
                                    <span class="info-label">Father Name:</span>
                                    <span class="info-value"><?php echo htmlspecialchars($row['father_name'] ?? 'Not set'); ?></span>
                                </div>
                                <div class="info-row">
                                    <span class="info-label">CNIC:</span>
                                    <span class="info-value"><?php echo htmlspecialchars($row['cnic'] ?? 'Not set'); ?></span>
                                </div>
                                <div class="info-row">
                                    <span class="info-label">Gender:</span>
                                    <span class="info-value"><?php echo htmlspecialchars($row['gender'] ?? 'Not set'); ?></span>
                                </div>
                                <div class="info-row">
                                    <span class="info-label">Marital Status:</span>
                                    <span class="info-value"><?php echo htmlspecialchars($row['marital_status'] ?? 'Not set'); ?></span>
                                </div>
                                <div class="info-row">
                                    <span class="info-label">Date of Birth:</span>
                                    <span class="info-value"><?php echo formatDate($row['date_of_birth']); ?></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-row">
                                    <span class="info-label">Birth Place:</span>
                                    <span class="info-value"><?php echo htmlspecialchars($row['birth_place'] ?? 'Not set'); ?></span>
                                </div>
                                <div class="info-row">
                                    <span class="info-label">Retirement Date:</span>
                                    <span class="info-value"><?php echo formatDate($row['retirement_date']); ?></span>
                                </div>
                                <div class="info-row">
                                    <span class="info-label">Employment Quota:</span>
                                    <span class="info-value"><?php echo htmlspecialchars($row['quota_type'] ?? 'Not set'); ?></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- SECTION 2: CONTACT INFORMATION -->
                    <div class="profile-section">
                        <h5 class="profile-section-title">
                            <i class="fas fa-address-book text-primary"></i>Contact Information
                        </h5>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="info-row">
                                    <span class="info-label">Mobile No:</span>
                                    <span class="info-value"><?php echo htmlspecialchars($row['mobile_no'] ?? 'Not set'); ?></span>
                                </div>
                                <div class="info-row">
                                    <span class="info-label">WhatsApp No:</span>
                                    <span class="info-value"><?php echo htmlspecialchars($row['whatsapp_no'] ?? 'Not set'); ?></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-row">
                                    <span class="info-label">GPF No:</span>
                                    <span class="info-value"><?php echo htmlspecialchars($row['gpf_no'] ?? 'Not set'); ?></span>
                                </div>
                                <div class="info-row">
                                    <span class="info-label">DDO Code:</span>
                                    <span class="info-value"><?php echo htmlspecialchars($row['ddo_code'] ?? 'Not set'); ?></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- SECTION 3: NEXT OF KIN -->
                    <div class="profile-section">
                        <h5 class="profile-section-title">
                            <i class="fas fa-users text-primary"></i>Next of Kin Information
                        </h5>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="info-row">
                                    <span class="info-label">Next of Kin Name:</span>
                                    <span class="info-value"><?php echo htmlspecialchars($row['next_of_kin_name'] ?? 'Not set'); ?></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-row">
                                    <span class="info-label">Relationship:</span>
                                    <span class="info-value"><?php echo htmlspecialchars($row['relationship_name'] ?? 'Not set'); ?></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- SECTION 4: ADDRESS DETAILS -->
                    <div class="profile-section">
                        <h5 class="profile-section-title">
                            <i class="fas fa-home text-primary"></i>Address Details
                        </h5>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="info-row">
                                    <span class="info-label">Village:</span>
                                    <span class="info-value"><?php echo htmlspecialchars($row['village'] ?? 'Not set'); ?></span>
                                </div>
                                <div class="info-row">
                                    <span class="info-label">Post Office:</span>
                                    <span class="info-value"><?php echo htmlspecialchars($row['post_office'] ?? 'Not set'); ?></span>
                                </div>
                                <div class="info-row">
                                    <span class="info-label">District:</span>
                                    <span class="info-value"><?php echo htmlspecialchars($row['district_name'] ?? 'Not set'); ?></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-row">
                                    <span class="info-label">Tehsil:</span>
                                    <span class="info-value"><?php echo htmlspecialchars($row['tehsil_name'] ?? 'Not set'); ?></span>
                                </div>
                                <div class="info-row">
                                    <span class="info-label">Constituency:</span>
                                    <span class="info-value"><?php echo htmlspecialchars($row['cons_name'] ?? 'Not set'); ?></span>
                                </div>
                                <div class="info-row">
                                    <span class="info-label">Union Council:</span>
                                    <span class="info-value"><?php echo htmlspecialchars($row['uc_name'] ?? 'Not set'); ?></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- SECTION 5: EMPLOYMENT DETAILS -->
                    <div class="profile-section">
                        <h5 class="profile-section-title">
                            <i class="fas fa-briefcase text-primary"></i>Employment Details
                        </h5>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="info-row">
                                    <span class="info-label">Employment Type:</span>
                                    <span class="info-value"><?php echo htmlspecialchars($row['status_name'] ?? 'Not set'); ?></span>
                                </div>
                                <div class="info-row">
                                    <span class="info-label">Gross Pay:</span>
                                    <span class="info-value">PKR <?php echo number_format($row['gross_pay'] ?? 0, 2); ?></span>
                                </div>
                                <div class="info-row">
                                    <span class="info-label">Initially Appointed As:</span>
                                    <span class="info-value"><?php echo htmlspecialchars($row['initially_appointed_as_name'] ?? 'Not set'); ?></span>
                                </div>
                                <div class="info-row">
                                    <span class="info-label">Appointment Date:</span>
                                    <span class="info-value"><?php echo formatDate($row['appointment_date']); ?></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-row">
                                    <span class="info-label">Current Designation:</span>
                                    <span class="info-value"><?php echo htmlspecialchars($row['current_designation'] ?? 'Not set'); ?></span>
                                </div>
                                <div class="info-row">
                                    <span class="info-label">Promotion Date:</span>
                                    <span class="info-value"><?php echo formatDate($row['promotion_date']); ?></span>
                                </div>
                                <div class="info-row">
                                    <span class="info-label">Current BPS:</span>
                                    <span class="info-value"><?php echo htmlspecialchars($row['bps_name'] ?? ($row['current_bps_id'] ?? 'Not set')); ?></span>
                                </div>
                                <div class="info-row">
                                    <span class="info-label">Working Since:</span>
                                    <span class="info-value"><?php echo formatDate($row['working_since']); ?></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- SECTION 6: TIME SCALE INFORMATION -->
                    <div class="profile-section">
                        <h5 class="profile-section-title">
                            <i class="fas fa-chart-line text-primary"></i>Time Scale Information
                        </h5>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="info-row">
                                    <span class="info-label">Current Time Scale:</span>
                                    <span class="info-value"><?php echo htmlspecialchars($row['time_scale_name'] ?? 'Not set'); ?></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-row">
                                    <span class="info-label">Time Scale Date:</span>
                                    <span class="info-value"><?php echo formatDate($row['time_scale_date']); ?></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- SECTION 7: SCHOOL INFORMATION -->
                    <div class="profile-section">
                        <h5 class="profile-section-title">
                            <i class="fas fa-school text-primary"></i>School Information
                        </h5>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="info-row">
                                    <span class="info-label">Current School EMIS:</span>
                                    <span class="info-value"><?php echo htmlspecialchars($row['current_school_emis'] ?? 'Not set'); ?></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-row">
                                    <span class="info-label">School Name:</span>
                                    <span class="info-value"><?php echo htmlspecialchars($row['school_name'] ?? 'Not set'); ?></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- SECTION 8: SYSTEM INFORMATION -->
                    <div class="profile-section">
                        <h5 class="profile-section-title">
                            <i class="fas fa-info-circle text-primary"></i>System Information
                        </h5>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="info-row">
                                    <span class="info-label">Created At:</span>
                                    <span class="info-value"><?php echo date("d-m-Y H:i:s", strtotime($row['created_at'])); ?></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-row">
                                    <span class="info-label">Last Updated:</span>
                                    <span class="info-value"><?php echo date("d-m-Y H:i:s", strtotime($row['updated_at'])); ?></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- ACTION BUTTONS -->
                    <div class="profile-actions">
                        <div>
                            <h5 class="text-success mb-0">
                                <i class="fas fa-user-tie me-2"></i>Complete Employee Profile
                            </h5>
                            <p class="text-muted mb-0">All fields displayed from database</p>
                        </div>
                        <div class="profile-action-buttons">
                            <a href="edit_profile.php?personal_no=<?php echo $row['personal_no']; ?>" class="btn btn-edit">
                                <i class="fas fa-edit me-2"></i>Edit Profile
                            </a>
                            <button type="button" class="btn btn-photo" onclick="openPhotoUpload()">
                                <i class="fas fa-camera me-2"></i>Change Photo
                            </button>
                            <a href="employee_dashboard.php" class="btn btn-back">
                                <i class="fas fa-arrow-left me-2"></i>Back to Dashboard
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        <?php else: ?>
            <!-- NO EMPLOYEE DATA FOUND -->
            <div class="alert alert-warning">
                <h4><i class="fas fa-exclamation-triangle me-2"></i>Profile Incomplete</h4>
                <p>Your employee record was found in the system but needs to be linked to the main database.</p>
                <p>Please contact the administrator to complete your profile setup.</p>
                <div class="mt-3">
                    <a href="employee_dashboard.php" class="btn btn-primary">
                        <i class="fas fa-tachometer-alt me-2"></i>Go to Dashboard
                    </a>
                </div>
            </div>
        <?php endif; ?>
    </div>

    <!-- ACADEMIC QUALIFICATIONS SECTION -->
    <div id="academicSection" class="content-section" style="display: none;">
        <div class="card profile-card">
            <div class="card-header bg-primary text-white">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="fas fa-graduation-cap me-2"></i>Academic Qualification</h5>
                    <div>
                        <a href="academic_qualification_edit.php" class="btn btn-sm btn-light">
                            <i class="fas fa-plus me-1"></i>Add Qualification
                        </a>
                        <a href="academic_qualification_view.php" target="_blank" class="btn btn-sm btn-light ms-2">
                            <i class="fas fa-external-link-alt me-1"></i>Full Page
                        </a>
                    </div>
                </div>
            </div>
            <div class="card-body" id="academicContent">
                <div class="text-center py-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2">Loading academic qualifications...</p>
                </div>
            </div>
        </div>
    </div>

    <!-- PROFESSIONAL QUALIFICATIONS SECTION -->
<div id="professionalSection" class="content-section" style="display: none;">
    <div class="card profile-card">
        <div class="card-header bg-info text-white">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="fas fa-certificate me-2"></i>Professional Qualification</h5>
                <div>
                    <a href="professional_qualification_edit.php" class="btn btn-sm btn-light">
                        <i class="fas fa-plus me-1"></i>Add Qualification
                    </a>
                    <a href="professional_qualification_view.php" target="_blank" class="btn btn-sm btn-light ms-2">
                        <i class="fas fa-external-link-alt me-1"></i>Full Page
                    </a>
                </div>
            </div>
        </div>
        <div class="card-body" id="professionalContent">
            <div class="text-center py-4">
                <div class="spinner-border text-info" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-2">Loading professional qualifications...</p>
            </div>
        </div>
    </div>
</div>

    <!-- TRAININGS SECTION -->
<div id="trainingsSection" class="content-section" style="display: none;">
    <div class="card profile-card">
        <div class="card-header bg-warning text-white">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="fas fa-chalkboard-teacher me-2"></i>Trainings</h5>
                <div>
                    <a href="training_edit.php" class="btn btn-sm btn-light">
                        <i class="fas fa-plus me-1"></i>Add Training
                    </a>
                    <a href="training_view.php" target="_blank" class="btn btn-sm btn-light ms-2">
                        <i class="fas fa-external-link-alt me-1"></i>Full Page
                    </a>
                </div>
            </div>
        </div>
        <div class="card-body" id="trainingsContent">
            <div class="text-center py-4">
                <div class="spinner-border text-warning" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-2">Loading trainings...</p>
            </div>
        </div>
    </div>
</div>

    <div id="timetableSection" class="content-section" style="display: none;">
        <div class="card profile-card">
            <div class="card-header bg-secondary text-white">
                <h5 class="mb-0"><i class="fas fa-calendar-alt me-2"></i>Time Table</h5>
            </div>
            <div class="card-body" id="timetableContent">
                <p class="text-center py-4">Time table information will be displayed here.</p>
            </div>
        </div>
    </div>

    <div id="transferSection" class="content-section" style="display: none;">
        <div class="card profile-card">
            <div class="card-header bg-purple text-white">
                <h5 class="mb-0"><i class="fas fa-exchange-alt me-2"></i>Transfer/Posting</h5>
            </div>
            <div class="card-body" id="transferContent">
                <p class="text-center py-4">Transfer and posting information will be displayed here.</p>
            </div>
        </div>
    </div>

    <div id="promotionsSection" class="content-section" style="display: none;">
        <div class="card profile-card">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0"><i class="fas fa-chart-line me-2"></i>Promotions</h5>
            </div>
            <div class="card-body" id="promotionsContent">
                <p class="text-center py-4">Promotion information will be displayed here.</p>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // Function to show/hide sections
    function showSection(sectionId) {
    // Hide all content sections
    document.querySelectorAll('.content-section').forEach(section => {
        section.style.display = 'none';
    });
    
    // Show selected section
    const targetSection = document.getElementById(sectionId + 'Section');
    if (targetSection) {
        targetSection.style.display = 'block';
        
        // Load section content dynamically
        if (sectionId === 'academic') {
            loadAcademicQualifications();
        } else if (sectionId === 'professional') {
            loadProfessionalQualifications();
        } else if (sectionId === 'trainings') {
            loadTrainings();
        } else if (sectionId === 'timetable') {
            loadTimetable();
        } else if (sectionId === 'transfer') {
            loadTransfers();
        } else if (sectionId === 'promotions') {
            loadPromotions();
        }
    }
    
    // Update active button in sidebar
    document.querySelectorAll('.sidebar-btn').forEach(btn => {
        btn.classList.remove('active');
    });
    
    // Find and activate the corresponding button
    const activeBtn = document.querySelector(`.sidebar-btn[onclick*="${sectionId}"]`);
    if (activeBtn) {
        activeBtn.classList.add('active');
    }
}

    // Function to load academic qualifications via AJAX
    function loadAcademicQualifications() {
        const academicContent = document.getElementById('academicContent');
        if (!academicContent) return;
        
        // Show loading
        academicContent.innerHTML = `
            <div class="text-center py-4">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-2">Loading academic qualifications...</p>
            </div>
        `;
        
        // Fetch academic data
        fetch('get_academic_data.php?employee_id=<?php echo isset($db_employee_id) ? $db_employee_id : 0; ?>')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.text();
            })
            .then(data => {
                academicContent.innerHTML = data;
                // Re-initialize any JavaScript components in the loaded content
                initializeLoadedContent();
            })
            .catch(error => {
                console.error('Error loading academic data:', error);
                academicContent.innerHTML = `
                    <div class="alert alert-info">
                        <i class="fas fa-exclamation-circle me-2"></i>
                        Failed to load academic qualifications. 
                        <button onclick="loadAcademicQualifications()" class="btn btn-sm btn-outline-info ms-2">
                            <i class="fas fa-redo"></i> Retry
                        </button>
                    </div>
                    <div class="text-center mt-3">
                        <a href="academic_qualification_view.php" class="btn btn-primary" target="_blank">
                            <i class="fas fa-external-link-alt me-1"></i> View Full Academic Page
                        </a>
                    </div>
                `;
            });
    }

    // Placeholder functions for other sections
    function loadProfessionalQualifications() {
        const content = document.getElementById('professionalContent');
        content.innerHTML = '<p class="text-center py-4">Professional qualification information will be displayed here.</p>';
    }
    
    function loadTrainings() {
        const content = document.getElementById('trainingsContent');
        content.innerHTML = '<p class="text-center py-4">Training information will be displayed here.</p>';
    }
    
    function loadTimetable() {
        const content = document.getElementById('timetableContent');
        content.innerHTML = '<p class="text-center py-4">Time table information will be displayed here.</p>';
    }
    
    function loadTransfers() {
        const content = document.getElementById('transferContent');
        content.innerHTML = '<p class="text-center py-4">Transfer and posting information will be displayed here.</p>';
    }
    
    function loadPromotions() {
        const content = document.getElementById('promotionsContent');
        content.innerHTML = '<p class="text-center py-4">Promotion information will be displayed here.</p>';
    }

    // Initialize loaded content (for bootstrap components)
    function initializeLoadedContent() {
        // Initialize any tooltips in the loaded content
        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
        
        // Initialize any popovers
        const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
        const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));
    }

    // Photo upload functions
    function openPhotoUpload() {
        document.getElementById('photoUploadModal').style.display = 'flex';
    }

    function closePhotoUpload() {
        document.getElementById('photoUploadModal').style.display = 'none';
        document.getElementById('photoUploadForm').reset();
        document.getElementById('photoPreviewContainer').innerHTML = '<div id="noPreview" class="text-muted">No preview available</div>';
    }

    // Photo preview functionality
    document.getElementById('profilePhoto').addEventListener('change', function(e) {
        const file = e.target.files[0];
        const previewContainer = document.getElementById('photoPreviewContainer');
        
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                previewContainer.innerHTML = '<img src="' + e.target.result + '" style="width: 150px; height: 150px; object-fit: cover; border-radius: 50%; border: 3px solid #198754;">';
            }
            reader.readAsDataURL(file);
        } else {
            previewContainer.innerHTML = '<div id="noPreview" class="text-muted">No preview available</div>';
        }
    });

    // Close modal when clicking outside
    document.getElementById('photoUploadModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closePhotoUpload();
        }
    });

    // Auto-hide alerts after 5 seconds
    setTimeout(function() {
        const alerts = document.querySelectorAll('.alert-notification');
        alerts.forEach(alert => {
            const bsAlert = new bootstrap.Alert(alert.querySelector('.alert'));
            bsAlert.close();
        });
    }, 5000);

    // Initialize on page load
    document.addEventListener('DOMContentLoaded', function() {
        // Show profile section by default
        showSection('profile');
        
        // Initialize tooltips and popovers
        initializeLoadedContent();
    });
	// Function to load professional qualifications via AJAX
function loadProfessionalQualifications() {
    const professionalContent = document.getElementById('professionalContent');
    if (!professionalContent) return;
    
    // Show loading
    professionalContent.innerHTML = `
        <div class="text-center py-4">
            <div class="spinner-border text-info" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-2">Loading professional qualifications...</p>
        </div>
    `;
    
    // Fetch professional data
    fetch('get_professional_data.php?employee_id=<?php echo isset($db_employee_id) ? $db_employee_id : 0; ?>')
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text();
        })
        .then(data => {
            professionalContent.innerHTML = data;
            // Re-initialize any JavaScript components in the loaded content
            initializeLoadedContent();
        })
        .catch(error => {
            console.error('Error loading professional data:', error);
            professionalContent.innerHTML = `
                <div class="alert alert-info">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    Failed to load professional qualifications. 
                    <button onclick="loadProfessionalQualifications()" class="btn btn-sm btn-outline-info ms-2">
                        <i class="fas fa-redo"></i> Retry
                    </button>
                </div>
                <div class="text-center mt-3">
                    <a href="professional_qualification_view.php" class="btn btn-info" target="_blank">
                        <i class="fas fa-external-link-alt me-1"></i> View Full Professional Page
                    </a>
                </div>
            `;
        });
}
// Function to load trainings via AJAX
function loadTrainings() {
    const trainingsContent = document.getElementById('trainingsContent');
    if (!trainingsContent) return;
    
    // Show loading
    trainingsContent.innerHTML = `
        <div class="text-center py-4">
            <div class="spinner-border text-warning" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-2">Loading trainings...</p>
        </div>
    `;
    
    // Fetch training data
    fetch('get_training_data.php?employee_id=<?php echo isset($db_employee_id) ? $db_employee_id : 0; ?>')
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text();
        })
        .then(data => {
            trainingsContent.innerHTML = data;
            // Re-initialize any JavaScript components in the loaded content
            initializeLoadedContent();
        })
        .catch(error => {
            console.error('Error loading training data:', error);
            trainingsContent.innerHTML = `
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    Failed to load trainings. 
                    <button onclick="loadTrainings()" class="btn btn-sm btn-outline-warning ms-2">
                        <i class="fas fa-redo"></i> Retry
                    </button>
                </div>
                <div class="text-center mt-3">
                    <a href="training_view.php" class="btn btn-warning" target="_blank">
                        <i class="fas fa-external-link-alt me-1"></i> View Full Trainings Page
                    </a>
                </div>
            `;
        });
}
</script>
</body>
</html>