@extends('adminlte::page')

@section('title', 'Gerenciar Pesquisas')

@section('content_header')
    <h1>
        <i class="fas fa-poll"></i>
        Gerenciar Pesquisas
    </h1>
@stop

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-6">
                            <h3 class="card-title">
                                <i class="fas fa-list"></i>
                                Lista de Pesquisas
                            </h3>
                        </div>
                        <div class="col-md-6 text-right">
                            <button type="button" class="btn btn-success" onclick="adicionarNovaPesquisa()">
                                <i class="fas fa-plus"></i>
                                Nova Pesquisa
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Filtros -->
                <div class="card-body">
                    <form method="GET" action="{{ route('pesquisas.crud.index') }}" class="mb-4">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="descricao">Descrição:</label>
                                    <input type="text"
                                           name="descricao"
                                           id="descricao"
                                           class="form-control"
                                           value="{{ $filtros['descricao'] ?? '' }}"
                                           placeholder="Buscar por descrição...">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="ativa">Status:</label>
                                    <select name="ativa" id="ativa" class="form-control">
                                        <option value="">Todos</option>
                                        <option value="S" {{ ($filtros['ativa'] ?? '') === 'S' ? 'selected' : '' }}>Ativa</option>
                                        <option value="N" {{ ($filtros['ativa'] ?? '') === 'N' ? 'selected' : '' }}>Inativa</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <div>
                                        <button type="submit" class="btn btn-info">
                                            <i class="fas fa-search"></i>
                                            Filtrar
                                        </button>
                                        <a href="{{ route('pesquisas.crud.index') }}" class="btn btn-secondary">
                                            <i class="fas fa-times"></i>
                                            Limpar
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>

                    <!-- Lista de Pesquisas com Expansão -->
                    <div class="pesquisas-container">
                        @forelse($pesquisas as $pesquisa)
                            <div class="pesquisa-item" data-pesquisa-id="{{ $pesquisa->id }}">
                                <div class="pesquisa-header" onclick="toggleQuestoes({{ $pesquisa->id }})">
                                    <div class="row align-items-center">
                                        <div class="col-md-1">
                                            <i class="fas fa-chevron-right toggle-icon" id="icon-{{ $pesquisa->id }}"></i>
                                        </div>
                                        <div class="col-md-1">
                                            <span class="badge badge-secondary">{{ $pesquisa->id }}</span>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="pesquisa-descricao" data-pesquisa-id="{{ $pesquisa->id }}">
                                                <span class="descricao-text">{{ $pesquisa->pes_descricao }}</span>
                                                <input type="text"
                                                       class="form-control form-control-sm descricao-input"
                                                       value="{{ $pesquisa->pes_descricao }}"
                                                       maxlength="50"
                                                       style="display: none;">
                                                <button class="btn btn-link btn-sm edit-descricao" title="Editar descrição">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button class="btn btn-success btn-sm save-descricao" title="Salvar" style="display: none;">
                                                    <i class="fas fa-check"></i>
                                                </button>
                                                <button class="btn btn-secondary btn-sm cancel-descricao" title="Cancelar" style="display: none;">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="pesquisa-tipo" data-pesquisa-id="{{ $pesquisa->id }}">
                                                @if($pesquisa->tipo)
                                                    <span class="badge badge-info tipo-badge" data-tipo="{{ $pesquisa->pes_tipo }}">
                                                        <i class="fas fa-tag"></i>
                                                        {{ $pesquisa->tipo->pet_descricao }}
                                                    </span>
                                                @else
                                                    <span class="badge badge-secondary">
                                                        <i class="fas fa-question"></i>
                                                        Sem tipo
                                                    </span>
                                                @endif
                                                <select class="form-control form-control-sm tipo-select" style="display: none;">
                                                    <option value="">Selecione o tipo...</option>
                                                    @foreach($tipos as $tipo)
                                                        <option value="{{ $tipo->pet_id }}" {{ $pesquisa->pes_tipo == $tipo->pet_id ? 'selected' : '' }}>
                                                            {{ $tipo->pet_descricao }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                <button class="btn btn-link btn-sm edit-tipo" title="Alterar tipo">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button class="btn btn-success btn-sm save-tipo" title="Salvar" style="display: none;">
                                                    <i class="fas fa-check"></i>
                                                </button>
                                                <button class="btn btn-secondary btn-sm cancel-tipo" title="Cancelar" style="display: none;">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="col-md-1">
                                            <div class="pesquisa-status" data-pesquisa-id="{{ $pesquisa->id }}">
                                                @if($pesquisa->pes_ativa === 'S')
                                                    <span class="badge badge-success status-badge" data-status="S">
                                                        <i class="fas fa-check"></i>
                                                        Ativa
                                                    </span>
                                                @else
                                                    <span class="badge badge-warning status-badge" data-status="N">
                                                        <i class="fas fa-times"></i>
                                                        Inativa
                                                    </span>
                                                @endif
                                                <select class="form-control form-control-sm status-select" style="display: none;">
                                                    <option value="S" {{ $pesquisa->pes_ativa === 'S' ? 'selected' : '' }}>Ativa</option>
                                                    <option value="N" {{ $pesquisa->pes_ativa === 'N' ? 'selected' : '' }}>Inativa</option>
                                                </select>
                                                <button class="btn btn-link btn-sm edit-status" title="Alterar status">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button class="btn btn-success btn-sm save-status" title="Salvar" style="display: none;">
                                                    <i class="fas fa-check"></i>
                                                </button>
                                                <button class="btn btn-secondary btn-sm cancel-status" title="Cancelar" style="display: none;">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="col-md-1">
                                            <span class="badge badge-info" id="questoes-count-{{ $pesquisa->id }}">
                                                {{ $pesquisa->questoes->count() }} questões
                                            </span>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="btn-group btn-group-sm" role="group">
                                                <a href="/sigo-laravel/public/api/v1/portal-beneficiario/pesquisa/{{ $pesquisa->id }}"
                                                   class="btn btn-info"
                                                   title="Visualizar"
                                                   onclick="event.stopPropagation();">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a href="{{ route('pesquisas.edit', $pesquisa->id) }}"
                                                   class="btn btn-warning"
                                                   title="Editar"
                                                   onclick="event.stopPropagation();">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <button type="button"
                                                        class="btn btn-danger"
                                                        onclick="event.stopPropagation(); confirmarExclusao({{ $pesquisa->id }}, '{{ $pesquisa->pes_descricao }}')"
                                                        title="Excluir">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Container para questões (inicialmente oculto) -->
                                <div class="questoes-container" id="questoes-{{ $pesquisa->id }}" style="display: none;">
                                    <div class="questoes-loading">
                                        <i class="fas fa-spinner fa-spin"></i> Carregando questões...
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle"></i>
                                Nenhuma pesquisa encontrada para os filtros aplicados.
                            </div>
                        @endforelse
                    </div>

                    <!-- Paginação -->
                    @if($pesquisas->hasPages())
                        <div class="d-flex justify-content-center mt-4">
                            {{ $pesquisas->appends(request()->query())->links() }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Modal de Confirmação de Exclusão -->
    <div class="modal fade" id="modalExclusao" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirmar Exclusão</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Tem certeza que deseja excluir a pesquisa <strong id="nomePesquisa"></strong>?</p>
                    <p class="text-danger">
                        <i class="fas fa-exclamation-triangle"></i>
                        Esta ação não pode ser desfeita!
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <form id="formExclusao" method="POST" style="display: inline;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">
                            <i class="fas fa-trash"></i>
                            Excluir
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@stop

@section('css')
    <style>
        .pesquisa-item {
            border: 1px solid #dee2e6;
            border-radius: 5px;
            margin-bottom: 10px;
            background: #fff;
            overflow: hidden; /* Evita transbordamento */
        }

        .pesquisa-header {
            padding: 15px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .pesquisa-header:hover {
            background-color: #f8f9fa;
        }

        .toggle-icon {
            transition: transform 0.3s;
        }

        .toggle-icon.expanded {
            transform: rotate(90deg);
        }

        /* Estilos para botões de ação */
        .btn-group {
            white-space: nowrap;
        }

        .btn-group .btn {
            min-width: 32px;
            padding: 0.25rem 0.5rem;
        }

        /* Garantir que os botões não transbordem */
        .pesquisa-header .row {
            margin: 0;
        }

        .pesquisa-header .col-md-2:last-child {
            padding-right: 0;
        }

        .questoes-container {
            border-top: 1px solid #dee2e6;
            background-color: #f8f9fa;
        }

        .questoes-loading {
            padding: 20px;
            text-align: center;
            color: #6c757d;
        }

        .questao-item {
            border-bottom: 1px solid #dee2e6;
            padding: 10px 20px;
        }

        .questao-item:last-child {
            border-bottom: none;
        }

        .questao-header {
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .questao-header:hover {
            background-color: #e9ecef;
        }

        .opcoes-container {
            border-top: 1px solid #dee2e6;
            background-color: #fff;
            margin-left: 20px;
        }

        .opcao-item {
            padding: 8px 15px;
            border-bottom: 1px solid #f1f3f4;
        }

        .opcao-item:last-child {
            border-bottom: none;
        }
    </style>
@stop

@section('js')
    <script>
        // Helper simples: usa PROTOCOLO do .env + host atual + prefixo fixo
        const __PROTOCOLO = '{{ env('PROTOCOLO', 'https') }}'.replace(/:\/\//g, '').replace(/:$/g, '');
        const __HOST = window.location.host;
        const BASE = `${__PROTOCOLO}://${__HOST}/sigo-laravel/public`;
        const ROUTE = (u) => {
            if (!u) return u;
            if (u.startsWith('http://') || u.startsWith('https://')) {
                return u.replace(/^https?:/, `${__PROTOCOLO}:`);
            }
            return `${BASE}${u.startsWith('/') ? '' : '/'}${u}`;
        };
        // Tipos de pesquisa disponíveis
        const tiposPesquisa = @json($tipos->map(function($tipo) {
            return ['id' => $tipo->pet_id, 'descricao' => $tipo->pet_descricao];
        }));

        // ===== FUNCIONALIDADES DE EXPANSÃO =====
        function toggleQuestoes(pesquisaId) {
            const container = document.getElementById('questoes-' + pesquisaId);
            const icon = document.getElementById('icon-' + pesquisaId);

            if (container.style.display === 'none') {
                container.style.display = 'block';
                icon.classList.add('expanded');

                if (container.innerHTML.includes('Carregando questões...')) {
                    carregarQuestoes(pesquisaId);
                }
            } else {
                container.style.display = 'none';
                icon.classList.remove('expanded');
            }
        }

        // Variável global para armazenar dados das pesquisas
        let pesquisasData = {};

        function carregarQuestoes(pesquisaId) {
            const container = document.getElementById('questoes-' + pesquisaId);

            // Se já temos os dados carregados, usar eles
            if (pesquisasData[pesquisaId]) {
                container.innerHTML = gerarHtmlQuestoes(pesquisasData[pesquisaId].questoes, pesquisaId);
                return Promise.resolve();
            }

            // Carregar pesquisa completa com questões e opções
            return fetch(`/sigo-laravel/public/api/v1/portal-beneficiario/pesquisa/${pesquisaId}`, {
                headers: {
                    'Authorization': 'Bearer ' + getToken(),
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Armazenar dados da pesquisa completa
                    pesquisasData[pesquisaId] = data.data;

                    // Gerar HTML das questões usando os dados da API
                    container.innerHTML = gerarHtmlQuestoes(data.data.questoes, pesquisaId);
                } else {
                    container.innerHTML = '<div class="alert alert-warning">Erro ao carregar questões</div>';
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                container.innerHTML = '<div class="alert alert-danger">Erro ao carregar questões</div>';
            });
        }

        function toggleOpcoes(pesquisaId, questaoId) {
            const container = document.getElementById('opcoes-' + questaoId);
            const icon = document.getElementById('icon-questao-' + questaoId);

            if (container.style.display === 'none') {
                container.style.display = 'block';
                icon.classList.add('expanded');

                if (container.innerHTML.includes('Carregando opções...')) {
                    carregarOpcoes(pesquisaId, questaoId);
                }
            } else {
                container.style.display = 'none';
                icon.classList.remove('expanded');
            }
        }

        function carregarOpcoes(pesquisaId, questaoId) {
            const container = document.getElementById('opcoes-' + questaoId);

            // Se já temos os dados carregados, usar eles
            if (pesquisasData[pesquisaId] && pesquisasData[pesquisaId].questoes) {
                const questao = pesquisasData[pesquisaId].questoes.find(q => q.id == questaoId);
                if (questao && questao.opcoes) {
                    container.innerHTML = gerarHtmlOpcoes(questao.opcoes, pesquisaId, questaoId);
                    return;
                }
            }

            // Se não temos os dados da pesquisa completa, carregar primeiro
            if (!pesquisasData[pesquisaId]) {
                carregarQuestoes(pesquisaId).then(() => {
                    // Após carregar as questões, tentar novamente
                    const questao = pesquisasData[pesquisaId].questoes.find(q => q.id == questaoId);
                    if (questao && questao.opcoes) {
                        container.innerHTML = gerarHtmlOpcoes(questao.opcoes, pesquisaId, questaoId);
                    } else {
                        container.innerHTML = '<div class="alert alert-warning">Nenhuma opção encontrada</div>';
                    }
                });
                return;
            }

            // Fallback: carregar opções individualmente se não tiver os dados
            fetch(`/sigo-laravel/public/api/v1/portal-beneficiario/pesquisa/${pesquisaId}/questoes/${questaoId}/opcoes`, {
                headers: {
                    'Authorization': 'Bearer ' + getToken(),
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Gerar HTML das opções usando os dados da API
                    container.innerHTML = gerarHtmlOpcoes(data.data, pesquisaId, questaoId);
                } else {
                    container.innerHTML = '<div class="alert alert-warning">Erro ao carregar opções</div>';
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                container.innerHTML = '<div class="alert alert-danger">Erro ao carregar opções</div>';
            });
        }

        // ===== FUNÇÕES AUXILIARES =====
        function getToken() {
            // Obter token JWT do cookie
            return getCookie('token') || '';
        }

        function getCookie(name) {
            const value = `; ${document.cookie}`;
            const parts = value.split(`; ${name}=`);
            if (parts.length === 2) return parts.pop().split(';').shift();
            return '';
        }

        function gerarHtmlQuestoes(questoes, pesquisaId) {
            if (!questoes || questoes.length === 0) {
                return `
                    <div class="mb-3">
                        <button type="button" class="btn btn-success btn-sm" onclick="adicionarNovaQuestao(${pesquisaId})">
                            <i class="fas fa-plus"></i>
                            Nova Questão
                        </button>
                    </div>
                    <div class="alert alert-info"><i class="fas fa-info-circle"></i> Nenhuma questão encontrada para esta pesquisa.</div>
                `;
            }

            let html = `
                <!-- Botão para adicionar nova questão -->
                <div class="mb-3">
                    <button type="button" class="btn btn-success btn-sm" onclick="adicionarNovaQuestao(${pesquisaId})">
                        <i class="fas fa-plus"></i>
                        Nova Questão
                    </button>
                </div>

                <!-- Cabeçalho do grid -->
                <div class="row mb-2" style="background-color: #f8f9fa; padding: 10px; border-radius: 5px; font-weight: bold;">
                    <div class="col-md-1"></div>
                    <div class="col-md-1 text-center">Número</div>
                    <div class="col-md-7">Descrição</div>
                    <div class="col-md-1 text-center">Opções</div>
                    <div class="col-md-2 text-center">Ações</div>
                </div>
            `;

            questoes.forEach(questao => {
                const opcoesCount = questao.opcoes ? questao.opcoes.length : 0;
                const numeroExibicao = questao.qpe_numeroexibicao || questao.id || '-';

                html += `
                    <div class="questao-item" data-questao-id="${questao.id}">
                        <div class="questao-header" onclick="toggleOpcoes(${pesquisaId}, ${questao.id})">
                            <div class="row align-items-center">
                                <div class="col-md-1">
                                    <i class="fas fa-chevron-right toggle-icon" id="icon-questao-${questao.id}"></i>
                                </div>
                                <div class="col-md-1">
                                    <div class="questao-numero" data-questao-id="${questao.id}">
                                        <span class="badge badge-primary numero-text">${numeroExibicao}</span>
                                    </div>
                                </div>
                                <div class="col-md-7">
                                    <div class="questao-descricao" data-questao-id="${questao.id}">
                                        <span class="descricao-text">${questao.qpe_descricao || ''}</span>
                                        <input type="text" class="form-control form-control-sm descricao-input" value="${questao.qpe_descricao || ''}" maxlength="255" style="display: none;">
                                        <button class="btn btn-link btn-sm edit-descricao" title="Editar descrição" onclick="event.stopPropagation(); editarDescricaoQuestao(${questao.id});">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="btn btn-success btn-sm save-descricao" title="Salvar" style="display: none;" onclick="event.stopPropagation(); salvarDescricaoQuestao(${questao.id});">
                                            <i class="fas fa-check"></i>
                                        </button>
                                        <button class="btn btn-secondary btn-sm cancel-descricao" title="Cancelar" style="display: none;" onclick="event.stopPropagation(); cancelarEdicaoDescricaoQuestao(${questao.id});">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="col-md-1">
                                    <span class="badge badge-info" id="opcoes-count-${questao.id}">
                                        ${opcoesCount} opções
                                    </span>
                                </div>
                                <div class="col-md-2">
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-danger btn-sm" onclick="event.stopPropagation(); excluirQuestao(${pesquisaId}, ${questao.id}, '${(questao.qpe_descricao || '').replace(/'/g, "\\'")}')" title="Excluir">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Container para opções (inicialmente oculto) -->
                        <div class="opcoes-container" id="opcoes-${questao.id}" style="display: none;">
                            <div class="opcoes-loading">
                                <i class="fas fa-spinner fa-spin"></i> Carregando opções...
                            </div>
                        </div>
                    </div>
                `;
            });

            return html;
        }

        function gerarHtmlOpcoes(opcoes, pesquisaId, questaoId) {
            if (!opcoes || opcoes.length === 0) {
                return `
                    <!-- Botão para adicionar nova opção -->
                    <div class="mb-3">
                        <button type="button" class="btn btn-success btn-sm" onclick="adicionarNovaOpcao(${pesquisaId}, ${questaoId})">
                            <i class="fas fa-plus"></i>
                            Nova Opção
                        </button>
                    </div>
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i>
                        Nenhuma opção encontrada para esta questão.
                    </div>
                `;
            }

            let html = `
                <!-- Botão para adicionar nova opção -->
                <div class="mb-3">
                    <button type="button" class="btn btn-success btn-sm" onclick="adicionarNovaOpcao(${pesquisaId}, ${questaoId})">
                        <i class="fas fa-plus"></i>
                        Nova Opção
                    </button>
                </div>
            `;

            opcoes.forEach(opcao => {
                const criticaTexto = opcao.opp_resposta_critica === 'S' ? 'Crítica' : 'Normal';
                const criticaBadge = opcao.opp_resposta_critica === 'S' ? 'badge-danger' : 'badge-success';
                const criticaIcon = opcao.opp_resposta_critica === 'S' ? 'fa-exclamation-triangle' : 'fa-check';

                html += `
                    <div class="opcao-item" data-opcao-id="${opcao.id}">
                        <div class="row align-items-center">
                            <div class="col-md-7">
                                <div class="opcao-descricao" data-opcao-id="${opcao.id}">
                                    <span class="descricao-text">${opcao.opp_descricao}</span>
                                    <input type="text" class="form-control form-control-sm descricao-input" value="${opcao.opp_descricao}" maxlength="100" style="display: none;">
                                    <button class="btn btn-link btn-sm edit-descricao" title="Editar descrição" onclick="event.stopPropagation(); editarDescricaoOpcao(${opcao.id});">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="btn btn-success btn-sm save-descricao" title="Salvar" style="display: none;" onclick="event.stopPropagation(); salvarDescricaoOpcao(${opcao.id});">
                                        <i class="fas fa-check"></i>
                                    </button>
                                    <button class="btn btn-secondary btn-sm cancel-descricao" title="Cancelar" style="display: none;" onclick="event.stopPropagation(); cancelarEdicaoDescricaoOpcao(${opcao.id});">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="opcao-critica" data-opcao-id="${opcao.id}">
                                    <span class="badge ${criticaBadge} critica-badge" data-critica="${opcao.opp_resposta_critica}">
                                        <i class="fas ${criticaIcon}"></i>
                                        ${criticaTexto}
                                    </span>
                                    <select class="form-control form-control-sm critica-select" style="display: none;">
                                        <option value="S" ${opcao.opp_resposta_critica === 'S' ? 'selected' : ''}>Crítica</option>
                                        <option value="N" ${opcao.opp_resposta_critica === 'N' ? 'selected' : ''}>Normal</option>
                                    </select>
                                    <button class="btn btn-link btn-sm edit-critica" title="Alterar tipo" onclick="event.stopPropagation(); editarCriticaOpcao(${opcao.id});">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="btn btn-success btn-sm save-critica" title="Salvar" style="display: none;" onclick="event.stopPropagation(); salvarCriticaOpcao(${opcao.id});">
                                        <i class="fas fa-check"></i>
                                    </button>
                                    <button class="btn btn-secondary btn-sm cancel-critica" title="Cancelar" style="display: none;" onclick="event.stopPropagation(); cancelarEdicaoCriticaOpcao(${opcao.id});">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-danger btn-sm" onclick="excluirOpcao(${pesquisaId}, ${questaoId}, ${opcao.id}, '${opcao.opp_descricao}')" title="Excluir">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
            });

            return html;
        }

        // ===== CRUD INLINE PARA PESQUISAS =====
        function adicionarNovaPesquisa() {
            const container = document.querySelector('.pesquisas-container');
            const novoItem = document.createElement('div');
            novoItem.className = 'pesquisa-item nova-pesquisa';

            // Gerar options do select de tipo
            let tiposOptions = '<option value="">Selecione o tipo...</option>';
            tiposPesquisa.forEach(tipo => {
                tiposOptions += `<option value="${tipo.id}">${tipo.descricao}</option>`;
            });

            novoItem.innerHTML = `
                <div class="pesquisa-header">
                    <div class="row align-items-center">
                        <div class="col-md-1">
                            <i class="fas fa-plus text-success"></i>
                        </div>
                        <div class="col-md-1">
                            <span class="badge badge-info">Novo</span>
                        </div>
                        <div class="col-md-4">
                            <input type="text" class="form-control form-control-sm" placeholder="Descrição da pesquisa" maxlength="50" id="nova-descricao">
                        </div>
                        <div class="col-md-2">
                            <select class="form-control form-control-sm" id="novo-tipo" required>
                                ${tiposOptions}
                            </select>
                        </div>
                        <div class="col-md-1">
                            <select class="form-control form-control-sm" id="novo-status">
                                <option value="S">Ativa</option>
                                <option value="N">Inativa</option>
                            </select>
                        </div>
                        <div class="col-md-1">
                            <span class="badge badge-secondary">0 questões</span>
                        </div>
                        <div class="col-md-2">
                            <div class="btn-group" role="group">
                                <button class="btn btn-success btn-sm" onclick="salvarNovaPesquisa()" title="Salvar">
                                    <i class="fas fa-check"></i>
                                </button>
                                <button class="btn btn-secondary btn-sm" onclick="cancelarNovaPesquisa()" title="Cancelar">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            container.insertBefore(novoItem, container.firstChild);
            document.getElementById('nova-descricao').focus();
        }

        function salvarNovaPesquisa() {
            const descricao = document.getElementById('nova-descricao').value.trim();
            const tipo = document.getElementById('novo-tipo').value;
            const status = document.getElementById('novo-status').value;

            if (!descricao) {
                alert('A descrição é obrigatória!');
                return;
            }

            if (!tipo) {
                alert('O tipo da pesquisa é obrigatório!');
                return;
            }

            const formData = new FormData();
            formData.append('pes_descricao', descricao);
            formData.append('pes_tipo', tipo);
            formData.append('pes_ativa', status);
            formData.append('_token', '{{ csrf_token() }}');

            fetch(ROUTE('{{ route("pesquisas.store") }}'), {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => {
                        throw new Error(err.message || 'Erro ao salvar pesquisa');
                    });
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    location.reload(); // Recarregar para mostrar a nova pesquisa
                } else {
                    alert('Erro ao salvar: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                alert('Erro ao salvar pesquisa: ' + (error.message || 'Erro desconhecido'));
            });
        }

        function cancelarNovaPesquisa() {
            document.querySelector('.nova-pesquisa').remove();
        }

        // Editar descrição inline
        function editarDescricao(pesquisaId) {
            const container = document.querySelector(`[data-pesquisa-id="${pesquisaId}"]`);
            const text = container.querySelector('.descricao-text');
            const input = container.querySelector('.descricao-input');
            const editBtn = container.querySelector('.edit-descricao');
            const saveBtn = container.querySelector('.save-descricao');
            const cancelBtn = container.querySelector('.cancel-descricao');

            text.style.display = 'none';
            input.style.display = 'inline-block';
            editBtn.style.display = 'none';
            saveBtn.style.display = 'inline-block';
            cancelBtn.style.display = 'inline-block';
            input.focus();
        }

        function salvarDescricao(pesquisaId) {
            const container = document.querySelector(`[data-pesquisa-id="${pesquisaId}"]`);
            const input = container.querySelector('.descricao-input');
            const novaDescricao = input.value.trim();

            if (!novaDescricao) {
                alert('A descrição não pode estar vazia!');
                return;
            }

            const formData = new FormData();
            formData.append('pes_descricao', novaDescricao);
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('_method', 'PUT');

            fetch(ROUTE(`{{ route("pesquisas.update", ["id" => ":id"]) }}`.replace(':id', pesquisaId)), {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const text = container.querySelector('.descricao-text');
                    text.textContent = novaDescricao;
                    cancelarEdicaoDescricao(pesquisaId);
                } else {
                    alert('Erro ao salvar: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                alert('Erro ao salvar descrição');
            });
        }

        function cancelarEdicaoDescricao(pesquisaId) {
            const container = document.querySelector(`[data-pesquisa-id="${pesquisaId}"]`);
            const text = container.querySelector('.descricao-text');
            const input = container.querySelector('.descricao-input');
            const editBtn = container.querySelector('.edit-descricao');
            const saveBtn = container.querySelector('.save-descricao');
            const cancelBtn = container.querySelector('.cancel-descricao');

            input.value = text.textContent;
            text.style.display = 'inline';
            input.style.display = 'none';
            editBtn.style.display = 'inline-block';
            saveBtn.style.display = 'none';
            cancelBtn.style.display = 'none';
        }

        // Editar status inline
        function editarStatus(pesquisaId) {
            const container = document.querySelector(`[data-pesquisa-id="${pesquisaId}"]`);
            const badge = container.querySelector('.status-badge');
            const select = container.querySelector('.status-select');
            const editBtn = container.querySelector('.edit-status');
            const saveBtn = container.querySelector('.save-status');
            const cancelBtn = container.querySelector('.cancel-status');

            badge.style.display = 'none';
            select.style.display = 'inline-block';
            editBtn.style.display = 'none';
            saveBtn.style.display = 'inline-block';
            cancelBtn.style.display = 'inline-block';
        }

        function salvarStatus(pesquisaId) {
            const container = document.querySelector(`[data-pesquisa-id="${pesquisaId}"]`);
            const select = container.querySelector('.status-select');
            const novoStatus = select.value;

            const formData = new FormData();
            formData.append('status', novoStatus);
            formData.append('_token', '{{ csrf_token() }}');

            fetch(ROUTE(`{{ route("pesquisas.alterar-status", ["id" => ":id"]) }}`.replace(':id', pesquisaId)), {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const badge = container.querySelector('.status-badge');
                    badge.setAttribute('data-status', novoStatus);

                    if (novoStatus === 'S') {
                        badge.className = 'badge badge-success status-badge';
                        badge.innerHTML = '<i class="fas fa-check"></i> Ativa';
                    } else {
                        badge.className = 'badge badge-warning status-badge';
                        badge.innerHTML = '<i class="fas fa-times"></i> Inativa';
                    }

                    cancelarEdicaoStatus(pesquisaId);
                } else {
                    alert('Erro ao salvar: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                alert('Erro ao salvar status');
            });
        }

        function cancelarEdicaoStatus(pesquisaId) {
            const container = document.querySelector(`[data-pesquisa-id="${pesquisaId}"]`);
            const badge = container.querySelector('.status-badge');
            const select = container.querySelector('.status-select');
            const editBtn = container.querySelector('.edit-status');
            const saveBtn = container.querySelector('.save-status');
            const cancelBtn = container.querySelector('.cancel-status');

            select.value = badge.getAttribute('data-status');
            badge.style.display = 'inline-block';
            select.style.display = 'none';
            editBtn.style.display = 'inline-block';
            saveBtn.style.display = 'none';
            cancelBtn.style.display = 'none';
        }

        // ===== FUNÇÕES PARA EDITAR TIPO DA PESQUISA =====
        function editarTipo(pesquisaId) {
            const container = document.querySelector(`[data-pesquisa-id="${pesquisaId}"]`);
            const badge = container.querySelector('.tipo-badge');
            const select = container.querySelector('.tipo-select');
            const editBtn = container.querySelector('.edit-tipo');
            const saveBtn = container.querySelector('.save-tipo');
            const cancelBtn = container.querySelector('.cancel-tipo');

            badge.style.display = 'none';
            select.style.display = 'inline-block';
            editBtn.style.display = 'none';
            saveBtn.style.display = 'inline-block';
            cancelBtn.style.display = 'inline-block';
            select.focus();
        }

        function salvarTipo(pesquisaId) {
            const container = document.querySelector(`[data-pesquisa-id="${pesquisaId}"]`);
            const select = container.querySelector('.tipo-select');
            const novoTipo = select.value;

            if (!novoTipo) {
                alert('Selecione um tipo válido!');
                return;
            }

            const formData = new FormData();
            formData.append('pes_tipo', novoTipo);
            formData.append('_token', '{{ csrf_token() }}');

            fetch(ROUTE(`{{ route("pesquisas.update", ["id" => ":id"]) }}`.replace(':id', pesquisaId)), {
                method: 'PUT',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const badge = container.querySelector('.tipo-badge');
                    badge.setAttribute('data-tipo', novoTipo);

                    // Encontrar o tipo selecionado
                    const tipoSelecionado = tiposPesquisa.find(tipo => tipo.id == novoTipo);
                    if (tipoSelecionado) {
                        badge.innerHTML = `<i class="fas fa-tag"></i> ${tipoSelecionado.descricao}`;
                    }

                    cancelarEdicaoTipo(pesquisaId);
                } else {
                    alert('Erro ao salvar: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                alert('Erro ao salvar tipo');
            });
        }

        function cancelarEdicaoTipo(pesquisaId) {
            const container = document.querySelector(`[data-pesquisa-id="${pesquisaId}"]`);
            const badge = container.querySelector('.tipo-badge');
            const select = container.querySelector('.tipo-select');
            const editBtn = container.querySelector('.edit-tipo');
            const saveBtn = container.querySelector('.save-tipo');
            const cancelBtn = container.querySelector('.cancel-tipo');

            select.value = badge.getAttribute('data-tipo');
            badge.style.display = 'inline-block';
            select.style.display = 'none';
            editBtn.style.display = 'inline-block';
            saveBtn.style.display = 'none';
            cancelBtn.style.display = 'none';
        }

        // ===== EVENT LISTENERS =====
        document.addEventListener('DOMContentLoaded', function() {
            // Event listeners para edição de descrição
            document.addEventListener('click', function(e) {
                if (e.target.closest('.edit-descricao')) {
                    const pesquisaId = e.target.closest('.pesquisa-descricao').getAttribute('data-pesquisa-id');
                    editarDescricao(pesquisaId);
                }

                if (e.target.closest('.save-descricao')) {
                    const pesquisaId = e.target.closest('.pesquisa-descricao').getAttribute('data-pesquisa-id');
                    salvarDescricao(pesquisaId);
                }

                if (e.target.closest('.cancel-descricao')) {
                    const pesquisaId = e.target.closest('.pesquisa-descricao').getAttribute('data-pesquisa-id');
                    cancelarEdicaoDescricao(pesquisaId);
                }

                if (e.target.closest('.edit-status')) {
                    const pesquisaId = e.target.closest('.pesquisa-status').getAttribute('data-pesquisa-id');
                    editarStatus(pesquisaId);
                }

                if (e.target.closest('.save-status')) {
                    const pesquisaId = e.target.closest('.pesquisa-status').getAttribute('data-pesquisa-id');
                    salvarStatus(pesquisaId);
                }

                if (e.target.closest('.cancel-status')) {
                    const pesquisaId = e.target.closest('.pesquisa-status').getAttribute('data-pesquisa-id');
                    cancelarEdicaoStatus(pesquisaId);
                }

                if (e.target.closest('.edit-tipo')) {
                    const pesquisaId = e.target.closest('.pesquisa-tipo').getAttribute('data-pesquisa-id');
                    editarTipo(pesquisaId);
                }

                if (e.target.closest('.save-tipo')) {
                    const pesquisaId = e.target.closest('.pesquisa-tipo').getAttribute('data-pesquisa-id');
                    salvarTipo(pesquisaId);
                }

                if (e.target.closest('.cancel-tipo')) {
                    const pesquisaId = e.target.closest('.pesquisa-tipo').getAttribute('data-pesquisa-id');
                    cancelarEdicaoTipo(pesquisaId);
                }
            });
        });

        function confirmarExclusao(id, nome) {
            document.getElementById('nomePesquisa').textContent = nome;
            // Usar rota do Laravel para respeitar configuração PROTOCOLO do .env
            document.getElementById('formExclusao').action = ROUTE(`{{ route("pesquisas.destroy", ["id" => ":id"]) }}`.replace(':id', id));
            document.getElementById('formExclusao').setAttribute('data-pesquisa-id', id);
            $('#modalExclusao').modal('show');
        }

        // Interceptar submit do formulário de exclusão para fazer via AJAX
        document.addEventListener('DOMContentLoaded', function() {
            const formExclusao = document.getElementById('formExclusao');
            if (formExclusao) {
                formExclusao.addEventListener('submit', function(e) {
                    e.preventDefault();

                    const form = this;
                    const pesquisaId = form.getAttribute('data-pesquisa-id');
                    const url = form.action;

                    const formData = new FormData();
                    formData.append('_token', '{{ csrf_token() }}');
                    formData.append('_method', 'DELETE');

                    fetch(url, {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        body: formData
                    })
                    .then(response => {
                        if (!response.ok) {
                            return response.json().then(err => {
                                throw new Error(err.message || 'Erro ao excluir pesquisa');
                            });
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (data.success) {
                            $('#modalExclusao').modal('hide');
                            // Remover o item da pesquisa do container
                            const item = document.querySelector(`.pesquisa-item[data-pesquisa-id="${pesquisaId}"]`);
                            if (item) {
                                item.remove();
                            } else {
                                // Se não encontrar o item, recarregar a página
                                location.reload();
                            }
                        } else {
                            alert('Erro ao excluir: ' + data.message);
                        }
                    })
                    .catch(error => {
                        console.error('Erro:', error);
                        alert('Erro ao excluir pesquisa: ' + (error.message || 'Erro desconhecido'));
                    });
                });
            }
        });

        // ===== CRUD INLINE PARA QUESTÕES =====

        // Funções de edição de questões (definidas no escopo global)
        window.editarDescricaoQuestao = function(questaoId) {
            const container = document.querySelector(`.questao-descricao[data-questao-id="${questaoId}"]`);
            if (!container) {
                return;
            }
            const text = container.querySelector('.descricao-text');
            const input = container.querySelector('.descricao-input');
            const editBtn = container.querySelector('.edit-descricao');
            const saveBtn = container.querySelector('.save-descricao');
            const cancelBtn = container.querySelector('.cancel-descricao');

            if (!text || !input || !editBtn || !saveBtn || !cancelBtn) {
                return;
            }

            text.style.display = 'none';
            input.style.display = 'inline-block';
            editBtn.style.display = 'none';
            saveBtn.style.display = 'inline-block';
            cancelBtn.style.display = 'inline-block';
            input.focus();
        };

        window.salvarDescricaoQuestao = function(questaoId) {
            const container = document.querySelector(`.questao-descricao[data-questao-id="${questaoId}"]`);
            const text = container.querySelector('.descricao-text');
            const input = container.querySelector('.descricao-input');
            const novaDescricao = input.value.trim();

            if (!novaDescricao) {
                alert('A descrição é obrigatória!');
                return;
            }

            const formData = new FormData();
            formData.append('qpe_descricao', novaDescricao);
            formData.append('_token', '{{ csrf_token() }}');

            fetch(ROUTE(`{{ route("pesquisas.questoes.update", ["id" => ":id"]) }}`.replace(':id', questaoId)), {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => {
                        throw new Error(err.message || 'Erro ao salvar questão');
                    });
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    text.textContent = novaDescricao;
                    cancelarEdicaoDescricaoQuestao(questaoId);
                } else {
                    alert('Erro ao salvar: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                alert('Erro ao salvar questão: ' + (error.message || 'Erro desconhecido'));
            });
        };

        window.cancelarEdicaoDescricaoQuestao = function(questaoId) {
            const container = document.querySelector(`.questao-descricao[data-questao-id="${questaoId}"]`);
            const text = container.querySelector('.descricao-text');
            const input = container.querySelector('.descricao-input');
            const editBtn = container.querySelector('.edit-descricao');
            const saveBtn = container.querySelector('.save-descricao');
            const cancelBtn = container.querySelector('.cancel-descricao');

            input.value = text.textContent;
            text.style.display = 'inline';
            input.style.display = 'none';
            editBtn.style.display = 'inline-block';
            saveBtn.style.display = 'none';
            cancelBtn.style.display = 'none';
        };

        // ===== FUNÇÕES DE EDIÇÃO DE OPÇÕES =====

        // Funções de edição de descrição de opção
        window.editarDescricaoOpcao = function(opcaoId) {
            const container = document.querySelector(`.opcao-descricao[data-opcao-id="${opcaoId}"]`);
            if (!container) return;

            const text = container.querySelector('.descricao-text');
            const input = container.querySelector('.descricao-input');
            const editBtn = container.querySelector('.edit-descricao');
            const saveBtn = container.querySelector('.save-descricao');
            const cancelBtn = container.querySelector('.cancel-descricao');

            text.style.display = 'none';
            input.style.display = 'inline-block';
            editBtn.style.display = 'none';
            saveBtn.style.display = 'inline-block';
            cancelBtn.style.display = 'inline-block';
            input.focus();
        };

        window.salvarDescricaoOpcao = function(opcaoId) {
            const container = document.querySelector(`.opcao-descricao[data-opcao-id="${opcaoId}"]`);
            const text = container.querySelector('.descricao-text');
            const input = container.querySelector('.descricao-input');
            const novaDescricao = input.value.trim();

            if (!novaDescricao) {
                alert('A descrição é obrigatória!');
                return;
            }

            const formData = new FormData();
            formData.append('opp_descricao', novaDescricao);
            formData.append('_token', '{{ csrf_token() }}');

            fetch(ROUTE(`{{ route("pesquisas.opcoes.update", ["id" => ":id"]) }}`.replace(':id', opcaoId)), {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => {
                        throw new Error(err.message || 'Erro ao salvar opção');
                    });
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    text.textContent = novaDescricao;
                    cancelarEdicaoDescricaoOpcao(opcaoId);
                } else {
                    alert('Erro ao salvar: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                alert('Erro ao salvar opção: ' + (error.message || 'Erro desconhecido'));
            });
        };

        window.cancelarEdicaoDescricaoOpcao = function(opcaoId) {
            const container = document.querySelector(`.opcao-descricao[data-opcao-id="${opcaoId}"]`);
            const text = container.querySelector('.descricao-text');
            const input = container.querySelector('.descricao-input');
            const editBtn = container.querySelector('.edit-descricao');
            const saveBtn = container.querySelector('.save-descricao');
            const cancelBtn = container.querySelector('.cancel-descricao');

            input.value = text.textContent;
            text.style.display = 'inline';
            input.style.display = 'none';
            editBtn.style.display = 'inline-block';
            saveBtn.style.display = 'none';
            cancelBtn.style.display = 'none';
        };

        // Funções de edição de tipo crítico de opção
        window.editarCriticaOpcao = function(opcaoId) {
            const container = document.querySelector(`.opcao-critica[data-opcao-id="${opcaoId}"]`);
            if (!container) return;

            const badge = container.querySelector('.critica-badge');
            const select = container.querySelector('.critica-select');
            const editBtn = container.querySelector('.edit-critica');
            const saveBtn = container.querySelector('.save-critica');
            const cancelBtn = container.querySelector('.cancel-critica');

            badge.style.display = 'none';
            select.style.display = 'inline-block';
            editBtn.style.display = 'none';
            saveBtn.style.display = 'inline-block';
            cancelBtn.style.display = 'inline-block';
        };

        window.salvarCriticaOpcao = function(opcaoId) {
            const container = document.querySelector(`.opcao-critica[data-opcao-id="${opcaoId}"]`);
            const select = container.querySelector('.critica-select');
            const novaCritica = select.value;

            const formData = new FormData();
            formData.append('opp_resposta_critica', novaCritica);
            formData.append('_token', '{{ csrf_token() }}');

            fetch(ROUTE(`{{ route("pesquisas.opcoes.update", ["id" => ":id"]) }}`.replace(':id', opcaoId)), {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => {
                        throw new Error(err.message || 'Erro ao salvar opção');
                    });
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    // Atualizar o badge
                    const badge = container.querySelector('.critica-badge');
                    const criticaTexto = novaCritica === 'S' ? 'Crítica' : 'Normal';
                    const criticaBadge = novaCritica === 'S' ? 'badge-danger' : 'badge-success';
                    const criticaIcon = novaCritica === 'S' ? 'fa-exclamation-triangle' : 'fa-check';

                    badge.className = `badge ${criticaBadge} critica-badge`;
                    badge.setAttribute('data-critica', novaCritica);
                    badge.innerHTML = `<i class="fas ${criticaIcon}"></i> ${criticaTexto}`;

                    cancelarEdicaoCriticaOpcao(opcaoId);
                } else {
                    alert('Erro ao salvar: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                alert('Erro ao salvar opção: ' + (error.message || 'Erro desconhecido'));
            });
        };

        window.cancelarEdicaoCriticaOpcao = function(opcaoId) {
            const container = document.querySelector(`.opcao-critica[data-opcao-id="${opcaoId}"]`);
            const badge = container.querySelector('.critica-badge');
            const select = container.querySelector('.critica-select');
            const editBtn = container.querySelector('.edit-critica');
            const saveBtn = container.querySelector('.save-critica');
            const cancelBtn = container.querySelector('.cancel-critica');

            select.value = badge.getAttribute('data-critica');
            badge.style.display = 'inline-block';
            select.style.display = 'none';
            editBtn.style.display = 'inline-block';
            saveBtn.style.display = 'none';
            cancelBtn.style.display = 'none';
        };

        function adicionarNovaQuestao(pesquisaId) {
            const container = document.querySelector(`#questoes-${pesquisaId}`);

            // Garantir que o container esteja visível
            if (container.style.display === 'none') {
                container.style.display = 'block';
            }

            // Se o container estiver vazio ou só tiver mensagem de "nenhuma questão", limpar primeiro
            const alertInfo = container.querySelector('.alert-info');
            if (alertInfo) {
                alertInfo.remove();
            }

            const novoItem = document.createElement('div');
            novoItem.className = 'questao-item nova-questao';
            novoItem.innerHTML = `
                <div class="questao-header">
                    <div class="row align-items-center">
                        <div class="col-md-1">
                            <i class="fas fa-plus text-success"></i>
                        </div>
                        <div class="col-md-1">
                            <span class="badge badge-info">Novo</span>
                        </div>
                        <div class="col-md-7">
                            <input type="text" class="form-control form-control-sm" placeholder="Descrição da questão" maxlength="255" id="nova-descricao-questao">
                        </div>
                        <div class="col-md-1">
                            <span class="badge badge-secondary">0 opções</span>
                        </div>
                        <div class="col-md-2">
                            <div class="btn-group" role="group">
                                <button class="btn btn-success btn-sm" onclick="salvarNovaQuestao(${pesquisaId})" title="Salvar">
                                    <i class="fas fa-check"></i>
                                </button>
                                <button class="btn btn-secondary btn-sm" onclick="cancelarNovaQuestao()" title="Cancelar">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            container.insertBefore(novoItem, container.firstChild);
            document.getElementById('nova-descricao-questao').focus();
        }

        function salvarNovaQuestao(pesquisaId) {
            const descricao = document.getElementById('nova-descricao-questao').value.trim();

            if (!descricao) {
                alert('A descrição é obrigatória!');
                return;
            }

            const formData = new FormData();
            formData.append('pesquisa_id', pesquisaId);
            formData.append('qpe_descricao', descricao);
            formData.append('_token', '{{ csrf_token() }}');

            fetch(ROUTE('{{ route("pesquisas.questoes.store") }}'), {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => {
                        throw new Error(err.message || 'Erro ao salvar questão');
                    });
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    // Invalidar cache e recarregar questões
                    delete pesquisasData[pesquisaId];
                    carregarQuestoes(pesquisaId);
                } else {
                    alert('Erro ao salvar: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                alert('Erro ao salvar questão: ' + (error.message || 'Erro desconhecido'));
            });
        }

        function cancelarNovaQuestao() {
            document.querySelector('.nova-questao').remove();
        }

        function excluirQuestao(pesquisaId, questaoId, descricao) {
            if (!confirm(`Tem certeza que deseja excluir a questão "${descricao}"?`)) {
                return;
            }

            fetch(ROUTE(`{{ route("pesquisas.questoes.destroy", ["id" => ":id"]) }}`.replace(':id', questaoId)), {
                method: 'DELETE',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => {
                        throw new Error(err.message || 'Erro ao excluir questão');
                    });
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    // Invalidar cache e recarregar questões
                    delete pesquisasData[pesquisaId];
                    carregarQuestoes(pesquisaId);
                } else {
                    alert('Erro ao excluir: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                alert('Erro ao excluir questão: ' + (error.message || 'Erro desconhecido'));
            });
        }

        // ===== CRUD INLINE PARA OPÇÕES =====
        function adicionarNovaOpcao(pesquisaId, questaoId) {
            const container = document.querySelector(`#opcoes-${questaoId}`);
            const novoItem = document.createElement('div');
            novoItem.className = 'opcao-item nova-opcao';
            novoItem.innerHTML = `
                <div class="row align-items-center">
                    <div class="col-md-1">
                        <span class="badge badge-info">Novo</span>
                    </div>
                    <div class="col-md-7">
                        <input type="text" class="form-control form-control-sm" placeholder="Descrição da opção" maxlength="100" id="nova-descricao-opcao">
                    </div>
                    <div class="col-md-2">
                        <select class="form-control form-control-sm" id="nova-critica">
                            <option value="N">Normal</option>
                            <option value="S">Crítica</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <div class="btn-group" role="group">
                            <button class="btn btn-success btn-sm" onclick="salvarNovaOpcao(${pesquisaId}, ${questaoId})" title="Salvar">
                                <i class="fas fa-check"></i>
                            </button>
                            <button class="btn btn-secondary btn-sm" onclick="cancelarNovaOpcao()" title="Cancelar">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `;
            container.insertBefore(novoItem, container.firstChild);
            document.getElementById('nova-descricao-opcao').focus();
        }

        function salvarNovaOpcao(pesquisaId, questaoId) {
            const descricao = document.getElementById('nova-descricao-opcao').value.trim();
            const critica = document.getElementById('nova-critica').value;

            if (!descricao) {
                alert('A descrição é obrigatória!');
                return;
            }

            const formData = new FormData();
            formData.append('questao_id', questaoId);
            formData.append('opp_descricao', descricao);
            formData.append('opp_resposta_critica', critica);
            formData.append('opp_resposta_check', 'N'); // Default
            formData.append('_token', '{{ csrf_token() }}');

            fetch(ROUTE('{{ route("pesquisas.opcoes.store") }}'), {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => {
                        throw new Error(err.message || 'Erro ao salvar opção');
                    });
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    // Remover o formulário de nova opção
                    const novaOpcaoForm = document.querySelector('.nova-opcao');
                    if (novaOpcaoForm) {
                        novaOpcaoForm.remove();
                    }

                    // Garantir que o container de opções esteja aberto
                    const container = document.getElementById('opcoes-' + questaoId);
                    const icon = document.getElementById('icon-questao-' + questaoId);
                    container.style.display = 'block';
                    if (icon) {
                        icon.classList.add('expanded');
                    }

                    // Invalidar cache e recarregar opções
                    delete pesquisasData[pesquisaId];
                    carregarOpcoes(pesquisaId, questaoId);
                } else {
                    alert('Erro ao salvar: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                alert('Erro ao salvar opção: ' + (error.message || 'Erro desconhecido'));
            });
        }

        function cancelarNovaOpcao() {
            document.querySelector('.nova-opcao').remove();
        }

        function excluirOpcao(pesquisaId, questaoId, opcaoId, descricao) {
            if (!confirm(`Tem certeza que deseja excluir a opção "${descricao}"?`)) {
                return;
            }

            fetch(ROUTE(`{{ route("pesquisas.opcoes.destroy", ["id" => ":id"]) }}`.replace(':id', opcaoId)), {
                method: 'DELETE',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => {
                        throw new Error(err.message || 'Erro ao excluir opção');
                    });
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    // Invalidar cache e recarregar opções
                    delete pesquisasData[pesquisaId];
                    carregarOpcoes(pesquisaId, questaoId);
                } else {
                    alert('Erro ao excluir: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                alert('Erro ao excluir opção: ' + (error.message || 'Erro desconhecido'));
            });
        }
    </script>
@stop