@extends('layouts.publicador.novo_padrao')

@section('content')
    <link rel="stylesheet" href="{{ asset('css/fontawesome/css/all.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/fontawesome/css/fontawesome.min.css') }}">
    <linK rel="stylesheet" href="{{ asset('css/publicador.css') }}">

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <div class="card shadow-sm container">

        <div class="content-header">
            <div class="card-body">
                <h3 class="card-title mb-4 text-left">
                    {{ isset($pauta) ? 'Editar Pauta de Comissão' : 'Cadastrar Nova Pauta de Comissão' }}
                </h3>
            </div>
        </div>

        <form
            action="{{ isset($pauta) ? route('publicador.pautas_comissoes.update') : route('publicador.pautas_comissoes.salvar') }}"
            method="POST" enctype="multipart/form-data" id="pautaForm">
            @csrf
            @if (isset($pauta))
                <input type="hidden" name="id" value="{{ $pauta->id }}">
            @endif

            <div class="row g-3">

                {{-- COMISSÃO --}}
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="comissoes" class="form-label">Comissão</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">
                                    <i class="fa-solid fa-handshake"></i>
                                </span>
                            </div>
                            {{ Form::select('comissao', $comissoes, old('comissao', $pauta->comissao ?? null), [
                                'class' => 'form-control' . ($errors->has('comissao') ? ' is-invalid' : ''),
                                'placeholder' => 'Selecione uma comissão',
                                'required',
                            ]) }}

                            @error('comissoes')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                {{-- CATEGORIA DE REUNIÃO --}}
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="categoria_reuniao" class="form-label">Categoria da Reunião</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">
                                    <i class="fa-solid fa-sitemap"></i>
                                </span>
                            </div>
                            <select class="form-control" id="categoria_reuniao" name="categoria_reuniao" required>
                                <option value="deliberativa">Deliberativa</option>
                                <option value="nao_deliberativa">Não Deliberativa</option>
                                <option value="audiencia_publica">Audiência Pública</option>
                            </select>
                            @error('categoria_reuniao')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                {{-- NÚMERO DA REUNIÃO --}}
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="numero_reuniao" class="form-label">Número da Reunião</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">
                                    <i class="fa-solid fa-hashtag"></i>
                                </span>
                            </div>
                            <input type="number" class="form-control" id="numero_reuniao" name="numero_reuniao"
                                min="1" step="1" required value="1">
                            @error('numero_reuniao')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                {{-- TIPO DE REUNIÃO --}}
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="tipo_reuniao" class="form-label">Tipo de Reunião</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">
                                    <i class="fa-solid fa-list"></i>
                                </span>
                            </div>
                            <select class="form-control" id="tipo_reuniao" name="tipo_reuniao" required>
                                <option value="Ordinária">Ordinária</option>
                                <option value="Extraordinária">Extraordinária</option>
                            </select>
                            @error('tipo_reuniao')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                {{-- TEMA DA REUNIÃO --}}
                <div class="col-md-6" id="tema_container" style="display: none;">
                    <div class="form-group">
                        <label for="tema_reuniao" class="form-label">Tema da Reunião</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">
                                    <i class="fa-solid fa-comment-dots"></i>
                                </span>
                            </div>
                            <input type="text" class="form-control @error('tema_reuniao') is-invalid @enderror"
                                id="tema_reuniao" name="tema_reuniao" placeholder="Digite o tema da reunião"
                                value="{{ old('tema_reuniao', $pauta->tema_reuniao ?? '') }}" maxlength="255">
                            @error('tema_reuniao')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                {{-- REUNIÃO (campo oculto que será preenchido automaticamente) --}}
                <div class="col-md-12" style="display: none;">
                    <div class="form-group">
                        <label for="reuniao" class="form-label">Reunião</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">
                                    <i class="fa-solid fa-users"></i>
                                </span>
                            </div>
                            <input type="text" class="form-control @error('reuniao') is-invalid @enderror"
                                id="reuniao" name="reuniao" value="{{ old('reuniao', $pauta->reuniao ?? '') }}"
                                required maxlength="255">
                            @error('reuniao')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                {{-- PRÉVIA DO NOME DA REUNIÃO (apenas visual) --}}
                <div class="col-md-12 mb-3">
                    <div class="alert alert-info">
                        <strong><i class="fas fa-info-circle mr-2"></i>Nome da Reunião:</strong>
                        <span id="previa_reuniao" class="ml-2">1ª Reunião Ordinária</span>
                    </div>
                </div>

                {{-- DATA REUNIÃO --}}
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="data" class="form-label">Data da Reunião</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">
                                    <i class="fa-solid fa-calendar-days"></i>
                                </span>
                            </div>
                            <input type="date" class="form-control @error('data') is-invalid @enderror" id="data"
                                name="data" required
                                value="{{ old('data', isset($pauta->data) ? $pauta->data->format('Y-m-d') : '') }}">
                            @error('data')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                {{-- PUBLICADO --}}
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="publicado" class="form-label">Publicado</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">
                                    <i class="fas fa-globe"></i>
                                </span>
                            </div>
                            @can('pautas_comissoes_excluir')
                                {{ Form::select('publicado', [0 => 'Não', 1 => 'Sim'], old('publicado', $pauta->publicado ?? 0), [
                                    'class' => 'form-control' . ($errors->has('publicado') ? ' is-invalid' : ''),
                                    'id' => 'publicado',
                                ]) }}
                            @else
                                {{ Form::select('publicado_view', [0 => 'Não', 1 => 'Sim'], old('publicado', $pauta->publicado ?? 0), [
                                    'class' => 'form-control',
                                    'id' => 'publicado_view',
                                    'disabled' => 'disabled',
                                ]) }}
                                <input type="hidden" name="publicado"
                                    value="{{ old('publicado', $pauta->publicado ?? 0) }}">
                            @endcan
                            @error('publicado')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        @cannot('pautas_comissoes_excluir')
                            <small class="form-text text-muted">
                                <i class="fas fa-lock mr-1"></i> Você não tem permissão para alterar o status de publicação.
                            </small>
                        @endcannot
                    </div>
                </div>

                <!-- Seção de Arquivos -->
                <div class="col-12 mt-4">
                    <hr>
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5>Arquivos</h5>
                        <button type="button" class="btn btn-sm btn-primary" id="btnOpenAddFile">
                            <i class="fas fa-plus-circle mr-1"></i> Adicionar Arquivo
                        </button>
                    </div>
                </div>

                <!-- Elemento para mostrar o uso total de espaço -->
                <div class="col-md-12 mb-3">
                    <div class="filesize-indicator mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <span class="size-text">Espaço de envio utilizado: <span id="usedSpace">0 MB</span> de
                                60
                                MB</span>
                            <span class="size-text" id="remainingSpace">Restante: 60 MB</span>
                        </div>
                        <div class="progress" style="height: 10px; border-radius: 5px; background-color: #edf2f7;">
                            <div id="sizeProgressBar" class="progress-bar" role="progressbar"
                                style="width: 0%; background-color: #4299e1; border-radius: 5px;" aria-valuenow="0"
                                aria-valuemin="0" aria-valuemax="60"></div>
                        </div>
                    </div>
                </div>


                <!-- Seção de Novos Arquivos -->
                <div class="col-md-12 mb-3">
                    <div class="new-files-container">
                        <div class="section-header">
                            <h6 class="mb-2"><i class="fas fa-upload mr-2"></i>Novos Arquivos</h6>
                        </div>
                        <div id="newFileList" class="mt-2">
                            <div class="alert alert-info" id="noFilesMessage">
                                <i class="fas fa-info-circle mr-2"></i> Nenhum arquivo adicionado.
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Seção de Arquivos Existentes -->
                @if (isset($pauta) && $pauta->arquivos->count() > 0)
                    <div class="col-md-12 mb-3">
                        <div class="existing-files-container">
                            <div class="section-header">
                                <h6 class="mb-2"><i class="fas fa-archive mr-2"></i>Arquivos Existentes</h6>
                            </div>
                            <div id="existingFileList" class="mt-2">
                                <!-- Arquivos existentes serão carregados aqui via JavaScript -->
                            </div>
                        </div>
                    </div>
                @endif
            </div>

            <div class="mt-4 mb-4 text-center">
                <button type="submit" class="btn btn-primary">
                    <i class="fas {{ isset($pauta) ? 'fa-save' : 'fa-plus-circle' }} mr-2"></i>
                    {{ isset($pauta) ? 'Atualizar' : 'Cadastrar' }}
                </button>
                <a href="{{ route('publicador.pautas_comissoes.index') }}" class="btn btn-secondary ml-2">
                    <i class="fas fa-times-circle mr-2"></i>Cancelar
                </a>
            </div>
        </form>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="modalAddFile" tabindex="-1" role="dialog" aria-labelledby="modalAddFileTitle"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalAddFileTitle">Adicionar Arquivo</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- Área comum: campo de tipo de arquivo -->
                    <div class="form-group">
                        <label for="fileType">Tipo de Arquivo</label>
                        <select class="form-control" id="fileType">
                            <option value="1">Pauta</option>
                            <option value="2">Ata</option>
                        </select>
                    </div>

                    <!-- Área de upload: exibida apenas no modo adicionar -->
                    <div id="uploadArea" class="form-group mt-3">
                        <label>Arquivo</label>
                        <div id="modalDropArea" class="drop-area">
                            <p>Arraste e solte arquivos aqui ou</p>
                            <input type="file" id="modalFileElem"
                                accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.mp4,.mp3" style="display:none">
                            <button type="button" id="modalFileSelect" class="btn btn-outline-primary">Selecione o
                                arquivo</button>
                        </div>
                        <small class="form-text text-muted">Tamanho máximo: 60MB. Formatos aceitos: PDF, DOC, DOCX,
                            XLS,
                            XLSX, JPG, JPEG, PNG, MP4, MP3.</small>

                        <div class="filesize-indicator mt-3 mb-2">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <span class="size-text">Após adicionar este arquivo:</span>
                                <span class="size-text" id="modalRemaining">Restante: 60 MB</span>
                            </div>
                            <div class="progress" style="height: 8px; border-radius: 5px; background-color: #edf2f7;">
                                <div id="modalSizeProgressBar" class="progress-bar" role="progressbar"
                                    style="width: 0%; background-color: #4299e1; border-radius: 5px;" aria-valuenow="0"
                                    aria-valuemin="0" aria-valuemax="60"></div>
                            </div>
                        </div>

                        <div id="modalFilePreview" class="mt-3" style="display: none;">
                            <!-- Aqui será exibido o preview do arquivo no modal -->
                        </div>
                    </div>

                    <!-- Área de edição: exibida apenas no modo editar -->
                    <div id="editArea" class="form-group mt-3" style="display: none;">
                        <div class="edit-file-info mb-3 p-3 rounded"
                            style="background-color: #f8fafc; border: 1px solid #e2e8f0;">
                            <div class="d-flex align-items-center">
                                <div class="mr-3"><i id="editFileIcon" class="fas fa-file-pdf fa-2x text-primary"></i>
                                </div>
                                <div>
                                    <div class="file-extension mb-1">
                                        <span id="editFileExtension" class="badge badge-pill badge-primary">.pdf</span>
                                    </div>
                                    <div class="original-name text-muted small">
                                        Nome original: <span id="editOriginalName">documento.pdf</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle mr-2"></i> Você está editando o tipo de arquivo. O arquivo
                            original permanecerá o mesmo.
                        </div>
                    </div>

                    <!-- Campo oculto para armazenar o ID do arquivo sendo editado -->
                    <input type="hidden" id="editFileId" value="">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="btnCancelModal">Cancelar</button>
                    <button type="button" class="btn btn-primary" id="btnAddFile" disabled>Adicionar</button>
                    <button type="button" class="btn btn-success" id="btnSaveEdit" style="display: none;">Salvar
                        Alterações</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        // Script para upload de arquivos
        $(document).ready(function() {
            // Variáveis globais
            let fileCounter = 0;
            let currentModalFile = null;
            const MAX_TOTAL_FILE_SIZE = 60 * 1024 * 1024; // 60MB total
            let totalUploadSize = 0; // Contador de tamanho total dos arquivos
            const acceptedFormats = ['.pdf', '.doc', '.docx', '.xls', '.xlsx', '.jpg', '.jpeg', '.png', '.mp4',
                '.mp3'
            ];

            // Setup para CSRF token em requisições AJAX
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // Função para atualizar o campo de reunião baseado no número e tipo
            function atualizarCampoReuniao() {
                const categoria = $('#categoria_reuniao').val();
                let nomeReuniao = '';

                if (categoria === 'deliberativa') {
                    // Para reuniões deliberativas: "Xª Reunião Ordinária/Extraordinária"
                    const numero = $('#numero_reuniao').val();
                    const tipo = $('#tipo_reuniao').val();
                    nomeReuniao = `${numero}ª Reunião ${tipo}`;
                } else if (categoria === 'nao_deliberativa') {
                    // Para reuniões não deliberativas: "Reunião Não Deliberativa - [tema]"
                    const tema = $('#tema_reuniao').val().trim();
                    nomeReuniao = `Reunião Não Deliberativa${tema ? ' - ' + tema : ''}`;
                } else if (categoria === 'audiencia_publica') {
                    // Para audiências públicas: "Audiência Pública - [tema]"
                    const tema = $('#tema_reuniao').val().trim();
                    nomeReuniao = `Audiência Pública${tema ? ' - ' + tema : ''}`;
                }

                // Atualizar o campo oculto e a prévia
                $('#reuniao').val(nomeReuniao);
                $('#previa_reuniao').text(nomeReuniao);
            }

            // Eventos para os campos de número e tipo
            $('#numero_reuniao, #tipo_reuniao').on('change input', function() {
                atualizarCampoReuniao();
            });

            // Evento para o campo de tema
            $('#tema_reuniao').on('input', function() {
                atualizarCampoReuniao();
            });

            // Função para atualizar a visibilidade dos campos baseada na categoria
            function atualizarCamposVisibilidade() {
                const categoria = $('#categoria_reuniao').val();

                if (categoria === 'deliberativa') {
                    $('#numero_reuniao').closest('.col-md-3').show();
                    $('#tipo_reuniao').closest('.col-md-3').show();
                    $('#tema_container').hide();

                    // Ativar campos obrigatórios
                    $('#numero_reuniao').prop('required', true);
                    $('#tipo_reuniao').prop('required', true);
                    $('#tema_reuniao').prop('required', false);
                } else {
                    $('#numero_reuniao').closest('.col-md-3').hide();
                    $('#tipo_reuniao').closest('.col-md-3').hide();
                    $('#tema_container').show();

                    // Atualizar campos obrigatórios
                    $('#numero_reuniao').prop('required', false);
                    $('#tipo_reuniao').prop('required', false);
                    $('#tema_reuniao').prop('required', true);
                }

                // Atualizar o nome da reunião
                atualizarCampoReuniao();
            }

            // Detectar mudanças na categoria de reunião
            $('#categoria_reuniao').on('change', function() {
                atualizarCamposVisibilidade();
            });

            // Inicializar manipulação de reunião para casos de edição
            @if (isset($pauta) && !empty($pauta->reuniao))
                // Verificar o padrão da reunião para determinar a categoria
                const reuniaoExistente = "{{ $pauta->reuniao }}";

                if (reuniaoExistente.match(/^\d+[\.ªº°]?\s+Reunião\s+(Ordinária|Extraordinária)/i)) {
                    // É uma reunião deliberativa
                    $('#categoria_reuniao').val('deliberativa');

                    // Extrair número e tipo da reunião existente
                    const numeroMatch = reuniaoExistente.match(/(\d+)[\.ªº°]?/);
                    if (numeroMatch && numeroMatch[1]) {
                        $('#numero_reuniao').val(numeroMatch[1]);
                    }

                    // Verificar o tipo da reunião
                    if (reuniaoExistente.toLowerCase().includes('ordinária') ||
                        reuniaoExistente.toLowerCase().includes('ordinaria')) {
                        $('#tipo_reuniao').val('Ordinária');
                    } else if (reuniaoExistente.toLowerCase().includes('extraordinária') ||
                        reuniaoExistente.toLowerCase().includes('extraordinaria')) {
                        $('#tipo_reuniao').val('Extraordinária');
                    }

                } else if (reuniaoExistente.match(/^Reunião\s+Não\s+Deliberativa/i)) {
                    // É uma reunião não deliberativa
                    $('#categoria_reuniao').val('nao_deliberativa');

                    // Extrair o tema se houver
                    const temaMatch = reuniaoExistente.match(/^Reunião\s+Não\s+Deliberativa\s+-\s+(.+)$/i);
                    if (temaMatch && temaMatch[1]) {
                        $('#tema_reuniao').val(temaMatch[1]);
                    }
                } else if (reuniaoExistente.match(/^Audiência\s+Pública/i)) {
                    // É uma audiência pública
                    $('#categoria_reuniao').val('audiencia_publica');

                    // Extrair o tema se houver
                    const temaMatch = reuniaoExistente.match(/^Audiência\s+Pública\s+-\s+(.+)$/i);
                    if (temaMatch && temaMatch[1]) {
                        $('#tema_reuniao').val(temaMatch[1]);
                    }
                }
            @endif

            // Inicializar a visibilidade dos campos
            atualizarCamposVisibilidade();

            // Carregar arquivos existentes (para edição)
            @if (isset($pauta) && $pauta->arquivos->count() > 0)
                console.log('Inicializando arquivos existentes...');
                const existingFiles = [];

                // Add file data to the array - use push to avoid duplicate variable declarations
                @foreach ($pauta->arquivos as $key => $arquivo)
                    existingFiles.push({
                        id: {{ $arquivo->id }},
                        ext: "{{ strtolower($arquivo->tipo_arquivo) }}",
                        type: {{ $arquivo->type ?? 1 }},
                        name: "{{ $arquivo->titulo }}",
                        path: "{{ $arquivo->arquivo }}"
                    });
                @endforeach

                console.log('Total de arquivos carregados:', existingFiles.length);

                // Limpar a lista antes de adicionar para evitar duplicações
                $('#existingFileList').empty();

                // Create and add HTML for each file
                existingFiles.forEach(function(file, index) {
                    // Garantir que o ID seja um número válido
                    // Importante: Usamos APENAS o ID do banco de dados, não a fallback para index + 1
                    const fileId = parseInt(file.id);
                    const fileType = parseInt(file.type) || 1;

                    if (isNaN(fileId)) {
                        console.error('ID inválido encontrado:', file.id);
                        return; // Pular este arquivo
                    }

                    console.log(
                        `Renderizando arquivo ID: ${fileId}, Tipo: ${fileType}, Nome: ${file.name}`);

                    const fileHTML = `
                        <div class="file-preview existing-file" data-id="${fileId}">
                            <div class="file-icon"><i class="${getFileIconClass('file.' + file.ext)}"></i></div>
                            <div class="file-info">
                                <div class="file-name">${file.name}</div>
                                <div class="file-meta">
                                    <span class="badge badge-${file.ext} file-type-badge">.${file.ext}</span>
                                    <span class="badge badge-info file-type">${fileType == 1 ? 'Pauta' : 'Ata'}</span>
                                    <span class="file-size">Arquivo existente</span>
                                </div>
                            </div>
                            <div class="file-actions">
                                <a href="/${file.path}" class="btn btn-sm btn-outline-info" target="_blank" title="Visualizar">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <button type="button" class="btn btn-sm btn-outline-primary edit-existing-file mr-2"
                                    data-id="${fileId}"
                                    data-type="${fileType}"
                                    data-ext="${file.ext}"
                                    title="Editar Tipo">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-danger remove-existing-file"
                                    data-id="${fileId}"
                                    data-name="${file.name}">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    `;

                    $('#existingFileList').append(fileHTML);
                });
            @endif

            // Função para obter o ícone baseado na extensão
            function getFileIconClass(filename) {
                const extension = filename.split('.').pop().toLowerCase();

                if (['pdf'].includes(extension)) return 'fas fa-file-pdf';
                if (['doc', 'docx'].includes(extension)) return 'fas fa-file-word';
                if (['xls', 'xlsx'].includes(extension)) return 'fas fa-file-excel';
                if (['jpg', 'jpeg', 'png', 'gif'].includes(extension)) return 'fas fa-file-image';
                if (['mp4', 'avi', 'mov'].includes(extension)) return 'fas fa-file-video';
                if (['mp3', 'wav'].includes(extension)) return 'fas fa-file-audio';

                return 'fas fa-file';
            }

            // Função para configurar o modal para modo de adição
            function setupAddMode() {
                // Atualizar o título do modal
                $('#modalAddFileTitle').text('Adicionar Arquivo');

                // Mostrar a área de upload e esconder a área de edição
                $('#uploadArea').show();
                $('#editArea').hide();

                // Mostrar o botão Adicionar e esconder o botão Salvar
                $('#btnAddFile').show();
                $('#btnSaveEdit').hide();

                // Resetar o campo de ID do arquivo
                $('#editFileId').val('');

                // Resetar o tipo de arquivo
                $('#fileType').val('1');

                // Atualizar o estado do botão Adicionar
                updateAddButton();
            }

            // Função para configurar o modal para modo de edição
            function setupEditMode(fileId, fileType, fileExt) {
                // Atualizar o título do modal
                $('#modalAddFileTitle').text('Editar Tipo do Arquivo');

                // Esconder a área de upload e mostrar a área de edição
                $('#uploadArea').hide();
                $('#editArea').show();

                // Esconder o botão Adicionar e mostrar o botão Salvar
                $('#btnAddFile').hide();
                $('#btnSaveEdit').show();

                // Definir o ID do arquivo que está sendo editado
                $('#editFileId').val(fileId);

                // Definir o tipo como string (1 ou 2)
                const typeStr = (fileType == 2) ? "2" : "1";
                $('#fileType').val(typeStr);

                // Atualizar ícone e extensão na área de edição
                const iconClass = getFileIconClass('file.' + fileExt);
                $('#editFileIcon').attr('class', iconClass + ' fa-2x text-primary');
                $('#editFileExtension').text('.' + fileExt);
                $('#editFileExtension').attr('class', 'badge badge-pill badge-' + fileExt);

                // Definir o nome original do arquivo (opcional)
                $('#editOriginalName').text(`arquivo_${fileId}.${fileExt}`);
            }

            // Manipulador de eventos para o botão de edição
            $(document).on('click', '.edit-existing-file', function(e) {
                e.preventDefault(); // Evitar qualquer comportamento padrão

                const $button = $(this);

                // Obter valores dos atributos diretamente do HTML
                const fileId = $button.attr('data-id');
                const fileType = $button.attr('data-type');
                const fileExt = $button.attr('data-ext');

                // Conversões para garantir tipos corretos
                const numericId = parseInt(fileId, 10);
                const numericType = parseInt(fileType, 10);

                if (isNaN(numericId)) {
                    console.error('ID inválido:', fileId);
                    alert('Erro: ID do arquivo inválido');
                    return;
                }

                // Configurar o modal para modo de edição
                setupEditMode(numericId, numericType || 1, fileExt);

                // Abrir o modal
                $('#modalAddFile').modal('show');
            });

            // Função para atualizar indicadores de tamanho
            function updateSizeIndicators(newFileSize = 0) {
                // Calcular valores
                const potentialTotalSize = totalUploadSize + (newFileSize || 0);
                const usedPercentage = (potentialTotalSize / MAX_TOTAL_FILE_SIZE) * 100;
                const usedSpace = formatFileSize(potentialTotalSize);
                const remainingSpace = formatFileSize(MAX_TOTAL_FILE_SIZE - potentialTotalSize);

                // Atualizar barra principal do formulário
                $('#usedSpace').text(formatFileSize(totalUploadSize));
                $('#remainingSpace').text(`Restante: ${formatFileSize(MAX_TOTAL_FILE_SIZE - totalUploadSize)}`);
                $('#sizeProgressBar').css('width', `${(totalUploadSize / MAX_TOTAL_FILE_SIZE) * 100}%`);

                // Atualizar indicador no modal (com o novo arquivo incluído)
                $('#modalRemaining').text(`Restante: ${remainingSpace}`);
                $('#modalSizeProgressBar').css('width', `${usedPercentage}%`);

                // Mudar cor da barra de progresso baseado no uso
                const progressColor = usedPercentage > 90 ? '#e53e3e' :
                    usedPercentage > 70 ? '#ed8936' :
                    '#4299e1';

                $('#sizeProgressBar, #modalSizeProgressBar').css('background-color', progressColor);

                return potentialTotalSize <= MAX_TOTAL_FILE_SIZE;
            }

            // Abrir modal com garantia de reset
            $('#btnOpenAddFile').on('click', function() {
                // Limpar completamente o modal antes de abrir
                resetModal();
                setupAddMode();

                $('#modalAddFile').modal({
                    backdrop: true, // Permite clicar fora para fechar
                    keyboard: true, // Permite tecla ESC para fechar
                    show: true
                });
            });

            // Eventos para fechar o modal
            $('#btnCancelModal').on('click', function() {
                closeModalProperly();
            });

            $('.modal .close').on('click', function() {
                closeModalProperly();
            });

            // Fechar modal quando clicar fora
            $(document).on('click', '.modal-backdrop', function() {
                closeModalProperly();
            });

            // Fechar modal quando pressionar ESC
            $(document).keydown(function(e) {
                if (e.keyCode === 27 && $('#modalAddFile').hasClass('show')) { // ESC key
                    closeModalProperly();
                }
            });

            // Função para fechar o modal corretamente
            function closeModalProperly() {
                $('#modalAddFile').modal('hide');
                // Forçar a remoção do backdrop após fechar
                setTimeout(function() {
                    if ($('.modal-backdrop').length > 0) {
                        $('.modal-backdrop').remove();
                        $('body').removeClass('modal-open').css('padding-right', '');
                    }
                }, 200);
            }

            // Reset completo do modal
            function resetModal() {
                $('#fileType').val('1');
                if (modalFileElem) modalFileElem.value = '';
                if (modalFilePreview) modalFilePreview.style.display = 'none';
                currentModalFile = null;
                updateAddButton();
                updateSizeIndicators(); // Atualizar indicador de tamanho
            }

            // Função para atualizar o botão "Adicionar" do modal
            function updateAddButton() {
                // Habilita o botão apenas se arquivo estiver preenchido
                btnAddFile.disabled = !currentModalFile;
            }

            // Capitalizar primeira letra
            function capitalizeFirstLetter(string) {
                return string.charAt(0).toUpperCase() + string.slice(1);
            }

            // Configuração do Drag & Drop no modal
            modalFileSelect.addEventListener('click', function(e) {
                if (modalFileElem) {
                    modalFileElem.click();
                }
            });

            modalFileElem.addEventListener('change', handleModalFile);

            modalDropArea.addEventListener('dragover', function(e) {
                e.preventDefault();
                e.stopPropagation();
                modalDropArea.classList.add('drag-over');
            });

            modalDropArea.addEventListener('dragleave', function(e) {
                e.preventDefault();
                e.stopPropagation();
                modalDropArea.classList.remove('drag-over');
            });

            modalDropArea.addEventListener('drop', function(e) {
                e.preventDefault();
                e.stopPropagation();
                modalDropArea.classList.remove('drag-over');

                if (e.dataTransfer.files.length > 0) {
                    // Mesmo que arraste múltiplos, pegamos apenas o primeiro
                    modalFileElem.files = createSingleFileList(e.dataTransfer.files[0]);
                    handleModalFile();
                }
            });

            // Criar uma FileList com apenas um arquivo
            function createSingleFileList(file) {
                const dataTransfer = new DataTransfer();
                dataTransfer.items.add(file);
                return dataTransfer.files;
            }

            // Manipulação do arquivo no modal
            function handleModalFile() {
                if (modalFileElem.files.length > 0) {
                    // Sempre pegamos apenas o primeiro arquivo, mesmo que múltiplos sejam selecionados
                    const file = modalFileElem.files[0];

                    // Verificar se o arquivo excederia o limite total
                    if (totalUploadSize + file.size > MAX_TOTAL_FILE_SIZE) {
                        Swal.fire({
                            title: 'Limite de tamanho excedido',
                            html: `Este arquivo excederia o limite total de 60MB.<br>
                        <div class="mt-2">Tamanho atual: ${formatFileSize(totalUploadSize)}</div>
                        <div>Tamanho do arquivo: ${formatFileSize(file.size)}</div>
                        <div>Espaço restante: ${formatFileSize(MAX_TOTAL_FILE_SIZE - totalUploadSize)}</div>`,
                            icon: 'error',
                            confirmButtonColor: '#4299e1'
                        });
                        modalFileElem.value = '';
                        modalFilePreview.style.display = 'none';
                        currentModalFile = null;
                        updateAddButton();
                        return;
                    }

                    // Verificar extensão do arquivo
                    const fileExt = '.' + file.name.split('.').pop().toLowerCase();
                    if (!acceptedFormats.includes(fileExt)) {
                        Swal.fire({
                            title: 'Formato não suportado',
                            text: 'Por favor, selecione um arquivo em um dos formatos aceitos',
                            icon: 'error',
                            confirmButtonColor: '#4299e1'
                        });
                        modalFileElem.value = '';
                        modalFilePreview.style.display = 'none';
                        currentModalFile = null;
                        updateAddButton();
                        return;
                    }

                    // Atualizar preview
                    currentModalFile = file;
                    modalFilePreview.style.display = 'block';
                    modalFilePreview.innerHTML = createFilePreviewHTML(file.name, formatFileSize(file.size), true);

                    // Atualizar indicador de tamanho com o novo arquivo
                    updateSizeIndicators(file.size);

                    updateAddButton();
                }
            }

            // Animação de entrada de foco nos inputs
            $('input, select').on('focus', function() {
                $(this).closest('.form-group').addClass('focused');
            }).on('blur', function() {
                $(this).closest('.form-group').removeClass('focused');
            });

            // Efeito de ripple nos botões
            $('.btn').on('mousedown', function(e) {
                const $this = $(this);
                const offset = $this.offset();

                const x = e.pageX - offset.left;
                const y = e.pageY - offset.top;

                $this.append('<span class="ripple"></span>');

                const $ripple = $this.find('.ripple').last();
                $ripple.css({
                    top: y + 'px',
                    left: x + 'px'
                });

                setTimeout(function() {
                    $ripple.remove();
                }, 700);
            });

            // Remover arquivo do modal
            $(document).on('click', '.remove-modal-file', function() {
                modalFileElem.value = '';
                modalFilePreview.style.display = 'none';
                currentModalFile = null;
                updateAddButton();
                updateSizeIndicators(); // Resetar indicador no modal
            });

            // Adicionar arquivo ao formulário
            $('#btnAddFile').on('click', function() {
                if (!currentModalFile) return;

                const fileType = $('#fileType').val();
                const fileName = currentModalFile.name.split('.')[0]; // Usar nome do arquivo sem extensão
                const fileExt = currentModalFile.name.split('.').pop().toLowerCase();
                const fileId = 'file_' + fileCounter++;
                const fileSize = currentModalFile.size;

                // Atualizar o contador de tamanho total
                totalUploadSize += fileSize;

                // Criar um elemento para o arquivo no formulário
                const fileData = createFormFileElement(fileId, fileName, fileExt, fileType,
                    currentModalFile, fileSize);

                // Adicionar ao DOM
                $('#newFileList').append(fileData.preview);
                $('#pautaForm').append(fileData.formInputs);

                // Atualizar indicadores de tamanho
                updateSizeIndicators();

                // Atualizar visibilidade da mensagem "Nenhum arquivo adicionado"
                $('#noFilesMessage').hide();

                // Fechar o modal corretamente
                closeModalProperly();

                // Mostrar toast de sucesso
                Swal.fire({
                    icon: 'success',
                    title: 'Arquivo adicionado',
                    text: 'O arquivo foi adicionado com sucesso!',
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 3000,
                    timerProgressBar: true
                });
            });

            // Evento para o botão Salvar no modo de edição - CORRIGIDO
            $('#btnSaveEdit').on('click', function() {
                const fileIdStr = $('#editFileId').val();
                const fileTypeStr = $('#fileType').val();

                // Converter para números
                const fileId = parseInt(fileIdStr, 10);
                const fileType = parseInt(fileTypeStr, 10);

                // Validações
                if (isNaN(fileId)) {
                    console.error('ID inválido para conversão:', fileIdStr);
                    Swal.fire({
                        icon: 'error',
                        title: 'Erro',
                        text: 'ID do arquivo inválido'
                    });
                    return;
                }

                if (isNaN(fileType) || (fileType !== 1 && fileType !== 2)) {
                    console.error('Tipo inválido para conversão:', fileTypeStr);
                    Swal.fire({
                        icon: 'error',
                        title: 'Erro',
                        text: 'Tipo de arquivo inválido'
                    });
                    return;
                }

                // Log de depuração
                console.log('Tentando atualizar arquivo com ID:', fileId, 'para tipo:', fileType);

                // Mostrar loading
                Swal.fire({
                    title: 'Salvando...',
                    text: 'Aguarde enquanto o tipo do arquivo é atualizado',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                // Formatar os dados para garantir que sejam enviados corretamente
                const formData = new FormData();
                formData.append('arquivo_id', fileId);
                formData.append('novo_tipo', fileType);

                // Adicionar o token CSRF
                formData.append('_token', $('meta[name="csrf-token"]').attr('content'));

                // Enviar requisição AJAX para atualizar o tipo
                $.ajax({
                    url: "{{ route('publicador.pautas_comissoes.atualizar.tipo.arquivo.ajax') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        // CORREÇÃO: Usar seletor mais específico para garantir que apenas o elemento correto seja atualizado
                        const $fileElement = $(`.existing-file[data-id="${fileId}"]`);

                        console.log('Elementos encontrados:', $fileElement.length);

                        if ($fileElement.length) {
                            // Atualizar apenas o elemento específico
                            $fileElement.find('.file-type').text(fileType == 1 ? 'Pauta' :
                                'Ata');
                            $fileElement.find('.edit-existing-file').attr('data-type',
                                fileType);
                            console.log('Elemento atualizado com sucesso');
                        } else {
                            console.warn(
                                `Elemento com ID ${fileId} não encontrado para atualização`);
                        }

                        // Fechar o modal
                        closeModalProperly();

                        // Mostrar mensagem de sucesso
                        Swal.fire({
                            icon: 'success',
                            title: 'Tipo atualizado',
                            text: response.message || 'Arquivo atualizado com sucesso',
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 3000
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error('AJAX Erro:', {
                            status: xhr.status,
                            statusText: xhr.statusText,
                            responseText: xhr.responseText
                        });

                        let errorMessage = 'Erro ao atualizar tipo do arquivo';

                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                            console.error('Mensagem de erro:', errorMessage);
                        }

                        // Se houver erros de validação, mostrar detalhes
                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            console.error('Erros de validação:', xhr.responseJSON.errors);
                            const validationErrors = Object.values(xhr.responseJSON.errors)
                                .flat().join('\n');
                            errorMessage += '\n' + validationErrors;
                        }

                        Swal.fire({
                            icon: 'error',
                            title: 'Erro',
                            text: errorMessage
                        });
                    }
                });
            });

            // Remover arquivo da lista
            $(document).on('click', '.remove-file', function() {
                const fileId = $(this).data('file-id');
                const fileSize = $(this).data('file-size');
                const fileName = $(this).closest('.file-preview').find('.file-name').text();

                // Confirmar exclusão
                Swal.fire({
                    title: 'Remover arquivo?',
                    text: `Deseja remover o arquivo "${fileName}"?`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Sim, remover',
                    cancelButtonText: 'Cancelar',
                    confirmButtonColor: '#e53e3e',
                    cancelButtonColor: '#718096'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Reduzir o contador de tamanho total
                        totalUploadSize -= fileSize;

                        // Remover preview e inputs do formulário
                        $(this).closest('.file-preview').remove();
                        $(`input[name^="arquivos[${fileId}]"]`).remove();

                        // Verificar se ainda existem arquivos
                        if ($('#newFileList .file-preview').length === 0) {
                            $('#noFilesMessage').show();
                        }

                        // Atualizar indicadores de tamanho
                        updateSizeIndicators();

                        Swal.fire({
                            icon: 'success',
                            title: 'Arquivo removido',
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 2000
                        });
                    }
                });
            });

            // Evento para remover arquivo existente com AJAX
            $(document).on('click', '.remove-existing-file', function() {
                const fileId = $(this).attr('data-id');
                const fileName = $(this).attr('data-name');
                const $fileElement = $(this).closest('.file-preview');

                // Confirmar exclusão
                Swal.fire({
                    title: 'Remover arquivo?',
                    text: `Deseja remover o arquivo "${fileName}"? Esta ação não pode ser desfeita.`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Sim, remover',
                    cancelButtonText: 'Cancelar',
                    confirmButtonColor: '#e53e3e',
                    cancelButtonColor: '#718096'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Mostrar loading
                        Swal.fire({
                            title: 'Excluindo...',
                            text: 'Aguarde enquanto o arquivo é excluído',
                            allowOutsideClick: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });

                        // Formatar os dados para o AJAX
                        const formData = new FormData();
                        formData.append('arquivo_id', parseInt(fileId, 10));
                        formData.append('_token', $('meta[name="csrf-token"]').attr('content'));

                        // Fazer requisição AJAX para excluir
                        $.ajax({
                            url: "{{ route('publicador.pautas_comissoes.excluir.arquivo.ajax') }}",
                            type: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function(response) {
                                // Remover da interface
                                $fileElement.remove();

                                // Verificar se ainda existem arquivos
                                if ($('#existingFileList .file-preview').length === 0) {
                                    // Ocultar o contêiner de arquivos existentes se não houver mais nenhum
                                    $('.existing-files-container').slideUp(300);
                                }

                                Swal.fire({
                                    icon: 'success',
                                    title: 'Arquivo excluído',
                                    text: response.message,
                                    toast: true,
                                    position: 'top-end',
                                    showConfirmButton: false,
                                    timer: 3000
                                });
                            },
                            error: function(xhr) {
                                let errorMessage = 'Erro ao excluir arquivo';

                                if (xhr.responseJSON && xhr.responseJSON.message) {
                                    errorMessage = xhr.responseJSON.message;
                                }

                                Swal.fire({
                                    icon: 'error',
                                    title: 'Erro',
                                    text: errorMessage
                                });
                            }
                        });
                    }
                });
            });

            // Reset do modal ao fechar
            $('#modalAddFile').on('hidden.bs.modal', function() {
                resetModal();
            });

            // Função para criar o HTML de preview do arquivo no modal
            function createFilePreviewHTML(name, size, isModal = false) {
                const extension = name.split('.').pop().toLowerCase();
                let iconClass = 'fas fa-file';

                // Definir o ícone baseado na extensão
                if (['pdf'].includes(extension)) {
                    iconClass = 'fas fa-file-pdf';
                } else if (['doc', 'docx'].includes(extension)) {
                    iconClass = 'fas fa-file-word';
                } else if (['xls', 'xlsx'].includes(extension)) {
                    iconClass = 'fas fa-file-excel';
                } else if (['jpg', 'jpeg', 'png', 'gif'].includes(extension)) {
                    iconClass = 'fas fa-file-image';
                } else if (['mp4', 'avi', 'mov'].includes(extension)) {
                    iconClass = 'fas fa-file-video';
                } else if (['mp3', 'wav'].includes(extension)) {
                    iconClass = 'fas fa-file-audio';
                }

                const removeButtonClass = isModal ? 'remove-modal-file' : 'remove-file';
                const fileId = isModal ? '' : `data-file-id="${name}"`;

                return `
    <div class="file-preview">
        <div class="file-icon"><i class="${iconClass}"></i></div>
        <div class="file-info">
            <div class="file-name">${name}</div>
            <div class="file-size">${size}</div>
        </div>
        <div class="file-actions">
            <button type="button" class="btn btn-sm btn-outline-danger ${removeButtonClass}" ${fileId}>
                <i class="fas fa-trash"></i> Remover
            </button>
        </div>
    </div>
    `;
            }

            // Função para criar elementos do formulário para o arquivo
            function createFormFileElement(fileId, fileName, fileExt, fileType, file, fileSize) {
                // Determinar a classe do badge baseado na extensão
                const badgeClass = `badge-${fileExt}`;

                // Preview HTML
                const previewHTML = `
    <div class="file-preview new-file">
        <div class="file-icon"><i class="${getFileIconClass(file.name)}"></i></div>
        <div class="file-info">
            <div class="file-name">${fileName}</div>
            <div class="file-meta">
                <span class="badge ${badgeClass} file-type-badge">.${fileExt}</span>
                <span class="badge badge-info file-type">${fileType == 1 ? 'Pauta' : 'Ata'}</span>
                <span class="file-size">${formatFileSize(fileSize)}</span>
            </div>
        </div>
        <div class="file-actions">
            <button type="button" class="btn btn-sm btn-outline-info view-file" onclick="viewFile('${URL.createObjectURL(file)}')" title="Visualizar">
                <i class="fas fa-eye"></i>
            </button>
            <button type="button" class="btn btn-sm btn-outline-danger remove-file" data-file-id="${fileId}" data-file-size="${fileSize}">
                <i class="fas fa-trash"></i>
            </button>
        </div>
    </div>
    `;

                // Criar inputs ocultos para o formulário
                const formInputs = `
    <input type="hidden" name="arquivos[${fileId}][nome]" value="${fileName}">
    <input type="hidden" name="arquivos[${fileId}][tipo]" value="${fileExt}">
    <input type="hidden" name="arquivos[${fileId}][type]" value="${fileType}">
    <input type="hidden" name="arquivos[${fileId}][tamanho]" value="${fileSize}">
    <input type="file" name="arquivos[${fileId}][arquivo]" style="display:none" id="form_${fileId}">
    `;

                // Criar um elemento temporário para adicionar os inputs
                const tempDiv = document.createElement('div');
                tempDiv.innerHTML = formInputs;

                // Criar um DataTransfer para adicionar o arquivo ao input
                const dataTransfer = new DataTransfer();
                dataTransfer.items.add(file);

                // Após adicionar ao DOM, definir o arquivo
                setTimeout(() => {
                    const formFileInput = document.getElementById(`form_${fileId}`);
                    if (formFileInput) {
                        formFileInput.files = dataTransfer.files;
                    }
                }, 100);

                return {
                    preview: previewHTML,
                    formInputs: tempDiv
                };
            }

            // Função para formatar o tamanho do arquivo
            function formatFileSize(bytes) {
                if (bytes === 0) return '0 Bytes';
                const k = 1024;
                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
                const i = Math.floor(Math.log(bytes) / Math.log(k));
                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
            }

            // Make the viewFile function accessible globally via window
            window.viewFile = function(fileURL) {
                window.open(fileURL, '_blank');
            };

            // Inicializar indicadores de tamanho
            updateSizeIndicators();

            // Executar a função de atualização do campo reunião ao carregar
            atualizarCampoReuniao();
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('pautaForm');
            const publicadoField = document.getElementById('publicado');
            const publicadoHidden = document.getElementById('publicado_hidden');

            if (form && publicadoField && publicadoHidden) {
                publicadoField.addEventListener('change', function() {
                    if (publicadoHidden) {
                        publicadoHidden.value = this.value;
                    }
                });
            }
        });
    </script>
    <style>
        /* ===== ESTILOS GERAIS ===== */
        body {
            background-color: #f5f7fa;
        }

        .card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            overflow: hidden;
            background-color: #fff;
        }

        .card-body {
            padding: 2rem;
        }

        .card-title {
            font-weight: 700;
            font-size: 1.5rem;
            color: #1a3b5d;
            margin-bottom: 1.5rem;
            letter-spacing: -0.3px;
        }

        /* ===== FORMULÁRIOS E CAMPOS ===== */
        .form-label {
            font-weight: 600;
            color: #435a6f;
            margin-bottom: 0.5rem;
            font-size: 0.95rem;
            display: block;
        }

        .form-control {
            border: 2px solid #edf2f7;
            border-radius: 8px;
            padding: 5px 16px;
            transition: all 0.3s ease;
            font-size: 1rem;
            color: #2d3748;
            height: calc(2.5rem + 2px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
            background-color: #fff;
        }

        .form-control:focus {
            border-color: #4299e1;
            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
            outline: none;
        }

        .form-control::placeholder {
            color: #a0aec0;
            opacity: 1;
        }

        select.form-control {
            padding-right: 30px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-position: right 10px center;
            background-repeat: no-repeat;
            background-size: 16px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }

        .form-text {
            font-size: 0.85rem;
            color: #718096;
            margin-top: 0.5rem;
        }

        .invalid-feedback {
            font-size: 0.85rem;
            color: #e53e3e;
            margin-top: 0.25rem;
            display: block;
        }

        /* ===== BOTÕES ===== */
        .btn {
            padding: 10px 18px;
            border-radius: 8px;
            font-weight: 600;
            letter-spacing: 0.3px;
            transition: all 0.3s ease;
            text-transform: none;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
            position: relative;
            overflow: hidden;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: none;
        }

        .btn:active {
            transform: translateY(1px);
        }

        /* Efeito de ondulação nos botões */
        .btn::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-image: radial-gradient(circle, rgba(255, 255, 255, 0.4) 1%, transparent 1%);
            background-position: center;
            background-size: 15000%;
            opacity: 0;
            transition: background-size 0.6s ease, opacity 0.6s ease;
        }

        .btn:active::after {
            background-size: 0%;
            opacity: 0.3;
            transition: 0s;
        }

        .btn-primary {
            background-color: #4299e1;
            color: white;
        }

        .btn-primary:hover {
            background-color: #3182ce;
            box-shadow: 0 4px 8px rgba(66, 153, 225, 0.3);
        }

        .btn-primary:focus {
            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.3);
        }

        .btn-secondary {
            background-color: #718096;
            color: white;
        }

        .btn-secondary:hover {
            background-color: #5a6777;
            box-shadow: 0 4px 8px rgba(113, 128, 150, 0.3);
        }

        .btn-secondary:focus {
            box-shadow: 0 0 0 3px rgba(113, 128, 150, 0.3);
        }

        .btn-outline-primary {
            color: #4299e1;
            background-color: transparent;
            border: 2px solid #4299e1;
        }

        .btn-outline-primary:hover {
            background-color: #4299e1;
            color: white;
            box-shadow: 0 4px 8px rgba(66, 153, 225, 0.2);
        }

        .btn-outline-info {
            color: #38b2ac;
            background-color: transparent;
            border: 2px solid #38b2ac;
        }

        .btn-outline-info:hover {
            background-color: #38b2ac;
            color: white;
            box-shadow: 0 4px 8px rgba(56, 178, 172, 0.2);
        }

        .btn-outline-danger {
            color: #e53e3e;
            background-color: transparent;
            border: 2px solid #e53e3e;
        }

        .btn-outline-danger:hover {
            background-color: #e53e3e;
            color: white;
            box-shadow: 0 4px 8px rgba(229, 62, 62, 0.2);
        }

        .btn-sm {
            padding: 6px 12px;
            font-size: 0.875rem;
            border-radius: 6px;
        }

        .btn .fas {
            margin-right: 6px;
        }

        /* ===== LAYOUT E SEPARADORES ===== */
        hr {
            border: 0;
            height: 1px;
            background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.05));
            margin: 1.5rem 0;
        }

        h5 {
            font-weight: 700;
            color: #2d3748;
            margin-bottom: 0;
            font-size: 1.1rem;
        }

        /* ===== ALERTAS E NOTIFICAÇÕES ===== */
        .alert {
            border-radius: 8px;
            padding: 0.85rem 1.25rem;
            border: 1px solid transparent;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .alert-info {
            color: #2a5b7c;
            background-color: #e6f6fd;
            border-color: #bee5eb;
        }

        /* ===== MODAL ===== */
        .modal-content {
            border: none;
            border-radius: 12px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }

        .modal-header {
            background-color: #f8fafc;
            border-bottom: 1px solid #edf2f7;
            padding: 1.25rem 1.5rem;
            align-items: center;
        }

        .modal-title {
            font-weight: 700;
            color: #fff;
            font-size: 1.25rem;
        }

        .modal-body {
            padding: 1.5rem;
            background-color: white;
        }

        .modal-footer {
            border-top: 1px solid #edf2f7;
            padding: 1.25rem 1.5rem;
            background-color: #f8fafc;
        }

        .modal-backdrop.show {
            opacity: 0.75 !important;
        }

        .modal-backdrop {
            background-color: rgba(15, 23, 42, 0.65) !important;
            backdrop-filter: blur(5px) !important;
        }

        .close {
            font-size: 1.5rem;
            font-weight: 600;
            color: #a0aec0;
            text-shadow: none;
            opacity: 0.8;
            padding: 0;
            background-color: transparent;
            border: 0;
            appearance: none;
            transition: color 0.2s ease, opacity 0.2s ease;
        }

        .close:hover {
            color: #e53e3e;
            opacity: 1;
        }

        /* Animação do modal */
        .fade {
            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .modal.fade .modal-dialog {
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translateY(-10px) scale(0.98);
        }

        .modal.show .modal-dialog {
            transform: translateY(0) scale(1);
        }

        /* ===== ÁREA DE UPLOAD ===== */
        .drop-area {
            border: 2px dashed #4299e1;
            border-radius: 10px;
            background: #f7fafc;
            min-height: 140px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .drop-area:hover {
            background-color: #ebf8ff;
            border-color: #3182ce;
        }

        .drop-area.drag-over {
            background-color: #ebf8ff;
            border-color: #3182ce;
            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.25);
        }

        .drop-area p {
            margin-bottom: 12px;
            color: #718096;
            font-size: 1rem;
        }

        /* ===== VISUALIZAÇÃO DE ARQUIVOS ===== */
        .file-preview {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            padding: 16px;
            background-color: #f8fafc;
            border-radius: 10px;
            border: 1px solid #edf2f7;
            transition: all 0.3s ease;
        }

        .file-preview:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            background-color: #fff;
            transform: translateY(-2px);
        }

        .file-preview .file-icon {
            font-size: 28px;
            margin-right: 18px;
            color: #4a5568;
            width: 36px;
            text-align: center;
            opacity: 0.9;
        }

        .file-preview .file-type-badge {
            font-size: 0.75rem;
            padding: 4px 10px;
            border-radius: 20px;
            margin-right: 10px;
            display: inline-block;
            font-weight: 600;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .file-preview .file-info {
            flex-grow: 1;
        }

        .file-preview .file-name {
            font-weight: 600;
            margin-bottom: 5px;
            color: #2d3748;
            font-size: 1rem;
        }

        .file-preview .file-meta {
            display: flex;
            align-items: center;
        }

        .file-preview .file-size {
            font-size: 0.85rem;
            color: #718096;
            margin-left: 10px;
        }

        .file-preview .file-actions {
            display: flex;
            align-items: center;
        }

        .file-preview .file-actions button {
            margin-left: 8px;
        }

        /* ===== BADGES POR TIPO DE ARQUIVO ===== */
        .badge {
            display: inline-flex;
            align-items: center;
            padding: 0.3em 0.75em;
            font-size: 0.75rem;
            font-weight: 600;
            line-height: 1;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: 20px;
            letter-spacing: 0.3px;
        }

        .badge-pdf {
            background-color: #f56565;
            color: white;
        }

        .badge-doc,
        .badge-docx {
            background-color: #4299e1;
            color: white;
        }

        .badge-xls,
        .badge-xlsx {
            background-color: #48bb78;
            color: white;
        }

        .badge-jpg,
        .badge-jpeg,
        .badge-png {
            background-color: #805ad5;
            color: white;
        }

        .badge-mp4 {
            background-color: #ed64a6;
            color: white;
        }

        .badge-mp3 {
            background-color: #f6ad55;
            color: white;
        }

        /* ===== ADAPTAÇÕES BOOTSTRAP 4.3 ===== */
        .mr-1 {
            margin-right: 0.25rem !important;
        }

        .mr-2 {
            margin-right: 0.5rem !important;
        }

        .mr-3 {
            margin-right: 1rem !important;
        }

        .ml-1 {
            margin-left: 0.25rem !important;
        }

        .ml-2 {
            margin-left: 0.5rem !important;
        }

        .ml-3 {
            margin-left: 1rem !important;
        }

        .mt-1 {
            margin-top: 0.25rem !important;
        }

        .mt-2 {
            margin-top: 0.5rem !important;
        }

        .mt-3 {
            margin-top: 1rem !important;
        }

        .mt-4 {
            margin-top: 1.5rem !important;
        }

        .mb-1 {
            margin-bottom: 0.25rem !important;
        }

        .mb-2 {
            margin-bottom: 0.5rem !important;
        }

        .mb-3 {
            margin-bottom: 1rem !important;
        }

        .mb-4 {
            margin-bottom: 1.5rem !important;
        }

        .p-2 {
            padding: 0.5rem !important;
        }

        .p-3 {
            padding: 1rem !important;
        }

        .p-4 {
            padding: 1.5rem !important;
        }

        .d-flex {
            display: flex !important;
        }

        .justify-content-between {
            justify-content: space-between !important;
        }

        .align-items-center {
            align-items: center !important;
        }

        .g-3 {
            --bs-gutter-x: 1rem;
            --bs-gutter-y: 1rem;
        }

        /* ===== RESPONSIVIDADE ===== */
        @media (max-width: 768px) {
            .card-body {
                padding: 1.5rem;
            }

            .modal-dialog-centered {
                min-height: calc(100% - 3.5rem);
            }

            .file-preview {
                flex-direction: column;
                align-items: flex-start;
            }

            .file-preview .file-icon {
                margin-bottom: 12px;
                margin-right: 0;
                font-size: 30px;
                width: 100%;
                text-align: left;
            }

            .file-preview .file-actions {
                margin-top: 12px;
                width: 100%;
                justify-content: flex-end;
            }

            .file-preview .file-info {
                width: 100%;
            }

            .btn {
                padding: 8px 16px;
            }
        }

        .form-group.focused .form-control {
            border-color: #4299e1;
            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
        }

        .ripple {
            position: absolute;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.4);
            transform: scale(0);
            animation: ripple 0.6s linear;
            pointer-events: none;
        }

        @keyframes ripple {
            to {
                transform: scale(2.5);
                opacity: 0;
            }
        }

        .filesize-indicator {
            background-color: #f8fafc;
            border-radius: 8px;
            padding: 12px;
            border: 1px solid #edf2f7;
        }

        .size-text {
            font-size: 0.9rem;
            color: #4a5568;
            font-weight: 500;
        }

        .progress {
            overflow: hidden;
        }

        /* Estilos para os containers de arquivos */
        .existing-files-container,
        .new-files-container {
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
            padding: 15px;
            margin-bottom: 20px;
        }

        .existing-files-container {
            border-left: 4px solid #4299e1;
        }

        .new-files-container {
            border-left: 4px solid #48bb78;
        }

        .section-header {
            padding-bottom: 8px;
            border-bottom: 1px solid #edf2f7;
            margin-bottom: 12px;
        }

        .section-header h6 {
            color: #2d3748;
            font-weight: 600;
            font-size: 1rem;
        }

        /* Estilos para os arquivos */
        .existing-file {
            background-color: #ebf8ff;
            border-left: 3px solid #4299e1;
        }

        .new-file {
            background-color: #f0fff4;
            border-left: 3px solid #48bb78;
        }

        .file-preview {
            margin-bottom: 10px;
            padding: 12px;
            border-radius: 8px;
            transition: all 0.2s ease;
        }

        .file-preview:hover {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
        }

        .badge-pdf {
            background-color: #f56565;
            color: white;
        }

        .badge-doc,
        .badge-docx {
            background-color: #4299e1;
            color: white;
        }

        .badge-xls,
        .badge-xlsx {
            background-color: #48bb78;
            color: white;
        }

        .badge-jpg,
        .badge-jpeg,
        .badge-png {
            background-color: #805ad5;
            color: white;
        }

        .badge-mp4 {
            background-color: #ed64a6;
            color: white;
        }

        .badge-mp3 {
            background-color: #f6ad55;
            color: white;
        }

        /* Área de edição no modal */
        .edit-file-info {
            background-color: #f8fafc;
            border-radius: 8px;
        }

        .edit-file-info i {
            opacity: 0.9;
        }

        /* Estilo para a prévia do nome da reunião */
        #previa_reuniao {
            font-weight: 600;
            color: #2a5b7c;
        }
    </style>
@endsection