@section('title', 'Skill ' . $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 => ['Aprovada', 'is-live'],
        2 => ['Rejeitada', 'is-off'],
        3 => ['Análise', 'is-review'],
        4 => ['Desativada', 'is-off'],
    ];

    [$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 = 'Acompanhe nossa programação, interaja 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.skills') }}">
            <i class="fa-solid fa-arrow-left"></i>
            <span>Skills da Alexa</span>
        </a>

        <h1>{{ $appData->name ?: 'Sem nome' }}</h1>
        <p>Porta {{ $appData->port }}@if($solicitado) &middot; solicitada 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 ($siteData->status != '1')
    <div class="alert alert-danger">O serviço vinculado a esta skill está suspenso.</div>
@endif

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

        <header class="app-card__head">
            <div>
                <h2>Dados da skill</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">
                    <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">Invocação</span>

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

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

                    <select class="form-select" name="status">
                        @foreach([0, 3, 2, 1, 4] 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 Alexa</span>

                    <select class="form-select" name="account">
                        @foreach($accountMap as $chave => $conta)
                            <option value="{{ $chave }}" {{ (string) $appData->account === (string) $chave ? 'selected' : '' }}>
                                {{ $conta['label'] }}{{ $conta['email'] ? ' (' . $conta['email'] . ')' : '' }}
                            </option>
                        @endforeach
                    </select>
                </label>

                <label class="app-field">
                    <span class="form-label">Pede ativação por conta</span>

                    <select class="form-select" name="activation">
                        <option value="0" {{ $appData->activation == '0' ? 'selected' : '' }}>Não</option>
                        <option value="1" {{ $appData->activation == '1' ? 'selected' : '' }}>Sim</option>
                    </select>
                </label>

                <label class="app-field">
                    <span class="form-label">Link na loja</span>

                    <span class="app-copy">
                        <input class="form-control" type="text" name="link" value="{{ $appData->link }}" maxlength="255" placeholder="https://www.amazon.com.br/dp/...">
                        <button type="button" data-copy="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">
                <a class="btn btn-sm" href="{{ route('admin.skill-dl', $appData->port) }}" target="_blank" rel="noopener noreferrer">
                    <i class="fa-solid fa-file-zipper"></i>
                    <span>Baixar as imagens</span>
                </a>

                @if(! empty($appData->link))
                    <a class="btn btn-sm" href="{{ $appData->link }}" target="_blank" rel="noopener noreferrer">
                        <i class="fa-solid fa-arrow-up-right-from-square"></i>
                        <span>Abrir na loja</span>
                    </a>
                @endif
            </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>Serviço ativo</dt>
                        <dd class="{{ $siteData->status == '1' ? 'is-yes' : 'is-no' }}">{{ $siteData->status == '1' ? 'Sim' : 'Não' }}</dd>
                    </div>
                </dl>
            </div>
        </section>

        <section class="app-card">
            <header class="app-card__head">
                <div>
                    <h2>Dados para a publicação</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">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ítica de privacidade</span>

                        <span class="app-copy">
                            <input class="form-control" type="text" name="poli" value="https://brascast.com/contratos/politica-de-privacidade" readonly>
                            <button type="button" data-copy="poli" title="Copiar a política" aria-label="Copiar a política">
                                <i class="fa-regular fa-copy"></i>
                            </button>
                        </span>
                    </label>

                    <label class="app-field is-wide">
                        <span class="form-label">Termos de uso</span>

                        <span class="app-copy">
                            <input class="form-control" type="text" name="poliuse" value="https://brascast.com/contratos/termos-de-uso" readonly>
                            <button type="button" data-copy="poliuse" title="Copiar os termos" aria-label="Copiar os termos">
                                <i class="fa-regular fa-copy"></i>
                            </button>
                        </span>
                    </label>
                </div>
            </div>
        </section>
    </aside>
</div>

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

    /* ---------- 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...';
    });
}());
</script>

@include('admin/includes/footer')