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

{% block wfbo_title %}Live Racing Settings{% endblock %}

{% block wfbo_content %}

    {% 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 %}

    {{ form_start(liveRacingSettingsForm, {attr: {'data-testid': 'live-racing-settings-form', 'novalidate': 'novalidate', 'data-turbo': 'false'}}) }}

    {# ── Game Toggle ── #}
    <div class="card mb-4">
        <div class="card-body">
            <h2 class="wfbo-card-title">Game Visibility</h2>
            <p class="wfbo-card-desc">
                Enable or disable Live Racing on the site. When disabled, the game card is hidden from the home
                page and the route redirects to home.
            </p>
            <div class="form-check mb-0" data-testid="input-live-racing-enabled-wrapper">
                {{ form_widget(liveRacingSettingsForm.liveRacingEnabled) }}
                {{ form_label(liveRacingSettingsForm.liveRacingEnabled, null, {label_attr: {class: 'form-check-label'}}) }}
                {{ form_errors(liveRacingSettingsForm.liveRacingEnabled) }}
            </div>
        </div>
    </div>

    {# ── Commission ── #}
    <div class="card mb-4">
        <div class="card-body">
            <h2 class="wfbo-card-title">Master Agent Commission</h2>
            <p class="wfbo-card-desc">
                Live Racing's own site-wide commission rate on losing bets, separate from the shared
                Master Agent Commission Rate other games use. A master agent's personal commission override
                (set on the Master Agents page) still takes precedence over this when one is set.
            </p>

            <div class="mb-0" style="max-width: 320px;">
                {{ form_label(liveRacingSettingsForm.liveRacingAgentCommissionRate, null, {label_attr: {class: 'form-label--sm'}}) }}
                <div class="input-group" style="max-width: 200px;">
                    {{ form_widget(liveRacingSettingsForm.liveRacingAgentCommissionRate, {attr: {class: 'border-end-0'}}) }}
                    <span class="input-group-text input-group-suffix">%</span>
                </div>
                {{ form_errors(liveRacingSettingsForm.liveRacingAgentCommissionRate) }}
                <p class="form-hint">Enter a value between 0.00 and 100.00</p>
            </div>
        </div>
    </div>

    <div>
        <button type="submit"
                class="btn btn-admin-save"
                data-testid="btn-save-live-racing-settings">
            Save Settings
        </button>
    </div>

    {{ form_end(liveRacingSettingsForm) }}

    {# ── Payout Bonus / Max Payout Cap ── #}
    <div class="card mb-4">
        <div class="card-body">
            <h2 class="wfbo-card-title">Payout Bonus &amp; Max Payout Cap</h2>
            <p class="wfbo-card-desc">
                Optional per-bet-type overrides applied at settlement: a bonus % is added on top of the base
                payout (multiplier &times; dividend), then the result is capped at the max payout if set. Leave
                either field blank for no override.
            </p>
            <form method="POST"
                  action="{{ path('app_wfbo_live_racing_payout_settings_save') }}"
                  novalidate
                  data-testid="live-racing-payout-settings-form">
                <input type="hidden" name="_token" value="{{ csrf_token('wfbo_live_racing_payout_settings') }}">
                <div class="table-card mb-3">
                    <div class="card-body p-0">
                        <table class="w-100 stack-table" data-testid="live-racing-payout-settings-table">
                            <thead>
                                <tr class="thead-row--strong">
                                    <th class="th-white">Bet Type</th>
                                    <th class="th-white">Bonus %</th>
                                    <th class="th-white">Max Payout (&#8369;)</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for betType in liveRacingBetTypes %}
                                <tr class="table-row" data-testid="live-racing-payout-row-{{ betType.value }}">
                                    <td class="td-cell td-cell--dark fw-semibold" data-label="Bet Type">{{ betType.label }}</td>
                                    <td class="td-cell" data-label="Bonus %">
                                        <input type="number" step="0.01" min="0"
                                               class="form-control form-control-sm"
                                               name="bonus[{{ betType.value }}]"
                                               value="{{ setting.getLiveRacingPayoutBonusPercentage(betType.value) }}"
                                               data-testid="input-bonus-{{ betType.value }}">
                                    </td>
                                    <td class="td-cell" data-label="Max Payout">
                                        <input type="number" step="0.01" min="0"
                                               class="form-control form-control-sm"
                                               name="max_payout[{{ betType.value }}]"
                                               value="{{ setting.getLiveRacingMaxPayout(betType.value) }}"
                                               data-testid="input-max-payout-{{ betType.value }}">
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                <button type="submit"
                        class="btn btn-admin-save"
                        data-testid="btn-save-live-racing-payout-settings">
                    Save Payout Settings
                </button>
            </form>
        </div>
    </div>

{% endblock %}