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

{% block wfbo_title %}Event — {{ event.eventDate|date('F j, Y') }}{% endblock %}

{% block wfbo_content %}

    {% set readOnly = isPast or isLocked %}

    {% 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_karera_events') }}"
           class="back-link">
            ← Back to Events
        </a>
    </div>

    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h1 style="margin-bottom: 4px; color: #000;" data-testid="event-date">{{ event.eventDate|date('F j, Y') }}</h1>
            <p class="wfbo-card-desc mb-0" data-testid="event-arena">{{ event.arena.name }} — {{ event.numberOfRaces }} race(s) {% if isLocked %}<span class="badge bg-danger ms-2" data-testid="event-locked-badge">Locked</span>{% endif %}</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ path('app_wfbo_karera_event_results', {eventId: event.id}) }}"
               class="pill-link--secondary"
               data-testid="btn-view-results">
                Results
            </a>
            {% if not readOnly %}
            <form method="POST"
                  action="{{ path('app_wfbo_karera_race_add', {id: event.id}) }}"
                  class="m-0">
                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_karera_race_add_' ~ event.id) }}">
                <button type="submit"
                        class="pill-link--primary"
                        data-testid="btn-add-race">
                    + Add Race
                </button>
            </form>
            <a href="{{ path('app_wfbo_karera_event_edit', {id: event.id}) }}"
               class="pill-link--secondary"
               data-testid="btn-edit-event">
                Edit Event
            </a>
            {% endif %}
            <form method="POST"
                  action="{{ path('app_wfbo_karera_event_lock', {id: event.id}) }}"
                  class="m-0">
                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_karera_event_lock_' ~ event.id) }}">
                <button type="submit"
                        class="{{ isLocked ? 'pill-link--danger' : 'pill-link--secondary' }}"
                        data-testid="btn-lock-event">
                    {{ isLocked ? 'Unlock Event' : 'Lock Event' }}
                </button>
            </form>
        </div>
    </div>

    <div class="row" data-testid="races-grid">
        {% for race in races %}
        <div class="col-md-4 mb-4">
            <div class="card race-card" data-testid="race-card-{{ race.id }}">
                <div class="card-body">

                    <div class="race-card__header">
                        <h2 class="wfbo-card-title mb-0">Race {{ race.raceNumber }}</h2>
                        {% set activeCount = entryCounts[race.id] ?? 0 %}
                        {% set totalCount = entryTotalCounts[race.id] ?? 0 %}
                        {% set scratchedCount = totalCount - activeCount %}
                        <span class="race-card__stat" data-testid="entry-count-{{ race.id }}">
                            {{ activeCount }} entr{{ activeCount == 1 ? 'y' : 'ies' }}{% if scratchedCount > 0 %}, {{ scratchedCount }} scratched{% endif %}
                        </span>
                    </div>

                    <div class="race-card__divider"></div>

                    <div class="race-card__betting">
                        <span class="race-card__betting-label">Betting Status</span>
                        {% if isPast %}
                            <span class="race-card__betting-select {{ race.bettingOpen ? 'race-card__betting-select--open' : 'race-card__betting-select--closed' }}" data-testid="betting-status-{{ race.id }}">{{ race.bettingOpen ? 'Open' : 'Closed' }}</span>
                        {% elseif race.bettingOpen %}
                            <form method="POST"
                                  action="{{ path('app_wfbo_karera_race_betting_status', {eventId: event.id, raceId: race.id}) }}"
                                  class="m-0"
                                  onsubmit="return confirm('Close betting for Race {{ race.raceNumber }}? This cannot be undone.');">
                                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_karera_race_betting_' ~ race.id) }}">
                                <select name="status"
                                        class="race-card__betting-select race-card__betting-select--open"
                                        onchange="this.form.submit()"
                                        aria-label="Betting status for Race {{ race.raceNumber }}"
                                        data-testid="betting-status-{{ race.id }}">
                                    <option value="open" selected>Open</option>
                                    <option value="closed">Closed</option>
                                </select>
                            </form>
                        {% else %}
                            <span class="race-card__betting-select race-card__betting-select--closed" data-testid="betting-status-{{ race.id }}">Closed</span>
                        {% endif %}
                    </div>

                    <div class="race-card__bet-types" data-testid="bet-types-{{ race.id }}">
                        {% for betType in singleRaceBetTypes %}
                            {% set offering = offeringsByRace[race.id][betType.code] ?? null %}
                            <div class="race-card__bet-type-row" data-testid="bet-type-row-{{ race.id }}-{{ betType.code }}">
                                <span class="race-card__bet-type-label">{{ betType.label }}</span>
                                {% if offering %}
                                    <div class="d-flex align-items-center gap-2">
                                        {% if not readOnly and race.bettingOpen %}
                                            <form method="POST"
                                                  action="{{ path('app_wfbo_karera_bet_offering_status', {eventId: event.id, offeringId: offering.id}) }}"
                                                  class="m-0"
                                                  data-no-loading>
                                                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_karera_bet_offering_status_' ~ offering.id) }}">
                                                <select name="status"
                                                        class="race-card__bet-type-status {{ offering.open ? 'race-card__bet-type-status--open' : 'race-card__bet-type-status--closed' }}"
                                                        onchange="if(confirm('Change {{ betType.label }} status for Race {{ race.raceNumber }}?')){this.form.submit();}else{this.value='{{ offering.open ? 'open' : 'closed' }}';}"
                                                        aria-label="{{ betType.label }} status for Race {{ race.raceNumber }}"
                                                        data-testid="bet-type-status-{{ offering.id }}">
                                                    <option value="open" {{ offering.open ? 'selected' : '' }}>Open</option>
                                                    <option value="closed" {{ offering.open ? '' : 'selected' }}>Closed</option>
                                                </select>
                                            </form>
                                            <form method="POST"
                                                  action="{{ path('app_wfbo_karera_bet_offering_delete', {eventId: event.id, offeringId: offering.id}) }}"
                                                  onsubmit="return confirm('Remove {{ betType.label }} from Race {{ race.raceNumber }}?');"
                                                  class="m-0">
                                                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_karera_bet_offering_delete_' ~ offering.id) }}">
                                                <button type="submit"
                                                        class="race-card__bet-type-remove"
                                                        data-testid="btn-remove-bet-type-{{ offering.id }}">
                                                    Remove
                                                </button>
                                            </form>
                                        {% else %}
                                            <span class="race-card__bet-type-status {{ offering.open ? 'race-card__bet-type-status--open' : 'race-card__bet-type-status--closed' }}" data-testid="bet-type-status-{{ offering.id }}">
                                                {{ offering.open ? 'Open' : 'Closed' }}
                                            </span>
                                        {% endif %}
                                    </div>
                                {% else %}
                                    {% set eligible = (entryCounts[race.id] ?? 0) >= betType.minStarters %}
                                    {% if not readOnly and race.bettingOpen %}
                                        <form method="POST"
                                              action="{{ path('app_wfbo_karera_bet_offering_new', {eventId: event.id}) }}"
                                              class="m-0">
                                            <input type="hidden" name="_token" value="{{ csrf_token('wfbo_karera_bet_offering_new_' ~ event.id) }}">
                                            <input type="hidden" name="bet_type" value="{{ betType.code }}">
                                            <input type="hidden" name="race_ids[]" value="{{ race.id }}">
                                            <button type="submit"
                                                    class="race-card__bet-type-enable"
                                                    {{ eligible ? '' : 'disabled' }}
                                                    title="{{ eligible ? 'Enable ' ~ betType.label : 'Needs at least ' ~ betType.minStarters ~ ' starters (has ' ~ (entryCounts[race.id] ?? 0) ~ ')' }}"
                                                    data-testid="btn-enable-bet-type-{{ race.id }}-{{ betType.code }}">
                                                Enable
                                            </button>
                                        </form>
                                    {% endif %}
                                {% endif %}
                            </div>
                        {% endfor %}
                    </div>

                    <div class="race-card__actions">
                        <div class="dropdown">
                            <button class="btn btn-actions-trigger dropdown-toggle"
                                    type="button"
                                    data-bs-toggle="dropdown"
                                    aria-expanded="false"
                                    data-testid="btn-actions-race-{{ race.id }}">
                                Actions
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end dropdown-menu--light">
                                <li>
                                    <a class="dropdown-item--view"
                                       href="{{ path('app_wfbo_karera_race_show', {eventId: event.id, raceId: race.id}) }}"
                                       data-testid="btn-view-race-{{ race.id }}">
                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4Z"/></svg>
                                        Manage Entries
                                    </a>
                                </li>
                                <li><hr class="dropdown-divider dropdown-divider--light"></li>
                                {% if not readOnly %}
                                <li>
                                    <form method="POST"
                                          action="{{ path('app_wfbo_karera_race_delete', {eventId: event.id, raceId: race.id}) }}"
                                          onsubmit="return confirm('Delete Race {{ race.raceNumber }} and all its entries?');"
                                          class="m-0">
                                        <input type="hidden" name="_token" value="{{ csrf_token('wfbo_karera_race_delete_' ~ race.id) }}">
                                        <button type="submit"
                                                class="dropdown-item--danger"
                                                data-testid="btn-delete-race-{{ race.id }}">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
                                            Delete Race
                                        </button>
                                    </form>
                                </li>
                                {% endif %}
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        {% endfor %}
    </div>

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

            <div class="d-flex align-items-center justify-content-between p-4 pb-0">
                <h2 class="wfbo-card-title mb-0">Multi-Race Bets</h2>
                {% if not readOnly %}
                <button type="button"
                        class="pill-link--primary"
                        data-bs-toggle="modal"
                        data-bs-target="#addMultiRaceBetModal"
                        data-testid="btn-add-multi-race-bet">
                    + Add Multi-Race Bet
                </button>
                {% endif %}
            </div>

            {% if multiRaceOfferings is empty %}
                <p class="td-empty--lg text-center" data-testid="empty-state-multi-bets">
                    No multi-race bets configured yet.
                </p>
            {% else %}
                <div data-testid="multi-race-bets-list">
                    {% for offering in multiRaceOfferings %}
                        {% set anyLegClosed = false %}
                        {% for leg in offering.legs %}
                            {% if not leg.race.bettingOpen %}
                                {% set anyLegClosed = true %}
                            {% endif %}
                        {% endfor %}
                        <div class="multi-race-bet-row" data-testid="multi-race-bet-row-{{ offering.id }}">
                            <div>
                                <div class="multi-race-bet-label">{{ offering.betType.label }}</div>
                                <div class="multi-race-bet-legs">
                                    Races {{ offering.legs|map(leg => leg.race.raceNumber)|join(' → ') }}
                                </div>
                            </div>
                            <div class="multi-race-bet-actions">
                                {% if readOnly %}
                                    <span class="race-card__bet-type-status {{ offering.open ? 'race-card__bet-type-status--open' : 'race-card__bet-type-status--closed' }}" data-testid="multi-bet-status-{{ offering.id }}">
                                        {{ offering.open ? 'Open' : 'Closed' }}
                                    </span>
                                {% elseif not anyLegClosed %}
                                    <form method="POST"
                                          action="{{ path('app_wfbo_karera_bet_offering_status', {eventId: event.id, offeringId: offering.id}) }}"
                                          class="m-0"
                                          data-no-loading>
                                        <input type="hidden" name="_token" value="{{ csrf_token('wfbo_karera_bet_offering_status_' ~ offering.id) }}">
                                        <select name="status"
                                                class="race-card__bet-type-status {{ offering.open ? 'race-card__bet-type-status--open' : 'race-card__bet-type-status--closed' }}"
                                                onchange="if(confirm('Change {{ offering.betType.label }} status?')){this.form.submit();}else{this.value='{{ offering.open ? 'open' : 'closed' }}';}"
                                                aria-label="{{ offering.betType.label }} status"
                                                data-testid="multi-bet-status-{{ offering.id }}">
                                            <option value="open" {{ offering.open ? 'selected' : '' }}>Open</option>
                                            <option value="closed" {{ offering.open ? '' : 'selected' }}>Closed</option>
                                        </select>
                                    </form>
                                {% else %}
                                    <span class="race-card__bet-type-status {{ offering.open ? 'race-card__bet-type-status--open' : 'race-card__bet-type-status--closed' }}" data-testid="multi-bet-status-{{ offering.id }}">
                                        {{ offering.open ? 'Open' : 'Closed' }}
                                    </span>
                                {% endif %}
                                {% if not readOnly %}
                                <div class="dropdown">
                                    <button class="btn btn-actions-trigger dropdown-toggle"
                                            type="button"
                                            data-bs-toggle="dropdown"
                                            aria-expanded="false"
                                            data-testid="btn-actions-multi-bet-{{ offering.id }}">
                                        Actions
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu--light">
                                        <li>
                                            <form method="POST"
                                                  action="{{ path('app_wfbo_karera_bet_offering_delete', {eventId: event.id, offeringId: offering.id}) }}"
                                                  onsubmit="return confirm('Delete {{ offering.betType.label }}?');"
                                                  class="m-0">
                                                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_karera_bet_offering_delete_' ~ offering.id) }}">
                                                <button type="submit"
                                                        class="dropdown-item--danger"
                                                        data-testid="btn-delete-multi-bet-{{ offering.id }}">
                                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
                                                    Delete
                                                </button>
                                            </form>
                                        </li>
                                    </ul>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}

        </div>
    </div>

    {# ── Add Multi-Race Bet Modal ── #}
    <div class="modal fade" id="addMultiRaceBetModal" tabindex="-1" aria-labelledby="addMultiRaceBetModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form method="POST"
                      action="{{ path('app_wfbo_karera_bet_offering_new', {eventId: event.id}) }}"
                      data-testid="multi-race-bet-form"
                      data-turbo="false"
                      novalidate>
                    <input type="hidden" name="_token" value="{{ csrf_token('wfbo_karera_bet_offering_new_' ~ event.id) }}">

                    <div class="modal-header">
                        <h5 class="modal-title" id="addMultiRaceBetModalLabel">Add Multi-Race Bet</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">

                        <div class="mb-3">
                            <label class="form-label--sm">Bet Type <span class="text-danger">*</span></label>
                            <select name="bet_type"
                                    class="form-control"
                                    id="multiRaceBetTypeSelect"
                                    data-testid="select-multi-bet-type">
                                {% for betType in multiRaceBetTypes %}
                                    <option value="{{ betType.code }}"
                                            data-leg-count="{{ betType.legCount }}"
                                            data-pattern="{{ betType.racePattern }}">
                                        {{ betType.label }}
                                    </option>
                                {% endfor %}
                            </select>
                            <p class="bet-type-hint" id="multiRaceBetTypeHint"></p>
                        </div>

                        <div class="mb-3">
                            <label class="form-label--sm">Races <span class="text-danger">*</span></label>
                            {% for race in races %}
                                <div class="form-check">
                                    <input type="checkbox"
                                           name="race_ids[]"
                                           value="{{ race.id }}"
                                           class="form-check-input"
                                           id="multiRaceCheckbox{{ race.id }}"
                                           data-testid="checkbox-race-{{ race.id }}">
                                    <label class="form-check-label" for="multiRaceCheckbox{{ race.id }}">
                                        Race {{ race.raceNumber }}
                                    </label>
                                </div>
                            {% endfor %}
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-admin-save" data-testid="btn-submit-multi-race-bet">Add Bet</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var select = document.getElementById('multiRaceBetTypeSelect');
            var hint = document.getElementById('multiRaceBetTypeHint');
            var patternLabels = {
                consecutive: 'must be consecutive races',
                non_consecutive: 'must be non-consecutive races',
                any: 'any races in this event'
            };

            function updateHint() {
                if (!select || !hint) {
                    return;
                }
                var option = select.options[select.selectedIndex];
                if (!option) {
                    return;
                }
                var legCount = option.getAttribute('data-leg-count');
                var pattern = option.getAttribute('data-pattern');
                hint.textContent = 'Select exactly ' + legCount + ' race(s): ' + (patternLabels[pattern] || '');
            }

            if (select) {
                select.addEventListener('change', updateHint);
                updateHint();
            }

            document.querySelectorAll('.race-card__bet-type-enable').forEach(function (btn) {
                btn.addEventListener('click', function () {
                    sessionStorage.setItem('scrollY_' + window.location.pathname, window.scrollY);
                });
            });

            var savedScroll = sessionStorage.getItem('scrollY_' + window.location.pathname);
            if (savedScroll) {
                sessionStorage.removeItem('scrollY_' + window.location.pathname);
                window.scrollTo(0, parseInt(savedScroll, 10));
            }
        });
    </script>

{% endblock %}