@section('title', 'Administradores')

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

@include('admin/includes/header')

<div class="mgr-head">
    <div>
        <h1>Administradores</h1>
        <p>{{ $users->total() }} {{ $users->total() == 1 ? 'colaborador com acesso' : 'colaboradores com acesso' }} aos serviços dos clientes.</p>
    </div>

    <form class="str__find" method="GET" action="{{ route('admin.adminUsers') }}">
        <i class="fa-solid fa-magnifying-glass str__find-ic"></i>

        <input class="str__find-in str__find-in--wide" type="text" name="search" value="{{ $search }}"
               placeholder="Nome ou e-mail" autocomplete="off" aria-label="Buscar pelo nome ou e-mail">

        <button class="str__find-go" type="submit">Buscar</button>
    </form>
</div>

@if (\Session::has('success'))
    <div class="alert">{!! \Session::get('success') !!}</div>
    @php Session::forget('success'); @endphp
@endif

@if (\Session::has('error'))
    <div class="alert alert-danger">{!! \Session::get('error') !!}</div>
    @php Session::forget('error'); @endphp
@endif

@if($search !== '')
    <div class="str__bar">
        <span class="str__chip">
            <i class="fa-solid fa-magnifying-glass"></i>
            <span>Busca por <b>{{ $search }}</b></span>
            <a href="{{ route('admin.adminUsers') }}" title="Limpar a busca" aria-label="Limpar a busca">
                <i class="fa-solid fa-xmark"></i>
            </a>
        </span>
    </div>
@endif

<div class="card">
    @if($users->count() == 0)
        <p class="adm__empty">Nenhum administrador encontrado.</p>
    @else
        <table class="adm__table">
            <thead>
                <tr>
                    <th>Colaborador</th>
                    <th>E-mail</th>
                    <th class="text-end">Ações</th>
                </tr>
            </thead>
            <tbody>
                @foreach($users as $user)
                    @php
                        $nome = trim((string) $user->name) !== '' ? $user->name : null;
                        $email = trim((string) $user->email) !== '' ? $user->email : null;
                    @endphp

                    <tr>
                        <td>
                            <span class="adm__name{{ $nome ? '' : ' is-empty' }}">{{ $nome ?: 'Sem nome' }}</span>
                        </td>

                        <td data-l="E-mail">
                            <span class="adm__mail{{ $email ? '' : ' is-empty' }}">{{ $email ?: 'Sem e-mail' }}</span>
                        </td>

                        <td>
                            <span class="adm__acts">
                                <button class="btn btn-sm" type="button" data-servicos="{{ $user->id }}">
                                    <i class="fa-solid fa-sitemap"></i>
                                    <span>Serviços</span>
                                    <i class="fa-solid fa-chevron-down adm__caret"></i>
                                </button>

                                <button class="btn btn-sm" type="button"
                                        data-senha="{{ $user->id }}" data-nome="{{ $nome ?: $email }}">
                                    <i class="fa-solid fa-key"></i>
                                    <span>Senha</span>
                                </button>
                            </span>
                        </td>
                    </tr>

                    <tr class="adm__row" id="servicos-{{ $user->id }}" hidden>
                        <td colspan="3">
                            <div class="adm__box" id="servicos-box-{{ $user->id }}">
                                <span class="adm__loading"><i class="fa-solid fa-circle-notch fa-spin"></i> Consultando os servidores...</span>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    @endif
</div>

{{ $users->links('vendor.pagination.default') }}

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

        <div class="mmodal__body">
            <p class="app-note" id="senhaModal-nome"></p>

            <label class="app-field">
                <span class="form-label">Nova senha</span>

                <span class="app-copy">
                    <input class="form-control" type="password" id="senha" minlength="6" autocomplete="new-password" placeholder="Mínimo de 6 caracteres">
                    <button type="button" data-ver="senha" title="Mostrar a senha" aria-label="Mostrar a senha">
                        <i class="fa-regular fa-eye"></i>
                    </button>
                </span>
            </label>

            <label class="app-field">
                <span class="form-label">Repetir a senha</span>

                <span class="app-copy">
                    <input class="form-control" type="password" id="senha2" minlength="6" autocomplete="new-password" placeholder="Repita a senha">
                    <button type="button" data-ver="senha2" title="Mostrar a senha" aria-label="Mostrar a senha">
                        <i class="fa-regular fa-eye"></i>
                    </button>
                </span>
            </label>

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

        <footer class="mmodal__foot">
            <button class="btn" type="button" data-close-modal="senhaModal">Cancelar</button>

            <button class="btn btn-primary app-save" type="button" id="senhaModal-ok">
                <i class="fa-solid fa-circle-notch fa-spin spin"></i>
                <span class="app-save__label">Salvar a senha</span>
            </button>
        </footer>
    </div>
</div>

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

    var token = document.querySelector('meta[name="csrf-token"]');
    var alvo = null;
    var carregados = {};

    function escapa(valor) {
        return String(valor === null || valor === undefined ? '' : valor).replace(/[&<>"]/g, function (c) {
            return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c];
        });
    }

    /* ---------- serviços do colaborador ---------- */

    function desenhar(caixa, servicos) {
        if (! servicos.length) {
            caixa.innerHTML = '<span class="adm__none">Este colaborador não administra nenhum serviço.</span>';

            return;
        }

        caixa.innerHTML = '<ul class="adm__sites">' + servicos.map(function (item) {
            return '<li>'
                + '<span class="adm__srv srv-' + item.server + '">' + escapa(item.server_label) + '</span>'
                + '<a class="adm__dom" href="https://' + escapa(item.domain) + '" target="_blank" rel="noopener noreferrer">'
                + escapa(item.domain) + '</a>'
                + '<span class="adm__meta">' + escapa(item.name || 'Sem nome') + ' &middot; porta ' + escapa(item.stream_port) + '</span>'
                + (item.access_active ? '' : '<span class="adm__flag">acesso desligado</span>')
                + (item.service_active ? '' : '<span class="adm__flag is-off">serviço suspenso</span>')
                + '</li>';
        }).join('') + '</ul>';
    }

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

        if (! botao) {
            return;
        }

        var id = botao.dataset.servicos;
        var linha = document.getElementById('servicos-' + id);
        var caixa = document.getElementById('servicos-box-' + id);

        linha.hidden = ! linha.hidden;
        botao.classList.toggle('is-open', ! linha.hidden);

        if (linha.hidden || carregados[id]) {
            return;
        }

        carregados[id] = true;

        fetch('{{ url('manager/administrators') }}/' + encodeURIComponent(id) + '/sites', {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        }).then(function (r) {
            return r.ok ? r.json() : null;
        }).then(function (servicos) {
            if (! servicos) {
                caixa.innerHTML = '<span class="adm__none">Não foi possível consultar os servidores.</span>';
                carregados[id] = false;

                return;
            }

            desenhar(caixa, servicos);
        }).catch(function () {
            caixa.innerHTML = '<span class="adm__none">Falha de conexão.</span>';
            carregados[id] = false;
        });
    });

    /* ---------- senha ---------- */

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

    function fechar(id) {
        document.getElementById(id).hidden = true;
        document.body.classList.remove('mgr-locked');
    }

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

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

            return;
        }

        var olho = evento.target.closest('[data-ver]');

        if (olho) {
            var campo = document.getElementById(olho.dataset.ver);

            campo.type = campo.type === 'password' ? 'text' : 'password';
            olho.querySelector('i').className = campo.type === 'password' ? 'fa-regular fa-eye' : 'fa-regular fa-eye-slash';

            return;
        }

        var senha = evento.target.closest('[data-senha]');

        if (senha) {
            alvo = senha.dataset.senha;

            document.getElementById('senhaModal-nome').innerHTML = '<b>' + escapa(senha.dataset.nome) + '</b>';
            document.getElementById('senhaModal-err').hidden = true;
            document.getElementById('senha').value = '';
            document.getElementById('senha2').value = '';
            abrir('senhaModal');
        }
    });

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

    function avisar(mensagem) {
        var caixa = document.getElementById('senhaModal-err');

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

    document.getElementById('senhaModal-ok').addEventListener('click', function () {
        var botao = this;
        var senha = document.getElementById('senha').value;
        var repetida = document.getElementById('senha2').value;

        if (senha.trim().length < 6) {
            avisar('A senha precisa ter no mínimo 6 caracteres.');

            return;
        }

        if (senha !== repetida) {
            avisar('As duas senhas não são iguais.');

            return;
        }

        if (botao.classList.contains('is-saving')) {
            return;
        }

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

        fetch('{{ route('admin.adminUsers.password') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': token ? token.content : ''
            },
            body: JSON.stringify({ user_id: alvo, password: senha, _token: token ? token.content : '' })
        }).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 alterar a senha.');

                return;
            }

            botao.querySelector('.app-save__label').textContent = 'Senha alterada';
            botao.disabled = true;

            setTimeout(function () {
                fechar('senhaModal');

                botao.disabled = false;
                botao.querySelector('.app-save__label').textContent = 'Salvar a senha';
            }, 1200);
        }).catch(function () {
            botao.classList.remove('is-saving');
            avisar('Falha de conexão.');
        });
    });
}());
</script>

@include('admin/includes/footer')