@section('title', $content ? 'Editar conteúdo' : 'Novo conteúdo')

@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);
    $periodo = old('period', $content->period ?? '1');
    $imagem = $content && $content->img ? asset('contents/' . $content->img) : null;
@endphp

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

        <h1>{{ $content ? $content->name : 'Novo conteúdo' }}</h1>
        <p>{{ $content ? 'Cadastro do conteúdo, a arte da vitrine e a demo do site.' : 'Programas e programetes baixados por link, com arte e demo para o site.' }}</p>
    </div>

    @if($content)
        <span class="app-state {{ $content->status == '1' ? 'is-live' : 'is-off' }}">{{ $content->status == '1' ? 'Ativo' : 'Desativado' }}</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="contentForm"
      action="{{ $content ? route('admin.contentUpdate', $content->id) : route('admin.contentStore') }}">
    @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 e na vitrine do site.</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">
                        <option value="2" {{ $tipoAtual == '2' ? 'selected' : '' }}>Programa</option>
                        <option value="1" {{ $tipoAtual == '1' ? 'selected' : '' }}>Programete</option>
                    </select>
                </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">
                    <span class="form-label">Categoria</span>

                    <select class="form-select" name="category">
                        <option value="">Sem categoria</option>

                        @foreach($categories as $categoria)
                            <option value="{{ $categoria->id }}" {{ old('category', $content->category ?? '') == $categoria->id ? 'selected' : '' }}>
                                {{ $categoria->name }}
                            </option>
                        @endforeach
                    </select>
                </label>

                <label class="app-field">
                    <span class="form-label">Quantidade de áudios</span>
                    <input class="form-control" type="number" name="total" value="{{ old('total', $content->total ?? 1) }}" min="1" max="99" required>
                </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:02:00') }}" step="1" required>
                </label>

                <label class="app-field">
                    <span class="form-label">Período</span>

                    <select class="form-select" name="period" id="periodo">
                        <option value="1" {{ $periodo == '1' ? 'selected' : '' }}>Segunda a sexta</option>
                        <option value="2" {{ $periodo == '2' ? 'selected' : '' }}>Sábado e domingo</option>
                    </select>
                </label>

                <label class="app-field">
                    <span class="form-label">Também no fim de semana</span>

                    <select class="form-select" name="period_plus">
                        <option value="0" {{ old('period_plus', $content->period_plus ?? '0') == '0' ? 'selected' : '' }}>Não</option>
                        <option value="1" {{ old('period_plus', $content->period_plus ?? '0') == '1' ? 'selected' : '' }}>Sim</option>
                    </select>
                </label>

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

                    <select class="form-select" name="status">
                        <option value="1" {{ old('status', $content->status ?? '1') == '1' ? 'selected' : '' }}>Ativo</option>
                        <option value="0" {{ old('status', $content->status ?? '1') == '0' ? 'selected' : '' }}>Desativado</option>
                    </select>
                </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>

        <header class="app-card__head" style="border-top: 1px solid var(--border-soft)">
            <div>
                <h2>Links de download</h2>
                <p>De onde a máquina de conteúdo baixa o pacote de cada dia.</p>
            </div>
        </header>

        <div class="app-card__body">
            <div class="app-fields">
                @foreach(['seg' => 'Segunda', 'ter' => 'Terça', 'qua' => 'Quarta', 'qui' => 'Quinta', 'sex' => 'Sexta', 'sab' => 'Sábado', 'dom' => 'Domingo'] as $chave => $rotulo)
                    <label class="app-field">
                        <span class="form-label">{{ $rotulo }}</span>
                        <input class="form-control" type="url" name="link_{{ $chave }}"
                               value="{{ old('link_' . $chave, $content->{'link_' . $chave} ?? '') }}"
                               placeholder="https://..." maxlength="255">
                    </label>
                @endforeach
            </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 conteúdo' }}</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">{{ $content ? 'Trocar o arquivo' : 'Arquivo' }}</span>
                    <input class="form-control" type="file" name="image" id="imagem" accept="image/jpeg,image/png,image/webp" {{ $content ? '' : 'required' }}>
                </label>
            </div>
        </section>

        <section class="app-card">
            <header class="app-card__head">
                <div>
                    <h2>Demo do site</h2>
                    <p>mp3 de até 20 MB, o trecho que toca na biblioteca pública.</p>
                </div>
            </header>

            <div class="app-card__body">
                @if($demo)
                    <audio class="lib__demo" controls preload="none" src="{{ asset($demo) }}"></audio>
                @else
                    <p class="lib__art-none">Nenhuma demo enviada</p>
                @endif

                <label class="app-field" style="margin-top: 14px">
                    <span class="form-label">{{ $demo ? 'Trocar o arquivo' : 'Arquivo' }}</span>
                    <input class="form-control" type="file" name="preview" accept="audio/mpeg,.mp3">
                </label>
            </div>
        </section>
    </aside>
</form>

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

    /* the picked art shows before saving: the only way to check the crop */
    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('contentForm');
    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')