<?php namespace AloVoice; ?>
<style>
    p[data-agent="name"] a {
        color: inherit;
    }
    .row{
        display:flex !important;
    }
    .queues_content{
        position: absolute;
        width: 100%;
        left: 0;
		height: calc(100% - 50px);
    }
	.queues_incontent{
		height: calc(100% - 40px);
	}
    .queues_agent_icon {
        position: absolute;
        padding: 2px;
        bottom: 10px;
        right: 21px;
        width: 22px;
        height: 22px;
    }
	#footer_panel{
		width:100%;
	}
</style>

<div class="queues_content px-2">
	<!-- <div class="row" >  pt-5 border
		<h3 class="h3 card-body text-center">Звонки</h3>
	</div> -->
	<div class="row p-1 bg-light queues_incontent">
		<div class="col-8">
            <div id="agents"></div>
            
        </div>
		<div class="col-4" id="queues"></div>
	</div>
	
	<div id="footer_panel">
		<button type="button" class="btn btn-outline-info" id="queues_update">
			<i data-feather="rotate-ccw" class="w-2 h-2" width="0.7em" height="0.7em"></i> Обновить 
		</button>
		<button type="button" class="btn btn-outline-primary" id="queues_add">
			<i data-feather="plus" class="w-2 h-2" width="0.7em" height="0.7em"></i> Добавить очередь 
		</button>
	</div>
</div>


<br/>


<script>
if (window.intervalId) {
    try {
        window.Queues = null
        clearInterval(window.intervalId)
    } catch (error) {}
}

var afterLoadPage = function () {
    window.queuesUpdate = () => {
        const page = $('.queues_content')

        // page switched
        if (!page.length) {
            return
        }

        loadAloVoiceInfo("alovoice_get_operators", function (res) {
            console.log(res)

            if (!window.Queues) {
                setQueues(res)
            } else {
                updateQueues(res)
            }
        });
    }

	window.queuesUpdate()	
    window.intervalId = setInterval(() => {
        window.queuesUpdate(DATA)
    }, 3 * 1000);

    $().ready(() => {
        $('#queues_update').on('click', () => {
            queuesUpdate()
        })
    })

    const target = {
        agents: "#agents",
        queues: "#queues"
    };
    const LOCALE = {
        queues: "Очереди",
        queuesEmpty: "Список пуст",
        channelsTitle: "Звонки",
    }

    const PARAMS = {
            agents: {
                status: {
                    color: {
                        0: "#CACFD2", // AST_DEVICE_UNKNOWN     УСТРОЙСТВО НЕИЗВЕСТНО
                        1: "#F5B041", // AST_DEVICE_NOT_INUSE   УСТРОЙСТВО НЕ ИСПОЛЬЗУЕТСЯ 
                        2: "#2ECC71", // AST_DEVICE_INUSE       УСТРОЙСТВО В ИСПОЛЬЗОВАНИИ
                        3: "#EC7063", // AST_DEVICE_BUSY        УСТРОЙСТВО ЗАНЯТО 
                        4: "#D35400", // AST_DEVICE_INVALID     УСТРОЙСТВО НЕДЕЙСТВИТЕЛЬНО
                        5: "#E74C3C", // AST_DEVICE_UNAVAILABLE УСТРОЙСТВО НЕ ДОСТУПНО
                        6: "#5DADE2", // AST_DEVICE_RINGING     УСТРОЙСТВО ЗВОНИТ
                        7: "#1ABC9C", // AST_DEVICE_RINGINUSE   УСТРОЙСТВО 
                        8: "#F1C40F", // AST_DEVICE_ONHOLD      УСТРОЙСТВО В ОЖИДАНИИ
                    },
                    text: {
                        0: "Неизвестно", // AST_DEVICE_UNKNOWN
                        1: "Не используется", // AST_DEVICE_NOT_INUSE
                        2: "Используется", // AST_DEVICE_INUSE
                        3: "Занято", // AST_DEVICE_BUSY
                        4: "Недействительно", // AST_DEVICE_INVALID
                        5: "Нет доступа", // AST_DEVICE_UNAVAILABLE
                        6: "Звонит", // AST_DEVICE_RINGING
                        7: "", // AST_DEVICE_RINGINUSE
                        8: "Ожидание", // AST_DEVICE_ONHOLD
                    }
                },
				
				statuscode: {
					'off' : 'Отключён',
					'free' : 'Свободен',
					'dnd' : 'DND вкл.',
					'incring' : 'Вх.звонок',
					'inccall' : 'Вх.разговор',
					'outring' : 'Исх.Звонок',
					'outcall' : 'Исх.Разговор',
				},
				
				statuscolor: {
					'off' : "#F26B47",
					'free' : "#FFF893",
					'dnd' : "#F5B041",
					'incring' : '#99ffb2',
					'inccall' : '#7BC56F',
					'outring' : '#73dcff',
					'outcall' : '#0070BF',
				}
            }
    }
    const queueColomsDAta = [
            {
                TEXT: "В Приветствии",
                TEMPLATE: {
                    BGCOLOR: "#FFFFCC"
                },
                DATA: [
                    {
                        TITLE: "5032000",
                        PHONE: "935570470",
                        INFO: "6000",
                        TIME: "10"
                    },
                    {
                        TITLE: "5032000",
                        PHONE: "935570470",
                        INFO: "6000",
                        TIME: "10"
                    },
                    {
                        TITLE: "5032000",
                        PHONE: "935570470",
                        INFO: "6000",
                        TIME: "10"
                    },
                ]
            },
            {
                TEXT: "В очереди",
                TEMPLATE: {
                    BGCOLOR: "#9966FF"
                },
                DATA: [
                    {
                        TITLE: "5032000",
                        PHONE: "935570470",
                        INFO: "6000",
                        TIME: "10"
                    },
                    {
                        TITLE: "5032000",
                        PHONE: "935570470",
                        INFO: "6000",
                        TIME: "10"
                    },
                    {
                        TITLE: "5032000",
                        PHONE: "935570470",
                        INFO: "6000",
                        TIME: "10"
                    },
                ]
            },
            {
                TEXT: "Все исходящие",
                TEMPLATE: {
                    BGCOLOR: "#6699FF"
                },
                DATA: [
                    {
                        TITLE: "5032000",
                        PHONE: "935570470",
                        INFO: "6000",
                        TIME: "10"
                    },
                    {
                        TITLE: "5032000",
                        PHONE: "935570470",
                        INFO: "6000",
                        TIME: "10"
                    },
                    {
                        TITLE: "5032000",
                        PHONE: "935570470",
                        INFO: "6000",
                        TIME: "10"
                    },
                ]
            },
            {
                TEXT: "Переадресованные",
                TEMPLATE: {
                    BGCOLOR: "#33CC99"
                },
                DATA: [
                    {
                        TITLE: "5032000",
                        PHONE: "935570470",
                        INFO: "6000",
                        TIME: "10"
                    },
                    {
                        TITLE: "5032000",
                        PHONE: "935570470",
                        INFO: "6000",
                        TIME: "10"
                    },
                    {
                        TITLE: "5032000",
                        PHONE: "935570470",
                        INFO: "6000",
                        TIME: "10"
                    },
                ]
            },

    ]

    const queueColoms = {
        TITLE: "Звонки", // now TIME
        DATAS: queueColomsDAta
    }

    const observers = {
        TEXT: "Observers",
        DATAS: [
            {
                IMG: "https://bitrix2.cdnvideo.ru/b11827782/resize_cache/44/7acf4cadf975128573a8b1c2766af5d8/main/11e/11e1010b3a10f6dfe0c657bb9ddabdee/ava_kulya2.jpg?h=4uz.bitrix24.ru",
                USER: "USER FULL NAME"
            },
            {
                IMG: "https://bitrix2.cdnvideo.ru/b11827782/resize_cache/44/7acf4cadf975128573a8b1c2766af5d8/main/11e/11e1010b3a10f6dfe0c657bb9ddabdee/ava_kulya2.jpg?h=4uz.bitrix24.ru",
                USER: "USER FULL NAME #2"
            },
        ]
    }
		
	const DATA = {
        AGERNTS: queues,
        QUEUES: queueColoms,
        OBSERVERS: observers
    }

    function setQueues(data) {
        var queuesConstruct, Queues;
        
        if (window.Queues) {
            return Queues;
        }

        queuesConstruct = getQuesue();
        Queues = new queuesConstruct({
            data: data,
            target: target,
            locale: LOCALE,
            params: PARAMS
        });

        Queues.init();
        window.Queues = Queues;
        return Queues;
    }

    function updateQueues(data) {
        if (!window.Queues) {
            return false;
        }

        return window.Queues.update(data);
    }
};

</script>
<script src="template/js/footer_queues.js<?php echo '?t='.time();?>"></script>
<!-- <script src="template/js/new_footer_queues.js<?php echo '?t='.time();?>"></script> -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.1.7/sweetalert2.js" integrity="sha512-TpJ9I6beSH5yjFlSM3XMwtpwV+TrWlzC4gqskXvhHEDdfJS28OjegMQzBbrdq4tCaa+ARXflVzGYkg99xGpwTQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sweetalert2/themes@5.0.5/bootstrap-4/bootstrap-4.css">