@php
    $imagens = [
        'logo' => ['campo' => 'logo_path', 'rota' => 'logo', 'titulo' => 'Logo principal', 'ajuda' => 'Usada sobre fundo claro: login, página inicial e e-mails. PNG ou SVG com fundo transparente.', 'fundo' => 'bg-slate-50'],
        'logo_claro' => ['campo' => 'logo_claro_path', 'rota' => 'logo-claro', 'titulo' => 'Logo para fundo escuro', 'ajuda' => 'Aparece no menu lateral do painel. Sem ela, a logo principal é reaproveitada.', 'fundo' => 'bg-brand-950'],
        'favicon' => ['campo' => 'favicon_path', 'rota' => 'favicon', 'titulo' => 'Favicon', 'ajuda' => 'Ícone da aba do navegador. Quadrado, 64×64 ou maior.', 'fundo' => 'bg-slate-50'],
    ];
@endphp

<x-layouts.app title="Configurações do site" subtitle="Identidade visual, tela de login e créditos do desenvolvedor">
    <x-slot:actions>
        <form method="POST" action="{{ route('master.configuracoes.restaurar') }}"
              onsubmit="return confirm('Restaurar textos e cores para o padrão? As imagens enviadas são preservadas.')">
            @csrf
            <button class="btn-secondary btn-sm">Restaurar padrão</button>
        </form>
    </x-slot:actions>

    <form method="POST" action="{{ route('master.configuracoes.update') }}" enctype="multipart/form-data"
          class="space-y-6"
          x-data="{
              cor: @js($config['cor_primaria']),
              /* Mesma regra do App\Support\Paleta: a cor escolhida é o tom 600. */
              escala: { 50: .95, 100: .90, 200: .75, 300: .55, 400: .30, 500: .12, 600: 0, 700: -.14, 800: -.28, 900: -.44, 950: -.62 },
              derivar(fator) {
                  const n = parseInt(this.cor.slice(1), 16)
                  if (isNaN(n)) return this.cor
                  const alvo = fator >= 0 ? 255 : 0
                  const p = Math.abs(fator)
                  const c = [(n >> 16) & 255, (n >> 8) & 255, n & 255]
                      .map(v => Math.round(v + (alvo - v) * p).toString(16).padStart(2, '0'))
                  return '#' + c.join('')
              }
          }">
        @csrf @method('PUT')

        {{-- Identidade --}}
        <section class="card card-pad">
            <h2 class="text-sm font-semibold text-slate-900">Identidade</h2>
            <p class="mt-1 text-sm text-slate-500">Nome e cor aparecem em todas as telas, inclusive para os clientes.</p>

            <div class="mt-6 grid gap-5 sm:grid-cols-2">
                <div>
                    <label for="site_nome" class="label">Nome do sistema</label>
                    <input id="site_nome" name="site_nome" required maxlength="60"
                           value="{{ old('site_nome', $config['site_nome']) }}"
                           class="input @error('site_nome') input-error @enderror">
                </div>

                <div>
                    <label for="site_descricao" class="label">Descrição curta</label>
                    <input id="site_descricao" name="site_descricao" maxlength="120"
                           value="{{ old('site_descricao', $config['site_descricao']) }}"
                           placeholder="Monitor de XML · SEFAZ" class="input">
                    <p class="mt-1.5 text-xs text-slate-500">Linha de apoio sob o nome, no menu lateral e no topo do login.</p>
                </div>
            </div>

            {{-- Cor e paleta --}}
            <div class="mt-6 border-t border-slate-100 pt-6">
                <label for="cor_primaria" class="label">Cor primária</label>

                <div class="flex flex-wrap items-center gap-3">
                    <input type="color" x-model="cor" aria-label="Seletor de cor"
                           class="h-11 w-14 cursor-pointer rounded-lg border border-slate-300 bg-white p-1">

                    <input id="cor_primaria" name="cor_primaria" x-model="cor" required
                           pattern="#[0-9a-fA-F]{6}" maxlength="7"
                           class="input tabular w-36 uppercase @error('cor_primaria') input-error @enderror">

                    <p class="text-sm text-slate-500">
                        Os onze tons da interface são derivados desta cor — botões, menu lateral, gráficos e destaques.
                    </p>
                </div>

                <div class="mt-5">
                    <p class="mb-2 text-xs font-semibold tracking-wide text-slate-500 uppercase">Prévia da paleta</p>
                    <div class="flex overflow-hidden rounded-lg border border-slate-200">
                        <template x-for="(fator, tom) in escala" :key="tom">
                            <div class="flex-1">
                                <div class="h-12" :style="`background:${derivar(fator)}`"></div>
                                <p class="tabular bg-white py-1 text-center text-[10px] text-slate-500" x-text="tom"></p>
                            </div>
                        </template>
                    </div>

                    <div class="mt-4 flex flex-wrap items-center gap-3">
                        <span class="rounded-lg px-4 py-2 text-sm font-semibold text-white"
                              :style="`background:${derivar(escala[700])}`">Botão primário</span>
                        <span class="rounded-lg px-4 py-2 text-sm font-medium"
                              :style="`background:${derivar(escala[50])};color:${derivar(escala[800])}`">Destaque suave</span>
                        <span class="rounded-lg px-4 py-2 text-sm font-medium text-white"
                              :style="`background:${derivar(escala[950])}`">Menu lateral</span>
                    </div>
                </div>
            </div>
        </section>

        {{-- Imagens --}}
        <section class="card card-pad">
            <h2 class="text-sm font-semibold text-slate-900">Logo e favicon</h2>
            <p class="mt-1 text-sm text-slate-500">
                Os arquivos ficam em diretório privado e são servidos pela aplicação — não dependem de <code class="rounded bg-slate-100 px-1">storage:link</code>.
            </p>

            <div class="mt-6 grid gap-6 lg:grid-cols-3">
                @foreach ($imagens as $input => $img)
                    <div class="rounded-lg border border-slate-200 p-4">
                        <p class="text-sm font-medium text-slate-800">{{ $img['titulo'] }}</p>

                        <div class="mt-3 flex h-24 items-center justify-center rounded-lg {{ $img['fundo'] }} p-3">
                            @if ($config[$img['campo']])
                                <img src="{{ route('marca', $img['rota']) }}?v={{ substr(md5($config[$img['campo']]), 0, 8) }}"
                                     alt="{{ $img['titulo'] }}" class="max-h-full max-w-full object-contain">
                            @else
                                <span class="text-xs {{ $img['fundo'] === 'bg-brand-950' ? 'text-brand-300' : 'text-slate-400' }}">
                                    nenhuma imagem enviada
                                </span>
                            @endif
                        </div>

                        <input type="file" name="{{ $input }}" accept="image/*"
                               class="mt-3 block w-full cursor-pointer rounded-lg border border-slate-300 text-xs text-slate-600
                                      file:mr-3 file:cursor-pointer file:border-0 file:bg-slate-100 file:px-3 file:py-2
                                      file:text-xs file:font-semibold file:text-slate-700 hover:file:bg-slate-200">

                        <p class="mt-2 text-xs text-slate-500">{{ $img['ajuda'] }}</p>

                        @error($input)
                            <p class="mt-1 text-xs text-rose-700">{{ $message }}</p>
                        @enderror
                    </div>
                @endforeach
            </div>
        </section>

        {{-- Tela de login --}}
        <section class="card card-pad">
            <h2 class="text-sm font-semibold text-slate-900">Tela de login e página inicial</h2>
            <p class="mt-1 text-sm text-slate-500">Textos do painel institucional que acompanha o formulário de acesso.</p>

            <div class="mt-6 space-y-5">
                <div>
                    <label for="login_titulo" class="label">Título</label>
                    <input id="login_titulo" name="login_titulo" required maxlength="160"
                           value="{{ old('login_titulo', $config['login_titulo']) }}"
                           class="input @error('login_titulo') input-error @enderror">
                </div>

                <div>
                    <label for="login_subtitulo" class="label">Subtítulo</label>
                    <textarea id="login_subtitulo" name="login_subtitulo" rows="3" maxlength="400"
                              class="input">{{ old('login_subtitulo', $config['login_subtitulo']) }}</textarea>
                </div>

                <div>
                    <label for="login_destaques" class="label">Destaques — um por linha</label>
                    <textarea id="login_destaques" name="login_destaques" rows="5" maxlength="800"
                              class="input">{{ old('login_destaques', $config['login_destaques']) }}</textarea>
                    <p class="mt-1.5 text-xs text-slate-500">Cada linha vira um item com marcador de confirmação. Linhas vazias são ignoradas.</p>
                </div>

                <label class="flex cursor-pointer items-start gap-3">
                    <input type="checkbox" name="login_permitir_cadastro" value="1"
                           @checked(old('login_permitir_cadastro', $config['login_permitir_cadastro']))
                           class="mt-0.5 size-4 cursor-pointer rounded border-slate-300 text-brand-700 focus:ring-brand-500">
                    <span>
                        <span class="block text-sm font-medium text-slate-800">Permitir cadastro público de empresas</span>
                        <span class="block text-sm text-slate-500">
                            Desmarcado, a página de cadastro sai do ar e só você cria empresas pelo painel master.
                        </span>
                    </span>
                </label>
            </div>
        </section>

        {{-- Desenvolvedor e suporte --}}
        <section class="card card-pad">
            <h2 class="text-sm font-semibold text-slate-900">Desenvolvedor e suporte</h2>
            <p class="mt-1 text-sm text-slate-500">Aparecem no rodapé de todas as telas e ao pé da tela de login.</p>

            <div class="mt-6 grid gap-5 sm:grid-cols-2">
                <div>
                    <label for="dev_nome" class="label">Quem desenvolveu</label>
                    <input id="dev_nome" name="dev_nome" maxlength="80"
                           value="{{ old('dev_nome', $config['dev_nome']) }}"
                           placeholder="Sua empresa ou seu nome" class="input">
                </div>

                <div>
                    <label for="dev_site" class="label">Site do desenvolvedor</label>
                    <input id="dev_site" name="dev_site" type="url" maxlength="180"
                           value="{{ old('dev_site', $config['dev_site']) }}"
                           placeholder="https://" class="input @error('dev_site') input-error @enderror">
                </div>

                <div>
                    <label for="dev_email" class="label">E-mail do desenvolvedor</label>
                    <input id="dev_email" name="dev_email" type="email" maxlength="180"
                           value="{{ old('dev_email', $config['dev_email']) }}"
                           class="input @error('dev_email') input-error @enderror">
                </div>

                <div>
                    <label for="dev_telefone" class="label">Telefone do desenvolvedor</label>
                    <input id="dev_telefone" name="dev_telefone" maxlength="30"
                           value="{{ old('dev_telefone', $config['dev_telefone']) }}" class="input tabular">
                </div>

                <div class="sm:col-span-2">
                    <label for="dev_creditos" class="label">Texto de créditos</label>
                    <input id="dev_creditos" name="dev_creditos" maxlength="200"
                           value="{{ old('dev_creditos', $config['dev_creditos']) }}"
                           placeholder="Ex.: Sistema licenciado para uso exclusivo dos clientes." class="input">
                </div>
            </div>

            <div class="mt-6 grid gap-5 border-t border-slate-100 pt-6 sm:grid-cols-3">
                <div>
                    <label for="suporte_email" class="label">E-mail de suporte</label>
                    <input id="suporte_email" name="suporte_email" type="email" maxlength="180"
                           value="{{ old('suporte_email', $config['suporte_email']) }}"
                           class="input @error('suporte_email') input-error @enderror">
                </div>

                <div>
                    <label for="suporte_telefone" class="label">Telefone de suporte</label>
                    <input id="suporte_telefone" name="suporte_telefone" maxlength="30"
                           value="{{ old('suporte_telefone', $config['suporte_telefone']) }}" class="input tabular">
                </div>

                <div>
                    <label for="suporte_whatsapp" class="label">WhatsApp</label>
                    <input id="suporte_whatsapp" name="suporte_whatsapp" maxlength="30"
                           value="{{ old('suporte_whatsapp', $config['suporte_whatsapp']) }}" class="input tabular">
                </div>
            </div>
        </section>

        <div class="flex flex-wrap gap-3">
            <button class="btn-primary">Salvar configurações</button>
            <a href="{{ route('login') }}" target="_blank" rel="noopener" class="btn-secondary">Ver tela de login</a>
        </div>
    </form>

    {{-- Remoção de imagens: formulário próprio, fora do de cima (HTML não aninha forms). --}}
    @if (collect($imagens)->contains(fn ($img) => filled($config[$img['campo']])))
        <div class="card card-pad mt-6">
            <h2 class="text-sm font-semibold text-slate-900">Remover imagens</h2>
            <div class="mt-4 flex flex-wrap gap-2">
                @foreach ($imagens as $img)
                    @if ($config[$img['campo']])
                        <form method="POST" action="{{ route('master.configuracoes.imagem') }}"
                              onsubmit="return confirm('Remover {{ $img['titulo'] }}?')">
                            @csrf @method('DELETE')
                            <input type="hidden" name="campo" value="{{ $img['campo'] }}">
                            <button class="btn-danger btn-sm">Remover {{ $img['titulo'] }}</button>
                        </form>
                    @endif
                @endforeach
            </div>
        </div>
    @endif
</x-layouts.app>
