{% extends "base.html" %}
{% block title %}Submissions - Admin Dashboard{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>
        <i class="bi bi-inbox me-2"></i> 
        Form Submissions
        {% if show_archived %} <span class="badge bg-secondary fs-6 align-middle ms-2">Archive View</span> {% endif %}
    </h2>
    
    <div>
        <div class="btn-group me-2">
            <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="bi bi-download"></i> Export
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item" href="{{ url_for('admin.export_submissions', format='csv') }}"><i class="bi bi-filetype-csv me-2 text-success"></i> Download CSV</a></li>
                <li><a class="dropdown-item" href="{{ url_for('admin.export_submissions', format='json') }}"><i class="bi bi-filetype-json me-2 text-warning"></i> Download JSON</a></li>
            </ul>
        </div>
        
        {% if show_archived %}
            <a href="{{ url_for('admin.list_submissions') }}" class="btn btn-outline-primary"><i class="bi bi-inbox"></i> Active View</a>
        {% else %}
            <a href="{{ url_for('admin.list_submissions', show_archived='true') }}" class="btn btn-outline-secondary"><i class="bi bi-archive"></i> View Archive</a>
        {% endif %}
    </div>
</div>

<div class="card shadow-sm">
    <div class="card-body">
        {% if submissions %}
        <form action="{{ url_for('admin.bulk_action_submissions') }}" method="POST" id="bulk-form">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() if csrf_token else '' }}">
            
            <!-- Bulk Actions Toolbar -->
            <div class="bg-light p-2 mb-3 rounded d-flex align-items-center" id="bulk-toolbar" style="display: none !important;">
                <span class="me-3 fw-bold"><span id="selected-count">0</span> selected</span>
                {% if show_archived %}
                    <button type="submit" name="action" value="unarchive" class="btn btn-sm btn-success"><i class="bi bi-box-arrow-up"></i> Restore (Unarchive)</button>
                {% else %}
                    <button type="submit" name="action" value="archive" class="btn btn-sm btn-warning"><i class="bi bi-archive"></i> Move to Archive</button>
                {% endif %}
            </div>

            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 40px;">
                                <input class="form-check-input" type="checkbox" id="select-all">
                            </th>
                            <th>Date</th>
                            <th>Form</th>
                            <th>Tenant</th>
                            <th>Status</th>
                            <th>reCAPTCHA</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for sub in submissions %}
                        <tr class="{% if sub.status.value == 'archived' %}opacity-75{% endif %}">
                            <td>
                                <input class="form-check-input sub-checkbox" type="checkbox" name="submission_ids" value="{{ sub.id }}">
                            </td>
                            <td><small>{{ sub.created_at.strftime('%Y-%m-%d %H:%M') }}</small></td>
                            <td>{{ sub.form_config.name }}</td>
                            <td><small class="text-muted">{{ sub.tenant.name }}</small></td>
                            <td>
                                {% if sub.status.value == 'pending' %}
                                <span class="badge bg-warning text-dark">Pending</span>
                                {% elif sub.status.value == 'processed' %}
                                <span class="badge bg-success">Processed</span>
                                {% elif sub.status.value == 'spam' %}
                                <span class="badge bg-danger">Spam</span>
                                {% elif sub.status.value == 'archived' %}
                                <span class="badge bg-secondary"><i class="bi bi-archive"></i> Archived</span>
                                {% else %}
                                <span class="badge bg-secondary">{{ sub.status.value }}</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if sub.recaptcha_score is not none %}
                                    <span class="badge {{ 'bg-success' if sub.recaptcha_passed else 'bg-danger' }}">
                                        Score: {{ "%.2f"|format(sub.recaptcha_score) }}
                                    </span>
                                {% else %}
                                    <span class="text-muted small">N/A</span>
                                {% endif %}
                            </td>
                            <td class="text-end">
                                <a href="{{ url_for('admin.view_submission', submission_id=sub.id) }}" class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-eye"></i> View
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </form>
        {% else %}
        <div class="text-center py-5 text-muted">
            <i class="bi {% if show_archived %}bi-archive{% else %}bi-inbox{% endif %} fs-1 d-block mb-3"></i>
            <p>No {% if show_archived %}archived {% endif %}submissions found.</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const selectAll = document.getElementById('select-all');
    const checkboxes = document.querySelectorAll('.sub-checkbox');
    const bulkToolbar = document.getElementById('bulk-toolbar');
    const countDisplay = document.getElementById('selected-count');

    function updateToolbar() {
        if(!bulkToolbar) return;
        const checkedCount = document.querySelectorAll('.sub-checkbox:checked').length;
        countDisplay.textContent = checkedCount;
        
        if (checkedCount > 0) {
            bulkToolbar.style.setProperty('display', 'flex', 'important');
        } else {
            bulkToolbar.style.setProperty('display', 'none', 'important');
        }
    }

    if(selectAll) {
        selectAll.addEventListener('change', function() {
            checkboxes.forEach(cb => cb.checked = selectAll.checked);
            updateToolbar();
        });
    }

    checkboxes.forEach(cb => {
        cb.addEventListener('change', updateToolbar);
    });
});
</script>
{% endblock %}