@section('title', 'Aplicativos de TV')

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

@include('admin/includes/header')

@php
    /* o estado da fila de TV: mesma leitura da tela do Android, outros números */
    $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 de TV</h1>

        @isset($s)
            <p>{{ $allApps->total() }} {{ $allApps->total() == 1 ? 'resultado' : 'resultados' }} para esta busca.</p>
        @else
            <p>{{ $allApps->total() }} {{ $allApps->total() == 1 ? 'aplicativo publicado ou em andamento' : '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 str__find-in--wide" type="text" id="pSea" maxlength="60" placeholder="Nome ou instância de TV"
               autocapitalize="off" autocomplete="off" aria-label="Buscar pelo nome ou pela instância">

        <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>Busca por <b>{{ $s }}</b></span>
            <a href="{{ route('admin.appsTv') }}" 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.filterTV') }}" 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.filterTV') }}" 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.filterTV') }}" 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
</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]; @endphp

                    <tr>
                        <td>
                            <span class="app__name">{{ $app->name ?: 'Sem nome' }}</span>
                            <span class="app__port">{{ $app->stream_tv_name ?: 'Site ' . $app->site_id }}</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 }}">{{ $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.releaseTV') }}" method="POST" class="d-none">
                                    @csrf
                                    <input type="hidden" name="id" value="{{ $app->id }}">
                                    <input type="hidden" name="server" value="{{ $app->qr }}">
                                </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.appTv', [$app->qr, $app->id]) }}" target="_blank" title="Abrir o cadastro">
                                        <i class="fa-solid fa-pen"></i>
                                    </a>

                                    <button class="app__ico" type="button" title="Liberar formulário"
                                            onclick="formRelease({{ $app->id }}, @js($app->name))">
                                        <i class="fa-solid fa-rotate-left"></i>
                                    </button>
                                @endif
                            </span>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    @endif
</div>

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

<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>
            <p class="app__note">O cliente preenche os dados novamente, do início, e o aplicativo volta para pendente.</p>
        </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';

    /* ---------- modal ---------- */

    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);
        }
    });

    document.addEventListener('keydown', function (evento) {
        if (evento.key === 'Escape') {
            document.querySelectorAll('.mmodal').forEach(function (m) { m.hidden = true; });
            document.body.classList.remove('mgr-locked');
        }
    });

    /* ---------- busca ---------- */

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

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

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

    buscar.addEventListener('click', irParaBusca);

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

function formRelease(id, nome) {
    document.getElementById('releaseModal-name').innerHTML = '<b>' + (nome || 'Sem nome') + '</b>';

    var ok = document.getElementById('releaseModal-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.disabled = false;

    novo.addEventListener('click', function () {
        novo.disabled = true;
        document.getElementById('form-release-' + id).submit();
    });

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

/* ---------- 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')