File: templates/admin_subscriptions.twig

{% extends "base.twig" %}

{% block title %}{{ t('ui.admin_subscriptions.page_title', {}, locale, ['common']) }} - {{ system_name }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2>
                    <i class="fas fa-bookmark-plus me-2"></i>
                    {{ t('ui.admin_subscriptions.heading', {}, locale, ['common']) }}
                </h2>
                <nav aria-label="{{ t('ui.admin_subscriptions.breadcrumb_aria', {}, locale, ['common']) }}">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="/admin">{{ t('ui.common.admin', {}, locale, ['common']) }}</a></li>
                        <li class="breadcrumb-item active">{{ t('ui.admin_subscriptions.breadcrumb_current', {}, locale, ['common']) }}</li>
                    </ol>
                </nav>
            </div>

            <!-- Statistics Cards -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="card bg-primary text-white">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-comments fa-2x me-3"></i>
                                <div>
                                    <h5 class="mb-1">{{ stats.total_echoareas }}</h5>
                                    <small>{{ t('ui.admin_subscriptions.total_echoareas', {}, locale, ['common']) }}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-warning text-white">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-star fa-2x me-3"></i>
                                <div>
                                    <h5 class="mb-1">{{ stats.default_echoareas }}</h5>
                                    <small>{{ t('ui.admin_subscriptions.default_echoareas', {}, locale, ['common']) }}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-success text-white">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-bookmark fa-2x me-3"></i>
                                <div>
                                    <h5 class="mb-1">{{ stats.total_subscriptions }}</h5>
                                    <small>{{ t('ui.admin_subscriptions.total_subscriptions', {}, locale, ['common']) }}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-info text-white">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-users fa-2x me-3"></i>
                                <div>
                                    <h5 class="mb-1">{{ stats.subscribed_users }}</h5>
                                    <small>{{ t('ui.admin_subscriptions.active_subscribers', {}, locale, ['common']) }}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Echoarea Management -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-cog me-2"></i>
                        {{ t('ui.admin_subscriptions.echoarea_default_subscriptions', {}, locale, ['common']) }}
                    </h5>
                    <small class="text-muted">{{ t('ui.admin_subscriptions.manage_default_help', {}, locale, ['common']) }}</small>
                </div>
                <div class="card-body">
                    <div id="admin-status" class="alert d-none" role="alert"></div>
                    
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th width="80">{{ t('ui.admin_subscriptions.default', {}, locale, ['common']) }}</th>
                                    <th width="150">{{ t('ui.admin_subscriptions.echoarea', {}, locale, ['common']) }}</th>
                                    <th>{{ t('ui.common.description', {}, locale, ['common']) }}</th>
                                    <th width="100" class="text-center">{{ t('ui.admin_subscriptions.subscribers', {}, locale, ['common']) }}</th>
                                    <th width="100" class="text-center">{{ t('ui.admin_subscriptions.user_subs', {}, locale, ['common']) }}</th>
                                    <th width="100" class="text-center">{{ t('ui.admin_subscriptions.auto_subs', {}, locale, ['common']) }}</th>
                                    <th width="120" class="text-center">{{ t('ui.admin_subscriptions.messages', {}, locale, ['common']) }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for echoarea in echoareas %}
                                <tr>
                                    <td>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input default-toggle" 
                                                   type="checkbox" 
                                                   id="default-{{ echoarea.id }}"
                                                   data-echoarea-id="{{ echoarea.id }}"
                                                   {{ echoarea.is_default_subscription ? 'checked' : '' }}>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <span class="me-2" style="display: inline-block; width: 20px; height: 20px; min-width: 20px; min-height: 20px; background-color: {{ echoarea.color }}; border-radius: 3px; flex-shrink: 0;"></span>
                                            <span style="color: #ffc107;">{{ echoarea.tag }}</span>
                                            {% if echoarea.domain %}
                                                <span class="badge bg-secondary ms-2" style="font-size: 0.7em;">{{ echoarea.domain }}</span>
                                            {% endif %}
                                            {% if echoarea.is_default_subscription %}
                                                <i class="fas fa-star text-warning ms-2" title="{{ t('ui.admin_subscriptions.default_subscription_title', {}, locale, ['common']) }}"></i>
                                            {% endif %}
                                        </div>
                                    </td>
                                    <td>{{ echoarea.description }}</td>
                                    <td class="text-center">
                                        <span class="badge bg-primary">{{ echoarea.subscriber_count }}</span>
                                    </td>
                                    <td class="text-center">
                                        <span class="badge bg-success">{{ echoarea.user_subscribers }}</span>
                                    </td>
                                    <td class="text-center">
                                        <span class="badge bg-info">{{ echoarea.auto_subscribers }}</span>
                                    </td>
                                    <td class="text-center">
                                        <small class="text-muted">{{ echoarea.message_count }}</small>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>

                    <div class="mt-3">
                        <div class="row">
                            <div class="col-md-6">
                                <h6>{{ t('ui.admin_subscriptions.legend', {}, locale, ['common']) }}</h6>
                                <ul class="list-unstyled small text-muted">
                                    <li><i class="fas fa-star text-warning me-2"></i>{{ t('ui.admin_subscriptions.legend_default', {}, locale, ['common']) }}</li>
                                    <li><span class="badge bg-primary me-2">{{ t('ui.admin_subscriptions.legend_total_badge', {}, locale, ['common']) }}</span>{{ t('ui.admin_subscriptions.legend_total', {}, locale, ['common']) }}</li>
                                    <li><span class="badge bg-success me-2">{{ t('ui.admin_subscriptions.legend_user_badge', {}, locale, ['common']) }}</span>{{ t('ui.admin_subscriptions.legend_user', {}, locale, ['common']) }}</li>
                                    <li><span class="badge bg-info me-2">{{ t('ui.admin_subscriptions.legend_auto_badge', {}, locale, ['common']) }}</span>{{ t('ui.admin_subscriptions.legend_auto', {}, locale, ['common']) }}</li>
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <div class="alert alert-info">
                                    <h6><i class="fas fa-info-circle me-2"></i>{{ t('ui.admin_subscriptions.how_it_works', {}, locale, ['common']) }}</h6>
                                    <ul class="mb-0 small">
                                        <li>{{ t('ui.admin_subscriptions.how_default_toggle', {}, locale, ['common']) }}</li>
                                        <li>{{ t('ui.admin_subscriptions.how_existing_users', {}, locale, ['common']) }}</li>
                                        <li>{{ t('ui.admin_subscriptions.how_unsubscribe', {}, locale, ['common']) }}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function uiT(key, fallback, params = {}) {
    if (window.t) {
        return window.t(key, params, fallback);
    }
    return fallback;
}

document.addEventListener('DOMContentLoaded', function() {
    const defaultToggles = document.querySelectorAll('.default-toggle');
    const statusDiv = document.getElementById('admin-status');
    
    // Default subscription toggle functionality
    defaultToggles.forEach(toggle => {
        toggle.addEventListener('change', function() {
            const echoareaId = this.dataset.echoareaId;
            const isDefault = this.checked;
            const originalState = !this.checked;
            
            // Disable toggle while processing
            this.disabled = true;
            
            fetch('/api/subscriptions/admin', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    action: 'set_default',
                    echoarea_id: parseInt(echoareaId),
                    is_default: isDefault
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const action = isDefault
                        ? uiT('ui.admin_subscriptions.action_enabled', 'enabled')
                        : uiT('ui.admin_subscriptions.action_disabled', 'disabled');
                    const fallbackMessage = uiT('ui.admin_subscriptions.update_success', 'Default subscription {action} successfully! Page will refresh to show updated stats.', { action });
                    const successMessage = window.getApiMessage
                        ? window.getApiMessage(data, fallbackMessage)
                        : fallbackMessage;
                    showStatus(successMessage, 'success');
                    // Refresh page to update subscriber counts
                    setTimeout(() => location.reload(), 1500);
                } else {
                    // Revert toggle state
                    this.checked = originalState;
                    showStatus(uiT('ui.admin_subscriptions.update_failed', 'Failed to update default subscription. Please try again.'), 'danger');
                }
            })
            .catch(error => {
                // Revert toggle state
                this.checked = originalState;
                showStatus(uiT('ui.admin_subscriptions.network_error', 'Network error. Please try again.'), 'danger');
            })
            .finally(() => {
                this.disabled = false;
            });
        });
    });
    
    function showStatus(message, type) {
        statusDiv.className = `alert alert-${type}`;
        statusDiv.textContent = message;
        statusDiv.classList.remove('d-none');
        
        setTimeout(() => {
            statusDiv.classList.add('d-none');
        }, 5000);
    }
});
</script>
{% endblock %}