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

<div class="account-profile-container">
    <h1><?= ucfirst(lang('profile_title')) ?></h1>
    <p><?= ucfirst(lang('profile_sub_title')) ?></p>
    <div id="alertContainer" class="account-alert-container" style="display: none;">
        <div class="account-alert">
            <span id="alertMessage"></span>
        </div>
    </div>
    <form id="profileForm">
        <input type="hidden" name="<?= $this->security->get_csrf_token_name(); ?>" value="<?= $this->security->get_csrf_hash(); ?>">
        <div class="account-form-group">
            <label for="name">Name</label>
            <input type="text" id="name" name="name" value="<?= htmlspecialchars($customer->name); ?>">
        </div>
        <div class="account-form-group">
            <label for="gender">Gender</label>
            <select id="gender" name="gender">
                <option value="male" <?= $customer->sex_type === 'male' ? 'selected' : ''; ?>>Male</option>
                <option value="female" <?= $customer->sex_type === 'female' ? 'selected' : ''; ?>>Female</option>
                <option value="other" <?= $customer->sex_type === 'other' ? 'selected' : ''; ?>>Other</option>
            </select>
        </div>
        <div class="account-form-group">
            <label for="birthday">Birthday</label>
            <input type="date" id="birthday" name="birthday" value="<?= htmlspecialchars($customer->birthday); ?>">
        </div>
        <div class="account-form-group">
            <label for="phone">Phone Number</label>
            <input type="tel" id="phone" name="phone" value="<?= htmlspecialchars($customer->phone); ?>">
        </div>
        <div class="account-form-group">
            <label for="email">Email</label>
            <input type="email" id="email" name="email" value="<?= htmlspecialchars($customer->email); ?>">
        </div>
        <?php if ($reseller_id == 4 || $reseller_id == 8) : ?>
            <div class="account-form-group">
                <label for="email_alt">Email Alt</label>
                <input type="email" id="email_alt" name="email_alt" value="<?= htmlspecialchars($customer->email_alt); ?>">
            </div>
        <?php endif; ?>
        <div class="account-form-actions">
            <button type="button" id="saveChanges" class="account-btn" disabled><?= ucfirst(lang('save_changes_button')); ?></button>
        </div>
    </form>
</div>

<script>
    const form = document.getElementById('profileForm');
    const saveButton = document.getElementById('saveChanges');
    const alertContainer = document.getElementById('alertContainer');
    const alertMessage = document.getElementById('alertMessage');
    const initialData = {};
    const csrfTokenName = '<?= $this->security->get_csrf_token_name(); ?>';

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

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

    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);
    }

    saveButton.addEventListener('click', async () => {
        try {
            const formData = new FormData(form);
            formData.append('update_profile', '1');
            const baseUrl = '<?= base_url(); ?>';

            const response = await fetch(baseUrl + 'account/update_profile', {
                method: 'POST',
                body: formData
            });

            const data = await response.json();
            if (data.csrf_token) {
                const csrfInput = form.querySelector(`input[name="${csrfTokenName}"]`);
                if (csrfInput) {
                    csrfInput.value = data.csrf_token;
                }
            }

            if (data.success) {
                showAlert(data.message);
                // Update initial data
                Array.from(form.elements).forEach(input => {
                    if (input.name && input.name !== csrfTokenName) { // Skip CSRF token
                        initialData[input.name] = input.value;
                    }
                });
                saveButton.disabled = true;
            } else {
                showAlert(data.message, true);
                if (data.errors) {
                    // Handle field-specific errors if any
                    Object.entries(data.errors).forEach(([field, error]) => {
                        const inputElement = form.elements[field];
                        if (inputElement) {
                            inputElement.classList.add('error');
                            // Add error message below the field
                            const errorDiv = document.createElement('small');
                            errorDiv.className = 'field-error';
                            errorDiv.textContent = error;
                            inputElement.parentNode.appendChild(errorDiv);
                        }
                    });
                }
            }
        } catch (error) {
            showAlert('An error occurred while saving changes. Please try again.', true);
        }
    });

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