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

{% block title %}displayClaims{% endblock %}

{% block body %}

<div id="loader">
    <div class="loader">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<div id="mission" class="container-fluid Page">
    {% include '/mission/top_menu.html.twig' %}
    {% for message in app.flashes('success') %}
        <div class="alert alert-success">
            {{ message }}
        </div>
    {% endfor %}
    {% for message in app.flashes('warning') %}
        <div class="alert alert-warning">
            {{ message }}
        </div>
    {% endfor %}
    <div class="container-fluid" id="detailsMissionPage">
        {% include '/mission/details/top_menu.html.twig' %}

        <div class="outil-space center-vertical-no-height">
            <button class="btn btn-primary height-80-per ml-auto mr-0 float-right">NOUVELLE TÂCHE</button>
        </div>
        <div class="detailsMissionItem Black p-0">
            <div class="container-fluid h-100">
                <div class="row h-100">
                    <div class="table-responsive" style="height: 70%">
                        <table class="table dt-responsive nowrap" style="width:100%">
                            <thead>
                            <tr>
                                <th>Tâches</th>
                                <th>Assigné à</th>
                                <th>Date Limite</th>
                                <th>Statut</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for task in mission.task %}
                                <tr>
                                    <td>
                                        <div style="font-weight: bold">{{ task.action }}</div>
                                    </td>
                                    <td>
                                        <div style="font-weight: bold">{{ task.user[0].username }}</div>
                                    </td>
                                    <td>
                                        <div><b>{{ task.endAt|date("d-m-Y") }}</b> {{ task.endAt|date("H:i") }}
                                        </div>
                                    </td>
                                    <td>
                                        <div style="font-weight: bold; color: {{ task.statutType == "COMPLETED" ? "green" : task.statutType == "WAITING" ? "orange" : "red" }}">{{ task.statut }}</div>
                                    </td>
                                    {% if (task.user[0].id == me.id or me.getRoles()[0] == "ROLE_SYMA" or me.getRoles()[0] == "ROLE_SUPERADMIN") and task.statutType == "WAITING" %}
                                        <td>
                                            <div onclick="validTask({{ task.id }})">
                                                <i class="bx bx-right-arrow-alt valid-task"></i>
                                            </div>
                                        </td>
                                    {% endif %}
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="dialog" title="Validation de tâche" class="jquery_dialog">
        <p>Souhaitez-vous validé la tâche ?</p>
    </div>
</div>
{% endblock %}

{% block javascripts %}

    <script>

        function displayOn()
        {
            document.getElementById("loader").style.display = "none";
            document.getElementById("mission").style.display = "block";
        }

        function validTask(id) {
            $( "#dialog" ).css("display", "block");
            $( "#dialog" ).dialog({
                resizable: false,
                height: "auto",
                width: 400,
                modal: true,
                buttons: {
                    "Confirmer": function () {
                        $(this).dialog("close");
                        $.ajax({
                            method: "POST",
                            url: "{{ path('get_next_task') }}",
                            data: {
                                task: id,
                            },
                            success: function (responses) {
                                console.log(responses);
                                let link = "{{ path("missionTask", { id : "ID" }) }}";
                                link = link.replace('ID', responses);
                                window.location.replace(link);
                            }
                        })
                    },
                    "Annuler": function () {
                        $(this).dialog("close");
                    }
                }
            });
        }

        $(document).ready(function () {
            displayOn();
        });
    </script>

{% endblock %}