{% extends "layouts/base.html" %}
{% load i18n %}

{% block title %}{% trans "Generate Enhanced Reports" %} - PX360{% endblock %}

{% block content %}
<div class="container-fluid px-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0">{% trans "Generate Enhanced Reports" %}</h1>
            <p class="text-muted mb-0">{% trans "Create detailed per-survey-type reports with question-level analysis" %}</p>
        </div>
        <div>
            <a href="{% url 'surveys:enhanced_reports_list' %}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-2"></i>{% trans "Back to Reports" %}
            </a>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0">
                    <h5 class="mb-0">{% trans "Report Configuration" %}</h5>
                </div>
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}
                        
                        <div class="mb-4">
                            <label for="template" class="form-label">{% trans "Survey Template (Optional)" %}</label>
                            <select name="template" id="template" class="form-select form-select-lg">
                                <option value="">{% trans "All Templates - Generate reports for all survey types" %}</option>
                                {% for template in templates %}
                                    <option value="{{ template.id }}">{{ template.name }}</option>
                                {% endfor %}
                            </select>
                            <div class="form-text">
                                {% trans "Leave empty to generate separate reports for all survey templates." %}
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label for="start_date" class="form-label">{% trans "Start Date (Optional)" %}</label>
                                <input type="date" name="start_date" id="start_date" class="form-control">
                                <div class="form-text">
                                    {% trans "Default: 1 year ago" %}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label for="end_date" class="form-label">{% trans "End Date (Optional)" %}</label>
                                <input type="date" name="end_date" id="end_date" class="form-control">
                                <div class="form-text">
                                    {% trans "Default: Today" %}
                                </div>
                            </div>
                        </div>

                        <!-- What to expect -->
                        <div class="alert alert-light border mb-4">
                            <h6><i class="bi bi-check2-circle me-2"></i>{% trans "What will be generated:" %}</h6>
                            <ul class="mb-0">
                                <li>{% trans "A separate HTML report for each survey template" %}</li>
                                <li>{% trans "Detailed question-level analysis with charts" %}</li>
                                <li>{% trans "Score distributions and monthly trends per question" %}</li>
                                <li>{% trans "Performance insights and recommendations" %}</li>
                                <li>{% trans "Master index page linking all reports" %}</li>
                                <li>{% trans "Summary JSON file for programmatic access" %}</li>
                            </ul>
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="{% url 'surveys:enhanced_reports_list' %}" class="btn btn-outline-secondary">
                                {% trans "Cancel" %}
                            </a>
                            <button type="submit" class="btn btn-primary btn-lg" id="generateBtn">
                                <i class="bi bi-gear me-2"></i>{% trans "Generate Reports" %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Processing note -->
            <div class="alert alert-info mt-4">
                <i class="bi bi-info-circle me-2"></i>
                <strong>{% trans "Note:" %}</strong> {% trans "Report generation may take a few moments depending on the amount of survey data. Please wait for the process to complete." %}
            </div>
        </div>
    </div>
</div>

<script>
document.querySelector('form').addEventListener('submit', function(e) {
    const btn = document.getElementById('generateBtn');
    btn.disabled = true;
    btn.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>{% trans "Generating..." %}';
});
</script>
{% endblock %}