{#
    The winning-combination entry form for a race: one block per affected bet
    type (combinationRows from LiveRacingResultPresenter::buildCombinationEntryRows()),
    prefilled with each row's savedCombinations. Embedded by the race page
    (first result) and the Correct result page; override the `actions` block
    for the submit buttons.
    Vars: combinationRows, formAction, csrfToken, confirmText?, formTestid?
#}
<style>
/* Mobile: stack the winning-combination rows vertically. */
@media (max-width: 576px) {
    .combo-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }
    .combo-row .form-control {
        max-width: 100% !important;
        width: 100%;
    }
}
</style>
{% macro combo_row(row, idx, combo) %}
    {% if row.isOddEven %}
        <div class="d-flex flex-wrap align-items-center gap-2 combo-row" data-combo-row data-testid="combo-row-{{ row.id }}-{{ idx }}">
            <select name="combination_selection[{{ row.id }}][{{ idx }}]" class="form-select" style="max-width: 140px;"
                    data-testid="select-combo-selection-{{ row.id }}-{{ idx }}">
                <option value="">— winner —</option>
                <option value="odd" {{ combo and combo.selection == 'odd' ? 'selected' : '' }}>Odd</option>
                <option value="even" {{ combo and combo.selection == 'even' ? 'selected' : '' }}>Even</option>
            </select>
            <span class="fw-bold text-body-secondary">=</span>
            <input type="number" step="0.01" min="0" class="form-control" style="max-width: 120px;"
                   name="combination_dividend[{{ row.id }}][{{ idx }}]"
                   value="{{ combo ? combo.dividend : '' }}" placeholder="Dividend"
                   data-testid="input-combo-dividend-{{ row.id }}-{{ idx }}">
            <button type="button" class="btn btn-sm btn-link text-danger p-0" data-remove-combo>× remove</button>
        </div>
    {% else %}
        <div class="d-flex flex-wrap align-items-center gap-2 combo-row" data-combo-row data-testid="combo-row-{{ row.id }}-{{ idx }}">
            <div class="d-flex align-items-center">
                {% for slot in row.slots %}
                    {% set slotIdx = loop.index0 %}
                    {% if not loop.first %}<span class="fw-bold text-body-secondary">-</span>{% endif %}
                    <select name="combination[{{ row.id }}][{{ idx }}][{{ slotIdx }}]" class="form-select" style="max-width: 90px;"
                            title="{{ row.kind == 'multi' ? 'Leg' : 'Position' }} {{ loop.index }}"
                            data-testid="select-combo-{{ row.id }}-{{ idx }}-{{ slotIdx }}">
                        <option value="">—</option>
                        {% for h in slot.horses %}
                            <option value="{{ h.id }}" {{ combo and combo.horseIds[slotIdx] is defined and combo.horseIds[slotIdx] == h.id ? 'selected' : '' }}>{{ h.number }}{{ h.scratched ? ' [s]' : '' }}</option>
                        {% endfor %}
                    </select>
                {% endfor %}
            </div>
            <span class="fw-bold text-body-secondary">=</span>
            <input type="number" step="0.01" min="0" class="form-control" style="max-width: 120px;"
                   name="combination_dividend[{{ row.id }}][{{ idx }}]"
                   value="{{ combo ? combo.dividend : '' }}" placeholder="Dividend"
                   data-testid="input-combo-dividend-{{ row.id }}-{{ idx }}">
            <button type="button" class="btn btn-sm btn-link text-danger p-0" data-remove-combo>× remove</button>
        </div>
    {% endif %}
{% endmacro %}

    <form method="POST"
          action="{{ formAction }}"
          {% if confirmText is defined and confirmText %}onsubmit="return confirm('{{ confirmText|e('js') }}');"{% endif %}
          data-testid="{{ formTestid|default('result-form') }}">
        <input type="hidden" name="_token" value="{{ csrfToken }}">

        <div class="card mb-4">
            <div class="card-body">

                {% if combinationRows is not empty %}
                    <h3 class="wfbo-card-title" style="font-size: 14px;">Winning combinations</h3>
                    <p class="form-hint mb-3">
                        For each bet type, enter every winning combination (pick the horse for each
                        position / leg) and its dividend. Add a row per winning combination — that covers
                        dead heats too. Refund voids that bet type on this race.
                    </p>

                    <div class="d-flex flex-column gap-3 mb-3">
                        {% for row in combinationRows %}
                            <div class="combo-bettype" data-combo-bettype="{{ row.id }}"
                                 {% if row.kind == 'single' and not row.isOddEven %}data-combo-ordered{% endif %}
                                 data-testid="combo-bettype-{{ row.id }}">
                                <div class="d-flex align-items-center gap-3 mb-1">
                                    <label class="fw-semibold mb-0" style="min-width: 160px;">
                                        {{ row.label }}
                                    </label>
                                    {% if row.kind == 'single' and not row.isOddEven %}
                                        <label class="form-check-label d-flex align-items-center gap-1">
                                            <input type="checkbox" class="form-check-input" data-refund-toggle
                                                   name="refund[{{ row.id }}]" value="1" {{ row.refund ? 'checked' : '' }}
                                                   data-testid="checkbox-refund-{{ row.id }}">
                                            Refund
                                        </label>
                                    {% endif %}
                                </div>

                                <div class="d-flex flex-column gap-2" data-combo-rows>
                                    {% set saved = row.savedCombinations %}
                                    {% for combo in (saved is empty ? [null] : saved) %}
                                        {{ _self.combo_row(row, loop.index0, combo) }}
                                    {% endfor %}
                                </div>

                                <button type="button" class="btn btn-sm btn-outline-secondary mt-2" data-add-combo
                                        data-testid="btn-add-combo-{{ row.id }}">+ Add combination</button>

                                <template data-combo-template>{{ _self.combo_row(row, '__ROW__', null) }}</template>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}

                {% block actions %}
                    <button type="submit"
                            class="btn btn-admin-save"
                            data-testid="btn-save-result">
                        Save Result
                    </button>
                {% endblock %}

            </div>
        </div>
    </form>

    <script>
        (function () {
            // The single-race ordered bet types (Win, Forecast, Trifecta,
            // Quartet, Pentafecta, Super Six) all describe the same race, so
            // finish position N is the same horse in every one of them.
            // Picking a slot in one fills that slot (same row + position) in
            // every other ordered bet type that has it.
            var SLOT_RE = /^combination\[(\d+)\]\[(\d+)\]\[(\d+)\]$/;
            document.addEventListener('change', function (e) {
                var src = e.target;
                if (!src || src.tagName !== 'SELECT') { return; }
                if (!src.closest('.combo-bettype[data-combo-ordered]')) { return; }
                var m = (src.getAttribute('name') || '').match(SLOT_RE);
                if (!m) { return; }
                var rowIdx = m[2], slotIdx = m[3], val = src.value;
                document.querySelectorAll('.combo-bettype[data-combo-ordered] [data-combo-row] select').forEach(function (sel) {
                    if (sel === src) { return; }
                    var mm = (sel.getAttribute('name') || '').match(SLOT_RE);
                    if (!mm || mm[2] !== rowIdx || mm[3] !== slotIdx || sel.value === val) { return; }
                    var ok = val === '' || Array.prototype.some.call(sel.options, function (o) { return o.value === val; });
                    if (ok) { sel.value = val; }
                });
            });

            document.querySelectorAll('[data-combo-bettype]').forEach(function (block) {
                var list = block.querySelector('[data-combo-rows]');
                var tpl  = block.querySelector('[data-combo-template]');

                function nextIndex() {
                    var max = -1;
                    list.querySelectorAll('[data-combo-row]').forEach(function (r) {
                        r.querySelectorAll('[name]').forEach(function (f) {
                            var m = f.getAttribute('name').match(/\[(\d+)\]/g);
                            if (m && m.length) {
                                var n = parseInt(m[m.length === 1 ? 0 : 1].replace(/[\[\]]/g, ''), 10);
                                if (!isNaN(n) && n > max) max = n;
                            }
                        });
                    });
                    return max + 1;
                }

                block.querySelector('[data-add-combo]').addEventListener('click', function () {
                    var html = tpl.innerHTML.replace(/__ROW__/g, String(nextIndex()));
                    var wrap = document.createElement('div');
                    wrap.innerHTML = html.trim();
                    list.appendChild(wrap.firstElementChild);
                });

                list.addEventListener('click', function (e) {
                    var btn = e.target.closest('[data-remove-combo]');
                    if (!btn) return;
                    var rows = list.querySelectorAll('[data-combo-row]');
                    if (rows.length > 1) btn.closest('[data-combo-row]').remove();
                    else btn.closest('[data-combo-row]').querySelectorAll('select, input').forEach(function (f) { f.value = ''; });
                });

                var refund = block.querySelector('[data-refund-toggle]');
                if (refund) {
                    var sync = function () {
                        list.querySelectorAll('select, input').forEach(function (f) { f.disabled = refund.checked; });
                        block.querySelector('[data-add-combo]').disabled = refund.checked;
                    };
                    refund.addEventListener('change', sync);
                    sync();
                }
            });
        })();
    </script>