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

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

{% block body %}
    {% include '/loader/loader.html.twig' %}
    <div id="insuredContactPage" class="Page" style="">
        {% 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 tools blockContent h-100">
            <div class="row h-100">
                <div class="col-12 h-100">
                    <div class="row m-auto" style="height: 15%; width: 90%">
                        <div class="col-lg-12 col-md-12 col-sm-12">
                            <div class="center-vertical">
                                <h3 class="w-100 Size-2">Contact</h3>
                            </div>
                        </div>
                    </div>
                    <div class="row tab-content" id="tabContent4" style="height: 85%">
                        <div class="col-lg-6 col-md-12 col-sm-12 pt-1 pb-1" style="height: 25rem">
                            <div class="card h-100">
                                <div class="card-header">
                                    <h4 class="Size-3 Bold">Votre conseiller</h4>
                                </div>
                                <div class="card-content">
                                    <div class="card-body Black">
                                        <div class="row">
                                            <div class="col-9">
                                                <div>{{ mission.missionparticipant.getGestionnary().username }}</div>
                                                <div>{{ mission.missionparticipant.getGestionnary().company.place.address }}</div>
                                                <div>{{ mission.missionparticipant.getGestionnary().company.place.postcode ~ ' ' ~ mission.missionparticipant.getGestionnary().company.place.city }}</div>
                                                <div>{{ mission.missionparticipant.getGestionnary().mobile }}</div>
                                                <div>{{ mission.missionparticipant.getGestionnary().email }}</div>
                                            </div>
                                            <div class="col-3">
                                                {% if mission.missionparticipant.getGestionnary().userPicture == null %}
                                                    <div class="avatar" style="width: 7rem; height: 7rem">
                                                        <div class="avatar-content w-100 center-vertical font-large-2">
                                                            {{ mission.missionparticipant.getGestionnary().lastname|first ~ mission.missionparticipant.getGestionnary().firstname|first }}
                                                        </div>
                                                        <!--span class="avatar-status-busy"></span-->
                                                    </div>
                                                {% else %}
                                                    <img src="{{ '/' ~  mission.missionparticipant.getGestionnary().userPicture.path ~ mission.missionparticipant.getGestionnary().userPicture.filename }}"
                                                         style="height: 100%; width: 100%"/>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <button class="btn btn-primary"
                                            onclick="showChatWindow({{ mission.missionparticipant.getGestionnary().id }})">
                                        Envoyer un messager
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-12 col-sm-12 pt-1 pb-1" style="height: 25rem">
                            <div class="card h-100">
                                <div class="card-header">
                                    <h4 class="Size-3 Bold">Votre *type client*</h4>
                                </div>
                                <div class="card-content">
                                    <div class="card-body Black">
                                        <div>{{ mission.delegate.company.name }}</div>
                                        <div>{{ mission.delegate.company.place.address }}</div>
                                        <div>{{ mission.delegate.company.place.postcode ~ ' ' ~ mission.missionparticipant.getGestionnary().company.place.city }}</div>
                                        <div>{{ mission.delegate.company.phone }}</div>
                                        <div>{{ mission.delegate.company.email }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-12 col-sm-12 pt-1 pb-1" style="height: 25rem">
                            <div class="card h-100">
                                <div class="card-header">
                                    <h4 class="Size-3 Bold">Expert</h4>
                                </div>
                                <div class="card-content">
                                    <div class="card-body Black">
                                        <div class="row">
                                            <div class="col-9">
                                                <div>{{ mission.expert.username }}</div>
                                                <div>{{ mission.expert.company.place.address }}</div>
                                                <div>{{ mission.expert.company.place.postcode ~ ' ' ~ mission.missionparticipant.getGestionnary().company.place.city }}</div>
                                                <div>{{ mission.expert.mobile }}</div>
                                                <div>{{ mission.expert.email }}</div>
                                            </div>
                                            <div class="col-3">
                                                {% if mission.expert.userPicture == null %}
                                                    <div class="avatar" style="width: 7rem; height: 7rem">
                                                        <div class="avatar-content w-100 center-vertical font-large-2">
                                                            {{ mission.expert.lastname|first ~  mission.expert.firstname|first }}
                                                        </div>
                                                        <!--span class="avatar-status-busy"></span-->
                                                    </div>
                                                {% else %}
                                                    <img src="{{ '/' ~  mission.expert.userPicture.path ~  mission.expert.userPicture.filename }}"
                                                         style="height: 100%; width: 100%"/>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <button class="btn btn-primary"
                                            onclick="showChatWindow({{ mission.expert.id }})">
                                        Envoyer un messager
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-12 col-sm-12 pt-1 pb-1" style="height: 25rem">
                            <div class="card h-100">
                                <div class="card-header">
                                    <h4 class="Size-3 Bold">Entreprise du Bâtiment</h4>
                                </div>
                                <div class="h-100" style="overflow: auto">
                                    {% if mission.assignment|length == 0 %}
                                        <div class="h-100 center-vertical text-center">Aucune intervention pour le moment</div>
                                    {% endif %}
                                    {% for item in mission.assignment %}
                                        <div class="card-content">
                                            <div class="card-body Black">
                                                <div class="row">
                                                    <div class="col-9">
                                                        <div>{{ item.agency.company.name }}</div>
                                                        <div>{{ item.agency.place.address }}</div>
                                                        <div>{{ item.agency.place.postcode ~ ' ' ~ item.agency.place.city }}</div>
                                                        <div>{{ item.agency.phone }}</div>
                                                        <div>{{ item.agency.email }}</div>
                                                    </div>
                                                    <div class="col-3">
                                                        {% if item.agency.company.logo == null %}
                                                            <div class="avatar" style="width: 7rem; height: 7rem">
                                                                <div class="avatar-content w-100 center-vertical font-large-2">
                                                                    {% if ' ' in item.agency.company.name %}
                                                                        {{ item.agency.company.name|split(' ')[0]|first }}
                                                                        {{ item.agency.company.name|split(' ')[1]|first }}
                                                                    {% else %}
                                                                        {{ item.agency.company.name|first }}
                                                                    {% endif %}                                                            </div>
                                                                <!--span class="avatar-status-busy"></span-->
                                                            </div>
                                                        {% else %}
                                                            <img src="{{ '/' ~  item.agency.company.logo.path ~ item.agency.company.logo.filename }}"
                                                                 style="height: 100%; width: 100%"/>
                                                        {% endif %}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-footer">
                                            {% if item.agency.missionAssignTo %}
                                                <button class="btn btn-primary"
                                                        onclick="showChatWindow({{ item.agency.missionAssignTo.id }})">
                                                    Envoyer un messager
                                                </button>
                                            {% else %}
                                                <button class="btn btn-primary" disabled>
                                                    Envoyer un messager
                                                </button>
                                            {% endif %}
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="chat" class="widget-chat widget-chat-demo"
                         style="display: none; bottom: 0; right: 1rem">
                        <div class="card mb-0">
                            <div class="card-header border-bottom p-0">
                                <div class="media m-75">
                                    <a href="JavaScript:void(0);">
                                        <div class="avatar mr-75">
                                            <div id="convPicture" class="avatar-content"></div>
                                            <span class="avatar-status-online"></span>
                                        </div>
                                    </a>
                                    <div class="media-body">
                                        <h6 class="media-heading mb-0 pt-25"><a href="javaScript:void(0);"
                                                                                id="convUserName"></a>
                                        </h6>
                                        <span class="text-muted font-small-3">Active</span>
                                    </div>
                                </div>
                                <div class="heading-elements">
                                    <i class="bx bx-x widget-chat-close float-right my-auto cursor-pointer"
                                       onclick="hideChatWindow()"></i>
                                </div>
                            </div>
                            <div class="card-body widget-chat-container widget-chat-demo-scroll ps ps--active-y">
                                <div class="chat-content" id="MsgList" style="height: 100%; overflow: auto">
                                </div>
                            </div>
                            <div class="card-footer border-top p-1">
                                <form class="d-flex" onsubmit="widgetChatMessageDemo();"
                                      action="javascript:void(0);">
                                    <input type="text" id="msg" class="form-control chat-message-demo mr-75"
                                           placeholder="Type here...">
                                    <button type="button" onclick="addMessage()" 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 id="dialog-confirm" class="jquery_dialog" title="modifier le profil">
    </div>

{% endblock %}

{% block javascripts %}

    <script type="text/javascript" class="code-js">
        var idConv = 0;
        var idOtherUser = 0;

        const socket = new WebSocket("ws://localhost:3001");

        socket.addEventListener("open", function () {
            console.log("CONNECTED");
        });

        socket.addEventListener("message", function (e) {
            isUserConnected();
            getConversation();
            getMessages(idConv);
            scrollSmoothToBottom();
        });

        function isUserConnected() {
            $.ajax({
                method: "POST",
                url: "{{ path('isConnected') }}",
                data: {
                    isConnected: idOtherUser,
                },
                async: true,
                dataType: 'json',
                success: function (response) {
                }
            });
        }

        function hideChatWindow() {
            $("#chat").css("display", "none");
        }

        function showChatWindow(id) {
            createConversation(id);
        }

        function get_time_diff(datetime) {
            datetime = new Date(datetime).getTime();
            var now = new Date().getTime();

            if (isNaN(datetime)) {
                return "";
            }


            if (datetime < now) {
                var milisec_diff = now - datetime;
            } else {
                var milisec_diff = datetime - now;
            }

            var days = Math.floor(milisec_diff / 1000 / 60 / (60 * 24));

            var date_diff = new Date(milisec_diff);

            return "il y a " + (days > 0 ? days + " jour(s)" : date_diff.getHours() > 1 ? date_diff.getHours() + " heure(s)" : date_diff.getMinutes() > 1 ? date_diff.getMinutes() + " minute(s)" : date_diff.getSeconds() + " seconde(s)");

            //return (days > 0 ? days + " Days " : "") + (date_diff.getHours() > 0 ? date_diff.getHours() + " Heures " : "") + (date_diff.getMinutes() > 0 ? date_diff.getMinutes() + " Minutes " : "") + (date_diff.getSeconds() + " Secondes");
        }

        function dateParse(date1, timeType) {
            let splited = date1.split(' ');
            if (timeType === "date") {
                var datePart = splited[0].match(/\d+/g),
                    year = datePart[0].substring(2), // get only two digits
                    month = datePart[1], day = datePart[2];

                return day + '/' + month + '/' + year;
            } else if (timeType === "time") {
                let time = splited[1];
                let hour = time.split(':')[0];
                let min = time.split(':')[1];
                return hour + ':' + min;
            }
        }

        $(function () {
            $("#msg").keypress(function (e) {
                if (e.which == 13) {
                    //submit form via ajax, this is not JS but server side scripting so not showing here
                    addMessage();
                    getConversation();
                    e.preventDefault();
                }
            });
        });

        function addMessage() {
            let msg = $("#msg").val();
            if (msg === "")
                return false;
            $("#send").attr("disabled", true);

            $.ajax({
                method: "POST",
                url: "{{ path('sendmessage') }}",
                data: {
                    conv: idConv,
                    msg: msg
                },
                async: true,
                dataType: 'json',
                success: function (response) {
                    $("#msg").val("");
                    $("#send").attr("disabled", false);
                    let today = new Date();
                    let time = dateParse((today.getFullYear() + '-' + (String(today.getMonth() + 1).padStart(2, '0')) + '-' + (String(today.getDate()).padStart(2, '0')) + " " + today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds()), "time");
                    $("#MsgList").append("<div class=messengerChatBoxitem>\n" +
                        "                            <div class=\"messengerChatMe\">\n" +
                        "                                <div class=\"messenger-convblock\">\n" +
                        "                                    <div class=\"messenger-text\">\n" +
                        "                                        " + response + "\n" +
                        "                                    </div>\n" +
                        "                                    <div class=\"avatar\">\n" +
                        "                                        <div class=\"avatar-content\">\n" +
                        "                                            {{ me.firstname|first ~ me.lastname|first }}" +
                        "                                        </div>\n" +
                        "                                    </div>\n" +
                        "                                </div>\n" +
                        "                                <div class=\"messenger-time\">\n" +
                        "                                    <div>" + time + "</div>\n" +
                        "                                </div>\n" +
                        "                            </div>\n" +
                        "                        </div>");
                    const message = {
                        name: {{ me.id }},
                        message: response
                    };
                    socket.send(JSON.stringify(message));
                    scrollSmoothToBottom();
                },
            });
        }

        function createConversation(id) {
            idOtherUser = id;
            $.ajax({
                method: "POST",
                url: "{{ path('createConv') }}",
                data: {
                    selectedUser: id
                },
                async: true,
                dataType: 'json',
                success: function (responses) {
                    idConv = responses.id;
                    $("#convUserName").text(responses.username);
                    $("#convPicture").text(responses.lastname.charAt(0) + responses.firstname.charAt(0));
                    isUserConnected();
                    getMessages(idConv);
                }
            });

        }

        function scrollSmoothToBottom() {
            var objDiv = document.getElementById("MsgList");
            objDiv.scrollTop = objDiv.scrollHeight;
        }

        function getMessages(id) {
            idConv = id;
            var url = '{{ path("getMessages") }}';
            $.ajax({
                method: "POST",
                url: url,
                data: {
                    conv: id
                },
                dataType: 'json',
                async: true,
                success: function (responses) {
                    $("#chat").css("display", "block");
                    $("#MsgList").empty();
                    let i = 0;
                    scrollSmoothToBottom();
                    $('#MsgTitle').html(responses.otherUser);
                    let newDate = false;
                    let lastdate = "";
                    while (responses && responses.messages[i] != null) {
                        let time = dateParse(responses.messages[i].createdAt.date, "time");
                        let date = dateParse(responses.messages[i].createdAt.date, "date");
                        let message = get_time_diff(responses.messages[i].createdAt.date);
                        if (date !== lastdate) {
                            let todayMsg = "";
                            if (message.includes("1 jour"))
                                todayMsg = "Hier";
                            else if (message.includes("jour"))
                                todayMsg = dateParse(responses.messages[i].createdAt.date, "date");
                            else
                                todayMsg = "Aujourd'hui";
                            $("#MsgList").append("<div class='text-center mt-1 mb-1'>\n" +
                                todayMsg +
                                "                        </div>");
                            lastdate = date;
                        }
                        let msg = responses.messages[i].content;
                        if (responses.messages[i].userId === {{ me.id }}) {
                            $("#MsgList").append("<div class=messengerChatBoxitem>\n" +
                                "                            <div class=\"messengerChatMe\">\n" +
                                "                                <div class=\"messenger-convblock\">\n" +
                                "                                    <div class=\"messenger-text\">\n" +
                                "                                        " + msg + "\n" +
                                "                                    </div>\n" +
                                "                                    <div class=\"avatar\">\n" +
                                "                                        <div class=\"avatar-content\">\n" +
                                "                                            " + (responses.messages[i].firstname).substring(0, 1) + (responses.messages[i].lastname).substring(0, 1) + "\n" +
                                "                                        </div>\n" +
                                "                                    </div>\n" +
                                "                                </div>\n" +
                                "                                <div class=\"messenger-time\">\n" +
                                "                                    <div>" + time + "</div>\n" +
                                "                                </div>\n" +
                                "                            </div>\n" +
                                "                        </div>");
                        } else
                            $("#MsgList").append("<div class=messengerChatBoxitem>\n" +
                                "                            <div class=\"messengerChatHim\">\n" +
                                "                                <div class=\"messenger-convblock\">\n" +
                                "                                    <div class=\"avatar\">\n" +
                                "                                        <div class=\"avatar-content\">\n" +
                                "                                            " + (responses.messages[i].firstname).substring(0, 1) + (responses.messages[i].lastname).substring(0, 1) + "\n" +
                                "                                        </div>\n" +
                                "                                    </div>\n" +
                                "                                    <div class=\"messenger-text\">\n" +
                                "                                        " + msg + "\n" +
                                "                                    </div>\n" +
                                "                                </div>\n" +
                                "                                <div class=\"messenger-time\">\n" +
                                "                                    <div>" + time + "</div>\n" +
                                "                                </div>\n" +
                                "                            </div>\n" +
                                "                        </div>");
                        i++;
                    }
                    scrollSmoothToBottom();
                }
            });
        }

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

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

{% endblock %}