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

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

{% block body %}

    {% include '/loader/loader.html.twig' %}
    <div id="home" class="container-fluid Page">
        {% for message in app.flashes('success') %}
            <div class="alert alert-success position-absolute" style="width: 100% !important; z-index: 3000">
                {{ message }}
            </div>
        {% endfor %}
        {% for message in app.flashes('warning') %}
            <div class="alert alert-warning position-absolute" style="width: 100% !important; z-index: 3000">
                {{ message }}
            </div>
        {% endfor %}
        <div class="width-80-per h-100 ml-auto mr-auto">
            <h3 class="w-100 Black text-center pt-5 pb-5 PageTitle">Bienvenue sur l'espace de gestion Syma'Nagement</h3>
            <div class="container-fluid">
                <div class="row" id="drag-elements">
                    {% for widget in widgets %}
                        <div class="col-lg-3 col-md-6 col-sm-12" id="{{ widget.id }}">
                            <div class="card">
                                <span id="deleteFile" onclick="deleteModal({{ widget.id }})" class="close"
                                      style="position: absolute; right: 0; padding-right: 5px">&times;</span>
                                <div class="card-img-overlay d-flex justify-content-between flex-column">
                                    <div class="overlay-content h-100">
                                        <div class="text-center" style="height: fit-content">
                                            <i class="bx {{ widget.widget.icon }} text-center" style="font-size: 6.2rem"></i>
                                        </div>
                                        <div style="height: 30%">
                                            <h4 class="Size-3 mb-50 text-center Black center-vertical">
                                                {{ widget.widget.description }}</h4>
                                        </div>
                                        <div style="height: fit-content">
                                            <div class="text-center Size-2 Black">
                                                {% if widget.widget.name == "Mission total" %}
                                                    {{ me.missionParticipant | length }}
                                                {% elseif widget.widget.name == "Devis en attente" %}
                                                    0
                                                {% elseif widget.widget.name == "Mission non assignées" %}
                                                    0
                                                {% elseif widget.widget.name == "Tâches en attente" %}
                                                    0
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                    <div class="col-lg-3 col-md-6 col-sm-12" id="addItem">
                        <div class="card" onclick="modalWidget()">
                            <div class="card-img-overlay d-flex justify-content-between flex-column">
                                <div class="overlay-content h-100">
                                    <div class="text-center center-vertical" style="height: 100%">
                                        <i class="bx bx-plus text-center" style="font-size: 8.2rem; color: Black"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="dialog-addWidget" title="Ajouter une nouvelle vignette ?" class="jquery_dialog">
            <div>
                <select id="selectType">
                    {% for item in widgetList %}
                    <option>{{ item.name }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <div id="dialog-deleteWidget" title="Désactivation vignette" class="jquery_dialog">
            <div>
                <p>Souhaitez-vous désactiver cette vignette ?</p>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}

    <script>

        function modalWidget() {
            $("#dialog-addWidget").dialog({
                resizable: false,
                height: "auto",
                width: 400,
                modal: true,
                buttons: {
                    "Ajouter": function() {
                        $( this ).dialog( "close" );
                        $.ajax({
                            method: "POST",
                            url: "{{ path("addWidget") }}",
                            data: {
                                type: $( "#selectType option:selected" ).text()
                            },
                            success: function (responses) {
                                window.location.replace("{{ path("home") }}");
                            },
                        })
                    },
                    "Annuler": function() {
                        $( this ).dialog( "close" );
                    }
                }
            });
        }

        function deleteModal(id) {
            $("#dialog-deleteWidget").dialog({
                resizable: false,
                height: "auto",
                width: 400,
                modal: true,
                buttons: {
                    "Ajouter": function() {
                        $( this ).dialog( "close" );
                        $.ajax({
                            method: "POST",
                            url: "{{ path("deleteWidget") }}",
                            data: {
                                id: id
                            },
                            success: function (responses) {
                                window.location.replace("{{ path("home") }}");
                            },
                        })
                    },
                    "Annuler": function() {
                        $( this ).dialog( "close" );
                    }
                }
            });
        }

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

        function move()
        {
            var data = $('#drag-elements > div').map(function() {
                return $(this)[0].getAttribute('id')
            }).get()
            var index = data.indexOf('addItem');
            if (index !== -1) {
                data.splice(index, 1);
            }
            $.ajax({
                method: "POST",
                url: "{{ path("moveWidget") }}",
                data: {
                    order: data
                },
                async: true
            })
        }

        $(document).ready(function () {
            dragula([document.getElementById('drag-elements')], {
                moves: function (el, container, handle, sibling) {
                    if (el.getAttribute('id') === "addItem") {
                        return false;
                    }
                    else {
                        return true;
                    }                },
                accepts: function (el, target, source, sibling) {
                    if (el.getAttribute('id') === "addItem") {
                        return false;
                    }
                    else {
                        return true;
                    }
                },
                "drag": function (el)
                {
                    console.log("ok");
                }
            }).on('drop', function (el) {
                move();
            })


            displayOn();
        });

    </script>

{% endblock %}