index.php

<?php
session_start();

// Database connection settings
$db_host = 'localhost';
$db_name = 'vdart_hr';
$db_user = 'root';  // Change if your MySQL username is different
$db_pass = '';      // Add your MySQL password if any

// Admin dashboard login handling (different from admin mode)
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['adminDashboardPassword'])) {
    // Clean any output buffers to prevent extra content
    if (ob_get_level()) {
        ob_clean();
    }
    
    $enteredPassword = trim($_POST['adminDashboardPassword']);
    $correctPassword = 'vdart123';

    if ($enteredPassword === $correctPassword) {
        $_SESSION['admin_dashboard_logged_in'] = true;
        
        // Set proper headers
        header('Content-Type: text/plain');
        
        // Send clean response
        echo 'dashboard_success';
        exit();
    } else {
        // Set proper headers
        header('Content-Type: text/plain');
        
        // Send clean response
        echo 'dashboard_failed';
        exit();
    }
}

// Admin mode login handling (different from dashboard)
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['adminModePassword'])) {
    $enteredPassword = $_POST['adminModePassword'];
    $correctPassword = 'admin2024';

    if ($enteredPassword === $correctPassword) {
        $_SESSION['admin_mode_logged_in'] = true;
        echo 'mode_success';
    } else {
        echo 'mode_failed';
    }
    exit();
}

// Handle custom field addition
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['addCustomField'])) {
    if (isset($_SESSION['admin_mode_logged_in']) && $_SESSION['admin_mode_logged_in'] === true) {
        $fieldType = sanitizeInput($_POST['fieldType']);
        $fieldValue = sanitizeInput($_POST['fieldValue']);
        
        $conn = connectDB();
        if ($conn) {
            try {
                // Check if custom fields table exists, if not create it
                $createTableSql = "CREATE TABLE IF NOT EXISTS custom_dropdown_fields (
                    id INT AUTO_INCREMENT PRIMARY KEY,
                    field_type VARCHAR(50) NOT NULL,
                    field_value VARCHAR(255) NOT NULL,
                    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
                    UNIQUE KEY unique_field (field_type, field_value)
                )";
                $conn->exec($createTableSql);
                
                // Insert the custom field
                $sql = "INSERT INTO custom_dropdown_fields (field_type, field_value) VALUES (:field_type, :field_value)";
                $stmt = $conn->prepare($sql);
                $stmt->bindParam(':field_type', $fieldType);
                $stmt->bindParam(':field_value', $fieldValue);
                $stmt->execute();
                
                echo json_encode(['success' => true, 'message' => 'Custom field added successfully']);
            } catch(PDOException $e) {
                if ($e->getCode() == 23000) { // Duplicate entry
                    echo json_encode(['success' => false, 'message' => 'This option already exists']);
                } else {
                    echo json_encode(['success' => false, 'message' => 'Error adding custom field']);
                }
            }
        } else {
            echo json_encode(['success' => false, 'message' => 'Database connection failed']);
        }
    } else {
        echo json_encode(['success' => false, 'message' => 'Unauthorized']);
    }
    exit();
}

// Handle custom field deletion
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['deleteCustomField'])) {
    if (isset($_SESSION['admin_mode_logged_in']) && $_SESSION['admin_mode_logged_in'] === true) {
        $fieldType = sanitizeInput($_POST['fieldType']);
        $fieldValue = sanitizeInput($_POST['fieldValue']);
        
        $conn = connectDB();
        if ($conn) {
            try {
                $sql = "DELETE FROM custom_dropdown_fields WHERE field_type = :field_type AND field_value = :field_value";
                $stmt = $conn->prepare($sql);
                $stmt->bindParam(':field_type', $fieldType);
                $stmt->bindParam(':field_value', $fieldValue);
                $stmt->execute();
                
                if ($stmt->rowCount() > 0) {
                    echo json_encode(['success' => true, 'message' => 'Custom field deleted successfully']);
                } else {
                    echo json_encode(['success' => false, 'message' => 'Field not found']);
                }
            } catch(PDOException $e) {
                echo json_encode(['success' => false, 'message' => 'Error deleting custom field']);
            }
        } else {
            echo json_encode(['success' => false, 'message' => 'Database connection failed']);
        }
    } else {
        echo json_encode(['success' => false, 'message' => 'Unauthorized']);
    }
    exit();
}

// Function to get custom dropdown fields
function getCustomDropdownFields($fieldType) {
    $conn = connectDB();
    $customFields = [];
    
    if ($conn) {
        try {
            $sql = "SELECT field_value FROM custom_dropdown_fields WHERE field_type = :field_type ORDER BY field_value";
            $stmt = $conn->prepare($sql);
            $stmt->bindParam(':field_type', $fieldType);
            $stmt->execute();
            
            while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                $customFields[] = $row['field_value'];
            }
        } catch(PDOException $e) {
            logError("Error fetching custom fields: " . $e->getMessage());
        }
    }
    
    return $customFields;
}

// Function to connect to the database
function connectDB() {
    global $db_host, $db_name, $db_user, $db_pass;
    
    try {
        $conn = new PDO("mysql:host=$db_host;dbname=$db_name", $db_user, $db_pass);
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        return $conn;
    } catch(PDOException $e) {
        logError("Database connection failed: " . $e->getMessage());
        return false;
    }
}

// Function to sanitize input data
function sanitizeInput($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data, ENT_QUOTES, 'UTF-8');
    return $data;
}

// Function to log errors to a file
function logError($message) {
    $logFile = 'error_log.txt';
    $timestamp = date('Y-m-d H:i:s');
    $logMessage = "[$timestamp] $message\n";
    file_put_contents($logFile, $logMessage, FILE_APPEND);
}

// Function to validate form data
function validateForm($data) {
    $errors = [];
    
    // Required fields
    $requiredFields = [
        'employeeName', 'employeeId', 'designation', 'team', 
        'calDal', 'buHead', 'doj', 'dor', 'resignDecision'
    ];
    
    foreach ($requiredFields as $field) {
        if (empty($data[$field])) {
            $errors[] = ucfirst(str_replace('_', ' ', $field)) . ' is required.';
        }
    }
    
    // Validate at least one reason for leaving is selected
    if (!isset($data['reasonsForLeaving']) || empty($data['reasonsForLeaving'])) {
        $errors[] = 'Please select at least one reason for leaving.';
    }
    
    // Validate Yes/No questions have values
    $yesNoQuestions = [
        'exploredOptions', 'specificEvent', 'recommendCompany', 'openToReapply'
    ];
    
    foreach ($yesNoQuestions as $field) {
        if (!isset($data[$field]) || ($data[$field] !== 'Yes' && $data[$field] !== 'No')) {
            $errors[] = 'Please answer all Yes/No questions.';
            break;
        }
    }
    
    // Validate descriptions for conditional fields
    if (isset($data['exploredOptions']) && $data['exploredOptions'] === 'Yes' && empty($data['exploredOptionsDesc'])) {
        $errors[] = 'Please provide a description for your exploration of options to stay.';
    }
    
    if (isset($data['specificEvent']) && $data['specificEvent'] === 'Yes' && empty($data['specificEventDesc'])) {
        $errors[] = 'Please provide a description of the specific event that prompted your resignation.';
    }
    
    if (isset($data['recommendCompany']) && $data['recommendCompany'] === 'No' && empty($data['recommendCompanyDesc'])) {
        $errors[] = 'Please provide a reason why you would not recommend our company.';
    }
    
    if (isset($data['openToReapply']) && $data['openToReapply'] === 'No' && empty($data['openToReapplyDesc'])) {
        $errors[] = 'Please provide a reason why you would not reapply to our company.';
    }
    
    // Validate ratings
    $ratingFields = [
        'ratingPay', 'ratingTraining', 'ratingSupervisor', 'ratingRelationship',
        'ratingBenefits', 'ratingPromotion', 'ratingPerformance', 'ratingDiscipline'
    ];
    
    $validRatings = ['Excellent', 'Good', 'Fair', 'Poor'];
    
    foreach ($ratingFields as $field) {
        if (!isset($data[$field]) || !in_array($data[$field], $validRatings)) {
            $errors[] = 'Please provide a rating for all categories.';
            break;
        }
    }
    
    return $errors;
}

// Function to save exit interview data to database
function saveExitInterview($data) {
    $conn = connectDB();
    
    if (!$conn) {
        return [
            'success' => false,
            'message' => 'Database connection failed.'
        ];
    }
    
    try {
        // Begin transaction
        $conn->beginTransaction();
        
        // Insert basic information
        $sql = "INSERT INTO exit_interviews (
                    employee_name, employee_id, designation, team, 
                    cal_dal, bu_head, doj, dor, resign_decision,
                    explored_options, explored_options_desc,
                    specific_event, specific_event_desc,
                    recommend_company, recommend_company_desc,
                    open_to_reapply, open_to_reapply_desc,
                    encourage_to_stay, factors_new_role,
                    areas_to_improve, members_to_thank,
                    rating_pay, rating_training, rating_supervisor,
                    rating_relationship, rating_benefits, rating_promotion,
                    rating_performance, rating_discipline,
                    hrbp_note, submission_date
                ) VALUES (
                    :employee_name, :employee_id, :designation, :team,
                    :cal_dal, :bu_head, :doj, :dor, :resign_decision,
                    :explored_options, :explored_options_desc,
                    :specific_event, :specific_event_desc,
                    :recommend_company, :recommend_company_desc,
                    :open_to_reapply, :open_to_reapply_desc,
                    :encourage_to_stay, :factors_new_role,
                    :areas_to_improve, :members_to_thank,
                    :rating_pay, :rating_training, :rating_supervisor,
                    :rating_relationship, :rating_benefits, :rating_promotion,
                    :rating_performance, :rating_discipline,
                    :hrbp_note, NOW()
                )";
        
        $stmt = $conn->prepare($sql);
        
        // Bind parameters
        $stmt->bindParam(':employee_name', $data['employeeName']);
        $stmt->bindParam(':employee_id', $data['employeeId']);
        $stmt->bindParam(':designation', $data['designation']);
        $stmt->bindParam(':team', $data['team']);
        $stmt->bindParam(':cal_dal', $data['calDal']);
        $stmt->bindParam(':bu_head', $data['buHead']);
        $stmt->bindParam(':doj', $data['doj']);
        $stmt->bindParam(':dor', $data['dor']);
        $stmt->bindParam(':resign_decision', $data['resignDecision']);
        $stmt->bindParam(':explored_options', $data['exploredOptions']);
        $stmt->bindParam(':explored_options_desc', $data['exploredOptionsDesc']);
        $stmt->bindParam(':specific_event', $data['specificEvent']);
        $stmt->bindParam(':specific_event_desc', $data['specificEventDesc']);
        $stmt->bindParam(':recommend_company', $data['recommendCompany']);
        $stmt->bindParam(':recommend_company_desc', $data['recommendCompanyDesc']);
        $stmt->bindParam(':open_to_reapply', $data['openToReapply']);
        $stmt->bindParam(':open_to_reapply_desc', $data['openToReapplyDesc']);
        $stmt->bindParam(':encourage_to_stay', $data['encourageToStay']);
        $stmt->bindParam(':factors_new_role', $data['factorsNewRole']);
        $stmt->bindParam(':areas_to_improve', $data['areasToImprove']);
        $stmt->bindParam(':members_to_thank', $data['membersToThank']);
        $stmt->bindParam(':rating_pay', $data['ratingPay']);
        $stmt->bindParam(':rating_training', $data['ratingTraining']);
        $stmt->bindParam(':rating_supervisor', $data['ratingSupervisor']);
        $stmt->bindParam(':rating_relationship', $data['ratingRelationship']);
        $stmt->bindParam(':rating_benefits', $data['ratingBenefits']);
        $stmt->bindParam(':rating_promotion', $data['ratingPromotion']);
        $stmt->bindParam(':rating_performance', $data['ratingPerformance']);
        $stmt->bindParam(':rating_discipline', $data['ratingDiscipline']);
        $stmt->bindParam(':hrbp_note', $data['hrbpNote']);
        
        $stmt->execute();
        
        // Get the interview ID
        $interviewId = $conn->lastInsertId();
        
        // Insert reasons for leaving
        if (isset($data['reasonsForLeaving']) && is_array($data['reasonsForLeaving'])) {
            $reasonsSql = "INSERT INTO exit_interview_reasons (interview_id, reason) VALUES (:interview_id, :reason)";
            $reasonsStmt = $conn->prepare($reasonsSql);
            
            foreach ($data['reasonsForLeaving'] as $reason) {
                $reasonsStmt->bindParam(':interview_id', $interviewId);
                $reasonsStmt->bindParam(':reason', $reason);
                $reasonsStmt->execute();
            }
        }
        
        // Commit the transaction
        $conn->commit();
        
        // Send notification email to HR (if server supports mail)
        try {
            sendNotificationEmail($data);
        } catch (Exception $e) {
            // Log email error but don't fail the submission
            logError("Error sending notification email: " . $e->getMessage());
        }
        
        return [
            'success' => true,
            'message' => 'Exit interview submitted successfully.',
            'interview_id' => $interviewId
        ];
    } catch(PDOException $e) {
        // Rollback the transaction if something failed
        $conn->rollback();
        logError("Error saving exit interview: " . $e->getMessage());
        
        return [
            'success' => false,
            'message' => 'An error occurred while saving the exit interview: ' . $e->getMessage()
        ];
    }
}

// Function to send notification email to HR
function sendNotificationEmail($data) {
    $to = "hr@vdart.com"; // Change to your actual HR email
    $subject = "New Exit Interview Submitted - " . $data['employeeName'];
    
    $message = "A new exit interview has been submitted.\n\n";
    $message .= "Employee Name: " . $data['employeeName'] . "\n";
    $message .= "Employee ID: " . $data['employeeId'] . "\n";
    $message .= "Designation: " . $data['designation'] . "\n";
    $message .= "Team: " . $data['team'] . "\n";
    $message .= "Date of Resignation: " . $data['dor'] . "\n\n";
    $message .= "Please log in to the HR portal to view the complete exit interview details.";
    
    $headers = "From: system@vdart.com"; // Change to your actual system email
    
    // Only try to send mail if the function exists and we're not in a local development environment
    if (function_exists('mail') && $_SERVER['SERVER_NAME'] != 'localhost') {
        mail($to, $subject, $message, $headers);
    }
}

// Redirect function to handle both relative and absolute URLs
function redirectTo($url) {
    if (!headers_sent()) {
        header('Location: ' . $url);
        exit;
    } else {
        echo '<script>window.location.href="' . $url . '";</script>';
        echo '<noscript><meta http-equiv="refresh" content="0;url=' . $url . '"></noscript>';
        exit;
    }
}

// Handle form submission
if ($_SERVER['REQUEST_METHOD'] === 'POST' && !isset($_POST['adminDashboardPassword']) && !isset($_POST['adminModePassword']) && !isset($_POST['addCustomField']) && !isset($_POST['deleteCustomField'])) {
    // Collect and sanitize all form data
    $formData = [];
    
    // Basic information
    $formData['employeeName'] = sanitizeInput($_POST['employeeName'] ?? '');
    $formData['employeeId'] = sanitizeInput($_POST['employeeId'] ?? '');
    $formData['designation'] = sanitizeInput($_POST['designation'] ?? '');
    $formData['team'] = sanitizeInput($_POST['team'] ?? '');
    $formData['calDal'] = sanitizeInput($_POST['calDal'] ?? '');
    $formData['buHead'] = sanitizeInput($_POST['buHead'] ?? '');
    $formData['doj'] = sanitizeInput($_POST['doj'] ?? '');
    $formData['dor'] = sanitizeInput($_POST['dor'] ?? '');
    
    // Resignation details
    $formData['resignDecision'] = sanitizeInput($_POST['resignDecision'] ?? '');
    if ($formData['resignDecision'] === 'Other' && isset($_POST['resignOther'])) {
        $formData['resignDecision'] = 'Other: ' . sanitizeInput($_POST['resignOther']);
    }
    
    // Reasons for leaving
    if (isset($_POST['reasonsForLeaving']) && is_array($_POST['reasonsForLeaving'])) {
        $formData['reasonsForLeaving'] = array_map('sanitizeInput', $_POST['reasonsForLeaving']);
        
        // If 'Others' is selected and reasonsOther is provided, append it
        if (in_array('Others', $formData['reasonsForLeaving']) && !empty($_POST['reasonsOther'])) {
            // Find the 'Others' index and replace it with the specific reason
            $index = array_search('Others', $formData['reasonsForLeaving']);
            if ($index !== false) {
                $formData['reasonsForLeaving'][$index] = 'Others: ' . sanitizeInput($_POST['reasonsOther']);
            }
        }
    } else {
        $formData['reasonsForLeaving'] = [];
    }
    
    // Yes/No questions with descriptions
    $formData['exploredOptions'] = sanitizeInput($_POST['exploredOptions'] ?? '');
    $formData['exploredOptionsDesc'] = $formData['exploredOptions'] === 'Yes' ? 
                                     sanitizeInput($_POST['exploredOptionsDesc'] ?? '') : '';
    
    $formData['specificEvent'] = sanitizeInput($_POST['specificEvent'] ?? '');
    $formData['specificEventDesc'] = $formData['specificEvent'] === 'Yes' ? 
                                   sanitizeInput($_POST['specificEventDesc'] ?? '') : '';
    
    $formData['recommendCompany'] = sanitizeInput($_POST['recommendCompany'] ?? '');
    $formData['recommendCompanyDesc'] = $formData['recommendCompany'] === 'No' ? 
                                      sanitizeInput($_POST['recommendCompanyDesc'] ?? '') : '';
    
    $formData['openToReapply'] = sanitizeInput($_POST['openToReapply'] ?? '');
    $formData['openToReapplyDesc'] = $formData['openToReapply'] === 'No' ? 
                                    sanitizeInput($_POST['openToReapplyDesc'] ?? '') : '';
    
    // Text questions
    $formData['encourageToStay'] = sanitizeInput($_POST['encourageToStay'] ?? '');
    $formData['factorsNewRole'] = sanitizeInput($_POST['factorsNewRole'] ?? '');
    $formData['areasToImprove'] = sanitizeInput($_POST['areasToImprove'] ?? '');
    $formData['membersToThank'] = sanitizeInput($_POST['membersToThank'] ?? '');
    
    // Ratings
    $formData['ratingPay'] = sanitizeInput($_POST['ratingPay'] ?? '');
    $formData['ratingTraining'] = sanitizeInput($_POST['ratingTraining'] ?? '');
    $formData['ratingSupervisor'] = sanitizeInput($_POST['ratingSupervisor'] ?? '');
    $formData['ratingRelationship'] = sanitizeInput($_POST['ratingRelationship'] ?? '');
    $formData['ratingBenefits'] = sanitizeInput($_POST['ratingBenefits'] ?? '');
    $formData['ratingPromotion'] = sanitizeInput($_POST['ratingPromotion'] ?? '');
    $formData['ratingPerformance'] = sanitizeInput($_POST['ratingPerformance'] ?? '');
    $formData['ratingDiscipline'] = sanitizeInput($_POST['ratingDiscipline'] ?? '');
    
    // HRBP Note
    $formData['hrbpNote'] = sanitizeInput($_POST['hrbpNote'] ?? '');
    
    // Validate form data
    $errors = validateForm($formData);
    
    if (empty($errors)) {
        // Save the exit interview data
        $result = saveExitInterview($formData);
        
        if ($result['success']) {
            // Set success message and redirect to thank you page
            $_SESSION['success_message'] = $result['message'];
            $_SESSION['interview_id'] = $result['interview_id'];
            redirectTo('thank_you.php');
        } else {
            // Set error message and redirect back to form
            $_SESSION['error_message'] = $result['message'];
            $_SESSION['form_data'] = $formData; // Save form data for repopulation
            redirectTo('exit-interview1.php');
        }
    } else {
        // Set validation errors and redirect back to form
        $_SESSION['validation_errors'] = $errors;
        $_SESSION['form_data'] = $formData; // Save form data for repopulation
        redirectTo('exit-interview1.php');
    }
}

// Check for any form data in session (for repopulating the form)
$formData = $_SESSION['form_data'] ?? [];
unset($_SESSION['form_data']); // Clear after retrieving

// Check for error messages
$errorMessage = $_SESSION['error_message'] ?? '';
unset($_SESSION['error_message']);

// Check for validation errors
$validationErrors = $_SESSION['validation_errors'] ?? [];
unset($_SESSION['validation_errors']);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exit Interview Form | VDart</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
    <!-- Add datepicker CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css">
</head>
<style>
:root {
    --primary-color: #2563eb;
    --primary-light: #dbeafe;
    --primary-dark: #1e40af;
    --secondary-color: #475569;
    --accent-color: #f97316;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --text-color: #334155;
    --text-light: #64748b;
    --text-dark: #1e293b;
    --background-color: #f8fafc;
    --card-bg: #ffffff;
    --sidebar-bg: #f1f5f9;
    --border-color: #e2e8f0;
    --input-bg: #f1f5f9;
    --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    --box-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.1);
    --transition: all 0.2s ease-in-out;
    --radius: 8px;
    --radius-sm: 4px;
}

/* Dark Mode Colors */
.dark-theme {
    --primary-color: #3b82f6;
    --primary-light: #1e3a8a;
    --primary-dark: #60a5fa;
    --text-color: #e2e8f0;
    --text-light: #94a3b8;
    --text-dark: #f8fafc;
    --background-color: #0f172a;
    --card-bg: #1e293b;
    --sidebar-bg: #111827;
    --border-color: #334155;
    --input-bg: #293548;
    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    --box-shadow-hover: 0 8px 15px rgba(0, 0, 0, 0.25);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.5;
    font-size: 16px;
    min-height: 100vh;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* Split Layout Container */
.app-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* Left Sidebar for Insights */
.insights-sidebar {
    width: 320px;
    background-color: var(--sidebar-bg);
    padding: 2rem 1.5rem;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    z-index: 10;
}

/* Main Content Area */
.main-content {
    flex: 1;
    margin-left: 320px;
    padding: 1.5rem;
    max-width: calc(100vw - 320px);
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
}

/* Header Styling */
.header {
    margin-bottom: 2rem;
}

.logo-container {
    margin-bottom: 1.5rem;
    text-align: center;
}

.company-logo {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: 0.5px;
}

.header h1 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    font-weight: 700;
    color: var(--text-dark);
}

.header p {
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    color: var(--text-light);
    line-height: 1.6;
}

/* Progress Bar */
.progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--border-color);
    z-index: 1000;
}

.progress-bar {
    height: 100%;
    background: var(--primary-color);
    width: 0%;
    transition: width 0.3s ease;
}

/* Insights Styling */
.insights-header {
    margin-bottom: 1.5rem;
    text-align: center;
}

.insights-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.insights-subtitle {
    font-size: 0.9rem;
    color: var(--text-light);
}

.insights-section {
    background: var(--card-bg);
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    border-radius: var(--radius);
    box-shadow: var(--box-shadow);
}

.insights-section h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

.insights-section h3 i {
    margin-right: 0.5rem;
    color: var(--primary-color);
}

.insights-list {
    list-style-type: none;
}

.insights-list li {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    position: relative;
    padding-left: 1.5rem;
}

.insights-list li:before {
    content: '•';
    color: var(--primary-color);
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

.insights-tips {
    background-color: var(--primary-light);
    padding: 1rem;
    border-radius: var(--radius-sm);
    margin-top: 1rem;
}

.insights-tips p {
    font-size: 0.9rem;
    color: var(--primary-dark);
    font-style: italic;
}

/* Form Sections */
.form-section {
    background: var(--card-bg);
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    border-radius: var(--radius);
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    border-left: 3px solid var(--primary-color);
}

.form-section:hover {
    box-shadow: var(--box-shadow-hover);
}

.form-section.completed {
    border-left-color: var(--success-color);
}

/* Section Headers */
.section-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.section-header i {
    font-size: 1.25rem;
    color: var(--primary-color);
    margin-right: 0.75rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-light);
    border-radius: 50%;
}

.section-header h2 {
    color: var(--text-dark);
    font-weight: 600;
    font-size: 1.25rem;
    margin: 0;
}

.section-subtitle {
    color: var(--text-light);
    font-style: italic;
    margin-left: 0.5rem;
    font-size: 0.85rem;
    font-weight: 400;
}

/* Question Headers */
.question-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.question-number {
    background: var(--primary-color);
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.question-header h3 {
    color: var(--text-dark);
    font-weight: 600;
    font-size: 1rem;
    margin: 0;
    line-height: 1.4;
}

/* Form Grid */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    width: 100%;
}

.form-group {
    margin-bottom: 1.25rem;
    position: relative;
    transition: var(--transition);
    width: 100%;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-color);
    font-size: 0.9rem;
}

.form-group.completed label:after {
    content: '✓';
    color: var(--success-color);
    margin-left: 0.5rem;
}

/* Input Styling */
input[type="text"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    background-color: var(--input-bg);
    color: var(--text-color);
    transition: var(--transition);
    font-family: 'Poppins', sans-serif;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.6;
}

/* Input with Icon Styling */
.input-with-icon,
.textarea-with-icon {
    position: relative;
}

.input-with-icon i,
.textarea-with-icon i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: 1rem;
}

.input-with-icon input,
.textarea-with-icon textarea {
    padding-left: 2.5rem;
}

.textarea-with-icon i {
    top: 1rem;
    transform: none;
}

/* Custom Select Styling */
.custom-select {
    position: relative;
    width: 100%;
}

.custom-select select {
    width: 100%;
    padding-left: 2.5rem;
    appearance: none;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
}

.custom-select .select-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: 1rem;
    z-index: 1;
    pointer-events: none;
}

.custom-select .select-arrow {
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-light);
    border-bottom: 2px solid var(--text-light);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

/* Radio and Checkbox Styling */
.radio-group,
.checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.radio-option,
.checkbox-option {
    display: flex;
    align-items: center;
    position: relative;
}

.radio-option input,
.checkbox-option input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.radio-option label,
.checkbox-option label {
    position: relative;
    padding-left: 2rem;
    cursor: pointer;
    line-height: 24px;
    font-weight: normal;
    display: inline-block;
    color: var(--text-color);
    user-select: none;
    font-size: 0.95rem;
    font-family: 'Poppins', sans-serif;
}

.radio-option label:before,
.checkbox-option label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    transition: var(--transition);
}

.radio-option label:before {
    border-radius: 50%;
}

.checkbox-option label:before {
    border-radius: 3px;
}

.radio-option:hover label:before,
.checkbox-option:hover label:before {
    border-color: var(--primary-color);
}

.radio-option input:checked + label:after {
    content: '';
    position: absolute;
    left: 5px;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
}

.checkbox-option input:checked + label:after {
    content: '';
    position: absolute;
    left: 6px;
    top: 3px;
    width: 6px;
    height: 10px;
    border: solid var(--primary-color);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Checkbox Grid */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

/* Hidden inputs for "Other" options */
.hidden-input {
    display: none;
    margin-top: 0.5rem;
    margin-left: 2rem;
    width: calc(100% - 2rem);
    max-width: 300px;
}

/* Rating Table Styling */
.table-wrapper {
    overflow-x: auto;
    margin-bottom: 1.25rem;
    border-radius: var(--radius-sm);
}

.rating-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border-color);
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
}

.rating-table thead {
    background: var(--primary-color);
}

.rating-table th {
    font-weight: 600;
    color: solid var(--border-color);
    padding: 0.75rem;
    text-align: center;
    font-size: 0.9rem;
    font-family: 'Poppins', sans-serif;
}

.rating-table td {
    padding: 0.75rem;
    text-align: center;
    border: 1px solid var(--border-color);
    font-family: 'Poppins', sans-serif;
}

.rating-table td:first-child {
    text-align: left;
    font-weight: 500;
    color: var(--text-dark);
    width: 40%;
}

.rating-table tr {
    background-color: var(--card-bg);
}

.rating-table tr:nth-child(even) {
    background-color: var(--input-bg);
}

.rating-circle {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    margin: 0 auto;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.rating-circle:hover {
    border-color: var(--primary-color);
}

.rating-circle.selected {
    border-color: var(--primary-color);
    background-color: var(--primary-light);
}

.rating-circle.selected::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: var(--primary-color);
    border-radius: 50%;
}

/* Submit Button */
.form-footer {
    text-align: center;
    margin-top: 2rem;
}

.submit-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 30px;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 2px 5px rgba(37, 99, 235, 0.2);
    font-family: 'Poppins', sans-serif;
}

.submit-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);
}

.submit-btn i {
    margin-right: 0.5rem;
}

.footer-text {
    margin-top: 1.5rem;
    color: var(--text-light);
    font-style: italic;
    font-size: 0.9rem;
    font-family: 'Poppins', sans-serif;
}

/* Admin Button and Modal */
.admin-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.admin-button {
    background: var(--secondary-color);
    color: white;
    border: none;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    font-family: 'Poppins', sans-serif;
}

.admin-button:hover {
    background: var(--text-dark);
}

.admin-button i {
    margin-right: 0.25rem;
}

/* Admin Mode Switch */
.admin-mode-switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--card-bg);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--box-shadow);
}

.admin-mode-label {
    font-size: 0.85rem;
    color: var(--text-color);
    font-weight: 500;
}

.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-color);
    transition: .4s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--primary-color);
}

input:checked + .slider:before {
    transform: translateX(20px);
}

/* Admin modals styling */
.admin-modal, .admin-mode-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: var(--card-bg);
    padding: 1.5rem;
    border-radius: var(--radius);
    width: 320px;
    max-width: 90%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    font-family: 'Poppins', sans-serif;
}

.modal-title {
    color: var(--text-dark);
    margin-bottom: 1.25rem;
    text-align: center;
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
}

.modal-title i {
    margin-right: 0.5rem;
    color: var(--primary-color);
}

.modal-input {
    width: 100%;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    background-color: var(--input-bg);
    color: var(--text-color);
    font-family: 'Poppins', sans-serif;
}

.modal-input:focus {
    border-color: var(--primary-color);
    outline: none;
}

.modal-buttons {
    display: flex;
    justify-content: space-between;
}

.modal-button {
    padding: 0.6rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: 'Poppins', sans-serif;
}

.modal-cancel {
    background: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.modal-submit {
    background: var(--primary-color);
    color: white;
    border: none;
}

/* Add Field Button */
.add-field-btn {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--success-color);
    color: white;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: var(--transition);
    z-index: 10;
}

.add-field-btn:hover {
    background: var(--primary-color);
    transform: translateY(-50%) scale(1.1);
}

.admin-mode .add-field-btn {
    display: flex;
}

/* Delete Field Button */
.delete-field-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--danger-color);
    color: white;
    border: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: var(--transition);
    z-index: 10;
}

.delete-field-btn:hover {
    background: #dc2626;
    transform: translateY(-50%) scale(1.1);
}

.admin-mode .delete-field-btn {
    display: flex;
}

/* Custom option styling with delete button */
.custom-option {
    font-style: italic;
    color: var(--primary-color);
    position: relative;
}

/* Custom Field Modal */
.custom-field-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.custom-field-content {
    background: var(--card-bg);
    padding: 2rem;
    border-radius: var(--radius);
    width: 400px;
    max-width: 90%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.custom-field-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
    text-align: center;
}

.custom-field-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.custom-field-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    background-color: var(--input-bg);
    color: var(--text-color);
}

.custom-field-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}

.custom-field-cancel,
.custom-field-submit {
    padding: 0.6rem 1.5rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
    cursor: pointer;
    font-size: 0.9rem;
    transition: var(--transition);
}

.custom-field-cancel {
    background: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.custom-field-submit {
    background: var(--success-color);
    color: white;
    border: none;
}

.custom-field-submit:hover {
    background: var(--primary-color);
}

/* Admin mode indicator */
.admin-mode-indicator {
    position: fixed;
    top: 60px;
    right: 1rem;
    background: var(--warning-color);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    display: none;
    z-index: 100;
    box-shadow: var(--box-shadow);
}

.admin-mode .admin-mode-indicator {
    display: block;
}

/* Theme Toggle */
.theme-toggle {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background: var(--card-bg);
    color: var(--text-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--box-shadow);
    z-index: 100;
    border: 1px solid var(--border-color);
}

/* Scroll Top Button */
.scroll-top-btn {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    width: 40px;
    height: 40px;
    background: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--box-shadow);
}

.scroll-top-btn.show {
    opacity: 1;
    visibility: visible;
}

/* Error Tooltip */
.error-tooltip {
    position: absolute;
    bottom: -1.25rem;
    left: 0;
    background-color: var(--danger-color);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    z-index: 10;
    font-family: 'Poppins', sans-serif;
}

/* Navigation in Sidebar */
.nav-section {
    margin-top: 1.5rem;
}

.nav-heading {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nav-links {
    list-style: none;
}

.nav-links li {
    margin-bottom: 0.5rem;
}

.nav-links a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-color);
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.nav-links a:hover {
    background-color: var(--primary-light);
    color: var(--primary-color);
}

.nav-links a.active {
    background-color: var(--primary-color);
    color: white;
}

.nav-links i {
    margin-right: 0.5rem;
    font-size: 1rem;
}

/* Form Section Improvements */
.form-section-container {
    position: relative;
}

.section-indicator {
    position: absolute;
    left: -40px;
    top: 1.5rem;
    width: 30px;
    height: 30px;
    background-color: var(--primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-weight: 600;
    box-shadow: var(--box-shadow);
}

/* Radio and Other Input Fixes */
.radio-options-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* IMPROVED: Styling for radio option with input field */
.radio-option-with-input {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
}

.radio-primary {
    display: flex;
    align-items: center;
    position: relative;
}

/* Make sure the "Other" radio option has the same styling as other radio options */
.radio-primary input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.radio-primary label {
    position: relative;
    padding-left: 2rem;
    cursor: pointer;
    line-height: 24px;
    font-weight: normal;
    display: inline-block;
    color: var(--text-color);
    user-select: none;
    font-size: 0.95rem;
    font-family: 'Poppins', sans-serif;
}

.radio-primary label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    transition: var(--transition);
    border-radius: 50%;
}

.radio-primary:hover label:before {
    border-color: var(--primary-color);
}

.radio-primary input[type="radio"]:checked + label:before {
    background-color: var(--primary-light);
    border-color: var(--primary-color);
}

.radio-primary input[type="radio"]:checked + label:after {
    content: '';
    position: absolute;
    left: 5px;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
}

/* IMPROVED: Dependent input styling */
.radio-dependent-input {
    margin-left: 2rem;
    margin-top: 0.5rem;
    width: calc(100% - 2rem);
    max-width: 100%;
    transition: all 0.3s ease;
}

.radio-dependent-input input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    background-color: var(--input-bg);
    color: var(--text-color);
    font-family: 'Poppins', sans-serif;
    box-shadow: var(--box-shadow);
}

.radio-dependent-input input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* Improved radio option display */
.radio-options-container .radio-option input[type="radio"]:checked + label:before {
    background-color: var(--primary-light);
    border-color: var(--primary-color);
}

.radio-option-with-input input[type="radio"]:checked ~ .radio-dependent-input {
    display: block;
}

/* Conditional textarea containers */
.desc-container {
    margin-top: 1rem;
    display: none;
}

.desc-container.show {
    display: block;
}

/* IMPROVED: Date picker enhancements */
.flatpickr-input {
    background-color: var(--input-bg) !important;
    cursor: pointer;
}

.flatpickr-calendar {
    font-family: 'Poppins', sans-serif;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: var(--radius);
    border: none;
    background-color: var(--card-bg);
}

.flatpickr-day {
    border-radius: var(--radius-sm);
    margin: 2px;
    line-height: 36px;
    transition: all 0.2s ease;
}

.flatpickr-day.selected {
    background: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 2px 5px rgba(37, 99, 235, 0.3);
}

.flatpickr-day.selected:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.flatpickr-day:hover {
    background: var(--primary-light);
    border-color: var(--primary-light);
}

.flatpickr-day.today {
    border-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 600;
}

.flatpickr-monthSelect-month.selected {
    background: var(--primary-color);
    color: white;
}

.flatpickr-months {
    background-color: var(--primary-color);
    color: white;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    padding: 5px 0;
}

.flatpickr-months .flatpickr-prev-month, 
.flatpickr-months .flatpickr-next-month {
    color: white;
    fill: white;
    padding: 5px;
}

.flatpickr-current-month {
    padding: 5px 0;
}

.flatpickr-weekdays {
    background-color: var(--primary-light);
    color: var(--primary-dark);
    font-weight: 600;
}

.flatpickr-weekday {
    color: var(--primary-dark);
    font-weight: 600;
}

/* IMPROVED: Reasons for leaving - Other option */
#reasonsOtherContainer {
    margin-top: 10px;
    margin-bottom: 15px;
    width: 100%;
    max-width: 100%;
    padding-left: 30px;
    transition: all 0.3s ease;
    display: none;
}

#reasonsOtherContainer input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    background-color: var(--input-bg);
    color: var(--text-color);
    box-shadow: var(--box-shadow);
}

#reasonsOtherContainer input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* Date input specific styling */
input.date-picker {
    cursor: pointer;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .app-container {
        flex-direction: column;
    }
    
    .insights-sidebar {
        width: 100%;
        height: auto;
        position: relative;
        padding: 1rem;
    }
    
    .main-content {
        margin-left: 0;
        max-width: 100%;
        padding: 1rem;
    }
    
    .section-indicator {
        display: none;
    }
    
    .nav-section {
        margin-top: 1rem;
    }
    
    .nav-links {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .nav-links li {
        margin-bottom: 0;
    }
    
    .nav-links a {
        padding: 0.5rem;
    }
    
    .insights-section {
        padding: 1rem;
    }
}

@media (max-width: 768px) {
    .header h1 {
        font-size: 1.5rem;
    }
    
    .form-section {
        padding: 1.25rem;
    }
    
    .grid-container {
        grid-template-columns: 1fr;
    }
    
    .checkbox-grid {
        grid-template-columns: 1fr;
    }
    
    .modal-content {
        width: 90%;
    }
    
    .app-container {
        flex-direction: column;
    }
    
    .insights-sidebar,
    .main-content {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }
    
    .insights-sidebar {
        display: none; /* Hide on mobile by default */
    }
    
    .show-mobile-insights .insights-sidebar {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 1000;
        padding: 1rem;
    }
    
    .mobile-insights-toggle {
        display: block;
        position: fixed;
        bottom: 5rem;
        right: 1rem;
        background: var(--primary-color);
        color: white;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 100;
        box-shadow: var(--box-shadow);
    }
    
    .close-insights {
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 1.5rem;
        color: var(--text-color);
        cursor: pointer;
    }
    
    .admin-toggle {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .admin-mode-switch {
        padding: 0.4rem 0.6rem;
    }
    
    .admin-mode-indicator {
        top: 100px;
        font-size: 0.75rem;
        padding: 0.4rem 0.8rem;
    }
}

/* Error styling improvements */
.error-field {
    border-color: #ef4444 !important;
    background-color: #fff5f5 !important;
    box-shadow: 0 0 0 1px #ef4444 !important;
}

.error-form-group label {
    color: #ef4444 !important;
    font-weight: 600;
}

.error-section {
    border-left-color: #ef4444 !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.1) !important;
}

.error-row {
    background-color: #fff5f5 !important;
}

.error-row td:first-child {
    color: #ef4444 !important;
    font-weight: 600;
}

/* New tooltip styles */
.error-tooltip,
.error-field-tooltip,
.error-option-tooltip,
.error-rating-tooltip {
    position: absolute;
    background-color: #ef4444;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    z-index: 100;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    animation: tooltip-fade-in 0.3s ease;
}

@keyframes tooltip-fade-in {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.error-tooltip {
    bottom: -25px;
    left: 0;
}

.error-field-tooltip {
    top: 50%;
    right: -110px;
    transform: translateY(-50%);
}

.error-option-tooltip {
    top: 0;
    right: 0;
}

.error-rating-tooltip {
    top: 0;
    right: 0;
}

.error-notification {
    background-color: #ef4444;
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    font-weight: 500;
    animation: notification-slide-in 0.5s ease;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
}

@keyframes notification-slide-in {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.error-notification i {
    margin-right: 10px;
    font-size: 1.2rem;
}

.fade-out {
    animation: fade-out 0.5s ease forwards;
}

@keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Error highlight animations */
.shake-animation {
    animation: shake 0.6s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
    40%, 60% { transform: translate3d(3px, 0, 0); }
}

.error-question {
    position: relative;
}

.error-question .question-number {
    background-color: #ef4444 !important;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
    70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.success-message {
    text-align: center;
    padding: 3rem 2rem;
    background-color: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--box-shadow);
    border-left: 5px solid var(--success-color);
}

.success-icon {
    font-size: 4rem;
    color: var(--success-color);
    margin-bottom: 1.5rem;
}

.success-message h3 {
    font-size: 1.5rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
    font-weight: 600;
}

.success-message p {
    color: var(--text-color);
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.success-note {
    color: var(--text-light) !important;
    font-style: italic;
    margin-top: 1rem !important;
}

/* Rating circle enhanced styling */
.rating-circle {
    cursor: pointer;
}

.rating-circle:hover {
    border-color: var(--primary-color);
    transform: scale(1.1);
    transition: all 0.2s ease;
}

.rating-circle.selected {
    border-color: var(--primary-color);
    background-color: var(--primary-light);
}

.rating-circle.selected::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: var(--primary-color);
    border-radius: 50%;
}

.completed-row {
    background-color: rgba(16, 185, 129, 0.05) !important;
}

/* Success notification */
.success-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: var(--success-color);
    color: white;
    padding: 15px 20px;
    border-radius: var(--radius);
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    z-index: 1001;
    animation: slide-in-right 0.5s ease;
}

@keyframes slide-in-right {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.success-notification i {
    font-size: 1.2rem;
}
</style>
<body>
    <!-- Admin Toggle Button and Switch -->
    <div class="admin-toggle">
        <div class="admin-mode-switch">
            <span class="admin-mode-label">Admin Mode</span>
            <label class="switch">
                <input type="checkbox" id="adminModeToggle">
                <span class="slider"></span>
            </label>
        </div>
        <button class="admin-button" onclick="openAdminDashboardModal()">
            <i class="fas fa-tachometer-alt"></i> Dashboard
        </button>
    </div>

    <!-- Admin Mode Indicator -->
    <div class="admin-mode-indicator">
        <i class="fas fa-shield-alt"></i> Admin Mode Active
    </div>

    <!-- Admin Dashboard Modal -->
    <div id="adminDashboardModal" class="admin-modal">
        <div class="modal-content">
            <h3 class="modal-title"><i class="fas fa-tachometer-alt"></i> Admin Dashboard Access</h3>
            <input type="password" id="adminDashboardPassword" class="modal-input" placeholder="Enter dashboard password">
            <div class="modal-buttons">
                <button class="modal-button modal-cancel" onclick="closeAdminDashboardModal()">Cancel</button>
                <button class="modal-button modal-submit" onclick="validateAdminDashboardAccess()">Login</button>
            </div>
        </div>
    </div>

    <!-- Admin Mode Modal -->
    <div id="adminModeModal" class="admin-mode-modal">
        <div class="modal-content">
            <h3 class="modal-title"><i class="fas fa-cog"></i> Admin Mode Access</h3>
            <input type="password" id="adminModePassword" class="modal-input" placeholder="Enter admin mode password">
            <div class="modal-buttons">
                <button class="modal-button modal-cancel" onclick="closeAdminModeModal()">Cancel</button>
                <button class="modal-button modal-submit" onclick="validateAdminModeAccess()">Activate</button>
            </div>
        </div>
    </div>

    <!-- Custom Field Modal -->
    <div id="customFieldModal" class="custom-field-modal">
        <div class="custom-field-content">
            <h3 class="custom-field-title">Add Custom Option</h3>
            <form class="custom-field-form" id="customFieldForm">
                <input type="hidden" id="customFieldType" name="fieldType">
                <label for="customFieldValue">New Option:</label>
                <input type="text" id="customFieldValue" name="fieldValue" class="custom-field-input" placeholder="Enter custom option" required>
                <div class="custom-field-buttons">
                    <button type="button" class="custom-field-cancel" onclick="closeCustomFieldModal()">Cancel</button>
                    <button type="submit" class="custom-field-submit">Add Option</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Progress Indicator -->
    <div class="progress-container">
        <div class="progress-bar" id="progressBar"></div>
    </div>

    <div class="app-container">
        <!-- Left Sidebar with Insights -->
        <div class="insights-sidebar" id="insightsSidebar">
             <div class="close-insights" id="closeInsights"></div>
            
            <div class="logo-container">
                <div class="company-logo"><img src="https://github.com/Sweety-Vigneshg/Vdart_Asset_Images/blob/main/vdartorginallogo.png?raw=true" alt="VDart Logo" style="max-width: 150px; height: auto;"></div>
            </div>
            
            <div class="insights-header">
                <h2 class="insights-title">Exit Interview</h2>
                <p class="insights-subtitle">Insights & Navigation</p>
            </div>
            
            <!-- Quick Navigation Links -->
            <div class="nav-section">
                <h3 class="nav-heading">Quick Navigation</h3>
                <ul class="nav-links">
                    <li><a href="#employee-info" class="active"><i class="fas fa-user"></i> Employee Info</a></li>
                    <li><a href="#question1"><i class="fas fa-question-circle"></i> Resignation Time</a></li>
                    <li><a href="#question2"><i class="fas fa-question-circle"></i> Reasons for Leaving</a></li>
                    <li><a href="#question3"><i class="fas fa-question-circle"></i> Options to Stay</a></li>
                    <li><a href="#question4"><i class="fas fa-question-circle"></i> Specific Event</a></li>
                    <li><a href="#question5"><i class="fas fa-question-circle"></i> Recommend Company</a></li>
                    <li><a href="#question6"><i class="fas fa-question-circle"></i> Reapplying</a></li>
                    <li><a href="#ratings"><i class="fas fa-star"></i> Experience Ratings</a></li>
                </ul>
            </div>
            
            <!-- Insights Section -->
            <div class="insights-section">
                <h3><i class="fas fa-lightbulb"></i> Why Exit Interviews Matter</h3>
                <ul class="insights-list">
                    <li>Exit interviews provide valuable feedback for organizational improvement</li>
                    <li>They help identify trends in employee departures</li>
                    <li>Your honest feedback helps us create a better workplace</li>
                    <li>All responses are kept confidential and reviewed carefully</li>
                </ul>
            </div>
            
            <!-- Top Insights -->
            <div class="insights-section">
                <h3><i class="fas fa-chart-line"></i> Top Reasons People Leave</h3>
                <ul class="insights-list">
                    <li>Career advancement opportunities</li>
                    <li>Compensation and benefits</li>
                    <li>Work-life balance challenges</li>
                    <li>Company culture misalignment</li>
                    <li>Relationship with management</li>
                </ul>
                
                <div class="insights-tips">
                    <p>Your candid feedback helps us address these issues and improve for current and future employees.</p>
                </div>
            </div>
            
            <!-- Completion Guidance -->
            <div class="insights-section">
                <h3><i class="fas fa-clipboard-check"></i> Form Completion Tips</h3>
                <ul class="insights-list">
                    <li>Be specific about your experiences</li>
                    <li>Provide constructive feedback</li>
                    <li>All questions marked with * are required</li>
                    <li>Your progress is automatically saved</li>
                    <li>Review your answers before submission</li>
                </ul>
            </div>
        </div>

        <!-- Main Content Area -->
        <div class="main-content">
            <div class="container">
                <div class="header">
                    <h1>Exit Interview Form</h1>
                    <p>We would appreciate you taking about 8-10 minutes to answer the following questions honestly. Your responses are confidential and will help us improve our workplace.</p>
                    <p>Thank you for sharing your experience and feedback with us.</p>
                </div>

                <?php if (!empty($validationErrors)): ?>
                <div class="error-summary" id="error-summary">
                    <h3><i class="fas fa-exclamation-triangle"></i> Please correct the following errors:</h3>
                    <ul>
                        <?php foreach ($validationErrors as $error): ?>
                            <li><?php echo $error; ?></li>
                        <?php endforeach; ?>
                    </ul>
                </div>
                <?php endif; ?>

                <?php if (!empty($errorMessage)): ?>
                <div class="error-summary" id="error-summary">
                    <h3><i class="fas fa-exclamation-triangle"></i> Error:</h3>
                    <p><?php echo $errorMessage; ?></p>
                </div>
                <?php endif; ?>

                <form id="exitInterviewForm" action="exit-interview1.php" method="POST">
                    <!-- Employee Information Section -->
                    <div class="form-section" id="employee-info">
                        <div class="section-header">
                            <i class="fas fa-user-circle"></i>
                            <h2>Employee Information</h2>
                        </div>
                        <div class="grid-container">
                            <div class="form-group">
                                <label for="employeeName">Employee Name</label>
                                <div class="input-with-icon">
                                    <i class="fas fa-user"></i>
                                    <input type="text" id="employeeName" name="employeeName" value="<?php echo isset($formData['employeeName']) ? htmlspecialchars($formData['employeeName']) : ''; ?>">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="employeeId">Employee ID</label>
                                <div class="input-with-icon">
                                    <i class="fas fa-id-card"></i>
                                    <input type="text" id="employeeId" name="employeeId" value="<?php echo isset($formData['employeeId']) ? htmlspecialchars($formData['employeeId']) : ''; ?>">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="designation">Designation</label>
                                <div class="input-with-icon">
                                    <i class="fas fa-briefcase"></i>
                                    <input type="text" id="designation" name="designation" value="<?php echo isset($formData['designation']) ? htmlspecialchars($formData['designation']) : ''; ?>">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="team">Team</label>
                                <div class="custom-select">
                                    <i class="fas fa-users select-icon"></i>
                                    <select id="team" name="team">
                                        <option value="" <?php echo empty($formData['team']) ? 'selected' : ''; ?>>-- Select --</option>
                                        <option value="Team Jack" <?php echo (isset($formData['team']) && $formData['team'] === 'Team Jack') ? 'selected' : ''; ?>>Team Jack</option>
                                        <option value="Team Robert" <?php echo (isset($formData['team']) && $formData['team'] === 'Team Robert') ? 'selected' : ''; ?>>Team Robert</option>
                                        <option value="Team Alice" <?php echo (isset($formData['team']) && $formData['team'] === 'Team Alice') ? 'selected' : ''; ?>>Team Alice</option>
                                        <option value="Team Michael" <?php echo (isset($formData['team']) && $formData['team'] === 'Team Michael') ? 'selected' : ''; ?>>Team Michael</option>
                                        <?php
                                        // Add custom team options
                                        $customTeams = getCustomDropdownFields('team');
                                        foreach ($customTeams as $customTeam) {
                                            $selected = (isset($formData['team']) && $formData['team'] === $customTeam) ? 'selected' : '';
                                            echo '<option value="' . htmlspecialchars($customTeam) . '" ' . $selected . ' class="custom-option" data-field-type="team" data-field-value="' . htmlspecialchars($customTeam) . '">' . htmlspecialchars($customTeam) . '</option>';
                                        }
                                        ?>
                                    </select>
                                    <div class="select-arrow"></div>
                                    <button type="button" class="add-field-btn" onclick="openCustomFieldModal('team')" title="Add custom option">
                                        <i class="fas fa-plus"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="calDal">CAL/DAL</label>
                                <div class="custom-select">
                                    <i class="fas fa-building select-icon"></i>
                                    <select id="calDal" name="calDal">
                                        <option value="" <?php echo empty($formData['calDal']) ? 'selected' : ''; ?>>-- Select --</option>
                                        <option value="CAL" <?php echo (isset($formData['calDal']) && $formData['calDal'] === 'CAL') ? 'selected' : ''; ?>>CAL</option>
                                        <option value="DAL" <?php echo (isset($formData['calDal']) && $formData['calDal'] === 'DAL') ? 'selected' : ''; ?>>DAL</option>
                                        <?php
                                        // Add custom CAL/DAL options
                                        $customCalDal = getCustomDropdownFields('calDal');
                                        foreach ($customCalDal as $customOption) {
                                            $selected = (isset($formData['calDal']) && $formData['calDal'] === $customOption) ? 'selected' : '';
                                            echo '<option value="' . htmlspecialchars($customOption) . '" ' . $selected . ' class="custom-option" data-field-type="calDal" data-field-value="' . htmlspecialchars($customOption) . '">' . htmlspecialchars($customOption) . '</option>';
                                        }
                                        ?>
                                    </select>
                                    <div class="select-arrow"></div>
                                    <button type="button" class="add-field-btn" onclick="openCustomFieldModal('calDal')" title="Add custom option">
                                        <i class="fas fa-plus"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="buHead">BU Head</label>
                                <div class="custom-select">
                                    <i class="fas fa-user-tie select-icon"></i>
                                    <select id="buHead" name="buHead">
                                        <option value="" <?php echo empty($formData['buHead']) ? 'selected' : ''; ?>>-- Select --</option>
                                        <option value="John Smith" <?php echo (isset($formData['buHead']) && $formData['buHead'] === 'John Smith') ? 'selected' : ''; ?>>John Smith</option>
                                        <option value="Sarah Johnson" <?php echo (isset($formData['buHead']) && $formData['buHead'] === 'Sarah Johnson') ? 'selected' : ''; ?>>Sarah Johnson</option>
                                        <option value="Robert Davis" <?php echo (isset($formData['buHead']) && $formData['buHead'] === 'Robert Davis') ? 'selected' : ''; ?>>Robert Davis</option>
                                        <?php
                                        // Add custom BU Head options
                                        $customBuHeads = getCustomDropdownFields('buHead');
                                        foreach ($customBuHeads as $customBuHead) {
                                            $selected = (isset($formData['buHead']) && $formData['buHead'] === $customBuHead) ? 'selected' : '';
                                            echo '<option value="' . htmlspecialchars($customBuHead) . '" ' . $selected . ' class="custom-option" data-field-type="buHead" data-field-value="' . htmlspecialchars($customBuHead) . '">' . htmlspecialchars($customBuHead) . '</option>';
                                        }
                                        ?>
                                    </select>
                                    <div class="select-arrow"></div>
                                    <button type="button" class="add-field-btn" onclick="openCustomFieldModal('buHead')" title="Add custom option">
                                        <i class="fas fa-plus"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="doj">Date of Joining</label>
                                <div class="input-with-icon">
                                    <i class="fas fa-calendar-plus"></i>
                                    <input type="text" id="doj" name="doj" class="date-picker" value="<?php echo isset($formData['doj']) ? htmlspecialchars($formData['doj']) : ''; ?>" placeholder="DD/MM/YYYY">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="dor">Date of Resignation</label>
                                <div class="input-with-icon">
                                    <i class="fas fa-calendar-minus"></i>
                                    <input type="text" id="dor" name="dor" class="date-picker" value="<?php echo isset($formData['dor']) ? htmlspecialchars($formData['dor']) : ''; ?>" placeholder="DD/MM/YYYY">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Question 1 -->
                    <div class="form-section" id="question1">
                        <div class="question-header">
                            <div class="question-number">1</div>
                            <h3>At approximately what point in time did you begin making your decision to resign?</h3>
                        </div>
                        
                        <div class="radio-options-container">
                            <div class="radio-option">
                                <input type="radio" id="resign1" name="resignDecision" value="1-2 months ago" <?php echo (isset($formData['resignDecision']) && $formData['resignDecision'] === '1-2 months ago') ? 'checked' : ''; ?>>
                                <label for="resign1">1-2 months ago</label>
                            </div>
                            
                            <div class="radio-option">
                                <input type="radio" id="resign2" name="resignDecision" value="3-5 months ago" <?php echo (isset($formData['resignDecision']) && $formData['resignDecision'] === '3-5 months ago') ? 'checked' : ''; ?>>
                                <label for="resign2">3-5 months ago</label>
                            </div>
                            
                            <div class="radio-option">
                                <input type="radio" id="resign3" name="resignDecision" value="6-9 months ago" <?php echo (isset($formData['resignDecision']) && $formData['resignDecision'] === '6-9 months ago') ? 'checked' : ''; ?>>
                                <label for="resign3">6-9 months ago</label>
                            </div>
                            
                            <div class="radio-option-with-input">
                                <div class="radio-primary">
                                    <input type="radio" id="resign4" name="resignDecision" value="Other" <?php echo (isset($formData['resignDecision']) && strpos($formData['resignDecision'], 'Other:') === 0) ? 'checked' : ''; ?>>
                                    <label for="resign4">Other</label>
                                </div>
                                <div class="radio-dependent-input" id="resignOtherContainer">
                                    <input type="text" id="resignOther" name="resignOther" placeholder="Please specify" value="<?php echo (isset($formData['resignDecision']) && strpos($formData['resignDecision'], 'Other:') === 0) ? htmlspecialchars(substr($formData['resignDecision'], 7)) : ''; ?>">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Question 2 -->
                    <div class="form-section" id="question2">
                        <div class="question-header">
                            <div class="question-number">2</div>
                            <h3>What are the reasons for leaving? Select one or more</h3>
                        </div>
                        <div class="checkbox-grid">
                            <?php
                            // Define all reasons for leaving options
                            $reasonOptions = [
                                'reason1' => 'Higher pay',
                                'reason2' => 'Better benefits',
                                'reason3' => 'Better career opportunity',
                                'reason4' => 'Career change',
                                'reason5' => 'Relocation',
                                'reason6' => 'Health Problem',
                                'reason7' => 'Conflict with Co-Worker',
                                'reason8' => 'Conflict with Managers',
                                'reason9' => 'Marriage',
                                'reason10' => 'Shift Problem',
                                'reason11' => 'Lack of Recognition',
                                'reason12' => 'Family Circumstances',
                                'reason13' => 'Type of Work',
                                'reason14' => 'Company Culture',
                                'reason15' => 'Self Employment',
                                'reason16' => 'Lack of Advancement',
                                'reason17' => 'Lack of Training',
                                'reason18' => 'Furthering Education',
                                'reason19' => 'Change in Team/Manager'
                            ];
                            
                            // Check if "Others" reason contains a specific value
                            $othersChecked = false;
                            $othersValue = '';
                            if (isset($formData['reasonsForLeaving']) && is_array($formData['reasonsForLeaving'])) {
                                foreach ($formData['reasonsForLeaving'] as $reason) {
                                    if (strpos($reason, 'Others:') === 0) {
                                        $othersChecked = true;
                                        $othersValue = substr($reason, 8); // Extract the value after "Others: "
                                        break;
                                    }
                                }
                            }
                            
                            // Output each checkbox option
                            foreach ($reasonOptions as $id => $value) {
                                $checked = '';
                                if (isset($formData['reasonsForLeaving']) && in_array($value, $formData['reasonsForLeaving'])) {
                                    $checked = 'checked';
                                }
                                echo '<div class="checkbox-option">
                                        <input type="checkbox" id="' . $id . '" name="reasonsForLeaving[]" value="' . $value . '" ' . $checked . '>
                                        <label for="' . $id . '">' . $value . '</label>
                                      </div>';
                            }
                            ?>
                            <div class="checkbox-option">
                                <input type="checkbox" id="reason20" name="reasonsForLeaving[]" value="Others" <?php echo $othersChecked ? 'checked' : ''; ?>>
                                <label for="reason20">Others</label>
                            </div>
                        </div>
                        <div class="form-group" id="reasonsOtherContainer" style="<?php echo $othersChecked ? 'display: block;' : 'display: none;'; ?>">
                            <input type="text" id="reasonsOther" name="reasonsOther" placeholder="Please specify other reasons" value="<?php echo htmlspecialchars($othersValue); ?>">
                        </div>
                    </div>

                    <!-- Question 3 -->
                    <div class="form-section" id="question3">
                        <div class="question-header">
                            <div class="question-number">3</div>
                            <h3>Before making your decision to leave, did you explore options that would enable you to stay?</h3>
                        </div>
                        <div class="radio-group">
                            <div class="radio-option">
                                <input type="radio" id="explored1" name="exploredOptions" value="Yes" <?php echo (isset($formData['exploredOptions']) && $formData['exploredOptions'] === 'Yes') ? 'checked' : ''; ?>>
                                <label for="explored1">Yes</label>
                            </div>
                            <div class="radio-option">
                                <input type="radio" id="explored2" name="exploredOptions" value="No" <?php echo (isset($formData['exploredOptions']) && $formData['exploredOptions'] === 'No') ? 'checked' : ''; ?>>
                                <label for="explored2">No</label>
                            </div>
                        </div>
                        <div id="exploredOptionsDescContainer" class="desc-container <?php echo (isset($formData['exploredOptions']) && $formData['exploredOptions'] === 'Yes') ? 'show' : ''; ?>">
                            <label for="exploredOptionsDesc">If "yes", please describe:</label>
                            <div class="textarea-with-icon">
                                <i class="fas fa-comment-dots"></i>
                                <textarea id="exploredOptionsDesc" name="exploredOptionsDesc" rows="2"><?php echo isset($formData['exploredOptionsDesc']) ? htmlspecialchars($formData['exploredOptionsDesc']) : ''; ?></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Question 4 -->
                    <div class="form-section" id="question4">
                        <div class="question-header">
                            <div class="question-number">4</div>
                            <h3>Was there a specific event or issue that prompted your resignation?</h3>
                        </div>
                        <div class="radio-group">
                            <div class="radio-option">
                                <input type="radio" id="specificEvent1" name="specificEvent" value="Yes" <?php echo (isset($formData['specificEvent']) && $formData['specificEvent'] === 'Yes') ? 'checked' : ''; ?>>
                                <label for="specificEvent1">Yes</label>
                            </div>
                            <div class="radio-option">
                                <input type="radio" id="specificEvent2" name="specificEvent" value="No" <?php echo (isset($formData['specificEvent']) && $formData['specificEvent'] === 'No') ? 'checked' : ''; ?>>
                                <label for="specificEvent2">No</label>
                            </div>
                        </div>
                        <div id="specificEventDescContainer" class="desc-container <?php echo (isset($formData['specificEvent']) && $formData['specificEvent'] === 'Yes') ? 'show' : ''; ?>">
                            <label for="specificEventDesc">If "yes", please describe:</label>
                            <div class="textarea-with-icon">
                                <i class="fas fa-exclamation-circle"></i>
                                <textarea id="specificEventDesc" name="specificEventDesc" rows="2"><?php echo isset($formData['specificEventDesc']) ? htmlspecialchars($formData['specificEventDesc']) : ''; ?></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Question 5 -->
                    <div class="form-section" id="question5">
                        <div class="question-header">
                            <div class="question-number">5</div>
                            <h3>Would you recommend our company as a potential employer to others?</h3>
                        </div>
                        <div class="radio-group">
                            <div class="radio-option">
                                <input type="radio" id="recommend1" name="recommendCompany" value="Yes" <?php echo (isset($formData['recommendCompany']) && $formData['recommendCompany'] === 'Yes') ? 'checked' : ''; ?>>
                                <label for="recommend1">Yes</label>
                            </div>
                            <div class="radio-option">
                                <input type="radio" id="recommend2" name="recommendCompany" value="No" <?php echo (isset($formData['recommendCompany']) && $formData['recommendCompany'] === 'No') ? 'checked' : ''; ?>>
                                <label for="recommend2">No</label>
                            </div>
                        </div>
                        <div id="recommendCompanyDescContainer" class="desc-container <?php echo (isset($formData['recommendCompany']) && $formData['recommendCompany'] === 'No') ? 'show' : ''; ?>">
                            <label for="recommendCompanyDesc">If "No", please describe your reasons:</label>
                            <div class="textarea-with-icon">
                                <i class="fas fa-thumbs-down"></i>
                                <textarea id="recommendCompanyDesc" name="recommendCompanyDesc" rows="2"><?php echo isset($formData['recommendCompanyDesc']) ? htmlspecialchars($formData['recommendCompanyDesc']) : ''; ?></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Question 6 -->
                    <div class="form-section" id="question6">
                        <div class="question-header">
                            <div class="question-number">6</div>
                            <h3>Based upon your experience, would you be open to reapplying to future opportunities with our company?</h3>
                        </div>
                        <div class="radio-group">
                            <div class="radio-option">
                                <input type="radio" id="reapply1" name="openToReapply" value="Yes" <?php echo (isset($formData['openToReapply']) && $formData['openToReapply'] === 'Yes') ? 'checked' : ''; ?>>
                                <label for="reapply1">Yes</label>
                            </div>
                            <div class="radio-option">
                                <input type="radio" id="reapply2" name="openToReapply" value="No" <?php echo (isset($formData['openToReapply']) && $formData['openToReapply'] === 'No') ? 'checked' : ''; ?>>
                                <label for="reapply2">No</label>
                            </div>
                        </div>
                        <div id="openToReapplyDescContainer" class="desc-container <?php echo (isset($formData['openToReapply']) && $formData['openToReapply'] === 'No') ? 'show' : ''; ?>">
                            <label for="openToReapplyDesc">If "No", please explain:</label>
                            <div class="textarea-with-icon">
                                <i class="fas fa-door-closed"></i>
                                <textarea id="openToReapplyDesc" name="openToReapplyDesc" rows="2"><?php echo isset($formData['openToReapplyDesc']) ? htmlspecialchars($formData['openToReapplyDesc']) : ''; ?></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Question 7 -->
                    <div class="form-section">
                        <div class="question-header">
                            <div class="question-number">7</div>
                            <h3>What could we have done to encourage you to stay?</h3>
                        </div>
                        <div class="textarea-with-icon">
                            <i class="fas fa-heart"></i>
                            <textarea id="encourageToStay" name="encourageToStay" rows="3" placeholder="Please share your thoughts here..."><?php echo isset($formData['encourageToStay']) ? htmlspecialchars($formData['encourageToStay']) : ''; ?></textarea>
                        </div>
                    </div>

                    <!-- Question 8 -->
                    <div class="form-section">
                        <div class="question-header">
                            <div class="question-number">8</div>
                            <h3>What factors were important in choosing your new role?</h3>
                        </div>
                        <div class="textarea-with-icon">
                            <i class="fas fa-briefcase"></i>
                            <textarea id="factorsNewRole" name="factorsNewRole" rows="3" placeholder="Please share your thoughts here..."><?php echo isset($formData['factorsNewRole']) ? htmlspecialchars($formData['factorsNewRole']) : ''; ?></textarea>
                        </div>
                    </div>

                    <!-- Question 9 -->
                    <div class="form-section">
                        <div class="question-header">
                            <div class="question-number">9</div>
                            <h3>What work related issues, areas, policies or benefits would you like to see improved?</h3>
                        </div>
                        <div class="textarea-with-icon">
                            <i class="fas fa-tools"></i>
                            <textarea id="areasToImprove" name="areasToImprove" rows="3" placeholder="Please share your thoughts here..."><?php echo isset($formData['areasToImprove']) ? htmlspecialchars($formData['areasToImprove']) : ''; ?></textarea>
                        </div>
                    </div>
                    
                    <!-- Question 10 -->
                    <div class="form-section">
                        <div class="question-header">
                            <div class="question-number">10</div>
                            <h3>Are there any team members you'd like to specifically thank?</h3>
                        </div>
                        <div class="textarea-with-icon">
                            <i class="fas fa-users"></i>
                            <textarea id="membersToThank" name="membersToThank" rows="3" placeholder="Please share your thoughts here..."><?php echo isset($formData['membersToThank']) ? htmlspecialchars($formData['membersToThank']) : ''; ?></textarea>
                        </div>
                    </div>
                    
                    <!-- Rating Table -->
                    <div class="form-section" id="ratings">
                        <div class="section-header">
                            <i class="fas fa-star"></i>
                            <h2>Your Experience Ratings</h2>
                        </div>
                        <div class="table-wrapper">
                            <table class="rating-table">
                                <thead>
                                    <tr>
                                        <th>Question</th>
                                        <th>Excellent</th>
                                        <th>Good</th>
                                        <th>Fair</th>
                                        <th>Poor</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php
                                    // Define rating fields and their questions
                                    $ratingFields = [
                                        'ratingPay' => 'How did you feel about the pay and benefits?',
                                        'ratingTraining' => 'Quantity and quality of training received for your position',
                                        'ratingSupervisor' => 'Please rate your direct supervisor',
                                        'ratingRelationship' => 'Working relationship with fellow employees',
                                        'ratingBenefits' => 'Please rate the company\'s benefits, perks and workplace experience',
                                        'ratingPromotion' => 'Promotion policies and practices',
                                        'ratingPerformance' => 'Performance review policies and practices',
                                        'ratingDiscipline' => 'Discipline policies and practices'
                                    ];

                                    // Loop through all rating fields
                                    foreach ($ratingFields as $field => $question) {
                                        $value = isset($formData[$field]) ? $formData[$field] : '';
                                        $rowClass = !empty($value) ? 'completed-row' : '';
                                        
                                        echo '<tr class="' . $rowClass . '">';
                                        echo '<td>' . $question . '</td>';
                                        
                                        // For each possible rating value
                                        foreach (['Excellent', 'Good', 'Fair', 'Poor'] as $rating) {
                                            $selected = ($value === $rating) ? 'selected' : '';
                                            echo '<td><div class="rating-circle ' . $selected . '" data-rating="' . $rating . '" data-field="' . $field . '"></div></td>';
                                        }
                                        
                                        echo '<input type="hidden" name="' . $field . '" id="' . $field . '" value="' . htmlspecialchars($value) . '">';
                                        echo '</tr>';
                                    }
                                    ?>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- HRBP Note -->
                    <div class="form-section">
                        <div class="section-header">
                            <i class="fas fa-user-shield"></i>
                            <h2>HRBP Note</h2>
                            <p class="section-subtitle">(To be filled by HR)</p>
                        </div>
                        <div class="textarea-with-icon">
                            <i class="fas fa-clipboard-list"></i>
                            <textarea id="hrbpNote" name="hrbpNote" rows="3"><?php echo isset($formData['hrbpNote']) ? htmlspecialchars($formData['hrbpNote']) : ''; ?></textarea>
                        </div>
                    </div>

                    <!-- Submit Button -->
                    <div class="form-footer">
                        <button type="submit" class="submit-btn">
                            <i class="fas fa-paper-plane"></i> Submit Exit Interview
                        </button>
                        <p class="footer-text">
                            Thank you for your time. We wish you the best of luck in your future endeavors.
                        </p>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Theme Toggle Button -->
    <div class="theme-toggle" id="themeToggle">
        <i class="fas fa-moon"></i>
    </div>

    <!-- Scroll to Top Button -->
    <div class="scroll-top-btn" id="scrollTopBtn">
        <i class="fas fa-arrow-up"></i>
    </div>

<!-- Add Datepicker Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js"></script>

<script>
// Admin mode toggle
const adminModeToggle = document.getElementById('adminModeToggle');

adminModeToggle.addEventListener('change', function() {
    if (this.checked) {
        openAdminModeModal();
    } else {
        // Disable admin mode
        document.body.classList.remove('admin-mode');
        // Clear admin mode session
        sessionStorage.removeItem('admin_mode_active');
        showNotification('Admin mode deactivated', 'success');
    }
});

// Admin dashboard modal functions
function openAdminDashboardModal() {
    document.getElementById('adminDashboardModal').style.display = 'flex';
    document.getElementById('adminDashboardPassword').focus();
    
    // Add enter key listener
    document.getElementById('adminDashboardPassword').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            validateAdminDashboardAccess();
        }
    });
}

function closeAdminDashboardModal() {
    document.getElementById('adminDashboardModal').style.display = 'none';
    document.getElementById('adminDashboardPassword').value = '';
}

function validateAdminDashboardAccess() {
    const enteredPassword = document.getElementById('adminDashboardPassword').value;
    const submitButton = document.querySelector('#adminDashboardModal .modal-submit');
    
    // Show loading state
    submitButton.innerHTML = '<span class="loading-spinner"></span> Verifying...';
    submitButton.disabled = true;

    fetch(window.location.href, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: 'adminDashboardPassword=' + encodeURIComponent(enteredPassword)
    })
    .then(response => response.text())
    .then(data => {
        console.log('Server response:', data.trim()); // Debug line
        
        if (data.trim() === 'dashboard_success') {
            // Based on your file structure, the admin_dashboard.php is in the root directory
            window.location.href = './admin/admin_dashboard.php';
            
            // Alternative: If you want to use the admin folder version, create it first
            // window.location.href = './admin/admin_dashboard.php';
        } else {
            // Reset button
            submitButton.innerHTML = 'Login';
            submitButton.disabled = false;
            
            // Show error
            showNotification('Incorrect dashboard password', 'error');
            
            // Clear and focus on password field
            document.getElementById('adminDashboardPassword').value = '';
            document.getElementById('adminDashboardPassword').focus();
        }
    })
    .catch(error => {
        console.error('Error:', error);
        submitButton.innerHTML = 'Login';
        submitButton.disabled = false;
        showNotification('Network error occurred', 'error');
    });
}

// Admin mode modal functions
function openAdminModeModal() {
    document.getElementById('adminModeModal').style.display = 'flex';
    document.getElementById('adminModePassword').focus();
    
    // Add enter key listener
    document.getElementById('adminModePassword').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            validateAdminModeAccess();
        }
    });
}

function closeAdminModeModal() {
    document.getElementById('adminModeModal').style.display = 'none';
    document.getElementById('adminModePassword').value = '';
    document.getElementById('adminModeToggle').checked = false;
}

function validateAdminModeAccess() {
    const enteredPassword = document.getElementById('adminModePassword').value;
    const submitButton = document.querySelector('#adminModeModal .modal-submit');
    
    // Show loading state
    submitButton.innerHTML = '<span class="loading-spinner"></span> Verifying...';
    submitButton.disabled = true;

    fetch(window.location.href, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: 'adminModePassword=' + encodeURIComponent(enteredPassword)
    })
    .then(response => response.text())
    .then(data => {
        if (data === 'mode_success') {
            // Enable admin mode
            document.body.classList.add('admin-mode');
            sessionStorage.setItem('admin_mode_active', 'true');
            closeAdminModeModal();
            
            // Show success notification
            showNotification('Admin mode activated', 'success');
            
            // Add delete buttons to existing custom options
            addDeleteButtonsToCustomOptions();
        } else {
            // Reset button
            submitButton.innerHTML = 'Activate';
            submitButton.disabled = false;
            
            // Show error
            showNotification('Incorrect admin mode password', 'error');
            
            // Clear and focus on password field
            document.getElementById('adminModePassword').value = '';
            document.getElementById('adminModePassword').focus();
            
            // Uncheck the toggle
            document.getElementById('adminModeToggle').checked = false;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        submitButton.innerHTML = 'Activate';
        submitButton.disabled = false;
        document.getElementById('adminModeToggle').checked = false;
    });
}

// Custom field modal functions
function openCustomFieldModal(fieldType) {
    document.getElementById('customFieldType').value = fieldType;
    document.getElementById('customFieldModal').style.display = 'flex';
    document.getElementById('customFieldValue').focus();
}

function closeCustomFieldModal() {
    document.getElementById('customFieldModal').style.display = 'none';
    document.getElementById('customFieldValue').value = '';
}

// Add delete buttons to existing custom options
function addDeleteButtonsToCustomOptions() {
    const customOptions = document.querySelectorAll('.custom-option');
    customOptions.forEach(option => {
        // Check if delete button already exists
        if (!option.dataset.deleteAdded) {
            const fieldType = option.dataset.fieldType;
            const fieldValue = option.dataset.fieldValue;
            
            if (fieldType && fieldValue) {
                // Mark as processed
                option.dataset.deleteAdded = 'true';
                
                // Add delete functionality when option is selected
                const select = option.closest('select');
                select.addEventListener('change', function() {
                    if (this.value === fieldValue && document.body.classList.contains('admin-mode')) {
                        // Show delete confirmation
                        setTimeout(() => {
                            if (confirm('Do you want to delete this custom option: "' + fieldValue + '"?')) {
                                deleteCustomField(fieldType, fieldValue, option);
                            }
                        }, 100);
                    }
                });
            }
        }
    });
}

// Delete custom field function
function deleteCustomField(fieldType, fieldValue, optionElement) {
    fetch(window.location.href, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: 'deleteCustomField=1&fieldType=' + encodeURIComponent(fieldType) + '&fieldValue=' + encodeURIComponent(fieldValue)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Remove the option from the dropdown
            optionElement.remove();
            
            // Reset the select value to empty
            const select = document.querySelector(`select[name="${fieldType}"]`);
            if (select) {
                select.value = '';
            }
            
            showNotification('Custom option deleted successfully', 'success');
        } else {
            showNotification(data.message || 'Error deleting custom option', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showNotification('Error deleting custom option', 'error');
    });
}

// Handle custom field form submission
document.getElementById('customFieldForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const fieldType = document.getElementById('customFieldType').value;
    const fieldValue = document.getElementById('customFieldValue').value;
    
    // Send request to add custom field
    fetch(window.location.href, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: 'addCustomField=1&fieldType=' + encodeURIComponent(fieldType) + '&fieldValue=' + encodeURIComponent(fieldValue)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Add the new option to the dropdown
            const select = document.querySelector(`select[name="${fieldType}"]`);
            const newOption = document.createElement('option');
            newOption.value = fieldValue;
            newOption.textContent = fieldValue;
            newOption.classList.add('custom-option');
            newOption.dataset.fieldType = fieldType;
            newOption.dataset.fieldValue = fieldValue;
            select.appendChild(newOption);
            
            // Close modal and show success
            closeCustomFieldModal();
            showNotification('Custom option added successfully', 'success');
            
            // Add delete functionality to the new option
            if (document.body.classList.contains('admin-mode')) {
                addDeleteButtonsToCustomOptions();
            }
        } else {
            showNotification(data.message || 'Error adding custom option', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showNotification('Error adding custom option', 'error');
    });
});

// Notification function
function showNotification(message, type) {
    const notification = document.createElement('div');
    notification.className = type === 'success' ? 'success-notification' : 'error-notification';
    notification.innerHTML = `<i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'}"></i> ${message}`;
    
    document.body.appendChild(notification);
    
    // Auto-remove after 3 seconds
    setTimeout(() => {
        notification.style.animation = 'fade-out 0.5s ease forwards';
        setTimeout(() => {
            notification.remove();
        }, 500);
    }, 3000);
}

// Close modal if clicking outside of it
window.onclick = function(event) {
    const adminDashboardModal = document.getElementById('adminDashboardModal');
    const adminModeModal = document.getElementById('adminModeModal');
    const customFieldModal = document.getElementById('customFieldModal');
    
    if (event.target === adminDashboardModal) {
        closeAdminDashboardModal();
    }
    if (event.target === adminModeModal) {
        closeAdminModeModal();
    }
    if (event.target === customFieldModal) {
        closeCustomFieldModal();
    }
}

document.addEventListener('DOMContentLoaded', function() {
    // Check if admin mode was previously activated
    if (sessionStorage.getItem('admin_mode_active') === 'true') {
        document.body.classList.add('admin-mode');
        document.getElementById('adminModeToggle').checked = true;
        addDeleteButtonsToCustomOptions();
    }

    // Initialize date pickers with completely redesigned calendar
    flatpickr('.date-picker', {
        dateFormat: 'd/m/Y',
        allowInput: true,
        static: true,
        disableMobile: true,
        prevArrow: '<svg viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2" d="M15 18l-6-6 6-6"/></svg>',
        nextArrow: '<svg viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2" d="M9 18l6-6-6-6"/></svg>',
        animate: true,
        showMonths: 1,
        onOpen: function(selectedDates, dateStr, instance) {
            // Add animation class
            instance.calendarContainer.classList.add('open');
        },
        onReady: function(selectedDates, dateStr, instance) {
            // Add custom class to the calendar for additional styling
            instance.calendarContainer.classList.add('custom-calendar');
        },
        onClose: function(selectedDates, dateStr, instance) {
            // Update form group to completed state
            const formGroup = instance.element.closest('.form-group');
            if (formGroup && dateStr) {
                formGroup.classList.add('completed');
            }
            
            // Update progress bar
            updateProgressBar();
        }
    });
    
    // Handle mobile insights toggle
    const mobileInsightsToggle = document.getElementById('mobileInsightsToggle');
    const closeInsights = document.getElementById('closeInsights');
    const insightsSidebar = document.getElementById('insightsSidebar');
    
    if (mobileInsightsToggle) {
        mobileInsightsToggle.addEventListener('click', function() {
            document.body.classList.add('show-mobile-insights');
        });
    }
    
    if (closeInsights) {
        closeInsights.addEventListener('click', function() {
            document.body.classList.remove('show-mobile-insights');
        });
    }
    
    // Navigation links - smooth scroll and active state
    const navLinks = document.querySelectorAll('.nav-links a');
    
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            
            // Remove active class from all links
            navLinks.forEach(l => l.classList.remove('active'));
            
            // Add active class to clicked link
            this.classList.add('active');
            
            // Hide mobile insights panel if open
            document.body.classList.remove('show-mobile-insights');
            
            // Get target section ID
            const targetId = this.getAttribute('href');
            const targetSection = document.querySelector(targetId);
            
            // Scroll to target section
            if (targetSection) {
                targetSection.scrollIntoView({
                    behavior: 'smooth'
                });
            }
        });
    });

    // IMPROVED: Handle "Other" option in Question 1
    const resignOther = document.getElementById('resign4');
    const resignOtherContainer = document.getElementById('resignOtherContainer');
    
    if (resignOther && resignOtherContainer) {
        // Set initial state
        if (resignOther.checked) {
            resignOtherContainer.style.display = 'block';
        } else {
            resignOtherContainer.style.display = 'none';
        }
        
        // Add change listener to all radio buttons in the group
        const resignRadios = document.querySelectorAll('input[name="resignDecision"]');
        resignRadios.forEach(radio => {
            radio.addEventListener('change', function() {
                if (resignOther.checked) {
                    resignOtherContainer.style.display = 'block';
                    // Use smooth animation for showing
                    resignOtherContainer.style.opacity = '0';
                    setTimeout(() => {
                        resignOtherContainer.style.opacity = '1';
                        document.getElementById('resignOther').focus();
                    }, 50);
                } else {
                    // Fade out the container
                    resignOtherContainer.style.opacity = '0';
                    setTimeout(() => {
                        resignOtherContainer.style.display = 'none';
                    }, 300);
                }
            });
        });
    }
    
    // IMPROVED: Handle "Other" option in Question 2
    const reasonOther = document.getElementById('reason20');
    const reasonsOtherContainer = document.getElementById('reasonsOtherContainer');
    const reasonsOtherInput = document.getElementById('reasonsOther');
    
    if (reasonOther && reasonsOtherContainer && reasonsOtherInput) {
        // Add change listener
        reasonOther.addEventListener('change', function() {
            if (this.checked) {
                reasonsOtherContainer.style.display = 'block';
                // Use smooth animation for showing
                reasonsOtherContainer.style.opacity = '0';
                setTimeout(() => {
                    reasonsOtherContainer.style.opacity = '1';
                    reasonsOtherInput.focus();
                }, 50);
            } else {
                // Fade out the container
                reasonsOtherContainer.style.opacity = '0';
                setTimeout(() => {
                    reasonsOtherContainer.style.display = 'none';
                }, 300);
            }
        });
    }
    
    // Handle conditional text areas for yes/no questions
    const conditionalFields = [
        {radio: 'exploredOptions', value: 'Yes', container: 'exploredOptionsDescContainer'},
        {radio: 'specificEvent', value: 'Yes', container: 'specificEventDescContainer'},
        {radio: 'recommendCompany', value: 'No', container: 'recommendCompanyDescContainer'},
        {radio: 'openToReapply', value: 'No', container: 'openToReapplyDescContainer'}
    ];
    
    conditionalFields.forEach(field => {
        const radios = document.querySelectorAll(`input[name="${field.radio}"]`);
        const container = document.getElementById(field.container);
        
        if (radios.length && container) {
            // Check initial state
            radios.forEach(radio => {
                if (radio.checked && radio.value === field.value) {
                    container.style.display = 'block';
                }
            });
            
            // Add change listeners
            radios.forEach(radio => {
                radio.addEventListener('change', function() {
                    const showContainer = (this.value === field.value);
                    if (showContainer) {
                        container.style.display = 'block';
                        // Smooth animation
                        container.style.opacity = '0';
                        setTimeout(() => {
                            container.style.opacity = '1';
                            const textarea = container.querySelector('textarea');
                            if (textarea) {
                                textarea.focus();
                            }
                        }, 50);
                    } else {
                        // Fade out
                        container.style.opacity = '0';
                        setTimeout(() => {
                            container.style.display = 'none';
                        }, 300);
                    }
                });
            });
        }
    });
    
    // Rating circles
    const ratingCircles = document.querySelectorAll('.rating-circle');
    
    ratingCircles.forEach(circle => {
        circle.addEventListener('click', function() {
            // Get the field and rating
            const field = this.getAttribute('data-field');
            const rating = this.getAttribute('data-rating');
            
            // Update hidden input value
            document.getElementById(field).value = rating;
            
            // Remove selected class from all circles in the same row
            const row = this.closest('tr');
            row.querySelectorAll('.rating-circle').forEach(c => {
                c.classList.remove('selected');
            });
            
            // Add selected class to clicked circle
            this.classList.add('selected');
            
            // Update progress bar
            updateProgressBar();
            
            // Add completed class to the row
            row.classList.add('completed-row');
        });
    });
    
    // Progress bar
    function updateProgressBar() {
        const totalFields = document.querySelectorAll('input[type="text"], select, textarea, input[type="hidden"][id^="rating"]').length;
        const radioGroups = new Set(Array.from(document.querySelectorAll('input[type="radio"]')).map(radio => radio.name));
        const checkboxGroups = new Set(Array.from(document.querySelectorAll('input[type="checkbox"]')).map(checkbox => checkbox.name.replace('[]', '')));
        
        const filledFields = Array.from(document.querySelectorAll('input[type="text"], select, textarea')).filter(field => field.value.trim() !== '').length;
        const filledRadios = Array.from(radioGroups).filter(name => document.querySelector(`input[name="${name}"]:checked`)).length;
        const filledCheckboxes = Array.from(checkboxGroups).filter(name => document.querySelector(`input[name="${name}[]"]:checked`)).length;
        const filledRatings = Array.from(document.querySelectorAll('input[type="hidden"][id^="rating"]')).filter(field => field.value.trim() !== '').length;
        
        const totalItems = totalFields + radioGroups.size + checkboxGroups.size;
        const filledItems = filledFields + filledRadios + filledCheckboxes + filledRatings;
        
        const progress = Math.min(Math.round((filledItems / totalItems) * 100), 100);
        
        const progressBar = document.getElementById('progressBar');
        if (progressBar) {
            progressBar.style.width = `${progress}%`;
        }
    }
    
    // Update progress on input changes
    const allInputs = document.querySelectorAll('input, select, textarea');
    allInputs.forEach(input => {
        input.addEventListener('change', function() {
            updateProgressBar();
            
            // Add completed class to form group
            if (this.value.trim() !== '') {
                const formGroup = this.closest('.form-group');
                if (formGroup) {
                    formGroup.classList.add('completed');
                }
            } else {
                const formGroup = this.closest('.form-group');
                if (formGroup) {
                    formGroup.classList.remove('completed');
                }
            }
        });
        
        // For text inputs and textareas, also listen for keyup events
        if (input.type === 'text' || input.tagName.toLowerCase() === 'textarea') {
            input.addEventListener('keyup', updateProgressBar);
        }
    });
    
    // Initial progress update
    updateProgressBar();
    
    // Theme toggle
    const themeToggle = document.getElementById('themeToggle');
    const themeIcon = themeToggle.querySelector('i');
    
    themeToggle.addEventListener('click', function() {
        document.body.classList.toggle('dark-theme');
        
        if (document.body.classList.contains('dark-theme')) {
            themeIcon.className = 'fas fa-sun';
            localStorage.setItem('theme', 'dark');
        } else {
            themeIcon.className = 'fas fa-moon';
            localStorage.setItem('theme', 'light');
        }
    });
    
    // Check for saved theme preference
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
        document.body.classList.add('dark-theme');
        themeIcon.className = 'fas fa-sun';
    }
    
    // Scroll to top button
    const scrollTopBtn = document.getElementById('scrollTopBtn');
    
    window.addEventListener('scroll', function() {
        if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
            scrollTopBtn.classList.add('show');
        } else {
            scrollTopBtn.classList.remove('show');
        }
    });
    
    scrollTopBtn.addEventListener('click', function() {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
    
    // Form validation with field highlighting
    const form = document.getElementById('exitInterviewForm');
    
    if (form) {
        form.addEventListener('submit', function(e) {
            let isValid = true;
            
            // Remove any previous error states
            document.querySelectorAll('.error-field, .error-form-group, .error-section, .error-row').forEach(el => {
                el.classList.remove('error-field', 'error-form-group', 'error-section', 'error-row');
            });
            
            // Remove error summary if it exists
            const existingErrorSummary = document.getElementById('error-summary');
            if (existingErrorSummary) {
                existingErrorSummary.remove();
            }
            
            // Required fields validation with highlighting
            const requiredFields = [
                { id: 'employeeName', name: 'Employee Name' },
                { id: 'employeeId', name: 'Employee ID' },
                { id: 'designation', name: 'Designation' },
                { id: 'team', name: 'Team' },
                { id: 'doj', name: 'Date of Joining' },
                { id: 'dor', name: 'Date of Resignation' }
            ];
            
            requiredFields.forEach(field => {
                const input = document.getElementById(field.id);
                if (!input.value.trim()) {
                    isValid = false;
                    
                    // Add error class to the field
                    input.classList.add('error-field');
                    
                    // Add error class to parent form group
                    const formGroup = input.closest('.form-group');
                    if (formGroup) {
                        formGroup.classList.add('error-form-group');
                        
                        // Add error tooltip
                        const tooltip = document.createElement('div');
                        tooltip.className = 'error-tooltip';
                        tooltip.innerText = `${field.name} is required`;
                        formGroup.appendChild(tooltip);
                    }
                    
                    // Add shake animation to draw attention
                    input.classList.add('shake-animation');
                    setTimeout(() => {
                        input.classList.remove('shake-animation');
                    }, 600);
                }
            });
            
            // Required radio validation with highlighting
            const requiredRadioGroups = [
                { name: 'resignDecision', label: 'Resignation Decision', section: 'question1' },
                { name: 'exploredOptions', label: 'Explored Options', section: 'question3' },
                { name: 'specificEvent', label: 'Specific Event', section: 'question4' },
                { name: 'recommendCompany', label: 'Recommend Company', section: 'question5' },
                { name: 'openToReapply', label: 'Open to Reapply', section: 'question6' }
            ];
            
            requiredRadioGroups.forEach(group => {
                const radios = document.querySelectorAll(`input[name="${group.name}"]`);
                const isChecked = Array.from(radios).some(radio => radio.checked);
                
                if (!isChecked) {
                    isValid = false;
                    
                    // Add error class to the form section
                    const section = document.getElementById(group.section);
                    if (section) {
                        section.classList.add('error-section');
                        
                        // Add error highlight to question header
                        const questionHeader = section.querySelector('.question-header');
                        if (questionHeader) {
                            questionHeader.classList.add('error-question');
                            
                            // Add error tooltip
                            const tooltip = document.createElement('div');
                            tooltip.className = 'error-option-tooltip';
                            tooltip.innerText = 'Please select an option';
                            questionHeader.appendChild(tooltip);
                        }
                    }
                }
            });
            
            // Validate checkbox group for reasons for leaving
            const reasonCheckboxes = document.querySelectorAll('input[name="reasonsForLeaving[]"]');
            const reasonsChecked = Array.from(reasonCheckboxes).some(checkbox => checkbox.checked);
            
            if (!reasonsChecked) {
                isValid = false;
                
                // Add error class to the form section
                const section = document.getElementById('question2');
                if (section) {
                    section.classList.add('error-section');
                    
                    // Add error highlight to question header
                    const questionHeader = section.querySelector('.question-header');
                    if (questionHeader) {
                        questionHeader.classList.add('error-question');
                        
                        // Add error tooltip
                        const tooltip = document.createElement('div');
                        tooltip.className = 'error-option-tooltip';
                        tooltip.innerText = 'Please select at least one reason';
                        questionHeader.appendChild(tooltip);
                    }
                }
            }
            
            // Validate that ratings are selected
            const ratingInputs = document.querySelectorAll('input[type="hidden"][id^="rating"]');
            let hasRatingError = false;
            
            ratingInputs.forEach(input => {
                if (!input.value) {
                    isValid = false;
                    hasRatingError = true;
                    
                    // Add error class to the row
                    const row = input.closest('tr');
                    if (row) {
                        row.classList.add('error-row');
                    }
                }
            });
            
            if (hasRatingError) {
                // Add error class to the ratings section
                const ratingsSection = document.getElementById('ratings');
                if (ratingsSection) {
                    ratingsSection.classList.add('error-section');
                    
                    // Add error notification to section header
                    const sectionHeader = ratingsSection.querySelector('.section-header');
                    if (sectionHeader) {
                        // Add error tooltip
                        const tooltip = document.createElement('div');
                        tooltip.className = 'error-rating-tooltip';
                        tooltip.innerText = 'Please complete all ratings';
                        sectionHeader.appendChild(tooltip);
                    }
                }
            }
            
            // Conditional field validation
            // Check if "Other" time frame is selected but not filled
            const resignOther = document.getElementById('resign4');
            const resignOtherInput = document.getElementById('resignOther');
            
            if (resignOther && resignOther.checked && (!resignOtherInput.value.trim())) {
                isValid = false;
                resignOtherInput.classList.add('error-field');
                
                // Add error tooltip
                const container = document.getElementById('resignOtherContainer');
                if (container) {
                    const tooltip = document.createElement('div');
                    tooltip.className = 'error-field-tooltip';
                    tooltip.innerText = 'Please specify';
                    container.appendChild(tooltip);
                }
            }
            
            // Check if "Other" reason is selected but not filled
            const reasonOther = document.getElementById('reason20');
            const reasonsOtherInput = document.getElementById('reasonsOther');
            
            if (reasonOther && reasonOther.checked && (!reasonsOtherInput.value.trim())) {
                isValid = false;
                reasonsOtherInput.classList.add('error-field');
                
                // Add error tooltip
                const container = document.getElementById('reasonsOtherContainer');
                if (container) {
                    const tooltip = document.createElement('div');
                    tooltip.className = 'error-field-tooltip';
                    tooltip.innerText = 'Please specify';
                    container.appendChild(tooltip);
                }
            }
            
            // Check conditional textareas
            const conditionalFields = [
                {radio: 'exploredOptions', value: 'Yes', container: 'exploredOptionsDescContainer', field: 'exploredOptionsDesc'},
                {radio: 'specificEvent', value: 'Yes', container: 'specificEventDescContainer', field: 'specificEventDesc'},
                {radio: 'recommendCompany', value: 'No', container: 'recommendCompanyDescContainer', field: 'recommendCompanyDesc'},
                {radio: 'openToReapply', value: 'No', container: 'openToReapplyDescContainer', field: 'openToReapplyDesc'}
            ];
            
            conditionalFields.forEach(field => {
                const radio = document.querySelector(`input[name="${field.radio}"][value="${field.value}"]:checked`);
                if (radio) {
                    const container = document.getElementById(field.container);
                    const textarea = document.getElementById(field.field);
                    
                    if (textarea && !textarea.value.trim()) {
                        isValid = false;
                        textarea.classList.add('error-field');
                        
                        // Add error tooltip
                        if (container) {
                            const tooltip = document.createElement('div');
                            tooltip.className = 'error-field-tooltip';
                            tooltip.innerText = 'Please provide details';
                            container.appendChild(tooltip);
                        }
                    }
                }
            });
            
            // If there are errors, prevent form submission
            if (!isValid) {
                e.preventDefault();
                
                // Scroll to the first error element
                const firstError = document.querySelector('.error-field, .error-section, .error-row');
                if (firstError) {
                    // Create a small notification instead of a full error summary
                    const notification = document.createElement('div');
                    notification.className = 'error-notification';
                    notification.innerHTML = '<i class="fas fa-exclamation-circle"></i> Please complete all required fields';
                    
                    // Add to form
                    const formContainer = document.querySelector('.container');
                    if (formContainer) {
                        formContainer.prepend(notification);
                        
                        // Auto-remove after 5 seconds
                        setTimeout(() => {
                            notification.classList.add('fade-out');
                            setTimeout(() => {
                                notification.remove();
                            }, 500);
                        }, 5000);
                    }
                    
                    // Smooth scroll to first error
                    firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            }
        });
    }
    
    // Section visibility tracker for navigation highlighting
    const formSections = document.querySelectorAll('.form-section');
    
    if ('IntersectionObserver' in window) {
        // Use Intersection Observer to detect which section is currently visible
        const observerOptions = {
            root: null,
            rootMargin: '0px',
            threshold: 0.3
        };
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const id = entry.target.getAttribute('id');
                    if (id) {
                        // Remove active class from all links
                        navLinks.forEach(link => link.classList.remove('active'));
                        
                        // Add active class to corresponding link
                        const correspondingLink = document.querySelector(`.nav-links a[href="#${id}"]`);
                        if (correspondingLink) {
                            correspondingLink.classList.add('active');
                        }
                    }
                }
            });
        }, observerOptions);
        
        // Observe all form sections
        formSections.forEach(section => {
            if (section.getAttribute('id')) {
                observer.observe(section);
            }
        });
    }
});
</script>
</body>
</html>