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

{% block title %} Système de chat {% endblock %}

{% block stylesheets %}

    {{ parent() }}

    <link href="{{ asset('assets/css/custom/chat.css') }}" rel="stylesheet" type="text/css">

{% endblock stylesheets %}

{% block breadcrumbs %}

    <div class="container-fluid">
        <div class="page-title">
            <div class="row">
                <div class="col-xl-12 col-lg-12 col-sm-12">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="/">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                            </a>
                        </li>
                        <li class="breadcrumb-item ">Système de Chat</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block body %}

    <div class="row border-eclairer active">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header ">
                    <h5 class="text-primary title-chat">Système de Chat</h5>
                    <div class="card-header-right card-header-right-btn">
                       <span class="text-right">
                           <span class="text-right ">
                               <a href="javascript:;" class="btn  btn-primary"><i class="fas fa-undo"></i> Retour </a>
                           </span>
                       </span>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col call-chat-sidebar col-sm-4">
                            <div class="card bloc-chat shadow-lg">
                                <div class="card-body chat-body">
                                    <div class="chat-box">
                                        <div class="chat-left-aside">
                                            <div class="media row">
                                                <div class="col-10">
                                                    <p data-letters-sender-user="ACMF">
                                                        <b>ACMF</b>
                                                    </p>
                                                </div>
                                                <div class="col-2">
                                                    {#<a href="javascript:;" class="pull-right btn-search-corporate-officier"><img#}
                                                                {#src="{{ asset('assets/media/chat-01.svg') }}"></a>#}
                                                </div>
                                            </div>
                                            <div class="search m-t-5">
                                                <input class="form-control input-search-adherent" type="text"
                                                       placeholder="Rechercher">
                                            </div>
                                            <div class="people-list m-t-20 custom-scrollbar">
                                                <div class="loader_chatters_box">
                                                    <div class="loader">
                                                        <div class="loader-box">
                                                            <div class="loader-37"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="chatters-box">
                                                    {{ render(controller("App\\Controller\\ChatController::chatRendreChattersBox")) }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col call-chat-body">
                            <div class="loader_chat_box">
                                <div class="loader">
                                    <div class="loader-box">
                                        <div class="loader-37"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="card bloc-chat shadow-lg">
                                <div class="card-body p-0">
                                    <div class="row chat-box">
                                        {{ render(controller("App\\Controller\\ChatController::chatRendreChatBox")) }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}

    {{ parent() }}

    <script>
        $(document).ready(function () {
            {% if userLoginReceiver %}
            userLoginReceiver = {{ userLoginReceiver }};
                openChatBox(userLoginReceiver);
            {% endif %}

        });


        //choice adherent
        $(document).on("click", ".user-item", function () {
            userLoginReceiver = $(this).attr('data-user-login');
            userIdReceiver = $(this).attr('data-user-id');
            userTokenReceiver = $(this).attr('data-user-token');
            //ouvrir le bloc de discussion
            openChatBox(userLoginReceiver,userIdReceiver,userTokenReceiver);
            //set message adherent as read
            setMessageAdherentRead(userLoginReceiver);
        });

        //rechreche adherent
        $('.input-search-adherent').keyup(delayCallAjax(function (e) {
            $('.bloc-chat .chatters-box').empty();
            $('.loader_chatters_box').show();
            searchChatters();
        }, 1000));

        //clique entrée
        $(document).on('keyup', '.input-send-message', function (e) {
            if (e.keyCode == 13) {
                sendMesssage({userLoginReceiver: userLoginReceiver,userIdReceiver: userIdReceiver,userTokenReceiver: userTokenReceiver, message: $(".input-send-message").val()});
            }
        });
        //clique bouton envoyer
        $(document).on("click", ".btn-send-message", function () {
            sendMesssage({userLoginReceiver: userLoginReceiver,userIdReceiver: userIdReceiver,userTokenReceiver: userTokenReceiver, message: $(".input-send-message").val()});
        });
        //marquer les messge de l'adherent comme read
        function setMessageAdherentRead(userLogin) {
            $.ajax({
                url: "{{ path('update_message_status') }}",
                method: 'POST',
                data: {userLoginReceiver:userLogin},
                success: function (response) {
                    if (response.status === 200) {
                    }
                }
            });
        }
        function sendMesssage(data) {

            var chatInput = $(".input-send-message");
            if (chatInput.val() !== '') {
                var date = (new Date()), timestamp = date.getTime(), time = (date.toLocaleTimeString()).substring(0, 5);
                $.ajax({
                    url: "{{ path('send_message_chat') }}",
                    method: 'POST',
                    data: data,
                    success: function (response) {
                        if (response.status === 200) {
                            appendMessageToChatbox("send", time, "Moi", chatInput.val(), timestamp);
                        } else {
                            appendMessageToChatbox("send_error", time, "CA", chatInput.val(), timestamp);
                        }
                        chatInput.val('');
                       refreshChatters();
                    }
                });
            }
        }
    </script>

    <script>
        //actualiser le bloc chatters dernier message
        function refreshChatters() {
            searchChatters(true);
            clearInterval(timer);
            timer = setInterval(function(){
                searchChatters(true);
            }, 30000);
        }


        //style d'adherent selectionné
        function selectUserItem(userLoginReceiver){
            $('.chatters-box').find('li').removeClass('user-item-selected');
            $('[data-user-login=' + userLoginReceiver + ']').addClass('user-item-selected');
        }

        //ouvrir la discussion avec un adherent
        function openChatBox(userLoginReceiver) {
            $('.loader_chat_box').show();
            $('.call-chat-body .chat-box').empty();
            $.ajax({
                url: "{{ path('chat_rendre_chat_box') }}",
                method: 'GET',
                data: {
                    userLoginReceiver: userLoginReceiver
                },
                success: function (response) {
                    selectUserItem(userLoginReceiver);
                    $('.call-chat-body .chat-box').html(response.html);
                    $(".chat-history").scrollTop(500000);
                    $('.loader_chat_box').hide();
                }
            });
        }

        function searchChatters(auto = false) {
            var data = auto ? {searchLogin: $('.input-search-adherent').val(),auto: true} : {searchLogin: $('.input-search-adherent').val()};
            $.ajax({
                url: "{{ path('chat_rendre_chatters_box') }}",
                method: 'POST',
                data: data,
                success: function (response) {
                    $('.bloc-chat .chatters-box').empty().html(response.html);
                    $(".people-list").scrollTop(0);
                    $('.loader_chatters_box').hide();
                    if (typeof userIdReceiver !== 'undefined') {
                        selectUserItem(userIdReceiver);
                    }
                }
            });
        }

        function chatDateFix() {
            var today = new Date();
            var dd = String(today.getDate()).padStart(2, '0');
            var mm = String(today.getMonth() + 1).padStart(2, '0');
            var yyyy = today.getFullYear();
            today = dd + '-' + mm + '-' + yyyy;
            return ($("[data-conversation-day='" + today + "'").length === 0) ? today : false;
        }

        //affichage de message envoyer
        function appendMessageToChatbox(type,time,letters,message,timestamp = null) {
            var dateToday = chatDateFix();
            if(dateToday){
                $('.chat-box .chat-history ul').append('<div class="conversation-start">\n' +
                    '<button class="btn btn-primary btn-sm" data-conversation-day="' + dateToday + '" type="button">' + dateToday + '</button>\n' +
                    '</div>');
            }
            if(type === "send_error"){
                $('.chat-box .chat-history ul').append('<li class="clearfix">\n' +
                    '<div id="message-' + timestamp + '" class="message my-message chat-message-error pull-right">' +
                    '<div class="message-send-error">Message non envoyé!</div>' +
                    '<p data-letters-chat="' + letters + '" class="float-end chat-user-img"></p>' +
                    '<div class="message-data"><span class="message-data-time">' +
                    time +
                    '</span></div>\n' +
                    message +
                    '</div></li>');
            } else if(type === "send"){
                $('.chat-box .chat-history ul').append('<li class="clearfix">\n' +
                    '<div id="message-' + timestamp + '" class="message my-message pull-right">' +
                    '<p data-letters-chat="' + letters + '" class="float-end chat-user-img"></p>' +
                    '<div class="message-data"><span class="message-data-time">' +
                    time +
                    '</span></div>\n' +
                    message +
                    '</div></li>');
            } else if(type === "receive"){
                $('.chat-box .chat-history ul').append('<li class="clearfix">\n' +
                    '<div class="message other-message">' +
                    '<p data-letters-chat="' + letters + '" class="float-start chat-user-img"></p>' +
                    '<div class="message-data text-end"><span class="message-data-time">' +
                    time +
                    '</span></div>\n' +
                    message +
                    '</div></li>');
            }
            $(".chat-history").scrollTop(500000);
        }


    </script>


{% endblock %}