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

{% block title %}Magasins inutilisés - Aix-en-Provence{% endblock %}

{% block body %}
<div class="container mt-4">
    <h1><i class="bi bi-shop fs-2"></i> Magasins inutilisés <small class="text-muted">- Aix-en-Provence</small></h1>

    <div class="alert alert-info">
        Chargement des données en cours...
    </div>

    <div id="stores-container" class="mt-4" style="display: none;">
        <h2>Liste des magasins inutilisés</h2>
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Nom</th>
                        <th>Type</th>
                        <th>Adresse</th>
                    </tr>
                </thead>
                <tbody id="stores-list">
                    <!-- Les données seront chargées ici par JavaScript -->
                </tbody>
            </table>
        </div>
    </div>

    <div id="error-container" class="alert alert-danger mt-4" style="display: none;">
        <strong>Erreur:</strong> <span id="error-message">Une erreur est survenue lors du chargement des données.</span>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const jsonUrl = {{ json_url|json_encode|raw }};
    const storesContainer = document.getElementById('stores-container');
    const storesList = document.getElementById('stores-list');
    const errorContainer = document.getElementById('error-container');
    const loadingAlert = document.querySelector('.alert-info');

    // Fonction pour charger les données JSON via XHR
    function loadStoresData() {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', jsonUrl, true);

        xhr.onload = function() {
            loadingAlert.style.display = 'none';

            if (xhr.status === 200) {
                try {
                    const data = JSON.parse(xhr.responseText);
                    displayStores(data);
                } catch (e) {
                    console.error('Erreur de parsing JSON:', e);
                    showError('Le format des données reçues est invalide.');
                }
            } else {
                showError('Impossible de charger les données (Statut: ' + xhr.status + ')');
            }
        };

        xhr.onerror = function() {
            loadingAlert.style.display = 'none';
            showError('Une erreur réseau est survenue.');
        };

        xhr.send();
    }

    // Fonction pour afficher les magasins dans le tableau
    function displayStores(data) {
        if (!data || !data.unused_stores || data.unused_stores.length === 0) {
            showError('Aucun magasin inutilisé trouvé dans les données.');
            return;
        }

        // Vider le tableau existant
        storesList.innerHTML = '';

        // Ajouter chaque magasin au tableau
        data.unused_stores.forEach(function(store) {
            const row = document.createElement('tr');

            const nameCell = document.createElement('td');
            nameCell.textContent = store.name || 'Non spécifié';

            const typeCell = document.createElement('td');
            typeCell.textContent = store.type || 'Non spécifié';

            const addressCell = document.createElement('td');
            addressCell.textContent = store.address || 'Non spécifié';

            row.appendChild(nameCell);
            row.appendChild(typeCell);
            row.appendChild(addressCell);

            storesList.appendChild(row);
        });

        // Afficher le conteneur des magasins
        storesContainer.style.display = 'block';
    }

    // Fonction pour afficher une erreur
    function showError(message) {
        document.getElementById('error-message').textContent = message;
        errorContainer.style.display = 'block';
    }

    // Charger les données au chargement de la page
    loadStoresData();
});
</script>
{% endblock %}