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

{% block title %}Standorte verwalten - Admin{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
/* Kompakte Statistik-Cards */
.stat-card {
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.stat-number {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* Standort-Cards */
.location-card {
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-radius: 12px;
    overflow: hidden;
}

.location-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-color: #007bff;
}

.location-card .card-header {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-bottom: 1px solid #dee2e6;
}

.location-card .card-title {
    color: #495057;
    font-weight: 600;
}

/* Badge Styling */
.badge {
    font-size: 0.75rem;
    padding: 0.4em 0.8em;
}

/* Responsive Design */
@media (max-width: 768px) {
    .stat-card {
        margin-bottom: 1rem;
    }
    
    .location-card {
        margin-bottom: 1rem;
    }
}

/* Button Hover Effects */
.btn-outline-primary:hover {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
}

.btn-outline-danger:hover {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}
    </style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <p class="text-muted mb-0">Verwalten Sie alle Standorte und deren Informationen</p>
                    <h1 class="h3 mb-0">
                        <i class="fas fa-map-marker-alt me-2"></i>Standorte verwalten
                    </h1>
                </div>
                <div class="btn-group">
                    <button class="btn btn-primary" id="showCreateLocationForm">
                        <i class="fas fa-plus me-2"></i>Neuen Standort anlegen
                    </button>
                    <a href="{{ path('admin_dashboard') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Zurück zum Dashboard
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Create Location Form (initially hidden) -->
    <div class="row mb-4" id="createLocationSection" style="display: none;">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-plus me-2"></i>Neuen Standort anlegen
                    </h5>
                </div>
                <div class="card-body">
                    <form id="createLocationForm">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">
                                    <i class="fas fa-building me-1"></i>Standortname
                                </label>
                                <input type="text" class="form-control" id="locationName" name="locationName" required>
                                <div class="form-text">z.B. "Schwimmhalle Köln-Mitte"</div>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">
                                    <i class="fas fa-map-marker-alt me-1"></i>Adresse
                                </label>
                                <input type="text" class="form-control" id="locationAddress" name="locationAddress" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">
                                    <i class="fas fa-city me-1"></i>Stadt
                                </label>
                                <input type="text" class="form-control" id="locationCity" name="locationCity" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">
                                    <i class="fas fa-mail-bulk me-1"></i>PLZ
                                </label>
                                <input type="text" class="form-control" id="locationPostalCode" name="locationPostalCode" required>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">
                                    <i class="fas fa-info-circle me-1"></i>Beschreibung
                                </label>
                                <textarea class="form-control" id="locationDescription" name="locationDescription" rows="3"></textarea>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">
                                    <i class="fas fa-phone me-1"></i>Telefon
                                </label>
                                <input type="tel" class="form-control" id="locationPhone" name="locationPhone">
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">
                                    <i class="fas fa-envelope me-1"></i>E-Mail
                                </label>
                                <input type="email" class="form-control" id="locationEmail" name="locationEmail">
                            </div>
                            <div class="col-md-12">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="locationActive" name="locationActive" checked>
                                    <label class="form-check-label" for="locationActive">
                                        <i class="fas fa-toggle-on me-1"></i>Standort aktiv
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="locationShowOnNarwali" name="locationShowOnNarwali">
                                    <label class="form-check-label" for="locationShowOnNarwali">
                                        <i class="fas fa-globe me-1"></i>Anzeigen auf Narwali.de
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="locationShowOnSchwimmMitMobi" name="locationShowOnSchwimmMitMobi">
                                    <label class="form-check-label" for="locationShowOnSchwimmMitMobi">
                                        <i class="fas fa-swimmer me-1"></i>Anzeigen auf Schwimm-mit-Mobi (/booking)
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="mt-3">
                            <button type="submit" class="btn btn-success me-2">
                                <i class="fas fa-save me-1"></i>Standort speichern
                            </button>
                            <button type="button" class="btn btn-secondary" id="cancelCreateLocation">
                                <i class="fas fa-times me-1"></i>Abbrechen
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Existing Locations -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-light">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-list me-2"></i>Bestehende Standorte
                    </h5>
                </div>
                <div class="card-body">
                    <!-- Statistiken -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="stat-card bg-primary">
                                <div class="stat-number">{{ locations|length }}</div>
                                <div class="stat-label">Standorte</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stat-card bg-success">
                                <div class="stat-number">{{ locations|filter(l => l.address)|length }}</div>
                                <div class="stat-label">Mit Adresse</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stat-card bg-info">
                                <div class="stat-number">{{ locations|filter(l => l.phone)|length }}</div>
                                <div class="stat-label">Mit Telefon</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stat-card bg-warning">
                                <div class="stat-number">{{ locations|filter(l => l.email)|length }}</div>
                                <div class="stat-label">Mit E-Mail</div>
                            </div>
                        </div>
                    </div>

                    <!-- Standorte als Cards -->
                    <div class="row" id="locationsGrid">
                        {% for location in locations %}
                            <div class="col-lg-4 col-md-6 mb-4">
                                <div class="card h-100 location-card">
                                    <div class="card-header d-flex justify-content-between align-items-center">
                                        <h6 class="card-title mb-0">
                                            <i class="fas fa-map-marker-alt me-2"></i>
                                            {{ location.name }}
                                        </h6>
                                        <div class="btn-group" role="group">
                                            <button class="btn btn-sm btn-outline-primary edit-location" 
                                                    data-location-id="{{ location.id }}"
                                                    title="Bearbeiten">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-danger delete-location" 
                                                    data-location-id="{{ location.id }}"
                                                    title="Löschen">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-3">
                                            {% if location.address %}
                                                <p class="mb-1">
                                                    <i class="fas fa-home me-2 text-muted"></i>
                                                    <strong>Adresse:</strong> {{ location.address }}
                                                </p>
                                            {% endif %}
                                            
                                            {% if location.phone %}
                                                <p class="mb-1">
                                                    <i class="fas fa-phone me-2 text-muted"></i>
                                                    <strong>Telefon:</strong> 
                                                    <a href="tel:{{ location.phone }}" class="text-decoration-none">{{ location.phone }}</a>
                                                </p>
                                            {% endif %}
                                            
                                            {% if location.email %}
                                                <p class="mb-1">
                                                    <i class="fas fa-envelope me-2 text-muted"></i>
                                                    <strong>E-Mail:</strong> 
                                                    <a href="mailto:{{ location.email }}" class="text-decoration-none">{{ location.email }}</a>
                                                </p>
                                            {% endif %}
                                        </div>

                                        {% if location.description %}
                                            <div class="mb-3">
                                                <h6 class="text-muted mb-2">Beschreibung:</h6>
                                                <p class="text-muted small">{{ location.description }}</p>
                                            </div>
                                        {% endif %}

                                        <!-- Status Badges -->
                                        <div class="mb-3">
                                            {% if location.isActive %}
                                                <span class="badge bg-success me-1">Aktiv</span>
                                            {% else %}
                                                <span class="badge bg-secondary me-1">Inaktiv</span>
                                            {% endif %}
                                            {% if location.showOnNarwali %}
                                                <span class="badge bg-primary me-1">Narwali.de</span>
                                            {% endif %}
                                            {% if location.showOnSchwimmMitMobi %}
                                                <span class="badge bg-danger me-1">Schwimm-mit-Mobi</span>
                                            {% endif %}
                                            {% if location.address %}
                                                <span class="badge bg-light text-dark border me-1">Adresse</span>
                                            {% endif %}
                                            {% if location.phone %}
                                                <span class="badge bg-info me-1">Telefon</span>
                                            {% endif %}
                                            {% if location.email %}
                                                <span class="badge bg-warning me-1">E-Mail</span>
                                            {% endif %}
                                            {% if location.description %}
                                                <span class="badge bg-secondary me-1">Beschreibung</span>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% else %}
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-body text-center py-5">
                                        <i class="fas fa-map-marker-alt fa-3x text-muted mb-3"></i>
                                        <h5 class="text-muted">Keine Standorte gefunden</h5>
                                        <p class="text-muted">Es sind noch keine Standorte angelegt.</p>
                                        <button class="btn btn-primary" id="showCreateLocationForm">
                                            <i class="fas fa-plus me-2"></i>Ersten Standort anlegen
                                        </button>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Edit Location Modal -->
<div class="modal fade" id="editLocationModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-edit me-2"></i>Standort bearbeiten
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="editLocationForm">
                    <input type="hidden" id="editLocationId">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">
                                <i class="fas fa-building me-1"></i>Standortname
                            </label>
                            <input type="text" class="form-control" id="editLocationName" required>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">
                                <i class="fas fa-map-marker-alt me-1"></i>Adresse
                            </label>
                            <input type="text" class="form-control" id="editLocationAddress" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">
                                <i class="fas fa-city me-1"></i>Stadt
                            </label>
                            <input type="text" class="form-control" id="editLocationCity" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">
                                <i class="fas fa-mail-bulk me-1"></i>PLZ
                            </label>
                            <input type="text" class="form-control" id="editLocationPostalCode" required>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">
                                <i class="fas fa-info-circle me-1"></i>Beschreibung
                            </label>
                            <textarea class="form-control" id="editLocationDescription" rows="3"></textarea>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">
                                <i class="fas fa-phone me-1"></i>Telefon
                            </label>
                            <input type="tel" class="form-control" id="editLocationPhone">
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">
                                <i class="fas fa-envelope me-1"></i>E-Mail
                            </label>
                            <input type="email" class="form-control" id="editLocationEmail">
                        </div>
                        <div class="col-md-12">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="editLocationActive">
                                <label class="form-check-label" for="editLocationActive">
                                    <i class="fas fa-toggle-on me-1"></i>Standort aktiv
                                </label>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="editLocationShowOnNarwali">
                                <label class="form-check-label" for="editLocationShowOnNarwali">
                                    <i class="fas fa-globe me-1"></i>Anzeigen auf Narwali.de
                                </label>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="editLocationShowOnSchwimmMitMobi">
                                <label class="form-check-label" for="editLocationShowOnSchwimmMitMobi">
                                    <i class="fas fa-swimmer me-1"></i>Anzeigen auf Schwimm-mit-Mobi (/booking)
                                </label>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                <button type="button" class="btn btn-primary" id="saveEditLocation">
                    <i class="fas fa-save me-1"></i>Änderungen speichern
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Show/hide create location form
            document.getElementById('showCreateLocationForm').addEventListener('click', function() {
                const section = document.getElementById('createLocationSection');
                section.style.display = section.style.display === 'none' ? 'block' : 'none';
            });

            document.getElementById('cancelCreateLocation').addEventListener('click', function() {
                document.getElementById('createLocationSection').style.display = 'none';
                document.getElementById('createLocationForm').reset();
            });

            // Load existing locations
            loadLocations();

            // Handle create location form submission
            document.getElementById('createLocationForm').addEventListener('submit', function(e) {
                e.preventDefault();
                createLocation();
            });

            // Handle filters (only if they exist)
            const searchLocation = document.getElementById('searchLocation');
            const filterStatus = document.getElementById('filterStatus');
            const filterCity = document.getElementById('filterCity');
            
            if (searchLocation) searchLocation.addEventListener('input', filterLocations);
            if (filterStatus) filterStatus.addEventListener('change', filterLocations);
            if (filterCity) filterCity.addEventListener('change', filterLocations);

            // Handle edit location save button
            document.getElementById('saveEditLocation').addEventListener('click', function() {
                saveLocationChanges();
            });

            // Handle edit buttons in cards
            document.addEventListener('click', function(e) {
                if (e.target.closest('.edit-location')) {
                    const button = e.target.closest('.edit-location');
                    const locationId = button.getAttribute('data-location-id');
                    if (locationId) {
                        editLocation(locationId);
                    }
                }
                
                if (e.target.closest('.delete-location')) {
                    const button = e.target.closest('.delete-location');
                    const locationId = button.getAttribute('data-location-id');
                    if (locationId) {
                        deleteLocation(locationId);
                    }
                }
            });
        });

        function loadLocations() {
            const tableBody = document.getElementById('locationsTableBody');
            
            // Check if table view exists
            if (tableBody) {
                tableBody.innerHTML = `
                    <tr>
                        <td colspan="5" class="text-center">
                            <i class="fas fa-spinner fa-spin me-2"></i>Standorte werden geladen...
                        </td>
                    </tr>
                `;
                
                // Load locations from backend data
                {% if locations %}
                    const locations = {{ locations|map(l => {
                        id: l.id,
                        name: l.name,
                        address: l.address,
                        city: l.city,
                        postalCode: l.postalCode,
                        phone: l.phone,
                        email: l.email,
                        description: l.description,
                        isActive: l.isActive ?? true
                    })|json_encode|raw }};
                    displayLocations(locations);
                {% else %}
                    tableBody.innerHTML = `
                        <tr>
                            <td colspan="7" class="text-center text-muted">
                                <i class="fas fa-inbox me-2"></i>Keine Standorte vorhanden
                            </td>
                        </tr>
                    `;
                {% endif %}
            }
        }

        function displayLocations(locations) {
            const tbody = document.getElementById('locationsTableBody');
            
            // Check if table view exists
            if (!tbody) {
                return;
            }
            
            if (!locations || locations.length === 0) {
                tbody.innerHTML = `
                    <tr>
                        <td colspan="5" class="text-center text-muted">
                            <i class="fas fa-inbox me-2"></i>Keine Standorte vorhanden
                        </td>
                    </tr>
                `;
                return;
            }

            tbody.innerHTML = locations.map(location => `
                <tr>
                    <td>
                        <strong>${location.name || 'Unbenannt'}</strong>
                        ${location.description ? `<br><small class="text-muted">${location.description}</small>` : ''}
                    </td>
                    <td>
                        <div class="small">
                            ${location.address || 'Keine Adresse'}<br>
                            ${location.postalCode || ''} ${location.city || ''}
                        </div>
                    </td>
                    <td>
                        <div class="small">
                            ${location.phone ? `<i class="fas fa-phone me-1"></i>${location.phone}<br>` : ''}
                            ${location.email ? `<i class="fas fa-envelope me-1"></i>${location.email}` : ''}
                        </div>
                    </td>
                    <td>
                        <span class="badge ${location.isActive ? 'bg-success' : 'bg-danger'}">
                            ${location.isActive ? 'Aktiv' : 'Inaktiv'}
                        </span>
                    </td>
                    <td>
                        <div class="btn-group btn-group-sm">
                            <button class="btn btn-outline-primary" onclick="editLocation(${location.id})" title="Bearbeiten">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="btn btn-outline-${location.isActive ? 'warning' : 'success'}" 
                                    onclick="toggleLocation(${location.id})" 
                                    title="${location.isActive ? 'Deaktivieren' : 'Aktivieren'}">
                                <i class="fas fa-toggle-${location.isActive ? 'off' : 'on'}"></i>
                            </button>
                            <button class="btn btn-outline-danger" onclick="deleteLocation(${location.id})" title="Löschen">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </td>
                </tr>
            `).join('');
        }

        function createLocation() {
            const form = document.getElementById('createLocationForm');
            const formData = new FormData(form);
            
            fetch('{{ path('location_create') }}', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Hide form and reset
                    document.getElementById('createLocationSection').style.display = 'none';
                    form.reset();
                    
                    // Reload locations
                    loadLocations();
                    
                    // Show success message
                    showAlert('Standort erfolgreich erstellt!', 'success');
                } else {
                    showAlert('Fehler beim Erstellen des Standorts: ' + (data.message || 'Unbekannter Fehler'), 'danger');
                }
            })
            .catch(error => {
                console.error('Error creating location:', error);
                showAlert('Fehler beim Erstellen des Standorts: ' + error.message, 'danger');
            });
        }


        function editLocation(locationId) {
            // Load location data and populate edit modal
            fetch(`{{ path('location_get', {'id': '__ID__'}) }}`.replace('__ID__', locationId))
                .then(response => response.json())
                .then(data => {
                    // Populate edit form with location data
                    document.getElementById('editLocationId').value = data.id;
                    document.getElementById('editLocationName').value = data.name;
                    document.getElementById('editLocationPhone').value = data.phone || '';
                    document.getElementById('editLocationAddress').value = data.address || '';
                    document.getElementById('editLocationPostalCode').value = data.postalCode || '';
                    document.getElementById('editLocationCity').value = data.city || '';
                    document.getElementById('editLocationEmail').value = data.email || '';
                    document.getElementById('editLocationDescription').value = data.description || '';
                    document.getElementById('editLocationActive').checked = data.isActive || false;
                    document.getElementById('editLocationShowOnNarwali').checked = data.showOnNarwali || false;
                    document.getElementById('editLocationShowOnSchwimmMitMobi').checked = data.showOnSchwimmMitMobi || false;
                    
                    // Show edit modal
                    new bootstrap.Modal(document.getElementById('editLocationModal')).show();
                })
                .catch(error => {
                    console.error('Error loading location:', error);
                    showAlert('Fehler beim Laden des Standorts', 'danger');
                });
        }

        function saveLocationChanges() {
            const locationId = document.getElementById('editLocationId').value;
            const formData = new FormData();
            
            formData.append('locationName', document.getElementById('editLocationName').value);
            formData.append('locationAddress', document.getElementById('editLocationAddress').value);
            formData.append('locationCity', document.getElementById('editLocationCity').value);
            formData.append('locationPostalCode', document.getElementById('editLocationPostalCode').value);
            formData.append('locationPhone', document.getElementById('editLocationPhone').value);
            formData.append('locationEmail', document.getElementById('editLocationEmail').value);
            formData.append('locationDescription', document.getElementById('editLocationDescription').value);
            formData.append('locationActive', document.getElementById('editLocationActive').checked);
            formData.append('locationShowOnNarwali', document.getElementById('editLocationShowOnNarwali').checked);
            formData.append('locationShowOnSchwimmMitMobi', document.getElementById('editLocationShowOnSchwimmMitMobi').checked);
            
            fetch(`{{ path('location_update', {'id': '__ID__'}) }}`.replace('__ID__', locationId), {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Close modal
                    const modal = bootstrap.Modal.getInstance(document.getElementById('editLocationModal'));
                    modal.hide();
                    
                    // Reload page to show updated data
                    window.location.reload();
                } else {
                    showAlert('Fehler beim Aktualisieren des Standorts: ' + (data.message || 'Unbekannter Fehler'), 'danger');
                }
            })
            .catch(error => {
                console.error('Error updating location:', error);
                showAlert('Fehler beim Aktualisieren des Standorts: ' + error.message, 'danger');
            });
        }

        function deleteLocation(locationId) {
            if (confirm('Sind Sie sicher, dass Sie diesen Standort löschen möchten?')) {
                fetch(`{{ path('location_delete', {'id': '__ID__'}) }}`.replace('__ID__', locationId), {
                    method: 'DELETE'
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        loadLocations();
                        showAlert('Standort erfolgreich gelöscht!', 'success');
                    } else {
                        showAlert('Fehler beim Löschen des Standorts', 'danger');
                    }
                })
                .catch(error => {
                    console.error('Error deleting location:', error);
                    showAlert('Fehler beim Löschen des Standorts', 'danger');
                });
            }
        }

        function toggleLocation(locationId) {
            fetch(`{{ path('location_toggle', {'id': '__ID__'}) }}`.replace('__ID__', locationId), {
                method: 'POST'
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    loadLocations();
                    showAlert('Standort-Status erfolgreich geändert!', 'success');
                } else {
                    showAlert('Fehler beim Ändern des Standort-Status', 'danger');
                }
            })
            .catch(error => {
                console.error('Error toggling location:', error);
                showAlert('Fehler beim Ändern des Standort-Status', 'danger');
            });
        }

        function filterLocations() {
            const searchInput = document.getElementById('searchLocation');
            const statusFilter = document.getElementById('filterStatus');
            const cityFilter = document.getElementById('filterCity');
            
            if (!searchInput || !statusFilter || !cityFilter) {
                return;
            }
            
            const searchTerm = searchInput.value.toLowerCase();
            const rows = document.querySelectorAll('#locationsTableBody tr');
            
            rows.forEach(row => {
                const cells = row.cells;
                if (cells.length < 7) return; // Skip empty/loading rows
                
                const name = cells[0].textContent.toLowerCase();
                const address = cells[1].textContent.toLowerCase();
                const status = cells[4].querySelector('.badge').classList.contains('bg-success') ? 'active' : 'inactive';
                
                let show = true;
                
                // Search filter
                if (searchTerm && !name.includes(searchTerm) && !address.includes(searchTerm)) {
                    show = false;
                }
                
                // Status filter
                if (statusFilter && status !== statusFilter) {
                    show = false;
                }
                
                // City filter (would need to be implemented based on actual city data)
                if (cityFilter && !address.includes(cityFilter.toLowerCase())) {
                    show = false;
                }
                
                row.style.display = show ? '' : 'none';
            });
        }
        
        function showAlert(message, type = 'info') {
            // Create alert element
            const alertDiv = document.createElement('div');
            alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
            alertDiv.innerHTML = `
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            
            // Insert at top of container
            const container = document.querySelector('.container-fluid');
            container.insertBefore(alertDiv, container.firstChild);
            
            // Auto-remove after 5 seconds
            setTimeout(() => {
                if (alertDiv.parentNode) {
                    alertDiv.remove();
                }
            }, 5000);
        }
    </script>
{% endblock %}