@section('title', 'Aplicativos Android')

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

@include('admin/includes/header')

@php
    /* estado do aplicativo: o rótulo e a cor moram no mesmo lugar, e o JS usa a
       mesma tabela quando muda o status sem recarregar */
    $estados = [
        0 => ['Pendente', 'is-wait'],
        1 => ['Publicado', 'is-live'],
        2 => ['Aguard. publicação', 'is-wait'],
        3 => ['Análise', 'is-review'],
        4 => ['Desativado', 'is-off'],
    ];
@endphp

<div class="mgr-head">
    <div>
        <h1>Aplicativos Android</h1>
        @isset($s)
            <p>{{ $allApps->total() }} {{ $allApps->total() == 1 ? 'resultado' : 'resultados' }} para esta porta.</p>
        @else
            <p>{{ $allApps->total() }} aplicativos publicados ou em andamento.</p>
        @endisset
    </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>

@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

<div class="str__bar">
    @isset($s)
        <span class="str__chip">
            <i class="fa-solid fa-magnifying-glass"></i>
            <span>Porta <b>{{ $s }}</b></span>
            <a href="{{ route('admin.apps') }}" title="Limpar a busca" aria-label="Limpar a busca">
                <i class="fa-solid fa-xmark"></i>
            </a>
        </span>
    @else
        <div class="app__accounts">
            <form action="{{ route('admin.apps.filter') }}" method="POST">
                @csrf
                <button class="app__acc{{ isset($accountFilter) ? '' : ' is-on' }}" type="submit">Todos</button>
            </form>

            @foreach($accountsFilter as $account => $count)
                @continue($account === 0)

                @php
                    $nome = data_get($accountsMap, $account . '.name', 'Conta ' . $account);
                    $desativada = (int) data_get($accountsMap, $account . '.status', 1) === 0;
                    $escolhida = isset($accountFilter) && (string) $accountFilter === (string) $account;
                    $classe = 'app__acc' . ($escolhida ? ' is-on' : '') . ($desativada ? ' is-off' : '');
                @endphp

                <form action="{{ route('admin.apps.filter') }}" method="POST">
                    @csrf
                    <input type="hidden" name="account" value="{{ $account }}">

                    <button class="{{ $classe }}" type="submit" title="{{ $desativada ? 'Conta desativada' : 'Ver só esta conta' }}">
                        <span>{{ $nome }}</span>
                        <span class="app__acc-n">{{ $count }}</span>
                    </button>
                </form>
            @endforeach

            @php
                $semConta = isset($accountFilter) && (string) $accountFilter === '0';
            @endphp

            <form action="{{ route('admin.apps.filter') }}" method="POST">
                @csrf
                <input type="hidden" name="account" value="0">

                <button class="app__acc{{ $semConta ? ' is-on' : '' }}" type="submit">
                    <span>Sem conta</span>
                    <span class="app__acc-n">{{ $accountsFilter[0] ?? 0 }}</span>
                </button>
            </form>
        </div>
    @endisset

    <button class="btn app__accs-open" type="button" data-open-accounts>
        <i class="fa-brands fa-google-play"></i>
        <span>Contas da Play Store</span>
    </button>
</div>

<div class="card">
    @if($allApps->count() == 0)
        <p class="app__empty">Nenhum aplicativo encontrado.</p>
    @else
        <table class="app__table">
            <thead>
                <tr>
                    <th>Aplicativo</th>
                    <th>Solicitado em</th>
                    <th>Estado</th>
                    <th>Conta</th>
                    <th class="text-end">Ações</th>
                </tr>
            </thead>
            <tbody>
                @foreach($allApps as $app)
                    @php
                        [$rotulo, $classe] = $estados[(int) $app->status] ?? $estados[1];
                        $previewUrl = 'https://android-content.brascast.com/configs/index.php?id=' . $app->site_id . '&s=' . $app->qr;
                    @endphp

                    <tr>
                        <td>
                            <span class="app__name">
                                @if(! empty($app->update_released_at))
                                    <i class="fa-solid fa-clock-rotate-left app__again"
                                       title="Formulário liberado em {{ date('d/m/Y H:i', strtotime($app->update_released_at)) }}"></i>
                                @endif
                                {{ $app->name ?: 'Sem nome' }}
                            </span>
                            <span class="app__port">Porta {{ $app->port }}</span>
                        </td>

                        <td data-l="Solicitado em"><span class="app__when">{{ ($quando = strtotime((string) $app->created_at)) > 0 ? date('d/m/Y H:i', $quando) : '--' }}</span></td>

                        <td data-l="Estado"><span class="app__state {{ $classe }}" id="status-cell-{{ $app->id }}">{{ $rotulo }}</span></td>

                        <td data-l="Conta"><span class="app__acc-cell">{{ $app->account_display ?? '--' }}</span></td>

                        <td>
                            @if($app->status != '0')
                                <form id="form-release-{{ $app->id }}" action="{{ route('admin.apps.release') }}" method="POST" class="d-none">
                                    @csrf
                                    <input type="hidden" name="id" value="{{ $app->id }}">
                                    <input type="hidden" name="server" value="{{ $app->qr }}">
                                    <input type="hidden" name="action_type" id="form-release-action-{{ $app->id }}" value="form">
                                </form>
                            @endif

                            <span class="app__acts">
                                @if(! empty($app->app_link))
                                    <a class="app__ico app__store btn-playstore is-checking"
                                       href="https://play.google.com/store/apps/details?id={{ $app->app_link }}"
                                       target="_blank" rel="noopener noreferrer"
                                       data-package="{{ $app->app_link }}" title="Verificando na Play Store...">
                                        <i class="fa-solid fa-circle-notch fa-spin"></i>
                                    </a>
                                @endif

                                @if($app->status == '0')
                                    <button class="app__ico" type="button" disabled title="Formulário ainda pendente">
                                        <i class="fa-solid fa-pen"></i>
                                    </button>
                                @else
                                    <a class="app__ico" href="{{ route('admin.app', [$app->qr, $app->id]) }}" target="_blank" title="Abrir o cadastro">
                                        <i class="fa-solid fa-pen"></i>
                                    </a>
                                @endif

                                <button class="app__ico" type="button" data-row-menu="rowmenu-{{ $app->id }}" title="Mais ações">
                                    <i class="fa-solid fa-ellipsis"></i>
                                </button>

                                <ul class="app__menu" id="rowmenu-{{ $app->id }}" hidden>
                                    <li>
                                        <button type="button"
                                                onclick="quickStatus({{ $app->id }}, {{ $app->qr }}, {{ (int) $app->status }}, @js($app->name), {{ $app->port }})">
                                            <i class="fa-solid fa-toggle-on"></i> Alterar estado
                                        </button>
                                    </li>
                                    <li>
                                        <a href="{{ $previewUrl }}" target="_blank" rel="noopener noreferrer">
                                            <i class="fa-regular fa-eye"></i> Visualizar o app
                                        </a>
                                    </li>

                                    @if($app->status != '0')
                                        <li><hr></li>
                                        <li>
                                            <button class="is-danger" type="button"
                                                    onclick="formRelease({{ $app->port }}, @js($app->name), {{ $app->id }}, {{ $app->qr }})">
                                                <i class="fa-solid fa-rotate-left"></i> Liberar formulário
                                            </button>
                                        </li>
                                    @endif
                                </ul>
                            </span>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    @endif
</div>

@empty($s)
    {{ $allApps->links('vendor.pagination.default') }}
@endempty

{{-- ---------------------------------------------------------- modais -- --}}

<div class="mmodal" id="accountsModal" hidden>
    <div class="mmodal__card" role="dialog" aria-modal="true">
        <header class="mmodal__head">
            <h2 class="mmodal__title">Contas da Play Store</h2>
            <button class="mmodal__x" type="button" data-close-modal="accountsModal" aria-label="Fechar">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </header>

        <div class="mmodal__body">
            <form class="app__new" action="{{ route('admin.apps.storeAccount') }}" method="POST">
                @csrf

                <label class="field">
                    <span>Nome de identificação</span>
                    <input class="form-control" type="text" name="name" required placeholder="Ex: Principal, Conta do João">
                </label>

                <label class="field">
                    <span>Estado inicial</span>
                    <select class="form-select" name="status">
                        <option value="1">Ativa</option>
                        <option value="0">Desativada</option>
                    </select>
                </label>

                <button class="btn btn-primary" type="submit">Adicionar</button>
            </form>

            <div class="mmodal__scroll">
                <table class="app__accs">
                    <thead>
                        <tr>
                            <th style="width: 60px">#</th>
                            <th>Nome</th>
                            <th style="width: 120px">Estado</th>
                            <th style="width: 80px"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($playstoreAccounts as $acc)
                            <tr>
                                <td>{{ str_pad((string) $acc->id, 2, '0', STR_PAD_LEFT) }}</td>
                                <td>{{ $acc->name }}</td>
                                <td>
                                    <span class="@if($acc->status) app__on @else app__offtxt @endif">
                                        {{ $acc->status ? 'Ativa' : 'Desativada' }}
                                    </span>
                                </td>
                                <td class="text-end">
                                    <button class="app__ico" type="button" title="Editar"
                                            onclick="editAccountModal({{ $acc->id }}, @js($acc->name), {{ (int) $acc->status }})">
                                        <i class="fa-solid fa-pen"></i>
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="mmodal" id="editAccountModal" hidden>
    <div class="mmodal__card mmodal__card--slim" role="dialog" aria-modal="true">
        <form action="{{ route('admin.apps.updateAccount') }}" method="POST">
            @csrf
            <input type="hidden" name="id" id="editAccountId">

            <header class="mmodal__head">
                <h2 class="mmodal__title">Editar a conta</h2>
                <button class="mmodal__x" type="button" data-close-modal="editAccountModal" aria-label="Fechar">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </header>

            <div class="mmodal__body">
                <label class="field">
                    <span class="form-label">Nome de identificação</span>
                    <input class="form-control" type="text" name="name" id="editAccountName" required>
                </label>

                <label class="field mt-3">
                    <span class="form-label">Estado</span>
                    <select class="form-select" name="status" id="editAccountStatus">
                        <option value="1">Ativa</option>
                        <option value="0">Desativada</option>
                    </select>
                </label>
            </div>

            <footer class="mmodal__foot">
                <button class="btn" type="button" data-close-modal="editAccountModal">Cancelar</button>
                <button class="btn btn-primary" type="submit">Salvar</button>
            </footer>
        </form>
    </div>
</div>

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

        <div class="mmodal__body">
            <p class="app__note" id="statusModal-name"></p>

            <label class="field">
                <span class="form-label">Estado</span>
                <select class="form-select" id="statusModal-pick">
                    @foreach($estados as $valor => $estado)
                        <option value="{{ $valor }}">{{ $estado[0] }}</option>
                    @endforeach
                </select>
            </label>

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

        <footer class="mmodal__foot">
            <button class="btn" type="button" data-close-modal="statusModal">Cancelar</button>
            <button class="btn btn-primary" type="button" id="statusModal-ok">Salvar</button>
        </footer>
    </div>
</div>

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

        <div class="mmodal__body">
            <p class="app__note" id="releaseModal-name"></p>

            <div class="app__pick">
                <label>
                    <input type="radio" name="release_type" value="form" checked>
                    <span>
                        <b>Liberar o formulário</b>
                        <span>O cliente preenche os dados novamente, do início.</span>
                    </span>
                </label>

                <label>
                    <input type="radio" name="release_type" value="update">
                    <span>
                        <b>Marcar atualização</b>
                        <span>Mantém a personalização atual e muda o estado para aguardando publicação.</span>
                    </span>
                </label>
            </div>
        </div>

        <footer class="mmodal__foot">
            <button class="btn" type="button" data-close-modal="releaseModal">Cancelar</button>
            <button class="btn btn-primary" type="button" id="releaseModal-ok">Confirmar</button>
        </footer>
    </div>
</div>

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

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

    window.mgrModal = {
        open: function (id) {
            document.getElementById(id).hidden = false;
            document.body.classList.add('mgr-locked');
        },
        close: function (id) {
            document.getElementById(id).hidden = true;
            document.body.classList.remove('mgr-locked');
        }
    };

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

        if (fechar) {
            window.mgrModal.close(fechar.dataset.closeModal);

            return;
        }

        if (evento.target.closest('[data-open-accounts]')) {
            window.mgrModal.open('accountsModal');
        }
    });

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

        document.querySelectorAll('.mmodal').forEach(function (m) { m.hidden = true; });
        document.body.classList.remove('mgr-locked');
    });

    /* ---------- menu de ações ---------- */

    /* solto na página e posicionado por JS: dentro da tabela ele seria cortado */
    var menus = Array.prototype.slice.call(document.querySelectorAll('[data-row-menu]'));

    function fecharMenus() {
        document.querySelectorAll('.app__menu').forEach(function (m) { m.hidden = true; });
    }

    menus.forEach(function (botao) {
        var lista = document.getElementById(botao.dataset.rowMenu);

        document.body.appendChild(lista);

        botao.addEventListener('click', function (evento) {
            evento.stopPropagation();

            var estava = ! lista.hidden;

            fecharMenus();

            if (estava) {
                return;
            }

            var alvo = botao.getBoundingClientRect();

            lista.hidden = false;
            lista.style.top = (alvo.bottom + 6) + 'px';
            lista.style.left = Math.max(8, alvo.right - lista.offsetWidth) + 'px';
        });
    });

    document.addEventListener('click', fecharMenus);
    window.addEventListener('scroll', fecharMenus, true);
    window.addEventListener('resize', fecharMenus);

    /* ---------- busca por porta ---------- */

    var campo = document.getElementById('pSea');
    var buscar = document.getElementById('sea');

    function irParaBusca() {
        var valor = campo.value.trim();

        if (valor !== '') {
            window.location.href = '{{ route('admin.apps') }}/' + encodeURIComponent(valor);
        }
    }

    buscar.addEventListener('click', irParaBusca);

    campo.addEventListener('keyup', function (evento) {
        if (evento.key === 'Enter') {
            irParaBusca();
        }
    });
}());

/* ---------- ações da linha ---------- */

var ESTADOS = @js(collect($estados)->map(fn ($e) => ['label' => $e[0], 'cls' => $e[1]])->all());

function quickStatus(id, server, atual, nome, porta) {
    var modal = document.getElementById('statusModal');

    document.getElementById('statusModal-name').innerHTML = 'Porta <b>' + porta + '</b> &middot; ' + (nome || '');
    document.getElementById('statusModal-pick').value = atual;
    document.getElementById('statusModal-err').hidden = true;

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

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

    novo.addEventListener('click', function () {
        var valor = document.getElementById('statusModal-pick').value;

        novo.disabled = true;

        fetch('{{ route('admin.apps.quickStatus') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]') ? document.querySelector('meta[name="csrf-token"]').content : ''
            },
            body: JSON.stringify({ id: id, server: server, status: valor })
        }).then(function (r) { return r.json(); }).then(function (json) {
            novo.disabled = false;

            if (! json.success) {
                var erro = document.getElementById('statusModal-err');

                erro.textContent = json.message || 'Não foi possível atualizar.';
                erro.hidden = false;

                return;
            }

            var alvo = document.getElementById('status-cell-' + id);
            var estado = ESTADOS[json.status] || ESTADOS[1];

            if (alvo) {
                alvo.className = 'app__state ' + estado.cls;
                alvo.textContent = estado.label;
            }

            window.mgrModal.close('statusModal');
        }).catch(function () {
            novo.disabled = false;

            var erro = document.getElementById('statusModal-err');

            erro.textContent = 'Falha de conexão.';
            erro.hidden = false;
        });
    });

    window.mgrModal.open('statusModal');
}

function formRelease(porta, nome, id, server) {
    document.getElementById('releaseModal-name').innerHTML = 'Porta <b>' + porta + '</b> &middot; ' + (nome || '');
    document.querySelector('#releaseModal input[value="form"]').checked = true;

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

    ok.parentNode.replaceChild(novo, ok);

    novo.addEventListener('click', function () {
        var escolhido = document.querySelector('#releaseModal input[name="release_type"]:checked');

        if (! escolhido) {
            return;
        }

        document.getElementById('form-release-action-' + id).value = escolhido.value;
        document.getElementById('form-release-' + id).submit();
    });

    window.mgrModal.open('releaseModal');
}

function editAccountModal(id, nome, status) {
    document.getElementById('editAccountId').value = id;
    document.getElementById('editAccountName').value = nome;
    document.getElementById('editAccountStatus').value = status;

    window.mgrModal.open('editAccountModal');
}

/* ---------- verificação na Play Store ---------- */

(function () {
    'use strict';

    var LIMITE = 5;
    var botoes = Array.prototype.slice.call(document.querySelectorAll('.btn-playstore'));

    if (! botoes.length) {
        return;
    }

    var rotulos = {
        ok: 'Encontrado na Play Store',
        missing: 'Não encontrado na Play Store',
        unknown: 'Não foi possível verificar na Play Store'
    };

    function pintar(botao, estado) {
        botao.classList.remove('is-checking', 'is-ok', 'is-missing', 'is-unknown');
        botao.classList.add('is-' + estado);
        botao.innerHTML = '<i class="fa-brands fa-google-play"></i>';
        botao.title = rotulos[estado];
    }

    function verificar(botao) {
        var pacote = botao.dataset.package;

        if (! pacote) {
            pintar(botao, 'unknown');

            return Promise.resolve();
        }

        return fetch('{{ route('admin.apps.checkLink') }}?package=' + encodeURIComponent(pacote), {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        }).then(function (r) {
            return r.ok ? r.json() : null;
        }).then(function (json) {
            if (! json) {
                pintar(botao, 'unknown');

                return;
            }

            pintar(botao, json.status === 200 ? 'ok' : (json.status === 404 ? 'missing' : 'unknown'));
        }).catch(function () {
            pintar(botao, 'unknown');
        });
    }

    /* de cinco em cinco: a Play Store não gosta de uma rajada por linha da tabela */
    var fila = botoes.slice();

    function trabalhar() {
        if (! fila.length) {
            return Promise.resolve();
        }

        return verificar(fila.shift()).then(trabalhar);
    }

    var frentes = [];

    for (var i = 0; i < LIMITE; i++) {
        frentes.push(trabalhar());
    }

    Promise.all(frentes);
}());
</script>

@include('admin/includes/footer')