@extends('adminlte::page')

@section('title', 'Checklist do Funil')

@section('css')
    {{-- DevExtreme CSS --}}
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/23.2.3/css/dx.light.css">
    
    <style>
        .info-funil-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .info-funil-card h3 {
            margin: 0 0 15px 0;
            font-size: 24px;
            font-weight: 600;
        }
        
        .info-funil-card .info-item {
            display: inline-block;
            margin-right: 25px;
            margin-bottom: 10px;
        }
        
        .info-funil-card .info-label {
            font-weight: 600;
            opacity: 0.9;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .info-funil-card .info-value {
            font-size: 16px;
            margin-top: 5px;
        }
        
        .checklist-card {
            background: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
        }
        
        .checklist-card h4 {
            margin: 0 0 20px 0;
            font-size: 20px;
            font-weight: 600;
            color: #333;
        }
        
        #gridChecklist {
            min-height: 500px;
        }
        
        .badge-status {
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            display: inline-block;
        }
        
        .badge-ativo {
            background: #10b981;
            color: white;
        }
        
        .badge-inativo {
            background: #ef4444;
            color: white;
        }
    </style>
@stop

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1><i class="fas fa-tasks"></i> ID: {{ $funil->id_funil }} - Checklist do Funil</h1>
        <a href="{{ route('cadastroFunil.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Voltar
        </a>
    </div>
@stop

@section('content')
    {{-- Card com informações do funil --}}
    <div class="info-funil-card">
        <h3><i class="fas fa-filter"></i> {{ $funil->funil_nome }}</h3>
        <div class="row">
            <div class="col-md-3">
                <div class="info-item">
                    <div class="info-label">Tag</div>
                    <div class="info-value">{{ $funil->funil_tag ?? 'N/A' }}</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="info-item">
                    <div class="info-label">Tipo</div>
                    <div class="info-value">{{ $funil->vd_tipo ?? 'N/A' }}</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="info-item">
                    <div class="info-label">Status</div>
                    <div class="info-value">
                        @if($funil->vd_status == 'A')
                            <span class="badge-status badge-ativo">ATIVO</span>
                        @else
                            <span class="badge-status badge-inativo">INATIVO</span>
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="info-item">
                    <div class="info-label">ID Funil</div>
                    <div class="info-value">#{{ $funil->id_funil }}</div>
                </div>
            </div>
        </div>
    </div>

    {{-- Card com o DataGrid de checklist --}}
    <div class="checklist-card">
        <h4><i class="fas fa-list-check"></i> Itens do Checklist</h4>
        <div id="gridChecklist"></div>
    </div>
@stop

@section('js')
    {{-- jQuery (se não estiver incluído) --}}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    {{-- DevExtreme JS --}}
    <script src="https://cdn3.devexpress.com/jslib/23.2.3/js/dx.all.js"></script>

    <script>
        $(document).ready(function() {
            // CSRF Token para requisições AJAX
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // ID do funil atual
            const idFunil = {{ $funil->id_funil }};

            // Configuração do CustomStore
            const customDataSource = new DevExpress.data.CustomStore({
                key: 'id',
                
                // LOAD - Carregar dados
                load: function(loadOptions) {
                    return $.ajax({
                        url: `/painel/funil/${idFunil}/checklist/itens`,
                        method: 'GET',
                        dataType: 'json'
                    }).then(function(data) {
                        return {
                            data: data,
                            totalCount: data.length
                        };
                    }).fail(function(xhr) {
                        DevExpress.ui.notify({
                            message: 'Erro ao carregar itens: ' + (xhr.responseJSON?.message || 'Erro desconhecido'),
                            type: 'error',
                            displayTime: 3000
                        });
                        throw new Error('Erro ao carregar dados');
                    });
                },

                // INSERT - Criar novo item
                insert: function(values) {
                    return $.ajax({
                        url: `/painel/funil/${idFunil}/checklist/itens`,
                        method: 'POST',
                        dataType: 'json',
                        contentType: 'application/json',
                        data: JSON.stringify(values)
                    }).then(function(data) {
                        DevExpress.ui.notify({
                            message: 'Item criado com sucesso!',
                            type: 'success',
                            displayTime: 2000
                        });
                        return data;
                    }).fail(function(xhr) {
                        const errors = xhr.responseJSON?.errors;
                        let errorMessage = 'Erro ao criar item';
                        
                        if (errors) {
                            errorMessage = Object.values(errors).flat().join(', ');
                        }
                        
                        DevExpress.ui.notify({
                            message: errorMessage,
                            type: 'error',
                            displayTime: 4000
                        });
                        throw new Error(errorMessage);
                    });
                },

                // UPDATE - Atualizar item existente
                update: function(key, values) {
                    return $.ajax({
                        url: `/painel/funil/${idFunil}/checklist/itens/${key}`,
                        method: 'PUT',
                        dataType: 'json',
                        contentType: 'application/json',
                        data: JSON.stringify(values)
                    }).then(function(data) {
                        DevExpress.ui.notify({
                            message: 'Item atualizado com sucesso!',
                            type: 'success',
                            displayTime: 2000
                        });
                        return data;
                    }).fail(function(xhr) {
                        const errors = xhr.responseJSON?.errors;
                        let errorMessage = 'Erro ao atualizar item';
                        
                        if (errors) {
                            errorMessage = Object.values(errors).flat().join(', ');
                        }
                        
                        DevExpress.ui.notify({
                            message: errorMessage,
                            type: 'error',
                            displayTime: 4000
                        });
                        throw new Error(errorMessage);
                    });
                },

                // REMOVE - Deletar item
                remove: function(key) {
                    return $.ajax({
                        url: `/painel/funil/${idFunil}/checklist/itens/${key}`,
                        method: 'DELETE',
                        dataType: 'json'
                    }).then(function(data) {
                        DevExpress.ui.notify({
                            message: 'Item removido com sucesso!',
                            type: 'success',
                            displayTime: 2000
                        });
                        return data;
                    }).fail(function(xhr) {
                        DevExpress.ui.notify({
                            message: 'Erro ao remover item: ' + (xhr.responseJSON?.message || 'Erro desconhecido'),
                            type: 'error',
                            displayTime: 3000
                        });
                        throw new Error('Erro ao remover item');
                    });
                }
            });

            // Inicialização do DataGrid
            $("#gridChecklist").dxDataGrid({
                dataSource: customDataSource,
                showBorders: true,
                showRowLines: true,
                showColumnLines: true,
                rowAlternationEnabled: true,
                hoverStateEnabled: true,
                columnAutoWidth: true,
                wordWrapEnabled: true,
                
                // Paginação
                paging: {
                    pageSize: 10
                },
                pager: {
                    showPageSizeSelector: true,
                    allowedPageSizes: [10, 20, 50, 100],
                    showInfo: true,
                    showNavigationButtons: true
                },

                // Filtros
                filterRow: {
                    visible: true
                },
                headerFilter: {
                    visible: true
                },
                searchPanel: {
                    visible: true,
                    width: 240,
                    placeholder: "Pesquisar..."
                },

                // Edição
                editing: {
                    mode: 'popup',
                    allowAdding: true,
                    allowUpdating: true,
                    allowDeleting: true,
                    useIcons: true,
                    popup: {
                        title: 'Item do Checklist',
                        showTitle: true,
                        width: 900,
                        height: 700,
                    },
                    form: {
                        items: [
                            {
                                dataField: 'descricao',
                                label: {
                                    text: 'Descrição'
                                },
                                editorType: 'dxTextArea',
                                editorOptions: {
                                    height: 100,
                                    placeholder: 'Descreva o item do checklist...'
                                },
                                validationRules: [
                                    {
                                        type: 'required',
                                        message: 'A descrição é obrigatória'
                                    },
                                    {
                                        type: 'stringLength',
                                        max: 255,
                                        message: 'A descrição não pode ter mais de 255 caracteres'
                                    }
                                ]
                            },
                            {
                                dataField: 'obrigatorio',
                                label: {
                                    text: 'Obrigatório?'
                                },
                                editorType: 'dxCheckBox',
                                editorOptions: {
                                    text: 'Este item é obrigatório'
                                }
                            },
                            {
                                dataField: 'observacao',
                                label: {
                                    text: 'Observação'
                                },
                                editorType: 'dxTextArea',
                                editorOptions: {
                                    height: 120,
                                    placeholder: 'Observações adicionais (opcional)...'
                                }
                            }
                        ]
                    },
                    texts: {
                        confirmDeleteMessage: 'Tem certeza que deseja excluir este item?',
                        saveRowChanges: 'Salvar',
                        cancelRowChanges: 'Cancelar',
                        deleteRow: 'Excluir',
                        editRow: 'Editar',
                        addRow: 'Adicionar Item'
                    }
                },

                // Colunas
                columns: [
                    {
                        dataField: 'id',
                        caption: 'ID',
                        width: 70,
                        alignment: 'center',
                        allowEditing: false
                    },
                    {
                        dataField: 'descricao',
                        caption: 'Descrição',
                        width: 300,
                        cellTemplate: function(container, options) {
                            const isInativo = !options.data.ativo;
                            const style = isInativo ? 'text-decoration: line-through; color: #999;' : '';
                            $('<div>')
                                .attr('style', style)
                                .text(options.value)
                                .appendTo(container);
                        }
                    },
                    {
                        dataField: 'obrigatorio',
                        caption: 'Obrigatório',
                        dataType: 'boolean',
                        width: 120,
                        alignment: 'center',
                        cellTemplate: function(container, options) {
                            if (options.value) {
                                $('<span>')
                                    .addClass('badge')
                                    .css({
                                        'background-color': '#f59e0b',
                                        'color': 'white',
                                        'padding': '5px 10px',
                                        'border-radius': '12px',
                                        'font-size': '11px'
                                    })
                                    .html('<i class="fas fa-exclamation-circle"></i> SIM')
                                    .appendTo(container);
                            } else {
                                $('<span>')
                                    .addClass('badge')
                                    .css({
                                        'background-color': '#6b7280',
                                        'color': 'white',
                                        'padding': '5px 10px',
                                        'border-radius': '12px',
                                        'font-size': '11px'
                                    })
                                    .text('NÃO')
                                    .appendTo(container);
                            }
                        }
                    },
                    {
                        dataField: 'ativo',
                        caption: 'Status',
                        dataType: 'boolean',
                        width: 120,
                        alignment: 'center',
                        allowEditing: false,
                        cellTemplate: function(container, options) {
                            if (options.value) {
                                $('<span>')
                                    .addClass('badge')
                                    .css({
                                        'background-color': '#10b981',
                                        'color': 'white',
                                        'padding': '5px 10px',
                                        'border-radius': '12px',
                                        'font-size': '11px'
                                    })
                                    .html('<i class="fas fa-check-circle"></i> ATIVO')
                                    .appendTo(container);
                            } else {
                                $('<span>')
                                    .addClass('badge')
                                    .css({
                                        'background-color': '#ef4444',
                                        'color': 'white',
                                        'padding': '5px 10px',
                                        'border-radius': '12px',
                                        'font-size': '11px'
                                    })
                                    .html('<i class="fas fa-times-circle"></i> INATIVO')
                                    .appendTo(container);
                            }
                        }
                    },
                    {
                        dataField: 'observacao',
                        caption: 'Observação',
                        width: 250,
                        cellTemplate: function(container, options) {
                            if (options.value) {
                                const shortText = options.value.length > 50 
                                    ? options.value.substring(0, 50) + '...' 
                                    : options.value;
                                
                                $('<div>')
                                    .text(shortText)
                                    .attr('title', options.value)
                                    .css('cursor', 'help')
                                    .appendTo(container);
                            } else {
                                $('<span>')
                                    .css('color', '#999')
                                    .text('—')
                                    .appendTo(container);
                            }
                        }
                    },
                    {
                        dataField: 'created_at',
                        caption: 'Criado em',
                        dataType: 'datetime',
                        format: 'dd/MM/yyyy HH:mm',
                        width: 150,
                        allowEditing: false,
                        alignment: 'center'
                    }
                ],

                // Exportação
                export: {
                    enabled: true,
                    fileName: `Checklist_Funil_${idFunil}`,
                    allowExportSelectedData: true
                },

                // Seleção
                selection: {
                    mode: 'multiple',
                    showCheckBoxesMode: 'always'
                },

                // Ordenação
                sorting: {
                    mode: 'multiple'
                },

                // Resumo
                summary: {
                    totalItems: [
                        {
                            column: 'id',
                            summaryType: 'count',
                            displayFormat: 'Total: {0} itens'
                        },
                        {
                            column: 'ativo',
                            summaryType: 'custom',
                            displayFormat: 'Ativos: {0}',
                            customizeText: function(data) {
                                const grid = $("#gridChecklist").dxDataGrid("instance");
                                const dataSource = grid.getDataSource();
                                const items = dataSource.items();
                                const ativos = items.filter(item => item.ativo).length;
                                const total = items.length;
                                const percentual = total > 0 ? Math.round((ativos / total) * 100) : 0;
                                return `Ativos: ${ativos}/${total} (${percentual}%)`;
                            }
                        }
                    ]
                },

                // Responsividade
                columnChooser: {
                    enabled: true,
                    mode: 'select'
                },

                // Textos em português
                noDataText: 'Nenhum item encontrado',
                
                // Eventos
                onRowInserted: function(e) {
                    console.log('Item inserido:', e.data);
                },
                onRowUpdated: function(e) {
                    console.log('Item atualizado:', e.data);
                },
                onRowRemoved: function(e) {
                    console.log('Item removido:', e.data);
                },
                onToolbarPreparing: function(e) {
                    e.toolbarOptions.items.unshift({
                        location: 'before',
                        widget: 'dxButton',
                        options: {
                            icon: 'refresh',
                            hint: 'Recarregar dados',
                            onClick: function() {
                                $("#gridChecklist").dxDataGrid("instance").refresh();
                                DevExpress.ui.notify({
                                    message: 'Dados recarregados!',
                                    type: 'info',
                                    displayTime: 1500
                                });
                            }
                        }
                    });
                }
            });

            // Log de inicialização
            console.log('DevExtreme DataGrid inicializado para o funil ID:', idFunil);
        });
    </script>
@stop