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

{% block wfbo_title %}EZDOS 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(ezSettingsForm, {attr: {'data-testid': 'ez-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 EZDOS on the site. When disabled, the game is hidden from the home page and the route redirects to home.
            </p>
            <div class="form-check mb-0" data-testid="input-ez-enabled-wrapper">
                {{ form_widget(ezSettingsForm.ezEnabled) }}
                {{ form_label(ezSettingsForm.ezEnabled, null, {label_attr: {class: 'form-check-label'}}) }}
                {{ form_errors(ezSettingsForm.ezEnabled) }}
            </div>
        </div>
    </div>

    {# ── Bet Amount ── #}
    <div class="card mb-4">
        <div class="card-body">
            <h2 class="wfbo-card-title">Bet Amount</h2>
            <p class="wfbo-card-desc">
                Cost per bet for EZDOS.
            </p>
            <div class="mb-0" style="max-width: 320px;">
                {{ form_label(ezSettingsForm.ezMaxBetAmount, null, {label_attr: {class: 'form-label--sm'}}) }}
                {{ form_widget(ezSettingsForm.ezMaxBetAmount) }}
                {{ form_errors(ezSettingsForm.ezMaxBetAmount) }}
            </div>
        </div>
    </div>

    {# ── Draw Schedule ── #}
    <div class="card mb-4">
        <div class="card-body">
            <h2 class="wfbo-card-title">Draw Schedule</h2>
            <p class="wfbo-card-desc">
                Configure when the live draw happens. Set the draw time (military format) and select which days of the week have draws.
            </p>

            <div class="mb-3" style="max-width: 320px;">
                {{ form_label(ezSettingsForm.ezDrawTime, null, {label_attr: {class: 'form-label--sm'}}) }}
                <input type="time"
                       name="{{ ezSettingsForm.ezDrawTime.vars.full_name }}"
                       value="{{ ezSettingsForm.ezDrawTime.vars.value }}"
                       class="form-control"
                       data-testid="input-ez-draw-time"
                       required>
                {{ form_errors(ezSettingsForm.ezDrawTime) }}
                <p class="form-hint">Use the time picker to set when the draw happens.</p>
            </div>

            <div class="mb-3" style="max-width: 320px;">
                {{ form_label(ezSettingsForm.ezBetClosingTime, null, {label_attr: {class: 'form-label--sm'}}) }}
                <input type="time"
                       name="{{ ezSettingsForm.ezBetClosingTime.vars.full_name }}"
                       value="{{ ezSettingsForm.ezBetClosingTime.vars.value }}"
                       class="form-control"
                       data-testid="input-ez-bet-closing-time">
                {{ form_errors(ezSettingsForm.ezBetClosingTime) }}
                <p class="form-hint">Use the time picker to set when betting closes. Leave blank for no early close.</p>
            </div>

            <div class="mb-0">
                {{ form_label(ezSettingsForm.ezDrawDays, null, {label_attr: {class: 'form-label--sm'}}) }}
                <div class="form-check" style="display: flex; flex-wrap: wrap; gap: 16px; margin-top: 4px;">
                    {% for choice in ezSettingsForm.ezDrawDays %}
                        <div class="form-check">
                            {{ form_widget(choice) }}
                            {{ form_label(choice, null, {label_attr: {class: 'form-check-label'}}) }}
                        </div>
                    {% endfor %}
                </div>
                {{ form_errors(ezSettingsForm.ezDrawDays) }}
            </div>
        </div>
    </div>

    {# ── Payouts ── #}
    <div class="card mb-4">
        <div class="card-body">
            <h2 class="wfbo-card-title">Payouts</h2>
            <p class="wfbo-card-desc">
                Fixed peso payout amounts for each bet type. Players bet on 2 numbers — Straight (exact order) or Rambolito (any order).
            </p>

            <div class="mb-3" style="max-width: 320px;">
                {{ form_label(ezSettingsForm.ezStraightPayout, null, {label_attr: {class: 'form-label--sm'}}) }}
                <div class="input-group" style="max-width: 200px;">
                    <span class="input-group-text">₱</span>
                    {{ form_widget(ezSettingsForm.ezStraightPayout, {attr: {class: 'border-end-0'}}) }}
                </div>
                {{ form_errors(ezSettingsForm.ezStraightPayout) }}
                <p class="form-hint">Fixed payout when a player wins with a Straight bet (exact number match).</p>
            </div>

            <div class="mb-0" style="max-width: 320px;">
                {{ form_label(ezSettingsForm.ezRambolitoPayout, null, {label_attr: {class: 'form-label--sm'}}) }}
                <div class="input-group" style="max-width: 200px;">
                    <span class="input-group-text">₱</span>
                    {{ form_widget(ezSettingsForm.ezRambolitoPayout, {attr: {class: 'border-end-0'}}) }}
                </div>
                {{ form_errors(ezSettingsForm.ezRambolitoPayout) }}
                <p class="form-hint">Fixed payout when a player wins with a Rambolito bet (numbers in any order).</p>
            </div>
        </div>
    </div>

    {{ form_widget(ezSettingsForm._token) }}

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

    {{ form_end(ezSettingsForm, {'render_rest': false}) }}

{% endblock %}