<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>


<div class="account-password-container">
    <h1><?= ucfirst(lang('change_password_title')) ?></h1>
    <p><?= ucfirst(lang('change_password_sub_title')) ?></p>

    <div id="alertContainer" class="account-alert-container" style="display: none;">
        <div class="account-alert">
            <span id="alertMessage"></span>
        </div>
    </div>
    <?= $this->session->flashdata('success'); ?>
    <form id="changePasswordForm">
        <input type="hidden" name="<?= $this->security->get_csrf_token_name(); ?>"
            value="<?= $this->security->get_csrf_hash(); ?>">

        <!-- Old Password -->
        <?php if ($is_oauth_user): ?>
            <?php if (!$is_password_set): ?>
                <div class="alert alert-info">
                    <?= lang('first_time_password_setup'); ?>
                </div>
            <?php endif; ?>
        <?php endif; ?>
        <?php if (!$is_oauth_user || ($is_oauth_user && $is_password_set)): ?>
            <div class="account-form-group">
                <label for="old_password"><?= ucfirst(lang('old_password_label')) ?><span class="required">*</span></label>
                <input type="password" id="old_password" name="old_password" required>
            </div>
        <?php endif; ?>

        <!-- New Password -->
        <div class="account-form-group">
            <label for="new_password"><?= ucfirst(lang('new_password_label')) ?><span class="required">*</span></label>
            <input type="password" id="new_password" name="new_password" required>
        </div>

        <!-- Confirm Password -->
        <div class="account-form-group">
            <label for="confirm_password"><?= ucfirst(lang('confirm_password_label')) ?><span class="required">*</span></label>
            <input type="password" id="confirm_password" name="confirm_password" required>
        </div>

        <!-- Save Button -->
        <div class="account-form-actions">
            <button type="button" id="saveChanges" class="account-btn">
                <?= lang('save_changes_button') ?>
            </button>
        </div>
    </form>
</div>

<script>
    // DOM Elements
    const form = document.getElementById('changePasswordForm');
    const saveButton = document.getElementById('saveChanges');
    const alertContainer = document.getElementById('alertContainer');
    const alertMessage = document.getElementById('alertMessage');
    const csrfTokenName = '<?= $this->security->get_csrf_token_name(); ?>';

    // Store initial form data
    const initialData = {};
    Array.from(form.elements).forEach(input => {
        if (input.name && input.name !== csrfTokenName) {
            initialData[input.name] = input.value;
        }
    });

    // Enable button if form data changes
    form.addEventListener('input', () => {
        let isChanged = false;
        Array.from(form.elements).forEach(input => {
            if (input.name && input.name !== csrfTokenName && initialData[input.name] !== input.value) {
                isChanged = true;
            }
        });
        saveButton.disabled = !isChanged;
    });

    // Function to show alerts
    function showAlert(message, isError = false) {
        alertMessage.textContent = message;
        alertContainer.style.display = 'block';
        alertContainer.className = `account-alert-container ${isError ? 'error' : 'success'}`;

        // Hide alert after 5 seconds
        setTimeout(() => {
            alertContainer.style.display = 'none';
        }, 5000);
    }

    // Clear field-specific errors
    function clearFieldErrors() {
        const errors = form.querySelectorAll('.field-error');
        errors.forEach(error => error.remove());
        const errorInputs = form.querySelectorAll('.error');
        errorInputs.forEach(input => input.classList.remove('error'));
    }

    // Handle save button click
    saveButton.addEventListener('click', async () => {
        clearFieldErrors();
        try {
            const formData = new FormData(form);
            formData.append('change_password', '1');
            const response = await fetch('<?= base_url('account/update_change_password') ?>', {
                method: 'POST',
                body: formData
            });

            const data = await response.json();

            // Update CSRF token if present
            if (data.csrf_token) {
                const csrfInput = form.querySelector(`input[name="${csrfTokenName}"]`);
                if (csrfInput) csrfInput.value = data.csrf_token;
            }

            if (data.status) {
                showAlert(data.message); // Show success message
                saveButton.disabled = true; // Disable save button
                // Update initial data
                Array.from(form.elements).forEach(input => {
                    if (input.name && input.name !== csrfTokenName) {
                        initialData[input.name] = input.value;
                    }
                });
            } else {
                showAlert(data.message || 'An error occurred.', true); // Show general error message
                if (data.errors) {
                    // Show field-specific errors
                    Object.entries(data.errors).forEach(([field, error]) => {
                        const fieldElement = form.elements[field];
                        if (fieldElement) {
                            fieldElement.classList.add('error');
                            const errorDiv = document.createElement('small');
                            errorDiv.className = 'field-error';
                            errorDiv.textContent = error;
                            fieldElement.parentNode.appendChild(errorDiv);
                        }
                    });
                }
            }
        } catch (error) {
            showAlert('Failed to update password. Please try again.', true);
        }
    });

    // Clear errors on field focus
    form.addEventListener('input', e => {
        if (e.target.classList.contains('error')) {
            e.target.classList.remove('error');
            const errorElement = e.target.parentNode.querySelector('.field-error');
            if (errorElement) errorElement.remove();
        }
    });
</script>