{% 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="Page">
        <div class="">
            {% include '/mission/top_menu.html.twig' %}
        </div>
        {% 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 Black">
            <div class="row"><!-- invoice list -->
                <div class="col-lg-5 col-md-12 col-sm-12">
                    <div class="Text mt-2 mb-2">
                        <div class="Size-2 Bold">
                            Espace de gestion de mission
                        </div>
                    </div>
                </div>
                <div class="col col-lg-3 col-md-4 col-sm-12 center-vertical">
                    <div class="row">
                        <div class="col col-12 d-flex">
                            <div id="ldBar1" class="ldBar label-center">
                            </div>
                            <div class="Bold Size-4 Black m-auto">Missions en cours</div>
                        </div>
                    </div>
                </div>
                <div class="col col-lg-3 col-md-4 col-sm-12 center-vertical">
                    <div class="row">
                        <div class="col col-12 d-flex">
                            <div id="ldBar2" class="ldBar label-center">
                            </div>
                            <div class="Bold Size-4 Black m-auto">Missions Achevées</div>
                        </div>
                    </div>
                </div>
                <div class="col col-lg-1 col-md-4 col-sm-12 center-vertical text-center">
                    <a href="{{ path('createMission') }}">
                        <button class="btn btn-primary round my-1">
                            Créer
                        </button>
                    </a>
                </div>
            </div>
            <div class="table-responsive">
                <table id="missionlist" style="width:100%" class="table table-striped compact w-100">
                    <thead>
                    <tr role="row">
                        <th><input type="checkbox" id="checkboxshadow1" checked=""/></th>
                        <th>N° de dossier</th>
                        <th>Assuré / Client</th>
                        <th>Etape en cours</th>
                        <th>Date limite étape</th>
                        <th>Statut</th>
                        <th>SymaBat</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for mission in missions %}
                        <tr class="cursor-pointer"
                            onclick="location.href = '{{ path("missionTimeline", { id : mission.id }) }}'">
                            <td>
                                <input type="checkbox" id="checkboxshadow1" checked=""/>
                            </td>
                            <td>
                                <div>{{ mission.fileNumber }}</div>
                            </td>
                            <td>
                                <div>
                                    {{ mission.getInsuredsAt(1).firstname }}  {{ mission.getInsuredsAt(1).lastname }}
                                </div>
                            </td>
                            {% set task = mission.getCurrentTask() %}

                            <td>
                                <div>{{ task ? task.action : "" }}</div>
                            </td>
                            <td>
                                <div>
                                    <b>{{ task ? task.endAt|date("d-m-Y") : "" }}</b> {{ task ? task.endAt|date("H:i") : "" }}
                                </div>
                            </td>
                            <td>
                                <div>{{ task ? task.statut : "" }}</div>
                            </td>
                            <td onclick="event.stopPropagation();">
                                <input type="checkbox" id="checkboxshadow1" checked="true"/>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}

    <script type="text/javascript" class="code-js">
        var max_val = parseInt("{{ me.getMissionParticipant() | length }}");
        var val1 = (parseInt('{{ me.getMyMissions("En cours") }}') / max_val * 100) || 0;
        var val2 = (parseInt('{{ me.getMyMissions("Fermée") }}') / max_val * 100) || 0;

        var bar = new ldBar("#ldBar1", {
            "value": val1,
            "preset": "circle"
        });

        var bar2 = new ldBar("#ldBar2", {
            "value": val2,
            "preset": "circle"
        });

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

        $(document).ready(function () {
            var table = $("#missionlist").DataTable({
                iDisplayLength: -1,
                paging: false,
                info: false,
                "language": {
                    "emptyTable": "No data available in table"
                },
                "oLanguage": {
                    "sSearch": "Rechercher",
                },
                columnDefs: [
                    {
                        targets: "_all",
                        className: 'dt-center',
                    },
                    {
                        targets: "_all",
                        className: 'dt-head-center',
                    },
                ],
            });
            $(".dataTables_empty").empty();
            displayOn();
        });
    </script>

{% endblock %}