{% extends 'shop/base.html' %}
{% load i18n static %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'shop/backoffice.css' %}">
{% endblock %}

{% block content %}
{% include 'shop/_manage_header.html' with active='manage' %}
{% include 'shop/_section_tabs.html' %}

{% include 'shop/_stockrooms.html' %}

<div class="d-flex justify-content-between align-items-center mt-4 mb-2">
    <h4 class="m-0">{% trans "Fitted ships" %}</h4>
</div>
{% trans "Search ships…" as list_search_placeholder %}
<div data-table data-page-size="25">
    {% include 'shop/_list_search.html' with placeholder=list_search_placeholder %}
    {% include 'shop/_fitted_listings.html' %}
    <nav data-table-pager class="mt-2"></nav>
</div>

{% include 'shop/_source_picker.html' %}

<div class="modal fade" id="editFittedModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog"><div class="modal-content">
        <form method="post" id="editFittedForm">
            {% csrf_token %}
            <div class="modal-header">
                <h5 class="modal-title">{% trans "Edit" %} <span id="edit-fitted-name"></span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
            </div>
            <div class="modal-body">
                <label class="form-label">{% trans "Price" %}</label>
                <input type="number" min="0" name="price" id="edit-fitted-price" class="form-control" placeholder="{% trans 'ISK (0 = Ask)' %}">
                <div class="form-text" data-price-preview></div>
                <div class="form-text">{% trans "Manual price. 0 = Ask (contract / negotiate)." %}</div>
                <div class="form-check mt-3">
                    <input type="checkbox" class="form-check-input" name="persist" id="edit-fitted-persist">
                    <label class="form-check-label" for="edit-fitted-persist">{% trans "Keep listed when out of stock" %}</label>
                    <div class="form-text">{% trans "When the ship leaves the stockroom, keep it as a build-to-order listing instead of removing it." %}</div>
                </div>
                <label class="form-label mt-3">{% trans "Description" %}</label>
                <textarea name="description" id="edit-fitted-description" rows="4" class="form-control" placeholder="{% trans 'Optional. Markdown supported.' %}"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
                <button type="submit" class="btn btn-primary">{% trans "Save" %}</button>
            </div>
        </form>
    </div></div>
</div>

<div class="modal fade" id="editStockroomModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog"><div class="modal-content">
        <form method="post" id="editStockroomForm">
            {% csrf_token %}
            <div class="modal-header">
                <h5 class="modal-title">{% trans "Edit stockroom filter" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
            </div>
            <div class="modal-body">
                <label class="form-label">{% trans "Name filter" %}</label>
                <input type="text" name="name_filter" id="esr-name-filter" class="form-control" placeholder="{% trans 'e.g. [SALE] — blank lists every ship' %}">
                <div class="form-check mt-2">
                    <input type="checkbox" class="form-check-input" name="strip_marker" id="esr-strip">
                    <label class="form-check-label" for="esr-strip">{% trans "Strip the filter text from the shown ship name" %}</label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
                <button type="submit" class="btn btn-primary">{% trans "Save" %}</button>
            </div>
        </form>
    </div></div>
</div>

<script>
// Mirror of shop/formatting.py:format_isk — keep in sync with the Python version.
function formatIsk(amount) {
    amount = Math.floor(amount);
    const units = [[1e12, "T"], [1e9, "B"], [1e6, "M"], [1e3, "K"]];
    for (const [unit, suffix] of units) {
        if (amount >= unit) {
            const value = (amount / unit).toFixed(2).replace(/0+$/, "").replace(/\.$/, "");
            return value + suffix + " ISK";
        }
    }
    return amount.toLocaleString("en-US") + " ISK";
}

(function () {
    const fModal = document.getElementById("editFittedModal");
    if (fModal) {
        const form = document.getElementById("editFittedForm");
        const priceInput = document.getElementById("edit-fitted-price");
        const preview = fModal.querySelector("[data-price-preview]");
        function updatePreview() {
            const raw = priceInput.value.trim();
            const n = parseInt(raw, 10);
            if (raw === "" || isNaN(n)) preview.textContent = "";
            else if (n === 0) preview.textContent = "= Ask";
            else preview.textContent = "= " + formatIsk(n);
        }
        priceInput.addEventListener("input", updatePreview);
        document.querySelectorAll(".edit-fitted-btn").forEach(function (btn) {
            btn.addEventListener("click", function () {
                const d = btn.dataset;
                form.action = d.url;
                document.getElementById("edit-fitted-name").textContent = d.name;
                priceInput.value = d.price;
                document.getElementById("edit-fitted-persist").checked = d.persist === "1";
                document.getElementById("edit-fitted-description").value = d.description || "";
                updatePreview();
                bootstrap.Modal.getOrCreateInstance(fModal).show();
            });
        });
    }
    const srModal = document.getElementById("editStockroomModal");
    if (srModal) {
        const srForm = document.getElementById("editStockroomForm");
        document.querySelectorAll(".edit-sr-btn").forEach(function (btn) {
            btn.addEventListener("click", function () {
                const d = btn.dataset;
                srForm.action = d.url;
                document.getElementById("esr-name-filter").value = d.nameFilter || "";
                document.getElementById("esr-strip").checked = d.stripMarker === "1";
                bootstrap.Modal.getOrCreateInstance(srModal).show();
            });
        });
    }
})();
</script>
{% endblock %}

{% block extra_javascript %}
<script src="{% static 'shop/backoffice_tables.js' %}"></script>
{% endblock %}
