$(function () {
    const url = new URL(window.location.href);
    const matricula = url.searchParams.get("matricula");
    if (matricula) {
        atendimentoAgente(matricula)
        atualizaStatusAgente(matricula)
    }

    localStorage.setItem('monitorRamaisStatus', $("input[name='conframal']:checked").val())
    $('input[name=conframal]').on('change', () => {
        localStorage.removeItem('monitorRamaisStatus')
        localStorage.setItem('monitorRamaisStatus', $("input[name='conframal']:checked").val())
    })
    
    resizegrid()
})

const desconectMesa = async () => {
    function req() {
       return $.ajax({
        url: 'index.php?idProg=307&pbxRequest=1&ajax=desconnect',
        type: "GET"
        }); 
    }
    await req().then(() => {
        window.location.href = "index.php?idProg=307&pbxRequest=1";
    })
}

const finalizarAtendimento = (uniqueid, matricula) => {
    $.ajax({
        url: localStorage.getItem('chatserverapi') + '/integracao/media/api/agente/finalizarAtendimento',
        type: "POST",
        data: JSON.stringify({
            matricula,
            uniqueid
        }),
        success: function (res) {
            if (res.status == "success") {
                console.log(res)
            }
        }
    });
}

const atendimentoAgente = (matricula) => {

    $.ajax({
        url: localStorage.getItem('chatserverapi') + '/integracao/media/api/agente/listarAtendimentoAgente',
        type: "POST",
        data: JSON.stringify({
            matricula
        }),
        success: function (res) {
            if (res.status == "success") {
                const atOn = []
                res.data.forEach((el) => {
                    let id_unique = el.uniqueid.replace('.', `\\.`)
                    if (el.evento == 'START' && $("#" + id_unique).length == 0) {
                        let tipo = el.direcao == 'E' ? 'Entrada' : 'Saída';
                        let plataforma = el.context.charAt(0).toUpperCase() + el.context.slice(1);
                        let dataParse = new Date(el.data_reg).toLocaleString()
                        const tempo = timeDiffCalc(new Date(el.data_reg), new Date())

                        $('#tableChatAgente tbody').append(`<tr id="${el.uniqueid}">
                            <td align="center">${el.profile_name}</td> 
                            <td align="center">${el.cliente_id}</td>
                            <td align="center">${plataforma}</td> 
                            <td align="center">${dataParse}</td>
                            <td align="center" id="${el.uniqueid}_tempo">${tempo}</td>
                            <td align="center">${tipo}</td>
                            <td align="center">${el.protocolo}</td>
                            <td align="center">
                                <a onclick="finalizarAtendimento('${el.uniqueid}','${el.matricula}')" style='cursor: pointer'>
                                    <img src="imgSite/exit16.png" width="16" height="16" border="0" title="Finalizar atendimento" alt="Finalizar atendimento">
                                </a>
                            </td>
                        </tr>`);
                    } else if ($("#" + id_unique).length > 0) {
                        $("#" + id_unique + "_tempo").text(timeDiffCalc(new Date(el.data_reg), new Date()))
                    }

                    if (el.evento == 'START') {
                        atOn.push(el.uniqueid);
                    }
                })

                const ids = []
                $("#tableChatAgente tbody").find("tr").each(function () {
                    ids.push(this.id);
                });

                ids.forEach((el) => {
                    if (atOn.indexOf(el) < 0) {
                        $("#" + el.replace('.', `\\.`)).remove()
                    }
                })
            }
        }
    });

    setTimeout(() => {
        atendimentoAgente(matricula)
    }, 1200);
}

const atualizaStatusAgente = (matricula) => {
    $.ajax({
        url: localStorage.getItem('chatserverapi') + '/integracao/media/api/agente/statusAgente',
        type: "POST",
        data: JSON.stringify({
            matricula
        }),
        success: function (res) {
            if (res.status == "success") {
                $('#status_agente').text(() => {
                    if ($(this).text() != res.data.status) {
                        return res.data.status
                    }
                })

                $('#pausa_agente').text(() => {
                    if ($(this).text() != res.data.motivo_pausa) {
                        return res.data.motivo_pausa ? res.data.motivo_pausa : '-'
                    }
                })

                $('#atendimento_agente').text(() => {
                    if ($(this).text() != res.data.numero_atendimento) {
                        return res.data.numero_atendimento
                    }
                })
            }
        }
    });

    setTimeout(() => {
        atualizaStatusAgente(matricula)
    }, 3000);
}

const finalizarAgente = (matricula) => {
    $.ajax({
        url: localStorage.getItem('chatserverapi') + '/integracao/media/api/agente/sair',
        type: "POST",
        data: JSON.stringify({
            matricula
        }),
        success: function (res) {
            if (res.status == "success") {
                alert('Agente foi desconectado')
            }
        }
    });
}

const sairPausa = (matricula) => {
    $.ajax({
        url: localStorage.getItem('chatserverapi') + '/integracao/media/api/agente/sairPausa',
        type: "POST",
        data: JSON.stringify({
            matricula
        }),
        success: function (res) {
            if (res.status == "success") {
                alert('Agente removido de pausa!')
            }
        }
    });
}

const criarGrid = (data) => {
    let cont = 0
    let line = ''
    let rline = ''
    let cdata = 0
    data.forEach((e) => {
        cont++
        line += e.row
        if (cont > 4 || cdata >= data.length) {
            rline += `<tr>${line}</tr>`
            line = ''
            cont = 0
        }
        cdata++
    })
    $('#dadosContato').append(rline);
}

const HangupCall = (id) => {
    $.ajax({
        url: "index.php?idProg=307&pbxRequest=1&ajax=hangup&f=" + id,
        type: "GET",
        success: function (res) {
            if (res) {
                console.log(res)
            }
        }
    });
}

const AtualizaChamdas = () => {
    
    if(localStorage.getItem('monitorRamaisStatus') != 'OK'){
        return
    }
    
    $.ajax({
        url: "index.php?idProg=307&pbxRequest=1&ajax=ramais",
        type: "GET",
        success: function (res) {
            if (res) {
                let lrow = []
                let crow = 0
                let status
                Object.keys(res).forEach((el) => {
                    if (res[el].Status == localStorage.getItem('monitorRamaisStatus') || res[el].Status.indexOf(localStorage.getItem('monitorRamaisStatus')) >= 0) {
                        let direct = ''
                        if (res[el].StatusCall == 'E') {
                            direct = res[el].CallInput + `&nbsp<img src="imgSite/direcaoE32.png" width="12px" align="absmiddle" style="margin-top:-2px">`
                        } else if (res[el].StatusCall == 'S') {
                            direct = res[el].CallOutput + `&nbsp<img src="imgSite/direcaoS32.png" width="12px" align="absmiddle" style="margin-top:-2px">`
                        }

                        let status = `<img src="imgSite/ledGreen.png" width="12px" align="absmiddle" style="margin-top:-2px"> LIVRE`
                        if (direct) {
                            status = `<img src="imgSite/ledRed.png" width="12px" align="absmiddle" style="margin-top:-2px"> OCUPADO`
                        } else if (res[el].Status == "UNKNOWN") {
                            status = `<img src="imgSite/Warning.png" width="12px" align="absmiddle" style="margin-top:-2px"> INATIVO`
                        }

                        let tbl = `<table align='center' style='border: 1px solid #D7D7D7;border-collapse: collapse;padding: 15px;' id='tblFunc'><tr>`
                        if (res[el].CallChannel) {
                            /**  ATIVACAO DO HUNGUP NA TELA DA MESA **/ 
                            //tbl += `<td><a id='${res[el].CallChannel}' href="#" onClick='HangupCall(this.id)'><img src='imgSite/exit16.png' background-repeat: no-repeat;border:0;padding-top:0"></a></td>`
                        }
                        tbl += `</tr></table>`

                        lrow.push({
                            ramal: res[el].ObjectName,
                            row: `<th id="${res[el].ObjectName}">
                                        <h3>${res[el].ObjectName}</h3>
                                        <p>${res[el].Duration} - ${direct}</p>
                                        <p>${status}</p>
                                        <p>${res[el].Status}</p>
                                        ${tbl}
                                    </th>`})
                        crow++
                    }
                })
                $("#dadosContato").html('')
                criarGrid(lrow)
            }
        }
    });
    setTimeout(function () {
        AtualizaChamdas();
        var alturaTable = $('#dadosContato').height();
        if (alturaTable + 300 > 1360) {
            $('#rodapeSite').css({"top": alturaTable + 300});
            $('#tabLayout').css({"height": alturaTable + 325});
        }
    }, 1200);
}

function timeDiffCalc(dateFuture, dateNow) {
    let diffInMilliSeconds = Math.abs(dateFuture - dateNow) / 1000;
    const days = Math.floor(diffInMilliSeconds / 86400);
    diffInMilliSeconds -= days * 86400;
    const hours = Math.floor(diffInMilliSeconds / 3600) % 24;
    diffInMilliSeconds -= hours * 3600;
    const minutes = Math.floor(diffInMilliSeconds / 60) % 60;
    diffInMilliSeconds -= minutes * 60;
    const seconds = Math.floor(diffInMilliSeconds);

    const adicionaZero = (numero) => {
        if (numero <= 9) {
            return "0" + numero;
        } else {
            return numero;
        }
    }

    let difference = '';
    if (days > 0) {
        difference += (days === 1) ? `${days}` : `${days}`;
    }

    difference += adicionaZero(hours);
    difference += ":" + adicionaZero(minutes);
    difference += ":" + adicionaZero(seconds);
    return difference;
}

const resizegrid = () => {
    
    let heightgrid = $('#content').height()
    if(heightgrid > 600){
        $('#rodapeSite').css({"top": $('#content').height() + 200});
    }
    
    setTimeout(() => {
        resizegrid()
    }, 1000);
}