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

{% block title %}Détails de l'établissement - {{ etablissement.appellationOfficielle }}{% endblock %}

{% block body %}
    <div class="container mt-4">
        <h1 class="text-center mb-4">Détails de l'établissement : {{ etablissement.appellationOfficielle }}</h1>

        <div class="row">
            <div class="col-md-6">
                <p><strong>Appellation Officielle :</strong> {{ etablissement.appellationOfficielle }}</p>
                <p><strong>Commune :</strong> {{ etablissement.commune }}</p>
                <p><strong>Département :</strong> {{ etablissement.departement }}</p>
                <p><strong>Région :</strong> {{ etablissement.region }}</p>
                <p><strong>Académie :</strong> {{ etablissement.academie }}</p>
            </div>
            <div class="col-md-6">
                <p><strong>Latitude :</strong> {{ etablissement.latitude }}</p>
                <p><strong>Longitude :</strong> {{ etablissement.longitude }}</p>
                <p><strong>État :</strong> {{ etablissement.etatEtablissementLibe.value }}</p>
                <p><strong>Nature UAI :</strong> {{ etablissement.natureUai }}</p>
                <p><strong>Nature Libellé :</strong> {{ etablissement.natureLibe }}</p>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <p><strong>Code Postal :</strong> {{ etablissement.codePostal }}</p>
                <p><strong>Type de Contrat :</strong> {{ etablissement.typeContrat }}</p>
            </div>
            <div class="col-md-6">
                <p><strong>Libellé Type Contrat :</strong> {{ etablissement.libelleTypeContrat }}</p>
                <p><strong>Code Ministère :</strong> {{ etablissement.codeMinistere }}</p>
                <p><strong>Libellé Ministère :</strong> {{ etablissement.libelleMinistere }}</p>
                <p><strong>Date d'Ouverture :</strong> {{ etablissement.dateOuverture|date('d/m/Y') }}</p>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-md-12">
                <h3 class="text-center">Carte de l'établissement</h3>
                <!-- Carte Leaflet -->
                <div id="map" style="height: 400px;"></div>
            </div>
        </div>

        <div class="text-center mt-4">
            <a href="{{ path('etablissements_par_departement', {'code_departement': etablissement.codeDepartement}) }}" class="btn btn-primary">Retour au département</a>
        </div>
    </div>

    {# Ajout de Leaflet.js et du CSS pour la carte #}
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

    <script>
        // Initialiser la carte
        var map = L.map('map').setView([{{ etablissement.latitude }}, {{ etablissement.longitude }}], 13); // Centrer la carte sur la latitude et longitude de l'établissement

        // Ajouter le fond de carte OpenStreetMap
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        // Ajouter un marqueur pour la localisation de l'établissement
        var marker = L.marker([{{ etablissement.latitude }}, {{ etablissement.longitude }}]).addTo(map);

        // Ajouter un popup au marqueur
        marker.bindPopup("<b>{{ etablissement.appellationOfficielle }}</b><br>Commune: {{ etablissement.commune }}").openPopup();
    </script>
{% endblock %}
