@extends('adminlte::page')

@section('title', 'Funil')

@section('content_header')
    <h1>Cadastro de Funil</h1>
@endsection

@section('css')
    <!-- DevExtreme CSS -->
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/23.2.6/css/dx.material.blue.light.css">
    <style>
        .dx-datagrid {
            font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        }
        .badge-status-A {
            background-color: #28a745;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        .badge-status-I {
            background-color: #6c757d;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        .badge-tipo-1 {
            background-color: #007bff;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        .badge-tipo-2 {
            background-color: #17a2b8;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        .badge-tipo-3 {
            background-color: #6c757d;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        #gridChecklistItens {
            flex: 1;
            min-height: 0;
        }
        .checklist-popup-content {
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow: hidden;
        }
        .funil-info-box {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            color: white;
        }
        .funil-info-box h5 {
            margin: 0 0 12px 0;
            color: white;
            font-weight: 600;
            font-size: 18px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .funil-info-box h5 i {
            font-size: 24px;
        }
        .funil-info-box p {
            margin: 8px 0;
            font-size: 14px;
            opacity: 0.95;
        }
        .funil-info-box p strong {
            font-weight: 600;
            margin-right: 5px;
        }
        
        /* Melhorar badges no grid de checklist */
        .badge {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        /* Customizar o popup do checklist */
        .dx-popup-title {
            font-weight: 600;
            font-size: 18px;
        }
        
        /* Melhorar grupos no form */
        .dx-fieldset-header {
            font-weight: 600;
            color: #495057;
            border-bottom: 2px solid #007bff;
            padding-bottom: 8px;
            margin-bottom: 15px;
        }
        
        /* Estilizar o Checkbox (campo obrigatório) */
        .dx-checkbox {
            margin: 15px 0;
        }
        
        .dx-checkbox-icon {
            width: 24px !important;
            height: 24px !important;
            border: 2px solid #dee2e6 !important;
            border-radius: 6px !important;
            transition: all 0.3s ease !important;
        }
        
        .dx-checkbox-checked .dx-checkbox-icon {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
            border-color: #f5576c !important;
            box-shadow: 0 2px 8px rgba(245, 87, 108, 0.4) !important;
        }
        
        .dx-checkbox-text {
            font-size: 15px !important;
            font-weight: 600 !important;
            color: #495057 !important;
            margin-left: 12px !important;
        }
        
        .dx-checkbox:hover .dx-checkbox-icon {
            border-color: #f5576c !important;
            box-shadow: 0 0 0 3px rgba(245, 87, 108, 0.1) !important;
        }
        
        /* Help text customizado */
        .dx-field-item-help-text {
            font-size: 13px;
            color: #6c757d;
            font-style: italic;
            margin-top: 8px;
            padding: 8px 12px;
            background: #f8f9fa;
            border-left: 3px solid #007bff;
            border-radius: 4px;
            pointer-events: none; /* Garantir que não bloqueie cliques */
            z-index: 1;
        }
        
        /* Garantir que o checkbox seja clicável */
        .dx-checkbox {
            pointer-events: auto !important;
            z-index: 10;
            position: relative;
        }
        
        .dx-checkbox-icon {
            pointer-events: auto !important;
            cursor: pointer !important;
        }
        
        .dx-checkbox-text {
            pointer-events: auto !important;
            cursor: pointer !important;
        }
        
        /* Labels melhorados */
        .dx-field-item-label-text {
            font-weight: 600;
            color: #495057;
            font-size: 14px;
        }
        
        /* TextAreas com estilo outlined */
        .dx-texteditor.dx-editor-outlined {
            border: 2px solid #dee2e6;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        .dx-texteditor.dx-editor-outlined:hover {
            border-color: #007bff;
        }
        
        .dx-texteditor.dx-editor-outlined.dx-state-focused {
            border-color: #007bff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }
        
        /* Animação suave para badges */
        .badge {
            transition: all 0.2s ease;
        }
        
        .badge:hover {
            transform: scale(1.05);
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
    </style>
@stop

@section('content')
    <div class="card">
        <div class="card-body">
            <div id="gridContainer"></div>
        </div>
    </div>
@endsection

@section('js')
    <!-- DevExtreme JS -->
    <script src="https://cdn3.devexpress.com/jslib/23.2.6/js/dx.all.js"></script>
    
    <!-- Bibliotecas de Exportação -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.31/jspdf.plugin.autotable.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    
<script>
        // Licença DevExpress
        DevExpress.config({
            licenseKey: "{{ base64_decode('ewogICJmb3JtYXQiOiAxLAogICJjdXN0b21lcklkIjogIjBkY2Y1NDIzLWU0NjEtNGZhZC04ZGU2LWUxYzEyMTUwMGQ2MyIsCiAgIm1heFZlcnNpb25BbGxvd2VkIjogMjUxCn0=.TfDh/WwVBwwNxtb3aqy3/KfmQpqpuuJhdBdejNZyFiS5YXq+OTu5t8MR0XRwbKtgTdMzt45VLacnBeR3Z47nmNBZjGQncPAniSIg5BkK2wl3fHmYFfSGUKkAtaKgN2z5oD29MA==') }}"
        });

        // Configurar locale para Português
        DevExpress.localization.locale('pt-BR');

        $(document).ready(function() {
            let checklistPopup = null;
            let checklistGrid = null;
            let gridFunilInstance = null; // Instância do grid principal

            // Cache local com todos os dados dos funis (mesmos dados da rota)
            let funisDataCache = {}; // Estrutura: { id_funil: {dados completos}, ... }
            
            // Variáveis globais para armazenar dados do funil sendo editado
            let currentEditingFunilId = null;
            let currentEditingFunilData = null;

            // Array único com todos os status da venda (particular + convênio)
            // Nota: Alguns valores podem aparecer em ambos os tipos (ex: value: 10)
            const statusTodos = [
                // Status Particular
                { value: 10, text: 'Particular -Leads Recebidos' },
                { value: 1, text: 'Particular - Em negociação' },
                { value: 2, text: 'Particular - Vendido' },
                { value: 3, text: 'Particular - Perdido' },
                { value: 4, text: 'Particular - Pré Cirurgia' },
                { value: 5, text: 'Particular - Cirurgia' },
                { value: 6, text: 'Particular - Pós Cirurgia' },
                { value: 7, text: 'Particular - Finalizado' },
                { value: 8, text: 'Particular - Inativado' },
                // Status Convênio
                { value: 9, text: 'Convênio - Recebimento de Lead' },
                { value: 10, text: 'Convênio - Em análise' },
                { value: 11, text: 'Convênio - Não Autorizado' },
                { value: 12, text: 'Convênio - Transformado em Particular' },
                { value: 13, text: 'Convênio - Autorizado' },
                { value: 14, text: 'Convênio - Vendido' },
                { value: 15, text: 'Convênio - Perdido' },
                { value: 16, text: 'Convênio - Pré Cirurgia' },
                { value: 17, text: 'Convênio - Cirurgia' },
                { value: 18, text: 'Convênio - Pós Cirurgia' },
                { value: 19, text: 'Convênio - Finalizado' },
                { value: 20, text: 'Convênio - Inativado' }
            ];

            // Array com as opções de tags do funil (baseado no create.blade.php)
            const funilTagOptions = [
                { value: 'PARTICULAR-LEADS-RECEBIDOS', text: 'Particular - Recebimento Lead' },
                { value: 'PARTICULAR-EM-NEGOCIACAO', text: 'Particular - Em negociação' },
                { value: 'PARTICULAR-VENDIDO', text: 'Particular - Vendido' },
                { value: 'PARTICULAR-PERDIDO', text: 'Particular - Perdido' },
                { value: 'PARTICULAR-PRE-CIRURGIA', text: 'Particular - Pré Cirurgia' },
                { value: 'PARTICULAR-CIRURGIA', text: 'Particular - Cirurgia' },
                { value: 'PARTICULAR-POS-CIRURGIA', text: 'Particular - Pós Cirurgia' },
                { value: 'PARTICULAR-FINALIZADO', text: 'Particular - Finalizado' },
                { value: 'CONVENIO-RECEBIMENTO-LEAD', text: 'Convênio - Recebimento de Lead' },
                { value: 'CONVENIO-EM-ANALISE', text: 'Convênio - Em análise' },
                { value: 'CONVENIO-NAO-AUTORIZADO', text: 'Convênio - Não Autorizado' },
                { value: 'CONVENIO-TRANSFORMADO-PARTICULAR', text: 'Convênio - Transformado em Particular' },
                { value: 'CONVENIO-AUTORIZADO', text: 'Convênio - Autorizado' },
                { value: 'CONVENIO-VENDIDO', text: 'Convênio - Vendido' },
                { value: 'CONVENIO-PERDIDO', text: 'Convênio - Perdido' },
                { value: 'CONVENIO-PRE-CIRURGIA', text: 'Convênio - Pré Cirurgia' },
                { value: 'CONVENIO-CIRURGIA', text: 'Convênio - Cirurgia' },
                { value: 'CONVENIO-POS-CIRURGIA', text: 'Convênio - Pós Cirurgia' },
                { value: 'CONVENIO-FINALIZADO', text: 'Convênio - Finalizado' }
            ];

            // ============================
            // GRID PRINCIPAL DE FUNIS
            // ============================
            const gridFunil = $("#gridContainer").dxDataGrid({
                onInitialized: function(e) {
                    // Armazenar instância do grid
                    gridFunilInstance = e.component;
                },
                dataSource: new DevExpress.data.DataSource({
                    store: new DevExpress.data.CustomStore({
                    key: 'id_funil',

                    // CARREGA A LISTA (GRID)
                    load: function(loadOptions) {
                        let params = {};

                        // Paginação
                        params.skip = loadOptions.skip || 0;
                        params.take = loadOptions.take || 10;

                        // Filtros
                        if (loadOptions.filter) {
                            params.filter = JSON.stringify(loadOptions.filter);
                        }

                        // Ordenação
                        if (loadOptions.sort) {
                            params.sort = JSON.stringify(loadOptions.sort);
                        }

                        return $.ajax({
                            url: '{{ route('cadastroFunil.getData') }}',
                            method: 'GET',
                            data: params,
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        }).then(function(response) {
                            // Popular cache local com todos os dados retornados
                            if (response && response.data && Array.isArray(response.data)) {
                                response.data.forEach(function(funil) {
                                    if (funil.id_funil) {
                                        funisDataCache[funil.id_funil] = funil;
                                    }
                                });
                            }

                            // DevExtreme espera um objeto com { data, totalCount } quando usa remoteOperations
                            return {
                                data: response.data,
                                totalCount: response.total // ajuste conforme o que sua API retorna
                            };
                        });
                    },

                    // CARREGA 1 REGISTRO PELO ID QUANDO CLICA EM "EDITAR"
                    byKey: function(key) {
                        console.log('🔑 byKey chamado para:', key, funisDataCache[key]);

                        // Se já estiver no cache (linha que você clicou está na página atual)
                        if (funisDataCache[key]) {
                            return $.Deferred()
                                .resolve(funisDataCache[key])
                                .promise();
                        }

                        // Fallback: se precisar, pode chamar uma rota específica pra buscar um único funil
                        // Se não tiver essa rota ainda, por enquanto você pode só rejeitar:
                        return $.Deferred()
                            .reject('Registro não encontrado no cache')
                            .promise();
                    },
                    // INSERT
                    insert: function(values) {
                        // Garantir que funil_inicial seja sempre boolean
                        if (values.hasOwnProperty('funil_inicial')) {
                            values.funil_inicial = Boolean(values.funil_inicial);
                        }
                        
                        var ajaxRequest = $.ajax({
                            url: '{{ route('cadastroFunil.store') }}',
                            method: 'POST',
                            data: values,
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        });
                        
                        ajaxRequest.fail(function(xhr) {
                            if (xhr.status === 422) {
                                let errorMsg = '';
                                if (xhr.responseJSON && xhr.responseJSON.message) {
                                    // Mensagem de erro do backend (ex: conflito de funil_inicial)
                                    errorMsg = xhr.responseJSON.message;
                                } else if (xhr.responseJSON && xhr.responseJSON.errors) {
                                    // Erros de validação
                                    errorMsg = Object.values(xhr.responseJSON.errors).flat().join('\n');
                                } else {
                                    errorMsg = 'Erro ao salvar o registro';
                                }
                                DevExpress.ui.notify(errorMsg, 'error', 5000);
                            }
                        });
                        
                        return ajaxRequest;
                    },

                    // UPDATE
                    update: function(key, values) {
                        // Garantir que funil_inicial seja sempre boolean
                        // if (values.hasOwnProperty('funil_inicial')) {
                        //     values.funil_inicial = Boolean(values.funil_inicial);
                        // }
                        
                        var ajaxRequest = $.ajax({
                            url: '{{ route('cadastroFunil.update', '') }}/' + key,
                            method: 'PUT',
                            data: values,
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        });
                        
                        ajaxRequest.fail(function(xhr) {
                            if (xhr.status === 422) {
                                let errorMsg = '';
                                if (xhr.responseJSON && xhr.responseJSON.message) {
                                    // Mensagem de erro do backend (ex: conflito de funil_inicial)
                                    errorMsg = xhr.responseJSON.message;
                                } else if (xhr.responseJSON && xhr.responseJSON.errors) {
                                    // Erros de validação
                                    errorMsg = Object.values(xhr.responseJSON.errors).flat().join('\n');
                                } else {
                                    errorMsg = 'Erro ao salvar o registro';
                                }
                                DevExpress.ui.notify(errorMsg, 'error', 5000);
                            }
                        });
                        
                        return ajaxRequest;
                    }
                })

                }),
                
                remoteOperations: {
                    paging: true,
                    filtering: true,
                    sorting: true
                },
                
                showBorders: true,
                showRowLines: true,
                showColumnLines: true,
                rowAlternationEnabled: true,
                hoverStateEnabled: true,
                
                // Configurações de edição em Português
                editing: {
                    mode: 'popup',
                    allowAdding: true,
                    allowUpdating: true,
                    allowDeleting: false,
                    useIcons: true,
                    popup: {
                        title: 'DADOS DO FUNIL',
                        showTitle: true,
                        width: 600,
                        height: 500,
                    },
                    texts: {
                        addRow: 'Adicionar',
                        editRow: 'Editar',
                        saveRowChanges: 'Salvar',
                        cancelRowChanges: 'Cancelar',
                        confirmDeleteMessage: 'Tem certeza que deseja excluir este registro?',
                        validationCancelChanges: 'Cancelar alterações'
                    },
                    form: {
                        items: [
                            {
                                itemType: 'group',
                                colCount: 2,
                                colSpan: 2,
                                items: [
                                    {
                                        dataField: 'funil_nome',
                                        colSpan: 2,
                                        validationRules: [
                                            { type: 'required', message: 'O nome é obrigatório' }
                                        ]
                                    },
                                    {
                                        dataField: 'funil_tag',
                                        label: {
                                            text: 'Tag'
                                        },
                                        colSpan: 2,
                                        editorType: 'dxSelectBox',
                                        editorOptions: {
                                            dataSource: funilTagOptions,
                                            displayExpr: 'text',
                                            valueExpr: 'value',
                                            searchEnabled: true,
                                            searchMode: 'contains',
                                            placeholder: 'Selecione a tag...',
                                            showClearButton: false
                                        },
                                        validationRules: [
                                            { type: 'required', message: 'A tag é obrigatória' }
                                        ]
                                    },
                                    {
                                        dataField: 'vd_tipo',
                                        colSpan: 1,
                                        validationRules: [
                                            { type: 'required', message: 'O tipo da venda é obrigatório' }
                                        ]
                                    },
                                    {
                                        dataField: 'vd_status',
                                        label: {
                                            text: 'Status da Venda'
                                        },
                                        colSpan: 1,
                                        editorType: 'dxSelectBox',
                                        editorOptions: {
                                            dataSource: statusTodos, // todos os status (particular + convênio)
                                            displayExpr: 'text',
                                            valueExpr: 'value',
                                            searchEnabled: true,
                                            searchMode: 'contains',
                                            placeholder: 'Selecione o status...'
                                        },
                                        validationRules: [
                                            { type: 'required', message: 'O status da venda é obrigatório' }
                                        ]
                                    },
                                    {
                                        dataField: 'funil_inicial',
                                        colSpan: 2,
                                        editorType: 'dxCheckBox',
                                        editorOptions: {
                                            text: 'Marcar como funil inicial',
                                            hint: 'Marque essa opção quando o funil for o primeiro funil da venda'
                                        }
                                    }
                                ]
                            }
                        ]
                    }
                },
                
                // Inicializar valores padrão na criação
                onInitNewRow: function(e) {
                    e.data.vd_tipo = null;
                    e.data.vd_status = null;
                    e.data.funil_inicial = false;
                },
                
                // Evento chamado quando a edição começa (popup abre)
                onEditingStart: function(e) {
                    // Armazenar dados do funil sendo editado globalmente
                    if (e.data && e.data.id_funil) {
                        currentEditingFunilId = e.data.id_funil;
                        currentEditingFunilData = Object.assign({}, e.data);
                        
                        // Atualizar cache com dados da linha sendo editada
                        funisDataCache[e.data.id_funil] = Object.assign({}, funisDataCache[e.data.id_funil] || {}, e.data);
                    } else {
                        // Para novo registro, limpar variáveis
                        currentEditingFunilId = null;
                        currentEditingFunilData = null;
                    }
                },
                
                // Evento chamado ANTES que o editor é criado (permite configurar opções)
                onEditorPreparing: function(e) {
                    // Quando o editor de STATUS for criado no form do popup
                    if (e.parentType === 'form' && e.dataField === 'vd_status') {
                        // Sempre carregar todos os status (particular + convênio)
                        e.editorOptions.dataSource = statusTodos;
                        e.editorOptions.displayExpr = 'text';
                        e.editorOptions.valueExpr = 'value';
                        e.editorOptions.searchEnabled = true;
                        e.editorOptions.searchMode = 'contains';
                    }
                },
                
                // Paginação em Português
                paging: {
                    enabled: true,
                    pageSize: 10
                },
                
                pager: {
                    visible: true,
                    showPageSizeSelector: true,
                    allowedPageSizes: [10, 20, 50, 100],
                    showInfo: true,
                    showNavigationButtons: true,
                    displayMode: 'full',
                    infoText: 'Página {0} de {1} ({2} itens)'
                },
                
                // Filtros em Português
                filterRow: {
                    visible: true,
                    applyFilter: 'auto',
                    applyFilterText: 'Aplicar filtro',
                    resetOperationText: 'Limpar',
                    operationDescriptions: {
                        equal: 'Igual',
                        notEqual: 'Diferente',
                        lessThan: 'Menor que',
                        lessThanOrEqual: 'Menor ou igual',
                        greaterThan: 'Maior que',
                        greaterThanOrEqual: 'Maior ou igual',
                        contains: 'Contém',
                        notContains: 'Não contém',
                        startsWith: 'Começa com',
                        endsWith: 'Termina com',
                        between: 'Entre'
                    }
                },
                
                headerFilter: {
                    visible: true,
                    texts: {
                        ok: 'OK',
                        cancel: 'Cancelar',
                        emptyValue: '(Vazio)'
                    }
                },
                
                searchPanel: {
                    visible: true,
                    width: 240,
                    placeholder: 'Pesquisar...',
                    text: ''
                },
                
                // Colunas
                columns: [
                    {
                        dataField: 'id_funil',
                        caption: 'Código',
                        width: 80,
                        alignment: 'center',
                        allowEditing: false
                    },
                    {
                        dataField: 'funil_nome',
                        caption: 'Nome do Funil',
                        validationRules: [
                            { type: 'required', message: 'O nome é obrigatório' },
                            { type: 'stringLength', max: 255, message: 'Máximo 255 caracteres' }
                        ]
                    },
                    {
                        dataField: 'funil_tag',
                        caption: 'Tag',
                        width: 200,
                        validationRules: [
                            { type: 'required', message: 'A tag é obrigatória' },
                            { type: 'stringLength', max: 100, message: 'Máximo 100 caracteres' }
                        ]
                    },
                    {
                        dataField: 'vd_tipo',
                        caption: 'Tipo da Venda',
                        width: 180,
                        alignment: 'center',
                        lookup: {
                            dataSource: [
                                { value: 1, text: 'Particular' },
                                { value: 2, text: 'Convênio' }
                                // { value: 3, text: 'Particular/Convênio' }
                            ],
                            valueExpr: 'value',
                            displayExpr: 'text'
                        },
                        cellTemplate: function(container, options) {
                            let badgeClass = 'badge-tipo-' + options.value;
                            let badgeText = options.data.vd_tipo_label;
                            container.html('<span class="' + badgeClass + '">' + badgeText + '</span>');
                        },
                        validationRules: [
                            { type: 'required', message: 'Selecione o tipo' }
                        ]
                    },
                    {
                        dataField: 'vd_status',
                        caption: 'Status da Venda',
                        width: 200,
                        alignment: 'center',
                        cellTemplate: function(container, options) {
                            // Buscar o texto correto no array statusTodos
                            let statusText = options.data.vd_status_label || 'Status ' + options.value;
                            
                            // Se não tiver label do backend, buscar no array statusTodos
                            if (!options.data.vd_status_label) {
                                const statusItem = statusTodos.find(function(item) {
                                    return item.value === options.value;
                                });
                                if (statusItem) {
                                    statusText = statusItem.text;
                                }
                            }
                            
                            // Todos os badges na cor azul
                            container.html(`
                                <span class="badge badge-primary" style="
                                    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
                                    color: white;
                                    padding: 6px 12px;
                                    font-size: 11px;
                                    font-weight: 600;
                                    border-radius: 4px;
                                    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
                                ">${statusText}</span>
                            `);
                        },
                        validationRules: [
                            { type: 'required', message: 'Selecione o status' }
                        ]
                    },
                    {
                        dataField: 'funil_inicial',
                        dataType: 'boolean',
                        width: 200,
                        alignment: 'center',
                        allowEditing: true,
                        trueText: 'Sim',
                        falseText: 'Não',
                        headerFilter: {
                            dataSource: [
                                { text: 'Sim', value: true },
                                { text: 'Não', value: false }
                            ],
                            displayExpr: 'text',
                            valueExpr: 'value'
                        },
                        cellTemplate: function(container, options) {
                            // Garantir que o valor seja tratado como boolean
                            const value = Boolean(options.value);
                            if (value) {
                                container.html(`
                                    <span class="badge" style="
                                        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
                                        color: white;
                                        padding: 6px 12px;
                                        font-size: 11px;
                                        font-weight: 600;
                                        border-radius: 4px;
                                        box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
                                    ">
                                        <i class="fas fa-check-circle"></i> SIM
                                    </span>
                                `);
                            } else {
                                container.html(`
                                    <span class="badge" style="
                                        background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
                                        color: white;
                                        padding: 6px 12px;
                                        font-size: 11px;
                                        font-weight: 600;
                                        border-radius: 4px;
                                    ">
                                        <i class="fas fa-times-circle"></i> NÃO
                                    </span>
                                `);
                            }
                        }
                    },
                    {
                        type: 'buttons',
                        caption: 'Ações',
                        width: 150,
                        buttons: [
                            'edit',
                            {
                                hint: 'Gerenciar Checklist',
                                icon: 'fas fa-tasks',
                                text: 'Checklist',
                                onClick: function(e) {
                                    openChecklistModal(e.row.data);
                                }
                            }
                        ]
                    }
                ],
                
                // Exportação
                export: {
                    enabled: true,
                    formats: ['xlsx'],
                    allowExportSelectedData: true,
                    texts: {
                        exportTo: 'Exportar para',
                        exportAll: 'Exportar tudo',
                        exportSelectedRows: 'Exportar selecionados'
                    }
                },
                
                // Seleção
                selection: {
                    mode: 'single'
                },
                
                // Resumo em Português
                summary: {
                    totalItems: [
                        {
                            column: 'id_funil',
                            summaryType: 'count',
                            displayFormat: '{0} funil(is)'
                        }
                    ]
                },
                
                // Eventos
                onRowInserted: function(e) {
                    // Atualizar cache local com o novo registro
                    if (e.data && e.data.id_funil) {
                        funisDataCache[e.data.id_funil] = e.data;
                    }
                    DevExpress.ui.notify('Funil cadastrado com sucesso!', 'success', 3000);
                },
                
                onRowUpdated: function(e) {
                    // Atualizar cache local com os dados atualizados
                    if (e.data && e.data.id_funil) {
                        // Mesclar dados atualizados com dados existentes no cache
                        const existingData = funisDataCache[e.data.id_funil] || {};
                        funisDataCache[e.data.id_funil] = Object.assign({}, existingData, e.data);
                    }
                    DevExpress.ui.notify('Funil atualizado com sucesso!', 'success', 3000);
                },
                
                // Mensagens de carregamento em Português
                loadPanel: {
                    enabled: true,
                    text: 'Carregando...'
                },
                
                noDataText: 'Nenhum registro encontrado'
            });

            // ============================
            // MODAL CHECKLIST
            // ============================
            function openChecklistModal(funilData) {
                const popupContent = $('<div>').addClass('checklist-popup-content');
                
                // Info box do funil com design melhorado
                const statusBadge = funilData.vd_status === 'A' 
                    ? '<span class="badge badge-success" style="padding: 6px 12px; font-size: 12px;">✓ ATIVO</span>'
                    : '<span class="badge badge-secondary" style="padding: 6px 12px; font-size: 12px;">✕ INATIVO</span>';
                
                const tipoBadgeColor = funilData.vd_tipo === 1 ? 'primary' : (funilData.vd_tipo === 2 ? 'info' : 'secondary');
                const tipoBadge = `<span class="badge badge-${tipoBadgeColor}" style="padding: 6px 12px; font-size: 12px;">${funilData.vd_tipo_label}</span>`;
                
                const infoBox = $('<div>').addClass('funil-info-box').html(`
                    <h5>
                        <i class="fas fa-clipboard-list"></i>
                        ${funilData.funil_nome}
                    </h5>
                    <div style="display: flex; gap: 20px; flex-wrap: wrap;">
                        <p style="margin: 0;">
                            <strong><i class="fas fa-tag"></i> Tag:</strong> 
                            <span style="background: rgba(255,255,255,0.2); padding: 4px 10px; border-radius: 4px; display: inline-block;">
                                ${funilData.funil_tag || 'Sem tag'}
                            </span>
                        </p>
                        <p style="margin: 0;">
                            <strong><i class="fas fa-list-alt"></i> Tipo:</strong> 
                            ${tipoBadge}
                        </p>
                        <p style="margin: 0;">
                            <strong><i class="fas fa-toggle-on"></i> Status:</strong> 
                            ${statusBadge}
                        </p>
                    </div>
                `);
                
                // Grid container
                const gridContainer = $('<div>').attr('id', 'gridChecklistItens');
                
                popupContent.append(infoBox).append(gridContainer);

                // Criar popup
                if (checklistPopup) {
                    checklistPopup.dispose();
                }

                checklistPopup = $('<div>').appendTo('body').dxPopup({
                    title: '📋 #'+ funilData.id_funil +' - Gerenciar Checklist',
                    width: '95%',
                    height: '90%',
                    maxWidth: '100%',
                    maxHeight: '100%',
                    contentTemplate: function() {
                        return popupContent;
                    },
                    showCloseButton: true,
                    dragEnabled: true,
                    resizeEnabled: true,
                    toolbarItems: [
                        // {
                        //     widget: 'dxButton',
                        //     location: 'after',
                        //     toolbar: 'bottom',
                        //     options: {
                        //         text: 'Fechar',
                        //         icon: 'close',
                        //         type: 'normal',
                        //         onClick: function() {
                        //             checklistPopup.hide();
                        //         }
                        //     }
                        // }
                    ],
                    onShown: function() {
                        initChecklistGrid(funilData);
                        
                        // Calcular e aplicar altura do grid dinamicamente
                        setTimeout(function() {
                            const popupElement = checklistPopup.element();
                            const popupContent = $(popupElement).find('.checklist-popup-content');
                            const infoBox = popupContent.find('.funil-info-box');
                            const gridContainer = $('#gridChecklistItens');
                            
                            if (popupContent.length && gridContainer.length) {
                                // Obter altura do popup
                                const popupHeight = $(popupElement).height();
                                // Obter altura do título do popup
                                const popupTitleHeight = $(popupElement).find('.dx-popup-title').outerHeight() || 0;
                                // Obter altura do toolbar do popup (botão fechar)
                                const popupToolbarHeight = $(popupElement).find('.dx-popup-bottom').outerHeight() || 0;
                                // Obter altura do padding do conteúdo
                                const popupContentPadding = 40; // padding interno do popup
                                // Obter altura do infoBox
                                const infoBoxHeight = infoBox.outerHeight() || 0;
                                // Obter margem entre infoBox e grid
                                const marginBetween = 20;
                                
                                // Calcular altura disponível para o grid
                                const availableHeight = popupHeight - popupTitleHeight - popupToolbarHeight - popupContentPadding - infoBoxHeight - marginBetween;
                                
                                // Aplicar altura ao grid
                                if (availableHeight > 0) {
                                    gridContainer.css('height', availableHeight + 'px');
                                    // Atualizar o grid para recalcular seu layout
                                    if (checklistGrid) {
                                        checklistGrid.repaint();
                                    }
                                }
                            }
                        }, 100);
                    },
                    onHidden: function() {
                        if (checklistGrid) {
                            checklistGrid.dispose();
                            checklistGrid = null;
                        }
                        $(this.element()).remove();
                    }
                }).dxPopup('instance');

                checklistPopup.show();
            }

            // ============================
            // GRID DE CHECKLIST ITENS
            // ============================
            function initChecklistGrid(funilData) {
                const funilId = funilData.id_funil;
                
                // Montar objeto com todos os dados do funil que devem ser enviados no INSERT
                const funilPayload = {
                    id_funil: funilData.id_funil,
                    funil_nome: funilData.funil_nome,
                    funil_tag: funilData.funil_tag,
                    vd_tipo: funilData.vd_tipo,
                    vd_status: funilData.vd_status,
                    vd_tipo_label: funilData.vd_tipo_label,
                    vd_status_label: funilData.vd_status_label
                };
                
                // DataSource de prestadores (criado uma vez, reutilizado no form e lookup)
                const prestadoresDataSource = new DevExpress.data.CustomStore({
                    key: 'id_cg',
                    load: function() {
                        return $.getJSON('{{ url("painel/funil/checklist/prestadores") }}');
                    },
                    byKey: function(key) {
                        // Buscar prestador específico pelo id_cg
                        return $.getJSON('{{ url("painel/funil/checklist/prestadores") }}').then(function(prestadores) {
                            return prestadores.find(function(p) {
                                return p.id_cg === key;
                            });
                        });
                    }
                });
                
                const customDataSource = new DevExpress.data.CustomStore({
                    key: 'id',
                    load: function() {
                        return $.getJSON('{{ url("painel/funil") }}/' + funilId + '/checklist/itens');
                    },
                    byKey: function(key) {
                        // Buscar item específico pelo key
                        return $.getJSON('{{ url("painel/funil") }}/' + funilId + '/checklist/itens').then(function(items) {
                            return items.find(function(item) {
                                return item.id === key;
                            });
                        });
                    },
                    insert: function(values) {
                        // Montar objeto completo com dados do funil + defaults + valores do form
                        const dataToSend = Object.assign(
                            {},
                            funilPayload,      // dados completos do funil
                            {
                                ativo: true,   // default ao criar
                                feito: false,  // default ao criar
                            },
                            values             // dados do item: descricao, obrigatorio, observacao, etc.
                        );
                        
                        // Garantir valores padrão
                        if (dataToSend.obrigatorio === undefined) dataToSend.obrigatorio = false;
                        if (dataToSend.observacao === undefined) dataToSend.observacao = null;
                
                        
                        return $.ajax({
                            url: '{{ url("painel/funil") }}/' + funilId + '/checklist/itens',
                            method: 'POST',
                            data: JSON.stringify(dataToSend),
                            contentType: 'application/json',
                            dataType: 'json',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        }).fail(function(xhr) {
                            handleError(xhr, 'Erro ao criar item');
                        });
                    },
                    update: function(key, values) {
                        console.log('🔄 [UPDATE] Iniciando update - key:', key);
                        console.log('📝 [UPDATE] Valores alterados (values):', values);
                        console.log('📝 [UPDATE] Tipo de id_cg em values:', typeof values.id_cg, 'Valor:', values.id_cg);
                        
                        // Buscar o item completo diretamente (mesma lógica do byKey)
                        // Isso garante que todos os campos sejam enviados, mesmo que não tenham sido alterados
                        return $.getJSON('{{ url("painel/funil") }}/' + funilId + '/checklist/itens').then(function(items) {
                            const fullItem = items.find(function(item) {
                                return item.id === key;
                            });
                            
                            console.log('📦 [UPDATE] Item completo (fullItem):', fullItem);
                            console.log('📦 [UPDATE] id_cg no fullItem:', fullItem ? fullItem.id_cg : 'N/A');
                            
                            if (!fullItem) {
                                return Promise.reject(new Error('Item não encontrado'));
                            }
                            
                            // Mesclar os valores alterados com o item completo
                            // Isso garante que todos os campos sejam enviados, mesmo que não tenham sido alterados
                            const dataToSend = Object.assign({}, fullItem, values);
                            
                            console.log('🔀 [UPDATE] Após mesclar (dataToSend):', dataToSend);
                            console.log('🔀 [UPDATE] id_cg após mesclar:', dataToSend.id_cg, 'Tipo:', typeof dataToSend.id_cg);
                            
                            // Garantir que todos os campos necessários estejam presentes
                            if (dataToSend.obrigatorio === undefined) {
                                dataToSend.obrigatorio = false;
                            }
                            if (dataToSend.feito === undefined) {
                                dataToSend.feito = false;
                            }
                            if (dataToSend.observacao === undefined) {
                                dataToSend.observacao = null;
                            }
                            // NÃO forçar id_cg para null se ele vier como string vazia de values
                            // Apenas se realmente não existir
                            if (dataToSend.id_cg === undefined) {
                                dataToSend.id_cg = null;
                            } else if (dataToSend.id_cg === '') {
                                // Se for string vazia, converter para null
                                dataToSend.id_cg = null;
                            }
                            
                            console.log('✅ [UPDATE] Dados finais para enviar:', dataToSend);
                            console.log('✅ [UPDATE] id_cg final:', dataToSend.id_cg);
                            
                            return $.ajax({
                                url: '{{ url("painel/funil") }}/' + funilId + '/checklist/itens/' + key,
                                method: 'PUT',
                                data: JSON.stringify(dataToSend),
                                contentType: 'application/json',
                                dataType: 'json',
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                }
                            }).fail(function(xhr) {
                                handleError(xhr, 'Erro ao atualizar item');
                            });
                        });
                    },
                    remove: function(key) {
                        return $.ajax({
                            url: '{{ url("painel/funil") }}/' + funilId + '/checklist/itens/' + key,
                            method: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        }).done(function(response) {
                            DevExpress.ui.notify(response.message || 'Item excluído com sucesso', 'success', 2000);
                        }).fail(function(xhr) {
                            handleError(xhr, 'Erro ao excluir item');
                        });
                    }
                });

                checklistGrid = $('#gridChecklistItens').dxDataGrid({
                    dataSource: customDataSource,
                    showBorders: true,
                    showRowLines: true,
                    showColumnLines: true,
                    rowAlternationEnabled: true,
                    columnAutoWidth: true,
                    hoverStateEnabled: true,
                    
                    editing: {
                        mode: 'popup',
                        allowAdding: true,
                        allowUpdating: true,
                        allowDeleting: false, // Não permite exclusão, apenas inativação
                        useIcons: true,
                        popup: {
                            title: 'Item do Checklist',
                            showTitle: true,
                            width: 700,
                            height: 550,
                            position: {
                                my: 'center',
                                at: 'center',
                                of: window
                            }
                        },
                        texts: {
                            addRow: 'Adicionar Item',
                            editRow: 'Editar Item',
                            saveRowChanges: 'Salvar',
                            cancelRowChanges: 'Cancelar',
                            deleteRow: 'Excluir',
                            confirmDeleteMessage: 'Tem certeza que deseja excluir este item do checklist?',
                            confirmDeleteTitle: 'Confirmar Exclusão'
                        },
                        form: {
                            colCount: 1,
                            items: [
                                {
                                    itemType: 'group',
                                    caption: 'Informações do Item',
                                    colCount: 1,
                                    items: [
                                        {
                                            dataField: 'descricao',
                                            label: { 
                                                text: 'Descrição do Item',
                                                location: 'top'
                                            },
                                            editorType: 'dxTextArea',
                                            editorOptions: { 
                                                height: 120,
                                                maxLength: 255,
                                                placeholder: 'Descreva detalhadamente o item do checklist...',
                                                stylingMode: 'outlined'
                                            },
                                            validationRules: [
                                                { 
                                                    type: 'required', 
                                                    message: 'A descrição é obrigatória' 
                                                },
                                                { 
                                                    type: 'stringLength', 
                                                    max: 255, 
                                                    message: 'A descrição deve ter no máximo 255 caracteres' 
                                                }
                                            ]
                                        },
                                        {
                                            dataField: 'obrigatorio',
                                            label: { 
                                                text: 'Classificação do Item',
                                                location: 'top'
                                            },
                                            editorType: 'dxCheckBox',
                                            editorOptions: {
                                                text: 'Marcar como item OBRIGATÓRIO',
                                                hint: 'Defina se este item é obrigatório ou opcional'
                                            },
                                            helpText: '💡 Marque esta opção se o item deve ser obrigatoriamente concluído antes de finalizar o processo'
                                        },
                                        {
                                            dataField: 'id_cg',
                                            label: { 
                                                text: 'Prestador',
                                                location: 'top'
                                            },
                                            editorType: 'dxSelectBox',
                                            editorOptions: {
                                                dataSource: prestadoresDataSource,
                                                displayExpr: 'cg_nome',
                                                valueExpr: 'id_cg',
                                                searchEnabled: true,
                                                searchMode: 'contains',
                                                placeholder: 'Selecione um prestador (opcional)...',
                                                showClearButton: true,
                                                allowClear: true
                                            },
                                            helpText: '💡 Selecione o prestador responsável por este item (opcional)'
                                        }
                                    ]
                                },
                                {
                                    itemType: 'group',
                                    caption: 'Observações Adicionais',
                                    colCount: 1,
                                    items: [
                                        {
                                            dataField: 'observacao',
                                            label: { 
                                                text: 'Observação',
                                                location: 'top'
                                            },
                                            editorType: 'dxTextArea',
                                            editorOptions: { 
                                                height: 140,
                                                maxLength: 1000,
                                                placeholder: 'Adicione observações, instruções ou detalhes importantes sobre este item (opcional)...',
                                                stylingMode: 'outlined'
                                            },
                                            validationRules: [
                                                { 
                                                    type: 'stringLength', 
                                                    max: 1000, 
                                                    message: 'A observação deve ter no máximo 1000 caracteres' 
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        },
                    },

                    columns: [
                        {
                            dataField: 'id',
                            caption: '#',
                            width: 60,
                            alignment: 'center',
                            allowEditing: false,
                            sortOrder: 'desc'
                        },
                        {
                            dataField: 'ativo',
                            caption: 'Status',
                            dataType: 'boolean',
                            width: 110,
                            alignment: 'center',
                            allowEditing: false,
                            cellTemplate: function(container, options) {
                                if (options.value) {
                                    container.html(`
                                        <span class="badge" style="
                                            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
                                            color: white;
                                            padding: 6px 14px;
                                            border-radius: 20px;
                                            font-weight: 600;
                                            font-size: 10px;
                                            letter-spacing: 0.5px;
                                            box-shadow: 0 2px 8px rgba(79, 172, 254, 0.3);
                                        ">
                                            <i class="fas fa-check-circle"></i> ATIVO
                                        </span>
                                    `);
                                } else {
                                    container.html(`
                                        <span class="badge" style="
                                            background: linear-gradient(135deg, #868f96 0%, #596164 100%);
                                            color: white;
                                            padding: 6px 14px;
                                            border-radius: 20px;
                                            font-weight: 600;
                                            font-size: 10px;
                                            letter-spacing: 0.5px;
                                            box-shadow: 0 2px 8px rgba(89, 97, 100, 0.3);
                                        ">
                                            <i class="fas fa-times-circle"></i> INATIVO
                                        </span>
                                    `);
                                }
                            }
                        },
                        {
                            dataField: 'descricao',
                            caption: 'Descrição do Item',
                            minWidth: 300,
                            validationRules: [
                                { type: 'required', message: 'A descrição é obrigatória' },
                                { type: 'stringLength', max: 255, message: 'Máximo 255 caracteres' }
                            ],
                            cellTemplate: function(container, options) {
                                const opacity = options.data.ativo ? '1' : '0.5';
                                container.html(`<span style="opacity: ${opacity}">${options.value}</span>`);
                            }
                        },
                        {
                            dataField: 'obrigatorio',
                            caption: 'Tipo',
                            dataType: 'boolean',
                            width: 140,
                            alignment: 'center',
                            cellTemplate: function(container, options) {
                                const opacity = options.data.ativo ? '1' : '0.5';
                                if (options.value) {
                                    container.html(`
                                        <span class="badge" style="
                                            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
                                            color: white;
                                            padding: 8px 16px;
                                            border-radius: 20px;
                                            font-weight: 600;
                                            font-size: 11px;
                                            letter-spacing: 0.5px;
                                            box-shadow: 0 2px 8px rgba(245, 87, 108, 0.3);
                                            opacity: ${opacity};
                                        ">
                                            <i class="fas fa-star"></i> OBRIGATÓRIO
                                        </span>
                                    `);
                                } else {
                                    container.html(`
                                        <span class="badge" style="
                                            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
                                            color: #495057;
                                            padding: 8px 16px;
                                            border-radius: 20px;
                                            font-weight: 600;
                                            font-size: 11px;
                                            letter-spacing: 0.5px;
                                            box-shadow: 0 2px 8px rgba(168, 237, 234, 0.3);
                                            opacity: ${opacity};
                                        ">
                                            <i class="far fa-circle"></i> OPCIONAL
                                        </span>
                                    `);
                                }
                            }
                        },
                        {
                            dataField: 'id_cg',
                            caption: 'Prestador',
                            minWidth: 200,
                            lookup: {
                                dataSource: prestadoresDataSource,
                                valueExpr: 'id_cg',
                                displayExpr: 'cg_nome'
                            },
                            cellTemplate: function(container, options) {
                                const opacity = options.data.ativo ? '1' : '0.5';
                                // Buscar o nome do prestador no dataSource
                                const prestadorNome = options.data.prestador_nome || options.displayValue;
                                
                                if (prestadorNome && prestadorNome.length > 0) {
                                    container.html(`
                                        <div style="
                                            padding: 6px 12px;
                                            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                                            color: white;
                                            border-radius: 20px;
                                            font-size: 12px;
                                            font-weight: 600;
                                            opacity: ${opacity};
                                            display: inline-block;
                                        ">
                                            <i class="fas fa-user-md" style="margin-right: 6px;"></i>
                                            ${prestadorNome}
                                        </div>
                                    `);
                                } else {
                                    container.html(`
                                        <span style="
                                            color: #6c757d;
                                            font-style: italic;
                                            opacity: ${opacity};
                                        ">
                                            <i class="fas fa-minus" style="margin-right: 4px;"></i>
                                            Não informado
                                        </span>
                                    `);
                                }
                            }
                        },
                        // {
                        //     dataField: 'observacao',
                        //     caption: 'Observação',
                        //     minWidth: 250,
                        //     cellTemplate: function(container, options) {
                        //         const opacity = options.data.ativo ? '1' : '0.5';
                        //         if (options.value && options.value.length > 0) {
                        //             const shortText = options.value.length > 50 
                        //                 ? options.value.substring(0, 50) + '...' 
                        //                 : options.value;
                        //             container.html(`
                        //                 <div style="
                        //                     padding: 6px 12px;
                        //                     background: #f8f9fa;
                        //                     border-left: 3px solid #007bff;
                        //                     border-radius: 4px;
                        //                     font-size: 13px;
                        //                     line-height: 1.4;
                        //                     opacity: ${opacity};
                        //                 " title="${options.value}">
                        //                     <i class="fas fa-info-circle" style="color: #007bff; margin-right: 6px;"></i>
                        //                     ${shortText}
                        //                 </div>
                        //             `);
                        //         } else {
                        //             container.html(`
                        //                 <span style="
                        //                     color: #adb5bd;
                        //                     font-style: italic;
                        //                     font-size: 12px;
                        //                     opacity: ${opacity};
                        //                 ">
                        //                     <i class="far fa-file-alt"></i> Sem observação
                        //                 </span>
                        //             `);
                        //         }
                        //     }
                        // },
                        {
                            type: 'buttons',
                            caption: 'Ações',
                            width: 120,
                            buttons: [
                                'edit',
                                {
                                    hint: 'Inativar/Reativar item',
                                    icon: 'refresh',
                                    visible: function(e) {
                                        return true; // Sempre visível
                                    },
                                    onClick: function(e) {
                                        const item = e.row.data;
                                        const isAtivo = item.ativo;
                                        const action = isAtivo ? 'inativar' : 'reativar';
                                        const message = isAtivo 
                                            ? 'Tem certeza que deseja INATIVAR este item?' 
                                            : 'Deseja REATIVAR este item?';
                                        
                                        const result = DevExpress.ui.dialog.confirm(message, 'Confirmar');
                                        result.done(function(dialogResult) {
                                            if (dialogResult) {
                                                if (isAtivo) {
                                                    // Inativar
                                                    $.ajax({
                                                        url: '{{ url("painel/funil") }}/' + item.id_funil + '/checklist/itens/' + item.id,
                                                        method: 'DELETE',
                                                        headers: {
                                                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                                        }
                                                    }).done(function(response) {
                                                        DevExpress.ui.notify(response.message, 'warning', 3000);
                                                        checklistGrid.refresh();
                                                    }).fail(function(xhr) {
                                                        handleError(xhr, 'Erro ao inativar item');
                                                    });
                                                } else {
                                                    // Reativar
                                                    $.ajax({
                                                        url: '{{ url("painel/funil") }}/' + item.id_funil + '/checklist/itens/' + item.id + '/reativar',
                                                        method: 'PATCH',
                                                        headers: {
                                                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                                        }
                                                    }).done(function(response) {
                                                        DevExpress.ui.notify(response.message, 'success', 3000);
                                                        checklistGrid.refresh();
                                                    }).fail(function(xhr) {
                                                        handleError(xhr, 'Erro ao reativar item');
                                                    });
                                                }
                                            }
                                        });
                                    }
                                }
                            ]
                        },
                        {
                            dataField: 'created_at',
                            caption: 'Criado em',
                            dataType: 'datetime',
                            format: 'dd/MM/yyyy HH:mm',
                            width: 140,
                            alignment: 'center',
                            allowEditing: false,
                            visible: false
                        }
                    ],

                    filterRow: {
                        visible: true,
                        applyFilter: 'auto',
                        applyFilterText: 'Aplicar',
                        resetOperationText: 'Limpar'
                    },
                    
                    headerFilter: {
                        visible: true
                    },
                    
                    searchPanel: {
                        visible: true,
                        width: 250,
                        placeholder: 'Buscar item...'
                    },
                    
                    scrolling: {
                        mode: 'standard',
                        useNative: false
                    },
                    
                    paging: {
                        pageSize: 10
                    },
                    
                    pager: {
                        visible: true,
                        showPageSizeSelector: true,
                        allowedPageSizes: [5, 10, 20, 50],
                        showInfo: true,
                        showNavigationButtons: true,
                        displayMode: 'full',
                        infoText: 'Página {0} de {1} ({2} itens)'
                    },

                    columnChooser: {
                        enabled: true,
                        mode: 'select',
                        title: 'Seletor de Colunas'
                    },

                    onRowInserted: function(e) {
                        DevExpress.ui.notify({
                            message: 'Item adicionado com sucesso ao checklist!',
                            type: 'success',
                            displayTime: 3000,
                            position: {
                                my: 'top center',
                                at: 'top center'
                            }
                        });
                    },
                    
                    onRowUpdated: function(e) {
                        DevExpress.ui.notify({
                            message: 'Item atualizado com sucesso!',
                            type: 'success',
                            displayTime: 3000,
                            position: {
                                my: 'top center',
                                at: 'top center'
                            }
                        });
                    },

                    loadPanel: {
                        enabled: true,
                        text: 'Carregando itens...'
                    },

                    noDataText: 'Nenhum item de checklist cadastrado. Clique em "Adicionar Item" para começar.',
                    
                    // summary: {
                    //     totalItems: [
                    //         {
                    //             column: 'id',
                    //             summaryType: 'count',
                    //             displayFormat: 'Total: {0} item(ns)',
                    //             showInColumn: 'id'
                    //         },
                    //         {
                    //             column: 'ativo',
                    //             summaryType: 'sum',
                    //             displayFormat: 'Ativos: {0}',
                    //             showInColumn: 'ativo',
                    //             valueFormat: 'fixedPoint'
                    //         },
                    //         {
                    //             column: 'obrigatorio',
                    //             summaryType: 'sum',
                    //             displayFormat: 'Obrigatórios: {0}',
                    //             showInColumn: 'obrigatorio',
                    //             valueFormat: 'fixedPoint'
                    //         }
                    //     ]
                    // },

                    // Toolbar personalizada
                    toolbar: {
                        items: [
                            {
                                location: 'before',
                                widget: 'dxButton',
                                options: {
                                    icon: 'refresh',
                                    hint: 'Atualizar lista',
                                    onClick: function() {
                                        checklistGrid.refresh();
                                    }
                                }
                            },
                            'addRowButton',
                            'searchPanel',
                            'columnChooserButton'
                        ]
                    }
                }).dxDataGrid('instance');
            }

            function handleError(xhr, defaultMessage) {
                let errorMessage = defaultMessage;
                if (xhr.responseJSON && xhr.responseJSON.errors) {
                    errorMessage = Object.values(xhr.responseJSON.errors).flat().join(', ');
                } else if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                DevExpress.ui.notify(errorMessage, 'error', 3000);
                throw new Error(errorMessage);
            }
        });
</script>
@stop