@php
    /*
     * Personalização do aplicativo: tema, cores e módulos.
     *
     * O mesmo modal serve Android, TV e iOS, e por isso ele não depende de nada
     * da página que o inclui: só precisa de um botão com id btnModules.
     */
    $theme = $appData->theme ?? 1;
    $table = $table ?? 'apps';
    $themeCompatible = in_array((string) $theme, ['1', '2', '3']);

    /* cada fila tem as suas colunas: a de TV troca camera e mais pedidas por
       rede social, e por isso a lista vem da tabela e nao do tema */
    $catalogo = [
        'radio' => [
            'base' => [
                ['key' => 'mod_schedule', 'title' => 'Programação',       'desc' => 'Exibe a grade de programação da rádio no aplicativo.'],
                ['key' => 'mod_chat',     'title' => 'Bate-papo',         'desc' => 'Habilita a sala de bate-papo em tempo real.'],
                ['key' => 'mod_messages', 'title' => 'Mural de recados',  'desc' => 'Permite o envio de recados em texto e áudio.'],
                ['key' => 'mod_camera',   'title' => 'Câmera no estúdio', 'desc' => 'Exibe a transmissão de vídeo no aplicativo.'],
                ['key' => 'mod_requests', 'title' => 'Pedidos de música', 'desc' => 'Formulário de pedidos de música.'],
            ],
            'novos' => [
                ['key' => 'mod_top',      'title' => 'As mais pedidas',  'desc' => 'Lista as músicas mais pedidas cadastradas no painel.'],
                ['key' => 'mod_news',     'title' => 'Notícias',         'desc' => 'Exibe as postagens de notícias no aplicativo.'],
                ['key' => 'mod_events',   'title' => 'Eventos',          'desc' => 'Exibe os eventos cadastrados no painel.'],
                ['key' => 'mod_team',     'title' => 'Equipe',           'desc' => 'Mostra os membros da equipe cadastrados.'],
                ['key' => 'mod_gallery',  'title' => 'Galeria de fotos', 'desc' => 'Exibe as galerias de fotos no aplicativo.'],
                ['key' => 'mod_promo',    'title' => 'Promoções',        'desc' => 'Exibe as promoções cadastradas no painel.'],
                ['key' => 'mod_podcasts', 'title' => 'Podcasts',         'desc' => 'Lista os podcasts do cliente no aplicativo.'],
            ],
        ],
        'tv' => [
            'base' => [
                ['key' => 'mod_schedule', 'title' => 'Programação',       'desc' => 'Exibe a grade de programação no aplicativo.'],
                ['key' => 'mod_chat',     'title' => 'Bate-papo',         'desc' => 'Habilita a sala de bate-papo em tempo real.'],
                ['key' => 'mod_messages', 'title' => 'Mural de recados',  'desc' => 'Permite o envio de recados em texto e áudio.'],
                ['key' => 'mod_requests', 'title' => 'Pedidos de música', 'desc' => 'Formulário de pedidos de música.'],
                ['key' => 'mod_social',   'title' => 'Redes sociais',     'desc' => 'Mostra os perfis cadastrados no painel.'],
            ],
            'novos' => [
                ['key' => 'mod_news',     'title' => 'Notícias',         'desc' => 'Exibe as postagens de notícias no aplicativo.'],
                ['key' => 'mod_events',   'title' => 'Eventos',          'desc' => 'Exibe os eventos cadastrados no painel.'],
                ['key' => 'mod_team',     'title' => 'Equipe',           'desc' => 'Mostra os membros da equipe cadastrados.'],
                ['key' => 'mod_gallery',  'title' => 'Galeria de fotos', 'desc' => 'Exibe as galerias de fotos no aplicativo.'],
                ['key' => 'mod_promo',    'title' => 'Promoções',        'desc' => 'Exibe as promoções cadastradas no painel.'],
                ['key' => 'mod_podcasts', 'title' => 'Podcasts',         'desc' => 'Lista os podcasts do cliente no aplicativo.'],
            ],
        ],
    ];

    $familia = $table === 'apps_tv' ? 'tv' : 'radio';
    $modulesBase = $catalogo[$familia]['base'];
    $modulesNew = $catalogo[$familia]['novos'];

    /* o tema 3 tem os mesmos modulos do 2 */
    $allModules = in_array((string) $theme, ['2', '3'], true) ? array_merge($modulesBase, $modulesNew) : $modulesBase;

    $colorSchema = [
        '1' => [
            'p1' => ['label' => 'Cor 1', 'hint' => 'Fundo, ícones e botões principais'],
            'p2' => ['label' => 'Cor 2', 'hint' => 'Textos sobre elementos coloridos'],
            'p3' => ['label' => 'Cor 3', 'hint' => 'Cor secundária de destaque'],
            'p4' => ['label' => 'Cor 4', 'hint' => 'Textos terciários'],
        ],
        '2' => [
            'p1' => ['label' => 'Cor 1', 'hint' => 'Textos e ícones'],
            'p2' => ['label' => 'Cor 2', 'hint' => 'Cor do cabeçalho'],
            'p3' => ['label' => 'Cor 3', 'hint' => 'Cor do fundo'],
        ],
    ];

    /* o tema 3 usa os mesmos papeis de cor do 2 */
    $colorSchema['3'] = $colorSchema['2'];

    $activeSchema = $colorSchema[(string) $theme] ?? $colorSchema['1'];

    $colorValues = [];

    foreach (['p1', 'p2', 'p3', 'p4'] as $key) {
        $raw = $appData->{$key} ?? '';
        $colorValues[$key] = preg_match('/^#[0-9a-fA-F]{6}$/', $raw) ? strtoupper($raw) : '#000000';
    }

    $modulesState = [];

    foreach (array_merge($modulesBase, $modulesNew) as $mod) {
        $modulesState[$mod['key']] = isset($appData->{$mod['key']}) ? (int) $appData->{$mod['key']} : 1;
    }
@endphp

<div class="mmodal" id="modulesModal" hidden>
    <div class="mmodal__card app-mod__card" role="dialog" aria-modal="true">
        <header class="mmodal__head">
            <h2 class="mmodal__title">Personalização</h2>
            <button class="mmodal__x" type="button" data-close-modal="modulesModal" aria-label="Fechar">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </header>

        @if (! $themeCompatible)
            <div class="mmodal__body">
                <p class="app-note">
                    Este aplicativo usa o <b>tema {{ $theme }}</b>, que não trabalha com o gerenciamento de módulos.
                    Atualize o aplicativo para um dos temas atuais antes de continuar.
                </p>
            </div>

            <footer class="mmodal__foot">
                <button class="btn" type="button" data-close-modal="modulesModal">Fechar</button>
            </footer>
        @else
            <div class="mmodal__body app-mod">
                <div class="app-mod__col mgr-scroll">
                <div class="app-mod__section">
                    <h3 class="app-mod__title">Tema do aplicativo</h3>

                    <select class="form-select" id="selectTheme">
                        <option value="1" {{ $theme == '1' ? 'selected' : '' }}>Tema 1 - antigo</option>
                        <option value="2" {{ $theme == '2' ? 'selected' : '' }}>Tema 2 - novo (completo)</option>
                        <option value="3" {{ $theme == '3' ? 'selected' : '' }}>Tema 3 - quatro topos na tela inicial</option>
                    </select>

                    <p class="app-mod__warn" id="themeWarning" hidden>A troca de tema pede uma confirmação antes de salvar.</p>
                </div>

                <div class="app-mod__section">
                    <h3 class="app-mod__title">Cores do aplicativo</h3>

                    <div class="app-colors" id="colorList">
                        @foreach($activeSchema as $key => $cfg)
                            <div class="app-color">
                                <b>{{ $cfg['label'] }}</b>
                                <small>{{ $cfg['hint'] }}</small>

                                <span class="app-color__pair">
                                    <input type="color" data-color="{{ $key }}" value="{{ $colorValues[$key] }}" aria-label="{{ $cfg['label'] }}">
                                    <input class="form-control" type="text" data-hex="{{ $key }}" value="{{ $colorValues[$key] }}" maxlength="7" placeholder="#000000">
                                </span>
                            </div>
                        @endforeach
                    </div>
                </div>

                </div>

                <div class="app-mod__section app-mod__col mgr-scroll">
                    <h3 class="app-mod__title">Módulos ativos</h3>

                    <div class="app-mods" id="moduleList">
                        @foreach($allModules as $mod)
                            <label>
                                <input type="checkbox" data-module="{{ $mod['key'] }}" {{ $modulesState[$mod['key']] ? 'checked' : '' }}>
                                <span>
                                    <b>{{ $mod['title'] }}</b>
                                    <small>{{ $mod['desc'] }}</small>
                                </span>
                            </label>
                        @endforeach
                    </div>
                </div>
            </div>

            <footer class="mmodal__foot">
                <p class="mgr-erro" id="modulesModal-err" hidden></p>

                <button class="btn" type="button" data-close-modal="modulesModal">Cancelar</button>

                <button class="btn btn-primary app-save" type="button" id="btnSaveModules">
                    <i class="fa-solid fa-circle-notch fa-spin spin"></i>
                    <span class="app-save__label">Salvar</span>
                </button>
            </footer>
        @endif
    </div>
</div>

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

        <div class="mmodal__body">
            <p class="app-note" id="themeModal-text"></p>
        </div>

        <footer class="mmodal__foot">
            <button class="btn" type="button" data-close-modal="themeModal">Cancelar</button>
            <button class="btn btn-primary" type="button" id="themeModal-ok">Trocar e salvar</button>
        </footer>
    </div>
</div>

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

    var abrir = document.getElementById('btnModules');

    if (! abrir) {
        return;
    }

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

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

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

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

    abrir.addEventListener('click', function () { mostrar('modulesModal'); });

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

        if (fechar) {
            esconder(fechar.dataset.closeModal);
        }
    });

@if ($themeCompatible)
    var COLORS = @js([
        '1' => [
            ['key' => 'p1', 'label' => 'Cor 1', 'hint' => 'Fundo, ícones e botões principais'],
            ['key' => 'p2', 'label' => 'Cor 2', 'hint' => 'Textos sobre elementos coloridos'],
            ['key' => 'p3', 'label' => 'Cor 3', 'hint' => 'Cor secundária de destaque'],
            ['key' => 'p4', 'label' => 'Cor 4', 'hint' => 'Textos terciários'],
        ],
        '2' => [
            ['key' => 'p1', 'label' => 'Cor 1', 'hint' => 'Textos e ícones'],
            ['key' => 'p2', 'label' => 'Cor 2', 'hint' => 'Cor do cabeçalho'],
            ['key' => 'p3', 'label' => 'Cor 3', 'hint' => 'Cor do fundo'],
        ],
    ]);

    var MODULES = {
        '1': @js($modulesBase),
        '2': @js(array_merge($modulesBase, $modulesNew))
    };

    var cores = @js($colorValues);
    var modulos = @js($modulesState);
    var temaOriginal = @js((string) $theme);

    var listaDeCores = document.getElementById('colorList');
    var listaDeModulos = document.getElementById('moduleList');
    var seletorDeTema = document.getElementById('selectTheme');
    var aviso = document.getElementById('themeWarning');
    var salvar = document.getElementById('btnSaveModules');
    var erro = document.getElementById('modulesModal-err');

    function hexValido(valor) {
        return /^#[0-9a-fA-F]{6}$/.test(valor);
    }

    function desenharCores(tema) {
        var campos = COLORS[tema] || COLORS['1'];

        listaDeCores.innerHTML = campos.map(function (campo) {
            return '<div class="app-color">'
                + '<b>' + campo.label + '</b>'
                + '<small>' + campo.hint + '</small>'
                + '<span class="app-color__pair">'
                + '<input type="color" data-color="' + campo.key + '" value="' + cores[campo.key] + '" aria-label="' + campo.label + '">'
                + '<input class="form-control" type="text" data-hex="' + campo.key + '" value="' + cores[campo.key] + '" maxlength="7" placeholder="#000000">'
                + '</span></div>';
        }).join('');
    }

    function desenharModulos(tema) {
        listaDeModulos.innerHTML = (MODULES[tema] || MODULES['1']).map(function (mod) {
            return '<label><input type="checkbox" data-module="' + mod.key + '"' + (modulos[mod.key] ? ' checked' : '') + '>'
                + '<span><b>' + mod.title + '</b><small>' + mod.desc + '</small></span></label>';
        }).join('');
    }

    /* o valor digitado e o seletor de cor são o mesmo dado: um segue o outro */
    listaDeCores.addEventListener('input', function (evento) {
        var campo = evento.target;

        if (campo.dataset.color) {
            var texto = listaDeCores.querySelector('[data-hex="' + campo.dataset.color + '"]');

            texto.value = campo.value.toUpperCase();
            texto.classList.remove('is-bad');
            cores[campo.dataset.color] = texto.value;

            return;
        }

        if (! campo.dataset.hex) {
            return;
        }

        var valor = campo.value.trim();

        if (valor.charAt(0) !== '#') {
            valor = '#' + valor;
        }

        campo.value = valor.toUpperCase();

        if (hexValido(valor)) {
            campo.classList.remove('is-bad');
            listaDeCores.querySelector('[data-color="' + campo.dataset.hex + '"]').value = valor;
            cores[campo.dataset.hex] = valor.toUpperCase();
        }
    });

    listaDeModulos.addEventListener('change', function (evento) {
        if (evento.target.dataset.module) {
            modulos[evento.target.dataset.module] = evento.target.checked ? 1 : 0;
        }
    });

    seletorDeTema.addEventListener('change', function () {
        aviso.hidden = this.value === temaOriginal;

        desenharCores(this.value);
        desenharModulos(this.value);
    });

    function gravar(tema, trocouTema) {
        var enviar = {};
        var problema = false;

        listaDeCores.querySelectorAll('[data-hex]').forEach(function (campo) {
            var valor = campo.value.trim();

            if (! hexValido(valor)) {
                campo.classList.add('is-bad');
                problema = true;

                return;
            }

            campo.classList.remove('is-bad');
            enviar[campo.dataset.hex] = valor.toLowerCase();
        });

        if (problema) {
            erro.textContent = 'Corrija as cores antes de salvar. O formato é #RRGGBB.';
            erro.hidden = false;

            return;
        }

        var ativos = {};

        listaDeModulos.querySelectorAll('[data-module]').forEach(function (caixa) {
            ativos[caixa.dataset.module] = caixa.checked ? '1' : '0';
        });

        erro.hidden = true;
        salvar.classList.add('is-saving');
        salvar.querySelector('.app-save__label').textContent = 'Salvando...';

        fetch('{{ route('admin.ajaxModules') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': token ? token.content : ''
            },
            body: JSON.stringify({
                _token: token ? token.content : '',
                server_id: '{{ $server }}',
                app_id: '{{ $appData->id }}',
                table: '{{ $table }}',
                theme: tema,
                modules: ativos,
                colors: enviar
            })
        }).then(function (resposta) {
            return resposta.ok ? resposta.json() : null;
        }).then(function (dados) {
            salvar.classList.remove('is-saving');
            salvar.querySelector('.app-save__label').textContent = 'Salvar';

            if (! dados || ! dados.success) {
                erro.textContent = 'Não foi possível salvar. Tente novamente.';
                erro.hidden = false;

                return;
            }

            if (trocouTema) {
                location.reload();

                return;
            }

            salvar.querySelector('.app-save__label').textContent = 'Salvo';
            setTimeout(function () {
                salvar.querySelector('.app-save__label').textContent = 'Salvar';
                esconder('modulesModal');
            }, 900);
        }).catch(function () {
            salvar.classList.remove('is-saving');
            salvar.querySelector('.app-save__label').textContent = 'Salvar';
            erro.textContent = 'Falha na conexão.';
            erro.hidden = false;
        });
    }

    salvar.addEventListener('click', function () {
        var tema = seletorDeTema.value;

        if (tema === temaOriginal) {
            gravar(tema, false);

            return;
        }

        document.getElementById('themeModal-text').innerHTML =
            'O aplicativo passa do <b>tema ' + temaOriginal + '</b> para o <b>tema ' + tema + '</b>, o que muda os módulos exibidos. Deseja continuar?';

        mostrar('themeModal');
    });

    document.getElementById('themeModal-ok').addEventListener('click', function () {
        esconder('themeModal');
        gravar(seletorDeTema.value, true);
    });
@endif
}());
</script>