    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --accent-color: #e74c3c;
            --light-color: #f8f9fa;
            --dark-color: #343a40;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fa;
            color: #333;
        }
        
        .profile-container {
            max-width: 800px;
            margin: 30px auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        .profile-header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .profile-avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 3rem;
            color: white;
            border: 4px solid white;
        }
        
        .profile-body {
            padding: 30px;
        }
        
        .form-group label {
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 8px;
        }
        
        .form-control {
            border-radius: 5px;
            padding: 12px 15px;
            border: 1px solid #ddd;
            transition: all 0.3s;
        }
        
        .form-control:focus {
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
        }
        
        .btn-update {
            background: linear-gradient(135deg, var(--secondary-color), #2980b9);
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 5px;
            font-weight: 600;
            transition: all 0.3s;
            width: 100%;
            margin-top: 10px;
        }
        
        .btn-update:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }
        
        .alert {
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 20px;
        }
        
        .info-box {
            background-color: #f8f9fa;
            border-left: 4px solid var(--secondary-color);
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 0 5px 5px 0;
        }
        
        .info-box i {
            color: var(--secondary-color);
            margin-right: 10px;
        }
        
        .password-toggle {
            cursor: pointer;
            position: absolute;
            right: 15px;
            top: 38px;
            color: #6c757d;
        }
        
        @media (max-width: 768px) {
            .profile-container {
                margin: 15px;
            }
            
            .profile-header {
                padding: 20px;
            }
            
            .profile-body {
                padding: 20px;
            }
        }
    </style>
    <div class="profile-container">
        <div class="profile-header">
            <div class="profile-avatar">
                <i class="fas fa-user"></i>
            </div>
            <h2>Update Your Profile</h2>
            <p class="mb-0">Keep your information up to date</p>
        </div>
        
        <div class="profile-body">
            <!-- Alert Messages -->
            <div id="messageContainer"></div>
            
            <!-- Information Box -->
            <div class="info-box">
                <i class="fas fa-info-circle"></i>
                <strong>Note:</strong> Please ensure all information is accurate. Your profile details will be used for official barangay records.
            </div>
            
            <!-- Profile Form -->
           
                <div class="form-row">
                    <div class="form-group col-md-4">
                        <label for="first_name">First Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="first_name" name="first_name" required>
                    </div>
                    <div class="form-group col-md-4">
                        <label for="middle_name">Middle Name</label>
                        <input type="text" class="form-control" id="middle_name" name="middle_name">
                    </div>
                    <div class="form-group col-md-4">
                        <label for="last_name">Last Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="last_name" name="last_name" required>
                    </div>
                </div>
                
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="email">Email Address <span class="text-danger">*</span></label>
                        <input type="email" class="form-control" id="email" name="email" required>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="contact">Contact Number <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="contact" name="contact" required>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="address">Complete Address <span class="text-danger">*</span></label>
                    <textarea class="form-control" id="address" name="address" rows="3" required></textarea>
                </div>
                
                <div class="form-row">
                    <div class="form-group col-md-4">
                        <label for="age">Age</label>
                        <input type="number" class="form-control" id="age" name="age" min="1" max="120">
                    </div>
                    <div class="form-group col-md-4">
                        <label for="birthday">Birthday</label>
                        <input type="date" class="form-control" id="birthday" name="birthday">
                    </div>
                    <div class="form-group col-md-4">
                        <label for="gender">Gender</label>
                        <select class="form-control" id="gender" name="gender">
                            <option value="">Select Gender</option>
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>
                </div>
                
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="status">Status</label>
                        <select class="form-control" id="status" name="status">
                            <option value="">Select Status</option>
                            <option value="Single">Single</option>
                            <option value="Married">Married</option>
                            <option value="Widowed">Widowed</option>
                            <option value="Separated">Separated</option>
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="date_created">Date Registered</label>
                        <input type="text" class="form-control" id="date_created" readonly>
                    </div>
                </div>
                
                <!-- Password Change Section (Optional) -->
                <div class="card mt-4">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">Change Password (Optional)</h5>
                    </div>
                    <div class="card-body">
                     <div class="form-group">
                        <label for="current_password">Current Password</label>
                        <div class="position-relative">
                            <input type="password" class="form-control" id="current_password" name="current_password">
                            <span class="password-toggle">
                                <i class="fas fa-eye" onclick="togglePassword('current_password')"></i>
                            </span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="new_password">New Password</label>
                        <div class="position-relative">
                            <input type="password" class="form-control" id="new_password" name="new_password">
                            <span class="password-toggle">
                                <i class="fas fa-eye" onclick="togglePassword('new_password')"></i>
                            </span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="confirm_password">Confirm New Password</label>
                        <div class="position-relative">
                            <input type="password" class="form-control" id="confirm_password" name="confirm_password">
                            <span class="password-toggle">
                                <i class="fas fa-eye" onclick="togglePassword('confirm_password')"></i>
                            </span>
                        </div>
                    </div>

                    </div>
                </div>
                
                <button type="button" class="btn btn-update mt-4" onclick="update_information()">
                    <i class="fas fa-save mr-2"></i> Update Profile
                </button>
   
        </div>
    </div>

    <script>
function togglePassword(fieldId) {
    const field = document.getElementById(fieldId);
    const icon = field.parentNode.querySelector('.password-toggle i');

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

function update_information() {
  $.ajax({
    method: 'POST',
    url: 'query/update_profile.php',
    data: {
      "updating_informations": 1,
      "first_name": $('#first_name').val(),
      "middle_name": $('#middle_name').val(),
      "last_name": $('#last_name').val(),
      "email": $('#email').val(),
      "contact": $('#contact').val(),
      "address": $('#address').val(),
      "age": $('#age').val(),
      "birthday": $('#birthday').val(),
      "gender": $('#gender').val(),
      "status": $('#status').val(),
      "date_created": $('#date_created').val(),
      "current_password": $('#current_password').val(),
      "new_password": $('#new_password').val(),
      "confirm_password": $('#confirm_password').val()
    },
    success: function (res) {
      swal({
        title: "Update Result",
        text: res,
        icon: "success",
      });

      // 🔄 Refresh data and clear password fields
      fetch_information();
      $('#current_password, #new_password, #confirm_password').val('');
    },
    error: function (xhr, status, error) {
      swal({
        title: "Oops!",
        text: error + "!",
        icon: "error",
      });
    }
  });
}


        fetch_information();
     function fetch_information(){
    $.ajax({
        method: 'POST',
        url: 'query/update_profile.php',
        data: { "fetching_info": 1 },
        dataType: 'json',
        success: function(res){
            if (res.error) {
                console.error(res.error);
            } else {
                $('#first_name').val(res.first_name);
                $('#middle_name').val(res.middle_name);
                $('#last_name').val(res.last_name);
                $('#email').val(res.email);
                $('#contact').val(res.contact);
                $('#address').val(res.address);
                $('#age').val(res.age);
                $('#birthday').val(res.birthday);
                $('#gender').val(res.gender);
                $('#status').val(res.status);
                $('#date_created').val(res.date_created);
                // current_password
                // new_password
                // confirm_password
            }
        },
        error: function(xhr, status, error){
            console.error("AJAX Error:", error);
        }
    });
}




    </script>
