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

{% block title %}Hello DevisController!{% endblock %}

{% block body %}

    {% include '/loader/loader.html.twig' %}
    <div id="insuredPage" class="Page">
        <div class="h-100 block">
            {% 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 blockContent h-100">
                <div class="row h-100">
                    <div class="col-lg-12 col-md-12 col-sm-12 p-2 m-auto">
                        <div class="d-flex">
                            <a class="Size-2 Black Bold px-2" href="{{ path('missionQuote', { id: quote.mission.id }) }}">
                                <i class="bx bx-arrow-back Size-2"></i>
                                Revenir à la mission
                            </a>
                            <div class="center-vertical px-2">
                                <a class="btn btn-primary" href="{{ "/" ~ quote.path ~ quote.filename }}">Télécharger</a>
                            </div>
                            <div class="center-vertical px-2">
                                <button class="btn btn-primary" onclick="cancelEval()" id="cancelEval" style="display: none">Annuler</button>
                            </div>
                            <div class="center-vertical px-2 {{ quote.state == "En attente" ? "" : "d-none" }}">
                                <button class="btn btn-primary" onclick="openNote()">Evaluer</button>
                            </div>
                            <div class="float-right {{ quote.state|replace({' ': ''}) }} border-3 ml-auto px-2">
                                <div class="center-vertical White">
                                    {{ quote.state }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12 p-2 m-auto">
                        <div class="px-2 Size-4 Black Bold mx-auto">
                            <div class="row">
                                <div class="col-6">
                                    <div>Devis pour intervention : {{ quote.type }}</div>
                                    <div>En date du : {{ quote.addedAt|date("d/m/Y") }}</div>
                                </div>
                                <div class="col-6">
                                    <div class="text-right">Soumis par l'entreprise : {{ quote.agency.company.name }}</div>
                                    <div class="text-right">Pour un montant de : {{ quote.price ~ ' €'}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="col-lg-12 col-md-12 col-sm-12 h-75">
                        <div class="row h-100">
                            <div class="col" id="docReader">
                                <div class="card" style="height: 100%; width: 100%">
                                    <div class="card-img-overlay d-flex justify-content-between flex-column">
                                        <div class="overlay-content h-100">
                                            <div id="dialog" class="h-100 w-100"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4 px-2" id="note" style="{{ quote.state != "En attente" and quote.quoteNotes|length > 0 ? "" : "display: none"}}">
                                <div class="height-10-per">
                                    <div class="Size-3 Black">
                                        Remarques
                                    </div>
                                </div>
                                <div class="height-80-per overflow-auto" id="notes">
                                    {% for item in quote.quoteNotes %}
                                    <div class="Black Size-4">{{ item.note }}</div>
                                    {% endfor %}
                                </div>
                                <div class="height-10-per {{ quote.state != "En attente" ? "d-none" : ""}}">
                                    <div class="position-relative h-100 w-100">
                                        <form class="position-absolute position-bottom-0 w-100 d-flex" onsubmit="widgetChatMessageDemo();" action="javascript:void(0);">
                                            <input type="text" id="msg" class="form-control chat-message-demo mr-75"
                                                   placeholder="Envoyer un message..." autocomplete="off">
                                            <button type="button" onclick="addNote()" id="send" class="btn btn-primary glow px-1" style="float: right">
                                                <i class="bx bx-paper-plane"></i>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="modal-edit" class="jquery_dialog" title="Résultat de l'évaluation du devis">
            <p>Rappel : l'entreprise sera notifiée du résultat</p>
        </div>
    </div>
{% endblock %}

{% block javascripts %}

    <script>
        let eval = false;
        function cancelEval()
        {
            eval = false;
            $("#cancelEval").css("display", "none");
            $("#note").css("display", "none");
        }

        function openNote()
        {
            if (eval == true) {
                $("#modal-edit").css("display", "block");
                $("#modal-edit").dialog({
                    resizable: false,
                    height: "auto",
                    width: 400,
                    modal: true,
                    buttons: {
                        "Valider": function () {
                            $.ajax({
                                method: "POST",
                                url: "{{ path('validQuote') }}",
                                data: {
                                    quote: "{{ quote.id }}",
                                },
                                async: true,
                                dataType: 'json',
                                success: function (response) {
                                    //scrollSmoothToBottom();
                                },
                                complete: function (response) {
                                    location.reload();
                                }
                            });
                            $(this).dialog("close");
                        },
                        "Refuser": function () {
                            $.ajax({
                                method: "POST",
                                url: "{{ path('refuseQuote') }}",
                                data: {
                                    quote: "{{ quote.id }}",
                                },
                                async: true,
                                dataType: 'json',
                                success: function (response) {
                                    //scrollSmoothToBottom();
                                },
                                complete: function (response) {
                                    location.reload();
                                }
                            });
                            $(this).dialog("close");
                        }
                    }
                });
            }
            else
            {
                eval = true;
                $("#note").css("display", "block");
                $("#cancelEval").css("display", "block");
            }

        }

        function addNote() {
            let msg = $("#msg").val();
            if (msg === "")
                return false;
            $.ajax({
                method: "POST",
                url: "{{ path('addNote') }}",
                data: {
                    quote: "{{ quote.id }}",
                    note: msg
                },
                async: true,
                dataType: 'json',
                success: function (response) {
                    $("#msg").val("");
                    $("#send").attr("disabled", false);
                    $("#notes").append(
                        '<div class=\'Black Size-4\'>' + msg + '</div>'
                    );
                    //scrollSmoothToBottom();
                },
                complete: function (response) {
                }
            });
        }
        
        function readDocument() {

            var fileName = "/" + "{{ quote.path }}" + "{{ quote.filename }}";
            var object = "<object id=\"objectDoc\" data=\"{FileName}\" class=\"h-100 w-100 objectDoc Size-3 Black\">";
            object += "Si vous ne pouvez pas lire le document, vous pouvez le télécharger en cliquant sur <a class=\"p-0 m-0\"' href = \"{FileName}\">ce lien</a>";
            object += "</object>";
            object = object.replace(/{FileName}/g, fileName);
            $("#dialog").html(object);
            $("#dialog iframe").contents().find("img").css({
                'width': '100%',
                'height': '100%'
            });
        }

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


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

{% endblock %}