@section('title', 'Termos iOS')

@section('head')
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/manager-terms.css') }}">
@endsection

@include('admin/includes/header')

<div class="mgr-head">
    <div>
        <h1>Termos iOS</h1>
        <p>Confira o termo assinado e aceite ou recuse a autorização de publicação.</p>
    </div>

    <div class="str__find">
        <i class="fa-solid fa-magnifying-glass str__find-ic"></i>

        <input class="str__find-in" type="text" id="pSea" maxlength="5" placeholder="Porta do streaming"
               autocapitalize="off" autocomplete="off" inputmode="numeric" aria-label="Buscar pela porta"
               oninput="this.value = this.value.replace(/[^0-9]/g, '');">

        <button class="str__find-go" type="button" id="sea">Buscar</button>
    </div>
</div>

<div class="trm__tabs">
    <button class="trm__tab trm__tab--wait is-on" type="button" data-fila="0">
        <span class="trm__tab-ico"><i class="fa-regular fa-clock"></i></span>
        <span>
            <b class="trm__tab-n" id="conta-0">--</b>
            <span class="trm__tab-l">Aguardando análise</span>
        </span>
    </button>

    <button class="trm__tab trm__tab--ok" type="button" data-fila="1">
        <span class="trm__tab-ico"><i class="fa-regular fa-circle-check"></i></span>
        <span>
            <b class="trm__tab-n" id="conta-1">--</b>
            <span class="trm__tab-l">Aceitos</span>
        </span>
    </button>

    <button class="trm__tab trm__tab--no" type="button" data-fila="2">
        <span class="trm__tab-ico"><i class="fa-regular fa-circle-xmark"></i></span>
        <span>
            <b class="trm__tab-n" id="conta-2">--</b>
            <span class="trm__tab-l">Recusados</span>
        </span>
    </button>
</div>

<div class="str__bar">
    <span class="str__chip" id="chipBusca" hidden>
        <i class="fa-solid fa-magnifying-glass"></i>
        <span id="chipBusca-txt"></span>
        <a href="javascript:void(0)" id="chipBusca-x" title="Limpar a busca" aria-label="Limpar a busca">
            <i class="fa-solid fa-xmark"></i>
        </a>
    </span>

    <span class="trm__updated" id="atualizado"></span>
</div>

<div class="card">
    <table class="trm__table">
        <thead>
            <tr>
                <th style="width: 90px">Porta</th>
                <th>Rádio</th>
                <th>Titular</th>
                <th id="colunaExtra" style="width: 190px">Aguardando</th>
                <th class="text-end" style="width: 130px">Ação</th>
            </tr>
        </thead>
        <tbody id="lista"></tbody>
    </table>
</div>

<div class="mmodal trm__modal" id="termModal" hidden>
    <div class="mmodal__card" role="dialog" aria-modal="true">
        <header class="mmodal__head">
            <h2 class="mmodal__title">
                Termo da porta <b id="vPorta">--</b>
                <span class="app__state" id="vEstado"></span>
            </h2>

            <button class="mmodal__x" type="button" data-close-modal="termModal" aria-label="Fechar">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </header>

        <div class="trm__view">
            <iframe class="trm__pdf" id="vPdf" src="" title="Termo assinado"></iframe>

            <div class="trm__panel">
                <div class="trm__panel-body mgr-scroll">
                    <div id="vResultado"></div>

                    <div class="trm__field">
                        <label>Rádio</label>
                        <p id="vSite">--</p>
                    </div>

                    <div class="trm__field">
                        <label>Titular</label>
                        <p id="vTitular">--</p>
                    </div>

                    <div class="trm__field">
                        <label>Documento</label>
                        <p class="is-mono" id="vDocumento">--</p>
                    </div>

                    <div class="trm__field">
                        <label>Endereço declarado</label>
                        <p id="vEndereco">--</p>
                    </div>

                    <div class="trm__field">
                        <label>Forma de assinatura</label>
                        <p id="vAssinatura">--</p>
                    </div>

                    <div class="trm__field">
                        <label>Enviado em</label>
                        <p id="vData">--</p>
                    </div>
                </div>

                <div class="trm__acts" id="acoes">
                    <div id="acaoPendente" hidden>
                        <button class="btn btn-primary" type="button" id="btnAceitar">
                            <i class="fa-solid fa-check"></i>
                            <span>Aceitar o termo</span>
                        </button>

                        <button class="btn btn-danger" type="button" id="btnRecusar">
                            <i class="fa-solid fa-xmark"></i>
                            <span>Recusar o termo</span>
                        </button>

                        <div class="trm__reject" id="painelRecusa" hidden>
                            <label class="form-label" for="motivo">Motivo da recusa</label>

                            <select class="form-select" id="motivo">
                                <option value="" selected disabled>Selecione o motivo</option>
                                @foreach($rejectReasons as $chave => $texto)
                                    <option value="{{ $chave }}">{{ $texto }}</option>
                                @endforeach
                            </select>

                            <textarea class="form-control" id="nota" rows="3" maxlength="500" placeholder="Nota adicional para o cliente (opcional)"></textarea>

                            <button class="btn btn-danger app-save" type="button" id="btnConfirmaRecusa">
                                <i class="fa-solid fa-circle-notch fa-spin spin"></i>
                                <span class="app-save__label">Confirmar a recusa</span>
                            </button>
                        </div>
                    </div>

                    <div id="acaoAceito" hidden>
                        <button class="btn" type="button" id="btnReabrir">
                            <i class="fa-solid fa-rotate-left"></i>
                            <span>Liberar o formulário novamente</span>
                        </button>
                    </div>

                    <p class="mgr-erro" id="erroAcao" hidden></p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="mmodal" id="confirmModal" hidden>
    <div class="mmodal__card mmodal__card--slim" role="dialog" aria-modal="true">
        <header class="mmodal__head">
            <h2 class="mmodal__title" id="confirmModal-title">Confirmar</h2>
            <button class="mmodal__x" type="button" data-close-modal="confirmModal" aria-label="Fechar">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </header>

        <div class="mmodal__body">
            <p class="app-note" id="confirmModal-text"></p>
        </div>

        <footer class="mmodal__foot">
            <button class="btn" type="button" data-close-modal="confirmModal">Cancelar</button>
            <button class="btn btn-primary app-save" type="button" id="confirmModal-ok">
                <i class="fa-solid fa-circle-notch fa-spin spin"></i>
                <span class="app-save__label">Confirmar</span>
            </button>
        </footer>
    </div>
</div>

<script>
(function () {
    'use strict';

    var SERVIDORES = ['1', '2', '3'];
    var token = document.querySelector('meta[name="csrf-token"]');

    var fila = '0';
    var buscando = false;
    var pedido = 0;
    var termos = {};
    var atual = null;

    var lista = document.getElementById('lista');
    var colunaExtra = document.getElementById('colunaExtra');
    var chip = document.getElementById('chipBusca');

    /* ---------- modais ---------- */

    function abrir(id) {
        document.getElementById(id).hidden = false;
        document.body.classList.add('mgr-locked');
    }

    function fechar(id) {
        document.getElementById(id).hidden = true;

        if (! document.querySelector('.mmodal:not([hidden])')) {
            document.body.classList.remove('mgr-locked');
        }
    }

    document.addEventListener('click', function (evento) {
        var alvo = evento.target.closest('[data-close-modal]');

        if (alvo) {
            fechar(alvo.dataset.closeModal);

            if (alvo.dataset.closeModal === 'termModal') {
                document.getElementById('vPdf').src = '';
            }
        }
    });

    document.addEventListener('keydown', function (evento) {
        if (evento.key !== 'Escape') {
            return;
        }

        if (! document.getElementById('confirmModal').hidden) {
            fechar('confirmModal');

            return;
        }

        if (! document.getElementById('termModal').hidden) {
            document.getElementById('vPdf').src = '';
            fechar('termModal');
        }
    });

    /* ---------- espera ---------- */

    function espera(quando) {
        if (! quando) {
            return { texto: '--', classe: '', linha: '' };
        }

        var passou = Date.now() - new Date(quando.replace(' ', 'T')).getTime();
        var dias = Math.floor(passou / 86400000);
        var horas = Math.floor(passou / 3600000);
        var minutos = Math.floor((passou % 3600000) / 60000);

        if (dias >= 3) {
            return { texto: dias + ' dias', classe: 'is-late', linha: 'is-late' };
        }

        if (dias >= 1) {
            return { texto: dias + (dias === 1 ? ' dia' : ' dias'), classe: 'is-mid', linha: 'is-mid' };
        }

        if (horas >= 1) {
            return { texto: horas + (horas === 1 ? ' hora' : ' horas'), classe: 'is-mid', linha: 'is-new' };
        }

        if (minutos >= 1) {
            return { texto: minutos + (minutos === 1 ? ' minuto' : ' minutos'), classe: 'is-new', linha: 'is-new' };
        }

        return { texto: 'agora mesmo', classe: 'is-new', linha: 'is-new' };
    }

    function texto(valor, reserva) {
        var limpo = (valor === null || valor === undefined) ? '' : String(valor).trim();

        return limpo !== '' ? limpo : (reserva || '--');
    }

    function escapa(valor) {
        return texto(valor).replace(/[&<>"]/g, function (c) {
            return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c];
        });
    }

    /* ---------- desenho ---------- */

    function esqueleto() {
        var linha = '<tr><td><span class="trm__sk" style="width:52px"></span></td>'
            + '<td><span class="trm__sk" style="width:150px"></span></td>'
            + '<td><span class="trm__sk" style="width:130px"></span></td>'
            + '<td><span class="trm__sk" style="width:80px"></span></td>'
            + '<td></td></tr>';

        lista.innerHTML = linha + linha + linha;
    }

    function vazio(mensagem, icone) {
        lista.innerHTML = '<tr><td colspan="5"><p class="trm__empty"><i class="fa-regular ' + icone + '"></i>' + mensagem + '</p></td></tr>';
    }

    function desenhar(itens) {
        if (! itens.length) {
            if (buscando) {
                vazio('Nenhum termo encontrado para esta porta.', 'fa-folder-open');
            } else if (fila === '0') {
                vazio('Nenhum termo aguardando análise.', 'fa-circle-check');
            } else if (fila === '1') {
                vazio('Nenhum termo aceito.', 'fa-folder-open');
            } else {
                vazio('Nenhum termo recusado.', 'fa-folder-open');
            }

            return;
        }

        var estados = {
            '0': ['Pendente', 'is-wait'],
            '1': ['Aceito', 'is-live'],
            '2': ['Recusado', 'is-off']
        };

        lista.innerHTML = itens.map(function (item) {
            var chave = item.server_id + ':' + item.id;
            var estado = String(item.status);
            var aguardando = espera(item.signed_at);
            var celula;

            if (buscando) {
                var marca = estados[estado] || ['--', ''];

                celula = '<span class="app__state ' + marca[1] + '">' + marca[0] + '</span>';
            } else if (fila === '0') {
                celula = '<span class="trm__wait ' + aguardando.classe + '">' + aguardando.texto + '</span>';
            } else if (fila === '1') {
                celula = '<span class="trm__wait">' + escapa(item.formatted_date) + '</span>';
            } else {
                celula = item.reject_reason
                    ? '<span class="trm__reason" title="' + escapa(item.reject_reason) + '">' + escapa(item.reject_reason) + '</span>'
                    : '<span class="trm__wait">' + escapa(item.formatted_date) + '</span>';
            }

            var destaque = (! buscando && fila === '0') ? aguardando.linha : '';

            return '<tr class="' + destaque + '">'
                + '<td><span class="trm__port">' + escapa(item.port) + '</span></td>'
                + '<td><b class="trm__site">' + escapa(item.site_name, 'Sem nome') + '</b>'
                + '<span class="trm__radio">' + escapa(item.radio_name, 'Aplicativo iOS') + '</span></td>'
                + '<td><span class="trm__owner">' + escapa(item.document_name) + '</span></td>'
                + '<td>' + celula + '</td>'
                + '<td class="text-end"><button class="btn btn-sm' + (estado === '0' ? ' btn-primary' : '') + '" type="button" data-termo="' + chave + '">'
                + (estado === '0' ? 'Analisar' : 'Ver') + '</button></td>'
                + '</tr>';
        }).join('');
    }

    /* ---------- dados ---------- */

    function contar() {
        fetch('{{ route('admin.terms.counts') }}', { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function (r) { return r.ok ? r.json() : null; })
            .then(function (dados) {
                if (! dados) {
                    return;
                }

                document.getElementById('conta-0').textContent = dados.pending;
                document.getElementById('conta-1').textContent = dados.approved;
                document.getElementById('conta-2').textContent = dados.rejected;

                var agora = new Date();

                document.getElementById('atualizado').textContent = 'Atualizado às '
                    + agora.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
            });
    }

    /**
     * Busca nos tres servidores ao mesmo tempo.
     *
     * Cada um responde no seu tempo, e a tela redesenha a cada resposta: o
     * atendente ve o primeiro servidor sem esperar o mais lento.
     */
    function carregar(status, porta) {
        var meu = ++pedido;
        var juntos = [];

        termos = {};
        esqueleto();

        var pendentes = SERVIDORES.length;
        var falhou = false;

        SERVIDORES.forEach(function (servidor) {
            var url = '{{ route('admin.terms.data') }}?status=' + encodeURIComponent(status) + '&server=' + servidor
                + (porta ? '&port=' + encodeURIComponent(porta) : '');

            fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                .then(function (r) { return r.ok ? r.json() : null; })
                .then(function (dados) {
                    if (meu !== pedido) {
                        return;
                    }

                    if (! dados) {
                        falhou = true;
                    } else {
                        juntos = juntos.concat(dados.data || []);
                    }
                })
                .catch(function () { falhou = true; })
                .then(function () {
                    if (meu !== pedido) {
                        return;
                    }

                    pendentes--;

                    juntos.sort(function (a, b) {
                        return new Date(a.signed_at || 0) - new Date(b.signed_at || 0);
                    });

                    juntos.forEach(function (item) { termos[item.server_id + ':' + item.id] = item; });

                    if (juntos.length) {
                        desenhar(juntos);
                    } else if (pendentes === 0) {
                        falhou ? vazio('Falha ao consultar os servidores.', 'fa-circle-xmark') : desenhar([]);
                    }
                });
        });
    }

    /* ---------- filas e busca ---------- */

    function trocaFila(status) {
        fila = status;
        buscando = false;

        document.querySelectorAll('.trm__tab').forEach(function (aba) {
            aba.classList.toggle('is-on', aba.dataset.fila === status);
        });

        chip.hidden = true;
        document.getElementById('pSea').value = '';

        colunaExtra.textContent = status === '0' ? 'Aguardando' : (status === '1' ? 'Aceito em' : 'Motivo');

        carregar(status, '');
    }

    document.querySelectorAll('.trm__tab').forEach(function (aba) {
        aba.addEventListener('click', function () { trocaFila(aba.dataset.fila); });
    });

    function buscar() {
        var porta = document.getElementById('pSea').value.trim();

        if (porta === '') {
            return;
        }

        buscando = true;
        colunaExtra.textContent = 'Estado';

        document.getElementById('chipBusca-txt').innerHTML = 'Porta <b>' + escapa(porta) + '</b>, em qualquer fila';
        chip.hidden = false;

        carregar('all', porta);
    }

    document.getElementById('sea').addEventListener('click', buscar);

    document.getElementById('pSea').addEventListener('keyup', function (evento) {
        if (evento.key === 'Enter') {
            buscar();
        }
    });

    document.getElementById('chipBusca-x').addEventListener('click', function () { trocaFila(fila); });

    /* ---------- a ficha ---------- */

    lista.addEventListener('click', function (evento) {
        var botao = evento.target.closest('[data-termo]');

        if (! botao) {
            return;
        }

        var item = termos[botao.dataset.termo];

        if (! item) {
            return;
        }

        atual = item;

        var estado = String(item.status);
        var estados = { '0': ['Pendente', 'is-wait'], '1': ['Aceito', 'is-live'], '2': ['Recusado', 'is-off'] };
        var marca = estados[estado] || ['--', ''];

        document.getElementById('vPorta').textContent = texto(item.port);
        document.getElementById('vEstado').className = 'app__state ' + marca[1];
        document.getElementById('vEstado').textContent = marca[0];
        document.getElementById('vSite').textContent = texto(item.site_name, 'Sem nome');
        document.getElementById('vTitular').textContent = texto(item.document_name);
        document.getElementById('vDocumento').textContent = texto(item.entity_type) + ': ' + texto(item.document_number);
        document.getElementById('vAssinatura').textContent = texto(item.sign_method);
        document.getElementById('vData').textContent = texto(item.formatted_date);

        var endereco = [
            texto(item.street, ''),
            item.number ? 'nº ' + item.number : '',
            item.complement ? '(' + item.complement + ')' : '',
            texto(item.district, ''),
            (item.city && item.uf) ? item.city + '/' + item.uf : '',
            item.cep ? 'CEP ' + item.cep : ''
        ].filter(Boolean).join(', ');

        document.getElementById('vEndereco').textContent = endereco || '--';

        var caixa = document.getElementById('vResultado');

        if (estado === '1') {
            caixa.innerHTML = '<div class="trm__result is-ok"><b>Termo aceito</b><span>Aceito em '
                + escapa(item.updated_at) + '</span></div>';
        } else if (estado === '2') {
            caixa.innerHTML = '<div class="trm__result is-no"><b>Motivo da recusa</b><span>'
                + escapa(item.reject_reason, 'Motivo não informado.') + '</span>'
                + (item.reject_note ? '<small>' + escapa(item.reject_note) + '</small>' : '') + '</div>';
        } else {
            caixa.innerHTML = '';
        }

        document.getElementById('acaoPendente').hidden = estado !== '0';
        document.getElementById('acaoAceito').hidden = estado !== '1';
        document.getElementById('acoes').hidden = estado === '2';
        document.getElementById('painelRecusa').hidden = true;
        document.getElementById('erroAcao').hidden = true;
        document.getElementById('motivo').value = '';
        document.getElementById('nota').value = '';

        /* o PDF e trocado no servidor a cada reenvio: o carimbo evita o cache */
        var carimbo = item.signed_at || item.updated_at || '';

        document.getElementById('vPdf').src = item.pdf_path ? '/' + item.pdf_path + '?t=' + encodeURIComponent(carimbo) : '';

        abrir('termModal');
    });

    /* ---------- decisões ---------- */

    function avisar(mensagem) {
        var caixa = document.getElementById('erroAcao');

        caixa.textContent = mensagem;
        caixa.hidden = false;
    }

    function enviar(rota, dados, botao, aoTerminar) {
        if (botao.classList.contains('is-saving')) {
            return;
        }

        botao.classList.add('is-saving');
        document.getElementById('erroAcao').hidden = true;

        dados._token = token ? token.content : '';

        fetch(rota, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': token ? token.content : ''
            },
            body: JSON.stringify(dados)
        }).then(function (r) {
            return r.json().then(function (json) { return { ok: r.ok, json: json }; });
        }).then(function (resposta) {
            botao.classList.remove('is-saving');

            if (! resposta.ok || ! resposta.json.success) {
                avisar(resposta.json.message || 'Não foi possível salvar.');

                return;
            }

            aoTerminar();
        }).catch(function () {
            botao.classList.remove('is-saving');
            avisar('Falha de conexão.');
        });
    }

    function terminou() {
        document.getElementById('vPdf').src = '';
        fechar('confirmModal');
        fechar('termModal');
        contar();
        carregar(buscando ? 'all' : fila, buscando ? document.getElementById('pSea').value.trim() : '');
    }

    function confirmar(titulo, mensagem, rotulo, aoConfirmar) {
        document.getElementById('confirmModal-title').textContent = titulo;
        document.getElementById('confirmModal-text').innerHTML = mensagem;

        var ok = document.getElementById('confirmModal-ok');
        var novo = ok.cloneNode(true);

        /* o botão é trocado a cada abertura: assim não sobra o clique anterior */
        ok.parentNode.replaceChild(novo, ok);

        novo.disabled = false;
        novo.querySelector('.app-save__label').textContent = rotulo;
        novo.addEventListener('click', function () { aoConfirmar(novo); });

        abrir('confirmModal');
    }

    document.getElementById('btnAceitar').addEventListener('click', function () {
        confirmar(
            'Aceitar o termo',
            'A porta <b>' + escapa(atual.port) + '</b> passa a valer como autorizada, e o aplicativo iOS vai para pronto a publicar.',
            'Aceitar',
            function (botao) {
                enviar('{{ route('admin.terms.evaluate') }}', {
                    id: atual.id,
                    server_id: atual.server_id,
                    action: 'approve'
                }, botao, terminou);
            }
        );
    });

    document.getElementById('btnRecusar').addEventListener('click', function () {
        var painel = document.getElementById('painelRecusa');

        painel.hidden = ! painel.hidden;
    });

    document.getElementById('btnConfirmaRecusa').addEventListener('click', function () {
        var botao = this;
        var motivo = document.getElementById('motivo').value;

        if (! motivo) {
            avisar('Escolha o motivo da recusa.');

            return;
        }

        enviar('{{ route('admin.terms.evaluate') }}', {
            id: atual.id,
            server_id: atual.server_id,
            action: 'reject',
            reject_type: motivo,
            reject_note: document.getElementById('nota').value
        }, botao, terminou);
    });

    document.getElementById('btnReabrir').addEventListener('click', function () {
        confirmar(
            'Liberar o formulário',
            'O termo da porta <b>' + escapa(atual.port) + '</b> é apagado e o cliente preenche de novo, do início.',
            'Liberar',
            function (botao) {
                enviar('{{ route('admin.terms.restart') }}', {
                    id: atual.id,
                    server_id: atual.server_id
                }, botao, terminou);
            }
        );
    });

    /* ---------- início ---------- */

    contar();
    trocaFila('0');
}());
</script>

@include('admin/includes/footer')