@extends('layout')
@php($soundOptions = array_merge($notificationSoundConfig['builtins'], $notificationSoundConfig['custom']))
@section('content')
<div class="page-head page-head--rich">@include('partials.context-back')<div class="t"><div class="eyebrow"><i class="ic sm">settings</i> Preferências do painel</div><h1>Configurações</h1><p class="lead">Aparência e gestão interna do OmniAURIOS em um só lugar.</p></div><div class="actions"><a class="btn btn--subtle" href="{{ url('configuracoes/espelho') }}"><i class="ic sm">hub</i> Espelho de dados</a></div></div>
@if(session('status'))<div class="flash flash--success">{{ session('status') }}</div>@endif
<nav class="settings-tabs" aria-label="Seções de configurações" role="tablist"><a href="{{ url('configuracoes#aparencia') }}" class="settings-tab active" data-settings-tab="aparencia" role="tab"><i class="ic sm">palette</i><span>Aparência</span></a><a href="{{ url('configuracoes#navegacao') }}" class="settings-tab" data-settings-tab="navegacao" role="tab"><i class="ic sm">menu_open</i><span>Navegação</span></a><a href="{{ url('configuracoes#instalacao') }}" class="settings-tab" data-settings-tab="instalacao" role="tab"><i class="ic sm">install_mobile</i><span>Ícone do app</span></a><a href="{{ url('configuracoes#email') }}" class="settings-tab" data-settings-tab="email" role="tab"><i class="ic sm">mail</i><span>E-mail</span></a><a href="{{ url('configuracoes#notificacoes') }}" class="settings-tab" data-settings-tab="notificacoes" role="tab"><i class="ic sm">notifications_active</i><span>Notificações</span></a><a href="{{ url('configuracoes#gestao') }}" class="settings-tab" data-settings-tab="gestao" role="tab"><i class="ic sm">admin_panel_settings</i><span>Gestão interna</span></a><a href="{{ url('configuracoes/ia') }}" class="settings-tab"><i class="ic sm">neurology</i><span>Inteligência artificial</span></a></nav>
<section class="settings-panel" data-settings-panel="navegacao" hidden>
    <form class="card pad-lg form mobile-navigation-settings" method="post"
        action="{{ url('configuracoes/navegacao') }}" data-ajax data-method="PUT"
        data-success="Navegação mobile atualizada." data-reload="1">
        @csrf
        <div class="profile-form-head">
            <div>
                <h2>Navegação no celular</h2>
                <p>Escolha como abrir os módulos no seu dispositivo. Essa preferência vale para a sua conta e pode ser alterada quando quiser.</p>
            </div>
            <i class="ic lg">phone_iphone</i>
        </div>
        <div class="appearance-choice-list">
            <label class="appearance-choice">
                <input type="radio" name="mobile_navigation" value="drawer" @checked($mobileNavigation === 'drawer')>
                <span><strong>Menu lateral (recomendado)</strong><small>Um ícone na barra superior abre todos os módulos em um painel lateral. Mais espaço livre para a tela.</small></span>
            </label>
            <label class="appearance-choice">
                <input type="radio" name="mobile_navigation" value="tabbar" @checked($mobileNavigation === 'tabbar')>
                <span><strong>Barra inferior atual</strong><small>Mantenha os atalhos dos módulos fixos na parte inferior da tela.</small></span>
            </label>
        </div>
        <div class="form-actions"><button type="submit" class="btn btn--primary"><i class="ic">save</i> Salvar navegação</button></div>
    </form>
</section>
<section class="settings-panel" data-settings-panel="aparencia"><div class="settings-layout"><section class="card pad-lg appearance-preview" style="--preview-accent:{{ $accent }};--preview-aurora:{{ $aurora }}"><div class="appearance-preview__swatch" aria-hidden="true"></div><div><span class="profile-eyebrow">Acento atual</span><h2>Uma identidade mais consistente</h2><p class="muted">A mesma cor aparece nos estados ativos, botões principais, bordas de foco, links, gráficos e indicadores da interface.</p></div><div class="appearance-preview__samples"><span class="btn btn--primary">Ação principal</span><span class="badge badge--accent plain">Ativo</span><span class="appearance-focus-sample">Foco</span><span class="appearance-aurora-sample" aria-label="Prévia da aurora"></span></div></section><form class="card pad-lg form appearance-form" method="post" action="{{ url('configuracoes') }}" data-ajax data-method="PUT">@csrf<div class="profile-form-head"><div><h2>Cor de acento</h2><p>Defina uma cor hexadecimal para todo o painel.</p></div><i class="ic lg">format_color_fill</i></div><div class="field"><label for="accent-color">Cor principal</label><div class="appearance-color-control"><input type="color" id="accent-color" name="accent_color" value="{{ $accent }}" data-accent-input><code data-accent-value>{{ $accent }}</code></div><span class="hint">Usada em hovers, bordas de foco, links, seleção, estados ativos e gráficos.</span></div><div class="field"><label for="aurora-mode-accent">Cor da aurora</label><div class="appearance-choice-list"><label class="appearance-choice"><input type="radio" id="aurora-mode-accent" name="aurora_mode" value="accent" @checked($auroraMode==='accent') data-aurora-mode><span><strong>Usar a cor de acento</strong><small>A aurora acompanha a identidade principal.</small></span></label><label class="appearance-choice"><input type="radio" name="aurora_mode" value="custom" @checked($auroraMode==='custom') data-aurora-mode><span><strong>Escolher uma cor separada</strong><small>Crie um contraste exclusivo para o brilho.</small></span></label></div><div class="appearance-color-control appearance-aurora-custom"><input type="color" id="aurora-color" name="aurora_color" value="{{ $aurora }}" data-aurora-input @disabled($auroraMode==='accent')><code data-aurora-value>{{ $aurora }}</code></div><span class="hint">Você pode acompanhar o acento ou definir uma cor exclusiva para a aurora.</span></div><div class="form-actions"><button class="btn btn--primary"><i class="ic">save</i> Salvar aparência</button></div></form></div></section>
<section class="settings-panel" data-settings-panel="instalacao" hidden><div class="settings-layout"><section class="card pad-lg pwa-branding-preview"><div class="profile-form-head"><div><h2>Prévia do ícone</h2><p>Assim o ícone será composto para instalação em celulares e computadores.</p></div><i class="ic lg">mobile_friendly</i></div><div class="pwa-icon-preview" style="--pwa-preview-bg:{{ $pwaBranding['background_color'] }}"><canvas width="512" height="512" data-pwa-preview data-preview-source="{{ $pwaIconPreview }}" role="img" aria-label="Prévia do ícone AURIOS"></canvas><span>AURIOS</span></div><p class="hint">O dispositivo pode manter a identidade antiga. Depois de salvar, remova o atalho instalado e instale o app novamente para atualizar.</p></section><form class="card pad-lg form pwa-branding-form" method="post" action="{{ url('configuracoes/pwa') }}" enctype="multipart/form-data">@csrf<div class="profile-form-head"><div><h2>Ícone de instalação</h2><p>Escolha a imagem, o fundo e o respiro do ícone do app instalado.</p></div><i class="ic lg">app_shortcut</i></div><div class="field"><label for="pwa-icon">Imagem da marca</label><input id="pwa-icon" type="file" name="pwa_icon" accept="image/png,image/jpeg,image/webp"><span class="hint">PNG recomendado, de preferência com transparência; JPG ou WebP também aceitos. Até 5 MB. A imagem é centralizada no fundo escolhido.</span></div><div class="field"><label for="pwa-background-color">Cor de fundo do ícone e da tela de abertura</label><div class="appearance-color-control"><input id="pwa-background-color" type="color" name="pwa_background_color" value="{{ $pwaBranding['background_color'] }}"><code>{{ $pwaBranding['background_color'] }}</code></div><span class="hint">Padrão atual: {{ $pwaBranding['background_color'] }}.</span></div><div class="field"><label for="pwa-icon-padding">Respiro da imagem</label><div class="pwa-padding-control"><input id="pwa-icon-padding" type="range" name="pwa_icon_padding" min="5" max="30" value="{{ $pwaBranding['padding'] }}"><output>{{ $pwaBranding['padding'] }}%</output></div><span class="hint">O formato maskable recebe uma margem de segurança maior para não cortar a marca em ícones adaptáveis.</span></div>@if($pwaBranding['icon_path'])<label class="check-row pwa-remove-icon"><input type="checkbox" name="remove_pwa_icon" value="1"><span><strong>Voltar ao ícone AURIOS padrão</strong><small>Remove a imagem personalizada e restaura o asset padrão do sistema.</small></span></label>@endif<div class="form-actions"><button class="btn btn--primary"><i class="ic">save</i> Salvar identidade de instalação</button></div></form></div></section>
<section class="settings-panel" data-settings-panel="email" hidden><section class="card pad-lg settings-mail-card"><div class="profile-form-head"><div><h2>E-mail transacional</h2><p>Deixe o SMTP pronto para notificações, alertas e comunicações futuras do OmniAURIOS.</p></div><i class="ic lg">mail</i></div><div class="settings-mail-status"><span class="badge badge--{{ $mailStatus['configured']?'ok':'warn' }}"><i class="ic sm">{{ $mailStatus['configured']?'check_circle':'schedule' }}</i>{{ $mailStatus['configured']?'SMTP configurado':'Aguardando configuração' }}</span><span class="muted small">{{ $mailStatus['configured']?'O transporte está pronto para os próximos disparos.':'Nenhum e-mail é disparado enquanto o SMTP não estiver definido.' }}</span></div><div class="settings-mail-grid"><div><span class="settings-mail-label">Servidor</span><strong>{{ $mailStatus['host'] ?: 'Não definido' }}</strong></div><div><span class="settings-mail-label">Porta</span><strong>{{ $mailStatus['port'] }}</strong></div><div><span class="settings-mail-label">Segurança</span><strong>{{ $mailStatus['encryption'] ?: 'Não definida' }}</strong></div><div><span class="settings-mail-label">Remetente</span><strong>{{ $mailStatus['from'] ?: 'Não definido' }}</strong></div></div><div class="settings-mail-note"><i class="ic sm">lock</i><p>As credenciais são lidas somente do arquivo <code>.env</code> do servidor. A senha não é salva no banco nem exibida nesta página.</p></div><p class="hint">Para ativar: defina <code>MAIL_HOST</code>, <code>MAIL_USERNAME</code>, <code>MAIL_PASSWORD</code> e <code>MAIL_FROM_ADDRESS</code>. Depois, reinicie o processo PHP/worker.</p></section><section class="card pad-lg settings-weekly-report"><div class="profile-form-head"><div><h2>Relatório gerencial semanal</h2><p>Receba um resumo das ações e da saúde operacional nos dias que você escolher.</p></div><i class="ic lg">summarize</i></div><form class="form" method="post" action="{{ url('configuracoes/relatorio-semanal') }}" data-ajax data-method="PUT" data-success="Relatório semanal atualizado.">@csrf<div class="field"><label class="check-row"><input type="checkbox" name="enabled" value="1" @checked($weeklyReport['enabled'])> <span><strong>Ativar envio automático</strong><small>O relatório será enfileirado uma vez por dia selecionado, no horário definido.</small></span></label></div><div class="field"><label for="weekly-report-recipients">Destinatários</label><textarea id="weekly-report-recipients" name="recipients" rows="2" placeholder="um@exemplo.com, outro@exemplo.com">{{ $weeklyReport['recipients'] }}</textarea><span class="hint">Separe por vírgula, ponto e vírgula ou quebra de linha.</span></div><fieldset class="field settings-weekly-report__day-field"><legend>Dias de envio</legend><div class="settings-weekly-report__days">@foreach([1=>'Segunda-feira',2=>'Terça-feira',3=>'Quarta-feira',4=>'Quinta-feira',5=>'Sexta-feira',6=>'Sábado',0=>'Domingo'] as $day=>$label)<label class="check-row"><input type="checkbox" name="days[]" value="{{ $day }}" @checked(in_array($day,$weeklyReport['days'],true))><span>{{ $label }}</span></label>@endforeach</div></fieldset><div class="settings-weekly-report__grid"><div class="field"><label for="weekly-report-time">Horário de envio</label><input type="time" id="weekly-report-time" name="time" value="{{ $weeklyReport['time'] }}"></div><fieldset class="field"><legend>Conteúdo do relatório</legend><div class="settings-weekly-report__checks">@foreach(['actions'=>'Ações, tarefas e reuniões','storage'=>'Gasto de armazenamento','requests'=>'Requisições e telemetria','incidents'=>'Sinistros, avarias e falhas'] as $key=>$label)<label class="check-row"><input type="checkbox" name="sections[]" value="{{ $key }}" @checked(in_array($key,$weeklyReport['sections'],true))><span>{{ $label }}</span></label>@endforeach</div></fieldset></div><div class="form-actions"><button type="submit" class="btn btn--primary"><i class="ic sm">save</i> Salvar relatório</button><button type="button" class="btn settings-weekly-report__send" data-send-weekly-report data-send-url="{{ url('configuracoes/relatorio-semanal/enviar') }}"><i class="ic sm">send</i> Enviar agora</button>@if($weeklyReport['last_sent_at'] !== '')<span class="hint">Último envio: {{ \Illuminate\Support\Carbon::parse($weeklyReport['last_sent_at'])->format('d/m/Y H:i') }}</span>@endif</div></form></section></section>
<section class="settings-panel" data-settings-panel="notificacoes" hidden><section class="card pad-lg settings-push-card" data-push-settings data-push-public-key="{{ $pushStatus['public_key'] }}" data-push-status-url="{{ url('configuracoes/notificacoes/push') }}" data-push-subscribe-url="{{ url('configuracoes/notificacoes/push') }}" data-push-unsubscribe-url="{{ url('configuracoes/notificacoes/push/remover') }}" data-push-test-url="{{ url('configuracoes/notificacoes/push/testar') }}" data-push-preferences-url="{{ url('configuracoes/notificacoes/preferencias') }}"><div class="profile-form-head"><div><h2>Notificações em segundo plano</h2><p>Receba alertas importantes mesmo quando o OmniAURIOS estiver em outra aba ou fechado.</p></div><i class="ic lg">notifications_active</i></div><div class="settings-push-status" data-push-status role="status" aria-live="polite"><span class="badge badge--warn" data-push-badge><i class="ic sm" data-push-badge-icon>schedule</i><span data-push-badge-label>Aguardando verificação</span></span><span class="muted small" data-push-detail></span></div><div class="settings-push-note"><i class="ic sm">security</i><p>A permissão é solicitada somente quando você clicar em ativar. A inscrição fica vinculada à sua conta e pode ser removida a qualquer momento.</p></div><div class="settings-push-actions"><button type="button" class="btn btn--primary" data-push-enable><i class="ic">notifications_active</i> Ativar neste dispositivo</button><button type="button" class="btn btn--subtle" data-push-test><i class="ic">send</i> Enviar teste</button><button type="button" class="btn btn--ghost" data-push-disable><i class="ic">notifications_off</i> Desativar neste dispositivo</button></div><p class="hint" data-push-help>Em celulares, adicione o OmniAURIOS à tela inicial para obter a melhor experiência de notificações.</p><div class="push-preferences" data-push-preferences><div class="push-preferences-head"><div><h3>O que receber em segundo plano?</h3><p class="hint">Falhas críticas continuam sempre ativas. Escolha os demais tipos para evitar excesso de alertas.</p></div><i class="ic">tune</i></div><div class="push-preference-presets">@foreach($pushPreferences['presets'] as $key=>$preset)<button type="button" class="btn btn--ghost push-preference-preset {{ $pushPreferences['current']['preset']===$key?'is-active':'' }}" data-push-preset="{{ $key }}" data-push-preset-categories='@json($preset['categories'])'>{{ $preset['label'] }}</button>@endforeach</div><div class="push-preference-grid"><label class="push-preference-item is-locked"><input type="checkbox" checked disabled><span><strong>Falhas críticas</strong><small>Sempre ativo para você não perder indisponibilidades.</small></span></label>@foreach($pushPreferences['categories'] as $key=>$label)<label class="push-preference-item"><input type="checkbox" data-push-category="{{ $key }}" @checked($pushPreferences['current']['categories'][$key])><span><strong>{{ $label }}</strong><small>Alertas deste tipo fora da aba.</small></span></label>@endforeach</div><div class="push-preferences-actions"><span class="hint" data-push-preferences-status></span><button type="button" class="btn btn--subtle" data-push-preferences-save><i class="ic sm">save</i> Salvar preferências</button></div></div></section>
<section class="card pad-lg notification-sound-settings" data-notification-sound-settings data-sound-config-url="{{ url('configuracoes/notificacoes/sons') }}" data-sound-upload-url="{{ url('configuracoes/notificacoes/sons/upload') }}"><div class="profile-form-head"><div><h2>Central de sons</h2><p>Escolha a personalidade de cada alerta. A base é nativa e os seus sons ficam protegidos na conta.</p></div><i class="ic lg">graphic_eq</i></div><div class="notification-sound-intro"><i class="ic sm">tune</i><span>O som mais forte fica reservado para situações críticas. Sons de Web Push em segundo plano seguem o controle do sistema operacional.</span></div><div class="notification-sound-presets">@foreach($notificationSoundConfig['builtins'] as $key=>$sound)<button type="button" class="btn btn--ghost notification-sound-preset" data-sound-preview="{{ $key }}"><i class="ic sm">play_arrow</i>{{ $sound['label'] }}</button>@endforeach</div><div class="notification-sound-map">@foreach($notificationSoundConfig['types'] as $type=>$label)<label class="notification-sound-row"><span>{{ $label }}</span><span class="notification-sound-choice"><select data-sound-map-type="{{ $type }}"><option value="__auto">Automático</option>@foreach($soundOptions as $key=>$sound)<option value="{{ $key }}" @selected(($notificationSoundConfig['overrides'][$type]??'')===$key)>{{ $sound['label'] }}</option>@endforeach</select><button type="button" class="icon-btn" data-sound-row-preview="{{ $notificationSoundConfig['mapping'][$type] }}"><i class="ic sm">play_arrow</i></button></span></label>@endforeach</div><div class="notification-sound-volume"><label for="notification-sound-volume">Volume dos sons da aba</label><output data-sound-volume-output>{{ (int)round($notificationSoundConfig['volume']*100) }}%</output><input type="range" id="notification-sound-volume" min="5" max="100" step="5" value="{{ (int)round($notificationSoundConfig['volume']*100) }}" data-sound-volume></div><div class="form-actions notification-sound-actions"><button type="button" class="btn btn--primary" data-sound-save><i class="ic">save</i> Salvar sons</button></div><div class="notification-sound-upload-block"><div><strong>Adicionar som personalizado</strong><p class="hint">MP3, OGG, WAV, M4A ou WebM · até 3 MB.</p></div><form method="post" action="{{ url('configuracoes/notificacoes/sons/upload') }}" enctype="multipart/form-data" data-sound-upload>@csrf <div class="notification-sound-upload-fields"><input type="text" name="name" placeholder="Nome do som" maxlength="120" aria-label="Nome do som"><input type="file" name="sound" accept="audio/mpeg,audio/ogg,audio/wav,audio/mp4,audio/webm" required aria-label="Arquivo de som"><button type="submit" class="btn btn--subtle"><i class="ic">upload</i> Enviar</button></div></form></div><div class="notification-sound-library" data-sound-library @if(empty($notificationSoundConfig['custom'])) hidden @endif></div></section></section>
<section class="settings-panel" data-settings-panel="gestao" hidden>@if($internalSystem)<section class="card pad-lg settings-internal-card"><div class="profile-form-head"><div><h2>Gestão interna</h2><p>Gerencie o Aurélio do painel, sua base de conhecimento e as configurações da instalação interna.</p></div><i class="ic lg">admin_panel_settings</i></div><h3>{{ $internalSystem->name }}</h3><p class="muted">Esta instalação representa o próprio OmniAURIOS no catálogo de soluções.</p><a class="btn btn--subtle" href="{{ url('configuracoes/ops') }}"><i class="ic">settings</i>Abrir gestão interna</a></section>@else<section class="card pad-lg empty"><i class="ic">admin_panel_settings</i><p>A gestão interna ainda não foi configurada.</p></section>@endif</section>
<section class="settings-panel" data-settings-panel="aparencia" hidden>
    <form class="card pad-lg form background-settings-form" method="post" action="{{ url('configuracoes/fundo') }}" data-ajax data-method="PUT" data-success="Fundo atualizado." data-reload="1">
        @csrf
        <div class="profile-form-head">
            <div>
                <h2>Quadriculado do fundo</h2>
                <p>Personalize a cor, intensidade e espaçamento da malha no sistema, login e tela bloqueada.</p>
            </div>
            <i class="ic lg">grid_4x4</i>
        </div>
        <div class="background-settings-controls">
            <div class="field">
                <label for="app-grid-color">Cor do quadriculado</label>
                <div class="appearance-color-control">
                    <input type="color" id="app-grid-color" name="grid_color" value="{{ $gridColor }}" data-grid-color>
                    <code data-grid-color-value>{{ $gridColor }}</code>
                </div>
            </div>
            <div class="field">
                <label for="app-grid-opacity">Opacidade <output data-grid-opacity-value>{{ $gridOpacity }}%</output></label>
                <input type="range" id="app-grid-opacity" name="grid_opacity" min="0" max="12" step="1" value="{{ $gridOpacity }}" data-grid-opacity>
                <span class="hint">0% desativa o padrão; 2% é o padrão sutil. Máximo: 12%.</span>
            </div>
            <div class="field">
                <label for="app-grid-size">Espaçamento <output data-grid-size-value>{{ $gridSize }} px</output></label>
                <input type="range" id="app-grid-size" name="grid_size" min="24" max="64" step="4" value="{{ $gridSize }}" data-grid-size>
                <span class="hint">Linhas mais próximas formam uma malha mais fechada.</span>
            </div>
        </div>
        <div class="background-grid-preview" data-grid-preview style="--preview-grid-color:{{ $gridColor }};--preview-grid-opacity:{{ $gridOpacity }}%;--preview-grid-size:{{ $gridSize }}px"><span>Prévia do fundo</span></div>
        <div class="form-actions"><button class="btn btn--primary"><i class="ic">save</i> Salvar fundo</button></div>
    </form>
</section>
@include('settings._email-branding-panel')
@if($errors->any())<div class="flash flash--error">{{ $errors->first() }}</div>@endif
<script defer src="{{ asset('assets/js/background-settings.js') }}?v={{ filemtime(public_path('assets/js/background-settings.js')) }}"></script>
<script nonce="{{ $cspNonce }}">(()=>{const canvas=document.querySelector('[data-pwa-preview]'),ctx=canvas?.getContext('2d'),range=document.querySelector('#pwa-icon-padding'),upload=document.querySelector('#pwa-icon'),color=document.querySelector('#pwa-background-color');if(!canvas||!ctx)return;let source=new Image();const draw=()=>{const size=canvas.width,padding=Number(range?.value||14),bg=color?.value||'#0f0f11';ctx.fillStyle=bg;ctx.fillRect(0,0,size,size);if(source.complete&&source.naturalWidth){const max=size*(1-padding/50),scale=Math.min(max/source.naturalWidth,max/source.naturalHeight),w=source.naturalWidth*scale,h=source.naturalHeight*scale;ctx.drawImage(source,(size-w)/2,(size-h)/2,w,h)}};source.onload=draw;source.src=canvas.dataset.previewSource;range?.addEventListener('input',()=>{range.nextElementSibling.value=`${range.value}%`;draw()});color?.addEventListener('input',()=>{color.nextElementSibling.value=color.value;draw()});upload?.addEventListener('change',()=>{if(upload.files?.[0]){source=new Image();source.onload=draw;source.src=URL.createObjectURL(upload.files[0])}})})();</script>
<script nonce="{{ $cspNonce }}">(()=>{const tabs=[...document.querySelectorAll('[data-settings-tab]')],panels=[...document.querySelectorAll('[data-settings-panel]')],settingsPath={{ Illuminate\Support\Js::from(url('configuracoes')) }};const activate=(name,hash=false)=>{const selected=tabs.some(t=>t.dataset.settingsTab===name)?name:'aparencia';tabs.forEach(t=>{const active=t.dataset.settingsTab===selected;t.classList.toggle('active',active);t.setAttribute('aria-selected',String(active));});panels.forEach(p=>p.hidden=p.dataset.settingsPanel!==selected);if(hash){const next=`${settingsPath}#${selected}`;if(location.href!==next)history.replaceState(null,'',next)}};activate(location.hash.slice(1));tabs.forEach(t=>t.addEventListener('click',e=>{e.preventDefault();activate(t.dataset.settingsTab,true)}));addEventListener('hashchange',()=>activate(location.hash.slice(1)));})();</script>
@endsection