@extends('adminlte::page')

@section('title', 'Nova Instalação')

@section('content_header')
@stop

@section('content')
@php
    $domainBase = config('gestao.domain_base', 'waygest.com.br');
    $defaultCor1 = old('cor1', '#6C63FF');
    $defaultCor2 = old('cor2', '#2D3142');
    $podeWizard = auth()->check() && auth()->user()->can('gestao-write');
@endphp

@if($podeWizard)
    <script type="application/json" id="provisionamento-wizard-config">
        {!! json_encode([
            'bootstrap' => $wizardBootstrap ?? null,
            'urls' => [
                'passo' => route('instalacoes.web.provisionamento.wizard.passo', ['instalacao' => '__ID__']),
                'finalizar' => route('instalacoes.web.provisionamento.wizard.finalizar', ['instalacao' => '__ID__']),
                'estado' => route('instalacoes.web.provisionamento.wizard.estado', ['instalacao' => '__ID__']),
            ],
        ], JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP) !!}
    </script>
    @include('instalacoes.partials.provisionamento-wizard-modal')
@endif

<div class="dashboard-page dashboard-stagger">
    {{-- Hero --}}
    <section class="dashboard-hero">
        <div class="dashboard-hero__inner">
            <div>
                <p class="dashboard-hero__eyebrow">Provisionamento</p>
                <h1 class="dashboard-hero__title">
                    Nova <em>instalação</em>
                </h1>
                <p class="dashboard-hero__subtitle">
                    Configure identidade, domínio e parâmetros iniciais. O sistema provisionará banco, ambiente e deploy conforme o fluxo automatizado.
                </p>
            </div>
            <div class="dashboard-hero__actions">
                <a href="{{ route('instalacoes.web.index') }}" class="btn-dashboard-hero btn-dashboard-hero--ghost">
                    <i class="fas fa-arrow-left" aria-hidden="true"></i>
                    Voltar à lista
                </a>
            </div>
        </div>
    </section>

    @if(session('error'))
        <div class="formulario-alert formulario-alert--danger" role="alert">
            <i class="fas fa-times-circle" aria-hidden="true"></i>
            <span>{{ session('error') }}</span>
        </div>
    @endif

    @if(session('warning'))
        <div class="formulario-alert formulario-alert--warning" role="alert">
            <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
            <span>{{ session('warning') }}</span>
        </div>
    @endif

    @if($errors->any())
        <div class="formulario-alert formulario-alert--danger" role="alert">
            <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
            <div>
                <strong>Corrija os erros abaixo antes de continuar:</strong>
                <ul>
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    @php
        $passosProvisionamento = $passos ?? session('criacao_passos', []);
    @endphp
    @if(! $podeWizard)
        @include('instalacoes.partials.provisionamento-passos', [
            'passos' => $passosProvisionamento,
            'instalacaoProvisionamento' => $instalacaoPendente ?? null,
            'mostrarDetalhes' => (bool) session('mostrar_detalhes_provisionamento', false),
        ])
    @endif

    <form action="{{ route('instalacoes.web.store') }}" method="POST" id="form-nova-instalacao" data-formulario-instalacao enctype="multipart/form-data" @if($podeWizard) data-provisionamento-wizard @endif>
        @csrf

        <div class="formulario-layout">
            <div class="formulario-main">
                {{-- Identificação --}}
                <section class="formulario-section" aria-labelledby="sec-identificacao">
                    <div class="formulario-section__header">
                        <span class="formulario-section__icon formulario-section__icon--purple">
                            <i class="fas fa-building" aria-hidden="true"></i>
                        </span>
                        <div>
                            <h2 class="formulario-section__title" id="sec-identificacao">Identificação</h2>
                            <p class="formulario-section__subtitle">Nome comercial e endereço do tenant</p>
                        </div>
                    </div>
                    <div class="formulario-section__body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="formulario-field">
                                    <label for="nome">Nome da instalação <span class="formulario-required">*</span></label>
                                    <input type="text"
                                           class="form-control @error('nome') is-invalid @enderror"
                                           id="nome" name="nome"
                                           value="{{ old('nome', $instalacaoPendente->nome ?? '') }}"
                                           placeholder="Ex.: Empresa do Cliente"
                                           required
                                           autocomplete="organization">
                                    <span class="formulario-field__hint">Título exibido no painel e comunicações whitelabel.</span>
                                    @error('nome')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="formulario-field">
                                    <label for="slug">Slug / subdomínio <span class="formulario-required">*</span></label>
                                    <div class="formulario-domain-input @error('slug') is-invalid @enderror">
                                        <input type="text"
                                               class="form-control @error('slug') is-invalid @enderror"
                                               id="slug" name="slug"
                                               value="{{ old('slug', $instalacaoPendente->slug ?? '') }}"
                                               placeholder="cliente-alpha"
                                               pattern="[a-z0-9-]+"
                                               required
                                               @if(isset($instalacaoPendente)) readonly @endif
                                               autocomplete="off"
                                               aria-describedby="slug-hint">
                                        <span class="formulario-domain-input__suffix">.{{ $domainBase }}</span>
                                    </div>
                                    <span class="formulario-field__hint" id="slug-hint">
                                        URL: <span class="formulario-preview-value" id="slug-preview">{{ old('slug', $instalacaoPendente->slug ?? 'slug') }}.{{ $domainBase }}</span>
                                    </span>
                                    @error('slug')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {{-- Identidade visual --}}
                <section class="formulario-section" aria-labelledby="sec-visual">
                    <div class="formulario-section__header">
                        <span class="formulario-section__icon formulario-section__icon--orange">
                            <i class="fas fa-palette" aria-hidden="true"></i>
                        </span>
                        <div>
                            <h2 class="formulario-section__title" id="sec-visual">Identidade visual</h2>
                            <p class="formulario-section__subtitle">Cores, logo e favicon da instalação whitelabel</p>
                        </div>
                    </div>
                    <div class="formulario-section__body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="formulario-field">
                                    <label for="cor1">Cor primária <span class="formulario-required">*</span></label>
                                    <div class="formulario-color-row">
                                        <input type="color" id="cor1" name="cor1" value="{{ $defaultCor1 }}" required aria-label="Seletor cor primária">
                                        <input type="text" class="form-control @error('cor1') is-invalid @enderror"
                                               id="cor1_hex" value="{{ $defaultCor1 }}"
                                               placeholder="#6C63FF" pattern="^#[0-9A-Fa-f]{6}$"
                                               aria-label="Hex cor primária">
                                    </div>
                                    @error('cor1')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="formulario-field">
                                    <label for="cor2">Cor secundária <span class="formulario-required">*</span></label>
                                    <div class="formulario-color-row">
                                        <input type="color" id="cor2" name="cor2" value="{{ $defaultCor2 }}" required aria-label="Seletor cor secundária">
                                        <input type="text" class="form-control @error('cor2') is-invalid @enderror"
                                               id="cor2_hex" value="{{ $defaultCor2 }}"
                                               placeholder="#2D3142" pattern="^#[0-9A-Fa-f]{6}$"
                                               aria-label="Hex cor secundária">
                                    </div>
                                    @error('cor2')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row mt-2">
                            <div class="col-md-6">
                                <div class="formulario-field">
                                    <label for="logo">Logo</label>
                                    <div class="formulario-file-zone" data-file-zone="logo">
                                        <input type="file"
                                               class="formulario-file-zone__input @error('logo') is-invalid @enderror"
                                               id="logo"
                                               name="logo"
                                               accept=".png,.jpg,.jpeg,.webp,image/png,image/jpeg,image/webp"
                                               aria-describedby="logo-hint">
                                        <div class="formulario-file-zone__content">
                                            <i class="fas fa-image formulario-file-zone__icon" aria-hidden="true"></i>
                                            <span class="formulario-file-zone__label">Clique ou arraste a logo</span>
                                            <span class="formulario-file-zone__filename" data-file-name="logo">Nenhum arquivo</span>
                                        </div>
                                    </div>
                                    <span class="formulario-field__hint" id="logo-hint">PNG, JPG ou WebP · máx. {{ (int) config('gestao.branding.logo_max_kb', 2048) }} KB · recomendado fundo transparente</span>
                                    @error('logo')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="formulario-field">
                                    <label for="favicon">Favicon</label>
                                    <div class="formulario-file-zone" data-file-zone="favicon">
                                        <input type="file"
                                               class="formulario-file-zone__input @error('favicon') is-invalid @enderror"
                                               id="favicon"
                                               name="favicon"
                                               accept=".png,.jpg,.jpeg,.webp,.ico,image/png,image/jpeg,image/webp,image/x-icon,image/vnd.microsoft.icon"
                                               aria-describedby="favicon-hint">
                                        <div class="formulario-file-zone__content">
                                            <i class="fas fa-star formulario-file-zone__icon" aria-hidden="true"></i>
                                            <span class="formulario-file-zone__label">Clique ou arraste o favicon</span>
                                            <span class="formulario-file-zone__filename" data-file-name="favicon">Nenhum arquivo</span>
                                        </div>
                                    </div>
                                    <span class="formulario-field__hint" id="favicon-hint">PNG, JPG, WebP ou ICO · máx. {{ (int) config('gestao.branding.favicon_max_kb', 512) }} KB · ideal 32×32 ou 64×64 px</span>
                                    @error('favicon')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {{-- Configuração --}}
                <section class="formulario-section" aria-labelledby="sec-config">
                    <div class="formulario-section__header">
                        <span class="formulario-section__icon formulario-section__icon--purple">
                            <i class="fas fa-cog" aria-hidden="true"></i>
                        </span>
                        <div>
                            <h2 class="formulario-section__title" id="sec-config">Configuração</h2>
                            <p class="formulario-section__subtitle">Estado inicial e versão do produto</p>
                        </div>
                    </div>
                    <div class="formulario-section__body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="formulario-field">
                                    <label for="status">Status <span class="formulario-required">*</span></label>
                                    <select class="form-control @error('status') is-invalid @enderror" id="status" name="status" required>
                                        <option value="ativa" {{ old('status', 'ativa') == 'ativa' ? 'selected' : '' }}>Ativa</option>
                                        <option value="inativa" {{ old('status') == 'inativa' ? 'selected' : '' }}>Inativa</option>
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="formulario-field">
                                    <label for="versao">Versão</label>
                                    <input type="text" class="form-control @error('versao') is-invalid @enderror"
                                           id="versao" name="versao" value="{{ old('versao', '1.0.0') }}"
                                           placeholder="1.0.0">
                                    <span class="formulario-field__hint">Versão do pacote WayGest a provisionar.</span>
                                    @error('versao')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {{-- Avançado --}}
                <section class="formulario-section" aria-labelledby="sec-avancado">
                    <div class="formulario-section__header">
                        <button type="button"
                                class="formulario-advanced-toggle"
                                id="toggle-avancado"
                                aria-expanded="false"
                                aria-controls="panel-avancado">
                            <span class="d-flex align-items-center gap-2">
                                <span class="formulario-section__icon formulario-section__icon--neutral mb-0">
                                    <i class="fas fa-database" aria-hidden="true"></i>
                                </span>
                                <span>
                                    <span class="formulario-section__title d-block" id="sec-avancado">Banco de dados</span>
                                    <span class="formulario-section__subtitle">Opcional — valores gerados automaticamente se vazios</span>
                                </span>
                            </span>
                            <i class="fas fa-chevron-down formulario-advanced-toggle__chevron" aria-hidden="true"></i>
                        </button>
                    </div>
                    <div class="collapse" id="panel-avancado">
                        <div class="formulario-section__body formulario-advanced-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="formulario-field">
                                        <label for="database_name">Nome do banco</label>
                                        <input type="text" class="form-control @error('database_name') is-invalid @enderror"
                                               id="database_name" name="database_name"
                                               value="{{ old('database_name') }}"
                                               placeholder="waygest_slug"
                                               autocomplete="off">
                                        <span class="formulario-field__hint">Sugerido: <strong>waygest_<span id="db-name-preview">slug</span></strong></span>
                                        @error('database_name')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="formulario-field">
                                        <label for="database_username">Usuário do banco</label>
                                        <input type="text" class="form-control @error('database_username') is-invalid @enderror"
                                               id="database_username" name="database_username"
                                               value="{{ old('database_username') }}"
                                               placeholder="waygest_slug"
                                               autocomplete="off">
                                        <span class="formulario-field__hint">Sugerido: <strong>waygest_<span id="db-user-preview">slug</span></strong></span>
                                        @error('database_username')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="formulario-field">
                                <label for="database_password">Senha do banco</label>
                                <div class="formulario-password-row">
                                    <input type="password" class="form-control @error('database_password') is-invalid @enderror"
                                           id="database_password" name="database_password"
                                           value="{{ old('database_password') }}"
                                           placeholder="Deixe vazio para gerar automaticamente"
                                           autocomplete="new-password">
                                    <button type="button" class="btn-form-icon" id="btn-gerar-senha" title="Gerar senha aleatória">
                                        <i class="fas fa-key" aria-hidden="true"></i>
                                        Gerar
                                    </button>
                                </div>
                                <span class="formulario-field__hint">Deixe vazio para o servidor gerar uma senha segura.</span>
                                @error('database_password')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </section>

                <div class="formulario-actions">
                    <button type="submit" class="btn-listagem btn-listagem--primary" data-submit-btn>
                        <i class="fas fa-rocket" aria-hidden="true"></i>
                        Provisionar instalação
                    </button>
                    <a href="{{ route('instalacoes.web.index') }}" class="btn-listagem btn-listagem--ghost">
                        Cancelar
                    </a>
                </div>
            </div>

            {{-- Preview lateral --}}
            <aside class="formulario-preview" aria-label="Pré-visualização">
                <div class="formulario-preview-card">
                    <div class="formulario-preview-card__header">
                        <i class="fas fa-globe" aria-hidden="true"></i>
                        Domínio
                    </div>
                    <div class="formulario-preview-card__body">
                        <div class="formulario-preview-domain" id="preview-domain">
                            <i class="fas fa-link" aria-hidden="true"></i>
                            <span id="preview-domain-text">{{ old('slug', 'slug') }}.{{ $domainBase }}</span>
                        </div>
                    </div>
                </div>

                <div class="formulario-preview-card">
                    <div class="formulario-preview-card__header">
                        <i class="fas fa-palette" aria-hidden="true"></i>
                        Cores
                    </div>
                    <div class="formulario-preview-card__body">
                        <div class="formulario-preview-colors">
                            <div class="formulario-preview-swatch">
                                <div class="formulario-preview-swatch__box" id="preview-cor1" style="background: {{ $defaultCor1 }}"></div>
                                <div class="formulario-preview-swatch__label">Primária</div>
                                <div class="formulario-preview-swatch__hex" id="preview-cor1-hex">{{ $defaultCor1 }}</div>
                            </div>
                            <div class="formulario-preview-swatch">
                                <div class="formulario-preview-swatch__box" id="preview-cor2" style="background: {{ $defaultCor2 }}"></div>
                                <div class="formulario-preview-swatch__label">Secundária</div>
                                <div class="formulario-preview-swatch__hex" id="preview-cor2-hex">{{ $defaultCor2 }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="formulario-preview-card">
                    <div class="formulario-preview-card__header">
                        <i class="fas fa-image" aria-hidden="true"></i>
                        Marca
                    </div>
                    <div class="formulario-preview-card__body">
                        <div class="formulario-preview-brand">
                            <div class="formulario-preview-brand__item">
                                <span class="formulario-preview-brand__label">Logo</span>
                                <div class="formulario-preview-brand__logo" id="preview-logo">
                                    <i class="fas fa-image text-muted" aria-hidden="true"></i>
                                    <span class="text-muted small">Sem logo</span>
                                </div>
                            </div>
                            <div class="formulario-preview-brand__item">
                                <span class="formulario-preview-brand__label">Favicon</span>
                                <div class="formulario-preview-brand__favicon" id="preview-favicon">
                                    <i class="fas fa-star text-muted" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="formulario-preview-card">
                    <div class="formulario-preview-card__header">
                        <i class="fas fa-tasks" aria-hidden="true"></i>
                        O que será feito
                    </div>
                    <div class="formulario-preview-card__body">
                        <ul class="formulario-checklist">
                            <li><i class="fas fa-check" aria-hidden="true"></i> Registro da instalação no gestor central</li>
                            <li><i class="fas fa-check" aria-hidden="true"></i> Criação do banco de dados dedicado</li>
                            <li><i class="fas fa-check" aria-hidden="true"></i> Geração do arquivo de ambiente (.env)</li>
                            <li><i class="fas fa-check" aria-hidden="true"></i> Migrations e seeder de produção na API</li>
                            <li><i class="fas fa-check" aria-hidden="true"></i> Cron e identidade visual (se aplicável)</li>
                        </ul>
                    </div>
                </div>
            </aside>
        </div>
    </form>
</div>
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/adminlte-inter.css') }}">
    <link rel="stylesheet" href="{{ asset('css/waygest-colors.css') }}">
    <link rel="stylesheet" href="{{ asset('css/dashboard.css') }}">
    <link rel="stylesheet" href="{{ asset('css/waygest-listagem.css') }}">
    <link rel="stylesheet" href="{{ asset('css/waygest-formulario.css') }}">
    @if($podeWizard)
        <link rel="stylesheet" href="{{ asset('css/instalacao-provisionamento-wizard.css') }}">
    @endif
@stop

@section('js')
@if($podeWizard)
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <script src="{{ asset('js/instalacao-provisionamento-wizard.js') }}"></script>
@endif
<script>
document.addEventListener('DOMContentLoaded', function () {
    const domainBase = @json($domainBase);

    function syncColor(pickerId, hexId, previewBoxId, previewHexId) {
        const picker = document.getElementById(pickerId);
        const hex = document.getElementById(hexId);
        const previewBox = previewBoxId ? document.getElementById(previewBoxId) : null;
        const previewHex = previewHexId ? document.getElementById(previewHexId) : null;

        function apply(value) {
            if (previewBox) previewBox.style.background = value;
            if (previewHex) previewHex.textContent = value;
        }

        picker.addEventListener('input', function () {
            hex.value = this.value;
            apply(this.value);
        });

        hex.addEventListener('input', function () {
            if (/^#[0-9A-Fa-f]{6}$/.test(this.value)) {
                picker.value = this.value;
                apply(this.value);
            }
        });
    }

    syncColor('cor1', 'cor1_hex', 'preview-cor1', 'preview-cor1-hex');
    syncColor('cor2', 'cor2_hex', 'preview-cor2', 'preview-cor2-hex');

    function atualizarSugestaoBanco() {
        const slug = document.getElementById('slug').value.trim() || '';
        const sugestao = slug ? 'waygest_' + slug : '';
        const domain = (slug || 'slug') + '.' + domainBase;

        document.getElementById('slug-preview').textContent = domain;
        document.getElementById('preview-domain-text').textContent = domain;
        document.getElementById('db-name-preview').textContent = slug || 'slug';
        document.getElementById('db-user-preview').textContent = slug || 'slug';

        if (sugestao) {
            document.getElementById('database_name').value = sugestao;
            document.getElementById('database_username').value = sugestao;
        }
    }

    document.getElementById('slug').addEventListener('input', atualizarSugestaoBanco);

    document.getElementById('nome').addEventListener('input', function () {
        const nome = this.value;
        if (nome.trim()) {
            const slug = nome.toLowerCase()
                .replace(/[^a-z0-9\s-]/g, '')
                .replace(/\s+/g, '-')
                .replace(/-+/g, '-')
                .replace(/^-+|-+$/g, '')
                .trim();
            document.getElementById('slug').value = slug;
            atualizarSugestaoBanco();
        }
    });

    document.getElementById('btn-gerar-senha').addEventListener('click', function () {
        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%&*';
        let senha = '';
        const array = new Uint8Array(32);
        crypto.getRandomValues(array);
        for (let i = 0; i < 32; i++) {
            senha += chars[array[i] % chars.length];
        }
        const input = document.getElementById('database_password');
        input.type = 'text';
        input.value = senha;
    });

    const toggleAvancado = document.getElementById('toggle-avancado');
    const panelAvancado = document.getElementById('panel-avancado');
    const hasDbErrors = @json($errors->hasAny(['database_name', 'database_username', 'database_password']));

    if (toggleAvancado && panelAvancado) {
        toggleAvancado.addEventListener('click', function () {
            const expanded = panelAvancado.classList.toggle('show');
            this.setAttribute('aria-expanded', expanded ? 'true' : 'false');
        });
        if (hasDbErrors || @json(old('database_name') || old('database_username') || old('database_password'))) {
            panelAvancado.classList.add('show');
            toggleAvancado.setAttribute('aria-expanded', 'true');
        }
    }

    const form = document.querySelector('[data-formulario-instalacao]');
    const submitBtn = document.querySelector('[data-submit-btn]');
    if (form && submitBtn && !form.hasAttribute('data-provisionamento-wizard')) {
        form.addEventListener('submit', function () {
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin" aria-hidden="true"></i> Provisionando…';
        });
    }

    function bindFileZone(inputId, previewId, isFavicon) {
        const input = document.getElementById(inputId);
        const zone = input ? input.closest('[data-file-zone]') : null;
        const nameEl = zone ? zone.querySelector('[data-file-name="' + inputId + '"]') : null;
        const previewEl = document.getElementById(previewId);

        if (!input || !zone || !previewEl) return;

        function renderPreview(file) {
            if (!file || !file.type.startsWith('image/')) {
                return;
            }
            const reader = new FileReader();
            reader.onload = function (e) {
                previewEl.innerHTML = '';
                const img = document.createElement('img');
                img.src = e.target.result;
                img.alt = inputId === 'logo' ? 'Pré-visualização da logo' : 'Pré-visualização do favicon';
                previewEl.appendChild(img);
            };
            reader.readAsDataURL(file);
        }

        function resetPreview() {
            if (isFavicon) {
                previewEl.innerHTML = '<i class="fas fa-star text-muted" aria-hidden="true"></i>';
            } else {
                previewEl.innerHTML = '<i class="fas fa-image text-muted" aria-hidden="true"></i><span class="text-muted small">Sem logo</span>';
            }
        }

        input.addEventListener('change', function () {
            const file = this.files && this.files[0];
            if (nameEl) {
                nameEl.textContent = file ? file.name : 'Nenhum arquivo';
            }
            zone.classList.toggle('is-filled', !!file);
            if (file) {
                renderPreview(file);
            } else {
                resetPreview();
            }
        });

        ['dragenter', 'dragover'].forEach(function (evt) {
            zone.addEventListener(evt, function (e) {
                e.preventDefault();
                zone.classList.add('is-dragover');
            });
        });

        ['dragleave', 'drop'].forEach(function (evt) {
            zone.addEventListener(evt, function (e) {
                e.preventDefault();
                zone.classList.remove('is-dragover');
            });
        });

        zone.addEventListener('drop', function (e) {
            const file = e.dataTransfer.files && e.dataTransfer.files[0];
            if (!file) return;
            const dt = new DataTransfer();
            dt.items.add(file);
            input.files = dt.files;
            input.dispatchEvent(new Event('change', { bubbles: true }));
        });
    }

    bindFileZone('logo', 'preview-logo', false);
    bindFileZone('favicon', 'preview-favicon', true);

    atualizarSugestaoBanco();
});
</script>
@stop