{% extends "securityaudit/base.html" %}
{% load securityaudit_extras %}
{% block securityaudit_content %}
<div class="d-flex justify-content-end mb-3">
    <button type="button" class="btn btn-primary" id="add-exception-trigger">Add Financial Exception</button>
</div>

<div class="card">
    <div class="table-responsive">
        <table class="table table-striped table-hover mb-0">
            <thead>
                <tr>
                    <th>Type</th>
                    <th>Entity</th>
                    <th>Label</th>
                    <th>Active</th>
                    <th>Notes</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
            {% for row in rows %}
                <tr>
                    <td>{{ row.get_entity_type_display }}</td>
                    <td>
                        <div class="d-flex align-items-center gap-2">
                            {% with logo=row.entity_type|entity_image_url:row.entity_id %}
                            {% if logo %}
                            <img src="{{ logo }}" alt="" width="32" height="32" class="rounded" />
                            {% endif %}
                            {% endwith %}
                            <div>
                                <div class="fw-semibold">{{ exception_names|get:row.entity_id|default:row.entity_id }}</div>
                                <div class="small text-muted">#{{ row.entity_id }}</div>
                            </div>
                        </div>
                    </td>
                    <td>{{ row.label|default:"-" }}</td>
                    <td>{{ row.is_active|yesno:"Yes,No" }}</td>
                    <td>{{ row.notes|default:"-" }}</td>
                    <td>
                        <div class="d-flex gap-1">
                            <a href="{% url 'securityaudit:financial_exception_edit' row.id %}" class="btn btn-sm btn-primary">Edit</a>
                            <form method="post" action="{% url 'securityaudit:financial_exception_delete' row.id %}">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                            </form>
                        </div>
                    </td>
                </tr>
            {% empty %}
                <tr><td colspan="6">No financial exceptions configured.</td></tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<div class="modal" id="addExceptionModal" tabindex="-1" aria-labelledby="addExceptionModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header position-relative">
                <h5 class="modal-title" id="addExceptionModalLabel">Add Financial Exception</h5>
                <button type="button" class="btn btn-danger" data-close aria-label="Close" style="font-size: 1.25rem; line-height: 1; padding: .25rem .5rem; position: absolute; top: .5rem; right: .5rem;">&times;</button>
            </div>
            <form id="exception-add-form" method="post" action="{% url 'securityaudit:financial_exception_add' %}">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label" for="entity-search">Search EVE entity</label>
                            <input type="text" id="entity-search" class="form-control" placeholder="Start typing a character or corporation..." autocomplete="off" />
                            <div id="entity-search-results" class="list-group mt-1"></div>
                        </div>
                        {% for field in form %}
                        {% if field.name == "entity_type" or field.name == "entity_id" %}
                            <div style="display: none;">{{ field }}</div>
                        {% else %}
                        <div class="col-12">
                            <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
                            {{ field }}
                            {% if field.errors %}
                            <div class="text-danger small mt-1">{{ field.errors|join:", " }}</div>
                            {% endif %}
                        </div>
                        {% endif %}
                        {% endfor %}
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-light" data-close>Close</button>
                    <button type="submit" class="btn btn-primary">Create</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
(function () {
    const searchInput = document.getElementById("entity-search");
    const resultsBox = document.getElementById("entity-search-results");
    const typeSelect = document.getElementById("id_entity_type");
    const idInput = document.getElementById("id_entity_id");
    const labelInput = document.getElementById("id_label");
    const isActiveInput = document.getElementById("id_is_active");
    const exceptionForm = document.getElementById("exception-add-form");
    if (!searchInput || !resultsBox || !typeSelect || !idInput || !exceptionForm) return;

    let debounceTimer;
    searchInput.addEventListener("input", () => {
        clearTimeout(debounceTimer);
        const term = searchInput.value.trim();
        if (term.length < 2) {
            resultsBox.innerHTML = "";
            return;
        }
        debounceTimer = setTimeout(() => {
            fetch("{% url 'securityaudit:financial_exception_autocomplete' %}?q=" + encodeURIComponent(term))
                .then(r => r.json())
                .then(data => {
                    resultsBox.innerHTML = "";
                    function populateForm(item, includeLabel) {
                        typeSelect.value = item.type;
                        idInput.value = item.id;
                        searchInput.value = item.name;
                        if (labelInput) {
                            labelInput.value = includeLabel ? item.name : "";
                        }
                        if (isActiveInput) {
                            isActiveInput.checked = true;
                        }
                    }

                    (data.results || []).forEach(item => {
                        const row = document.createElement("div");
                        row.className = "list-group-item list-group-item-action d-flex align-items-center gap-2";
                        row.style.cursor = "pointer";
                        if (item.image_url) {
                            const img = document.createElement("img");
                            img.src = item.image_url;
                            img.alt = "";
                            img.width = 32;
                            img.height = 32;
                            img.className = "rounded";
                            row.appendChild(img);
                        }
                        const meta = document.createElement("div");
                        meta.className = "me-auto";
                        let details = item.type + " #" + item.id;
                        if (item.type === "character") {
                            const affiliations = [item.corp_name, item.alliance_name].filter(Boolean).join(" / ");
                            if (affiliations) {
                                details += " • " + affiliations;
                            }
                        }
                        meta.innerHTML = "<div class=\"fw-semibold\">" + item.name + "</div><div class=\"small text-muted text-capitalize\">" + details + "</div>";
                        row.appendChild(meta);

                        const addBtn = document.createElement("button");
                        addBtn.type = "button";
                        addBtn.className = "btn btn-sm btn-success";
                        addBtn.textContent = "Add";
                        addBtn.addEventListener("click", (e) => {
                            e.stopPropagation();
                            populateForm(item, true);
                            resultsBox.innerHTML = "";
                            if (labelInput) {
                                labelInput.focus();
                            }
                        });
                        row.appendChild(addBtn);

                        row.addEventListener("click", () => {
                            populateForm(item, false);
                            resultsBox.innerHTML = "";
                        });
                        resultsBox.appendChild(row);
                    });
                })
                .catch(() => { resultsBox.innerHTML = ""; });
        }, 300);
    });
})();

(function () {
    const modalEl = document.getElementById("addExceptionModal");
    const trigger = document.getElementById("add-exception-trigger");
    const closeBtns = modalEl ? modalEl.querySelectorAll("[data-close]") : [];
    if (!modalEl) return;

    function openModal() {
        modalEl.style.setProperty("display", "block", "important");
        modalEl.classList.add("show");
        modalEl.setAttribute("aria-hidden", "false");
    }

    function closeModal() {
        modalEl.classList.remove("show");
        modalEl.style.setProperty("display", "none", "important");
        modalEl.setAttribute("aria-hidden", "true");
    }

    if (trigger) {
        trigger.addEventListener("click", openModal);
    }
    closeBtns.forEach(btn => btn.addEventListener("click", closeModal));
})();
</script>
{% endblock %}