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

{% block wfbo_title %}{{ announcement ? 'Edit' : 'New' }} Announcement{% endblock %}

{% block wfbo_content %}

    {% set errorFlashes = app.flashes('error') %}
    {% if errorFlashes %}
        <div class="alert alert-danger mb-4" role="alert" data-testid="flash-error">
            {% for flash in errorFlashes %}
                <div>{{ flash }}</div>
            {% endfor %}
        </div>
    {% endif %}

    <div class="mb-4">
        <a href="{{ path('app_wfbo_announcements') }}" class="back-link">
            ← Back to Announcements
        </a>
    </div>

    <div class="card" style="max-width: 720px;">
        <div class="card-body">

            <h2 class="wfbo-card-title mb-3">
                {{ announcement ? 'Edit' : 'New' }} Announcement
            </h2>

            <form method="POST"
                  action="{{ announcement ? path('app_wfbo_announcement_edit', {id: announcement.id}) : path('app_wfbo_announcement_new') }}"
                  data-testid="announcement-form"
                  data-turbo="false"
                  novalidate>
                <input type="hidden" name="_token"
                       value="{{ csrf_token(announcement ? 'wfbo_announcement_edit_' ~ announcement.id : 'wfbo_announcement_new') }}">

                <div class="mb-3">
                    <label class="form-label--sm" for="announcement-message">
                        Message <span class="text-danger">*</span>
                    </label>
                    <textarea id="announcement-message"
                              name="message"
                              class="form-control"
                              rows="3"
                              maxlength="{{ maxLength }}"
                              placeholder="e.g. Deposits via GCash are delayed today. Details: https://example.com/notice"
                              data-testid="input-message">{{ submitted.message }}</textarea>
                    <p class="form-hint">
                        Plain text, up to {{ maxLength }} characters. Links: paste a URL
                        (<code>https://…</code>) or write <code>[Click here](https://…)</code> for a labelled link.
                    </p>
                </div>

                <div class="mb-3">
                    <label class="form-label--sm d-block">Shown to</label>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="audience" id="audience-all" value="all"
                               {{ submitted.audience == 'all' ? 'checked' }} data-testid="input-audience-all">
                        <label class="form-check-label" for="audience-all">All players</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="audience" id="audience-agents" value="agents"
                               {{ submitted.audience == 'agents' ? 'checked' }} data-testid="input-audience-agents">
                        <label class="form-check-label" for="audience-agents">Players of specific agents</label>
                    </div>
                    <p class="form-hint mb-0">All-player announcements show in blue, agent announcements in green.</p>
                </div>

                <div class="mb-4" id="announcement-agents" {{ submitted.audience != 'agents' ? 'hidden' }} data-testid="agent-picker">
                    <label class="form-label--sm d-block">Agents <span class="text-danger">*</span></label>
                    <p class="form-hint mb-2">Only players directly under the selected agents see it. Each agent can have one enabled announcement.</p>
                    <input type="search" class="form-control mb-2" style="max-width: 320px;"
                           placeholder="Filter by name or mobile…" id="announcement-agent-filter"
                           data-testid="input-agent-filter">
                    <div style="max-height: 280px; overflow-y: auto; border: 1px solid #e2e2e2; border-radius: 8px; padding: 8px 12px;">
                        {% for group, label in {masterAgents: 'Master Agents', agents: 'Agents', subAgents: 'Sub-agents'} %}
                            {% if agentGroups[group] is not empty %}
                                <div class="fw-semibold small text-muted mt-2 mb-1" data-agent-group>{{ label }}</div>
                                {% for agent in agentGroups[group] %}
                                    <div class="form-check" data-agent-option="{{ (agent.firstName ~ ' ' ~ agent.lastName ~ ' ' ~ agent.mobileNumber)|lower }}">
                                        <input class="form-check-input" type="checkbox" name="agent_ids[]"
                                               id="agent-{{ agent.id }}" value="{{ agent.id }}"
                                               {{ agent.id in submitted.agentIds ? 'checked' }}
                                               data-testid="agent-option-{{ agent.id }}">
                                        <label class="form-check-label" for="agent-{{ agent.id }}">
                                            {{ agent.firstName }} {{ agent.lastName }}
                                            <span class="text-muted small">{{ agent.mobileNumber }}</span>
                                        </label>
                                    </div>
                                {% endfor %}
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>

                <div class="d-flex align-items-center gap-3">
                    <button type="submit" class="btn btn-admin-save" data-testid="btn-submit">
                        {{ announcement ? 'Update' : 'Publish' }} Announcement
                    </button>
                    <a href="{{ path('app_wfbo_announcements') }}" class="back-link">Cancel</a>
                </div>

            </form>

        </div>
    </div>

    <script>
        (function () {
            const picker = document.getElementById('announcement-agents');
            document.querySelectorAll('input[name="audience"]').forEach(function (radio) {
                radio.addEventListener('change', function () {
                    picker.hidden = document.getElementById('audience-agents').checked === false;
                });
            });
            document.getElementById('announcement-agent-filter').addEventListener('input', function (e) {
                const q = e.target.value.trim().toLowerCase();
                picker.querySelectorAll('[data-agent-option]').forEach(function (row) {
                    row.hidden = q !== '' && !row.dataset.agentOption.includes(q);
                });
            });
        })();
    </script>

{% endblock %}