@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' }}. O áudio de cada um é enviado no próprio cadastro.</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">
    @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-add', [$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="enviarSel" disabled>
        <i class="fa-solid fa-paper-plane"></i>
        <span>Atualizar nos servidores</span>
    </button>

    <a class="btn btn-sm btn-primary" href="{{ route('admin.contentAddCreate', ['type' => $type]) }}">
        <i class="fa-solid fa-plus"></i>
        <span>{{ $type == '2' ? 'Nova campanha' : 'Nova vinheta' }}</span>
    </a>
</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>
                    <th>Idioma</th>
                    @if($type == '2')
                        <th>Blocos</th>
                        <th>Veiculação</th>
                    @endif
                    <th>Tempo médio</th>
                    <th class="text-end">Ações</th>
                </tr>
            </thead>
            <tbody>
                @foreach($allContents as $content)
                    @php
                        $inicio = strtotime((string) $content->campaign_start_date);
                        $fim = strtotime((string) $content->campaign_end_date);
                    @endphp

                    <tr class="is-clickable">
                        <td class="lib__check">
                            <input type="checkbox" name="conteudo" value="{{ $content->id }}" aria-label="Marcar {{ $content->name }}">
                        </td>

                        <td>
                            <span class="lib__name">{{ $content->name }}</span>
                        </td>

                        <td data-l="Idioma">
                            <span class="lib__period">{{ \App\Services\ContentLibrary::IDIOMAS[$content->lang] ?? $content->lang }}</span>
                        </td>

                        @if($type == '2')
                            <td data-l="Blocos">
                                <span class="lib__when">{{ $content->total }} {{ $content->total == 1 ? 'bloco' : 'blocos' }}</span>
                            </td>

                            <td data-l="Veiculação">
                                <span class="lib__when">
                                    {{ $inicio > 0 && $fim > 0 ? date('d/m/Y', $inicio) . ' a ' . date('d/m/Y', $fim) : 'Sem período definido' }}
                                </span>
                            </td>
                        @endif

                        <td data-l="Tempo médio">
                            <span class="lib__when">{{ $content->average ?: '--' }}</span>
                        </td>

                        <td class="text-end">
                            <a class="app__ico" href="{{ route('admin.contentAddEdit', $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="enviarModal" hidden>
    <div class="mmodal__card mmodal__card--slim" role="dialog" aria-modal="true">
        <header class="mmodal__head">
            <h2 class="mmodal__title">Atualizar nos servidores</h2>
            <button class="mmodal__x" type="button" data-close-modal="enviarModal" aria-label="Fechar">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </header>

        <div class="mmodal__body">
            <p class="app-note" id="enviarModal-txt"></p>
            <p class="app-note">O áudio já está na máquina de conteúdo. O pedido manda cada servidor de streaming sincronizar só estes conteúdos.</p>
            <p class="mgr-erro" id="enviarModal-err" hidden></p>
        </div>

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

            <button class="btn btn-primary app-save" type="button" id="enviarModal-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 escolhidos = [];

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

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

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

    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) {
            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"]').forEach(function (caixa) {
                caixa.checked = evento.target.checked;
            });

            contar();
        }
    });

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

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

        if (! escolhidos.length) {
            return;
        }

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

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

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

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

        fetch('{{ route('admin.contents.jobs.storeAdd') }}', {
            method: 'POST',
            headers: window.contentJob.cabecalhos(),
            body: JSON.stringify({ ids: escolhidos, _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('enviarModal-err');

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

                return;
            }

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

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

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

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

    var campo = document.getElementById('pSea');
    var base = '{{ route('admin.contents-add', [$type]) }}';

    function buscar() {
        var valor = campo.value.trim();

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