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

{% block wfbo_title %}Video Karera 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 %}

    {{ form_start(vkSettingsForm, {attr: {'data-testid': 'vk-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 Video Karera 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-vk-enabled-wrapper">
                {{ form_widget(vkSettingsForm.vkEnabled) }}
                {{ form_label(vkSettingsForm.vkEnabled, null, {label_attr: {class: 'form-check-label'}}) }}
                {{ form_errors(vkSettingsForm.vkEnabled) }}
            </div>
        </div>
    </div>

    {# ── Combination Bet Limit section ── #}
    <div class="card mb-4">
        <div class="card-body">

            <h2 class="wfbo-card-title">
                Combination Bet Limit
            </h2>
            <p class="wfbo-card-desc">
                Maximum number of bet transactions allowed per horse combination per race.
                Every bet click counts — including when a player adds to an existing bet.
                Once the limit is reached, no further bets are accepted for that combination.
                The player dividend table shows a heat map (yellow → orange → red) as combinations fill up.
                Leave blank for no limit.
            </p>

            <div class="mb-0" style="max-width: 320px;">
                {{ form_label(vkSettingsForm.combinationBetLimit, null, {label_attr: {class: 'form-label--sm'}}) }}
                {{ form_widget(vkSettingsForm.combinationBetLimit) }}
                {{ form_errors(vkSettingsForm.combinationBetLimit) }}
                <p class="form-hint">
                    Number of bet transactions (not peso amount).
                </p>
            </div>

        </div>
    </div>

    {# ── Maximum Bet Amount section ── #}
    <div class="card mb-4">
        <div class="card-body">

            <h2 class="wfbo-card-title">
                Maximum Bet Amount
            </h2>
            <p class="wfbo-card-desc">
                Maximum amount a player can bet on a single horse combination. Applies to both preset and custom bet amounts.
                Leave blank for no limit.
            </p>

            <div class="mb-0" style="max-width: 320px;">
                {{ form_label(vkSettingsForm.vkMaxBetAmount, null, {label_attr: {class: 'form-label--sm'}}) }}
                {{ form_widget(vkSettingsForm.vkMaxBetAmount) }}
                {{ form_errors(vkSettingsForm.vkMaxBetAmount) }}
            </div>

        </div>
    </div>

    {# ── House Win Rate section ── #}
    <div class="card mb-4">
        <div class="card-body">

            <h2 class="wfbo-card-title">
                House Win Rate
            </h2>
            <p class="wfbo-card-desc">
                Override the general house win rate for Video Karera only. Leave blank to use the general setting.
                Higher means more races resolve in the house's favor.
            </p>

            <div class="mb-0" style="max-width: 320px;">
                {{ form_label(vkSettingsForm.vkHouseWinRate, null, {label_attr: {class: 'form-label--sm'}}) }}
                <div class="input-group" style="max-width: 200px;">
                    {{ form_widget(vkSettingsForm.vkHouseWinRate, {attr: {class: 'border-end-0'}}) }}
                    <span class="input-group-text input-group-suffix">%</span>
                </div>
                {{ form_errors(vkSettingsForm.vkHouseWinRate) }}
                <p class="form-hint">
                    Leave blank to fall back to the general house win rate setting.
                </p>
            </div>

        </div>
    </div>

    {# ── Race Timing section ── #}
    <div class="card mb-4">
        <div class="card-body">

            <h2 class="wfbo-card-title">
                Race Timing
            </h2>
            <p class="wfbo-card-desc">
                Configure the race schedule intervals and betting window.
            </p>

            <div class="mb-4" style="max-width: 320px;">
                {{ form_label(vkSettingsForm.raceIntervalMinutes, null, {label_attr: {class: 'form-label--sm'}}) }}
                <div class="input-group" style="max-width: 200px;">
                    {{ form_widget(vkSettingsForm.raceIntervalMinutes, {attr: {class: 'border-end-0'}}) }}
                    <span class="input-group-text input-group-suffix">
                        min
                    </span>
                </div>
                {{ form_errors(vkSettingsForm.raceIntervalMinutes) }}
                <p class="form-hint">
                    How many minutes between consecutive races. Use decimals for sub-minute intervals, e.g. 0.5 = 30 seconds.
                </p>
            </div>

            <div class="mb-4" style="max-width: 320px;">
                {{ form_label(vkSettingsForm.betClosingSeconds, null, {label_attr: {class: 'form-label--sm'}}) }}
                <div class="input-group" style="max-width: 200px;">
                    {{ form_widget(vkSettingsForm.betClosingSeconds, {attr: {class: 'border-end-0'}}) }}
                    <span class="input-group-text input-group-suffix">
                        sec
                    </span>
                </div>
                {{ form_errors(vkSettingsForm.betClosingSeconds) }}
                <p class="form-hint">
                    Betting closes this many seconds before each race starts.
                </p>
            </div>

            <div class="mb-0" style="max-width: 320px;">
                {{ form_label(vkSettingsForm.nextRaceCountdownSeconds, null, {label_attr: {class: 'form-label--sm'}}) }}
                <div class="input-group" style="max-width: 200px;">
                    {{ form_widget(vkSettingsForm.nextRaceCountdownSeconds, {attr: {class: 'border-end-0'}}) }}
                    <span class="input-group-text input-group-suffix">
                        sec
                    </span>
                </div>
                {{ form_errors(vkSettingsForm.nextRaceCountdownSeconds) }}
                <p class="form-hint">
                    How long to count down before auto-advancing to the next race after results.
                </p>
            </div>

        </div>
    </div>

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

    {{ form_end(vkSettingsForm) }}

{% endblock %}