@section('title', $content ? 'Editar cadastro' : ($type == '2' ? 'Nova campanha' : 'Nova vinheta'))

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

@include('admin/includes/header')

@php
    $tipoAtual = old('type', $type);
    $campanha = $tipoAtual == '2';
    $imagem = $content && $content->img ? asset('contents/' . $content->img) : null;
    $enviados = collect($audios)->where('sent', true)->count();
@endphp

<div class="mgr-head">
    <div>
        <a class="app-back" href="{{ route('admin.contents-add', $tipoAtual) }}">
            <i class="fa-solid fa-arrow-left"></i>
            <span>{{ $campanha ? 'Campanhas' : 'Vinhetas' }}</span>
        </a>

        <h1>{{ $content ? $content->name : ($campanha ? 'Nova campanha' : 'Nova vinheta') }}</h1>
        <p>{{ $content ? 'Cadastro do conteúdo e os áudios que ficam na máquina de conteúdo.' : 'O cadastro vem primeiro; o áudio é enviado logo depois de salvar.' }}</p>
    </div>

    @if($content)
        <span class="app-state {{ $enviados == count($audios) ? 'is-live' : 'is-off' }}">
            {{ $enviados == count($audios) ? 'Áudio completo' : $enviados . ' de ' . count($audios) . ' enviados' }}
        </span>
    @endif
</div>

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

@if (isset($errors) && $errors->any())
    <div class="alert alert-danger">
        {{ $errors->count() == 1 ? 'Há um campo para corrigir:' : 'Há campos para corrigir:' }}
        {{ implode(' ', $errors->all()) }}
    </div>
@endif

<form class="app-grid" method="POST" enctype="multipart/form-data" id="addForm"
      action="{{ $content ? route('admin.contentAddUpdate', $content->id) : route('admin.contentAddStore') }}">
    @csrf

    <div class="app-card">
        <header class="app-card__head">
            <div>
                <h2>Dados do conteúdo</h2>
                <p>É o que aparece na biblioteca do cliente.</p>
            </div>
        </header>

        <div class="app-card__body">
            <div class="app-fields">
                <label class="app-field is-wide">
                    <span class="form-label">Nome</span>
                    <input class="form-control" type="text" name="name" value="{{ old('name', $content->name ?? '') }}" maxlength="190" required>
                </label>

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

                    <select class="form-select" name="type" id="tipo" {{ $content ? 'disabled' : '' }}>
                        <option value="1" {{ $tipoAtual == '1' ? 'selected' : '' }}>Vinheta</option>
                        <option value="2" {{ $tipoAtual == '2' ? 'selected' : '' }}>Campanha</option>
                    </select>

                    @if($content)
                        <input type="hidden" name="type" value="{{ $tipoAtual }}">
                    @endif
                </label>

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

                    <select class="form-select" name="lang">
                        @foreach(\App\Services\ContentLibrary::IDIOMAS as $sigla => $rotulo)
                            <option value="{{ $sigla }}" {{ old('lang', $content->lang ?? 'br') == $sigla ? 'selected' : '' }}>{{ $rotulo }}</option>
                        @endforeach
                    </select>
                </label>

                <label class="app-field" id="campoBlocos" {{ $campanha ? '' : 'hidden' }}>
                    <span class="form-label">Quantidade de blocos</span>
                    <input class="form-control" type="number" name="total" value="{{ old('total', $content->total ?? 1) }}" min="1" max="99">
                </label>

                <label class="app-field">
                    <span class="form-label">Tempo médio</span>
                    <input class="form-control" type="time" name="average" value="{{ old('average', $content->average ?? '00:00:30') }}" step="1" required>
                </label>

                <label class="app-field is-wide">
                    <span class="form-label">Descrição</span>
                    <textarea class="form-control" name="description" rows="3" maxlength="1000">{{ old('description', $content->description ?? '') }}</textarea>
                </label>
            </div>
        </div>

        <div id="blocoVeiculacao" {{ $campanha ? '' : 'hidden' }}>
            <header class="app-card__head" style="border-top: 1px solid var(--border-soft)">
                <div>
                    <h2>Veiculação</h2>
                    <p>O período em que a campanha aparece no calendário do cliente.</p>
                </div>
            </header>

            <div class="app-card__body">
                <div class="app-fields">
                    <label class="app-field">
                        <span class="form-label">Início</span>
                        <input class="form-control" type="date" name="campaign_start_date"
                               value="{{ old('campaign_start_date', $content->campaign_start_date ?? '') }}">
                    </label>

                    <label class="app-field">
                        <span class="form-label">Fim</span>
                        <input class="form-control" type="date" name="campaign_end_date"
                               value="{{ old('campaign_end_date', $content->campaign_end_date ?? '') }}">
                    </label>

                    <label class="app-field is-wide">
                        <span class="form-label">Repetição</span>

                        <select class="form-select" name="repeat_rule">
                            @php
                                $regras = [
                                    'none' => 'Não repete',
                                    'fixed_day' => 'Todo ano, no mesmo dia',
                                    'fixed_range' => 'Todo ano, no mesmo período',
                                    'easter' => 'Páscoa (data móvel)',
                                    'carnival' => 'Carnaval (data móvel)',
                                ];
                                $regraAtual = old('repeat_rule', $content->repeat_rule ?? 'none');
                            @endphp

                            @foreach($regras as $valor => $rotulo)
                                <option value="{{ $valor }}" {{ $regraAtual == $valor ? 'selected' : '' }}>{{ $rotulo }}</option>
                            @endforeach
                        </select>
                    </label>
                </div>
            </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">{{ $content ? 'Salvar alterações' : 'Cadastrar' }}</span>
            </button>
        </footer>
    </div>

    <aside class="app-side">
        <section class="app-card">
            <header class="app-card__head">
                <div>
                    <h2>Imagem</h2>
                    <p>jpg, png ou webp, até 4 MB. Fica em webp de 430x310 na vitrine.</p>
                </div>
            </header>

            <div class="app-card__body">
                <div class="lib__art" id="artePreview">
                    @if($imagem)
                        <img src="{{ $imagem }}" alt="Arte de {{ $content->name }}">
                    @else
                        <span class="lib__art-none">Nenhuma imagem enviada</span>
                    @endif
                </div>

                <label class="app-field" style="margin-top: 14px">
                    <span class="form-label">{{ $imagem ? 'Trocar o arquivo' : 'Arquivo' }}</span>
                    <input class="form-control" type="file" name="image" id="imagem" accept="image/jpeg,image/png,image/webp">
                </label>
            </div>
        </section>
    </aside>
</form>

@if($content)
    <section class="app-card aud" id="audios" data-id="{{ $content->id }}">
        <header class="app-card__head">
            <div>
                <h2>Áudios</h2>
                <p>Vão direto para a máquina de conteúdo, com o nome que o servidor de streaming procura.</p>
            </div>

            <span class="app-state {{ $enviados == count($audios) ? 'is-live' : 'is-off' }}" id="audiosEstado">
                {{ $enviados }} de {{ count($audios) }}
            </span>
        </header>

        <div class="app-card__body">
            <p class="mgr-erro" id="audiosErro" hidden></p>

            <ul class="aud__list">
                @foreach($audios as $audio)
                    <li class="aud__item {{ $audio['sent'] ? 'is-sent' : '' }}" data-index="{{ $audio['index'] }}">
                        <i class="fa-solid {{ $audio['sent'] ? 'fa-circle-check' : 'fa-circle-minus' }} aud__ico"></i>

                        <span class="aud__name">{{ $audio['file'] }}</span>

                        <span class="aud__size">{{ $audio['sent'] ? number_format($audio['bytes'] / 1048576, 1, ',', '.') . ' MB' : 'não enviado' }}</span>

                        <label class="aud__pick">
                            <input type="file" accept="audio/mpeg,.mp3" hidden>
                            <span class="btn btn-sm">
                                <i class="fa-solid fa-upload"></i>
                                <span>{{ $audio['sent'] ? 'Trocar' : 'Enviar' }}</span>
                            </span>
                        </label>

                        <button class="app__ico aud__del" type="button" title="Apagar este áudio" {{ $audio['sent'] ? '' : 'hidden' }}>
                            <i class="fa-solid fa-trash"></i>
                        </button>
                    </li>
                @endforeach
            </ul>
        </div>
    </section>

    <div class="mmodal" id="apagarModal" hidden>
        <div class="mmodal__card mmodal__card--slim" role="dialog" aria-modal="true">
            <header class="mmodal__head">
                <h2 class="mmodal__title">Apagar o áudio</h2>
                <button class="mmodal__x" type="button" data-close-modal="apagarModal" aria-label="Fechar">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </header>

            <div class="mmodal__body">
                <p class="app-note" id="apagarModal-txt"></p>
                <p class="app-note">O arquivo sai da máquina de conteúdo. Os servidores só deixam de tê-lo na próxima atualização.</p>
                <p class="mgr-erro" id="apagarModal-err" hidden></p>
            </div>

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

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

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

    var token = document.querySelector('input[name="_token"]').value;

    /* ---------- campaign-only fields ---------- */

    var tipo = document.getElementById('tipo');
    var blocos = document.getElementById('campoBlocos');
    var veiculacao = document.getElementById('blocoVeiculacao');

    if (tipo && ! tipo.disabled) {
        tipo.addEventListener('change', function () {
            var campanha = tipo.value === '2';

            blocos.hidden = ! campanha;
            veiculacao.hidden = ! campanha;
        });
    }

    /* ---------- art preview ---------- */

    var campo = document.getElementById('imagem');
    var caixa = document.getElementById('artePreview');

    campo.addEventListener('change', function () {
        if (! campo.files || ! campo.files.length) {
            return;
        }

        var url = URL.createObjectURL(campo.files[0]);

        caixa.innerHTML = '<img alt="Arte escolhida">';
        caixa.firstElementChild.src = url;
        caixa.firstElementChild.onload = function () { URL.revokeObjectURL(url); };
    });

    /* ---------- save ---------- */

    var formulario = document.getElementById('addForm');
    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...';
    });

    /* ---------- audio files ---------- */

    var painel = document.getElementById('audios');

    if (! painel) {
        return;
    }

    var id = painel.dataset.id;
    var erro = document.getElementById('audiosErro');
    var estado = document.getElementById('audiosEstado');

    function avisa(mensagem) {
        erro.textContent = mensagem;
        erro.hidden = mensagem === '';
    }

    function recontar() {
        var itens = painel.querySelectorAll('.aud__item');
        var enviados = painel.querySelectorAll('.aud__item.is-sent');

        estado.textContent = enviados.length + ' de ' + itens.length;
        estado.classList.toggle('is-live', enviados.length === itens.length);
        estado.classList.toggle('is-off', enviados.length !== itens.length);
    }

    function marca(item, bytes) {
        item.classList.add('is-sent');
        item.querySelector('.aud__ico').className = 'fa-solid fa-circle-check aud__ico';
        item.querySelector('.aud__size').textContent = (bytes / 1048576).toFixed(1).replace('.', ',') + ' MB';
        item.querySelector('.aud__pick span span').textContent = 'Trocar';
        item.querySelector('.aud__del').hidden = false;

        recontar();
    }

    function desmarca(item) {
        item.classList.remove('is-sent');
        item.querySelector('.aud__ico').className = 'fa-solid fa-circle-minus aud__ico';
        item.querySelector('.aud__size').textContent = 'não enviado';
        item.querySelector('.aud__pick span span').textContent = 'Enviar';
        item.querySelector('.aud__del').hidden = true;

        recontar();
    }

    painel.addEventListener('change', function (evento) {
        var entrada = evento.target;

        if (entrada.type !== 'file' || ! entrada.files.length) {
            return;
        }

        var item = entrada.closest('.aud__item');

        if (item.classList.contains('is-busy')) {
            return;
        }

        avisa('');
        item.classList.add('is-busy');
        item.querySelector('.aud__size').textContent = 'enviando...';

        var dados = new FormData();

        dados.append('_token', token);
        dados.append('audio', entrada.files[0]);
        dados.append('index', item.dataset.index);

        fetch('{{ route('admin.contentAddAudio', ':id') }}'.replace(':id', id), {
            method: 'POST',
            body: dados,
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        }).then(function (resposta) {
            return resposta.json().then(function (corpo) { return { ok: resposta.ok, corpo: corpo }; });
        }).then(function (r) {
            if (! r.ok || ! r.corpo.ok) {
                throw new Error(r.corpo.error || 'Não foi possível enviar o áudio.');
            }

            marca(item, r.corpo.bytes || 0);
        }).catch(function (e) {
            avisa(e.message);

            if (! item.classList.contains('is-sent')) {
                item.querySelector('.aud__size').textContent = 'não enviado';
            }
        }).then(function () {
            item.classList.remove('is-busy');
            entrada.value = '';
        });
    });

    /* ---------- delete ---------- */

    var modal = document.getElementById('apagarModal');
    var texto = document.getElementById('apagarModal-txt');
    var modalErro = document.getElementById('apagarModal-err');
    var confirmar = document.getElementById('apagarModal-ok');
    var alvo = null;

    function fecharModal() {
        modal.hidden = true;
        confirmar.classList.remove('is-saving');
        modalErro.hidden = true;
    }

    Array.prototype.forEach.call(document.querySelectorAll('[data-close-modal="apagarModal"]'), function (botao) {
        botao.addEventListener('click', fecharModal);
    });

    painel.addEventListener('click', function (evento) {
        var botao = evento.target.closest('.aud__del');

        if (! botao) {
            return;
        }

        alvo = botao.closest('.aud__item');
        texto.textContent = 'O arquivo ' + alvo.querySelector('.aud__name').textContent + ' será apagado.';
        modalErro.hidden = true;
        modal.hidden = false;
    });

    confirmar.addEventListener('click', function () {
        if (! alvo || confirmar.classList.contains('is-saving')) {
            return;
        }

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

        var dados = new FormData();

        dados.append('_token', token);
        dados.append('index', alvo.dataset.index);

        fetch('{{ route('admin.contentAddAudioDelete', ':id') }}'.replace(':id', id), {
            method: 'POST',
            body: dados,
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        }).then(function (resposta) {
            return resposta.json().then(function (corpo) { return { ok: resposta.ok, corpo: corpo }; });
        }).then(function (r) {
            if (! r.ok || ! r.corpo.ok) {
                throw new Error(r.corpo.error || 'Não foi possível apagar o áudio.');
            }

            desmarca(alvo);
            fecharModal();
        }).catch(function (e) {
            modalErro.textContent = e.message;
            modalErro.hidden = false;
            confirmar.classList.remove('is-saving');
        });
    });
}());
</script>

@include('admin/includes/footer')