{% 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>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.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' }}">
                                <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="5" 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">
        <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">
                    <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>
            </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;
    });
})();
</script>
{% endblock %}