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

{% block wfbo_title %}Head2Head Karera - Event {{ event.eventDate|date('M d, Y') }}{% 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 %}

    <div class="d-flex justify-content-between align-items-start mb-4">
        <div>
            <a href="{{ path('app_wfbo_h2h_events') }}" class="btn btn-sm btn-outline-secondary mb-2">&larr; Back to Events</a>
            <h2 style="margin-bottom: 4px; color: #000;">{{ event.eventDate|date('l, M d, Y') }}</h2>
            <p style="color: var(--wfbo-text-secondary); margin-bottom: 0;">
                {{ event.races|length }} race{{ event.races|length != 1 ? 's' : '' }}
            </p>
        </div>
        <a href="{{ path('app_wfbo_h2h_race_new', {id: event.id}) }}" class="btn btn-admin-save" data-testid="btn-new-h2h-race">
            Add Race
        </a>
    </div>

    <div class="card mb-4">
        <div class="card-body">
            <h3 class="wfbo-card-title">Video Link</h3>
            <form method="post" action="{{ path('app_wfbo_h2h_event_update_video', {id: event.id}) }}" data-testid="h2h-video-form">
                <input type="hidden" name="_token" value="{{ csrf_token('update-h2h-video-' ~ event.id) }}">
                <div class="d-flex align-items-end gap-3">
                    <div style="flex: 1; max-width: 500px;">
                        <input type="url"
                               id="video_url"
                               name="video_url"
                               value="{{ event.videoUrl }}"
                               class="form-control"
                               placeholder="https://www.youtube.com/watch?v=..."
                               style="background-color: #ffffff; color: #000000;"
                               data-testid="input-h2h-video-url">
                    </div>
                    <button type="submit" class="btn btn-admin-save" data-testid="btn-save-h2h-video">
                        Save
                    </button>
                </div>
            </form>
        </div>
    </div>

    {% if event.races|length > 0 %}
    <div class="card">
        <div class="table-responsive">
            <table class="data-table" style="--bs-table-color: #000000; --bs-table-bg: #ffffff;">
                <thead>
                    <tr>
                        <th scope="col" style="padding: 12px 16px;">Race #</th>
                        <th scope="col" style="padding: 12px 16px;">Horse A</th>
                        <th scope="col" style="padding: 12px 16px;">Horse B</th>
                        <th scope="col" style="padding: 12px 16px;">Betting</th>
                        <th scope="col" style="padding: 12px 16px;">Result</th>
                        <th scope="col" style="padding: 12px 16px;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for race in event.races %}
                    <tr data-testid="h2h-race-row-{{ race.id }}">
                        <td style="padding: 12px 16px;"><strong>{{ race.raceNo }}</strong></td>
                        <td style="padding: 12px 16px;">
                            <span class="badge bg-info me-1" style="color: #000000;">#{{ race.horseANumber }}</span>
                            {{ race.horseAName }}
                            <small class="text-muted">({{ race.horseAJockey }})</small>
                        </td>
                        <td style="padding: 12px 16px;">
                            <span class="badge bg-danger me-1">#{{ race.horseBNumber }}</span>
                            {{ race.horseBName }}
                            <small class="text-muted">({{ race.horseBJockey }})</small>
                        </td>
                        <td style="padding: 12px 16px;">
                            {% if race.bettingStatus == 'open' %}
                                <span class="badge bg-success" data-testid="h2h-race-status-{{ race.id }}">Open</span>
                            {% elseif race.bettingStatus == 'cancelled' %}
                                <span class="badge bg-dark" data-testid="h2h-race-status-{{ race.id }}">Cancelled</span>
                            {% else %}
                                <span class="badge bg-secondary" data-testid="h2h-race-status-{{ race.id }}">Closed</span>
                            {% endif %}
                        </td>
                        <td style="padding: 12px 16px;">
                            {% if race.hasResult %}
                                {% if race.winner == 'A' %}
                                    <span class="badge bg-info" style="color: #000000;" data-testid="h2h-race-winner-{{ race.id }}">
                                        Horse A #{{ race.horseANumber }}
                                    </span>
                                {% else %}
                                    <span class="badge bg-danger" data-testid="h2h-race-winner-{{ race.id }}">
                                        Horse B #{{ race.horseBNumber }}
                                    </span>
                                {% endif %}
                            {% else %}
                                <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td style="padding: 12px 16px;">
                            {% if race.bettingStatus == 'open' %}
                                <form method="post" action="{{ path('app_wfbo_h2h_race_toggle', {id: race.id}) }}" style="display:inline;" onsubmit="return confirm('Close betting? This cannot be reopened.');">
                                    <input type="hidden" name="_token" value="{{ csrf_token('toggle-h2h-race-' ~ race.id) }}">
                                    <button type="submit" class="btn btn-sm btn-outline-warning" data-testid="btn-toggle-h2h-race-{{ race.id }}">
                                        Close Betting
                                    </button>
                                </form>
                            {% elseif race.bettingStatus == 'closed' and not race.hasResult %}
                                <form method="post" action="{{ path('app_wfbo_h2h_race_cancel', {id: race.id}) }}" style="display:inline;" onsubmit="return confirm('Cancel this race? This cannot be undone.');">
                                    <input type="hidden" name="_token" value="{{ csrf_token('cancel-h2h-race-' ~ race.id) }}">
                                    <button type="submit" class="btn btn-sm btn-outline-dark" data-testid="btn-cancel-h2h-race-{{ race.id }}">
                                        Cancel Race
                                    </button>
                                </form>
                            {% else %}
                                <span class="badge bg-secondary">Locked</span>
                            {% endif %}
                             {% if race.bettingStatus == 'closed' and not race.hasResult %}
                             <button type="button" class="btn btn-sm btn-outline-success" data-bs-toggle="modal" data-bs-target="#resultModal{{ race.id }}" data-testid="btn-add-result-{{ race.id }}">
                                 Add Result
                             </button>
                             {% endif %}
                             {% if race.bettingStatus == 'open' %}
                             <a href="{{ path('app_wfbo_h2h_race_edit', {id: race.id}) }}" class="btn btn-sm btn-outline-primary" data-testid="btn-edit-h2h-race-{{ race.id }}">
                                 Edit
                             </a>
                             <form method="post" action="{{ path('app_wfbo_h2h_race_delete', {id: race.id}) }}" style="display:inline;" onsubmit="return confirm('Delete this race?');">
                                 <input type="hidden" name="_token" value="{{ csrf_token('delete-h2h-race-' ~ race.id) }}">
                                 <button type="submit" class="btn btn-sm btn-outline-danger" data-testid="btn-delete-h2h-race-{{ race.id }}">
                                     Delete
                                 </button>
                             </form>
                             {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% else %}
    <div class="card">
        <div class="card-body text-center py-5">
            <p class="mb-3" style="color: var(--wfbo-text-secondary);">No races added yet.</p>
            <a href="{{ path('app_wfbo_h2h_race_new', {id: event.id}) }}" class="btn btn-admin-save">
                Add first race
            </a>
        </div>
    </div>
    {% endif %}

    {% for race in event.races %}
        {% if race.bettingStatus == 'closed' and not race.hasResult %}
        <div class="modal fade" id="resultModal{{ race.id }}" tabindex="-1" aria-labelledby="resultModalLabel{{ race.id }}" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form method="post" action="{{ path('app_wfbo_h2h_race_result', {id: race.id}) }}" onsubmit="return confirm('Confirm result? This cannot be changed.');">
                        <input type="hidden" name="_token" value="{{ csrf_token('result-h2h-race-' ~ race.id) }}">
                        <div class="modal-header">
                            <h5 class="modal-title" id="resultModalLabel{{ race.id }}">Add Result - Race {{ race.raceNo }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p class="mb-3">Select the winner:</p>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="winner" id="winnerA{{ race.id }}" value="A" required>
                                <label class="form-check-label" for="winnerA{{ race.id }}">
                                    <span class="badge bg-info me-1" style="color: #000000;">#{{ race.horseANumber }}</span>
                                    <strong>Horse A</strong> - {{ race.horseAName }}
                                    <small class="text-muted">({{ race.horseAJockey }})</small>
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="winner" id="winnerB{{ race.id }}" value="B" required>
                                <label class="form-check-label" for="winnerB{{ race.id }}">
                                    <span class="badge bg-danger me-1">#{{ race.horseBNumber }}</span>
                                    <strong>Horse B</strong> - {{ race.horseBName }}
                                    <small class="text-muted">({{ race.horseBJockey }})</small>
                                </label>
                            </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-success">Confirm Result</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        {% endif %}
    {% endfor %}

{% endblock %}