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

{% block content %}
    <h2>Bulk update trainees (paste spreadsheet text)</h2>

    <p>Paste the spreadsheet rows below. Headings like "Year 1 - Group 1" are used to set the grade (Year N -> STN). Rows should contain "Name <tab or 2+spaces> Supervisor".</p>

        <form method="post">
            {% csrf_token %}
            <textarea name="data" rows="18" class="w-100">{% if request.POST.data %}{{ request.POST.data }}{% endif %}</textarea>
            <div style="margin-top:8px">
                <button type="submit" name="action" value="preview" class="btn btn-primary">Preview</button>
                <button type="submit" name="action" value="apply" class="btn btn-danger" onclick="return confirm('This will apply updates to matched trainee profiles. Are you sure?')">Apply updates</button>
            </div>
        </form>

        {% if preview %}
            <h3>Preview ({{ preview|length }} rows)</h3>
            <table class="table table-sm">
                <thead>
                    <tr>
                        <th>Raw</th>
                        <th>Name</th>
                        <th>Grade</th>
                        <th>Matched user</th>
                        <th>Supervisor text</th>
                        <th>Matched supervisor</th>
                    </tr>
                </thead>
                <tbody>
                    {% for r in preview %}
                        <tr>
                            <td><pre style="margin:0">{{ r.raw }}</pre></td>
                            <td>{{ r.norm_name }}</td>
                            <td>{{ r.grade }}</td>
                            <td>
                                {% if r.matched_user %}
                                    <a href="{% url 'account_profile' r.matched_user.username %}">{{ r.matched_user.first_name }} {{ r.matched_user.last_name }}</a>
                                {% else %}
                                    <div>
                                        <span style="color:red">No match</span>
                                        <div>
                                            <div class="inline-search-row">
                                                <form hx-get="{% url 'generic:user_search' %}" hx-target="#user-results-{{ r.row_index }}" hx-swap="innerHTML" onsubmit="return false;" class="inline-search-row">
                                                    <input type="text" name="q" id="user-search-input-{{ r.row_index }}" class="form-control form-control-sm search-input-compact" placeholder="Search users..." />
                                                    <input type="hidden" name="row" value="{{ r.row_index }}" />
                                                    <button type="submit" class="btn btn-sm btn-secondary">Search</button>
                                                </form>
                                                <div id="user-results-{{ r.row_index }}"></div>
                                            </div>
                                            <input type="hidden" name="manual_user_{{ r.row_index }}" id="manual_user_{{ r.row_index }}" />
                                        </div>
                                {% endif %}
                            </td>
                            <td>{{ r.supervisor_text }}</td>
                            <td>
                                {% if r.matched_supervisor %}
                                    <a href="{% url 'generic:supervisor_detail' r.matched_supervisor.pk %}">{{ r.matched_supervisor.name }}</a>
                                {% else %}
                                    <div>
                                        <span style="color:red">No match</span>
                                        <div class="inline-search-row">
                                            <form hx-get="{% url 'generic:supervisor_search' %}" hx-target="#supervisor-results-{{ r.row_index }}" hx-swap="innerHTML" onsubmit="return false;" class="inline-search-row">
                                                <input type="text" name="q" id="supervisor-search-input-{{ r.row_index }}" class="form-control form-control-sm search-input-compact" placeholder="Search supervisors..." />
                                                <input type="hidden" name="row" value="{{ r.row_index }}" />
                                                <button type="submit" class="btn btn-sm btn-secondary">Search</button>
                                            </form>
                                            <div id="supervisor-results-{{ r.row_index }}"></div>
                                        </div>
                                        <input type="hidden" name="manual_supervisor_{{ r.row_index }}" id="manual_supervisor_{{ r.row_index }}" />
                                    </div>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% endif %}

        {% if report %}
            <h3>Apply report</h3>
            <p>Updated: {{ report.updated }}; Skipped (no user matched): {{ report.skipped }}</p>
        {% endif %}

{% endblock %}

{% block js %}
    <script>
// Called from the HTMX-rendered results fragment to set the manual selection
        function setManualUser(rowIndex, id, text) {
            const hiddenInput = document.getElementById('manual_user_' + rowIndex);
            const resultsDiv = document.getElementById('user-results-' + rowIndex);
            if (hiddenInput) {
                hiddenInput.value = id;
            }
            if (resultsDiv) {
                resultsDiv.innerHTML = '<div>Selected: ' + escapeHtml(text) + '</div>';
            }
        }

        function setManualSupervisor(rowIndex, id, text) {
            const hiddenInput = document.getElementById('manual_supervisor_' + rowIndex);
            const resultsDiv = document.getElementById('supervisor-results-' + rowIndex);
            if (hiddenInput) {
                hiddenInput.value = id;
            }
            if (resultsDiv) {
                resultsDiv.innerHTML = '<div>Selected: ' + escapeHtml(text) + '</div>';
            }
        }

        function escapeHtml(unsafe) {
            if (!unsafe) return '';
            return String(unsafe)
                .replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/\"/g, "&quot;")
                .replace(/'/g, "&#039;");
        }
    </script>
{% endblock %}