{% extends "settings/layout.html.twig" %}
{% trans_default_domain "Settings" %}

{% block settings_content %}
    <div class="settings-card">
        <h3 class="settings-card-title">{{ 'notifications.title'|trans }}</h3>
        <p class="form-hint" style="margin-bottom: 16px;">{{ 'notifications.subtitle'|trans }}</p>

        <h4 style="margin: 18px 0 8px; font-size: 14px; font-weight: 700;">{{ 'notifications.group_social'|trans }}</h4>

        {% set socialRows = [
            { key: 'new_follower', label: 'notifications.new_follower_label', desc: 'notifications.new_follower_desc' },
            { key: 'post_liked', label: 'notifications.post_liked_label', desc: 'notifications.post_liked_desc' },
            { key: 'post_commented', label: 'notifications.post_commented_label', desc: 'notifications.post_commented_desc' },
            { key: 'comment_replied', label: 'notifications.comment_replied_label', desc: 'notifications.comment_replied_desc' },
            { key: 'paper_shared', label: 'notifications.paper_shared_label', desc: 'notifications.paper_shared_desc' },
            { key: 'wall_question', label: 'notifications.wall_question_label', desc: 'notifications.wall_question_desc' }
        ] %}

        {% for row in socialRows %}
            <div class="toggle-row" style="display:grid; grid-template-columns: 1fr auto auto; gap: 20px; align-items:center;">
                <div>
                    <div class="toggle-label">{{ row.label|trans }}</div>
                    <div class="toggle-desc">{{ row.desc|trans }}</div>
                </div>

                <div style="display:flex; align-items:center; gap:8px;">
                    <span class="toggle-desc" style="margin:0;">{{ 'notifications.inapp'|trans }}</span>
                    <label class="toggle-switch" style="margin:0;">
                        <input
                            type="checkbox"
                            data-event="{{ row.key }}"
                            data-channel="inapp"
                            {{ attribute(preferences, row.key).inapp ? 'checked' : '' }}
                            onchange="updatePreference(this)"
                        >
                        <span class="toggle-slider"></span>
                    </label>
                </div>

                <div style="display:flex; align-items:center; gap:8px;">
                    <span class="toggle-desc" style="margin:0;">{{ 'notifications.email'|trans }}</span>
                    <label class="toggle-switch" style="margin:0;">
                        <input
                            type="checkbox"
                            data-event="{{ row.key }}"
                            data-channel="email"
                            {{ attribute(preferences, row.key).email ? 'checked' : '' }}
                            onchange="updatePreference(this)"
                        >
                        <span class="toggle-slider"></span>
                    </label>
                </div>
            </div>
        {% endfor %}

        <h4 style="margin: 22px 0 8px; font-size: 14px; font-weight: 700;">{{ 'notifications.group_email_only'|trans }}</h4>

        {% set emailRows = [
            { key: 'weekly_digest', label: 'notifications.weekly_digest_label', desc: 'notifications.weekly_digest_desc' },
            { key: 'recommendation', label: 'notifications.recommendation_label', desc: 'notifications.recommendation_desc' },
            { key: 'marketing', label: 'notifications.marketing_label', desc: 'notifications.marketing_desc' }
        ] %}

        {% for row in emailRows %}
            <div class="toggle-row" style="display:grid; grid-template-columns: 1fr auto; gap: 20px; align-items:center;">
                <div>
                    <div class="toggle-label">{{ row.label|trans }}</div>
                    <div class="toggle-desc">{{ row.desc|trans }}</div>
                </div>
                <div style="display:flex; align-items:center; gap:8px;">
                    <span class="toggle-desc" style="margin:0;">{{ 'notifications.email'|trans }}</span>
                    <label class="toggle-switch" style="margin:0;">
                        <input
                            type="checkbox"
                            data-event="{{ row.key }}"
                            data-channel="email"
                            {{ attribute(preferences, row.key).email ? 'checked' : '' }}
                            onchange="updatePreference(this)"
                        >
                        <span class="toggle-slider"></span>
                    </label>
                </div>
            </div>
        {% endfor %}
    </div>

<script>
var notificationsToastSaved = '{{ 'toast.saved'|trans|e('js') }}';
var notificationsToastError = '{{ 'toast.error'|trans|e('js') }}';

function updatePreference(checkbox) {
    var eventName = checkbox.getAttribute('data-event');
    var channel = checkbox.getAttribute('data-channel');
    var previousValue = !checkbox.checked;

    var fd = new FormData();
    fd.append('preferences[' + eventName + '][' + channel + ']', checkbox.checked ? '1' : '0');

    fetch('{{ path('app_settings_notifications_update') }}', {
        method: 'POST',
        body: fd
    })
    .then(function(response) { return response.json(); })
    .then(function(data) {
        if (data && data.success) {
            showToast(notificationsToastSaved, 'success');
            return;
        }

        checkbox.checked = previousValue;
        showToast(notificationsToastError, 'error');
    })
    .catch(function() {
        checkbox.checked = previousValue;
        showToast(notificationsToastError, 'error');
    });
}
</script>
{% endblock %}