{{define "generic_content"}}
<div class="page-header">
    <h2>Generic Tools</h2>
    <p>Miscellaneous tools and utilities for ServiceTrade operations.</p>
</div>

<div class="page-content">
    <div class="content">
        <h3 class="submenu-header">Generic Tools & Utilities</h3>

        <section class="card">
            <h4>Invoice Clock Events Report (Proof of Concept)</h4>
            <p>
                Upload a CSV containing invoice numbers to generate a downloadable report that aggregates
                related job information, assigned technicians, and enroute/onsite clock events.
            </p>

            <form id="invoice-clock-form" class="form" action="/reports/invoice-clock" method="POST"
                enctype="multipart/form-data">
                {{if .CSRFField}}
                {{.CSRFField}}
                {{end}}
                <input type="hidden" name="csrfToken" id="generic-csrf-token" value="{{.CSRFCookie}}">
                <div class="form-group">
                    <label for="invoiceCsv">Select CSV file</label>
                    <input class="card-input" type="file" id="invoiceCsv" name="invoiceCsv" accept=".csv" required>
                </div>
                <p class="help-text">
                    The CSV may include a header named <code>invoice_number</code>; if no header is present, the first
                    column
                    is used. Each invoice number is processed individually.
                </p>
                <button class="btn-primary" type="submit">Generate Report</button>
            </form>
        </section>
    </div>
</div>
<script>
    (function () {
        function readCookie(name) {
            var re = new RegExp('(?:^|; )' + name.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') + '=([^;]+)');
            var m = document.cookie.match(re);
            return m ? decodeURIComponent(m[1]) : null;
        }

        function applyToken(root) {
            var form = root.querySelector ? root.querySelector('#invoice-clock-form') : document.getElementById('invoice-clock-form');
            if (!form) { return; }
            var field = form.querySelector('#generic-csrf-token');
            if (!field) { return; }
            var token = readCookie('XSRF-TOKEN') || readCookie('XSRF-TOKEN-VALUE');
            if (token) {
                field.value = token;
            }
        }

        function ensureTokenBeforeSubmit(evt) {
            if (!evt.target || evt.target.id !== 'invoice-clock-form') {
                return;
            }
            applyToken(evt.target);
        }

        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', function () { applyToken(document); });
        } else {
            applyToken(document);
        }

        document.addEventListener('submit', ensureTokenBeforeSubmit, true);

        if (document.body && document.body.addEventListener) {
            document.body.addEventListener('htmx:load', function (evt) {
                applyToken(evt.target || document);
            });
        }
    })();
</script>
{{end}}