<?php
// จัดการ AJAX request สำหรับการตรวจสอบรหัสผ่าน (ต้องอยู่ก่อน include header.php)
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'check_password') {
    session_start();
    include '../inc/connect.php';
    
    // ตรวจสอบการล็อกอิน
    if (!isset($_SESSION['id']) || empty($_SESSION['id'])) {
        header('HTTP/1.1 401 Unauthorized');
        echo json_encode(array('status' => 'error', 'message' => 'Unauthorized'));
        exit;
    }
    
    $user_id = $_SESSION['id'];
    header('Content-Type: application/json');

    $current_password = isset($_POST['current_password']) ? $_POST['current_password'] : '';

    if (empty($current_password)) {
        echo json_encode(array('status' => 'error', 'message' => 'Password required'));
        exit;
    }
    
    try {
        // ดึงรหัสผ่านจากฐานข้อมูล
        $stmt = $pdo->prepare("SELECT password FROM users WHERE id = ?");
        $stmt->execute(array($user_id));
        $stored_password = $stmt->fetchColumn();
        
        if (!$stored_password) {
            echo json_encode(array('status' => 'error', 'message' => 'User not found'));
            exit;
        }

        // เปรียบเทียบรหัสผ่าน (ใช้ MD5 เหมือนระบบเดิม)
        $current_password_hash = md5($current_password);

        if ($current_password_hash === $stored_password) {
            echo json_encode(array('status' => 'success', 'message' => 'Password correct'));
        } else {
            echo json_encode(array('status' => 'error', 'message' => 'Password incorrect'));
        }
        
    } catch (PDOException $e) {
        echo json_encode(array('status' => 'error', 'message' => 'Database error'));
    }
    exit;
}

include 'header.php';
include '../inc/connect.php';

// ตรวจสอบการล็อกอิน
if (!isset($_SESSION['id']) || empty($_SESSION['id'])) {
    header("Location: login.php");
    exit;
}

$user_id = $_SESSION['id'];
$success_message = '';
$error_message = '';

// จัดการการอัปเดตข้อมูล
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['action']) && $_POST['action'] == 'update_profile') {
    try {
        $prefixID = isset($_POST['prefixID']) ? $_POST['prefixID'] : '';
        $firstName = isset($_POST['firstName']) ? $_POST['firstName'] : '';
        $lastName = isset($_POST['lastName']) ? $_POST['lastName'] : '';
        $position = isset($_POST['position']) ? $_POST['position'] : '';
        $mobile = isset($_POST['mobile']) ? $_POST['mobile'] : '';
        $amphur = isset($_POST['amphur']) ? $_POST['amphur'] : '';
        $province = isset($_POST['province']) ? $_POST['province'] : '';
        
        // อัปเดตข้อมูลในฐานข้อมูล
        $stmt = $pdo->prepare("UPDATE users SET 
            prefixID = ?, 
            firstName = ?, 
            lastName = ?, 
            position = ?, 
            mobile = ?, 
            amphur = ?, 
            province = ?
            WHERE id = ?");
        
        $stmt->execute(array(
            $prefixID,
            $firstName,
            $lastName,
            $position,
            $mobile,
            $amphur,
            $province,
            $user_id
        ));
        
        // อัปเดต session ด้วยข้อมูลใหม่
        $_SESSION['firstName'] = $firstName;
        $_SESSION['lastName'] = $lastName;
        
        $success_message = 'อัปเดตข้อมูลโปรไฟล์เรียบร้อยแล้ว';
        
    } catch (PDOException $e) {
        $error_message = 'เกิดข้อผิดพลาดในการอัปเดตข้อมูล: ' . $e->getMessage();
    }
}

// จัดการการเปลี่ยนรหัสผ่าน
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['action']) && $_POST['action'] == 'change_password') {
    try {
        $current_password = isset($_POST['current_password']) ? $_POST['current_password'] : '';
        $new_password = isset($_POST['new_password']) ? $_POST['new_password'] : '';
        $confirm_password = isset($_POST['confirm_password']) ? $_POST['confirm_password'] : '';
        
        // ตรวจสอบรหัสผ่านปัจจุบัน
        $stmt = $pdo->prepare("SELECT password FROM users WHERE id = ?");
        $stmt->execute(array($user_id));
        $current_hash = $stmt->fetchColumn();
        
        if (md5($current_password) !== $current_hash) {
            $error_message = 'รหัสผ่านปัจจุบันไม่ถูกต้อง';
        } elseif ($new_password !== $confirm_password) {
            $error_message = 'รหัสผ่านใหม่และยืนยันรหัสผ่านไม่ตรงกัน';
        } elseif (strlen($new_password) < 6) {
            $error_message = 'รหัสผ่านใหม่ต้องมีความยาวอย่างน้อย 6 ตัวอักษร';
        } else {
            // อัปเดตรหัสผ่านใหม่
            $new_hash = md5($new_password);
            $stmt = $pdo->prepare("UPDATE users SET password = ? WHERE id = ?");
            $stmt->execute(array($new_hash, $user_id));
            
            $success_message = 'เปลี่ยนรหัสผ่านเรียบร้อยแล้ว';
        }
        
    } catch (PDOException $e) {
        $error_message = 'เกิดข้อผิดพลาดในการเปลี่ยนรหัสผ่าน: ' . $e->getMessage();
    }
}

// ดึงข้อมูลผู้ใช้ปัจจุบัน
try {
    $stmt = $pdo->prepare("SELECT * FROM users WHERE id = ?");
    $stmt->execute(array($user_id));
    $user_data = $stmt->fetch(PDO::FETCH_ASSOC);
    
    if (!$user_data) {
        header("Location: logout.php");
        exit;
    }
} catch (PDOException $e) {
    $error_message = 'เกิดข้อผิดพลาดในการดึงข้อมูล: ' . $e->getMessage();
}

// ฟังก์ชันแปลง user_type_id เป็นข้อความ
function getUserTypeText($user_type_id) {
    switch($user_type_id) {
        case '1': return 'จังหวัด';
        case '2': return 'สถานศึกษา';
        case '3': return 'ขึ้นตรง';
        case '4': return 'ตำบล';
        case '9': return 'ผู้ดูแลระบบ';
        default: return 'ไม่ระบุ';
    }
}

// ฟังก์ชันแปลง geo เป็นข้อความ
function getGeoText($geo) {
    switch($geo) {
        case '1': return 'เหนือ';
        case '2': return 'อีสาน';
        case '3': return 'ตะวันออก';
        case '4': return 'กลาง';
        case '5': return 'ใต้';
        default: return 'ไม่ระบุ';
    }
}
?>

<style>
.profile-container {
    max-width: 900px;
    margin: 0 auto;
}

.profile-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 15px 15px 0 0;
    padding: 2rem;
    text-align: center;
}

.profile-avatar {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.2);
    border: 3px solid white;
    border-radius: 50%;
    margin: 0 auto 1rem;
    display: block;
    text-align: center;
    line-height: 94px;
    font-size: 2.5rem;
}

.profile-card {
    background: white;
    border-radius: 0 0 15px 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.info-section {
    border-bottom: 1px solid #e9ecef;
    padding: 1.5rem;
}

.info-section:last-child {
    border-bottom: none;
}

.info-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.info-value {
    color: #212529;
    font-size: 1rem;
    padding: 0.5rem 0;
}

.profile-form.edit-mode .info-value {
    display: none;
}

.profile-form.edit-mode .form-control {
    display: block;
}

.profile-form .form-control {
    display: none;
}

.readonly-field {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 500;
}

.status-active {
    background-color: #d1edff;
    color: #0d6efd;
}

.status-inactive {
    background-color: #f8d7da;
    color: #dc3545;
}

.password-strength ul {
    padding-left: 1.2rem;
    font-size: 0.875rem;
}

.is-invalid {
    border-color: #dc3545 !important;
}

.is-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Modal form controls should always be visible */
.modal .form-control {
    display: block !important;
}

.modal .form-text {
    display: block;
    margin-top: 0.25rem;
}

/* Password validation styles */
.form-control.checking {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%236c757d'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m9.75 9.75-2.5-2.5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    border-color: #6c757d;
}

.form-control.is-valid {
    border-color: #28a745 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='m2.3 6.73.4.42c.2.18.5.18.7 0l2.9-2.9c.18-.18.18-.47 0-.64L5.8 3.2c-.18-.18-.47-.18-.64 0l-1.9 1.9-1.1-1.1c-.18-.18-.47-.18-.64 0L1.1 4.4c-.18.18-.18.47 0 .64l1.2 1.69z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-invalid {
    border-color: #dc3545 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m9 3-6 6m0-6 6 6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Modal close button for PHP 5.3 compatibility */
.close {
    float: right;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    background: none;
    border: none;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    opacity: .75;
}

/* Button spacing for compatibility */
.modal-footer .btn+.btn {
    margin-left: 0.5rem;
}

/* Ensure buttons are clickable */
.btn {
    cursor: pointer;
}

/* Force reset body when modal is closed */
body:not(.modal-open) {
    overflow: auto !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
}

/* Force remove modal state */
body {
    overflow: auto !important;
    padding-right: 0px !important;
    margin-right: 0px !important;
}

html {
    overflow: auto !important;
    padding-right: 0px !important;
}

/* Backdrop styling */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Modal styling from Bootstrap */
.modal {
    display: none;
}

.modal.show {
    display: block;
}
</style>

<div class="container-fluid px-4 py-4">
    <div class="profile-container">
        <!-- Page Header -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h2><i class="fas fa-user-circle me-2"></i>โปรไฟล์ผู้ใช้</h2>
                <p class="text-muted mb-0">จัดการข้อมูลส่วนตัวของคุณ</p>
            </div>
            <div>
                <button type="button" id="editBtn" class="btn btn-primary me-2">
                    <i class="fas fa-edit me-1"></i>แก้ไขข้อมูล
                </button>
                <button type="button" id="changePasswordBtn" class="btn btn-warning me-2">
                    <i class="fas fa-key me-1"></i>เปลี่ยนรหัสผ่าน
                </button>
                <a href="index.php" class="btn btn-secondary">
                    <i class="fas fa-arrow-left me-1"></i>กลับหน้าหลัก
                </a>
            </div>
        </div>

        <!-- Alert Messages -->
        <?php if ($success_message): ?>
        <div class="alert alert-success alert-dismissible fade show d-none" role="alert">
            <i class="fas fa-check-circle me-2"></i><?php echo $success_message; ?>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        <?php endif; ?>

        <!-- Profile Form -->
        <form id="profileForm" class="profile-form" method="POST">
            <input type="hidden" name="action" value="update_profile">

            <div class="profile-header">
                <div class="profile-avatar">
                    <i class="fas fa-user"></i>
                </div>
                <h3 class="mb-1">
                    <?php echo htmlspecialchars($user_data['prefixID'] . ' ' . $user_data['firstName'] . ' ' . $user_data['lastName']); ?>
                </h3>
                <p class="mb-0 opacity-75"><?php echo htmlspecialchars($user_data['position']); ?></p>
                <div class="mt-2">
                    <span
                        class="status-badge <?php echo $user_data['status'] == 1 ? 'status-active' : 'status-inactive'; ?>">
                        <i class="fas fa-circle me-1"></i>
                        <?php echo $user_data['status'] == 1 ? 'ใช้งานได้' : 'ไม่ใช้งาน'; ?>
                    </span>
                </div>
            </div>

            <div class="profile-card">
                <!-- ข้อมูลส่วนตัว -->
                <div class="info-section">
                    <h5 class="text-primary mb-3">
                        <i class="fas fa-user me-2"></i>ข้อมูลส่วนตัว
                    </h5>
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <div class="info-label">คำนำหน้า</div>
                            <div class="info-value"><?php echo htmlspecialchars($user_data['prefixID']); ?></div>
                            <input type="text" name="prefixID" class="form-control"
                                value="<?php echo htmlspecialchars($user_data['prefixID']); ?>">
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="info-label">ชื่อ</div>
                            <div class="info-value"><?php echo htmlspecialchars($user_data['firstName']); ?></div>
                            <input type="text" name="firstName" class="form-control"
                                value="<?php echo htmlspecialchars($user_data['firstName']); ?>" required>
                        </div>
                        <div class="col-md-5 mb-3">
                            <div class="info-label">นามสกุล</div>
                            <div class="info-value"><?php echo htmlspecialchars($user_data['lastName']); ?></div>
                            <input type="text" name="lastName" class="form-control"
                                value="<?php echo htmlspecialchars($user_data['lastName']); ?>" required>
                        </div>
                        <div class="col-md-12 mb-3">
                            <div class="info-label">ตำแหน่ง</div>
                            <div class="info-value"><?php echo htmlspecialchars($user_data['position']); ?></div>
                            <input type="text" name="position" class="form-control"
                                value="<?php echo htmlspecialchars($user_data['position']); ?>" required>
                        </div>
                    </div>
                </div>

                <!-- ข้อมูลการติดต่อ -->
                <div class="info-section">
                    <h5 class="text-success mb-3">
                        <i class="fas fa-address-card me-2"></i>ข้อมูลการติดต่อ
                    </h5>
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <div class="info-label">หมายเลขโทรศัพท์</div>
                            <div class="info-value"><?php echo htmlspecialchars($user_data['mobile'] ?: 'ไม่ระบุ'); ?>
                            </div>
                            <input type="tel" name="mobile" class="form-control"
                                value="<?php echo htmlspecialchars($user_data['mobile']); ?>">
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="info-label">อำเภอ</div>
                            <div class="info-value"><?php echo htmlspecialchars($user_data['amphur'] ?: 'ไม่ระบุ'); ?>
                            </div>
                            <input type="text" name="amphur" class="form-control"
                                value="<?php echo htmlspecialchars($user_data['amphur']); ?>">
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="info-label">จังหวัด</div>
                            <div class="info-value"><?php echo htmlspecialchars($user_data['province'] ?: 'ไม่ระบุ'); ?>
                            </div>
                            <input type="text" name="province" class="form-control"
                                value="<?php echo htmlspecialchars($user_data['province']); ?>">
                        </div>
                    </div>
                </div>

                <!-- ข้อมูลระบบ -->
                <div class="info-section">
                    <h5 class="text-warning mb-3">
                        <i class="fas fa-cog me-2"></i>ข้อมูลระบบ
                    </h5>
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <div class="info-label">รหัสสถานศึกษา</div>
                            <div class="info-value"><?php echo htmlspecialchars($user_data['schoolID']); ?></div>
                            <input type="text" class="form-control readonly-field"
                                value="<?php echo htmlspecialchars($user_data['schoolID']); ?>" readonly>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="info-label">ชื่อผู้ใช้</div>
                            <div class="info-value"><?php echo htmlspecialchars($user_data['username']); ?></div>
                            <input type="text" class="form-control readonly-field"
                                value="<?php echo htmlspecialchars($user_data['username']); ?>" readonly>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="info-label">ประเภทผู้ใช้</div>
                            <div class="info-value"><?php echo getUserTypeText($user_data['user_type_id']); ?></div>
                            <input type="text" class="form-control readonly-field"
                                value="<?php echo getUserTypeText($user_data['user_type_id']); ?>" readonly>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="info-label">สถานศึกษา</div>
                            <div class="info-value">
                                <?php echo htmlspecialchars($user_data['leader'] ?: $user_data['schoolName']); ?></div>
                            <input type="text" class="form-control readonly-field"
                                value="<?php echo htmlspecialchars($user_data['leader'] ?: $user_data['schoolName']); ?>"
                                readonly>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="info-label">ภูมิภาค</div>
                            <div class="info-value"><?php echo getGeoText($user_data['geo']); ?></div>
                            <input type="text" class="form-control readonly-field"
                                value="<?php echo getGeoText($user_data['geo']); ?>" readonly>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="info-label">วันที่สร้างบัญชี</div>
                            <div class="info-value">
                                <?php echo date('d/m/Y H:i', strtotime($user_data['created_at'])); ?></div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="info-label">จำนวนครั้งที่เข้าสู่ระบบ</div>
                            <div class="info-value"><?php echo number_format($user_data['login_count']); ?> ครั้ง</div>
                        </div>
                    </div>
                </div>

                <!-- Form Controls -->
                <div class="info-section" id="formControls" style="display: none;">
                    <div class="d-flex justify-content-end gap-2">
                        <button type="button" id="cancelBtn" class="btn btn-secondary">
                            <i class="fas fa-times me-1"></i>ยกเลิก
                        </button>
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-save me-1"></i>บันทึกการเปลี่ยนแปลง
                        </button>
                    </div>
                </div>
            </div>
        </form>

        <!-- Password Change Modal -->
        <div class="modal fade" id="passwordModal" tabindex="-1" role="dialog" aria-labelledby="passwordModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="passwordModalLabel">
                            <i class="fas fa-key me-2"></i>เปลี่ยนรหัสผ่าน
                        </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form id="passwordForm" method="POST">
                        <input type="hidden" name="action" value="change_password">
                        <div class="modal-body">
                            <div class="mb-3">
                                <label for="current_password" class="form-label">
                                    <i class="fas fa-lock me-1"></i>รหัสผ่านปัจจุบัน
                                </label>
                                <div class="input-group">
                                    <input type="password" class="form-control" id="current_password"
                                        name="current_password" required>
                                    <button class="btn btn-outline-secondary" type="button" id="toggleCurrentPassword">
                                        <i class="fas fa-eye" id="currentPasswordIcon"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="new_password" class="form-label">
                                    <i class="fas fa-key me-1"></i>รหัสผ่านใหม่
                                </label>
                                <div class="input-group">
                                    <input type="password" class="form-control" id="new_password" name="new_password"
                                        required minlength="6">
                                    <button class="btn btn-outline-secondary" type="button" id="toggleNewPassword">
                                        <i class="fas fa-eye" id="newPasswordIcon"></i>
                                    </button>
                                </div>
                                <div class="form-text">รหัสผ่านต้องมีความยาวอย่างน้อย 6 ตัวอักษร</div>
                            </div>
                            <div class="mb-3">
                                <label for="confirm_password" class="form-label">
                                    <i class="fas fa-check-double me-1"></i>ยืนยันรหัสผ่านใหม่
                                </label>
                                <div class="input-group">
                                    <input type="password" class="form-control" id="confirm_password"
                                        name="confirm_password" required minlength="6">
                                    <button class="btn btn-outline-secondary" type="button" id="toggleConfirmPassword">
                                        <i class="fas fa-eye" id="confirmPasswordIcon"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="password-strength">
                                <div class="form-text">
                                    <strong>ข้อแนะนำสำหรับรหัสผ่านที่ปลอดภัย:</strong>
                                    <ul class="mb-0 mt-1">
                                        <li>ใช้ตัวอักษรผสมตัวเลข</li>
                                        <li>ความยาวอย่างน้อย 6 ตัวอักษร</li>
                                        <li>หลีกเลี่ยงข้อมูลส่วนตัวที่เดาได้ง่าย</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">
                                <i class="fas fa-times me-1"></i>ยกเลิก
                            </button>
                            <button type="submit" class="btn btn-warning">
                                <i class="fas fa-save me-1"></i>เปลี่ยนรหัสผ่าน
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var editBtn = document.getElementById('editBtn');
    var cancelBtn = document.getElementById('cancelBtn');
    var changePasswordBtn = document.getElementById('changePasswordBtn');
    var formControls = document.getElementById('formControls');
    var profileForm = document.getElementById('profileForm');
    var passwordForm = document.getElementById('passwordForm');

    var isEditMode = false;

    // Toggle Edit Mode
    function toggleEditMode() {
        isEditMode = !isEditMode;

        if (isEditMode) {
            profileForm.classList.add('edit-mode');
            editBtn.style.display = 'none';
            changePasswordBtn.style.display = 'none';
            formControls.style.display = 'block';
        } else {
            profileForm.classList.remove('edit-mode');
            editBtn.style.display = 'inline-block';
            changePasswordBtn.style.display = 'inline-block';
            formControls.style.display = 'none';
        }
    }

    // Event Listeners
    editBtn.addEventListener('click', toggleEditMode);

    cancelBtn.addEventListener('click', function() {
        toggleEditMode();
        profileForm.reset();
        location.reload();
    });

    changePasswordBtn.addEventListener('click', function() {
        $('#passwordModal').modal('show');

        // Initialize submit button state
        updateSubmitButtonState();
    });

    function closeModal() {
        $('#passwordModal').modal('hide');

        // Close any SweetAlert that might be open
        if (typeof Swal !== 'undefined') {
            Swal.close();
        }

        resetPasswordForm();
    }

    // Force cleanup modal state function with multiple attempts
    function forceCleanupModalState() {
        // Function to perform cleanup
        function performCleanup() {
            // Remove modal-open class
            document.body.className = document.body.className.replace(/ modal-open/g, '');

            // Force reset body styles
            document.body.style.overflow = 'auto';
            document.body.style.paddingRight = '0px';
            document.body.style.marginRight = '';

            // Remove all backdrop elements
            var allBackdrops = document.querySelectorAll('.modal-backdrop');
            for (var i = 0; i < allBackdrops.length; i++) {
                if (allBackdrops[i].parentNode) {
                    allBackdrops[i].parentNode.removeChild(allBackdrops[i]);
                }
            }

            // Remove any modal-open attributes
            document.documentElement.style.overflow = '';
            document.documentElement.style.paddingRight = '';

            // Close any open SweetAlert
            if (typeof Swal !== 'undefined') {
                Swal.close();
            }
        }

        // Perform cleanup immediately
        performCleanup();

        // Perform cleanup again after small delay (for stubborn cases)
        setTimeout(performCleanup, 50);
        setTimeout(performCleanup, 200);
        setTimeout(performCleanup, 500);

        // Nuclear option - force reset all possible styles
        setTimeout(function() {
            document.body.removeAttribute('style');
            document.documentElement.removeAttribute('style');

            // Remove any Bootstrap classes
            document.body.className = document.body.className
                .replace(/modal-open/g, '')
                .replace(/\s+/g, ' ')
                .trim();

            // Force enable scrolling
            document.body.style.cssText = 'overflow: auto !important; padding-right: 0px !important;';
        }, 1000);
    }

    // Profile Form Validation
    profileForm.addEventListener('submit', function(e) {
        e.preventDefault(); // ป้องกันการ submit ทันที

        var firstName = profileForm.querySelector('input[name="firstName"]').value.trim();
        var lastName = profileForm.querySelector('input[name="lastName"]').value.trim();
        var position = profileForm.querySelector('input[name="position"]').value.trim();

        if (!firstName || !lastName || !position) {
            Swal.fire({
                icon: 'error',
                title: 'ข้อมูลไม่ครบถ้วน',
                text: 'กรุณากรอกชื่อ นามสกุล และตำแหน่งให้ครบถ้วน',
                confirmButtonText: 'ตกลง',
                confirmButtonColor: '#ef4444'
            });
            return false;
        }

        // Show loading
        Swal.fire({
            title: 'กำลังบันทึกข้อมูล...',
            allowOutsideClick: false,
            allowEscapeKey: false,
            showConfirmButton: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        // Create FormData
        var formData = new FormData(this);

        // Use fetch instead of form submit
        fetch('profile.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.text())
            .then(responseText => {
                // Parse response to check for success or error
                if (responseText.includes('อัปเดตข้อมูลโปรไฟล์เรียบร้อยแล้ว')) {
                    Swal.fire({
                        icon: 'success',
                        title: 'สำเร็จ!',
                        text: 'อัปเดตข้อมูลโปรไฟล์เรียบร้อยแล้ว',
                        confirmButtonText: 'ตกลง',
                        confirmButtonColor: '#10b981'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            location.reload(); // รีโหลดหน้าเพื่อแสดงข้อมูลใหม่
                        }
                    });
                } else if (responseText.includes('เกิดข้อผิดพลาด')) {
                    // Extract error message
                    var errorMatch = responseText.match(
                        /เกิดข้อผิดพลาดในการอัปเดตข้อมูล: ([^<]+)/);
                    var errorMessage = errorMatch ? errorMatch[1] :
                        'เกิดข้อผิดพลาดในการบันทึกข้อมูล';

                    Swal.fire({
                        icon: 'error',
                        title: 'เกิดข้อผิดพลาด!',
                        text: errorMessage,
                        confirmButtonText: 'ตกลง',
                        confirmButtonColor: '#ef4444'
                    });
                } else {
                    // Fallback: reload page to show the result
                    location.reload();
                }
            })
            .catch(error => {
                Swal.fire({
                    icon: 'error',
                    title: 'เกิดข้อผิดพลาด!',
                    text: 'เกิดข้อผิดพลาดในการเชื่อมต่อกับเซิร์ฟเวอร์',
                    confirmButtonText: 'ตกลง',
                    confirmButtonColor: '#ef4444'
                });
            });
    });

    // Password Form Validation
    passwordForm.addEventListener('submit', function(e) {
        e.preventDefault(); // ป้องกันการ submit ทันที

        var currentPassword = document.getElementById('current_password').value;
        var newPassword = document.getElementById('new_password').value;
        var confirmPassword = document.getElementById('confirm_password').value;
        var currentPasswordField = document.getElementById('current_password');

        // ตรวจสอบว่ารหัสผ่านปัจจุบันได้รับการตรวจสอบและถูกต้องแล้ว
        if (currentPasswordField.className.indexOf('is-valid') === -1) {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'error',
                    title: 'รหัสผ่านปัจจุบันไม่ถูกต้อง',
                    text: 'กรุณากรอกรหัสผ่านปัจจุบันให้ถูกต้อง',
                    confirmButtonText: 'ตกลง',
                    confirmButtonColor: '#ef4444'
                });
            } else {
                alert('รหัสผ่านปัจจุบันไม่ถูกต้อง\nกรุณากรอกรหัสผ่านปัจจุบันให้ถูกต้อง');
            }
            currentPasswordField.focus();
            return false;
        }

        if (newPassword !== confirmPassword) {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'error',
                    title: 'รหัสผ่านไม่ตรงกัน',
                    text: 'รหัสผ่านใหม่และการยืนยันไม่ตรงกัน',
                    confirmButtonText: 'ตกลง',
                    confirmButtonColor: '#ef4444'
                });
            } else {
                alert('รหัสผ่านไม่ตรงกัน\nรหัสผ่านใหม่และการยืนยันไม่ตรงกัน');
            }
            return false;
        }

        if (newPassword.length < 6) {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'error',
                    title: 'รหัสผ่านสั้นเกินไป',
                    text: 'รหัสผ่านต้องมีความยาวอย่างน้อย 6 ตัวอักษร',
                    confirmButtonText: 'ตกลง',
                    confirmButtonColor: '#ef4444'
                });
            } else {
                alert('รหัสผ่านสั้นเกินไป\nรหัสผ่านต้องมีความยาวอย่างน้อย 6 ตัวอักษร');
            }
            return false;
        }

        if (currentPassword === newPassword) {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'warning',
                    title: 'รหัสผ่านเหมือนเดิม',
                    text: 'รหัสผ่านใหม่ต้องแตกต่างจากรหัสผ่านปัจจุบัน',
                    confirmButtonText: 'ตกลง',
                    confirmButtonColor: '#f59e0b'
                });
            } else {
                alert('รหัสผ่านเหมือนเดิม\nรหัสผ่านใหม่ต้องแตกต่างจากรหัสผ่านปัจจุบัน');
            }
            return false;
        }

        // Show loading (with PHP 5.3 fallback)
        if (typeof Swal !== 'undefined') {
            Swal.fire({
                title: 'กำลังเปลี่ยนรหัสผ่าน...',
                allowOutsideClick: false,
                allowEscapeKey: false,
                showConfirmButton: false,
                didOpen: function() {
                    Swal.showLoading();
                }
            });
        }

        // Create FormData
        var formData = new FormData(this);

        // Use fetch instead of form submit
        fetch('profile.php', {
                method: 'POST',
                body: formData
            })
            .then(function(response) {
                return response.text();
            })
            .then(function(responseText) {
                // Close any loading dialog first
                if (typeof Swal !== 'undefined') {
                    Swal.close();
                }

                // Parse response to check for success or error
                if (responseText.includes('เปลี่ยนรหัสผ่านเรียบร้อยแล้ว')) {
                    // Close modal first and force cleanup
                    closeModal();

                    // Force reset body styles immediately
                    setTimeout(function() {
                        document.body.className = document.body.className.replace(/ modal-open/g, '');
                        document.body.style.overflow = '';
                        document.body.style.paddingRight = '';

                        // Remove any leftover backdrop elements
                        var allBackdrops = document.querySelectorAll('.modal-backdrop');
                        for (var i = 0; i < allBackdrops.length; i++) {
                            if (allBackdrops[i].parentNode) {
                                allBackdrops[i].parentNode.removeChild(allBackdrops[i]);
                            }
                        }
                    }, 10);

                    // Then show success message
                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            icon: 'success',
                            title: 'สำเร็จ!',
                            text: 'เปลี่ยนรหัสผ่านเรียบร้อยแล้ว',
                            confirmButtonText: 'ตกลง',
                            confirmButtonColor: '#10b981',
                            allowOutsideClick: false
                        }).then(function(result) {
                            if (result.isConfirmed) {
                                // Force refresh page to ensure clean state
                                window.location.reload(true);
                            }
                        });
                    } else {
                        // Fallback for PHP 5.3 environments without SweetAlert
                        alert('สำเร็จ! เปลี่ยนรหัสผ่านเรียบร้อยแล้ว');
                        // Force refresh page
                        window.location.reload(true);
                    }
                } else if (responseText.includes('รหัสผ่านปัจจุบันไม่ถูกต้อง')) {
                    // Ensure body is not stuck in modal state
                    forceCleanupModalState();

                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            icon: 'error',
                            title: 'รหัสผ่านไม่ถูกต้อง!',
                            text: 'รหัสผ่านปัจจุบันที่ใส่ไม่ถูกต้อง',
                            confirmButtonText: 'ตกลง',
                            confirmButtonColor: '#ef4444'
                        });
                    } else {
                        alert('รหัสผ่านไม่ถูกต้อง!\nรหัสผ่านปัจจุบันที่ใส่ไม่ถูกต้อง');
                    }
                } else if (responseText.includes('เกิดข้อผิดพลาด')) {
                    // Ensure body is not stuck in modal state
                    forceCleanupModalState();

                    // Extract error message
                    var errorMatch = responseText.match(
                        /เกิดข้อผิดพลาดในการเปลี่ยนรหัสผ่าน: ([^<]+)/);
                    var errorMessage = errorMatch ? errorMatch[1] :
                        'เกิดข้อผิดพลาดในการเปลี่ยนรหัสผ่าน';

                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            icon: 'error',
                            title: 'เกิดข้อผิดพลาด!',
                            text: errorMessage,
                            confirmButtonText: 'ตกลง',
                            confirmButtonColor: '#ef4444'
                        });
                    } else {
                        alert('เกิดข้อผิดพลาด!\n' + errorMessage);
                    }
                } else {
                    // Ensure body is not stuck in modal state
                    forceCleanupModalState();

                    // Unknown response, show generic error
                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            icon: 'error',
                            title: 'เกิดข้อผิดพลาด!',
                            text: 'เกิดข้อผิดพลาดที่ไม่ทราบสาเหตุ',
                            confirmButtonText: 'ตกลง',
                            confirmButtonColor: '#ef4444'
                        });
                    } else {
                        alert('เกิดข้อผิดพลาด!\nเกิดข้อผิดพลาดที่ไม่ทราบสาเหตุ');
                    }
                }
            })
            .catch(function(error) {
                // Force cleanup modal state
                forceCleanupModalState();

                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        icon: 'error',
                        title: 'เกิดข้อผิดพลาด!',
                        text: 'เกิดข้อผิดพลาดในการเชื่อมต่อกับเซิร์ฟเวอร์',
                        confirmButtonText: 'ตกลง',
                        confirmButtonColor: '#ef4444'
                    });
                } else {
                    alert('เกิดข้อผิดพลาด!\nเกิดข้อผิดพลาดในการเชื่อมต่อกับเซิร์ฟเวอร์');
                }
            });
    });

    // Password visibility toggle functions
    function togglePasswordVisibility(inputId, iconId) {
        var passwordInput = document.getElementById(inputId);
        var icon = document.getElementById(iconId);

        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        } else {
            passwordInput.type = 'password';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        }
    }

    // Add event listeners for password visibility toggles
    document.getElementById('toggleCurrentPassword').addEventListener('click', function() {
        togglePasswordVisibility('current_password', 'currentPasswordIcon');
    });

    document.getElementById('toggleNewPassword').addEventListener('click', function() {
        togglePasswordVisibility('new_password', 'newPasswordIcon');
    });

    document.getElementById('toggleConfirmPassword').addEventListener('click', function() {
        togglePasswordVisibility('confirm_password', 'confirmPasswordIcon');
    });

    // Real-time password verification
    var passwordCheckTimeout;
    document.getElementById('current_password').addEventListener('input', function() {
        var currentPassword = this.value;
        var currentPasswordField = this;

        // Clear previous timeout
        if (passwordCheckTimeout) {
            clearTimeout(passwordCheckTimeout);
        }

        // Remove existing validation classes
        currentPasswordField.classList.remove('is-valid', 'is-invalid');

        if (currentPassword.length >= 3) { // Start checking when at least 3 characters
            // Add timeout to avoid too many requests
            passwordCheckTimeout = setTimeout(() => {
                // Show checking indicator
                currentPasswordField.classList.add('checking');

                fetch('profile.php', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        body: 'action=check_password&current_password=' +
                            encodeURIComponent(currentPassword)
                    })
                    .then(response => response.json())
                    .then(data => {
                        currentPasswordField.classList.remove('checking');

                        if (data.status === 'success') {
                            currentPasswordField.classList.add('is-valid');
                            currentPasswordField.classList.remove('is-invalid');
                        } else {
                            currentPasswordField.classList.add('is-invalid');
                            currentPasswordField.classList.remove('is-valid');
                        }

                        // Update form validation after password check
                        updateSubmitButtonState();
                    })
                    .catch(error => {
                        currentPasswordField.classList.remove('checking');
                    });
            }, 500);
        } else {
            // Clear validation if password is too short
            currentPasswordField.classList.remove('is-valid', 'is-invalid');
            updateSubmitButtonState();
        }
    });

    // Real-time password confirmation validation
    document.getElementById('confirm_password').addEventListener('input', function() {
        var newPassword = document.getElementById('new_password').value;
        var confirmPassword = this.value;

        if (newPassword && confirmPassword && newPassword !== confirmPassword) {
            this.classList.add('is-invalid');
            updateSubmitButtonState();
        } else {
            this.classList.remove('is-invalid');
            updateSubmitButtonState();
        }
    });

    // Function to check if submit button should be enabled
    function updateSubmitButtonState() {
        var currentPasswordField = document.getElementById('current_password');
        var newPasswordField = document.getElementById('new_password');
        var confirmPasswordField = document.getElementById('confirm_password');
        var submitBtn = passwordForm.querySelector('button[type="submit"]');

        var currentPasswordValid = currentPasswordField.className.indexOf('is-valid') !== -1;
        var newPassword = newPasswordField.value;
        var confirmPassword = confirmPasswordField.value;
        var passwordsMatch = newPassword === confirmPassword && newPassword.length >= 6;
        var allFieldsFilled = currentPasswordField.value && newPassword && confirmPassword;

        if (currentPasswordValid && passwordsMatch && allFieldsFilled) {
            submitBtn.disabled = false;
            submitBtn.className = submitBtn.className.replace(' btn-secondary', '') + ' btn-warning';
        } else {
            submitBtn.disabled = true;
            submitBtn.className = submitBtn.className.replace(' btn-warning', '') + ' btn-secondary';
        }
    }

    // Clear password form when modal is closed
    function resetPasswordForm() {
        passwordForm.reset();
        // Clear all validation classes
        document.getElementById('current_password').className =
            document.getElementById('current_password').className.replace(/ is-valid| is-invalid| checking/g,
                '');
        document.getElementById('new_password').className =
            document.getElementById('new_password').className.replace(/ is-valid| is-invalid/g, '');
        document.getElementById('confirm_password').className =
            document.getElementById('confirm_password').className.replace(/ is-valid| is-invalid/g, '');

        // Reset button state
        var submitBtn = passwordForm.querySelector('button[type="submit"]');
        submitBtn.disabled = true;
        submitBtn.className = submitBtn.className.replace(' btn-warning', '') + ' btn-secondary';
    }

    // Update submit button state when new password changes
    document.getElementById('new_password').addEventListener('input', updateSubmitButtonState);

    // Global cleanup function that runs on page focus/visibility change
    function globalCleanup() {
        forceCleanupModalState();
    }

    // Add event listeners for page focus
    window.addEventListener('focus', globalCleanup);
    window.addEventListener('pageshow', globalCleanup);

    // Cleanup on page visibility change
    if (document.addEventListener) {
        document.addEventListener('visibilitychange', function() {
            if (!document.hidden) {
                globalCleanup();
            }
        });
    }

    // Fallback cleanup every 2 seconds (as last resort)
    setInterval(function() {
        // Only cleanup if no modal is supposed to be open
        if (!document.getElementById('passwordModal').style.display ||
            document.getElementById('passwordModal').style.display === 'none') {
            globalCleanup();
        }
    }, 2000);

    // Emergency cleanup with Ctrl+Q or F5 key
    document.addEventListener('keydown', function(event) {
        // F5 key or Ctrl+R for refresh
        if (event.keyCode === 116 || (event.ctrlKey && event.keyCode === 82)) {
            globalCleanup();
        }
        // Escape key
        if (event.keyCode === 27) {
            closeModal();
            globalCleanup();
        }
    });

});
</script>

<?php include 'footer.php'; ?>