{% extends "django_kie/base_ui.html" %}
{% load django_kie %}

{% block content_ui %}
<div class="container-fluid p-5">

    <h1 class="mb-4">{{ uploaded_file.filename }}</h1>
    {% comment %} <img src="{{ uploaded_file.thumbnail.url }}" alt="Thumbnail" class="img-fluid"> {% endcomment %}

    <form
        id="correction-form"
        hx-post="{% url 'django_kie:save_corrections' uploaded_file.id %}"
        hx-target="#submitSection"
        hx-swap="innerHTML"
    >
        <!-- Table for records with Position = NULL -->
        <input type="hidden" name="corrections_json" id="corrections-json">
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-primary text-white">
                <h4 class="mb-0">Document Records (Header)</h4>
            </div>
            <div class="card-body">
                <div id="tabulator-table-no-pos"></div>
            </div>
        </div>

        <!-- Table for records with Position NOT NULL -->
        <div class="card shadow-sm">
            <div class="card-header bg-success text-white">
                <h4 class="mb-0">Document Records (Positions)</h4>
            </div>
            <div class="card-body">
                <div id="tabulator-table-pos"></div>
            </div>
        </div>
        <br>

       <div class="mb-3">
            <label for="general-comment" class="form-label"><b>General Comment</b></label>
            <textarea
                class="form-control"
                id="general-comment"
                name="general_comment"
                rows="5"
                placeholder="Enter general comments here..."
            ></textarea>
        </div>
        <div id="submitSection">
            <button type="submit" class="btn btn-primary">Submit Corrections</button>
        </div>

    </form>

</div>
{% endblock %}

{% block extra_js %}
    <script>
        // Parse JSON passed from Django view
        var dataNoPos = JSON.parse('{{ records_no_position|escapejs }}');
        var dataPos = JSON.parse('{{ records_with_position|escapejs }}');
        function createTabulator(selector, data, pos) {
            let columns = [
                {
                    title: "Field Name",
                    field: "field_name",
                    headerFilter: "input",
                    headerTooltip: "The name of the document field"
                },
                {
                    title: "Value",
                    field: "value",
                    headerFilter: "input",
                    headerTooltip: "The extracted value from the document"
                },
                {
                    title: "Last Correction",
                    field: "last_correction",
                    headerFilter: "input",
                    headerTooltip: "The previous correction made for this field"
                },
                {
                    title: "User Corrections",
                    field: "user_corrections",
                    editor: "input",
                    headerFilter: "input",
                    headerTooltip: "Enter corrections to the extracted value",
                    editorParams: {
                        elementAttributes: { placeholder: "Type here...", class: "form-control form-control-sm" }
                    },
                    formatter: function(cell) {
                        let val = cell.getValue() || "";
                        let placeholder = val ? "" : "text-muted small";
                        let displayVal = val || "Enter correction...";

                        return `<div class="border rounded px-2 py-1 bg-white shadow-sm ${placeholder}" style="min-height:30px;">
                                    ${displayVal}
                                </div>`;
                    }
                },
                {
                    title: "Missing Value?",
                    field: "missing",
                    editor: true,
                    headerTooltip: "Check if the value is missing from the document",
                    formatter: function(cell) {
                        let checked = cell.getValue() ? "checked" : "";
                        return `<div class="form-check form-switch d-inline-block">
                                    <input class="form-check-input" type="checkbox" ${checked} style="cursor:pointer">
                                </div>`;
                    },
                    cellClick: function(e, cell) {
                        let val = cell.getValue();
                        cell.setValue(!val);
                    },
                    hozAlign: "center"
                },
                {
                    title: "Comment",
                    field: "comment",
                    editor: "input",
                    headerFilter: "input",
                    headerTooltip: "Add any additional comments or notes",
                    editorParams: {
                        elementAttributes: { placeholder: "Type here...", class: "form-control form-control-sm" }
                    },
                    formatter: function(cell) {
                        let val = cell.getValue() || "";
                        let placeholder = val ? "" : "text-muted small";
                        let displayVal = val || "Enter comment...";

                        return `<div class="border rounded px-2 py-1 bg-white shadow-sm ${placeholder}" style="min-height:30px;">
                                    ${displayVal}
                                </div>`;
                    }
                }
            ];
            if (pos === true) {
                columns.splice(1, 0, {
                    title: "Position",
                    field: "position",
                    headerFilter: "number",
                    sorter: "number",
                    width: 120,
                    headerTooltip: "The position number of the record in the document"
                });
            }

            return new Tabulator(selector, {
                data: data,
                layout: "fitDataFill",
                responsiveLayout: "collapse",
                pagination: "local",
                paginationSize: 10,
                movableColumns: true,
                resizableRows: true,
                rowHeight: 50,
                height: "400px",
                columns: columns,
                placeholder: "No records found",
            });
        }

        var tableNoPos = createTabulator("#tabulator-table-no-pos", dataNoPos, false);
        var tablePos = createTabulator("#tabulator-table-pos", dataPos, true);

        document.getElementById("correction-form").addEventListener("submit", function (event) {
            let allData = {
                no_position: tableNoPos.getData(),
                with_position: tablePos.getData()
            };

            document.getElementById("corrections-json").value = JSON.stringify(allData);
        });
    </script>
{% endblock %}