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

{% block wfbo_title %}Race {{ race.raceNumber }}{% endblock %}

{% block wfbo_content %}

    {% set readOnly = isPast %}

    {% 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 %}
    {% for flash in app.flashes('warning') %}
        <div class="alert alert-warning mb-4" role="alert" data-testid="flash-warning">{{ flash }}</div>
    {% endfor %}

    <div class="mb-4">
        <a href="{{ path('app_wfbo_karera_event_show', {id: event.id}) }}"
           class="back-link">
            ← Back to {{ event.eventDate|date('F j, Y') }}
        </a>
    </div>

    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h1 style="margin-bottom: 8px; color: #000;" data-testid="race-title">Race {{ race.raceNumber }}</h1>
            <p class="wfbo-card-desc mb-0">{{ event.arena.name }} — {{ event.eventDate|date('F j, Y') }} {% if event.locked %}<span class="badge bg-danger ms-2">Locked</span>{% endif %}</p>
        </div>
        {% if not isPast and not isLocked %}
        <button type="button"
                class="pill-link--primary"
                data-bs-toggle="modal"
                data-bs-target="#addEntryModal"
                data-testid="btn-add-entry">
            + Add Entry
        </button>
        {% endif %}
    </div>

    <div class="table-card mb-4">
        <div class="card-body p-0">

            {% if entries is empty %}
                <p class="td-empty--lg text-center" data-testid="empty-state">
                    No entries added yet.
                </p>
            {% else %}
                <table class="w-100" data-testid="entries-table">
                    <thead>
                        <tr class="thead-row--strong">
                            <th class="th-white">No.</th>
                            <th class="th-white">Horse</th>
                            <th class="th-white">Jockey</th>
                            <th class="th-white">Trainer</th>
                            <th class="th-white">Status</th>
                            <th class="th-white">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for entry in entries %}
                        <tr class="table-row {{ entry.scratched ? 'entry-row--scratched' : '' }}" data-testid="entry-row-{{ entry.id }}">
                            <td class="td-cell td-cell--dark fw-semibold">{{ entry.number }}</td>
                            <td class="td-cell {{ entry.scratched ? 'text-decoration-line-through' : '' }}">{{ entry.horse.name }}</td>
                            <td class="td-cell {{ entry.scratched ? 'text-muted' : '' }}">{{ entry.jockey.name }}</td>
                            <td class="td-cell {{ entry.scratched ? 'text-muted' : '' }}">{{ entry.trainer.name }}</td>
                            <td class="td-cell">
                                {% if entry.active %}
                                    <span class="entry-status entry-status--active" data-testid="entry-status-{{ entry.id }}">Active</span>
                                {% else %}
                                    <span class="entry-status entry-status--scratched" data-testid="entry-status-{{ entry.id }}">Scratched</span>
                                {% endif %}
                            </td>
                            <td class="td-cell">
                                <div class="d-flex gap-2 align-items-center">
                                    {% if not isPast and not isLocked %}
                                    <a href="{{ path('app_wfbo_karera_entry_edit', {eventId: event.id, raceId: race.id, entryId: entry.id}) }}"
                                       class="pill-link--secondary"
                                       data-testid="btn-edit-{{ entry.id }}">
                                        Edit
                                    </a>
                                    {% endif %}
                                    {% if not isPast %}
                                    <form method="POST"
                                          action="{{ path('app_wfbo_karera_entry_scratch', {eventId: event.id, raceId: race.id, entryId: entry.id}) }}"
                                          onsubmit="return confirm('Scratch entry #{{ entry.number }}?');"
                                          class="m-0">
                                        <input type="hidden" name="_token" value="{{ csrf_token('wfbo_karera_entry_scratch_' ~ entry.id) }}">
                                        {% if entry.active %}
                                            <button type="submit"
                                                    class="btn-scratch"
                                                    data-testid="btn-scratch-{{ entry.id }}">
                                                Scratch
                                            </button>
                                        {% else %}
                                            <button type="submit"
                                                    class="btn-restore"
                                                    data-testid="btn-restore-{{ entry.id }}">
                                                Restore
                                            </button>
                                        {% endif %}
                                    </form>
                                    {% endif %}
                                    {% if not isPast and not isLocked %}
                                    <form method="POST"
                                          action="{{ path('app_wfbo_karera_entry_delete', {eventId: event.id, raceId: race.id, entryId: entry.id}) }}"
                                          onsubmit="return confirm('Delete this entry?');"
                                          class="m-0">
                                        <input type="hidden" name="_token" value="{{ csrf_token('wfbo_karera_entry_delete_' ~ entry.id) }}">
                                        <button type="submit"
                                                class="btn-reject"
                                                data-testid="btn-delete-{{ entry.id }}">
                                            Delete
                                        </button>
                                    </form>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% endif %}

        </div>
    </div>

    {# ── Add Entry Modal ── #}
    <div class="modal fade" id="addEntryModal" tabindex="-1" aria-labelledby="addEntryModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form method="POST"
                      action="{{ path('app_wfbo_karera_entry_new', {eventId: event.id, raceId: race.id}) }}"
                      data-testid="entry-form"
                      data-controller="searchable-select"
                      data-searchable-select-create-value="true"
                      data-turbo="false"
                      novalidate>
                    <input type="hidden" name="_token" value="{{ csrf_token('wfbo_karera_entry_new_' ~ race.id) }}">

                    <div class="modal-header">
                        <h5 class="modal-title" id="addEntryModalLabel">Add Entry</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">

                        <div class="mb-3">
                            <label class="form-label--sm">No. <span class="text-danger">*</span></label>
                            <input type="text"
                                   name="number"
                                   class="form-control"
                                   placeholder="e.g. 4a"
                                   value="{{ submitted.number }}"
                                   data-testid="input-number">
                        </div>
                        <div class="mb-3">
                            <label class="form-label--sm">Horse <span class="text-danger">*</span></label>
                            <select name="horse_name"
                                    data-searchable
                                    data-url="{{ path('app_wfbo_karera_api_horses') }}"
                                    data-placeholder="Search horse..."
                                    data-initial="{{ submitted.horseName }}"
                                    data-testid="input-horse-name">
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label--sm">Jockey <span class="text-danger">*</span></label>
                            <select name="jockey_name"
                                    data-searchable
                                    data-url="{{ path('app_wfbo_karera_api_jockeys') }}"
                                    data-placeholder="Search jockey..."
                                    data-initial="{{ submitted.jockeyName }}"
                                    data-testid="input-jockey-name">
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label--sm">Trainer <span class="text-danger">*</span></label>
                            <select name="trainer_name"
                                    data-searchable
                                    data-url="{{ path('app_wfbo_karera_api_trainers') }}"
                                    data-placeholder="Search trainer..."
                                    data-initial="{{ submitted.trainerName }}"
                                    data-testid="input-trainer-name">
                            </select>
                        </div>
                        <p class="form-hint mb-0">Type a new name to add it to the Horses/Jockeys/Trainers list automatically.</p>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-admin-save" data-testid="btn-submit">Add Entry</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {% if showAddEntryModal %}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            bootstrap.Modal.getOrCreateInstance(document.getElementById('addEntryModal')).show();
        });
    </script>
    {% endif %}

{% endblock %}