{% extends 'layouts/base.html' %}

{% block content %}

<div class="page-head">
    <h1>Dynamic Reports Builder</h1>
</div>

<div class="panel">
    <form method="post">
        <div class="form-grid">
            <div class="form-group">
                <label>Source</label>
                <select name="source_table" data-report-source>
                    <option value="">Select Source</option>
                    {% for table, cols in reports.items() %}
                    <option value="{{ table }}" {% if selected_table == table %}selected{% endif %}>
                        {{ table.title() }}
                    </option>
                    {% endfor %}
                </select>
            </div>

            <div class="form-group">
                <label>Report Name</label>
                <input name="report_name">
            </div>

            <div class="form-group">
                <label>Saved File Format</label>
                <select name="export_format">
                    <option value="csv">CSV</option>
                    <option value="xlsx">Excel (.xlsx)</option>
                </select>
            </div>

            <label class="check">
                <input type="checkbox" name="save_report" value="1">
                Save Report
            </label>
        </div>

        {% if selected_table %}
        {% if selected_table == 'leads' %}
        <h3>Lead Conditions</h3>
        <div class="form-grid">
            <div class="form-group">
                <label>Search</label>
                <input name="q" value="{{ active_filters.get('q', '') }}" placeholder="Name, mobile, email or company">
            </div>
            <div class="form-group">
                <label>Status</label>
                <select name="status">
                    <option value="">All lead statuses</option>
                    {% for status in filter_options.lead_statuses %}
                    <option value="{{ status }}" {% if active_filters.get('status') == status %}selected{% endif %}>{{ status.replace('_', ' ').title() }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label>Source</label>
                <select name="source">
                    <option value="">All lead sources</option>
                    {% for source in filter_options.lead_sources %}
                    <option value="{{ source }}" {% if active_filters.get('source') == source %}selected{% endif %}>{{ source.replace('_', ' ').title() }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label>City</label>
                <select name="city">
                    <option value="">All cities</option>
                    {% for city in filter_options.lead_cities %}
                    <option value="{{ city }}" {% if active_filters.get('city') == city %}selected{% endif %}>{{ city }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label>Created From</label>
                <input type="date" name="date_from" value="{{ active_filters.get('date_from', '') }}">
            </div>
            <div class="form-group">
                <label>Created To</label>
                <input type="date" name="date_to" value="{{ active_filters.get('date_to', '') }}">
            </div>
        </div>
        {% elif selected_table == 'sales' %}
        <h3>Sales Conditions</h3>
        <div class="form-grid">
            <div class="form-group">
                <label>Search</label>
                <input name="q" value="{{ active_filters.get('q', '') }}" placeholder="Customer, mobile, bank or notes">
            </div>
            <div class="form-group">
                <label>Payment Status</label>
                <select name="payment_status">
                    <option value="">All payment statuses</option>
                    {% for status in filter_options.payment_statuses %}
                    <option value="{{ status }}" {% if active_filters.get('payment_status') == status %}selected{% endif %}>{{ status.replace('_', ' ').title() }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label>Approval Status</label>
                <select name="approval_status">
                    <option value="">All approval statuses</option>
                    {% for status in filter_options.approval_statuses %}
                    <option value="{{ status }}" {% if active_filters.get('approval_status') == status %}selected{% endif %}>{{ status.replace('_', ' ').title() }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label>Sale Date From</label>
                <input type="date" name="date_from" value="{{ active_filters.get('date_from', '') }}">
            </div>
            <div class="form-group">
                <label>Sale Date To</label>
                <input type="date" name="date_to" value="{{ active_filters.get('date_to', '') }}">
            </div>
        </div>
        {% endif %}

        <h3>Columns</h3>
        <div class="report-column-actions">
            <label class="check"><input type="checkbox" data-select-all-columns> Select all columns</label>
        </div>
        <div class="chips">
            {% for c in reports[selected_table] %}
            <label>
                <input type="checkbox" name="columns" value="{{ c }}" {% if c in selected_cols %}checked{% endif %} data-report-column>
                {{ c|replace('_', ' ')|title }}
            </label>
            {% endfor %}
        </div>

        <button class="btn" type="submit">Run Matched Report</button>
        {% endif %}
    </form>
</div>

<script>
(() => {
    const columns = [...document.querySelectorAll('[data-report-column]')];
    const selectAll = document.querySelector('[data-select-all-columns]');
    const source = document.querySelector('[data-report-source]');
    source?.addEventListener('change', () => {
        columns.forEach(column => { column.checked = false; });
        source.form.submit();
    });
    if (!columns.length || !selectAll) return;
    const sync = () => {
        selectAll.checked = columns.every(column => column.checked);
        selectAll.indeterminate = columns.some(column => column.checked) && !selectAll.checked;
    };
    selectAll.addEventListener('change', () => {
        columns.forEach(column => { column.checked = selectAll.checked; });
        sync();
    });
    columns.forEach(column => column.addEventListener('change', sync));
    sync();
})();
</script>

{% if result %}
<div class="panel">
    <div class="panel-head">
        <h3>Report Result</h3>
        <span class="badge">{{ result|length }} Rows</span>
    </div>

    <div class="table-wrap">
        <table class="modern-table">
            <thead>
                <tr>{% for k in result[0].keys() %}<th>{{ k }}</th>{% endfor %}</tr>
            </thead>
            <tbody>
                {% for row in result %}
                <tr>{% for v in row.values() %}<td>{{ v }}</td>{% endfor %}</tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endif %}

<div class="panel">
    <h3>Saved Reports</h3>
    <table class="modern-table">
        <thead><tr><th>Name</th><th>Source</th><th>Columns</th><th>Created</th><th>Actions</th></tr></thead>
        <tbody>
            {% for s in saved %}
            <tr>
                <td>{{ s.name }}</td>
                <td><span class="badge">{{ s.source_table }}</span></td>
                <td>{{ s.columns_json }}</td>
                <td>{{ s.created_at }}</td>
                <td>
                    <form method="post" action="{{ url_for('reports.delete_report', report_id=s.id) }}"
                          onsubmit="return confirm('Delete this saved report and its generated files?')">
                        <button class="btn btn-sm danger" type="submit" title="Delete report" aria-label="Delete {{ s.name }}">&#128465;</button>
                    </form>
                </td>
            </tr>
            {% else %}
            <tr><td colspan="5" style="text-align:center;">No reports saved yet.</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% endblock %}