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

{% block title %}Gestion du site{% endblock %}

{% block body %}
    <?php header('Access-Control-Allow-Origin: *'); ?>
    <div class="container-fluid">
        <h1 class="text-center">Gestion du Site</h1>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="collapse navbar-collapse" id="navbarText">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="{{ path('admin.article') }}">Articles <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ path('user') }}">Utilisateurs</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Base de données</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ path('logout') }}">Se déconecter</a>
                    </li>
                </ul>
                <span class="navbar-text">
      Bienvenu {{ app.user.prenom }} {{ app.user.nom }}({{ app.user.email }})
    </span>
            </div>
        </nav>
        <div class="card card_admin">
            <div class="card-header text-center">
                <h2>Données brut de la station Météo</h2>
            </div>
            <div class="card-body">
                <h5 class="card-title text-center">Données en direct</h5>
                <p class="text-center">Rafraîchissement des données dans <span id="compteur">30</span> seconde(s)...</p>
                <div class="row text-center">
                    <div class="col md lg sm">

                        <span id="online"></span>
                    </div>
                </div>
                <div class="row text-center">
                    <div class="col md lg sm">
                        Heure du relevé: <span id="heure_releve"> </span> Date du relevé:<span id="date_releve"> </span>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-md-6 col-lg-6 col-sm-6">
                        <table id="donne_meteo" class="table table-hover">
                                <tbody>
                                <tr>
                                    <td>Température DHT11</td>
                                    <td id="temp_dht11"></td>
                                    <td>C°</td>
                                </tr>
                                <tr>
                                    <td>Température BMP180</td>
                                    <td id="temp_bmp180"></td>
                                    <td>C°</td>
                                </tr>
                                <tr>
                                    <td>Capteur de lumière</td>
                                    <td id="capt_lumi"></td>
                                    <td>lux</td>
                                </tr>
                                <tr>
                                    <td>Anemométre</td>
                                    <td id="anemo"></td>
                                    <td>Km/h</td>
                                </tr>
                                <tr>
                                    <td>Tension capteur solaire</td>
                                    <td id="tens_capt"></td>
                                    <td>vlt</td>
                                </tr>
                                <tr>
                                    <td>Taux d'ensoleilement</td>
                                    <td id="taux_soleil"></td>
                                    <td>%</td>
                                </tr>
                                <tr>
                                    <td colspan="3" id="taux">

                                    </td>
                                </tr>
                                </tbody>
                        </table>
                    </div>
                    <div class="col-md-6 col-lg-6 col-sm-6">
                        <table class="table table-hover">
                            <tbody>
                                <tr>
                                    <td>Humiditer DHT11</td>
                                    <td id="humiditer"></td>
                                    <td>%</td>
                                </tr>
                                <tr>
                                    <td>Pression atmo BMP180</td>
                                    <td id="pression"></td>
                                    <td>hpa</td>
                                </tr>
                                <tr>
                                    <td>Pluviométre</td>
                                    <td id="pluvio"></td>
                                    <td>mm</td>
                                </tr>
                                <tr>
                                    <td>Girouette</td>
                                    <td id="girou"></td>
                                </tr>
                                <tr>
                                    <td>Bit de vie</td>
                                    <td id="bit_vie"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        {{ form_start(form) }}
        <div class="card  text-center">
            <div class="card-header">
                <h2>Gestion alerte Météo</h2>
            </div>
            <div class="card-body">
                <h5 class="card-title">Alerte Météo Manuel</h5>
                <p class="card-text">Création d'alerte météo en manuel en plus des alertes automatique</p>
                {{ form_widget(form) }}
                <button class="btn btn-primary btn-block" type="submit">Envoyer</button>
                {{ form_end(form) }}
                <br>
                <h5 class="card-title">Historique des alertes Météo Auto/Manu</h5>
                <p class="card-text">L'historique des 5 dernières alertes Météo</p>
                <div class="table-responsive-sm table-responsive-md table-responsive-lg">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th scope="col">Date de création</th>
                            <th scope="col">Type d'alerte</th>
                            <th scope="col">En ligne</th>
                            <th scope="col">Niveau de vigilance</th>
                            <th scope="col">Message d'alerte</th>
                            <th scope="col">Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for alerte in alerterepo %}
                        <tr>
                            <td>{{ alerte.CreatdAt|date("d/m/Y H:i") }}</td>
                            <td>
                                {% if  alerte.type == true%}
                                    Manuel
                                {% else %}
                                    Automatique
                                {% endif %}
                            </td>
                            <td>
                                {% if  alerte.online  == true %}
                                    Alerte en ligne
                                {% else %}
                                    Alerte Hor ligne
                                {% endif %}
                            </td>
                            <td>{{ alerte.level }}</td>
                            <td>{{ alerte.message }}</td>
                            <td>
                                <a href="{{ path ('admin.alerte.edit', {id: alerte.id})}}" class="btn btn-primary">Editer</a>
                                <form method="POST" action="{{ path ('admin.alerte.delete', {id: alerte.id})}}" style="display:inline-block">
                                    <input type="hidden" name="_method" value="DELETE">
                                    <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ alerte.id)}}">
                                    <button class="btn btn-danger" onclick="return confirm('Voulez-vous vraiment supprimer cette alerte ?')">Supprimer</button>
                                </form>
                            </td>
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="card-footer text-muted">
                    <a href="#">Voir toute les alertes</a>
                </div>
            </div>
        </div>

    </div>
    <script src="{{ asset('js/donnee_meteo.js') }}"></script>
    <script src="{{ asset('js/moment-with-locales.js') }}"></script>


{% endblock %}