@extends('adminlte::page')

@section('title', 'Empresas')

@section('content_header')
    <h1>Cadastro de Empresas</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-1 {
            background-color: #28a745;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        .badge-status-2 {
            background-color: #6c757d;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
    </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() {
            // Carregar cidades para o lookup
            let cidadesDataSource = new DevExpress.data.DataSource({
                store: new DevExpress.data.CustomStore({
                    key: 'id',
                    loadMode: 'raw',
                    load: function() {
                        return $.ajax({
                            url: '{{ route('empresa.api.cidades') }}',
                            method: 'GET',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        });
                    }
                })
            });

            // Configurar DataGrid
            $("#gridContainer").dxDataGrid({
                dataSource: new DevExpress.data.DataSource({
                    store: new DevExpress.data.CustomStore({
                        key: 'id',
                        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('empresa.api.data') }}',
                                method: 'GET',
                                data: params,
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                }
                            });
                        },
                        insert: function(values) {
                            return $.ajax({
                                url: '{{ route('empresa.store') }}',
                                method: 'POST',
                                data: values,
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                }
                            }).fail(function(xhr) {
                                if (xhr.status === 422) {
                                    let errors = xhr.responseJSON.errors;
                                    let errorMsg = Object.values(errors).flat().join('\n');
                                    DevExpress.ui.notify(errorMsg, 'error', 5000);
                                    throw new Error(errorMsg);
                                }
                            });
                        },
                        update: function(key, values) {
                            return $.ajax({
                                url: '{{ route('empresa.update', '') }}/' + key,
                                method: 'PUT',
                                data: values,
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                }
                            }).fail(function(xhr) {
                                if (xhr.status === 422) {
                                    let errors = xhr.responseJSON.errors;
                                    let errorMsg = Object.values(errors).flat().join('\n');
                                    DevExpress.ui.notify(errorMsg, 'error', 5000);
                                    throw new Error(errorMsg);
                                }
                            });
                        }
                    })
                }),
                
                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 da Empresa',
                        showTitle: true,
                        width: 700,
                        height: 500
                    },
                    texts: {
                        addRow: 'Adicionar',
                        editRow: 'Editar',
                        saveRowChanges: 'Salvar',
                        cancelRowChanges: 'Cancelar',
                        deleteRow: 'Excluir',
                        confirmDeleteMessage: 'Tem certeza que deseja excluir este registro?',
                        validationCancelChanges: 'Cancelar alterações'
                    },
                    form: {
                        items: [
                            {
                                itemType: 'group',
                                colCount: 2,
                                colSpan: 2,
                                items: [
                                    {
                                        dataField: 'nome',
                                        colSpan: 2
                                    },
                                    {
                                        dataField: 'cnpj',
                                        colSpan: 1
                                    },
                                    {
                                        dataField: 'status',
                                        colSpan: 1
                                    },
                                    {
                                        dataField: 'endereco',
                                        colSpan: 2,
                                        editorType: 'dxTextArea',
                                        editorOptions: {
                                            height: 60
                                        }
                                    },
                                    {
                                        dataField: 'id_cidade',
                                        colSpan: 2
                                    }
                                ]
                            }
                        ]
                    }
                },
                
                // 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',
                        caption: 'Código',
                        width: 80,
                        alignment: 'center',
                        allowEditing: false
                    },
                    {
                        dataField: 'nome',
                        caption: 'Nome da Empresa',
                        validationRules: [
                            { type: 'required', message: 'O nome é obrigatório' },
                            { type: 'stringLength', max: 255, message: 'Máximo 255 caracteres' }
                        ]
                    },
                    {
                        dataField: 'cnpj',
                        caption: 'CNPJ',
                        width: 180,
                        cellTemplate: function(container, options) {
                            container.text(options.data.cnpj_formatado);
                        },
                        validationRules: [
                            { type: 'required', message: 'O CNPJ é obrigatório' },
                            { 
                                type: 'pattern', 
                                pattern: /^\d{2}\.\d{3}\.\d{3}\/\d{4}-\d{2}$|^\d{14}$/,
                                message: 'CNPJ inválido. Use o formato: 00.000.000/0000-00'
                            }
                        ],
                        editorOptions: {
                            mask: '00.000.000/0000-00',
                            placeholder: '00.000.000/0000-00'
                        }
                    },
                    {
                        dataField: 'endereco',
                        caption: 'Endereço',
                        validationRules: [
                            { type: 'stringLength', max: 500, message: 'Máximo 500 caracteres' }
                        ]
                    },
                    {
                        dataField: 'id_cidade',
                        caption: 'Cidade',
                        width: 200,
                        lookup: {
                            dataSource: cidadesDataSource,
                            valueExpr: 'id',
                            displayExpr: 'descricao'
                        },
                        cellTemplate: function(container, options) {
                            container.text(options.data.cidade_nome || '-');
                        }
                    },
                    {
                        dataField: 'status',
                        caption: 'Status',
                        width: 120,
                        alignment: 'center',
                        lookup: {
                            dataSource: [
                                { value: 1, text: 'ATIVO' },
                                { value: 2, text: 'DESATIVADO' }
                            ],
                            valueExpr: 'value',
                            displayExpr: 'text'
                        },
                        cellTemplate: function(container, options) {
                            let badgeClass = options.value == 1 ? 'badge-status-1' : 'badge-status-2';
                            let badgeText = options.value == 1 ? 'ATIVO' : 'DESATIVADO';
                            container.html('<span class="' + badgeClass + '">' + badgeText + '</span>');
                        }
                    }
                ],
                
                // Exportação com PDF, XLSX e CSV
                export: {
                    enabled: true,
                    formats: ['xlsx', 'pdf'],
                    allowExportSelectedData: true,
                    texts: {
                        exportTo: 'Exportar para',
                        exportAll: 'Exportar tudo',
                        exportSelectedRows: 'Exportar selecionados'
                    }
                },
                
                // Evento de exportação customizado
                onExporting: function(e) {
                    const workbook = new ExcelJS.Workbook();
                    const worksheet = workbook.addWorksheet('Empresas');
                    
                    // Cabeçalho do relatório
                    worksheet.mergeCells('A1:F1');
                    const titleCell = worksheet.getCell('A1');
                    titleCell.value = 'CADASTRO DE EMPRESAS';
                    titleCell.font = { name: 'Arial', size: 16, bold: true };
                    titleCell.alignment = { horizontal: 'center', vertical: 'middle' };
                    titleCell.fill = {
                        type: 'pattern',
                        pattern: 'solid',
                        fgColor: { argb: 'FF4472C4' }
                    };
                    titleCell.font = { color: { argb: 'FFFFFFFF' }, bold: true, size: 16 };
                    
                    // Data de geração
                    worksheet.mergeCells('A2:F2');
                    const dateCell = worksheet.getCell('A2');
                    dateCell.value = 'Data de Geração: ' + new Date().toLocaleString('pt-BR');
                    dateCell.font = { name: 'Arial', size: 10 };
                    dateCell.alignment = { horizontal: 'center' };
                    
                    // Espaço
                    worksheet.addRow([]);
                    
                    // Exportar dados do grid
                    DevExpress.excelExporter.exportDataGrid({
                        component: e.component,
                        worksheet: worksheet,
                        topLeftCell: { row: 4, column: 1 },
                        customizeCell: function(options) {
                            const excelCell = options.excelCell;
                            
                            // Estilizar cabeçalho
                            if (options.gridCell.rowType === 'header') {
                                excelCell.font = { bold: true, color: { argb: 'FFFFFFFF' } };
                                excelCell.fill = {
                                    type: 'pattern',
                                    pattern: 'solid',
                                    fgColor: { argb: 'FF4472C4' }
                                };
                            }
                            
                            // Formatar CNPJ
                            if (options.gridCell.column.dataField === 'cnpj' && options.gridCell.rowType === 'data') {
                                excelCell.value = options.gridCell.data.cnpj_formatado;
                            }
                            
                            // Formatar Status
                            if (options.gridCell.column.dataField === 'status' && options.gridCell.rowType === 'data') {
                                excelCell.value = options.gridCell.value == 1 ? 'ATIVO' : 'DESATIVADO';
                            }
                            
                            // Cidade
                            if (options.gridCell.column.dataField === 'id_cidade' && options.gridCell.rowType === 'data') {
                                excelCell.value = options.gridCell.data.cidade_nome || '-';
                            }
                            
                            // Bordas
                            excelCell.border = {
                                top: { style: 'thin' },
                                left: { style: 'thin' },
                                bottom: { style: 'thin' },
                                right: { style: 'thin' }
                            };
                        }
                    }).then(function() {
                        // Ajustar largura das colunas
                        worksheet.columns = [
                            { width: 10 },  // Código
                            { width: 30 },  // Nome
                            { width: 20 },  // CNPJ
                            { width: 40 },  // Endereço
                            { width: 20 },  // Cidade
                            { width: 15 }   // Status
                        ];
                        
                        // Salvar arquivo
                        workbook.xlsx.writeBuffer().then(function(buffer) {
                            saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'cadastro-empresas.xlsx');
                        });
                    });
                    
                    e.cancel = true;
                },
                
                // Seleção
                selection: {
                    mode: 'single'
                },
                
                // Resumo em Português
                summary: {
                    totalItems: [
                        {
                            column: 'id',
                            summaryType: 'count',
                            displayFormat: '{0} empresa(s)'
                        }
                    ]
                },
                
                // Eventos
                onRowInserted: function(e) {
                    DevExpress.ui.notify('Empresa cadastrada com sucesso!', 'success', 3000);
                },
                
                onRowUpdated: function(e) {
                    DevExpress.ui.notify('Empresa atualizada com sucesso!', 'success', 3000);
                },
                
                onEditorPreparing: function(e) {
                    // Aplicar máscara no CNPJ durante edição
                    if (e.dataField === 'cnpj' && e.parentType === 'dataRow') {
                        e.editorOptions.mask = '00.000.000/0000-00';
                        e.editorOptions.placeholder = '00.000.000/0000-00';
                    }
                },
                
                // Mensagens de carregamento em Português
                loadPanel: {
                    enabled: true,
                    text: 'Carregando...'
                },
                
                noDataText: 'Nenhum registro encontrado'
            });
        });
    </script>
@stop