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

{% block wfbo_title %}Settle EZDOS Draw{% endblock %}

{% block wfbo_content %}

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 style="margin:0;font-size:20px;color:#000;">Settle Draw — {{ draw.scheduledAt|date('M d, Y h:i A') }}</h1>
        <a href="{{ path('app_wfbo_ezdos_results') }}" class="btn btn-sm btn-outline-secondary">Back to Results</a>
    </div>

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

    {% if error is defined and error %}
        <div class="alert alert-danger mb-4">{{ error }}</div>
    {% endif %}

    {% if draw.settledAt %}
        <div class="card mb-4">
            <div class="card-body">
                <h2 class="wfbo-card-title">Already Settled</h2>
                <p>This draw was settled at {{ draw.settledAt|date('M d, Y h:i A') }}.</p>
                {% if draw.winningNumbers %}
                    <p><strong>Winning Numbers:</strong> {{ draw.winningNumbers[0] }} - {{ draw.winningNumbers[1] }}</p>
                {% endif %}
                {% if draw.videoUrl %}
                    <p><strong>Video URL:</strong> <a href="{{ draw.videoUrl }}" target="_blank">{{ draw.videoUrl }}</a></p>
                {% endif %}
            </div>
        </div>
    {% else %}

        {# ── Step 1: Video URL ── #}
        <div class="card mb-4">
            <div class="card-body">
                <h2 class="wfbo-card-title">Step 1 — Video URL</h2>
                <p class="wfbo-card-desc">Enter the video URL from the live draw.</p>

                <form method="POST" data-testid="video-form">
                    <input type="hidden" name="_action" value="save_video">
                    <div class="mb-3" style="max-width: 500px;">
                        <label class="form-label form-label--sm">Video URL</label>
                        <input type="url" name="videoUrl" class="form-control" placeholder="https://..."
                               value="{{ draw.videoUrl }}" data-testid="input-video-url">
                    </div>
                    <button type="submit" class="btn" style="background:#000;color:#fff;" data-testid="btn-save-video">
                        Save Video URL
                    </button>
                </form>
            </div>
        </div>

        {# ── Step 2: Winning Numbers ── #}
        <div class="card mb-4">
            <div class="card-body">
                <h2 class="wfbo-card-title">Step 2 — Winning Numbers</h2>
                <p class="wfbo-card-desc">Select the two winning numbers to settle the draw.</p>

                <form method="POST" data-testid="settle-form">
                    <input type="hidden" name="_action" value="settle">

                    <div class="mb-3" style="max-width: 500px;">
                        <label class="form-label form-label--sm">Winning Number 1</label>
                        <select name="winningNumber1" class="form-control" required data-testid="input-winning-num1">
                            <option value="" disabled selected>-- Select --</option>
                            {% for i in 1..31 %}
                                <option value="{{ i }}"{% if draw.winningNumbers and draw.winningNumbers[0] == i %} selected{% endif %}>{{ i }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="mb-3" style="max-width: 500px;">
                        <label class="form-label form-label--sm">Winning Number 2</label>
                        <select name="winningNumber2" class="form-control" required data-testid="input-winning-num2">
                            <option value="" disabled selected>-- Select --</option>
                            {% for i in 1..31 %}
                                <option value="{{ i }}"{% if draw.winningNumbers and draw.winningNumbers[1] == i %} selected{% endif %}>{{ i }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <button type="submit" class="btn" style="background:#000;color:#fff;" data-testid="btn-settle-draw">
                        Settle Draw
                    </button>
                </form>
            </div>
        </div>

    {% endif %}

{% endblock %}