@section('title', 'Aplicativo iOS ' . $appData->port)

@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 => ['Aguardando termo', ''],
        3 => ['Não publicado', 'is-off'],
        4 => ['Pronto para publicar', 'is-ready'],
        5 => ['Em análise', 'is-review'],
    ];

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

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

    $descricao = 'Instale nosso aplicativo para acompanhar nossa programação, interagir conosco, além de conferir nossa grade de programação completa.';
    $streaming = $siteData->stream_server . '.brascast.com:' . $siteData->stream_port;
@endphp

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

        <h1>{{ $appData->name ?: 'Sem nome' }}</h1>
        <p>Porta {{ $appData->port }}@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

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

        <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" value="{{ $appData->version }}" maxlength="20">
                </label>

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

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

                <div class="app-field">
                    <span class="form-label">Termo iOS assinado</span>

                    @if($hasTerm)
                        <span class="app-copy" id="term-view">
                            <input class="form-control" type="text" name="term_download" value="{{ $urlTerm }}" readonly>
                            <button type="button" data-term-open title="Abrir o termo" aria-label="Abrir o termo">
                                <i class="fa-regular fa-eye"></i>
                            </button>
                            <button type="button" data-term-edit title="Enviar outro termo" aria-label="Enviar outro termo">
                                <i class="fa-solid fa-pen"></i>
                            </button>
                        </span>

                        <span class="app-copy" id="term-edit" hidden>
                            <input class="form-control" type="file" name="termo_ios" accept="application/pdf,.pdf">
                            <button type="button" data-term-cancel title="Cancelar" aria-label="Cancelar">
                                <i class="fa-solid fa-xmark"></i>
                            </button>
                        </span>
                    @else
                        <input class="form-control" type="file" name="termo_ios" accept="application/pdf,.pdf">
                        <span class="app-hint">Somente PDF. Ao enviar o termo, o pedido que estava aguardando passa para "Pronto para publicar".</span>
                    @endif
                </div>

                <label class="app-field is-wide">
                    <span class="form-label">Link da App Store</span>

                    <span class="app-copy">
                        <input class="form-control" type="text" name="app_link"
                               value="https://apps.apple.com/br/app/{{ $settData->app_link_ios }}">
                        <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://flutter-gen.brascast.com/imgs.php?id={{ $appData->site_id }}" target="_blank" rel="noopener noreferrer">
                    <i class="fa-regular fa-images"></i>
                    <span>Validar as imagens</span>
                </a>

                <a class="btn btn-sm" href="https://flutter-gen.brascast.com/compile_ios.php?id={{ $appData->site_id }}" target="_blank" rel="noopener noreferrer">
                    <i class="fa-solid fa-hammer"></i>
                    <span>Gerar o projeto</span>
                </a>

                <hr>

                <button class="btn btn-sm" type="button" data-open-modal="publishModal">
                    <i class="fa-regular fa-envelope"></i>
                    <span>E-mail de publicação</span>
                </button>

                <button class="btn btn-sm btn-danger" type="button" data-open-modal="rejectModal">
                    <i class="fa-regular fa-circle-xmark"></i>
                    <span>E-mail de rejeição</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>Porta</dt>
                        <dd>{{ $appData->port }}</dd>
                    </div>
                    <div>
                        <dt>Servidor</dt>
                        <dd><a href="https://{{ $streaming }}" target="_blank" rel="noopener noreferrer">{{ $streaming }}</a></dd>
                    </div>
                    <div>
                        <dt>Site</dt>
                        <dd>{{ $siteData->id }}</dd>
                    </div>
                    <div>
                        <dt>Tema</dt>
                        <dd>Tema {{ $appData->theme ?? 1 }}</dd>
                    </div>
                    <div>
                        <dt>Pedido com CarPlay</dt>
                        <dd class="{{ $siteData->carplay == '1' ? 'is-yes' : 'is-no' }}">{{ $siteData->carplay == '1' ? 'Sim' : 'Não' }}</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="https://brascast.com/contratos/aplicativo/" 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_ios'])

<div class="mmodal" id="publishModal" hidden>
    <div class="mmodal__card mmodal__card--slim" role="dialog" aria-modal="true">
        <header class="mmodal__head">
            <h2 class="mmodal__title">E-mail de publicação</h2>
            <button class="mmodal__x" type="button" data-close-modal="publishModal" aria-label="Fechar">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </header>

        <div class="mmodal__body">
            <p class="app-note">O cliente receberá o aviso de que o aplicativo <b>{{ $appData->name }}</b> já está na App Store, com o link do aplicativo.</p>
            <p class="mgr-erro" id="publishModal-err" hidden></p>
        </div>

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

<div class="mmodal" id="rejectModal" hidden>
    <div class="mmodal__card mmodal__card--slim" role="dialog" aria-modal="true">
        <header class="mmodal__head">
            <h2 class="mmodal__title">E-mail de rejeição</h2>
            <button class="mmodal__x" type="button" data-close-modal="rejectModal" aria-label="Fechar">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </header>

        <div class="mmodal__body">
            <p class="app-note">A solicitação do aplicativo iOS será apagada. Escolha o motivo que vai no e-mail.</p>

            <div class="app-reasons">
                <label>
                    <input type="radio" name="reasion" value="photo">
                    <span>Foto de pessoas</span>
                </label>
                <label>
                    <input type="radio" name="reasion" value="address">
                    <span>Endereço, link ou telefone</span>
                </label>
                <label>
                    <input type="radio" name="reasion" value="right">
                    <span>Direitos autorais</span>
                </label>
            </div>

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

        <footer class="mmodal__foot">
            <button class="btn" type="button" data-close-modal="rejectModal">Cancelar</button>
            <button class="btn btn-danger app-save" type="button" id="rejectModal-ok">
                <i class="fa-solid fa-circle-notch fa-spin spin"></i>
                <span class="app-save__label">Enviar e apagar</span>
            </button>
        </footer>
    </div>
</div>

<div class="mmodal" id="termModal" hidden>
    <div class="mmodal__card mmodal__card--slim" role="dialog" aria-modal="true">
        <header class="mmodal__head">
            <h2 class="mmodal__title">Trocar o termo</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="mmodal__body">
            <p class="app-note">O termo assinado desta porta será substituído pelo arquivo que você enviar. O atual não fica guardado.</p>
        </div>

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

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

    var token = document.querySelector('meta[name="csrf-token"]');

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

    /* ---------- termo ---------- */

    var verTermo = document.querySelector('[data-term-open]');

    if (verTermo) {
        verTermo.addEventListener('click', function () {
            window.open(document.querySelector('[name="term_download"]').value, '_blank', 'noopener');
        });

        document.querySelector('[data-term-edit]').addEventListener('click', function () {
            window.mgrModal.open('termModal');
        });

        document.getElementById('termModal-ok').addEventListener('click', function () {
            document.getElementById('term-view').hidden = true;
            document.getElementById('term-edit').hidden = false;
            window.mgrModal.close('termModal');
        });

        document.querySelector('[data-term-cancel]').addEventListener('click', function () {
            var campo = document.querySelector('[name="termo_ios"]');

            campo.value = '';
            document.getElementById('term-edit').hidden = true;
            document.getElementById('term-view').hidden = false;
        });
    }

    /* o servidor também recusa, mas o aviso aqui evita o envio inteiro à toa */
    var arquivo = document.querySelector('[name="termo_ios"]');

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

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

    formulario.addEventListener('submit', function (evento) {
        if (arquivo && arquivo.files && arquivo.files.length) {
            var nome = arquivo.files[0].name.toLowerCase();

            if (nome.slice(-4) !== '.pdf') {
                evento.preventDefault();
                window.alert('O termo precisa ser um arquivo PDF.');

                return;
            }
        }

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

    /* ---------- e-mails ---------- */

    function avisar(id, texto) {
        var caixa = document.getElementById(id);

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

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

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

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

        fetch('{{ route('admin.ajaxApp') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': token ? token.content : ''
            },
            body: JSON.stringify(dados)
        }).then(function (resposta) {
            if (! resposta.ok) {
                throw new Error('falhou');
            }

            aoTerminar();
        }).catch(function () {
            botao.classList.remove('is-saving');
            avisar(erroEm, 'Não foi possível enviar o e-mail. Tente novamente.');
        });
    }

    document.getElementById('publishModal-ok').addEventListener('click', function () {
        var botao = this;

        enviarEmail(botao, {
            type: 'info',
            table: 'apps_ios',
            server_id: '{{ $server }}',
            user_id: '{{ $userData->id }}',
            id: '{{ $appData->id }}'
        }, 'publishModal-err', function () {
            botao.classList.remove('is-saving');
            botao.querySelector('.app-save__label').textContent = 'E-mail enviado';
            botao.disabled = true;

            setTimeout(function () { window.mgrModal.close('publishModal'); }, 1200);
        });
    });

    document.getElementById('rejectModal-ok').addEventListener('click', function () {
        var botao = this;
        var escolhido = document.querySelector('#rejectModal input[name="reasion"]:checked');

        if (! escolhido) {
            avisar('rejectModal-err', 'Escolha o motivo da rejeição.');

            return;
        }

        enviarEmail(botao, {
            type: 'rejected',
            table: 'apps_ios',
            server_id: '{{ $server }}',
            user_id: '{{ $userData->id }}',
            id: '{{ $appData->id }}',
            reasion: escolhido.value
        }, 'rejectModal-err', function () {
            location.href = '{{ route('admin.appsIos') }}';
        });
    });
}());
</script>

@include('admin/includes/footer')