@section('title', $titleContent)

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

@include('admin/includes/header')

<div class="mgr-head">
    <div>
        <h1>{{ $titleContent }}</h1>
        <p>{{ $allContents->total() }} {{ $allContents->total() == 1 ? 'conteúdo cadastrado' : 'conteúdos cadastrados' }}. Marque o que precisa atualizar e abra um pedido.</p>
    </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" value="{{ $s }}"
               placeholder="Nome do conteúdo" autocomplete="off" aria-label="Buscar pelo nome">

        <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

@include('admin/includes/contentJob')

<div class="lib__bar">
    @if($type == '2')
        <a class="btn btn-sm{{ request('period') ? '' : ' btn-primary' }}" href="{{ route('admin.contents', [$type]) }}">Todos</a>
        <a class="btn btn-sm{{ request('period') == 1 ? ' btn-primary' : '' }}" href="{{ route('admin.contents', array_merge([$type], ['period' => 1])) }}">Seg a sex</a>
        <a class="btn btn-sm{{ request('period') == 2 ? ' btn-primary' : '' }}" href="{{ route('admin.contents', array_merge([$type], ['period' => 2])) }}">Sáb e dom</a>
    @endif

    @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.contents', [$type]) }}" title="Limpar a busca" aria-label="Limpar a busca">
                <i class="fa-solid fa-xmark"></i>
            </a>
        </span>
    @endisset

    <span class="lib__picked" id="marcados">Nenhum conteúdo marcado</span>

    <button class="btn btn-sm" type="button" id="baixarSel" disabled>
        <i class="fa-solid fa-cloud-arrow-down"></i>
        <span>Baixar selecionados</span>
    </button>

    <a class="btn btn-sm btn-primary" href="{{ route('admin.contentCreate', ['type' => $type]) }}">
        <i class="fa-solid fa-plus"></i>
        <span>Novo conteúdo</span>
    </a>

    <button class="btn btn-sm btn-primary" type="button" id="baixarTudo">
        <i class="fa-solid fa-cloud-arrow-down"></i>
        <span>Baixar tudo</span>
    </button>
</div>

<div class="card">
    @if($allContents->count() == 0)
        <p class="lib__empty">Nenhum conteúdo encontrado.</p>
    @else
        <table class="lib__table">
            <thead>
                <tr>
                    <th class="lib__check"><input type="checkbox" id="marcarTodos" aria-label="Marcar todos desta página"></th>
                    <th>Nome</th>
                    @if($type == '2')
                        <th>Período</th>
                    @endif
                    <th>Última atualização</th>
                    <th class="text-end">Ações</th>
                </tr>
            </thead>
            <tbody>
                @foreach($allContents as $content)
                    @php $quando = strtotime((string) $content->last_update); @endphp

                    <tr class="is-clickable">
                        <td class="lib__check">
                            <input type="checkbox" name="conteudo" value="{{ $content->id }}"
                                   aria-label="Marcar {{ $content->name }}" @if($content->status != '1') disabled @endif>
                        </td>

                        <td>
                            <span class="lib__name">{{ $content->name }}</span>
                            @if($content->status != '1')
                                <span class="lib__off">desativado</span>
                            @endif
                        </td>

                        @if($type == '2')
                            <td data-l="Período">
                                <span class="lib__period">
                                    {{ $content->period == '1' ? 'Seg a sex' : ($content->period == '2' ? 'Sáb e dom' : 'Sem informação') }}
                                </span>
                            </td>
                        @endif

                        <td data-l="Última atualização">
                            <span class="lib__when">{{ $quando > 0 ? date('d/m/Y H:i', $quando) : '--' }}</span>
                        </td>

                        <td class="text-end">
                            <a class="app__ico" href="{{ route('admin.contentEdit', $content->id) }}" title="Editar o cadastro">
                                <i class="fa-solid fa-pen"></i>
                            </a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    @endif
</div>

{{ $allContents->links('vendor.pagination.default') }}

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

        <div class="mmodal__body">
            <p class="app-note" id="pedirModal-txt"></p>
            <p class="app-note">A máquina de conteúdo baixa primeiro. Quando terminar, o envio para os servidores fica liberado nesta mesma tela.</p>
            <p class="mgr-erro" id="pedirModal-err" hidden></p>
        </div>

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

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

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

    var token = document.querySelector('meta[name="csrf-token"]');
    var escolha = { scope: 'all', ids: [] };

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

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

    function fechar(id) {
        document.getElementById(id).hidden = true;
        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);
        }
    });

    document.addEventListener('keydown', function (evento) {
        if (evento.key === 'Escape') {
            fechar('pedirModal');
        }
    });

    /* ---------- selection ---------- */

    var marcados = document.getElementById('marcados');
    var botaoSel = document.getElementById('baixarSel');

    function selecionados() {
        return Array.prototype.slice.call(document.querySelectorAll('input[name="conteudo"]:checked'))
            .map(function (c) { return c.value; });
    }

    function contar() {
        var quantos = selecionados().length;

        marcados.textContent = quantos === 0
            ? 'Nenhum conteúdo marcado'
            : (quantos === 1 ? '1 conteúdo marcado' : quantos + ' conteúdos marcados');

        botaoSel.disabled = quantos === 0;

        document.querySelectorAll('input[name="conteudo"]').forEach(function (caixa) {
            caixa.closest('tr').classList.toggle('is-picked', caixa.checked);
        });
    }

    /* the row is the useful target, not the checkbox */
    document.addEventListener('click', function (evento) {
        var linha = evento.target.closest('tr.is-clickable');

        if (! linha || evento.target.closest('a, button, input, label')) {
            return;
        }

        var caixa = linha.querySelector('input[name="conteudo"]');

        if (! caixa || caixa.disabled) {
            return;
        }

        caixa.checked = ! caixa.checked;
        contar();
    });

    document.addEventListener('change', function (evento) {
        if (evento.target.name === 'conteudo') {
            contar();

            return;
        }

        if (evento.target.id === 'marcarTodos') {
            document.querySelectorAll('input[name="conteudo"]:not(:disabled)').forEach(function (caixa) {
                caixa.checked = evento.target.checked;
            });

            contar();
        }
    });

    /* ---------- open the job ---------- */

    document.getElementById('baixarTudo').addEventListener('click', function () {
        escolha = { scope: 'all', ids: [] };

        document.getElementById('pedirModal-txt').innerHTML = 'O pedido leva <b>todos os conteúdos ativos</b> da biblioteca.';
        document.getElementById('pedirModal-err').hidden = true;
        abrir('pedirModal');
    });

    botaoSel.addEventListener('click', function () {
        var ids = selecionados();

        if (! ids.length) {
            return;
        }

        escolha = { scope: 'selected', ids: ids };

        document.getElementById('pedirModal-txt').innerHTML = 'O pedido leva <b>'
            + ids.length + (ids.length === 1 ? ' conteúdo' : ' conteúdos') + '</b>, e só eles serão enviados aos servidores.';
        document.getElementById('pedirModal-err').hidden = true;
        abrir('pedirModal');
    });

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

        if (botao.classList.contains('is-saving')) {
            return;
        }

        botao.classList.add('is-saving');

        fetch('{{ route('admin.contents.jobs.store') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': token ? token.content : ''
            },
            body: JSON.stringify({ scope: escolha.scope, ids: escolha.ids, _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.ok) {
                var caixa = document.getElementById('pedirModal-err');

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

                return;
            }

            fechar('pedirModal');
            window.contentJob.acompanhar();
        }).catch(function () {
            botao.classList.remove('is-saving');

            var caixa = document.getElementById('pedirModal-err');

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

    /* ---------- search ---------- */

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

    function buscar() {
        var valor = campo.value.trim();
        var base = '{{ route('admin.contents', [$type]) }}';

        window.location.href = valor === '' ? base : base + '?search=' + encodeURIComponent(valor);
    }

    document.getElementById('sea').addEventListener('click', buscar);

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

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

@include('admin/includes/footer')