let __mv_socket_address = 'https://socket2.mavarateb.com' 
let __mv_support = false 
let __mv_socket_io_client = 'https://mavarateb.com/assets/socket.io.min.js' 
let __primary_color = '#000' 
let __mv_right = '20px' 
let __mv_bottom = '20px' 
let __mv_right_mobile = '20px' 
let __mv_bottom_mobile = '20px' 
let __mv_main_buttons = false 
let __mv_booking_url = '' 
let __mv_call_number = '' 
let socketIoClientUrl = __mv_socket_io_client

// window.addEventListener('load', () => {

let socketIoCleintScript = document.createElement('script')
socketIoCleintScript.src = socketIoClientUrl
socketIoCleintScript.addEventListener('load', () => {

    let referrer = ""
    if (document.referrer && document.referrer != "") {
        referrer = document.referrer
    }
    let __mvData = {
        pageTitle: document.title,
        path: window.location.href,
        host: window.location.host,
        referrer: referrer
    }





    let socket = new io(__mv_socket_address)
    socket.emit('monitor-signal', JSON.stringify(__mvData))






    let template = `
            <style>
                .__mv_support_button {
                    position:fixed;
                    bottom:${__mv_bottom};
                    right:${__mv_right}; 
                    z-index:9999;
                    width:50px;
                    height:50px;
                    background:${__primary_color};
                    color:#FFF;
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    border-radius:50%;
                }

                .__mv_support_button.hide {
                    opacity:0 ;
                    pointer-events:nonde;
                }

                

                .__mv_support_button_label{
                    position:absolute;
                    right:0px;
                    margin-right:100px;
                    opacity:0 ;
                    color:#FFF;
                    background:${__primary_color};
                    border-radius:50px;
                    padding:10px 10px;
                    transition:ease all 0.5s ;
                    white-space:nowrap;
                }
                .__mv_support_button_label.show {
                    margin-right:60px;
                    opacity:1;
                }

                .__mv_support_button_icon {
                    cursor:pointer;
                    transition:ease all 0.5s ;
                }

                .__mv_support_button_icon.animate {
                    animation:__mv_support_button_icon_animation 2s forwards ;
                }

                @keyframes __mv_support_button_icon_animation {
                    0%{
                        transform:rotate(0deg);
                    }

                    25%{
                        transform:rotate(45deg);
                    }
                    50%{
                        transform:rotate(0deg);
                    }
                    75%{
                        transform:rotate(45deg);
                    }

                    100%{
                        transform:rotate(0deg);
                    }
                }


                .__mv_support_button_icon:hover {
                    transform:scale(0.9);
                }


                @media screen and (max-width:1024px) {
                    .__mv_support_button{
                        bottom:${__mv_bottom};
                    }

                    .__mv_support_button_label{
                        background:${__primary_color};
                    }
                }


                @media screen and (max-width:600px) {
                    .__mv_support_button{
                        bottom:${__mv_bottom_mobile};
                        right:${__mv_right_mobile}; 
                    }
                }
            </style>
        

            <div class="__mv_support_button hide">

                <div class="__mv_support_button_icon __mv-toggle-chat-box">
                    <svg width="30px" height="30px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" id="Stock_cut" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

                        <desc/>

                        <g>

                        <path d="M7,25H6   c-2.761,0-5-2.239-5-5v0c0-2.761,2.239-5,5-5h1V25z" fill="none" stroke="white" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>

                        <path d="M26,25h-1V15h1   c2.761,0,5,2.239,5,5v0C31,22.761,28.761,25,26,25z" fill="none" stroke="white" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>

                        <path d="M5,15v-3   C5,5.925,9.925,1,16,1h0c6.075,0,11,4.925,11,11v3" fill="none" stroke="white" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>

                        <path d="M27,25v4   c0,1.105-0.895,2-2,2h-3" fill="none" stroke="white" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>

                        <line fill="none" stroke="white" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" x1="18" x2="20" y1="31" y2="31"/>

                        <line fill="none" stroke="white" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" x1="16" x2="16" y1="24" y2="26"/>

                        <path d="M16,22v-2.615   c0-1.441,0.877-2.736,2.215-3.271l0,0C19.897,15.441,21,13.812,21,12v0c0-2.761-2.239-5-5-5h0c-2.761,0-5,2.239-5,5v0" fill="none" stroke="white" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>

                        </g>

                    </svg>
                </div>
                <span class="__mv_support_button_label __mv-toggle-chat-box">سوالی داری ؟</span>
            </div>




            <style>
                .__mv_chat_box {
                    position:fixed;
                    bottom:-100px;
                    right:18px;
                    width:300px;
                    height:400px;
                    background:#FFF;
                    z-index:999999999;
                    border-radius:30px;
                    box-shadow:rgba(0,0,0,0.1) 0px 0px 10px;
                    opacity:0 ;
                    pointer-events:none; 
                    transition:ease all 0.2s ;
                }


                .__mv_chat_box.show {

                    opacity:1 ;
                    pointer-events:all ;
                    bottom:18px;

                }

                @media screen and (max-width:600px) {

                    .__mv_chat_box {
                        width:100dvw;
                        height:100dvh;
                        right:0px;
                        bottom:0px;
                        border-radius:0px;
                        shadow:unset;
                    }

                    .__mv_chat_box.show {
                        bottom:0px;
                    }

                }
                

                .__mv_chat_box_header{
                    position:absolute ;
                    top:10px;
                    left:10px;
                    width:calc(100% - 20px);
                    height:40px;
                    border-bottom:#eee solid 1px;
                    display:flex;
                    align-items:center;
                    justify-content:space-between;
                    padding:0px 10px;
                    font-size:12px;
                }

                .__mv_chat_box_right{
                    display:flex;
                    align-items:center;
                    gap:10px;
                }


                .__mv_message_item_link{
                    background:teal;
                    color:white;
                    font-weight:bold;
                    padding:2px 5px;
                    font-size:12px;
                    margin:10px 0px;
                    border-radius:20px;
                }
            </style>
            <div class="__mv_chat_box">
                <div class="__mv_chat_box_header">
                    <div class="__mv_chat_box_right">
                        <div>
                            <svg width="20px" height="20px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><title>ionicons-v5-i</title><circle cx="184" cy="232" r="24"/><path d="M256.05,384c-45.42,0-83.62-29.53-95.71-69.83A8,8,0,0,1,168.16,304H343.85a8,8,0,0,1,7.82,10.17C339.68,354.47,301.47,384,256.05,384Z"/><circle cx="328" cy="232" r="24"/><circle cx="256" cy="256" r="208" style="fill:none;stroke:#000000;stroke-miterlimit:10;stroke-width:32px"/></svg>
                        </div>
                        <div>
                            <div style="font-weight:bold;">
                            در خدمتیم
                            </div>
                            <div class="__mv_offline" style="font-size:11px;color:#555;">
                                آفلاین :(
                            </div>
                        </div>
                    </div>

                    <div style="cursor:pointer;" class="__mv-toggle-chat-box">
                        بازگشت
                        &nbsp;>
                    </div>
                </div>



                <style>
                    .__mv_chat_box_content{
                        position:absolute;
                        width:100%;
                        height:calc(100% - 130px);
                        top:50px;
                        left:0px;
                        overflow-y:auto;
                        overflow-x:hidden;
                        display:flex;
                        flex-direction:column;
                    }


                    .__mv_chat_box_content.small{

                        height:calc(100% - 180px);
                        top:100px;
                    }

                    .__mv_chat_item{
                        width:100%;
                        padding:10px;
                        display:flex;
                        gap:10px;
                    }

                    .__mv_message_item_icon {
                        width:30px;
                        height:30px;
                        border:#eee solid 0px;
                        border-radius:50%;
                        display:flex;
                        align-items:center;
                        justify-content:center;
                    }

                    

                    .__mv_chat_item.left{
                        flex-direction:row-reverse ;
                    }


                    .__mv_chat_item.left.hide .__mv_message_item_icon{
                        opacity:0 ;
                        transform:scale(0) ;
                        transition:ease all 0.2s ;
                    }


                    .__mv_chat_item.left.hide.show .__mv_message_item_icon{
                        opacity:1 ;
                        transform:scale(1) ;
                    }



                    .__mv_chat_item.left.hide .__mv_chat_message{
                        opacity:0 ;
                        margin-left:-10px;
                        transition:ease all 0.5s ;
                    }

                    .__mv_chat_item.left.hide.show .__mv_chat_message{
                        opacity:1 ;
                        margin-left:0px ;
                    }


                    .__mv_chat_item.left .__mv_chat_message{
                        background:#eaf9fc;
                    }

                    .__mv_chat_item .__mv_chat_message {
                        padding:10px;
                        max-width:calc(100% - 40px);
                        font-size:12px;
                        border:#f9f9f9 solid 0px;
                        border-radius:30px;
                        background:#fff7cc;
                    }

                    .__mv_main_buttons{
                        position:absolute ;
                        top:50px;
                        left:0px;
                        height:50px;
                        display:flex;
                        align-items:center;
                        gap:10px;
                        width:100%;
                        padding:10px;
                    }



                    .__mv_main_buttons.hide{
                        display:none !important;
                    }


                    .__mv_main_buttons a{
                        text-decoration:none !important ;
                        width:100% !important;
                        display:flex !important;
                        align-items:center;
                        justify-content:center;
                        border-radius:30px;
                        border:#000 solid 1px;
                        font-size:12px !important;
                        color:#000 !important;
                        height:100%;
                        gap:5px;
                    }
                </style>

                <div class="__mv_main_buttons ${!__mv_main_buttons ? 'hide' : ''}">
                    <a target="_blank" href="${__mv_booking_url}">

                        <div>
                            <svg fill="#000000" width="20px" height="20px" viewBox="-5.5 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
                            <title>chat</title>
                            <path d="M16.52 23.44c-1 0-2-0.6-2.88-1.68-0.040 0-0.040 0-0.080 0-4.16 0-7.56-3.4-7.56-7.56s3.4-7.56 7.56-7.56 7.56 3.4 7.56 7.56c0 2.040-0.8 3.96-2.24 5.36 0.16 1.24-0.040 2.32-0.6 3.040-0.44 0.52-1.080 0.84-1.76 0.84v0zM14.080 20.040c0.28 0 0.52 0.12 0.68 0.36 0.72 1 1.36 1.36 1.76 1.36 0.2 0 0.32-0.080 0.44-0.2 0.32-0.4 0.4-1.2 0.2-2.080-0.080-0.32 0.040-0.64 0.28-0.84 1.28-1.12 2-2.72 2-4.4 0-3.24-2.64-5.88-5.88-5.88s-5.88 2.64-5.88 5.88 2.64 5.88 5.88 5.88c0.12 0 0.28 0 0.4 0 0.040-0.080 0.12-0.080 0.12-0.080zM3.84 25.36c-0.2 0-0.44-0.040-0.6-0.12-0.96-0.32-1.72-1.48-1.48-3.36-1.12-1.12-1.76-2.68-1.76-4.28 0-2.56 1.52-4.8 3.88-5.72 0.44-0.16 0.92 0.040 1.080 0.48s-0.040 0.92-0.48 1.080c-1.68 0.68-2.8 2.32-2.8 4.16 0 1.28 0.56 2.52 1.52 3.36 0.040 0.040 0.080 0.080 0.12 0.12 0.16 0.2 0.24 0.44 0.16 0.72-0.24 1.24 0.12 1.8 0.32 1.88 0.24 0.080 0.76-0.24 1.2-1.16 0.16-0.32 0.48-0.48 0.8-0.48 0.84 0.040 1.72-0.12 2.48-0.56 0.4-0.24 0.92-0.080 1.16 0.32s0.080 0.92-0.32 1.16c-0.88 0.48-1.88 0.76-2.88 0.76-0.76 1.2-1.68 1.64-2.4 1.64z"></path>
                            </svg>
                        </div>

                        دریافت نوبت
                    </a>
                    <a href="${__mv_call_number}">
                        <div>
                            <svg width="18px" height="18px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M3 6.5C3 14.5081 9.49187 21 17.5 21C18.166 21 18.8216 20.9551 19.4637 20.8682C20.3747 20.7448 21 19.9292 21 19.01V16.4415C21 15.5807 20.4491 14.8164 19.6325 14.5442L16.4841 13.4947C15.6836 13.2279 14.8252 13.699 14.6206 14.5177C14.3475 15.6102 12.987 15.987 12.1907 15.1907L8.80926 11.8093C8.01301 11.013 8.38984 9.65254 9.48229 9.37943C10.301 9.17476 10.7721 8.31644 10.5053 7.51586L9.45585 4.36754C9.18362 3.55086 8.41934 3 7.55848 3H4.99004C4.0708 3 3.25518 3.62533 3.13185 4.53627C3.0449 5.17845 3 5.83398 3 6.5Z" stroke="#323232" stroke-width="2" stroke-linejoin="round"/>
                            </svg>
                        </div>


                    تماس با مطب</a>
                </div>
                <div class="__mv_chat_box_content ${__mv_main_buttons ? 'small' : ''}">


                    <div class="__mv_chat_item left">
                       
                        <div class="__mv_chat_message">
                            سلام چطوری میتونیم به شما کمک کنیم ؟
                        </div>
                    </div>




                </div>



                <style>

                    .__mv_chat_box_footer{
                        position:absolute;
                        bottom:10px;
                        width:calc(100% - 20px);
                        left:10px;
                        height:60px;
                        border:#eee solid 1px;
                        border-radius:50px;
                        display:flex;
                        align-items:cemter;
                        overflow:hidden;
                        padding:4px;
                        justify-content:space-between;
                    }

                    .__mv_chat_box_footer input{
                        width:calc(100% - 60px);
                        height:100%;
                        padding:0px 10px;
                    }

                    .__mv_chat_box_footer input:focus{
                        outline:none;
                    }

                    .__mv_chat_box_footer button {
                        width:50px;
                        height:50px;
                        display:flex;
                        align-items:center;
                        justify-content:center ;
                        border-radius:50%;
                    }

                    .__mb_is_typing {
                        position:absolute ;
                        bottom:80px;
                        right:10px;
                        background:${__primary_color};
                        color:#FFF;
                        border:#eee solid 1px;
                        border-radius:10px;
                        padding:5px 10px;
                        font-weight:bold;
                        font-size:12px;
                        opacity:0;
                        transition:ease all 0.3s ;
                        pointer-events:none ;
                    }
                    .__mb_is_typing.show {
                        opacity:1; 
                        right:20px;
                        animation:typingAnimation infinite 1s forwards ;
                    }

                    @keyframes typingAnimation {
                        0%{
                            opacity:0.8 ;
                        }
                        50%{
                            opacity:1 ;
                        }
                        100%{
                            opacity:0.8 ;
                        }
                    }



                    .__mv_chat_box_send_button{
                        background:unset !important ;
                    }

                    .__mv_chat_box_send_button:focus {
                        outline:none ;
                    }


                    .__mv_input_chat_box {
                        background:unset;
                        color:#222 !important;
                        border:unset !important;
                        outline:none !important;
                    }


                    .__mv_input_chat_box:focus {
                        outline : none !important;
                    }

                </style>
                <div class="__mb_is_typing">
                    <span style="color:yellow;">
                    پشتیبان :
                    </span> 
                    درحال نوشتن . . . 
                </div>
                <div class="__mv_chat_box_footer">


                    <input class="__mv_input_chat_box" placeholder="چیزی بنویسید . . . ">

                    <button class="__mv_chat_box_send_button">
                        <svg width="20px" height="20px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="black" stroke-width="1" stroke-linecap="round" stroke-linejoin="miter"><polygon points="3 3 20 12 3 21 6 12 3 3"></polygon><line x1="10" y1="12" x2="6" y2="12"></line></svg>
                    </button>

                </div>
            </div>
        `


    let messageItemTemplate = `
            <div class="__mv_chat_item {direction} {hideClass}">
                <div class="__mv_message_item_icon">
                    {icon}
                </div>
                <div class="__mv_chat_message">
                    <div>
                        {message}
                   </div>
                   {link}
                </div>
            </div>
        ` ;

    let userIcon = `
            <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="6" r="4" stroke="#444" stroke-width="1.5"/>
<path d="M20 17.5C20 19.9853 20 22 12 22C4 22 4 19.9853 4 17.5C4 15.0147 7.58172 13 12 13C16.4183 13 20 15.0147 20 17.5Z" stroke="#444" stroke-width="1.5"/>
</svg>
        ` ;
    let supportIcon = ` <svg width="20px" height="20px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" id="Stock_cut" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

                        <desc/>

                        <g>

                        <path d="M7,25H6   c-2.761,0-5-2.239-5-5v0c0-2.761,2.239-5,5-5h1V25z" fill="none" stroke="${__primary_color}" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>

                        <path d="M26,25h-1V15h1   c2.761,0,5,2.239,5,5v0C31,22.761,28.761,25,26,25z" fill="none" stroke="${__primary_color}" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>

                        <path d="M5,15v-3   C5,5.925,9.925,1,16,1h0c6.075,0,11,4.925,11,11v3" fill="none" stroke="${__primary_color}" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>

                        <path d="M27,25v4   c0,1.105-0.895,2-2,2h-3" fill="none" stroke="${__primary_color}" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>

                        <line fill="none" stroke="${__primary_color}" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" x1="18" x2="20" y1="31" y2="31"/>

                        <line fill="none" stroke="${__primary_color}" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" x1="16" x2="16" y1="24" y2="26"/>

                        <path d="M16,22v-2.615   c0-1.441,0.877-2.736,2.215-3.271l0,0C19.897,15.441,21,13.812,21,12v0c0-2.761-2.239-5-5-5h0c-2.761,0-5,2.239-5,5v0" fill="none" stroke="white" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>

                        </g>

                    </svg>` ;

    socket.on('update', (messages) => {
        messages = JSON.parse(messages)

        let messagesItemsHTML = ''

        messages.map((item, messageKey) => {
            direction = ''
            let hideClass = ''
            let icon = userIcon
            if (item.send_from_support) {
                direction = 'left'
                icon = supportIcon
            }
            if (messageKey == 0) {
                hideClass = 'hide message-number-' + messageKey

            }


            let link = ``;
            if (item.link != undefined && item.link != '') {
                link = `
                        <div class="__mv_message_item_link">
                            <a href="${item.link}" target="_blank">مشاهده لینک</a>
                        </div>  
                    ` ;
            }
            messagesItemsHTML += messageItemTemplate
                .replace('{direction}', direction)
                .replace('{message}', item.text)
                .replace('{icon}', icon)
                .replace('{hideClass}', hideClass)
                .replace('{link}', link)


        })
        setTimeout(() => {
            document.querySelector('.__mv_chat_box_content').innerHTML = messagesItemsHTML
            setTimeout(() => {
                document.querySelector('.message-number-0').classList.remove('hide')
            }, 100)
        }, 100)
    })


    let getRandomId = () => {
        let id = __mvData.host + '_';
        for (let i = 0; i <= 30; i++) {
            id += '' + Math.floor(Math.random() * 9);
        }

        return id
    }

    if (!window.localStorage.getItem('__mv_chat_id')) {
        window.localStorage.setItem('__mv_chat_id', getRandomId());
    }

    let __mv_chat_id = window.localStorage.getItem('__mv_chat_id')

    let supportElement = document.createElement('div');
    supportElement.innerHTML = template

    if (__mv_support == true) {

        document.body.appendChild(supportElement)
    }


    setTimeout(() => {
        supportElement.querySelector('.__mv_support_button_label').classList.toggle('show')
        setTimeout(() => {
            supportElement.querySelector('.__mv_support_button_icon').classList.add('animate')

        }, 300)


        document.querySelectorAll('.__mv-toggle-chat-box')
            .forEach((toggleButton) => {


                toggleButton.addEventListener('click', () => {
                    supportElement.querySelector('.__mv_support_button_label').classList.toggle('show')
                    // setTimeout(()=>{
                    document.querySelector('.__mv_chat_box').classList.toggle('show')
                    // },400)
                })
            })




        let isTypingTimeout = null
        // is typing 
        socket.on('is-typing', (data) => {

            let isTypingElement = document.querySelector('.__mb_is_typing');

            console.log(data)


            clearTimeout(isTypingTimeout)
            isTypingElement.classList.add('show')
            isTypingTimeout = setTimeout(() => {
                isTypingElement.classList.remove('show')
            }, 1000)

        })





        //send message = 

        let __mvSendMessage = () => {
            let message = document.querySelector('.__mv_input_chat_box')

            if (message.value == '' || message.value.length <= 2) {
                return false
            }
            socket.emit('send-support-message', JSON.stringify({
                chat_id: __mv_chat_id,
                host: __mvData.host,
                message: {
                    text: message.value
                } ,
                pageTitle : document.title
            }))
            message.value = ''

        }


        setTimeout(() => {

            document.querySelector('.__mv_input_chat_box').addEventListener('keyup', (event) => {

                if (event.keyCode == 13) {
                    __mvSendMessage()
                }
            })

            document.querySelector('.__mv_chat_box_send_button').addEventListener('click', () => {
                __mvSendMessage()
            })


            socket.emit('get-count-support', true);

            socket.on('count-support', (data) => {
                if (parseInt(data) > 0) {
                    document.querySelector('.__mv_support_button').classList.remove('hide')
                    document.querySelector('.__mv_offline').style.display = 'none'
                } else {
                    document.querySelector('.__mv_support_button').classList.add('hide')
                    document.querySelector('.__mv_offline').style.display = 'block'
                }
            })


            socket.on('get-count-support', (data) => {
                socket.emit('get-count-support', true);
            })
        }, 300)

    }, 300)




    document.querySelectorAll('a').forEach((linkElement) => {

        linkElement.addEventListener('click', (event) => {
            if (
                linkElement.getAttribute('href').indexOf('tel') > -1 ||
                linkElement.getAttribute('href').indexOf('instagram') > -1 ||
                linkElement.getAttribute('href').indexOf('whatsapp') > -1 ||
                linkElement.getAttribute('href').indexOf('wa.me') > -1
            ) {

                if(linkElement.getAttribute('href').indexOf('tel') > -1 && __mv_booking_url){
                    window.open(`${__mv_booking_url}?call_action=${linkElement.getAttribute('href')}`,'_blank')
                }

                event.preventDefault();
                socket.emit('register-call-button-event', JSON.stringify({
                    action: linkElement.getAttribute('href'),
                    data: __mvData
                }))
                setTimeout(() => {
                    window.open(linkElement.getAttribute('href'), '_blank');
                }, 200)

            }
        })

    })


})

document.head.appendChild(socketIoCleintScript)


// })