{% extends 'manager/base.html' %}
{% load static %}
{% load i18n %}

{% block title %}{% trans "Send Notifications" %}{% endblock %}

{% block header.add_script %}
<style>
    .notification-form {
        background: white;
        border-radius: 8px;
        padding: 25px;
        margin-bottom: 30px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .filter-section {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    .preview-section {
        background: #e3f2fd;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 20px;
        border-left: 4px solid #2196f3;
    }
    .target-count {
        font-size: 1.5rem;
        font-weight: bold;
        color: #2196f3;
    }
    .form-group label {
        font-weight: 600;
        color: #333;
    }
    .btn-send {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        color: white;
        padding: 12px 30px;
        font-weight: 600;
        border-radius: 6px;
    }
    .btn-send:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        color: white;
    }
    .notification-preview {
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 15px;
        margin-top: 15px;
        background: white;
    }
    .notification-title {
        font-weight: bold;
        margin-bottom: 5px;
        color: #333;
    }
    .notification-body {
        color: #666;
        line-height: 1.4;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <h2><i class="fa fa-bell"></i> {% trans "Send Notifications to Users" %}</h2>
            <p class="text-muted">{% trans "Filter users and send targeted notifications" %}</p>
        </div>
    </div>

    <!-- Filter Section -->
    <div class="filter-section">
        <h4>{% trans "Target User Filters" %}</h4>
        <form method="GET" id="filterForm">
            <div class="row">
                <div class="col-md-2">
                    <label for="search">{% trans "Search" %}</label>
                    <input type="text" class="form-control" id="search" name="search" 
                           value="{{ search_query }}" placeholder="{% trans 'Name, email, phone' %}">
                </div>
                <div class="col-md-2">
                    <label for="subscription">{% trans "Subscription" %}</label>
                    <select class="form-control" id="subscription" name="subscription">
                        <option value="">{% trans "All" %}</option>
                        <option value="active" {% if subscription_filter == 'active' %}selected{% endif %}>{% trans "Active" %}</option>
                        <option value="expired" {% if subscription_filter == 'expired' %}selected{% endif %}>{% trans "Expired" %}</option>
                        <option value="free" {% if subscription_filter == 'free' %}selected{% endif %}>{% trans "Free" %}</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="activity">{% trans "Activity" %}</label>
                    <select class="form-control" id="activity" name="activity">
                        <option value="">{% trans "All" %}</option>
                        <option value="active" {% if activity_filter == 'active' %}selected{% endif %}>{% trans "Active" %}</option>
                        <option value="inactive" {% if activity_filter == 'inactive' %}selected{% endif %}>{% trans "Inactive" %}</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="company">{% trans "Company" %}</label>
                    <select class="form-control" id="company" name="company">
                        <option value="">{% trans "All" %}</option>
                        {% for company in companies %}
                        <option value="{{ company.id }}" {% if company_filter == company.id|stringformat:"s" %}selected{% endif %}>
                            {{ company.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="churn_risk">{% trans "Churn Risk" %}</label>
                    <select class="form-control" id="churn_risk" name="churn_risk">
                        <option value="">{% trans "All" %}</option>
                        <option value="high" {% if churn_risk_filter == 'high' %}selected{% endif %}>{% trans "High" %}</option>
                        <option value="medium" {% if churn_risk_filter == 'medium' %}selected{% endif %}>{% trans "Medium" %}</option>
                        <option value="low" {% if churn_risk_filter == 'low' %}selected{% endif %}>{% trans "Low" %}</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="joined_date">{% trans "Joined Date" %}</label>
                    <select class="form-control" id="joined_date" name="joined_date">
                        <option value="">{% trans "All Time" %}</option>
                        <option value="today" {% if joined_date_filter == 'today' %}selected{% endif %}>{% trans "Today" %}</option>
                        <option value="this_week" {% if joined_date_filter == 'this_week' %}selected{% endif %}>{% trans "This Week" %}</option>
                        <option value="this_month" {% if joined_date_filter == 'this_month' %}selected{% endif %}>{% trans "This Month" %}</option>
                        <option value="last_month" {% if joined_date_filter == 'last_month' %}selected{% endif %}>{% trans "Last Month" %}</option>
                    </select>
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-md-12">
                    <button type="submit" class="btn btn-primary">{% trans "Update Preview" %}</button>
                    <button type="button" class="btn btn-secondary" onclick="clearFilters()">{% trans "Clear Filters" %}</button>
                </div>
            </div>
        </form>
    </div>

    <!-- Preview Section -->
    <div class="preview-section">
        <div class="row">
            <div class="col-md-8">
                <h5>{% trans "Target Users Preview" %}</h5>
                <p>{% trans "With current filters, notification will be sent to:" %}</p>
            </div>
            <div class="col-md-4 text-right">
                <div class="target-count">{{ target_users_count }}</div>
                <small class="text-muted">{% trans "users" %}</small>
            </div>
        </div>
    </div>

    <!-- Notification Form -->
    <div class="notification-form">
        <form method="POST" id="notificationForm">
            {% csrf_token %}
            
            <!-- Preserve filter parameters -->
            <input type="hidden" name="search" value="{{ search_query }}">
            <input type="hidden" name="subscription" value="{{ subscription_filter }}">
            <input type="hidden" name="activity" value="{{ activity_filter }}">
            <input type="hidden" name="company" value="{{ company_filter }}">
            <input type="hidden" name="churn_risk" value="{{ churn_risk_filter }}">
            <input type="hidden" name="joined_date" value="{{ joined_date_filter }}">
            
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="notification_title">{% trans "Notification Title" %} *</label>
                        <input type="text" class="form-control" id="notification_title" name="notification_title" 
                               required maxlength="100" placeholder="{% trans 'Enter notification title' %}">
                        <small class="form-text text-muted">{% trans "Maximum 100 characters" %}</small>
                    </div>
                    
                    <div class="form-group">
                        <label for="notification_body">{% trans "Notification Body" %} *</label>
                        <textarea class="form-control" id="notification_body" name="notification_body" 
                                  rows="4" required maxlength="500" placeholder="{% trans 'Enter notification message' %}"></textarea>
                        <small class="form-text text-muted">{% trans "Maximum 500 characters" %}</small>
                    </div>
                    
                    <div class="form-group">
                        <button type="submit" class="btn btn-send" onclick="return confirmSend()">
                            <i class="fa fa-paper-plane"></i> {% trans "Send Notification" %}
                        </button>
                    </div>
                </div>
                
                <div class="col-md-6">
                    <h5>{% trans "Notification Preview" %}</h5>
                    <div class="notification-preview">
                        <div class="notification-title" id="preview-title">{% trans "Your notification title will appear here" %}</div>
                        <div class="notification-body" id="preview-body">{% trans "Your notification message will appear here" %}</div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
// Update preview as user types
document.getElementById('notification_title').addEventListener('input', function() {
    document.getElementById('preview-title').textContent = this.value || "{% trans 'Your notification title will appear here' %}";
});

document.getElementById('notification_body').addEventListener('input', function() {
    document.getElementById('preview-body').textContent = this.value || "{% trans 'Your notification message will appear here' %}";
});

// Clear filters function
function clearFilters() {
    document.querySelectorAll('#filterForm input, #filterForm select').forEach(function(element) {
        element.value = '';
    });
    document.getElementById('filterForm').submit();
}

// Confirm before sending
function confirmSend() {
    const title = document.getElementById('notification_title').value;
    const body = document.getElementById('notification_body').value;
    const count = {{ target_users_count }};
    
    if (!title || !body) {
        alert("{% trans 'Please fill in both title and body' %}");
        return false;
    }
    
    if (count === 0) {
        alert("{% trans 'No users match the current filters. Please adjust your filters.' %}");
        return false;
    }
    
    return confirm(`{% trans 'Are you sure you want to send this notification to' %} ${count} {% trans 'users?' %}`);
}

// Auto-submit filter form when filters change
document.querySelectorAll('#filterForm select').forEach(function(select) {
    select.addEventListener('change', function() {
        document.getElementById('filterForm').submit();
    });
});
</script>
{% endblock %}