{% extends 'base.html' %}
{% load static %}
{% block title %}Custom Report Builder - Rapha-Bethel BNPS{% endblock %}
{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div><h1 class="h3 mb-0">Custom Report Builder</h1><p class="text-muted">Select data source and fields to generate a custom CSV report</p></div>
    </div>
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow">
                <div class="card-header py-3 bg-primary text-white"><h6 class="m-0"><i class="fas fa-cogs me-2"></i>Report Configuration</h6></div>
                <div class="card-body">
                    <form method="post" action="{% url 'reports:generate_custom_report' %}">
                        {% csrf_token %}
                        <div class="mb-4">
                            <label class="form-label fw-bold">Data Source <span class="text-danger">*</span></label>
                            <div class="row g-3">
                                {% for source in data_sources %}
                                <div class="col-md-4">
                                    <div class="card border h-100">
                                        <div class="card-body text-center p-3">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="data_source" id="source_{{ source.id }}" value="{{ source.id }}" required>
                                                <label class="form-check-label fw-bold" for="source_{{ source.id }}">
                                                    <i class="fas fa-{% if source.id == 'students' %}user-graduate{% elif source.id == 'attendance' %}clipboard-check{% elif source.id == 'payments' %}money-bill{% elif source.id == 'invoices' %}file-invoice{% else %}receipt{% endif %} fa-2x d-block mb-2 text-primary"></i>
                                                    {{ source.name }}
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-bold">Date Range (optional)</label>
                            <div class="row g-3">
                                <div class="col-md-6"><input type="date" name="from_date" class="form-control" placeholder="From date"></div>
                                <div class="col-md-6"><input type="date" name="to_date" class="form-control" placeholder="To date"></div>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-bold">Additional Filters</label>
                            <textarea name="filters" class="form-control" rows="3" placeholder="Optional: describe any specific filters..."></textarea>
                        </div>

                        <div class="alert alert-info">
                            <i class="fas fa-info-circle me-2"></i>The report will be downloaded as a CSV file. Large datasets may take a moment to generate.
                        </div>

                        <div class="d-flex justify-content-end gap-2">
                            <a href="{% url 'reports:academic_report' %}" class="btn btn-secondary">Cancel</a>
                            <button type="submit" class="btn btn-primary"><i class="fas fa-download me-2"></i>Generate & Download</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}