@php
    $theme = $appData->theme ?? 1;
    $table = $table ?? 'apps';
    $themeCompatible = in_array((string)$theme, ['1', '2']);

    $modulesBase = [
        ['key' => 'mod_schedule', 'title' => 'Programação',       'desc' => 'Exibe a grade de programação da rádio no app.'],
        ['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 envio de recados em texto e áudio.'],
        ['key' => 'mod_camera',   'title' => 'Câmera ao vivo',     'desc' => 'Exibe transmissão de vídeo no app.'],
        ['key' => 'mod_requests', 'title' => 'Pedidos de música',  'desc' => 'Formulário de pedidos de música.'],
    ];

    $modulesNew = [
        ['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 postagens de notícias no app.'],
        ['key' => 'mod_events',   'title' => 'Eventos',            'desc' => 'Exibe 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 galerias de fotos no app.'],
        ['key' => 'mod_promo',    'title' => 'Promoções',          'desc' => 'Exibe promoções cadastradas no painel.'],
        ['key' => 'mod_podcasts', 'title' => 'Podcasts',           'desc' => 'Lista os podcasts do cliente no app.'],
    ];

    $allModules = $theme == '2' ? array_merge($modulesBase, $modulesNew) : $modulesBase;

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

    $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) ? $raw : '#000000';
    }
@endphp

<div class="modal" id="modulesModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" style="max-width: 480px;">
        <div class="modal-content">

            <div class="modal-header py-2">
                <h6 class="modal-title mb-0">
                    <i class="bi bi-toggles me-2"></i>Personalização
                </h6>
            </div>

            @if (!$themeCompatible)
                <div class="modal-body text-center py-5">
                    <i class="bi bi-exclamation-triangle-fill text-warning" style="font-size:2.5rem;"></i>
                    <h6 class="mt-3 mb-2">Aplicativo incompatível</h6>
                    <p class="text-muted mb-0" style="font-size:.875rem;">
                        Este aplicativo usa o <strong>Tema {{ $theme }}</strong>, que não é compatível com o gerenciamento de módulos.<br>
                        Atualize o aplicativo para o <strong>Tema 1</strong> ou <strong>Tema 2</strong> antes de continuar.
                    </p>
                </div>
                <div class="modal-footer py-2">
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Fechar</button>
                </div>

            @else
                <div class="modal-body p-0" style="max-height:72vh; overflow-y:auto;">

                    <div class="px-3 pt-3 pb-2 border-bottom bg-light">
                        <label class="form-label mb-1 fw-semibold" style="font-size:.8125rem;">
                            <i class="bi bi-palette me-1"></i>Tema do aplicativo
                        </label>
                        <select class="form-select form-select-sm" id="selectTheme">
                            <option value="1" {{ $theme == '1' ? 'selected' : '' }}>Tema 1 — Antigo</option>
                            <option value="2" {{ $theme == '2' ? 'selected' : '' }}>Tema 2 — Novo (Completo)</option>
                        </select>
                        <div id="themeChangeWarning" class="text-primary mt-1" style="font-size:.775rem; display:none;">
                            <i class="bi bi-exclamation-triangle me-1"></i>
                            Alterar o tema irá pedir uma confirmação adicional ao salvar.
                        </div>
                    </div>

                    <div class="px-3 pt-3 pb-2 border-bottom">
                        <p class="fw-semibold mb-2" style="font-size:.8125rem;">
                            <i class="bi bi-droplet-half me-1"></i>Cores do aplicativo
                        </p>
                        <div class="row g-2" id="colorPickersRow">
                            @foreach($activeSchema as $key => $cfg)
                            <div class="col-6">
                                <label class="form-label mb-1 text-muted" style="font-size:.775rem;">
                                    {{ $cfg['label'] }}
                                    <span class="badge text-bg-secondary ms-1" style="font-size:.65rem; vertical-align:middle;">{{ strtoupper($key) }}</span>
                                    <span class="d-block text-muted" style="font-size:.7rem; font-weight:400;">{{ $cfg['hint'] }}</span>
                                </label>
                                <div class="input-group input-group-sm">
                                    <input
                                        type="color"
                                        class="form-control form-control-color color-picker-input p-0"
                                        id="picker_{{ $key }}"
                                        data-color-key="{{ $key }}"
                                        value="{{ $colorValues[$key] }}"
                                        title="{{ $cfg['label'] }}"
                                        style="width:1.6rem; min-width:1.6rem; cursor:pointer; border-radius:.375rem 0 0 .375rem; padding:1px !important;"
                                    >
                                    <input
                                        type="text"
                                        class="form-control color-hex-input text-uppercase"
                                        id="hex_{{ $key }}"
                                        data-color-key="{{ $key }}"
                                        value="{{ strtoupper($colorValues[$key]) }}"
                                        maxlength="7"
                                        placeholder="#000000"
                                        style="font-size:.8rem; font-family: monospace; letter-spacing:.05em;"
                                    >
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>

                    <div>
                        <p class="fw-semibold mb-0 px-3 pt-3 pb-1" style="font-size:.8125rem;">
                            <i class="bi bi-grid me-1"></i>Módulos ativos
                        </p>
                        <ul class="list-group list-group-flush" id="modulesList">
                            @foreach($allModules as $mod)
                                @php $isActive = isset($appData->{$mod['key']}) ? (int)$appData->{$mod['key']} : 1; @endphp
                                <li class="list-group-item d-flex align-items-center gap-3 py-2">
                                    <div class="form-check form-switch mb-0 flex-shrink-0">
                                        <input
                                            class="form-check-input"
                                            type="checkbox"
                                            role="switch"
                                            id="toggle_{{ $mod['key'] }}"
                                            data-module="{{ $mod['key'] }}"
                                            {{ $isActive ? 'checked' : '' }}
                                            style="width:2.5em; height:1.3em; cursor:pointer;"
                                        >
                                    </div>
                                    <label class="mb-0" for="toggle_{{ $mod['key'] }}" style="cursor:pointer;">
                                        <span class="fw-semibold d-block" style="font-size:.875rem;">{{ $mod['title'] }}</span>
                                        <small class="text-muted" style="font-size:.775rem;">{{ $mod['desc'] }}</small>
                                    </label>
                                </li>
                            @endforeach
                        </ul>
                    </div>

                </div>

                <div class="modal-footer py-2">
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-sm btn-success" id="btnSaveModules">
                        <i class="bi bi-save me-1"></i> Salvar
                    </button>
                </div>
            @endif

        </div>
    </div>
</div>

<script>
(function () {
    const modulesBase = [
        { key: 'mod_schedule', title: 'Programação',      desc: 'Exibe a grade de programação da rádio no app.' },
        { 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 envio de recados em texto e áudio.' },
        { key: 'mod_camera',   title: 'Câmera ao vivo',    desc: 'Exibe transmissão de vídeo no app.' },
        { key: 'mod_requests', title: 'Pedidos de música', desc: 'Formulário de pedidos de música.' },
    ];
    const modulesNew = [
        { 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 postagens de notícias no app.' },
        { key: 'mod_events',   title: 'Eventos',            desc: 'Exibe 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 galerias de fotos no app.' },
        { key: 'mod_promo',    title: 'Promoções',          desc: 'Exibe promoções cadastradas no painel.' },
        { key: 'mod_podcasts', title: 'Podcasts',           desc: 'Lista os podcasts do cliente no app.' },
    ];

    const colorSchema = {
        '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 header'   },
        ],
    };

    const savedColors = {
        p1: '{{ strtoupper($colorValues["p1"]) }}',
        p2: '{{ strtoupper($colorValues["p2"]) }}',
        p3: '{{ strtoupper($colorValues["p3"]) }}',
        p4: '{{ strtoupper($colorValues["p4"]) }}',
    };

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

    const originalTheme = '{{ $theme }}';

    document.getElementById('btnModules').addEventListener('click', function () {
        bootstrap.Modal.getOrCreateInstance(
            document.getElementById('modulesModal'),
            { backdrop: 'static', keyboard: false }
        ).show();
    });

    @if ($themeCompatible)

    const isValidHex = v => /^#[0-9a-fA-F]{6}$/.test(v);

    function bindPickerEvents() {
        document.querySelectorAll('#colorPickersRow .color-picker-input').forEach(function (picker) {
            const key      = picker.dataset.colorKey;
            const hexInput = document.getElementById('hex_' + key);
            picker.addEventListener('input', function () {
                hexInput.value        = this.value.toUpperCase();
                savedColors[key]      = this.value.toUpperCase();
            });
        });

        document.querySelectorAll('#colorPickersRow .color-hex-input').forEach(function (hexInput) {
            const key    = hexInput.dataset.colorKey;
            const picker = document.getElementById('picker_' + key);
            hexInput.addEventListener('input', function () {
                let v = this.value.trim();
                if (!v.startsWith('#')) v = '#' + v;
                this.value = v.toUpperCase();
                if (isValidHex(v)) {
                    picker.value     = v;
                    savedColors[key] = v.toUpperCase();
                }
            });
            hexInput.addEventListener('blur', function () {
                if (!isValidHex(this.value)) this.value = picker.value.toUpperCase();
            });
        });
    }

    bindPickerEvents();

    function buildColorPickers(themeVal) {
        const fields = colorSchema[themeVal] || colorSchema['1'];
        document.getElementById('colorPickersRow').innerHTML = fields.map(f => `
            <div class="col-6">
                <label class="form-label mb-1 text-muted" style="font-size:.775rem;">
                    ${f.label}
                    <span class="badge text-bg-secondary ms-1" style="font-size:.65rem; vertical-align:middle;">${f.key.toUpperCase()}</span>
                    <span class="d-block text-muted" style="font-size:.7rem; font-weight:400;">${f.hint}</span>
                </label>
                <div class="input-group input-group-sm">
                    <input type="color"
                        class="form-control form-control-color color-picker-input p-0"
                        id="picker_${f.key}" data-color-key="${f.key}"
                        value="${savedColors[f.key]}"
                        style="width:1.6rem; min-width:1.6rem; cursor:pointer; border-radius:.375rem 0 0 .375rem; padding:1px !important;">
                    <input type="text"
                        class="form-control color-hex-input text-uppercase"
                        id="hex_${f.key}" data-color-key="${f.key}"
                        value="${savedColors[f.key]}"
                        maxlength="7" placeholder="#000000"
                        style="font-size:.8rem; font-family:monospace; letter-spacing:.05em;">
                </div>
            </div>`).join('');
        bindPickerEvents();
    }

    const selectTheme  = document.getElementById('selectTheme');
    const modulesList  = document.getElementById('modulesList');
    const themeWarning = document.getElementById('themeChangeWarning');

    selectTheme.addEventListener('change', function () {
        const val = this.value;
        themeWarning.style.display = (val !== originalTheme) ? '' : 'none';

        buildColorPickers(val);

        const mods = val === '2' ? [...modulesBase, ...modulesNew] : modulesBase;
        modulesList.innerHTML = mods.map(mod => `
            <li class="list-group-item d-flex align-items-center gap-3 py-2">
                <div class="form-check form-switch mb-0 flex-shrink-0">
                    <input class="form-check-input" type="checkbox" role="switch"
                        id="toggle_${mod.key}" data-module="${mod.key}"
                        ${savedModules[mod.key] ? 'checked' : ''}
                        style="width:2.5em;height:1.3em;cursor:pointer;">
                </div>
                <label class="mb-0" for="toggle_${mod.key}" style="cursor:pointer;">
                    <span class="fw-semibold d-block" style="font-size:.875rem;">${mod.title}</span>
                    <small class="text-muted" style="font-size:.775rem;">${mod.desc}</small>
                </label>
            </li>`).join('');
    });

    document.getElementById('btnSaveModules').addEventListener('click', function () {
        const selectedTheme = selectTheme.value;
        const themeChanged  = selectedTheme !== originalTheme;

        const colors = {};
        let colorError = false;
        document.querySelectorAll('#colorPickersRow .color-hex-input').forEach(function (inp) {
            const v = inp.value.trim();
            if (!isValidHex(v)) {
                inp.classList.add('is-invalid');
                colorError = true;
            } else {
                inp.classList.remove('is-invalid');
                colors[inp.dataset.colorKey] = v.toLowerCase();
            }
        });

        if (colorError) {
            Sweetalert2.fire({
                icon: 'warning',
                title: 'Cor inválida',
                text: 'Corrija os campos de cor antes de salvar. O formato esperado é #RRGGBB.',
                showConfirmButton: true,
            });
            return;
        }

        const doSave = function () {
            const modules = {};
            document.querySelectorAll('#modulesModal input[type="checkbox"][data-module]').forEach(function (cb) {
                modules[cb.dataset.module] = cb.checked ? '1' : '0';
            });

            $.post("{{ route('admin.ajaxModules') }}", {
                _token:    "{{ csrf_token() }}",
                server_id: "{{ $server }}",
                app_id:    "{{ $appData->id }}",
                table:     "{{ $table }}",
                theme:     selectedTheme,
                modules:   modules,
                colors:    colors,
            }, function (data) {
                if (data.success) {
                    bootstrap.Modal.getOrCreateInstance(document.getElementById('modulesModal')).hide();
                    Sweetalert2.fire({
                        icon: 'success',
                        title: 'Configurações salvas!',
                        showConfirmButton: false,
                        timer: 2000,
                    }).then(() => { if (themeChanged) location.reload(); });
                } else {
                    Sweetalert2.fire({ icon: 'error', title: 'Erro ao salvar.', showConfirmButton: false, timer: 2500 });
                }
            }, 'json').fail(function () {
                Sweetalert2.fire({ icon: 'error', title: 'Falha na requisição.', showConfirmButton: false, timer: 2500 });
            });
        };

        if (themeChanged) {
            Sweetalert2.fire({
                icon: 'warning',
                title: 'Alterar tema?',
                html: `O tema será alterado de <strong>Tema ${originalTheme}</strong> para <strong>Tema ${selectedTheme}</strong>.<br>
                       Isso pode afetar a exibição de módulos no aplicativo.<br><br>
                       Deseja continuar?`,
                showCancelButton:   true,
                confirmButtonText:  'Sim, alterar',
                cancelButtonText:   'Cancelar',
                confirmButtonColor: '#198754',
            }).then(result => { if (result.isConfirmed) doSave(); });
        } else {
            doSave();
        }
    });

    @endif
})();
</script>