{% load i18n %}
<div class="modal fade" id="addStockroomModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="post" action="{% url 'backoffice:add_stockroom' shop.pk %}">
                {% csrf_token %}
                <div class="modal-header">
                    <h5 class="modal-title">{% trans "Add stockroom" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">{% trans "Character" %}</label>
                        <select name="character_id" id="src-character" class="form-select" required></select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{% trans "Station" %}</label>
                        <select name="location_id" id="src-station" class="form-select" required></select>
                    </div>
                    <div class="mb-1">
                        <label class="form-label">{% trans "Container" %}</label>
                        <select name="container_item_id" id="src-container" class="form-select"></select>
                    </div>
                    <div class="form-text">{% trans "Adding a stockroom lists every hull found there and computes its stock." %}</div>
                    <hr>
                    <label class="form-label d-block">{% trans "Default price for new hulls" %}</label>
                    <div class="btn-group mb-2" role="group">
                        <input type="radio" class="btn-check" name="price_mode" id="sr-pm-ask" value="fixed" autocomplete="off" checked>
                        <label class="btn btn-outline-theme btn-sm" for="sr-pm-ask">{% trans "Ask" %}</label>
                        <input type="radio" class="btn-check" name="price_mode" id="sr-pm-buy" value="jita_buy_pct" autocomplete="off">
                        <label class="btn btn-outline-theme btn-sm" for="sr-pm-buy">{% trans "% Jita Buy" %}</label>
                        <input type="radio" class="btn-check" name="price_mode" id="sr-pm-sell" value="jita_sell_pct" autocomplete="off">
                        <label class="btn btn-outline-theme btn-sm" for="sr-pm-sell">{% trans "% Jita Sell" %}</label>
                    </div>
                    <div data-price-pct>
                        <div class="input-group">
                            <input type="number" min="0" step="0.01" name="price_pct" class="form-control" placeholder="{% trans 'Percent, e.g. 90' %}">
                            <span class="input-group-text">%</span>
                        </div>
                    </div>
                    <div class="form-text">{% trans "Only newly-listed hulls get this price; existing hulls keep theirs." %}</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 "Add stockroom" %}</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
(function () {
    const TREE = {{ source_tree_json|safe }};
    const $c = document.getElementById("src-character"),
          $s = document.getElementById("src-station"),
          $k = document.getElementById("src-container");
    const opt = (v, l) => { const o = document.createElement("option"); o.value = v; o.textContent = l; return o; };
    const curC = () => TREE.find(c => String(c.character_id) === $c.value);
    const curS = () => { const c = curC(); return c && c.stations.find(s => String(s.location_id) === $s.value); };
    function fillK() {
        $k.innerHTML = ""; $k.appendChild(opt("", "{% trans 'Whole station' %}"));
        const s = curS(); (s ? s.containers : []).forEach(ct => $k.appendChild(opt(ct.item_id, ct.name)));
    }
    function fillS() {
        $s.innerHTML = ""; const c = curC();
        (c ? c.stations : []).forEach(s => $s.appendChild(opt(s.location_id, s.name))); fillK();
    }
    function fillC() {
        $c.innerHTML = ""; TREE.forEach(c => $c.appendChild(opt(c.character_id, c.character_name))); fillS();
    }
    $c.addEventListener("change", fillS); $s.addEventListener("change", fillK); fillC();
})();
</script>
