{% extends 'wfbo/_layout.html.twig' %}

{% block wfbo_title %}Race Details{% endblock %}

{% block wfbo_content %}

<style>
    /* Bootstrap's .d-flex carries !important, which would silently beat a
       JS-toggled .d-none on the same element - these fields need their own
       non-important flex layout so .d-none actually hides them. */
    .dividend-field,
    .dead-heat-field,
    .scratch-dividend-field {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    /* Mobile: stack finishing order and dividend rows vertically */
    @media (max-width: 576px) {
        .result-position-row {
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 6px !important;
        }
        .result-position-row .form-select {
            max-width: 100% !important;
            width: 100%;
        }
        .result-position-row .form-check-label {
            margin-left: 0 !important;
        }
        .dividend-row {
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 6px !important;
        }
        .dividend-row .form-hint {
            min-width: auto !important;
        }
        .dividend-row .form-control {
            max-width: 100% !important;
            width: 100%;
        }
        .dividend-row .form-check-label {
            align-items: flex-start !important;
        }
        .dividend-row .dividend-field,
        .dividend-row .dead-heat-field,
        .dividend-row .substitute-field,
        .dividend-row .scratch-dividend-field {
            display: flex !important;
            flex-direction: column;
            align-items: flex-start !important;
            width: 100%;
        }
        .dividend-row .dividend-field input,
        .dividend-row .dead-heat-field input,
        .dividend-row .substitute-field input,
        .dividend-row .scratch-dividend-field input {
            max-width: 100% !important;
            width: 100%;
        }
        .result-scratch-row {
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 6px !important;
        }
        .result-scratch-row select {
            max-width: 100% !important;
            width: 100%;
        }
    }
</style>

    {% for flash in app.flashes('success') %}
        <div class="alert alert-success mb-4" role="alert" data-testid="flash-success">{{ flash }}</div>
    {% endfor %}
    {% for flash in app.flashes('error') %}
        <div class="alert alert-danger mb-4" role="alert" data-testid="flash-error">{{ flash }}</div>
    {% endfor %}

    <div class="mb-4">
        <a href="{{ path('app_wfbo_event_show', {id: race.event.id}) }}"
           class="back-link">
            ← Back to Event
        </a>
    </div>

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

            <h2 class="wfbo-card-title mb-3">
                Race {{ race.raceNumber }}
            </h2>

            <div class="detail-grid mb-4">
                <div class="detail-item">
                    <div class="detail-label">Arena</div>
                    <div class="detail-value">{{ race.event.management.name }}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">Event Date</div>
                    <div class="detail-value">{{ race.event.eventDate|date('Y-m-d') }}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">Status</div>
                    <div class="detail-value">
                        {% if race.open %}
                            <span class="badge-role badge-role--active" data-testid="race-status">Open</span>
                        {% elseif race.closed %}
                            <span class="badge-role badge-role--suspended" data-testid="race-status">Closed</span>
                        {% else %}
                            <span class="badge-role badge-role--suspended" data-testid="race-status">Settled</span>
                        {% endif %}
                    </div>
                </div>
            </div>

            {% if race.event.videoUrl %}
                {% set embedUrl = race.event.videoUrl|replace({'watch?v=': 'embed/', 'youtu.be/': 'youtube.com/embed/'}) %}
                {% if 'embed/' not in embedUrl %}
                    {% set embedUrl = race.event.videoUrl %}
                {% endif %}
                <div class="mb-3" style="max-width: 560px;">
                    <div class="ratio ratio-16x9 rounded overflow-hidden">
                        <iframe src="{{ embedUrl }}?autoplay=1&controls=0&mute=0"
                                allow="autoplay; encrypted-media"
                                style="border:0;"
                                allowfullscreen></iframe>
                    </div>
                </div>
            {% endif %}

            {% if race.open %}
                <form method="POST"
                      action="{{ path('app_wfbo_event_race_close', {id: race.id}) }}"
                      onsubmit="return confirm('Close betting for this race? This cannot be undone.');"
                      class="m-0">
                    <input type="hidden" name="_token" value="{{ csrf_token('wfbo_event_race_close_' ~ race.id) }}">
                    <button type="submit"
                            class="btn-reject"
                            data-testid="btn-close-betting">
                        Close Betting
                    </button>
                </form>
            {% endif %}

        </div>
    </div>

    {% if race.open %}

    <div class="d-flex align-items-center justify-content-between mb-2">
        <h2 class="wfbo-card-title mb-0">Horses</h2>
        {% if not race.event.published %}
        <a href="{{ path('app_wfbo_event_race_horse_new', {id: race.id}) }}"
           class="pill-link--primary"
           data-testid="btn-new-horse">
            + Add Horse
        </a>
        {% endif %}
    </div>

    {% if not race.event.published %}
        <p class="form-hint mb-4">Scratch becomes available once the event is published.</p>
    {% endif %}

    {# Empty carrier form: checkboxes/Save button below reference it via the HTML5
       form="" attribute so they can submit together without nesting <form> tags
       around each row's own Delete form. #}
    <form id="horse-scratch-form"
          method="POST"
          action="{{ path('app_wfbo_event_race_horses_scratch', {id: race.id}) }}"
          style="display:none;">
        <input type="hidden" name="_token" value="{{ csrf_token('wfbo_event_race_horses_scratch_' ~ race.id) }}">
    </form>

    <div class="table-card">
        <div class="card-body p-0">

            {% if horses is empty %}
                <p class="td-empty--lg text-center" data-testid="empty-state-horses">
                    No horses added yet.
                </p>
            {% else %}
                <table class="w-100 stack-table" data-testid="horses-table">
                    <thead>
                        <tr class="thead-row--strong">
                            <th class="th-white">Horse #</th>
                            <th class="th-white">Name</th>
                            <th class="th-white">Jockey</th>
                            <th class="th-white">Trainer</th>
                            <th class="th-white">Status</th>
                            <th class="th-white">Scratch</th>
                            <th class="th-white">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for horse in horses %}
                        <tr class="table-row" data-testid="horse-row-{{ horse.id }}">
                            <td class="td-cell td-cell--dark fw-semibold" data-label="Horse #">{{ horse.horseNumber }}</td>
                            <td class="td-cell" data-label="Name">{{ horse.horseName }}</td>
                            <td class="td-cell" data-label="Jockey">{{ horse.horseJockey }}</td>
                            <td class="td-cell" data-label="Trainer">{{ horse.horseTrainer ?: '—' }}</td>
                            <td class="td-cell" data-label="Status">
                                {% if horse.active %}
                                    <span class="badge-role badge-role--active" data-testid="horse-status-{{ horse.id }}">Active</span>
                                {% else %}
                                    <span class="badge-role badge-role--suspended" data-testid="horse-status-{{ horse.id }}">Scratched</span>
                                {% endif %}
                            </td>
                            <td class="td-cell" data-label="Scratch">
                                {% if horse.active and race.event.published %}
                                    <input type="checkbox"
                                           class="form-check-input"
                                           name="scratch[{{ horse.id }}]"
                                           value="1"
                                           form="horse-scratch-form"
                                           data-testid="checkbox-scratch-{{ horse.id }}">
                                {% else %}
                                    —
                                {% endif %}
                            </td>
                            <td class="td-cell" data-label="Actions">
                                {% if not race.event.published %}
                                <div class="d-flex gap-2 align-items-center">
                                    <a href="{{ path('app_wfbo_event_race_horse_edit', {id: horse.id}) }}"
                                       class="pill-link--secondary"
                                       data-testid="btn-edit-horse-{{ horse.id }}">
                                        Edit
                                    </a>
                                    <form method="POST"
                                          action="{{ path('app_wfbo_event_race_horse_delete', {id: horse.id}) }}"
                                          onsubmit="return confirm('Delete this horse?');"
                                          class="m-0">
                                        <input type="hidden" name="_token" value="{{ csrf_token('wfbo_horse_delete_' ~ horse.id) }}">
                                        <button type="submit"
                                                class="btn-reject"
                                                data-testid="btn-delete-horse-{{ horse.id }}">
                                            Delete
                                        </button>
                                    </form>
                                </div>
                                {% else %}
                                    —
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>

                {% if race.event.published and horses|filter(h => h.active) is not empty %}
                    <div class="p-3">
                        <button type="submit"
                                form="horse-scratch-form"
                                class="btn btn-admin-save"
                                data-testid="btn-save-scratches">
                            Save Scratches
                        </button>
                    </div>
                {% endif %}
            {% endif %}

        </div>
    </div>

    {% endif %}{# /race.open #}

    <div class="d-flex align-items-center justify-content-between mb-2 mt-4">
        <h2 class="wfbo-card-title mb-0">Result</h2>
    </div>

    {% if race.hasResult %}

        <div class="card mb-4" data-testid="race-result-summary">
            <div class="card-body">
                <div class="detail-grid mb-0">
                    <div class="detail-item">
                        <div class="detail-label">Finishing Order</div>
                        <div class="detail-value" data-testid="race-result-text">
                            {% set position = 0 %}
                            {% for entry in race.result %}
                                {% set isContinuation = loop.index0 > 0 and entry.deadHeat is defined and entry.deadHeat and race.result[loop.index0 - 1].deadHeat is defined and race.result[loop.index0 - 1].deadHeat %}
                                {% if isContinuation %}
                                    = Horse #{{ entry.horseNumber }}
                                {% else %}
                                    {% set position = position + 1 %}
                                    {{ not loop.first ? ', ' : '' }}{{ position }}. Horse #{{ entry.horseNumber }}
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">Result Set At</div>
                        <div class="detail-value">{{ race.resultSetAt|date('Y-m-d H:i') }}</div>
                    </div>
                    {% set scratchedAfterClose = horses|filter(h => h.scratchedAfterClose) %}
                    {% if scratchedAfterClose is not empty %}
                        <div class="detail-item">
                            <div class="detail-label">Scratched After Close</div>
                            <div class="detail-value" data-testid="scratched-after-close-summary">
                                {% for horse in scratchedAfterClose %}
                                    {{ not loop.first ? ', ' : '' }}Horse #{{ horse.horseNumber }}{% if horse.substituteHorse %} (substitute: Horse #{{ horse.substituteHorse.horseNumber }}){% endif %}
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                    {% if dividendRows is not empty %}
                        <div class="detail-item">
                            <div class="detail-label">Dividends</div>
                            <div class="detail-value" data-testid="dividends-summary">
                                {% for row in dividendRows %}
                                    <div data-testid="dividend-summary-row-{{ row.id }}">
                                        {{ row.label }}{% if row.kind == 'multi' %} (whole combo){% endif %}:
                                        {% if row.refund %}
                                            Refunded
                                        {% elseif row.deadHeatDividendA is not null or row.deadHeatDividendB is not null %}
                                            Dead Heat {{ row.deadHeatDividendA }} / {{ row.deadHeatDividendB }}
                                        {% else %}
                                            {% set winnerNumber = race.result[0].horseNumber ?? null %}
                                            {% if row.kind == 'multi' and row.legPrefix is not empty and winnerNumber %}
                                                Dividend ({{ row.legPrefix }}{{ winnerNumber }}): {{ row.dividend }}
                                            {% else %}
                                                {{ row.dividend }}
                                            {% endif %}
                                            {%- if row.substituteDividend is not null %} (Substitute: {{ row.substituteDividend }}){% endif %}
                                            {%- if row.scratchDividends is not null and row.scratchDividends is not empty %}
                                                {% for horseId, div in row.scratchDividends %}
                                                    {% set scratchHorse = horses|filter(h => h.id == horseId)|first %}
                                                    {% set scratchNumber = scratchHorse ? scratchHorse.horseNumber : ('#' ~ horseId) %}
                                                    {% if row.legPrefix is not empty %}
                                                        Scratch ({{ row.legPrefix }}{{ scratchNumber }}): {{ div }}
                                                    {% else %}
                                                        Scratch Horse #{{ horseId }}: {{ div }}
                                                    {% endif %}
                                                    {% if not loop.last %}, {% endif %}
                                                {% endfor %}
                                            {% endif %}
                                        {% endif %}
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

    {% elseif race.closed %}

        {% set activeHorses = horses|filter(h => h.active) %}

        <form method="POST"
              action="{{ path('app_wfbo_event_race_result_save', {id: race.id}) }}"
              onsubmit="return confirm('Save this result? Saving locks the race as Settled and cannot be undone.');"
              data-testid="result-form">
            <input type="hidden" name="_token" value="{{ csrf_token('wfbo_event_race_result_' ~ race.id) }}">

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

                    <h3 class="wfbo-card-title" style="font-size: 14px;">Scratch after close</h3>
                    <p class="form-hint mb-3">
                        Tick any horse that withdrew after betting closed. A substitute can be assigned once
                        scratched here.
                    </p>

                    <div class="d-flex flex-column gap-2 mb-3">
                        {% for horse in horses %}
                            {% if horse.active %}
                                <div class="d-flex align-items-center gap-3 result-scratch-row" data-testid="result-scratch-row-{{ horse.id }}">
                                    <label class="form-check-label d-flex align-items-center gap-1">
                                        <input type="checkbox"
                                               class="form-check-input result-scratch-checkbox"
                                               name="scratch[{{ horse.id }}]"
                                               value="1"
                                               data-substitute-target="result-substitute-{{ horse.id }}"
                                               data-testid="checkbox-result-scratch-{{ horse.id }}">
                                        Horse #{{ horse.horseNumber }} ({{ horse.horseName }})
                                    </label>
                                    <select name="substitute[{{ horse.id }}]"
                                            id="result-substitute-{{ horse.id }}"
                                            class="form-select"
                                            style="display:none; max-width: 240px;"
                                            data-testid="select-substitute-{{ horse.id }}">
                                        <option value="">None</option>
                                        {% for other in activeHorses %}
                                            {% if other.id != horse.id %}
                                                <option value="{{ other.id }}">#{{ other.horseNumber }} ({{ other.horseName }})</option>
                                            {% endif %}
                                        {% endfor %}
                                    </select>
                                </div>
                            {% elseif horse.scratchedAfterClose %}
                                <div class="d-flex align-items-center gap-3 result-scratch-row" data-testid="result-scratch-row-{{ horse.id }}">
                                    <span class="form-hint">Horse #{{ horse.horseNumber }} ({{ horse.horseName }}) — Scratched</span>
                                    <select name="substitute[{{ horse.id }}]"
                                            class="form-select"
                                            style="max-width: 240px;"
                                            data-testid="select-substitute-{{ horse.id }}">
                                        <option value="">None</option>
                                        {% for other in activeHorses %}
                                            <option value="{{ other.id }}" {{ horse.substituteHorse and horse.substituteHorse.id == other.id ? 'selected' : '' }}>
                                                #{{ other.horseNumber }} ({{ other.horseName }})
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            {% else %}
                                <div class="d-flex align-items-center gap-3 result-scratch-row" data-testid="result-scratch-row-{{ horse.id }}">
                                    <span class="form-hint">Horse #{{ horse.horseNumber }} ({{ horse.horseName }}) — Scratched (before close)</span>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>

                    <h3 class="wfbo-card-title" style="font-size: 14px;">Finishing order</h3>
                    <p class="form-hint mb-3">
                        Fill positions starting from 1st, in order. Check "Dead heat with next" to mark two
                        adjacent finishers as tied.
                    </p>

                    <div class="d-flex flex-column gap-2 mb-3">
                        {% for i in 1..activeHorses|length %}
                            <div class="d-flex align-items-center gap-3 result-position-row" data-testid="result-position-row-{{ i }}">
                                <label class="form-hint mb-0" style="min-width: 48px;">{{ i }}{{ i == 1 ? 'st' : (i == 2 ? 'nd' : (i == 3 ? 'rd' : 'th')) }}</label>
                                <select name="finishers[{{ i }}]"
                                        class="form-select finisher-select"
                                        style="max-width: 280px;"
                                        data-position="{{ i }}"
                                        data-testid="select-finisher-{{ i }}">
                                    <option value="">-- none --</option>
                                    {% for horse in activeHorses %}
                                        <option value="{{ horse.id }}" data-horse-number="{{ horse.horseNumber }}">#{{ horse.horseNumber }} ({{ horse.horseName }})</option>
                                    {% endfor %}
                                </select>
                                {% if i < activeHorses|length %}
                                    <label class="form-check-label d-flex align-items-center gap-1">
                                        <input type="checkbox"
                                               class="form-check-input dead-heat-checkbox"
                                               name="dead_heat[{{ i }}]"
                                               value="1"
                                               data-position="{{ i }}"
                                               data-testid="checkbox-dead-heat-{{ i }}">
                                        Dead heat with next
                                    </label>
                                {% endif %}
                            </div>
                        {% endfor %}
                    </div>

                    {% if dividendRows is not empty %}
                        <h3 class="wfbo-card-title" style="font-size: 14px;">Dividends</h3>
                        <p class="form-hint mb-3">
                            Fill Dividend normally. If this race's result ends in a qualifying tie for a bet type,
                            fill both Dead Heat amounts instead and leave Dividend blank. Refund voids this bet
                            type on this race instead of paying a dividend. When a scratched horse in this race
                            has a substitute assigned and this race is the combo's last leg, also fill the
                            Substitute Dividend - combos rewritten onto the substitute pay it.
                        </p>

                        <div class="d-flex flex-column gap-2 mb-3">
                            {% for row in dividendRows %}
                                <div class="d-flex flex-wrap align-items-center gap-3 dividend-row"
                                     data-testid="dividend-row-{{ row.id }}"
                                     data-dividend-row
                                     data-kind="{{ row.kind }}"
                                     data-pick-count="{{ row.pickCount is not null ? row.pickCount : '' }}"
                                     data-odd-even="{{ row.isOddEven ? '1' : '0' }}"
                                     data-substitutes-last-leg="{{ row.substitutesOnLastLeg ? '1' : '0' }}"
                                     data-leg-prefix="{{ row.legPrefix }}">
                                    <label class="form-hint mb-0" style="min-width: 160px;">
                                        {{ row.label }}{% if row.kind == 'multi' %} (whole combo){% endif %}
                                    </label>
                                    <label class="form-check-label dividend-field" data-testid="dividend-field-{{ row.id }}">
                                        <span class="dividend-label" data-leg-prefix="{{ row.legPrefix }}">Dividend</span>
                                        <input type="number" step="0.01" min="0"
                                               name="dividend[{{ row.id }}]"
                                               class="form-control"
                                               style="max-width: 120px;"
                                               data-testid="input-dividend-{{ row.id }}">
                                    </label>
                                    {% if row.substitutesOnLastLeg %}
                                        <label class="form-check-label substitute-field d-none" data-testid="substitute-dividend-field-{{ row.id }}">
                                            Substitute Dividend
                                            <input type="number" step="0.01" min="0"
                                                   name="substitute_dividend[{{ row.id }}]"
                                                   class="form-control"
                                                   style="max-width: 120px;"
                                                   data-testid="input-substitute-dividend-{{ row.id }}">
                                        </label>
                                    {% endif %}
                                    {% if row.isScratchDividendType %}
                                        {% set scratchHorses = horses|filter(h => (h.active and not h.scratched) or h.scratchedAfterClose) %}
                                        {% for horse in scratchHorses %}
                                        <label class="form-check-label scratch-dividend-field d-none" data-testid="scratch-dividend-field-{{ row.id }}-{{ horse.id }}">
                                            Dividend ({{ row.legPrefix }}{{ horse.horseNumber }})
                                            <input type="number" step="0.01" min="0"
                                                   name="scratch_dividend[{{ row.id }}][{{ horse.id }}]"
                                                   class="form-control"
                                                   style="max-width: 120px;"
                                                   data-testid="input-scratch-dividend-{{ row.id }}-{{ horse.id }}">
                                        </label>
                                        {% endfor %}
                                    {% endif %}
                                    <label class="form-check-label dead-heat-field d-none" data-testid="dead-heat-a-field-{{ row.id }}">
                                        <span class="dead-heat-a-label" data-testid="dead-heat-a-label-{{ row.id }}">Dead Heat A</span>
                                        <input type="number" step="0.01" min="0"
                                               name="dead_heat_dividend_a[{{ row.id }}]"
                                               class="form-control"
                                               style="max-width: 120px;"
                                               data-testid="input-dead-heat-a-{{ row.id }}">
                                    </label>
                                    <label class="form-check-label dead-heat-field d-none" data-testid="dead-heat-b-field-{{ row.id }}">
                                        <span class="dead-heat-b-label" data-testid="dead-heat-b-label-{{ row.id }}">Dead Heat B</span>
                                        <input type="number" step="0.01" min="0"
                                               name="dead_heat_dividend_b[{{ row.id }}]"
                                               class="form-control"
                                               style="max-width: 120px;"
                                               data-testid="input-dead-heat-b-{{ row.id }}">
                                    </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"
                                                   name="refund[{{ row.id }}]"
                                                   value="1"
                                                   data-testid="checkbox-refund-{{ row.id }}">
                                            Refund
                                        </label>
                                    {% endif %}
                                </div>
                            {% endfor %}
                        </div>
                    {% endif %}

                    <button type="submit"
                            class="btn btn-admin-save"
                            data-testid="btn-save-result">
                        Save Result
                    </button>

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

        <script>
            document.querySelectorAll('.result-scratch-checkbox').forEach(function (checkbox) {
                checkbox.addEventListener('change', function () {
                    var select = document.getElementById(checkbox.getAttribute('data-substitute-target'));
                    if (select) {
                        select.style.display = checkbox.checked ? '' : 'none';
                    }
                });
            });

            // Dividend fields react to the finishers/dead-heat picks: a bet
            // type only shows Dead Heat A/B (instead of the plain Dividend)
            // once a dead heat is actually marked at a position that matters
            // to it - mirrors the server's affectedByDeadHeat rule exactly
            // (single-kind: tie index within pickCount; multi-kind: tie at
            // 1st place only). Labels name the two tied horses directly
            // instead of the arbitrary "A"/"B" once they're picked.
            //
            // Multi-kind rows additionally show a Substitute Dividend input
            // while at least one horse in this race is scratched after close
            // WITH a substitute assigned - rewritten combos pay it.
            (function () {
                var dividendRows = document.querySelectorAll('[data-dividend-row]');
                if (!dividendRows.length) return;

                var finisherSelects   = document.querySelectorAll('.finisher-select');
                var deadHeatCheckboxes = document.querySelectorAll('.dead-heat-checkbox');
                var scratchCheckboxes  = document.querySelectorAll('.result-scratch-checkbox');
                var substituteSelects  = document.querySelectorAll('select[data-testid^="select-substitute-"]');

                function qualifyingSubstituteExists() {
                    for (var i = 0; i < substituteSelects.length; i++) {
                        if (!substituteSelects[i].value) continue;
                        var testId = substituteSelects[i].getAttribute('data-testid') || '';
                        var horseId = testId.replace('select-substitute-', '');
                        var checkbox = document.querySelector('[data-testid="checkbox-result-scratch-' + horseId + '"]');
                        if (!checkbox || checkbox.checked) return true;
                    }
                    return false;
                }

                function currentDeadHeatPosition() {
                    for (var i = 0; i < deadHeatCheckboxes.length; i++) {
                        if (deadHeatCheckboxes[i].checked) {
                            return parseInt(deadHeatCheckboxes[i].getAttribute('data-position'), 10);
                        }
                    }
                    return null;
                }

                function horseNumberAtPosition(position) {
                    var select = document.querySelector('.finisher-select[data-position="' + position + '"]');
                    if (!select || !select.value) return null;
                    var option = select.querySelector('option[value="' + select.value + '"]');
                    return option ? option.getAttribute('data-horse-number') : null;
                }

                function updateDividendFields() {
                    var position = currentDeadHeatPosition();
                    var hasSubstitute = qualifyingSubstituteExists();

                    dividendRows.forEach(function (row) {
                        var kind         = row.getAttribute('data-kind');
                        var pickCount    = row.getAttribute('data-pick-count');
                        var isOddEven    = row.getAttribute('data-odd-even') === '1';
                        var canSubstitute = row.getAttribute('data-substitutes-last-leg') === '1';

                        var affected = false;
                        if (position !== null && !isOddEven) {
                            affected = kind === 'multi'
                                ? position === 1
                                : (pickCount !== '' && position <= parseInt(pickCount, 10));
                        }

                        var dividendField    = row.querySelector('.dividend-field');
                        var deadHeatFields   = row.querySelectorAll('.dead-heat-field');
                        var substituteFields = row.querySelectorAll('.substitute-field');
                        var scratchDivFields = row.querySelectorAll('.scratch-dividend-field');

                        if (dividendField) {
                            dividendField.classList.toggle('d-none', affected);
                        }
                        deadHeatFields.forEach(function (el) {
                            el.classList.toggle('d-none', !affected);
                        });
                        substituteFields.forEach(function (el) {
                            el.classList.toggle('d-none', !(canSubstitute && hasSubstitute));
                        });
                        scratchDivFields.forEach(function (el) {
                            var testId = el.getAttribute('data-testid') || '';
                            var parts = testId.split('-');
                            var horseId = parts[parts.length - 1];
                            var checkbox = document.querySelector('[data-testid="checkbox-result-scratch-' + horseId + '"]');
                            var isScratched;
                            if (checkbox) {
                                isScratched = checkbox.checked;
                            } else {
                                // No checkbox — pre-scratched from a previous save
                                isScratched = document.querySelector('[data-testid="select-substitute-' + horseId + '"]') !== null;
                            }
                            el.classList.toggle('d-none', !isScratched);
                        });

                        // Update the plain dividend label with the combination for multi-race types
                        var dividendLabel = row.querySelector('.dividend-label');
                        if (dividendLabel) {
                            var prefix = dividendLabel.getAttribute('data-leg-prefix') || '';
                            if (kind === 'multi' && prefix) {
                                var firstHorse = horseNumberAtPosition(1);
                                dividendLabel.textContent = firstHorse
                                    ? 'Dividend (' + prefix + firstHorse + ')'
                                    : 'Dividend';
                            }
                        }

                        if (affected) {
                            var horseA = horseNumberAtPosition(position);
                            var horseB = horseNumberAtPosition(position + 1);

                            function fullCombinationForDeadHeat(deadHeatHorse) {
                                var parts = [];
                                var maxPos = kind === 'multi' ? 1 : (pickCount !== '' ? parseInt(pickCount, 10) : position + 1);
                                for (var p = 1; p <= maxPos; p++) {
                                    var hn = null;
                                    if (p === position) {
                                        hn = horseA === deadHeatHorse ? horseA : horseB;
                                    } else if (p === position + 1) {
                                        hn = horseB === deadHeatHorse ? horseB : horseA;
                                    } else {
                                        hn = horseNumberAtPosition(p);
                                    }
                                    if (hn) parts.push(hn);
                                }
                                return parts.join('-');
                            }

                            var labelA = row.querySelector('.dead-heat-a-label');
                            var labelB = row.querySelector('.dead-heat-b-label');
                            if (labelA) labelA.textContent = 'Dividend (' + fullCombinationForDeadHeat(horseA) + ')';
                            if (labelB) labelB.textContent = 'Dividend (' + fullCombinationForDeadHeat(horseB) + ')';
                        }
                    });
                }

                finisherSelects.forEach(function (el) { el.addEventListener('change', updateDividendFields); });
                deadHeatCheckboxes.forEach(function (el) { el.addEventListener('change', updateDividendFields); });
                scratchCheckboxes.forEach(function (el) { el.addEventListener('change', updateDividendFields); });
                substituteSelects.forEach(function (el) { el.addEventListener('change', updateDividendFields); });

                updateDividendFields();
            })();
        </script>

    {% else %}

        <p class="form-hint mb-4">Close betting to enter the result.</p>

    {% endif %}

{% endblock %}