{% extends "mobile/base.html" %}
{% block title %}Movements — Bills{% endblock %}

{% block content %}
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem;">
    <h2 style="font-size:1.1rem; margin:0;">Missing invoices
        <span style="font-size:.85rem; color:var(--muted); font-weight:400;">
            ({{ rows|length }} rows)
        </span>
    </h2>
    <a href="{{ url_for('mobile.import_view') }}" class="btn btn-primary btn-sm">
        + Upload
    </a>
</div>

{% if rows %}
<div style="overflow-x:auto; -webkit-overflow-scrolling:touch;">
    <table style="width:100%; border-collapse:collapse; font-size:.9rem;">
        <thead>
            <tr style="border-bottom:2px solid var(--border); text-align:left;">
                <th style="padding:.5rem .4rem; color:var(--muted); font-size:.75rem;
                           text-transform:uppercase; letter-spacing:.04em; font-weight:600;">
                    Company / Reason
                </th>
                <th style="padding:.5rem .4rem; color:var(--muted); font-size:.75rem;
                           text-transform:uppercase; letter-spacing:.04em; font-weight:600;
                           text-align:right; white-space:nowrap;">
                    Amount (€)
                </th>
                <th style="padding:.5rem .4rem; width:48px;"></th>
            </tr>
        </thead>
        <tbody id="m-rows">
        {% for row in rows %}
        <tr id="m-row-{{ row.id }}" style="border-bottom:1px solid var(--border);">
            <td style="padding:.65rem .4rem; max-width:180px;
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
                {{ row.label }}
            </td>
            <td style="padding:.65rem .4rem; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;">
                {% if row.amount %}
                    {{ '%.2f'|format(row.amount|float) }}
                {% else %}
                    —
                {% endif %}
            </td>
            <td style="padding:.65rem .4rem; text-align:center;">
                <!-- Upload trigger: opens camera on mobile -->
                <button class="m-upload-btn"
                        data-id="{{ row.id }}"
                        title="Attach receipt photo"
                        style="background:none; border:none; cursor:pointer; padding:.25rem;">
                    <img src="{{ url_for('static', filename='figs/upload_icon.png') }}"
                         alt="Upload" style="width:28px; height:28px; object-fit:contain;">
                </button>
                <!-- Hidden file input per row -->
                <input type="file"
                       class="m-row-input"
                       data-id="{{ row.id }}"
                       accept="image/*,application/pdf"
                       capture="environment"
                       style="display:none;">
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div style="text-align:center; padding:3rem 1rem; color:var(--muted);">
    <img src="{{ url_for('static', filename='figs/pdf_icon.png') }}"
         alt="All done" style="width:56px; opacity:.4; margin-bottom:.75rem;">
    <p style="font-size:1rem;">All movements have an invoice attached.</p>
</div>
{% endif %}

<script>
(function () {
    // Wire each upload button to its hidden file input
    document.querySelectorAll('.m-upload-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            const id = btn.dataset.id;
            document.querySelector(`.m-row-input[data-id="${id}"]`).click();
        });
    });

    // On file selected: upload and update the row
    document.querySelectorAll('.m-row-input').forEach(input => {
        input.addEventListener('change', async () => {
            if (!input.files.length) return;

            const id  = input.dataset.id;
            const btn = document.querySelector(`.m-upload-btn[data-id="${id}"]`);
            const row = document.getElementById(`m-row-${id}`);

            // Visual feedback: spinner
            btn.innerHTML = '<span style="font-size:1.1rem;">⏳</span>';
            btn.disabled  = true;

            const fd = new FormData();
            fd.append('file', input.files[0]);

            try {
                const resp = await fetch('/import/upload', { method: 'POST', body: fd });
                const data = await resp.json();
                const ok   = (data.results || []).some(r => !r.error);

                if (ok) {
                    // Fade and remove the row — no longer "missing"
                    row.style.transition = 'opacity .4s';
                    row.style.opacity    = '0';
                    setTimeout(() => row.remove(), 420);
                } else {
                    const errMsg = (data.results || []).map(r => r.error).filter(Boolean).join(', ');
                    btn.innerHTML = '<span title="' + errMsg + '" style="color:var(--error);">❌</span>';
                    btn.disabled  = false;
                }
            } catch (e) {
                btn.innerHTML = '<span style="color:var(--error);">❌</span>';
                btn.disabled  = false;
            }

            input.value = ''; // allow re-select
        });
    });
})();
</script>
{% endblock %}