@section('title', 'Aplicativo de TV ' . $appData->id)

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

@include('admin/includes/header')

@php
    $estados = [
        0 => ['Pendente', 'is-wait'],
        1 => ['Publicado', 'is-live'],
        2 => ['Aguard. publicação', 'is-wait'],
        3 => ['Análise', 'is-review'],
        4 => ['Desativado', 'is-off'],
    ];

    [$rotulo, $classeEstado] = $estados[(int) $appData->status] ?? $estados[2];

    $quando = strtotime((string) $appData->created_at);
    $solicitado = $quando > 0 ? date('d/m/Y H:i', $quando) : null;

    $conta = $accounts->firstWhere('id', $appData->account);

    $politicas = 'https://brascast.com/contratos/aplicativo?' . http_build_query([
        'app' => $appData->name,
        'dev' => $conta ? $conta->name : 'Sem Conta',
    ]);

    $descricao = 'Instale nosso aplicativo para acompanhar nossa programação, interagir conosco, além de conferir nossa grade de programação completa.';
    $instancia = $siteData->stream_tv_name ?: null;
@endphp

<div class="mgr-head">
    <div>
        <a class="app-back" href="{{ route('admin.appsTv') }}">
            <i class="fa-solid fa-arrow-left"></i>
            <span>Aplicativos de TV</span>
        </a>

        <h1>{{ $appData->name ?: 'Sem nome' }}</h1>
        <p>{{ $instancia ?: 'Site ' . $appData->site_id }}@if($solicitado) &middot; solicitado em {{ $solicitado }}@endif</p>
    </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

@if (isset($appData->active) && $appData->active == '0')
    <div class="alert alert-danger">A instância vinculada a este aplicativo foi removida. Desabilite o aplicativo na Play Store.</div>
@endif

<div class="app-grid">
    <form class="app-card" method="POST" action="{{ route('admin.doAppTV', $server) }}" id="appForm">
        @csrf
        <input type="hidden" name="id" value="{{ $appData->id }}">

        <header class="app-card__head">
            <div>
                <h2>Dados do aplicativo</h2>
                <p>O que fica gravado no cadastro e vale para a publicação.</p>
            </div>

            <span class="app-state {{ $classeEstado }}">{{ $rotulo }}</span>
        </header>

        <div class="app-card__body">
            <div class="app-fields">
                <label class="app-field is-wide">
                    <span class="form-label">Nome</span>

                    <span class="app-copy">
                        <input class="form-control" type="text" name="name" value="{{ $appData->name }}" maxlength="120" required>
                        <button type="button" data-copy="name" title="Copiar o nome" aria-label="Copiar o nome">
                            <i class="fa-regular fa-copy"></i>
                        </button>
                    </span>
                </label>

                <label class="app-field">
                    <span class="form-label">Nome do pacote</span>
                    <input class="form-control" type="text" name="package" value="{{ $appData->package }}" maxlength="120">
                </label>

                <label class="app-field">
                    <span class="form-label">Versão</span>
                    <input class="form-control" type="text" name="version" id="version" value="{{ $appData->version }}" maxlength="20">
                    <span class="app-hint">Abaixo de 1000 o gerador usa 1000.</span>
                </label>

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

                    <select class="form-select" name="status">
                        @foreach([0, 2, 3, 1] as $valor)
                            <option value="{{ $valor }}" {{ (string) $appData->status === (string) $valor ? 'selected' : '' }}>{{ $estados[$valor][0] }}</option>
                        @endforeach
                    </select>
                </label>

                <label class="app-field">
                    <span class="form-label">Conta da Play Store</span>

                    <select class="form-select" name="account">
                        <option value="0" {{ $appData->account == '0' ? 'selected' : '' }}>Sem conta</option>

                        @foreach ($accounts as $acc)
                            <option value="{{ $acc->id }}" {{ $appData->account == $acc->id ? 'selected' : '' }}>
                                {{ str_pad((string) $acc->id, 2, '0', STR_PAD_LEFT) }} - {{ $acc->name }}{{ $acc->status ? '' : ' (desativada)' }}
                            </option>
                        @endforeach

                        <option value="externa" {{ $appData->account == 'externa' ? 'selected' : '' }}>Conta externa</option>
                    </select>
                </label>

                <label class="app-field is-wide">
                    <span class="form-label">Link do Google Play</span>

                    <span class="app-copy">
                        <input class="form-control" type="text" name="app_link"
                               value="https://play.google.com/store/apps/details?id={{ $settData->app_link ?? '' }}">
                        <button type="button" data-copy="app_link" title="Copiar o link" aria-label="Copiar o link">
                            <i class="fa-regular fa-copy"></i>
                        </button>
                    </span>
                </label>

                <label class="app-field is-wide">
                    <span class="form-label">Observações do cliente</span>
                    <textarea class="form-control" name="obs" rows="4">{{ $notesData->notes ?? '' }}</textarea>
                    <span class="app-hint">Fica no cadastro do cliente e aparece em todos os serviços dele.</span>
                </label>
            </div>
        </div>

        <footer class="app-card__foot">
            <button class="btn btn-primary app-save" type="submit">
                <i class="fa-solid fa-circle-notch fa-spin spin"></i>
                <span class="app-save__label">Salvar alterações</span>
            </button>

            <div class="app-tools">
                <button class="btn btn-sm" type="button" id="btnModules">
                    <i class="fa-solid fa-sliders"></i>
                    <span>Personalização</span>
                </button>

                <a class="btn btn-sm" href="https://android-content-tv.brascast.com/configs/index.php?id={{ $appData->site_id }}&s={{ $server }}" target="_blank" rel="noopener noreferrer">
                    <i class="fa-regular fa-eye"></i>
                    <span>Prévia do aplicativo</span>
                </a>

                <a class="btn btn-sm" href="https://flutter-gen.brascast.com/imgs.php?id={{ $appData->site_id }}&server={{ $server }}" target="_blank" rel="noopener noreferrer">
                    <i class="fa-regular fa-images"></i>
                    <span>Validar as imagens</span>
                </a>

                <hr>

                <button class="btn btn-sm" type="button" data-build="aab">
                    <i class="fa-solid fa-hammer"></i>
                    <span>Gerar o aplicativo</span>
                </button>

                <button class="btn btn-sm" type="button" data-build="apk">
                    <i class="fa-brands fa-android"></i>
                    <span>Gerar o APK</span>
                </button>
            </div>
        </footer>
    </form>

    <aside class="app-side">
        <section class="app-card">
            <header class="app-card__head">
                <h2>Serviço</h2>
            </header>

            <div class="app-card__body">
                <dl class="app-facts">
                    <div>
                        <dt>Instância de TV</dt>
                        <dd>{{ $instancia ?: '--' }}</dd>
                    </div>
                    <div>
                        <dt>Site</dt>
                        <dd>{{ $siteData->id }}</dd>
                    </div>
                    <div>
                        <dt>Tema</dt>
                        <dd>Tema {{ $appData->theme ?? 1 }}</dd>
                    </div>
                    <div>
                        <dt>Etapa do cadastro</dt>
                        <dd>{{ $appData->step ?? '--' }}</dd>
                    </div>
                </dl>
            </div>
        </section>

        <section class="app-card">
            <header class="app-card__head">
                <div>
                    <h2>Dados para a loja</h2>
                    <p>Os campos abaixo servem apenas para copiar.</p>
                </div>
            </header>

            <div class="app-card__body">
                <div class="app-fields">
                    <label class="app-field is-wide">
                        <span class="form-label">Site</span>

                        <span class="app-copy">
                            <input class="form-control" type="text" name="site" value="https://{{ $siteData->domain }}" readonly>
                            <button type="button" data-copy="site" title="Copiar o site" aria-label="Copiar o site">
                                <i class="fa-regular fa-copy"></i>
                            </button>
                        </span>
                    </label>

                    <label class="app-field is-wide">
                        <span class="form-label">E-mail do cliente</span>

                        <span class="app-copy">
                            <input class="form-control" type="text" name="email" value="{{ $userData->email ?? '' }}" readonly>
                            <button type="button" data-copy="email" title="Copiar o e-mail" aria-label="Copiar o e-mail">
                                <i class="fa-regular fa-copy"></i>
                            </button>
                        </span>
                    </label>

                    <label class="app-field is-wide">
                        <span class="form-label">Descrição</span>

                        <span class="app-copy">
                            <input class="form-control" type="text" name="desc" value="{{ $descricao }}" readonly>
                            <button type="button" data-copy="desc" title="Copiar a descrição" aria-label="Copiar a descrição">
                                <i class="fa-regular fa-copy"></i>
                            </button>
                        </span>
                    </label>

                    <label class="app-field is-wide">
                        <span class="form-label">Políticas</span>

                        <span class="app-copy">
                            <input class="form-control" type="text" name="poli" value="{{ $politicas }}" readonly>
                            <button type="button" data-copy="poli" title="Copiar as políticas" aria-label="Copiar as políticas">
                                <i class="fa-regular fa-copy"></i>
                            </button>
                        </span>
                    </label>
                </div>
            </div>
        </section>
    </aside>
</div>

@include('admin.modals.appModules', ['appData' => $appData, 'server' => $server, 'table' => 'apps_tv'])

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

        <div class="mmodal__body">
            <p class="app-note">Formato: <b id="certModal-type">AAB</b></p>

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

                <select class="form-select" id="certId">
                    <option value="">Selecione o certificado</option>
                    <option value="c1" {{ $appData->certificate == 'c1' ? 'selected' : '' }}>(C1) - com.brascmwr (novo)</option>
                    <option value="c2" {{ $appData->certificate == 'c2' ? 'selected' : '' }}>(C2) - net.gonnatechall</option>
                    <option value="c3" {{ $appData->certificate == 'c3' ? 'selected' : '' }}>(C3) - br.com.superapps</option>
                    <option value="c4" {{ $appData->certificate == 'c4' ? 'selected' : '' }}>(C4) - com.whosapp</option>
                    <option value="c6" {{ $appData->certificate == 'c6' ? 'selected' : '' }}>(C6) - br.onelink</option>
                    <option value="c7" {{ $appData->certificate == 'c7' ? 'selected' : '' }}>(C7) - br.com.tectek</option>
                    <option value="c8" {{ $appData->certificate == 'c8' ? 'selected' : '' }}>(C8) - br.webofus</option>
                    <option value="c9" {{ $appData->certificate == 'c9' ? 'selected' : '' }}>(C9) - com.weeapp</option>
                    <option value="c10" {{ $appData->certificate == 'c10' ? 'selected' : '' }}>(C10) - com.wedoapps</option>
                    <option value="c13" {{ $appData->certificate == 'c13' ? 'selected' : '' }}>(C13) - br.com.radiosapp5</option>
                    <option value="c13a" {{ $appData->certificate == 'c13a' ? 'selected' : '' }}>(C13a) - br.com.radiosapp5</option>
                    <option value="c16" {{ $appData->certificate == 'c16' ? 'selected' : '' }}>(C16) - br.com.mobtecradio</option>
                    <option value="c20" {{ $appData->certificate == 'c20' ? 'selected' : '' }}>(C20) - br.com.radiosapp5</option>
                    <option value="c21" {{ $appData->certificate == 'c21' ? 'selected' : '' }}>(C21) - br.com.radiosapp6</option>
                    <option value="main" {{ $appData->certificate == 'main' ? 'selected' : '' }}>(Geral) - Brascast</option>
                </select>
            </label>

            <label class="app-field">
                <span class="form-label">Nome do pacote</span>

                <span class="app-copy">
                    <input class="form-control" type="text" name="packagePreview" id="packagePreview" readonly placeholder="Selecione o certificado">
                    <button type="button" data-copy="packagePreview" title="Copiar o pacote" aria-label="Copiar o pacote">
                        <i class="fa-regular fa-copy"></i>
                    </button>
                </span>
            </label>
        </div>

        <footer class="mmodal__foot">
            <button class="btn" type="button" data-close-modal="certModal">Cancelar</button>
            <a class="btn btn-primary" id="btnBuild" href="javascript:void(0)" target="_blank" rel="noopener noreferrer">Gerar</a>
        </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 abrir = evento.target.closest('[data-open-modal]');
        var fechar = evento.target.closest('[data-close-modal]');

        if (abrir) {
            window.mgrModal.open(abrir.dataset.openModal);
        } else if (fechar) {
            window.mgrModal.close(fechar.dataset.closeModal);
        }
    });

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

    /* ---------- copiar ---------- */

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

        if (! botao) {
            return;
        }

        var campo = document.querySelector('[name="' + botao.dataset.copy + '"]');

        if (! campo) {
            return;
        }

        campo.select();

        if (navigator.clipboard) {
            navigator.clipboard.writeText(campo.value);
        } else {
            document.execCommand('copy');
        }

        botao.classList.add('is-done');
        setTimeout(function () { botao.classList.remove('is-done'); }, 1400);
    });

    /* ---------- salvar ---------- */

    var formulario = document.getElementById('appForm');
    var enviando = false;

    formulario.addEventListener('submit', function (evento) {
        if (enviando) {
            evento.preventDefault();

            return;
        }

        enviando = true;

        var botao = formulario.querySelector('.app-save');

        botao.classList.add('is-saving');
        botao.querySelector('.app-save__label').textContent = 'Salvando...';
    });

    /* ---------- gerar o aplicativo ---------- */

    var prefixos = {
        c1: 'com.brascmwr.',
        c2: 'net.gonnatechall.',
        c3: 'br.com.superapps.',
        c4: 'com.whosapp.',
        c6: 'br.onelink.',
        c7: 'br.com.tectek.',
        c8: 'br.webofus.',
        c9: 'com.weeapp.',
        c10: 'com.wedoapps.',
        c13: 'br.com.radiosapp5.',
        c13a: 'br.com.radiosapp5.',
        c16: 'br.com.mobtecradio.',
        c20: 'br.com.radiosapp5.',
        c21: 'br.com.radiosapp6.',
        main: 'com.brascastradio.'
    };

    /* o mesmo mapa que o gerador usa: acento vira letra simples e o resto cai fora */
    var TROCAS = {
        '&': 'e', 'S': 'S', 's': 's', 'Ð': 'Dj', 'Z': 'Z', 'z': 'z', 'À': 'A', 'Á': 'A', 'Â': 'A', 'Ã': 'A', 'Ä': 'A',
        'Å': 'A', 'Æ': 'A', 'Ç': 'C', 'È': 'E', 'É': 'E', 'Ê': 'E', 'Ë': 'E', 'Ì': 'I', 'Í': 'I', 'Î': 'I', 'Ï': 'I',
        'Ñ': 'N', 'Ò': 'O', 'Ó': 'O', 'Ô': 'O', 'Õ': 'O', 'Ö': 'O', 'Ø': 'O', 'Ù': 'U', 'Ú': 'U', 'Û': 'U', 'Ü': 'U',
        'Ý': 'Y', 'Þ': 'B', 'ß': 'Ss', 'à': 'a', 'á': 'a', 'â': 'a', 'ã': 'a', 'ä': 'a', 'å': 'a', 'æ': 'a', 'ç': 'c',
        'è': 'e', 'é': 'e', 'ê': 'e', 'ë': 'e', 'ì': 'i', 'í': 'i', 'î': 'i', 'ï': 'i', 'ð': 'o', 'ñ': 'n', 'ò': 'o',
        'ó': 'o', 'ô': 'o', 'õ': 'o', 'ö': 'o', 'ø': 'o', 'ù': 'u', 'ú': 'u', 'û': 'u', 'ý': 'y', 'þ': 'b', 'ÿ': 'y',
        'f': 'f', '¹': '', '²': '', '³': '', '£': '', '$': '', '%': '', '¨': '', '§': '', 'º': '', 'ª': '', '©': '',
        '(': '', ')': '', "'": '', '@': '', '=': '', ':': '', '!': '', '?': '', '...': '', ' ': '', '-': '', '^': '',
        '~': '', '/': '', '.': '', '|': '', ',': '', '<': '', '>': '', '{': '', '}': '', '®': '', '´': '', '+': '',
        '*': '', '[': '', ']': ''
    };

    function packageFromName(texto) {
        if (! texto) {
            return '';
        }

        var saida = texto;

        for (var chave in TROCAS) {
            saida = saida.split(chave).join(TROCAS[chave]);
        }

        return saida.toLowerCase();
    }

    var certId = document.getElementById('certId');
    var packagePreview = document.getElementById('packagePreview');
    var botaoGerar = document.getElementById('btnBuild');
    var versao = document.getElementById('version');
    var formato = 'aab';

    var pacote = @js($appData->package) || packageFromName(@js($appData->name));

    function montarLink() {
        var cert = certId.value;

        packagePreview.value = cert && prefixos[cert] ? prefixos[cert] + pacote : '';

        if (! cert) {
            botaoGerar.setAttribute('href', 'javascript:void(0)');
            botaoGerar.setAttribute('aria-disabled', 'true');

            return;
        }

        /* o gerador de TV nao aceita versao abaixo de 1000 */
        var v = parseInt(versao.value, 10);

        botaoGerar.removeAttribute('aria-disabled');
        botaoGerar.setAttribute('href', 'https://flutter-gen.brascast.com/appTv/compile.php?id={{ $appData->site_id }}&server={{ $server }}'
            + '&cert=' + encodeURIComponent(cert)
            + '&type=' + formato
            + '&v=' + (isNaN(v) || v < 1000 ? 1000 : v));
    }

    certId.addEventListener('change', montarLink);
    versao.addEventListener('input', montarLink);

    document.querySelectorAll('[data-build]').forEach(function (botao) {
        botao.addEventListener('click', function () {
            formato = botao.dataset.build === 'apk' ? 'apk' : 'aab';

            document.getElementById('certModal-type').textContent = formato.toUpperCase();
            montarLink();
            window.mgrModal.open('certModal');
        });
    });

    montarLink();
}());
</script>

@include('admin/includes/footer')