{% 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">
        <div id="content">
            <div id="wrapper">
                <div id="carte" class="carte">
                </div>
                <div id="over_map">
                    Mission : {{ mission.fileNumber }}
                </div>
            </div>
            <div id="filenumber" style="display: none; height: fit-content; background: var(--color-red-secondary)">
                <div id="not_over_map">
                    Mission : {{ mission.fileNumber }}
                </div>
            </div>
        </div>
        {% include '/mission/details/top_menu.html.twig' %}
        <div class="outil-space center-vertical-no-height">
        </div>
        <div id="content" class="detailsMissionItemMap">
            <div class="container-fluid overflow-auto h-100 Black" id="mission-timeline">
                <div class="timeline">
                    <div class="timeline__event animated fadeInUp delay-3s timeline__event--type1 newEntry_box">
                        <div class="timeline__event__icon newEntry_icon">
                            <div class="timeline__event__date" style="left: -65px !important;">Auj.</div>
                            <div class="timeline__event__author w-100">
                                <form action="" method="post">
                                    <input class="w-100" placeholder="Nouvelle entrée" id="newEntry" name="newEntry"/>
                                    <button type="submit" class="border-0 bg-transparent">
                                        <i class="bx bx-send"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                {% set timelines = mission.timeline|reverse %}
                {% set realizedDate = null %}
                {% set entry = 0 %}
                {% for item in timelines %}
                    {% if realizedDate == null or item.realizedAt|date("d/m/Y") != realizedDate|date("d/m/Y") %}
                        {% if entry > 0 %}
                            </div>
                        {% endif %}
                        {% set entry = entry + 1 %}
                        {% set realizedDate = item.realizedAt() %}
                        {% set differenceDays = date(realizedDate|date("m/d/Y")).diff(date("now")).days %}
                        <hr>
                        <div class="timeline-date"><b>{{ differenceDays == 0 ? "Aujourd'hui" : differenceDays == 1 ? "Hier" :  differenceDays > 7 and  differenceDays < 14 ? "La semaine dernière" : "Il y a " ~ differenceDays ~ " jours" }}</b> - {{ date(realizedDate)|localizeddate('full', 'none', 'fr')|capitalize }}</div>
                        <hr>
                        <div class="timeline" id="timeline-{{ item.id }}">
                    {% endif %}
                            <div class="timeline__event animated fadeInUp delay-3s timeline__event--type1">
                                <div class="timeline__event__icon col-lg-3 col-md-4 col-sm-6">
                                    <div class="timeline__event__date">{{ item.realizedAt|date("H:i") }}</div>
                                    <div class="timeline__event__author">
                                        <div>{{ item.realizedBy.username }}</div>
                                        <div></div>
                                    </div>
                                </div>
                                <div class="timeline__event__content col-lg-9 col-md-8 col-sm-6">
                                    <div class="timeline__event__description">
                                        <div>{{ item.action }}</div>
                                    </div>
                                </div>
                                {% if item.isAuto == false and (me.roles()[0] == "ROLE_SYMA" or me.roles()[0] == "ROLE_SUPERADMIN") %}
                                <div class="center-vertical">
                                    <div class="dropdown">
                                        <span class="bx bx-dots-vertical-rounded font-medium-3 dropdown-toggle nav-hide-arrow cursor-pointer" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="menu"></span>
                                        <div class="dropdown-menu dropdown-menu-right" style="">
                                            <a class="dropdown-item cursor-pointer" onclick="editTimeline('{{ item.id }}')"><i class="bx bx-edit-alt mr-1"></i> modifier</a>
                                            <a class="dropdown-item cursor-pointer" onclick="deleteTimeline('{{ item.id }}')"><i class="bx bx-trash mr-1"></i> supprimer</a>
                                        </div>
                                    </div>
                                </div>
                                {% endif %}
                            </div>
                       {% if loop.last == true  %}
                       </div>
                        {% endif %}
                    {% endfor %}
            </div>
        </div>
    </div>
    <div id="dialogDelete" title="Suppression d'entrée du journal de bord" class="jquery_dialog">
        <div>Êtes-vous sûr de vouloir supprimer cette entrée ?</div>
    </div>
    <div id="dialogEdit" title="Edition d'entrée du journal de bord" class="jquery_dialog">
        <label for="newEntryEdit"></label>
        <input class="form-control" name="newEntryEdit" id="newEntryEdit"></input>
    </div>
</div>

{% endblock %}

{% block javascripts %}

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUfVQ2upnFTawcAJJefOPPGh1wVZFbQh0"></script>
    <script>
        if ( window.history.replaceState ) {
            window.history.replaceState( null, null, window.location.href );
        }

        var el = document.getElementById('mission-timeline');
        el.addEventListener('scroll', function(event) {
            if (scrollbarVisible(el) === true) {
                if (event.target.scrollTop === 0) {
                    $('#over_map').css("display", "block");
                    $('#wrapper').css("height", "14rem");
                    $('.detailsMissionItemMap').css("height",
                        "calc(100% - var(--mission-map) - var(--mission-menu-secondary) - var(--mission-outil)");
                    $("#detailsMissionTC a").css("margin-top", "-1rem");
                    $("#detailsMissionTC").css("height", "3rem");
                } else {
                    $('#wrapper').css("height", "0");
                    $("#detailsMissionTC").css("height", "4rem")
                    $("#detailsMissionTC a").css("margin-top", "0")
                    $('.detailsMissionItemMap').css("height",
                        "calc(100% - var(--mission-menu-secondary) - var(--mission-outil) - 1rem");
                    $('#over_map').css("display", "none");
                }
            }
        }, false);

        el.addEventListener('mousewheel', function(event) {
            if (scrollbarVisible(el) === false) {
                if (event.deltaY < 0)
                {
                    $('#over_map').css("display", "block");
                    $('.detailsMissionItemMap').css("height",
                        "calc(100% - var(--mission-map) - var(--mission-menu-secondary) - var(--mission-outil)");
                    $("#detailsMissionTC a").css("margin-top", "-1rem");
                    $("#detailsMissionTC").css("height", "3rem");
                    $('#wrapper').css("height", "14rem");
                }
            }
        }, false);

        function scrollbarVisible(element) {
            if (element.scrollHeight > element.clientHeight)
                return true;
            else
                return false;
        }

        function deleteTimeline(id)
        {
            $("#dialogDelete").css("display", "block");
            $("#dialogDelete").dialog({
                resizable: false,
                modal: true,
                width: "fit-content",
                buttons: {
                    "Supprimer": function () {
                        displayOff();
                        let url = "{{ path('deleteTimeline', { id: "id" }) }}";
                        url = url.replace("id", id);
                        $.ajax({
                            url: url,
                            type: "post",
                            complete: function() {
                                location.reload();
                            }
                        });
                        $(this).dialog("close");
                    },
                    "Annuler": function () {
                        $(this).dialog("close");
                    }
                }
            });
        }

        function editTimeline(id) {
            $("#dialogEdit").css("display", "block");
            $("#dialogEdit").dialog({
                resizable: false,
                modal: true,
                width: "fit-content",
                buttons: {
                    "Modifier": function () {
                        displayOff();
                        let url = "{{ path('editTimeline', { id: "id" }) }}";
                        url = url.replace("id", id);
                        let text = ($('#newEntryEdit').val());
                        $.ajax({
                            url: url,
                            type: "post",
                            data: {
                                text: text
                            },
                            complete: function () {
                                location.reload();
                            }
                        });
                        $(this).dialog("close");
                    },
                    "Annuler": function () {
                        $(this).dialog("close");
                    }
                }
            });
        }

        /* Details */

        function displayOff()
        {
            document.getElementById("loader").style.display = "block";
        }

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

        $(document).ready(function () {

            /* Détails */
            var myLatlng = new google.maps.LatLng({{ lat }}, {{ long }});

            var map = new google.maps.Map(document.getElementById('carte'), {
                zoom: 10,
                center: myLatlng,
                mapTypeControl: false,
                fullscreenControl: false,
            });
            var marker = new google.maps.Marker({
                position: myLatlng,
                name: "{{ mission.fileNumber }}",
                title: "{{ mission.fileNumber }}",
            });
            marker.setMap(map);


            /* End Détails */

            displayOn();

        });
    </script>

{% endblock %}