@extends('admin.layouts.app')

@section('title', 'Configurações do Sistema')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h1 class="h3 mb-0">
                        <i class="fas fa-cogs text-primary"></i>
                        Configurações do Sistema
                    </h1>
                    <p class="text-muted">Centralize todas as configurações em um só lugar</p>
                </div>
                <div class="btn-group">
                    <button class="btn btn-outline-secondary" onclick="configuracaoSystem.fazerBackup()">
                        <i class="fas fa-download"></i> Backup
                    </button>
                    <button class="btn btn-outline-primary" onclick="configuracaoSystem.carregarConfiguracoes()">
                        <i class="fas fa-sync"></i> Atualizar
                    </button>
                    <button class="btn btn-success" onclick="configuracaoSystem.salvarTodas()">
                        <i class="fas fa-save"></i> Salvar Todas
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Cards de Status -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="mb-0" id="totalConfiguracoes">-</h4>
                            <small>Total de Configurações</small>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-cog fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="mb-0" id="configuracoesAtivas">-</h4>
                            <small>Configurações Ativas</small>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-check-circle fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="mb-0" id="configuracoesPendentes">-</h4>
                            <small>Pendentes</small>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-clock fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="mb-0" id="percentualCompleto">-</h4>
                            <small>% Completo</small>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-percentage fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Navegação por Abas -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs" id="configTabs" role="tablist">
                        <!-- Abas serão carregadas via JavaScript -->
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="configTabContent">
                        <!-- Conteúdo das abas será carregado via JavaScript -->
                        <div class="text-center p-4">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Carregando...</span>
                            </div>
                            <p class="mt-2 text-muted">Carregando configurações...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Histórico de Alterações -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-history text-info"></i>
                        Histórico de Alterações
                    </h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Data</th>
                                    <th>Usuário</th>
                                    <th>Seção</th>
                                    <th>Alteração</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody id="historicoAlteracoes">
                                <tr>
                                    <td colspan="5" class="text-center text-muted">
                                        Nenhum histórico disponível
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Confirmação -->
<div class="modal fade" id="modalConfirmacao" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirmar Ação</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p id="mensagemConfirmacao"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" id="btnConfirmarAcao">Confirmar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Upload -->
<div class="modal fade" id="modalUpload" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Upload de Arquivo</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="formUpload">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="tipoArquivo" class="form-label">Tipo de Arquivo</label>
                        <select class="form-select" id="tipoArquivo" required>
                            <option value="">Selecione o tipo</option>
                            <option value="logo">Logo do Sistema</option>
                            <option value="favicon">Favicon</option>
                            <option value="avatar">Avatar Padrão</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="arquivo" class="form-label">Arquivo</label>
                        <input type="file" class="form-control" id="arquivo" accept="image/*" required>
                        <small class="text-muted">Formatos aceitos: PNG, JPG, JPEG, GIF, WebP. Tamanho máximo: 2MB</small>
                    </div>
                    <div id="previewArquivo" class="text-center d-none">
                        <img id="imgPreview" class="img-thumbnail" style="max-width: 200px; max-height: 200px;">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-upload"></i> Upload
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Sistema de Configurações Centralizado
const configuracaoSystem = {
    configuracoes: {},
    categorias: {},
    modificacoes: new Set(),
    loading: false,

    async init() {
        await this.carregarConfiguracoes();
        this.bindEvents();
    },

    bindEvents() {
        // Upload de arquivo
        document.getElementById('arquivo').addEventListener('change', this.previewArquivo.bind(this));
        document.getElementById('formUpload').addEventListener('submit', this.uploadArquivo.bind(this));

        // Auto-save em tempo real
        setInterval(() => {
            if (this.modificacoes.size > 0) {
                this.salvarAlteracoesAutomaticas();
            }
        }, 30000); // Auto-save a cada 30 segundos
    },

    async carregarConfiguracoes() {
        try {
            this.loading = true;
            const response = await fetch('/admin/configuracoes');
            const data = await response.json();
            
            if (data.success) {
                this.configuracoes = data.configuracoes;
                this.categorias = data.categorias;
                this.renderizarAbas();
                this.atualizarCards();
                this.carregarHistorico();
            }
        } catch (error) {
            console.error('Erro ao carregar configurações:', error);
            this.mostrarErro('Erro ao carregar configurações');
        } finally {
            this.loading = false;
        }
    },

    renderizarAbas() {
        const tabsContainer = document.getElementById('configTabs');
        const contentContainer = document.getElementById('configTabContent');

        // Criar abas
        const tabsHtml = Object.entries(this.categorias).map(([key, categoria], index) => `
            <li class="nav-item" role="presentation">
                <button class="nav-link ${index === 0 ? 'active' : ''}" 
                        id="${key}-tab" 
                        data-bs-toggle="tab" 
                        data-bs-target="#${key}" 
                        type="button" role="tab">
                    <i class="${categoria.icon}"></i>
                    ${categoria.name}
                </button>
            </li>
        `).join('');

        tabsContainer.innerHTML = tabsHtml;

        // Criar conteúdo das abas
        const contentHtml = Object.entries(this.categorias).map(([key, categoria], index) => `
            <div class="tab-pane fade ${index === 0 ? 'show active' : ''}" 
                 id="${key}" role="tabpanel">
                ${this.renderizarConteudoAba(key, categoria)}
            </div>
        `).join('');

        contentContainer.innerHTML = contentHtml;

        // Adicionar event listeners para salvar
        this.adicionarEventListenersInputs();
    },

    renderizarConteudoAba(categoria, info) {
        const configs = this.configuracoes[categoria] || {};
        
        let html = `
            <div class="row">
                <div class="col-12 mb-3">
                    <h6>
                        <i class="${info.icon} text-primary"></i>
                        ${info.name}
                        <small class="text-muted">- ${info.description}</small>
                    </h6>
                </div>
        `;

        switch (categoria) {
            case 'sistema':
                html += this.renderizarConfiguracoesSistema(configs);
                break;
            case 'email':
                html += this.renderizarConfiguracoesEmail(configs);
                break;
            case 'pagamento':
                html += this.renderizarConfiguracoesPagamento(configs);
                break;
            case 'whatsapp':
                html += this.renderizarConfiguracoesWhatsApp(configs);
                break;
            case 'gps':
                html += this.renderizarConfiguracoesGPS(configs);
                break;
            case 'pwa':
                html += this.renderizarConfiguracoesPWA(configs);
                break;
            case 'delivery':
                html += this.renderizarConfiguracoesDelivery(configs);
                break;
            default:
                html += '<div class="col-12 text-muted">Configuração em desenvolvimento</div>';
        }

        html += `
            <div class="col-12 mt-3">
                <button class="btn btn-primary" onclick="configuracaoSystem.salvarCategoria('${categoria}')">
                    <i class="fas fa-save"></i> Salvar ${info.name}
                </button>
                <button class="btn btn-outline-secondary ms-2" onclick="configuracaoSystem.reverterCategoria('${categoria}')">
                    <i class="fas fa-undo"></i> Reverter
                </button>
            </div>
        </div>`;

        return html;
    },

    renderizarConfiguracoesSistema(configs) {
        return `
            <div class="col-md-6">
                <div class="mb-3">
                    <label class="form-label">Nome do Sistema</label>
                    <input type="text" class="form-control config-input" 
                           data-categoria="sistema" data-chave="nome" 
                           value="${configs.nome || ''}">
                </div>
                <div class="mb-3">
                    <label class="form-label">Ambiente</label>
                    <select class="form-select config-input" data-categoria="sistema" data-chave="ambiente">
                        <option value="local" ${configs.ambiente === 'local' ? 'selected' : ''}>Local</option>
                        <option value="staging" ${configs.ambiente === 'staging' ? 'selected' : ''}>Staging</option>
                        <option value="production" ${configs.ambiente === 'production' ? 'selected' : ''}>Produção</option>
                    </select>
                </div>
            </div>
            <div class="col-md-6">
                <div class="mb-3">
                    <label class="form-label">Debug</label>
                    <div class="form-check form-switch">
                        <input class="form-check-input config-input" type="checkbox" 
                               data-categoria="sistema" data-chave="debug"
                               ${configs.debug ? 'checked' : ''}>
                        <label class="form-check-label">Ativar debug</label>
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Timezone</label>
                    <select class="form-select config-input" data-categoria="sistema" data-chave="timezone">
                        <option value="America/Sao_Paulo" ${configs.timezone === 'America/Sao_Paulo' ? 'selected' : ''}>America/Sao_Paulo</option>
                        <option value="America/New_York" ${configs.timezone === 'America/New_York' ? 'selected' : ''}>America/New_York</option>
                        <option value="Europe/London" ${configs.timezone === 'Europe/London' ? 'selected' : ''}>Europe/London</option>
                    </select>
                </div>
            </div>
        `;
    },

    renderizarConfiguracoesEmail(configs) {
        return `
            <div class="col-md-6">
                <div class="mb-3">
                    <label class="form-label">Host SMTP</label>
                    <input type="text" class="form-control config-input" 
                           data-categoria="email" data-chave="host" 
                           value="${configs.host || ''}">
                </div>
                <div class="mb-3">
                    <label class="form-label">Porta</label>
                    <input type="number" class="form-control config-input" 
                           data-categoria="email" data-chave="port" 
                           value="${configs.port || ''}">
                </div>
                <div class="mb-3">
                    <label class="form-label">Usuário</label>
                    <input type="email" class="form-control config-input" 
                           data-categoria="email" data-chave="username" 
                           value="${configs.username || ''}">
                </div>
            </div>
            <div class="col-md-6">
                <div class="mb-3">
                    <label class="form-label">Senha</label>
                    <input type="password" class="form-control config-input" 
                           data-categoria="email" data-chave="password" 
                           value="${configs.password || ''}">
                </div>
                <div class="mb-3">
                    <label class="form-label">Email Remetente</label>
                    <input type="email" class="form-control config-input" 
                           data-categoria="email" data-chave="from_address" 
                           value="${configs.from_address || ''}">
                </div>
                <div class="mb-3">
                    <label class="form-label">Nome Remetente</label>
                    <input type="text" class="form-control config-input" 
                           data-categoria="email" data-chave="from_name" 
                           value="${configs.from_name || ''}">
                </div>
            </div>
            <div class="col-12">
                <button type="button" class="btn btn-outline-info" onclick="configuracaoSystem.testarEmail()">
                    <i class="fas fa-paper-plane"></i> Testar Configuração
                </button>
            </div>
        `;
    },

    renderizarConfiguracoesPagamento(configs) {
        return `
            <div class="col-md-6">
                <div class="mb-3">
                    <label class="form-label">Chave Pública MercadoPago</label>
                    <input type="text" class="form-control config-input" 
                           data-categoria="pagamento" data-chave="mercadopago_public_key" 
                           value="${configs.mercadopago_public_key || ''}">
                </div>
                <div class="mb-3">
                    <label class="form-label">Ambiente</label>
                    <select class="form-select config-input" data-categoria="pagamento" data-chave="mercadopago_environment">
                        <option value="sandbox" ${configs.mercadopago_environment === 'sandbox' ? 'selected' : ''}>Sandbox</option>
                        <option value="production" ${configs.mercadopago_environment === 'production' ? 'selected' : ''}>Produção</option>
                    </select>
                </div>
            </div>
            <div class="col-md-6">
                <div class="mb-3">
                    <label class="form-label">Métodos Habilitados</label>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="pix" 
                               ${configs.methods_enabled?.includes('pix') ? 'checked' : ''}>
                        <label class="form-check-label">PIX</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="cartao_credito" 
                               ${configs.methods_enabled?.includes('cartao_credito') ? 'checked' : ''}>
                        <label class="form-check-label">Cartão de Crédito</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="cartao_debito" 
                               ${configs.methods_enabled?.includes('cartao_debito') ? 'checked' : ''}>
                        <label class="form-check-label">Cartão de Débito</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="dinheiro" 
                               ${configs.methods_enabled?.includes('dinheiro') ? 'checked' : ''}>
                        <label class="form-check-label">Dinheiro</label>
                    </div>
                </div>
            </div>
        `;
    },

    renderizarConfiguracoesWhatsApp(configs) {
        return `
            <div class="col-md-6">
                <div class="mb-3">
                    <label class="form-label">URL Evolution API</label>
                    <input type="url" class="form-control config-input" 
                           data-categoria="whatsapp" data-chave="evolution_api_url" 
                           value="${configs.evolution_api_url || ''}">
                </div>
                <div class="mb-3">
                    <label class="form-label">Instância</label>
                    <input type="text" class="form-control config-input" 
                           data-categoria="whatsapp" data-chave="evolution_api_instance" 
                           value="${configs.evolution_api_instance || ''}">
                </div>
            </div>
            <div class="col-md-6">
                <div class="mb-3">
                    <label class="form-label">Número WhatsApp</label>
                    <input type="tel" class="form-control config-input" 
                           data-categoria="whatsapp" data-chave="evolution_api_number" 
                           value="${configs.evolution_api_number || ''}">
                </div>
                <div class="mb-3">
                    <div class="form-check form-switch">
                        <input class="form-check-input config-input" type="checkbox" 
                               data-categoria="whatsapp" data-chave="enabled"
                               ${configs.enabled ? 'checked' : ''}>
                        <label class="form-check-label">WhatsApp Ativo</label>
                    </div>
                </div>
            </div>
        `;
    },

    renderizarConfiguracoesGPS(configs) {
        return `
            <div class="col-md-6">
                <div class="mb-3">
                    <label class="form-label">Provedor de Localização</label>
                    <select class="form-select config-input" data-categoria="gps" data-chave="provider">
                        <option value="osm" ${configs.provider === 'osm' ? 'selected' : ''}>OpenStreetMaps (Gratuito)</option>
                        <option value="google" ${configs.provider === 'google' ? 'selected' : ''}>Google Maps</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">URL Tile OpenStreetMaps</label>
                    <input type="url" class="form-control config-input" 
                           data-categoria="gps" data-chave="osm_tile_url" 
                           value="${configs.osm_tile_url || ''}">
                </div>
            </div>
            <div class="col-md-6">
                <div class="mb-3">
                    <label class="form-label">API Key Google Maps</label>
                    <input type="text" class="form-control config-input" 
                           data-categoria="gps" data-chave="google_maps_api_key" 
                           value="${configs.google_maps_api_key || ''}">
                </div>
                <div class="mb-3">
                    <div class="form-check form-switch">
                        <input class="form-check-input config-input" type="checkbox" 
                               data-categoria="gps" data-chave="enabled"
                               ${configs.enabled ? 'checked' : ''}>
                        <label class="form-check-label">GPS Ativo</label>
                    </div>
                </div>
            </div>
        `;
    },

    renderizarConfiguracoesPWA(configs) {
        return `
            <div class="col-md-6">
                <div class="mb-3">
                    <label class="form-label">Chave Pública VAPID</label>
                    <textarea class="form-control config-input" rows="3" 
                              data-categoria="pwa" data-chave="vapid_public_key">${configs.vapid_public_key || ''}</textarea>
                </div>
                <div class="mb-3">
                    <label class="form-label">Chave Privada VAPID</label>
                    <textarea class="form-control config-input" rows="3" 
                              data-categoria="pwa" data-chave="vapid_private_key">${configs.vapid_private_key || ''}</textarea>
                </div>
            </div>
            <div class="col-md-6">
                <div class="mb-3">
                    <label class="form-label">Sujeito VAPID</label>
                    <input type="email" class="form-control config-input" 
                           data-categoria="pwa" data-chave="vapid_subject" 
                           value="${configs.vapid_subject || ''}">
                </div>
                <div class="mb-3">
                    <div class="form-check form-switch">
                        <input class="form-check-input config-input" type="checkbox" 
                               data-categoria="pwa" data-chave="enabled"
                               ${configs.enabled ? 'checked' : ''}>
                        <label class="form-check-label">PWA Ativo</label>
                    </div>
                </div>
                <div class="mb-3">
                    <div class="form-check form-switch">
                        <input class="form-check-input config-input" type="checkbox" 
                               data-categoria="pwa" data-chave="push_notifications"
                               ${configs.push_notifications ? 'checked' : ''}>
                        <label class="form-check-label">Notificações Push</label>
                    </div>
                </div>
            </div>
        `;
    },

    renderizarConfiguracoesDelivery(configs) {
        return `
            <div class="col-md-6">
                <div class="mb-3">
                    <label class="form-label">Taxa de Entrega Padrão (R$)</label>
                    <input type="number" step="0.01" class="form-control config-input" 
                           data-categoria="delivery" data-chave="taxa_entrega" 
                           value="${configs.taxa_entrega || ''}">
                </div>
                <div class="mb-3">
                    <label class="form-label">Taxa por KM (R$)</label>
                    <input type="number" step="0.01" class="form-control config-input" 
                           data-categoria="delivery" data-chave="taxa_por_km" 
                           value="${configs.taxa_por_km || ''}">
                </div>
                <div class="mb-3">
                    <label class="form-label">Raio de Entrega (KM)</label>
                    <input type="number" step="0.1" class="form-control config-input" 
                           data-categoria="delivery" data-chave="raio_entrega_km" 
                           value="${configs.raio_entrega_km || ''}">
                </div>
            </div>
            <div class="col-md-6">
                <div class="mb-3">
                    <label class="form-label">Tempo de Entrega (min)</label>
                    <input type="number" class="form-control config-input" 
                           data-categoria="delivery" data-chave="tempo_entrega_minutos" 
                           value="${configs.tempo_entrega_minutos || ''}">
                </div>
                <div class="mb-3">
                    <label class="form-label">% Comissão Loja</label>
                    <input type="number" class="form-control config-input" 
                           data-categoria="delivery" data-chave="percentual_comissao_loja" 
                           value="${configs.percentual_comissao_loja || ''}">
                </div>
                <div class="mb-3">
                    <label class="form-label">% Comissão Entregador</label>
                    <input type="number" class="form-control config-input" 
                           data-categoria="delivery" data-chave="percentual_comissao_entregador" 
                           value="${configs.percentual_comissao_entregador || ''}">
                    <small class="text-muted">Deve somar 100% com a comissão da loja</small>
                </div>
            </div>
        `;
    },

    adicionarEventListenersInputs() {
        const inputs = document.querySelectorAll('.config-input');
        inputs.forEach(input => {
            input.addEventListener('change', (e) => {
                this.marcarModificacao(e.target);
            });
        });
    },

    marcarModificacao(input) {
        const chave = `${input.dataset.categoria}.${input.dataset.chave}`;
        this.modificacoes.add(chave);
        input.classList.add('border-warning');
    },

    async salvarCategoria(categoria) {
        try {
            const formData = new FormData();
            const inputs = document.querySelectorAll(`[data-categoria="${categoria}"]`);
            
            inputs.forEach(input => {
                let valor;
                
                if (input.type === 'checkbox') {
                    valor = input.checked;
                } else if (input.type === 'number') {
                    valor = parseFloat(input.value) || 0;
                } else {
                    valor = input.value;
                }
                
                formData.append(input.dataset.chave, valor);
            });

            const response = await fetch(`/admin/configuracoes/${categoria}`, {
                method: 'POST',
                body: formData
            });

            const data = await response.json();
            
            if (data.success) {
                this.limparModificacoes(categoria);
                this.mostrarSucesso(`Configurações de ${categoria} salvas com sucesso`);
            }
        } catch (error) {
            console.error('Erro ao salvar categoria:', error);
            this.mostrarErro('Erro ao salvar configurações');
        }
    },

    async salvarTodas() {
        if (this.modificacoes.size === 0) {
            this.mostrarInfo('Nenhuma modificação para salvar');
            return;
        }

        const categorias = new Set();
        this.modificacoes.forEach(chave => {
            categorias.add(chave.split('.')[0]);
        });

        try {
            for (const categoria of categorias) {
                await this.salvarCategoria(categoria);
            }
            this.mostrarSucesso('Todas as configurações salvas com sucesso');
        } catch (error) {
            this.mostrarErro('Erro ao salvar algumas configurações');
        }
    },

    async fazerBackup() {
        try {
            const response = await fetch('/admin/configuracoes/backup', {
                method: 'POST'
            });

            const data = await response.json();
            
            if (data.success) {
                // Baixar arquivo
                const link = document.createElement('a');
                link.href = data.backup_url;
                link.download = `backup_config_${new Date().toISOString().split('T')[0]}.json`;
                link.click();
                
                this.mostrarSucesso('Backup criado e baixado com sucesso');
            }
        } catch (error) {
            console.error('Erro ao fazer backup:', error);
            this.mostrarErro('Erro ao criar backup');
        }
    },

    limparModificacoes(categoria) {
        const inputs = document.querySelectorAll(`[data-categoria="${categoria}"]`);
        inputs.forEach(input => {
            input.classList.remove('border-warning');
        });
        
        // Limpar modificações desta categoria
        [...this.modificacoes].forEach(chave => {
            if (chave.startsWith(categoria + '.')) {
                this.modificacoes.delete(chave);
            }
        });
    },

    atualizarCards() {
        const total = Object.keys(this.configuracoes).length;
        const ativas = Object.values(this.configuracoes).filter(config => 
            Object.values(config).some(value => value !== null && value !== '')
        ).length;
        
        const pendentes = total - ativas;
        const percentual = total > 0 ? Math.round((ativas / total) * 100) : 0;

        document.getElementById('totalConfiguracoes').textContent = total;
        document.getElementById('configuracoesAtivas').textContent = ativas;
        document.getElementById('configuracoesPendentes').textContent = pendentes;
        document.getElementById('percentualCompleto').textContent = percentual + '%';
    },

    previewArquivo(event) {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = (e) => {
                const img = document.getElementById('imgPreview');
                img.src = e.target.result;
                document.getElementById('previewArquivo').classList.remove('d-none');
            };
            reader.readAsDataURL(file);
        }
    },

    async uploadArquivo(event) {
        event.preventDefault();
        
        const formData = new FormData(event.target);
        const file = document.getElementById('arquivo').files[0];
        
        if (!file) return;

        formData.append('file', file);

        try {
            const response = await fetch('/admin/configuracoes/upload', {
                method: 'POST',
                body: formData
            });

            const data = await response.json();
            
            if (data.success) {
                const modal = bootstrap.Modal.getInstance(document.getElementById('modalUpload'));
                modal.hide();
                event.target.reset();
                document.getElementById('previewArquivo').classList.add('d-none');
                this.mostrarSucesso('Arquivo enviado com sucesso');
            }
        } catch (error) {
            console.error('Erro no upload:', error);
            this.mostrarErro('Erro ao enviar arquivo');
        }
    },

    carregarHistorico() {
        // Implementar carregamento do histórico
        const tbody = document.getElementById('historicoAlteracoes');
        tbody.innerHTML = `
            <tr>
                <td>2024-11-21 20:00</td>
                <td>Admin</td>
                <td>Email</td>
                <td>Configuração SMTP</td>
                <td><span class="badge bg-success">Salvo</span></td>
            </tr>
        `;
    },

    mostrarSucesso(mensagem) {
        // Implementar notificação de sucesso
        alert(mensagem);
    },

    mostrarErro(mensagem) {
        // Implementar notificação de erro
        alert(mensagem);
    },

    mostrarInfo(mensagem) {
        // Implementar notificação de info
        alert(mensagem);
    }
};

// Inicializar sistema
document.addEventListener('DOMContentLoaded', function() {
    configuracaoSystem.init();
});
</script>

<style>
.config-input {
    transition: all 0.3s ease;
}

.config-input.border-warning {
    border-color: #ffc107 !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
}

.nav-tabs .nav-link {
    border-radius: 8px 8px 0 0;
}

.card:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease-in-out;
}

.badge {
    font-size: 0.75em;
}
</style>
@endpush