@section('title', 'Publicidades do aplicativo')

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

@include('admin/includes/header')

<div class="mgr-head">
    <div>
        <h1>Publicidades do aplicativo</h1>
        <p>{{ $allAds->total() }} {{ $allAds->total() == 1 ? 'peça aguardando aprovação' : 'peças aguardando aprovação' }}. Confira a arte antes de decidir.</p>
    </div>
</div>

@if (\Session::has('success'))
    <div class="alert">{!! \Session::get('success') !!}</div>
    @php Session::forget('success'); @endphp
@endif

@if($allAds->count() == 0)
    <div class="card">
        <p class="ads__empty">
            <i class="fa-regular fa-circle-check"></i>
            Nenhuma publicidade aguardando aprovação.
        </p>
    </div>
@else
    <div class="ads__grid">
        @foreach($allAds as $anuncio)
            @php
                /* a arte fica no disco do painel, mas as antigas guardaram a URL inteira */
                $arte = $anuncio->img ?? '';
                $arte = $arte === '' ? '' : (preg_match('~^https?://~', $arte) ? $arte : asset(ltrim($arte, '/')));
                $quando = strtotime((string) $anuncio->created_at);
            @endphp

            <article class="ads__card" id="anuncio-{{ $anuncio->qr }}-{{ $anuncio->id }}">
                <div class="ads__art">
                    @if($arte)
                        <img src="{{ $arte }}" alt="Arte de {{ $anuncio->name }}" loading="lazy">

                        <button class="ads__zoom" type="button" title="Ver a arte inteira"
                                data-arte="{{ $arte }}" data-titulo="{{ $anuncio->name }}">
                            <i class="fa-solid fa-expand"></i>
                        </button>
                    @else
                        <span class="ads__none">Sem arte enviada</span>
                    @endif
                </div>

                <div class="ads__body">
                    <h2 class="ads__name">{{ $anuncio->name ?: 'Sem nome' }}</h2>
                    <span class="ads__site">{{ $anuncio->site_name ?: 'Site ' . $anuncio->site_id }} &middot; porta {{ $anuncio->stream_port }}</span>

                    <span class="ads__when">Enviada em {{ $quando > 0 ? date('d/m/Y H:i', $quando) : '--' }}</span>
                </div>

                <div class="ads__acts">
                    <button class="btn btn-danger" type="button"
                            data-recusar="{{ $anuncio->id }}" data-servidor="{{ $anuncio->qr }}" data-nome="{{ $anuncio->name }}">
                        <i class="fa-solid fa-xmark"></i>
                        <span>Recusar</span>
                    </button>

                    <button class="btn btn-primary" type="button"
                            data-aceitar="{{ $anuncio->id }}" data-servidor="{{ $anuncio->qr }}" data-nome="{{ $anuncio->name }}">
                        <i class="fa-solid fa-check"></i>
                        <span>Aceitar</span>
                    </button>
                </div>
            </article>
        @endforeach
    </div>

    {{ $allAds->links('vendor.pagination.default') }}
@endif

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

        <div class="mmodal__body ads__full">
            <img src="" alt="" id="arteModal-img">
        </div>
    </div>
</div>

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

        <div class="mmodal__body">
            <p class="app-note" id="aceitarModal-nome"></p>
            <p class="app-note">A peça passa a rodar no aplicativo do cliente.</p>
            <p class="mgr-erro" id="aceitarModal-err" hidden></p>
        </div>

        <footer class="mmodal__foot">
            <button class="btn" type="button" data-close-modal="aceitarModal">Cancelar</button>

            <button class="btn btn-primary app-save" type="button" id="aceitarModal-ok">
                <i class="fa-solid fa-circle-notch fa-spin spin"></i>
                <span class="app-save__label">Aceitar</span>
            </button>
        </footer>
    </div>
</div>

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

        <div class="mmodal__body">
            <p class="app-note" id="recusarModal-nome"></p>

            <label class="app-field">
                <span class="form-label">Motivo (aparece para o cliente)</span>
                <textarea class="form-control" id="motivo" rows="3" maxlength="255" placeholder="Ex: a arte está ilegível na medida do aplicativo."></textarea>
                <span class="app-hint">Opcional, mas ajuda o cliente a reenviar certo. A arte recusada é apagada.</span>
            </label>

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

        <footer class="mmodal__foot">
            <button class="btn" type="button" data-close-modal="recusarModal">Cancelar</button>

            <button class="btn btn-danger app-save" type="button" id="recusarModal-ok">
                <i class="fa-solid fa-circle-notch fa-spin spin"></i>
                <span class="app-save__label">Recusar</span>
            </button>
        </footer>
    </div>
</div>

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

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

    function abrir(id) {
        document.getElementById(id).hidden = false;
        document.body.classList.add('mgr-locked');
    }

    function fechar(id) {
        document.getElementById(id).hidden = true;

        if (! document.querySelector('.mmodal:not([hidden])')) {
            document.body.classList.remove('mgr-locked');
        }
    }

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

        if (sair) {
            fechar(sair.dataset.closeModal);

            return;
        }

        var lupa = evento.target.closest('[data-arte]');

        if (lupa) {
            document.getElementById('arteModal-titulo').textContent = lupa.dataset.titulo || 'Arte';
            document.getElementById('arteModal-img').src = lupa.dataset.arte;
            document.getElementById('arteModal-img').alt = 'Arte de ' + (lupa.dataset.titulo || '');
            abrir('arteModal');

            return;
        }

        var aceitar = evento.target.closest('[data-aceitar]');

        if (aceitar) {
            alvo = { id: aceitar.dataset.aceitar, servidor: aceitar.dataset.servidor, nome: aceitar.dataset.nome };

            document.getElementById('aceitarModal-nome').innerHTML = '<b>' + (alvo.nome || 'Sem nome') + '</b>';
            document.getElementById('aceitarModal-err').hidden = true;
            abrir('aceitarModal');

            return;
        }

        var recusar = evento.target.closest('[data-recusar]');

        if (recusar) {
            alvo = { id: recusar.dataset.recusar, servidor: recusar.dataset.servidor, nome: recusar.dataset.nome };

            document.getElementById('recusarModal-nome').innerHTML = '<b>' + (alvo.nome || 'Sem nome') + '</b>';
            document.getElementById('recusarModal-err').hidden = true;
            document.getElementById('motivo').value = '';
            abrir('recusarModal');
        }
    });

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

    function decidir(acao, botao, caixaDeErro, motivo) {
        if (botao.classList.contains('is-saving')) {
            return;
        }

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

        fetch('{{ route('admin.adsDo') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': token ? token.content : ''
            },
            body: JSON.stringify({
                id: alvo.id,
                server_id: alvo.servidor,
                action: acao,
                reason: motivo || '',
                _token: token ? token.content : ''
            })
        }).then(function (r) {
            return r.json().then(function (json) { return { ok: r.ok, json: json }; });
        }).then(function (resposta) {
            botao.classList.remove('is-saving');

            if (! resposta.ok || ! resposta.json.status) {
                var caixa = document.getElementById(caixaDeErro);

                caixa.textContent = resposta.json.message || 'Não foi possível salvar.';
                caixa.hidden = false;

                return;
            }

            /* o cartão sai da fila na hora, sem recarregar a página inteira */
            var cartao = document.getElementById('anuncio-' + alvo.servidor + '-' + alvo.id);

            if (cartao) {
                cartao.remove();
            }

            fechar(acao === 'accept' ? 'aceitarModal' : 'recusarModal');

            if (! document.querySelector('.ads__card')) {
                window.location.reload();
            }
        }).catch(function () {
            botao.classList.remove('is-saving');

            var caixa = document.getElementById(caixaDeErro);

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

    document.getElementById('aceitarModal-ok').addEventListener('click', function () {
        decidir('accept', this, 'aceitarModal-err', '');
    });

    document.getElementById('recusarModal-ok').addEventListener('click', function () {
        decidir('denied', this, 'recusarModal-err', document.getElementById('motivo').value.trim());
    });
}());
</script>

@include('admin/includes/footer')