{% extends "@oderaScenario/layout.html.twig" %}

{% block scenario_body %}

    <div id="page">
        <div class="scenario">
            {% if isSupervised %}
                <h2 class='supervision_title'>[SUPERVISION] 
                    {% if user %}Parcelles de {{ user.prenom  }} {{ user.nom }}{% endif %}</h2>
                {% else %}
                <h2>Mes Parcelles</h2>
            {% endif %}

            {% if is_granted('ROLE_EXPERT') %}
                <ul>
                    <li>Dans un premier temps la saisie du système initial permet d'évaluer la situation actuelle.</li>
                    <li>Vous pourrez ensuite construire un ou plusieurs nouveaux systèmes qui seront comparés au système initial.</li>
                </ul>
            {% else %}
                <ul>
                    <li>La saisie du système initial permet d'évaluer la situation actuelle.</li>
                </ul>
            {% endif %}

            <div class="center {% if isSupervised %}supervision{% endif %}">

                <div style="margin:10px;">
                    {% if isSupervised == false %}
                        <a href="{{ path('odera_scenario_new') }}" class="button"><i class="fas fa-folder-plus"></i> Créer une nouvelle parcelle</a>
                    {% endif %}
                </div>
                <br>
                <table class="liste-scenarios-odera">
                    <thead>
                        <tr>
                            <th>Exploitation</th>
                            <th>Parcelle</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for scenario in listScenarios %}
                            {% if not scenario.isDeleted %}
                                <tr>
                                    <td>{{ scenario.exploitation }}</td>
                                    <td>{{ scenario.parcelle }}</td>
                                    {#
                                    <td class="text-center"><a class="button" href="{{ path('odera_scenario_recapitulatif', {'id': scenario.id }) }}">
                                            <i class="far fa-eye"></i></a></td> #}
                                    <td><a class="button button-min" href="{{ path('odera_scenario_edit', {'id': scenario.id }) }}"><i class="far fa-edit"></i> Editer</a></td>

                                    <td><a class="button button-min" href="{{ path('odera_scenario_resultat', {'id': scenario.id }) }}"><i class="fas fa-chart-bar"></i> Résultat</a></td>
                                    <td>

                                        {% if app.user == scenario.createur or is_granted('ROLE_SUPER_ADMIN') %}
                                            <a class="button button-min btn-delete bt-danger" href="{{ path('odera_scenario_delete', {'id': scenario.id }) }}"><i class="far fa-trash-alt"></i> Supprimer</a>
                                        {% endif %}
                                    </td>
                                    {% if is_granted('ROLE_EXPERT') %}
                                        <td>
                                            <a class="button button-min" href="{{ path('odera_systeme_index', {'id': scenario.id }) }}"><i class="fas fa-project-diagram"></i> Scénarios</a></td>
                                        {% endif %}
                                    <td><a class="button button-min" href="{{ path('odera_scenario_clone_parcelle', { 'id' : scenario.id , 'hasParent' : 0}) }}"><i class="far fa-copy"></i> Copier la parcelle</a></td>

                                    {# <td>{% if scenario.toReport == false and scenario.rapport %}<a class="button button-min" href="{{ asset('rapports/' ~ scenario.rapport.name) }}?{{ timestampNow }}" target="_blank"><i class="far fa-file-pdf"></i> Rapport</a>{% else %}{% endif %}</td> #}
                                    <td>{% if scenario.toReport == false and scenario.rapport %}<a class="button button-min" href="{{ path('odera_scenario_rapport', {'id': scenario.id }) }}" target="_blank"><i class="far fa-file-pdf"></i> Rapport</a>{% else %}{% endif %}</td>
                                </tr>
                            {% endif %}
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            {% if app.user.hasRole('ROLE_EXPERT') or app.user.hasRole('ROLE_ADMIN')%}
                <br><hr><h2>Mes Supervisions</h2>
                <div class='center supervision'>
                    {% if app.user.supervised is empty %}
                        <h3>Vous ne supervisez personne.</h3>
                        <p>Pour superviser quelqu'un, vous devez transmettre à la personne que vous souhaitez superviser votre identifiant ou votre adresse mail.
                            <br>Elle pourra alors vous ajouter comme superviseur dans son profil</p>
                        {% else %}
                        <p>Vous supervisez:</p><br>
                        <table class="liste-scenarios-odera">
                            <thead>
                                <tr>
                                    <th>Identifiant</th>
                                    <th>Nom</th>
                                    <th>Prénom</th>
                                    <th>Email</th>
                                </tr>
                            </thead>
                            {% for supervised in app.user.supervised %}
                                <tr>
                                    <td>{{ supervised.username }}</td>
                                    <td>{{ supervised.prenom|capitalize }}</td>
                                    <td>{{ supervised.nom|capitalize }} </td>
                                    <td><a href="mailto:{{ supervised.email }}" class="email">{{ supervised.email }}</a></td>
                                    <td><a class="button button-min"  href="{{ path('odera_scenario_all_user', {'user' : supervised.id}) }}">Voir les parcelles</a></td>
                                </tr>
                            {% else %}
                                personne
                            {% endfor %}
                        </table>
                    {% endif %}
                </div>
            {% endif %}


        </div>

        {# Gestion fenêtre modale : non foncionnel, mais peut servir de base pour implémenter la fonction d'alerte avant suppression
        
                <script>
                    var modal = document.getElementById('deleteModal');
                    document.querySelector('.btn-delete');
                    var btn = document.getElementsByClassName("btn-delete");
                    var span = document.getElementsByClassName("close")[0];
        
                    // When the user clicks the button, open the modal
                    btn.onclick = function () {
                        modal.style.display = "block";
                    }
        
                    // When the user clicks on <span> (x), close the modal
                    span.onclick = function () {
                        modal.style.display = "none";
                    }
        
                    // When the user clicks anywhere outside of the modal, close it
                    window.onclick = function (event) {
                        if (event.target == modal) {
                            modal.style.display = "none";
                        }
                    }
                </script>
                <!-- Delete Modal-->
                <div class="modal" id="deleteModal" role="dialog">
                    <div class="modal-dialog">
                        <!-- Modal content-->
                        <div class="modal-content">
                            <span class="close">&times;</span>
                            <div class="modal-body">
                                <h3>Etes-vous sûr de vouloir supprimer le scénario ?</h3>
                            </div>
                            <div class="modal-footer">
                                <button class="btn btn-danger" type="button" data-dismiss="modal">Yes</button>
                                <button class="btn btn-primary" type="button" data-dismiss="modal">No</button>
                            </div>
                        </div>
                    </div>
                </div>
                
        
        #}

    {% endblock scenario_body %}