{% extends 'admin_base.html.twig' %}

{% block title %}Standorte – Fit wie ein Fisch{% endblock %}
{% block header_title %}<i class="fas fa-map-marker-alt me-2"></i>Standorte{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('css/fisch-admin.css') }}" rel="stylesheet">
{% endblock %}

{% block content %}
{% set actions %}
    <button type="button" class="btn btn-fisch-primary btn-sm" data-bs-toggle="modal" data-bs-target="#poolModal"
            data-mode="create">
        <i class="fas fa-plus me-1"></i> Standort anlegen
    </button>
{% endset %}
{% include 'admin/fisch/_fisch_page_header.html.twig' with {
    title: 'Standorte',
    icon: 'map-marker-alt',
    subtitle: 'Schwimmbäder / Lehrschwimmbecken anlegen, sortieren und aktivieren',
    actions_html: actions
} %}

{% for label, messages in app.flashes %}
    {% for message in messages %}
        <div class="alert alert-{{ label == 'error' ? 'danger' : label }} alert-dismissible fade show" role="alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Schließen"></button>
        </div>
    {% endfor %}
{% endfor %}

<div class="fisch-table-wrap">
    <div class="table-responsive">
        <table class="table table-fisch mb-0">
            <thead>
                <tr>
                    <th>Sort.</th>
                    <th>Name</th>
                    <th>Slug</th>
                    <th>Infos für E-Mails</th>
                    <th>Status</th>
                    <th class="text-end">Aktionen</th>
                </tr>
            </thead>
            <tbody>
                {% for pool in pools %}
                    <tr class="{% if not pool.isActive %}opacity-75{% endif %}">
                        <td>{{ pool.sortOrder }}</td>
                        <td class="fw-semibold">{{ pool.name }}</td>
                        <td><code>{{ pool.slug }}</code></td>
                        <td>
                            {% if pool.hasTravelInfo %}
                                <span class="badge bg-success-subtle text-success-emphasis">
                                    <i class="fas fa-check me-1"></i>hinterlegt
                                </span>
                                <div class="small text-muted">
                                    {{ pool.address ? 'Adresse' : '' }}{{ pool.directions ? ' · Anfahrt' : '' }}{{ pool.parkingInfo ? ' · Parken' : '' }}{{ pool.mapsUrl ? ' · Karte' : '' }}
                                </div>
                            {% else %}
                                <span class="badge bg-warning text-dark">fehlt</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if pool.isActive %}
                                <span class="badge bg-success">Aktiv</span>
                            {% else %}
                                <span class="badge bg-secondary">Inaktiv</span>
                            {% endif %}
                        </td>
                        <td class="text-end">
                            <button type="button" class="btn btn-sm btn-fisch-outline btn-action"
                                    data-bs-toggle="modal" data-bs-target="#poolModal"
                                    data-mode="edit"
                                    data-id="{{ pool.id }}"
                                    data-name="{{ pool.name }}"
                                    data-slug="{{ pool.slug }}"
                                    data-sort="{{ pool.sortOrder }}"
                                    data-active="{{ pool.isActive ? '1' : '0' }}"
                                    data-address="{{ pool.address }}"
                                    data-directions="{{ pool.directions }}"
                                    data-parking="{{ pool.parkingInfo }}"
                                    data-maps="{{ pool.mapsUrl }}"
                                    data-maps-embed="{{ pool.mapsEmbedUrl }}"
                                    data-info="{{ pool.infoText }}">
                                <i class="fas fa-pen"></i>
                            </button>
                            <form method="post" action="{{ path('admin_fisch_pools_toggle', {id: pool.id}) }}" class="d-inline">
                                <input type="hidden" name="_token" value="{{ csrf_token('fisch_pool_toggle_' ~ pool.id) }}">
                                <button type="submit" class="btn btn-sm btn-outline-secondary btn-action"
                                        title="{{ pool.isActive ? 'Deaktivieren' : 'Aktivieren' }}">
                                    <i class="fas fa-{{ pool.isActive ? 'eye-slash' : 'eye' }}"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                {% else %}
                    <tr><td colspan="6" class="text-muted text-center py-4">Noch keine Standorte.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<div class="modal fade" id="poolModal" tabindex="-1" aria-labelledby="poolModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form method="post" action="{{ path('admin_fisch_pools_save') }}" class="modal-content">
            <input type="hidden" name="_token" value="{{ csrf_token('fisch_pool') }}">
            <input type="hidden" name="id" id="poolId" value="0">
            <div class="modal-header">
                <h5 class="modal-title" id="poolModalLabel">Standort anlegen</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label fw-semibold" for="poolName">Name</label>
                    <input type="text" class="form-control" name="name" id="poolName" required maxlength="120">
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold" for="poolSlug">Slug <span class="text-muted fw-normal">(optional)</span></label>
                    <input type="text" class="form-control" name="slug" id="poolSlug" maxlength="80"
                           placeholder="wird aus dem Namen erzeugt">
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold" for="poolSort">Sortierung</label>
                    <input type="number" class="form-control" name="sort_order" id="poolSort" value="0">
                </div>
                <div class="form-check form-switch mb-4">
                    <input type="hidden" name="is_active" value="0">
                    <input class="form-check-input" type="checkbox" name="is_active" value="1" id="poolActive" checked>
                    <label class="form-check-label" for="poolActive">Aktiv (öffentlich buchbar)</label>
                </div>

                <hr>
                <h6 class="fw-semibold mb-1">Informationen für die E-Mails</h6>
                <p class="text-muted small">
                    Diese Angaben stehen in den Vorlagen als Platzhalter zur Verfügung
                    (<code>{bad_adresse}</code>, <code>{bad_anfahrt}</code>, <code>{bad_parkplatz}</code>,
                    <code>{bad_maps_link}</code>, <code>{bad_hinweis}</code>) und gehen über
                    <code>{bad_infos}</code> als kompletter Block mit.
                </p>

                <div class="mb-3">
                    <label class="form-label fw-semibold" for="poolAddress">Adresse</label>
                    <textarea class="form-control" name="address" id="poolAddress" rows="2"
                              placeholder="Straße Hausnummer&#10;PLZ Ort"></textarea>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold" for="poolDirections">Anfahrt</label>
                    <textarea class="form-control" name="directions" id="poolDirections" rows="3"
                              placeholder="Bus, Bahn, Zufahrt, Eingang …"></textarea>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold" for="poolParking">Parkplatz</label>
                    <textarea class="form-control" name="parking_info" id="poolParking" rows="2"
                              placeholder="Parkmöglichkeiten, Hinweise zum Halten …"></textarea>
                </div>
                <div class="row g-3 mb-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold" for="poolMaps">Maps-Link</label>
                        <input type="url" class="form-control" name="maps_url" id="poolMaps" maxlength="500"
                               placeholder="https://maps.google.com/…">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold" for="poolMapsEmbed">
                            Maps-Ausschnitt <span class="text-muted fw-normal">(Einbettungs-URL)</span>
                        </label>
                        <input type="url" class="form-control" name="maps_embed_url" id="poolMapsEmbed" maxlength="500"
                               placeholder="https://www.google.com/maps/embed?…">
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold" for="poolInfo">Weiterer Hinweis</label>
                    <textarea class="form-control" name="info_text" id="poolInfo" rows="2"
                              placeholder="z. B. Umkleiden, Treffpunkt, Schuhe ausziehen …"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Abbrechen</button>
                <button type="submit" class="btn btn-fisch-primary">Speichern</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
(function () {
    const modal = document.getElementById('poolModal');
    if (!modal) return;
    modal.addEventListener('show.bs.modal', function (event) {
        const btn = event.relatedTarget;
        if (!btn) return;
        const edit = btn.getAttribute('data-mode') === 'edit';
        document.getElementById('poolModalLabel').textContent = edit ? 'Standort bearbeiten' : 'Standort anlegen';
        document.getElementById('poolId').value = edit ? (btn.getAttribute('data-id') || '0') : '0';
        document.getElementById('poolName').value = edit ? (btn.getAttribute('data-name') || '') : '';
        document.getElementById('poolSlug').value = edit ? (btn.getAttribute('data-slug') || '') : '';
        document.getElementById('poolSort').value = edit ? (btn.getAttribute('data-sort') || '0') : '0';
        document.getElementById('poolActive').checked = edit ? btn.getAttribute('data-active') === '1' : true;
        document.getElementById('poolAddress').value = edit ? (btn.getAttribute('data-address') || '') : '';
        document.getElementById('poolDirections').value = edit ? (btn.getAttribute('data-directions') || '') : '';
        document.getElementById('poolParking').value = edit ? (btn.getAttribute('data-parking') || '') : '';
        document.getElementById('poolMaps').value = edit ? (btn.getAttribute('data-maps') || '') : '';
        document.getElementById('poolMapsEmbed').value = edit ? (btn.getAttribute('data-maps-embed') || '') : '';
        document.getElementById('poolInfo').value = edit ? (btn.getAttribute('data-info') || '') : '';
    });
})();
</script>
{% endblock %}