@extends('layouts.publicador.novo_padrao')

@section('content')
    <div class="ccj-files-container">
        <div class="ccj-files-header">
            <div class="ccj-files-title-section">
                <div class="ccj-files-icon-wrapper">
                    <i class="fas fa-folder-open"></i>
                </div>
                <div class="ccj-files-title-content">
                    <h2 class="ccj-files-main-title">{{ $model->titulo }}</h2>
                    <p class="ccj-files-subtitle">
                        <i class="fas fa-paperclip"></i>
                        Gerenciamento de @choice('labels.arquivos', 0)
                    </p>
                </div>
            </div>
            <div class="ccj-files-header-actions">
                <a href="{{ route('publicador.ccj.index') }}" class="ccj-files-btn-back">
                    <i class="fas fa-arrow-left"></i>
                    <span>Voltar para lista</span>
                </a>
            </div>
        </div>

        @if (session('status-success'))
            <div class="ccj-files-alert ccj-files-alert-success">
                <i class="fas fa-check-circle"></i>
                <span>{{ session('status-success') }}</span>
            </div>
        @endif

        @if (session('status-error'))
            <div class="ccj-files-alert ccj-files-alert-error">
                <i class="fas fa-exclamation-triangle"></i>
                <span>{{ session('status-error') }}</span>
            </div>
        @endif

        @if (session('status-warning'))
            <div class="ccj-files-alert ccj-files-alert-warning">
                <i class="fas fa-exclamation-triangle"></i>
                <span>{{ session('status-warning') }}</span>
            </div>
        @endif

        @canany(['ccj_adicionar', 'ccj_alterar'])
            <div class="ccj-files-upload-card">
                <div class="ccj-files-card-header">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <span>@lang('labels.acoes.adicionar') Novos Arquivos Anexos</span>
                    <span class="ccj-files-header-hint">
                        <i class="fas fa-info-circle"></i>
                        Até 20 arquivos (PDF, DOC, DOCX, XLS, XLSX) - Máx. 150MB total
                    </span>
                </div>
                <div class="ccj-files-card-body">
                    {!! Form::open([
                        'route' => ['publicador.ccj.adicionar_arquivo', $model->id],
                        'method' => 'POST',
                        'class' => 'ccj-files-form',
                        'files' => true,
                        'id' => 'upload-form',
                    ]) !!}
                    {!! Form::hidden('pauta_id', $model->id) !!}

                    <div class="ccj-files-upload-zone" id="upload-zone">
                        <input type="file" name="arquivos[]" id="arquivo-upload" style="position: absolute; opacity: 0; pointer-events: none;" accept=".pdf,.doc,.docx,.xls,.xlsx" multiple>

                        <div class="ccj-files-drop-area" id="drop-area">
                            <div class="ccj-files-drop-icon">
                                <i class="fas fa-cloud-upload-alt"></i>
                            </div>
                            <h4 class="ccj-files-drop-title">Arraste os arquivos aqui</h4>
                            <p class="ccj-files-drop-subtitle">ou</p>
                            <button type="button" class="ccj-files-drop-button" id="select-file-btn">
                                <i class="fas fa-folder-open"></i>
                                Selecionar Arquivos
                            </button>
                            <p class="ccj-files-drop-hint">
                                <i class="fas fa-file-alt"></i>
                                Formatos aceitos: PDF, DOC, DOCX, XLS, XLSX | Máximo: 20 arquivos | Limite total: 150MB
                            </p>
                        </div>

                        <div class="ccj-files-preview-area" id="preview-area" style="display: none;">
                            <div class="ccj-files-preview-header">
                                <div class="ccj-files-preview-summary">
                                    <span class="ccj-files-summary-item">
                                        <i class="fas fa-file"></i>
                                        <strong id="total-arquivos">0</strong> arquivo(s)
                                    </span>
                                    <span class="ccj-files-summary-item">
                                        <i class="fas fa-hdd"></i>
                                        <strong id="tamanho-total">0 MB</strong>
                                    </span>
                                    <span class="ccj-files-summary-item" id="limite-status">
                                        <i class="fas fa-check-circle" style="color: #28a745;"></i>
                                        Dentro do limite
                                    </span>
                                </div>
                                <div class="ccj-files-header-actions">
                                    <button type="button" class="ccj-files-btn-add-more" id="add-more-btn">
                                        <i class="fas fa-plus"></i>
                                        Adicionar Mais
                                    </button>
                                    <button type="button" class="ccj-files-btn-clear-all" id="clear-all-btn">
                                        <i class="fas fa-trash-alt"></i>
                                        Limpar Tudo
                                    </button>
                                </div>
                            </div>

                            <div class="ccj-files-preview-list" id="preview-list"></div>

                            <div class="ccj-files-submit-area">
                                <button type="button" class="ccj-files-btn-cancel" id="cancel-upload-btn">
                                    <i class="fas fa-times"></i>
                                    Cancelar
                                </button>
                                <button type="submit" class="ccj-files-btn-upload" id="btn-upload">
                                    <i class="fas fa-cloud-upload-alt"></i>
                                    Fazer Upload
                                </button>
                            </div>
                        </div>
                    </div>

                    @if ($errors->has('arquivos'))
                        <div class="ccj-files-error ccj-files-error-main">
                            <i class="fas fa-exclamation-circle"></i>
                            <strong>{{ $errors->first('arquivos') }}</strong>
                        </div>
                    @endif
                    {!! Form::close() !!}
                </div>
            </div>
        @endcanany

        @if (!empty($model->arquivo))
            <div class="ccj-files-main-card">
                <div class="ccj-files-card-header">
                    <div class="ccj-files-header-left">
                        <i class="fas fa-star"></i>
                        <span>Arquivo Principal da Pauta</span>
                        <span class="ccj-files-badge ccj-files-badge-primary">Principal</span>
                    </div>
                </div>
                <div class="ccj-files-card-body">
                    <div class="ccj-files-main-file">
                        <div class="ccj-files-main-file-icon">
                            @php
                                $mainExtension = strtolower(pathinfo($model->arquivo, PATHINFO_EXTENSION));
                                $mainIconClass = 'fa-file';
                                if ($mainExtension == 'pdf') {
                                    $mainIconClass = 'fa-file-pdf';
                                } elseif (in_array($mainExtension, ['doc', 'docx'])) {
                                    $mainIconClass = 'fa-file-word';
                                }
                            @endphp
                            <i class="fas {{ $mainIconClass }}"></i>
                        </div>
                        <div class="ccj-files-main-file-info">
                            <h4 class="ccj-files-main-file-title">{{ $model->titulo }}</h4>
                            <p class="ccj-files-main-file-name">
                                <i class="fas fa-file"></i>
                                {{ $model->arquivo }}
                            </p>
                            <div class="ccj-files-main-file-meta">
                                <span class="ccj-files-meta-item">
                                    <i class="fas fa-calendar-alt"></i>
                                    Data da Sessão: {{ $model->data_sessao->format('d/m/Y H:i') }}
                                </span>
                                <span class="ccj-files-meta-item">
                                    <i class="fas fa-broadcast-tower"></i>
                                    Publicado em: {{ $model->data_publicacao->format('d/m/Y H:i') }}
                                </span>
                            </div>
                        </div>
                        <div class="ccj-files-main-file-actions">
                            <a href="{{ Storage::url('ccj/' . $model->arquivo) }}" class="ccj-files-btn-main-view" target="_blank">
                                <i class="fas fa-eye"></i>
                                Visualizar Arquivo Principal
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        @if ($model->arquivos->count() > 0)
            <div class="ccj-files-list-card">
                <div class="ccj-files-card-header">
                    <div class="ccj-files-header-left">
                        <i class="fas fa-list"></i>
                        <span>Arquivos Anexos Adicionais</span>
                        <span class="ccj-files-badge">{{ $model->arquivos->count() }}</span>
                    </div>
                    @can('ccj_excluir')
                        <div class="ccj-files-header-right">
                            <button type="button" class="ccj-files-btn-delete-selected" id="btn-excluir-selecionados" disabled>
                                <i class="fas fa-trash-alt"></i>
                                Excluir Selecionados (<span id="contador-selecionados">0</span>)
                            </button>
                        </div>
                    @endcan
                </div>
                <div class="ccj-files-card-body">
                    @can('ccj_excluir')
                        {!! Form::open([
                            'method' => 'DELETE',
                            'route' => ['publicador.ccj.excluir_arquivos_lote', $model->id],
                            'id' => 'form-excluir-lote',
                            'class' => 'form-delete-batch',
                        ]) !!}
                    @endcan

                    <div class="ccj-files-table-wrapper">
                        <table class="ccj-files-table">
                            <thead>
                                <tr>
                                    @can('ccj_excluir')
                                        <th class="ccj-files-th-checkbox">
                                            <div class="ccj-files-checkbox">
                                                <input type="checkbox" id="selecionar-todos" class="ccj-files-checkbox-input">
                                                <label for="selecionar-todos" class="ccj-files-checkbox-label">
                                                    <i class="fas fa-check"></i>
                                                </label>
                                            </div>
                                        </th>
                                    @endcan
                                    <th class="ccj-files-th-title">
                                        <i class="fas fa-file-alt"></i>
                                        @lang('labels.descricao')
                                    </th>
                                    <th class="ccj-files-th-date">
                                        <i class="fas fa-calendar-plus"></i>
                                        @lang('labels.data_cadastro')
                                    </th>
                                    <th class="ccj-files-th-actions">
                                        <i class="fas fa-cogs"></i>
                                        Ações
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($model->arquivos as $c => $item)
                                    <tr class="ccj-files-row">
                                        @can('ccj_excluir')
                                            <td class="ccj-files-cell-checkbox">
                                                <div class="ccj-files-checkbox">
                                                    <input type="checkbox" class="ccj-files-checkbox-input arquivo-checkbox" id="arquivo-{{ $item->id }}" name="arquivos[]" value="{{ $item->id }}">
                                                    <label for="arquivo-{{ $item->id }}" class="ccj-files-checkbox-label">
                                                        <i class="fas fa-check"></i>
                                                    </label>
                                                </div>
                                            </td>
                                        @endcan
                                        <td class="ccj-files-cell-title">
                                            <div class="ccj-files-file-info">
                                                <div class="ccj-files-file-icon">
                                                    @php
                                                        $extension = strtolower(pathinfo($item->arquivo, PATHINFO_EXTENSION));
                                                        $iconClass = 'fa-file';
                                                        if ($extension == 'pdf') {
                                                            $iconClass = 'fa-file-pdf';
                                                        } elseif (in_array($extension, ['doc', 'docx'])) {
                                                            $iconClass = 'fa-file-word';
                                                        } elseif (in_array($extension, ['xls', 'xlsx'])) {
                                                            $iconClass = 'fa-file-excel';
                                                        }
                                                    @endphp
                                                    <i class="fas {{ $iconClass }}"></i>
                                                </div>
                                                <a href="{{ Storage::url('ccj/' . $item->arquivo) }}" class="ccj-files-file-link" target="_blank">
                                                    {{ $item->titulo }}
                                                    <i class="fas fa-external-link-alt"></i>
                                                </a>
                                            </div>
                                        </td>
                                        <td class="ccj-files-cell-date">
                                            <div class="ccj-files-date-badge">
                                                <i class="fas fa-clock"></i>
                                                {{ $item->created_at->format('d/m/Y') }}
                                                <span class="ccj-files-time">{{ $item->created_at->format('H:i') }}</span>
                                            </div>
                                        </td>
                                        <td class="ccj-files-cell-actions">
                                            <div class="ccj-files-actions">
                                                <a href="{{ Storage::url('ccj/' . $item->arquivo) }}" class="ccj-files-btn-action ccj-files-btn-view" target="_blank" title="Visualizar arquivo">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                @can('ccj_excluir')
                                                    {!! Form::open([
                                                        'method' => 'DELETE',
                                                        'route' => ['publicador.ccj.excluir_arquivo', $model->id],
                                                        'class' => 'form-delete ccj-files-form-inline',
                                                    ]) !!}
                                                    {{ Form::hidden('arquivo', $item->id) }}
                                                    <button type="submit" class="ccj-files-btn-action ccj-files-btn-delete" title="Excluir arquivo">
                                                        <i class="fas fa-trash-alt"></i>
                                                    </button>
                                                    {!! Form::close() !!}
                                                @endcan
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    @can('ccj_excluir')
                        {!! Form::close() !!}
                    @endcan
                </div>
            </div>
        @else
            <div class="ccj-files-empty-state">
                <div class="ccj-files-empty-icon">
                    <i class="fas fa-inbox"></i>
                </div>
                <h3 class="ccj-files-empty-title">Nenhum arquivo anexo adicional</h3>
                <p class="ccj-files-empty-text">Esta pauta ainda não possui arquivos anexos adicionais.</p>
                @canany(['ccj_adicionar', 'ccj_alterar'])
                    <p class="ccj-files-empty-hint">
                        <i class="fas fa-lightbulb"></i>
                        Use o formulário acima para adicionar arquivos complementares.
                    </p>
                @endcanany
            </div>
        @endif

        <div class="ccj-files-footer">
            <a href="{{ route('publicador.ccj.index') }}" class="ccj-files-btn-secondary">
                <i class="fas fa-arrow-circle-left"></i>
                @lang('labels.acoes.voltar')
            </a>
        </div>
    </div>

    <style>
        .ccj-files-container {
            padding: 20px;
            max-width: 1400px;
            margin: 0 auto;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        .swal2-container {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        .swal2-popup {
            border-radius: 15px;
            padding: 30px;
        }

        .swal2-title {
            font-size: 24px;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 15px;
        }

        .swal2-html-container {
            margin: 20px 0;
            line-height: 1.6;
        }

        .swal2-actions {
            margin-top: 25px;
        }

        .swal2-confirm,
        .swal2-cancel {
            border-radius: 10px;
            padding: 12px 30px;
            font-weight: 600;
            font-size: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .swal2-confirm:hover,
        .swal2-cancel:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        }

        .ccj-files-header-hint {
            margin-left: auto;
            background: rgba(0, 64, 113, 0.1);
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .ccj-files-upload-zone {
            position: relative;
        }

        .ccj-files-drop-area {
            padding: 60px 40px;
            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
            border: 3px dashed #004071;
            border-radius: 20px;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
        }

        .ccj-files-drop-area.dragover {
            background: linear-gradient(135deg, #e3f2fd 0%, #f0f8ff 100%);
            border-color: #00508a;
            transform: scale(1.02);
            box-shadow: 0 10px 40px rgba(0, 64, 113, 0.15);
        }

        .ccj-files-drop-icon {
            width: 100px;
            height: 100px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, #004071 0%, #00508a 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 30px rgba(0, 64, 113, 0.2);
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }

        .ccj-files-drop-icon i {
            font-size: 48px;
            color: white;
        }

        .ccj-files-drop-title {
            margin: 0 0 10px;
            color: #004071;
            font-size: 24px;
            font-weight: 700;
        }

        .ccj-files-drop-subtitle {
            margin: 0 0 20px;
            color: #6c757d;
            font-size: 14px;
        }

        .ccj-files-drop-button {
            padding: 12px 35px;
            background: white;
            color: #004071;
            border: 2px solid #004071;
            border-radius: 10px;
            font-weight: 600;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            position: relative;
            z-index: 1;
        }

        .ccj-files-drop-button:hover {
            background: #004071;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 64, 113, 0.3);
        }

        .ccj-files-drop-hint {
            margin: 30px 0 0;
            padding: 12px 20px;
            background: rgba(0, 64, 113, 0.05);
            border-radius: 8px;
            color: #6c757d;
            font-size: 13px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .ccj-files-preview-area {
            animation: slideUp 0.3s ease;
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .ccj-files-preview-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 12px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0, 64, 113, 0.05);
        }

        .ccj-files-preview-summary {
            display: flex;
            gap: 30px;
            align-items: center;
            flex-wrap: wrap;
        }

        .ccj-files-summary-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 15px;
            color: #495057;
        }

        .ccj-files-summary-item i {
            font-size: 18px;
            color: #004071;
        }

        .ccj-files-summary-item strong {
            color: #004071;
            font-size: 18px;
        }

        .ccj-files-btn-clear-all {
            padding: 10px 20px;
            background: #dc3545;
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .ccj-files-btn-clear-all:hover {
            background: #c82333;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
        }

        .ccj-files-header-actions {
            display: flex;
            gap: 10px;
        }

        .ccj-files-btn-add-more {
            padding: 10px 20px;
            background: #004071;
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .ccj-files-btn-add-more:hover {
            background: #00508a;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 64, 113, 0.3);
        }

        .ccj-files-preview-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 15px;
            margin-bottom: 25px;
            max-height: 500px;
            overflow-y: auto;
            padding: 10px;
        }

        .ccj-files-preview-card {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            background: white;
            border: 2px solid #e9ecef;
            border-radius: 12px;
            transition: all 0.3s ease;
        }

        .ccj-files-preview-card:hover {
            border-color: #004071;
            box-shadow: 0 4px 12px rgba(0, 64, 113, 0.1);
        }

        .ccj-files-preview-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #004071 0%, #00508a 100%);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .ccj-files-preview-icon i {
            font-size: 24px;
            color: white;
        }

        .ccj-files-preview-icon.pdf {
            background: linear-gradient(135deg, #dc3545 0%, #e74c5e 100%);
        }

        .ccj-files-preview-icon.doc {
            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
        }

        .ccj-files-preview-icon.xls {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        }

        .ccj-files-preview-details {
            flex: 1;
            min-width: 0;
        }

        .ccj-files-preview-name {
            font-size: 14px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .ccj-files-preview-size {
            font-size: 12px;
            color: #6c757d;
        }

        .ccj-files-preview-remove {
            width: 32px;
            height: 32px;
            background: #f8d7da;
            border: none;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            flex-shrink: 0;
        }

        .ccj-files-preview-remove:hover {
            background: #dc3545;
            color: white;
            transform: rotate(90deg);
        }

        .ccj-files-submit-area {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

        .ccj-files-btn-cancel {
            padding: 12px 30px;
            background: #6c757d;
            color: white;
            border: none;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .ccj-files-btn-cancel:hover {
            background: #5a6268;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(108, 117, 125, 0.3);
        }

        .ccj-files-btn-upload {
            padding: 12px 40px;
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
            border: none;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 16px;
        }

        .ccj-files-btn-upload:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
        }

        .ccj-files-btn-upload:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .ccj-files-error-main {
            margin-top: 15px;
            text-align: center;
        }

        .ccj-files-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding: 30px;
            background: linear-gradient(135deg, #004071 0%, #00508a 100%);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 64, 113, 0.2);
        }

        .ccj-files-title-section {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .ccj-files-icon-wrapper {
            width: 70px;
            height: 70px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(10px);
        }

        .ccj-files-icon-wrapper i {
            font-size: 32px;
            color: white;
        }

        .ccj-files-title-content {
            color: white;
        }

        .ccj-files-main-title {
            margin: 0;
            font-size: 28px;
            font-weight: 700;
            letter-spacing: -0.5px;
            line-height: 1.2;
        }

        .ccj-files-subtitle {
            margin: 8px 0 0;
            font-size: 15px;
            opacity: 0.95;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .ccj-files-subtitle i {
            font-size: 13px;
        }

        .ccj-files-btn-back {
            background: white;
            color: #004071;
            padding: 12px 24px;
            border-radius: 10px;
            text-decoration: none;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .ccj-files-btn-back:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            text-decoration: none;
            color: #003050;
        }

        .ccj-files-alert {
            padding: 15px 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 500;
            animation: slideDown 0.3s ease;
        }

        .ccj-files-alert-success {
            background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
            color: #155724;
            border: 1px solid #b1dfbb;
        }

        .ccj-files-alert-error {
            background: linear-gradient(135deg, #f8d7da 0%, #f5c2c7 100%);
            color: #721c24;
            border: 1px solid #f1aeb5;
        }

        .ccj-files-alert-warning {
            background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
            color: #856404;
            border: 1px solid #ffc107;
        }

        .ccj-files-main-card {
            background: white;
            border-radius: 15px;
            margin-bottom: 25px;
            box-shadow: 0 5px 20px rgba(0, 64, 113, 0.08);
            border: 2px solid #004071;
            overflow: hidden;
        }

        .ccj-files-badge-primary {
            background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
            color: #004071;
            font-weight: 700;
        }

        .ccj-files-main-file {
            display: flex;
            align-items: center;
            gap: 25px;
            padding: 20px;
            background: linear-gradient(135deg, #f0f8ff 0%, #e6f2ff 100%);
            border-radius: 12px;
        }

        .ccj-files-main-file-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #004071 0%, #00508a 100%);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: 0 5px 15px rgba(0, 64, 113, 0.2);
        }

        .ccj-files-main-file-icon i {
            font-size: 36px;
            color: white;
        }

        .ccj-files-main-file-info {
            flex: 1;
        }

        .ccj-files-main-file-title {
            margin: 0 0 8px;
            color: #004071;
            font-size: 20px;
            font-weight: 700;
        }

        .ccj-files-main-file-name {
            margin: 0 0 15px;
            color: #6c757d;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .ccj-files-main-file-name i {
            font-size: 12px;
        }

        .ccj-files-main-file-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        .ccj-files-meta-item {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: white;
            border-radius: 6px;
            font-size: 13px;
            color: #495057;
            border: 1px solid #dee2e6;
        }

        .ccj-files-meta-item i {
            font-size: 11px;
            color: #004071;
        }

        .ccj-files-main-file-actions {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .ccj-files-btn-main-view {
            padding: 12px 24px;
            background: linear-gradient(135deg, #004071 0%, #00508a 100%);
            color: white;
            border-radius: 10px;
            text-decoration: none;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(0, 64, 113, 0.2);
        }

        .ccj-files-btn-main-view:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 64, 113, 0.3);
            text-decoration: none;
            color: white;
        }

        .ccj-files-upload-card,
        .ccj-files-list-card {
            background: white;
            border-radius: 15px;
            margin-bottom: 25px;
            box-shadow: 0 5px 20px rgba(0, 64, 113, 0.08);
            border: 1px solid rgba(0, 64, 113, 0.1);
            overflow: hidden;
        }

        .ccj-files-card-header {
            padding: 20px 25px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-bottom: 1px solid rgba(0, 64, 113, 0.1);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            color: #004071;
            font-weight: 600;
            font-size: 18px;
        }

        .ccj-files-card-header i {
            font-size: 20px;
        }

        .ccj-files-header-left {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .ccj-files-badge {
            background: #004071;
            color: white;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
        }

        .ccj-files-card-body {
            padding: 25px;
        }

        .ccj-files-label {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 8px;
            color: #2c3e50;
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .ccj-files-label i {
            color: #004071;
            font-size: 12px;
        }

        .ccj-files-input {
            width: 100%;
            padding: 10px 15px;
            border: 2px solid #e1e8ed;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
            background: #f8f9fa;
        }

        .ccj-files-input:focus {
            outline: none;
            border-color: #004071;
            background: white;
            box-shadow: 0 0 0 3px rgba(0, 64, 113, 0.1);
        }

        .ccj-files-invalid {
            border-color: #dc3545;
            background: #fff5f5;
        }

        .ccj-files-error {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 8px;
            color: #dc3545;
            font-size: 13px;
        }

        .ccj-files-error i {
            font-size: 12px;
        }

        .ccj-files-btn-delete-selected {
            padding: 8px 16px;
            background: #dc3545;
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .ccj-files-btn-delete-selected:hover:not(:disabled) {
            background: #c82333;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
        }

        .ccj-files-btn-delete-selected:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .ccj-files-table-wrapper {
            overflow-x: auto;
        }

        .ccj-files-table {
            width: 100%;
            border-collapse: collapse;
        }

        .ccj-files-table thead {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        }

        .ccj-files-table th {
            padding: 15px;
            text-align: left;
            color: #004071;
            font-weight: 600;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 2px solid #dee2e6;
        }

        .ccj-files-table th i {
            margin-right: 8px;
            font-size: 12px;
        }

        .ccj-files-th-checkbox {
            width: 60px;
            text-align: center;
        }

        .ccj-files-th-actions {
            width: 120px;
            text-align: center;
        }

        .ccj-files-row {
            transition: all 0.3s ease;
            border-bottom: 1px solid #f1f3f5;
        }

        .ccj-files-row:hover {
            background: #f8f9fa;
        }

        .ccj-files-table td {
            padding: 15px;
        }

        .ccj-files-cell-checkbox {
            text-align: center;
        }

        .ccj-files-checkbox {
            display: inline-block;
            position: relative;
        }

        .ccj-files-checkbox-input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }

        .ccj-files-checkbox-label {
            display: block;
            width: 24px;
            height: 24px;
            border: 2px solid #dee2e6;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }

        .ccj-files-checkbox-label i {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 12px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .ccj-files-checkbox-input:checked+.ccj-files-checkbox-label {
            background: #004071;
            border-color: #004071;
        }

        .ccj-files-checkbox-input:checked+.ccj-files-checkbox-label i {
            opacity: 1;
        }

        #selecionar-todos:checked+.ccj-files-checkbox-label {
            background: #007bff;
            border-color: #007bff;
        }

        .ccj-files-file-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .ccj-files-file-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #dc3545 0%, #e74c5e 100%);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .ccj-files-file-icon i {
            color: white;
            font-size: 18px;
        }

        .ccj-files-file-link {
            color: #004071;
            text-decoration: none;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
        }

        .ccj-files-file-link i {
            font-size: 12px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .ccj-files-file-link:hover {
            color: #00508a;
            text-decoration: underline;
        }

        .ccj-files-file-link:hover i {
            opacity: 1;
        }

        .ccj-files-date-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            background: #e9ecef;
            border-radius: 6px;
            font-size: 13px;
            color: #495057;
        }

        .ccj-files-date-badge i {
            font-size: 11px;
            color: #6c757d;
        }

        .ccj-files-time {
            color: #6c757d;
            font-weight: 600;
            margin-left: 4px;
        }

        .ccj-files-cell-actions {
            text-align: center;
        }

        .ccj-files-actions {
            display: flex;
            justify-content: center;
            gap: 8px;
        }

        .ccj-files-form-inline {
            display: inline-flex;
            margin: 0;
        }

        .ccj-files-btn-action {
            width: 35px;
            height: 35px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            font-size: 14px;
        }

        .ccj-files-btn-view {
            background: #17a2b8;
            color: white;
        }

        .ccj-files-btn-view:hover {
            background: #138496;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
            color: white;
        }

        .ccj-files-btn-delete {
            background: #f8d7da;
            color: #721c24;
        }

        .ccj-files-btn-delete:hover {
            background: #dc3545;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
        }

        .ccj-files-empty-state {
            text-align: center;
            padding: 60px 20px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0, 64, 113, 0.08);
        }

        .ccj-files-empty-icon {
            width: 100px;
            height: 100px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .ccj-files-empty-icon i {
            font-size: 40px;
            color: #dee2e6;
        }

        .ccj-files-empty-title {
            font-size: 24px;
            color: #2c3e50;
            margin-bottom: 10px;
        }

        .ccj-files-empty-text {
            color: #6c757d;
            margin-bottom: 20px;
        }

        .ccj-files-empty-hint {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            background: #fff3cd;
            color: #856404;
            border-radius: 8px;
            font-size: 14px;
        }

        .ccj-files-footer {
            text-align: center;
            margin-top: 40px;
        }

        .ccj-files-btn-secondary {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 30px;
            background: #6c757d;
            color: white;
            border-radius: 10px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .ccj-files-btn-secondary:hover {
            background: #5a6268;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(108, 117, 125, 0.3);
            text-decoration: none;
            color: white;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (max-width: 768px) {
            .ccj-files-header {
                flex-direction: column;
                text-align: center;
                gap: 20px;
            }

            .ccj-files-title-section {
                flex-direction: column;
            }

            .ccj-files-card-header {
                flex-direction: column;
                gap: 15px;
            }

            .ccj-files-btn-delete-selected {
                width: 100%;
                justify-content: center;
            }

            .ccj-files-table {
                font-size: 13px;
            }

            .ccj-files-table th,
            .ccj-files-table td {
                padding: 10px;
            }

            .ccj-files-file-info {
                flex-direction: column;
                text-align: center;
            }

            .ccj-files-actions {
                flex-direction: column;
            }

            .ccj-files-btn-action {
                width: 100%;
            }

            .ccj-files-main-file {
                flex-direction: column;
                text-align: center;
            }

            .ccj-files-main-file-meta {
                justify-content: center;
            }

            .ccj-files-main-file-actions {
                width: 100%;
            }

            .ccj-files-btn-main-view {
                width: 100%;
            }

            .ccj-files-preview-list {
                grid-template-columns: 1fr;
            }

            .ccj-files-preview-header {
                flex-direction: column;
                gap: 15px;
            }

            .ccj-files-header-actions {
                flex-direction: column;
                width: 100%;
            }

            .ccj-files-btn-add-more,
            .ccj-files-btn-clear-all {
                width: 100%;
                justify-content: center;
            }
        }

        @media (max-width: 576px) {
            .ccj-files-container {
                padding: 10px;
            }

            .ccj-files-main-title {
                font-size: 20px;
            }

            .ccj-files-btn-back span {
                display: none;
            }

            .ccj-files-card-body {
                padding: 15px;
            }
        }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function() {
            let selectedFiles = [];
            const MAX_FILES = 20;
            const MAX_TOTAL_SIZE = 150 * 1024 * 1024;
            const MAX_FILE_SIZE = 40 * 1024 * 1024;

            const dropArea = document.getElementById('drop-area');
            const fileInput = document.getElementById('arquivo-upload');
            const previewArea = document.getElementById('preview-area');
            const previewList = document.getElementById('preview-list');
            const uploadForm = document.getElementById('upload-form');

            $('#select-file-btn').on('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                fileInput.click();
            });

            $('#add-more-btn').on('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                fileInput.click();
            });

            $('#cancel-upload-btn, #clear-all-btn').on('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                clearAllFiles();
            });

            function clearAllFiles() {
                selectedFiles = [];
                fileInput.value = '';
                previewArea.style.display = 'none';
                dropArea.style.display = 'block';
                previewList.innerHTML = '';
            }

            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                if (dropArea) {
                    dropArea.addEventListener(eventName, preventDefaults, false);
                }
                document.body.addEventListener(eventName, preventDefaults, false);
            });

            function preventDefaults(e) {
                e.preventDefault();
                e.stopPropagation();
            }

            if (dropArea) {
                ['dragenter', 'dragover'].forEach(eventName => {
                    dropArea.addEventListener(eventName, highlight, false);
                });

                ['dragleave', 'drop'].forEach(eventName => {
                    dropArea.addEventListener(eventName, unhighlight, false);
                });

                dropArea.addEventListener('drop', handleDrop, false);
            }

            function highlight(e) {
                dropArea.classList.add('dragover');
            }

            function unhighlight(e) {
                dropArea.classList.remove('dragover');
            }

            function handleDrop(e) {
                const dt = e.dataTransfer;
                const files = dt.files;
                handleFiles(files);
            }

            fileInput.addEventListener('change', function(e) {
                handleFiles(this.files);
            });

            function truncateFileName(fileName, maxLength = 40) {
                if (fileName.length <= maxLength) return fileName;
                const extension = fileName.split('.').pop();
                const nameWithoutExt = fileName.substring(0, fileName.lastIndexOf('.'));
                const truncatedName = nameWithoutExt.substring(0, maxLength - extension.length - 4);
                return `${truncatedName}...${extension}`;
            }

            function createFileList(files, maxVisible = 5) {
                const truncatedFiles = files.map(f => truncateFileName(f));
                
                if (files.length <= maxVisible) {
                    return truncatedFiles.map(f => `<div style="padding: 5px 0; text-align: left;">• ${f}</div>`).join('');
                }
                
                const visibleFiles = truncatedFiles.slice(0, maxVisible);
                const remaining = files.length - maxVisible;
                
                return `
                    <div style="max-height: 200px; overflow-y: auto; text-align: left; padding: 10px; background: #f8f9fa; border-radius: 8px; margin: 10px 0;">
                        ${visibleFiles.map(f => `<div style="padding: 5px 0;">• ${f}</div>`).join('')}
                        ${remaining > 0 ? `<div style="padding: 5px 0; color: #6c757d; font-style: italic;">... e mais ${remaining} arquivo(s)</div>` : ''}
                    </div>
                `;
            }

            function handleFiles(files) {
                const filesArray = Array.from(files);
                
                if (selectedFiles.length + filesArray.length > MAX_FILES) {
                    const canAddMore = MAX_FILES - selectedFiles.length;
                    Swal.fire({
                        icon: 'warning',
                        title: 'Limite de arquivos atingido',
                        html: `
                            <div style="text-align: center;">
                                <p style="font-size: 16px; margin: 15px 0;">
                                    Você pode enviar no máximo <strong style="color: #004071;">${MAX_FILES} arquivos</strong> por vez.
                                </p>
                                <div style="background: #e3f2fd; padding: 15px; border-radius: 10px; margin: 15px 0;">
                                    <div style="font-size: 14px; color: #004071;">
                                        <strong>${selectedFiles.length}</strong> arquivo(s) já selecionado(s)<br>
                                        <strong style="color: #28a745;">${canAddMore}</strong> arquivo(s) disponível(is)
                                    </div>
                                </div>
                            </div>
                        `,
                        confirmButtonText: 'Entendi',
                        confirmButtonColor: '#004071',
                        width: '500px'
                    });
                    fileInput.value = '';
                    return;
                }

                let invalidFiles = [];
                let oversizedFiles = [];
                let duplicateFiles = [];
                let addedFiles = [];

                filesArray.forEach(file => {
                    const isDuplicate = selectedFiles.some(existingFile => 
                        existingFile.name === file.name && existingFile.size === file.size
                    );

                    if (isDuplicate) {
                        duplicateFiles.push(file.name);
                        return;
                    }

                    const validTypes = ['application/pdf', 'application/msword', 
                        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
                        'application/vnd.ms-excel', 
                        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'];
                    const fileExtension = file.name.split('.').pop().toLowerCase();
                    const validExtensions = ['pdf', 'doc', 'docx', 'xls', 'xlsx'];

                    if (!validTypes.includes(file.type) && !validExtensions.includes(fileExtension)) {
                        invalidFiles.push(file.name);
                    } else if (file.size > MAX_FILE_SIZE) {
                        oversizedFiles.push({name: file.name, size: file.size});
                    } else {
                        selectedFiles.push(file);
                        addedFiles.push(file.name);
                    }
                });

                if (duplicateFiles.length > 0) {
                    Swal.fire({
                        icon: 'info',
                        title: 'Arquivos já adicionados',
                        html: `
                            <div style="text-align: center;">
                                <p style="font-size: 14px; margin: 15px 0;">
                                    <strong>${duplicateFiles.length}</strong> arquivo(s) já estavam na lista:
                                </p>
                                ${createFileList(duplicateFiles)}
                            </div>
                        `,
                        confirmButtonText: 'Entendi',
                        confirmButtonColor: '#004071',
                        width: '550px'
                    });
                }

                if (invalidFiles.length > 0) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Formato de arquivo inválido',
                        html: `
                            <div style="text-align: center;">
                                <p style="font-size: 14px; margin: 15px 0;">
                                    <strong>${invalidFiles.length}</strong> arquivo(s) com formato não suportado:
                                </p>
                                ${createFileList(invalidFiles)}
                                <div style="background: #fff3cd; padding: 12px; border-radius: 8px; margin-top: 15px; font-size: 13px;">
                                    <strong>Formatos aceitos:</strong> PDF, DOC, DOCX, XLS, XLSX
                                </div>
                            </div>
                        `,
                        confirmButtonText: 'Entendi',
                        confirmButtonColor: '#dc3545',
                        width: '550px'
                    });
                }

                if (oversizedFiles.length > 0) {
                    const fileListHtml = oversizedFiles.map(f => {
                        const sizeMB = (f.size / (1024 * 1024)).toFixed(2);
                        const truncatedName = truncateFileName(f.name);
                        return `<div style="padding: 5px 0; text-align: left;">• ${truncatedName} <span style="color: #dc3545; font-weight: bold;">(${sizeMB} MB)</span></div>`;
                    }).join('');

                    Swal.fire({
                        icon: 'error',
                        title: 'Arquivos muito grandes',
                        html: `
                            <div style="text-align: center;">
                                <p style="font-size: 14px; margin: 15px 0;">
                                    <strong>${oversizedFiles.length}</strong> arquivo(s) excedem o limite de 40MB:
                                </p>
                                <div style="max-height: 200px; overflow-y: auto; text-align: left; padding: 10px; background: #f8f9fa; border-radius: 8px; margin: 10px 0;">
                                    ${fileListHtml}
                                </div>
                                <div style="background: #fff3cd; padding: 12px; border-radius: 8px; margin-top: 15px; font-size: 13px;">
                                    <strong>Tamanho máximo por arquivo:</strong> 40 MB
                                </div>
                            </div>
                        `,
                        confirmButtonText: 'Entendi',
                        confirmButtonColor: '#dc3545',
                        width: '550px'
                    });
                }

                if (addedFiles.length > 0) {
                    const totalSize = selectedFiles.reduce((sum, file) => sum + file.size, 0);

                    if (totalSize > MAX_TOTAL_SIZE) {
                        const exceededBy = ((totalSize - MAX_TOTAL_SIZE) / (1024 * 1024)).toFixed(2);
                        const totalSizeMB = (totalSize / (1024 * 1024)).toFixed(2);
                        
                        addedFiles.forEach(fileName => {
                            const index = selectedFiles.findIndex(f => f.name === fileName);
                            if (index > -1) {
                                selectedFiles.splice(index, 1);
                            }
                        });
                        
                        Swal.fire({
                            icon: 'warning',
                            title: 'Limite de tamanho excedido',
                            html: `
                                <div style="text-align: center;">
                                    <p style="font-size: 14px; margin: 15px 0;">
                                        Ao adicionar estes arquivos, o tamanho total ultrapassaria o limite:
                                    </p>
                                    <div style="background: #fff3cd; padding: 20px; border-radius: 10px; margin: 15px 0;">
                                        <div style="font-size: 18px; margin-bottom: 10px;">
                                            <strong style="color: #dc3545;">${totalSizeMB} MB</strong>
                                        </div>
                                        <div style="font-size: 14px; color: #856404;">
                                            Limite máximo: <strong>150 MB</strong><br>
                                            Excedido em: <strong style="color: #dc3545;">${exceededBy} MB</strong>
                                        </div>
                                    </div>
                                    <p style="font-size: 13px; color: #6c757d; margin-top: 15px;">
                                        Os arquivos não foram adicionados.<br>
                                        Remova alguns arquivos ou faça o upload em etapas.
                                    </p>
                                </div>
                            `,
                            confirmButtonText: 'Entendi',
                            confirmButtonColor: '#ffc107',
                            width: '500px'
                        });
                    } else if (addedFiles.length > 0 && invalidFiles.length === 0 && oversizedFiles.length === 0 && duplicateFiles.length === 0) {
                        const Toast = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 3000,
                            timerProgressBar: true,
                            didOpen: (toast) => {
                                toast.addEventListener('mouseenter', Swal.stopTimer)
                                toast.addEventListener('mouseleave', Swal.resumeTimer)
                            }
                        });

                        Toast.fire({
                            icon: 'success',
                            title: `${addedFiles.length} arquivo(s) adicionado(s) com sucesso!`
                        });
                    }
                }

                updatePreview();
                fileInput.value = '';
            }

            function updatePreview() {
                if (selectedFiles.length === 0) {
                    previewArea.style.display = 'none';
                    dropArea.style.display = 'block';
                    return;
                }

                dropArea.style.display = 'none';
                previewArea.style.display = 'block';

                document.getElementById('total-arquivos').textContent = selectedFiles.length;

                const totalSize = selectedFiles.reduce((sum, file) => sum + file.size, 0);
                const totalSizeMB = (totalSize / (1024 * 1024)).toFixed(2);
                document.getElementById('tamanho-total').textContent = totalSizeMB + ' MB';

                const limiteStatus = document.getElementById('limite-status');
                if (totalSize > MAX_TOTAL_SIZE) {
                    limiteStatus.innerHTML = '<i class="fas fa-exclamation-circle" style="color: #dc3545;"></i> Excede o limite de 150 MB';
                    limiteStatus.style.color = '#dc3545';
                } else {
                    limiteStatus.innerHTML = '<i class="fas fa-check-circle" style="color: #28a745;"></i> Dentro do limite';
                    limiteStatus.style.color = '#28a745';
                }

                previewList.innerHTML = '';

                selectedFiles.forEach((file, index) => {
                    const fileExtension = file.name.split('.').pop().toLowerCase();
                    let iconClass = 'fa-file';
                    let iconType = '';

                    if (fileExtension === 'pdf') {
                        iconClass = 'fa-file-pdf';
                        iconType = 'pdf';
                    } else if (['doc', 'docx'].includes(fileExtension)) {
                        iconClass = 'fa-file-word';
                        iconType = 'doc';
                    } else if (['xls', 'xlsx'].includes(fileExtension)) {
                        iconClass = 'fa-file-excel';
                        iconType = 'xls';
                    }

                    const fileSizeMB = (file.size / (1024 * 1024)).toFixed(2);

                    const card = document.createElement('div');
                    card.className = 'ccj-files-preview-card';
                    card.innerHTML = `
                        <div class="ccj-files-preview-icon ${iconType}">
                            <i class="fas ${iconClass}"></i>
                        </div>
                        <div class="ccj-files-preview-details">
                            <div class="ccj-files-preview-name" title="${file.name}">${file.name}</div>
                            <div class="ccj-files-preview-size">${fileSizeMB} MB</div>
                        </div>
                        <button type="button" class="ccj-files-preview-remove" data-index="${index}">
                            <i class="fas fa-times"></i>
                        </button>
                    `;

                    card.querySelector('.ccj-files-preview-remove').addEventListener('click', function() {
                        removeFile(index);
                    });

                    previewList.appendChild(card);
                });
            }

            function removeFile(index) {
                selectedFiles.splice(index, 1);
                updatePreview();
            }

            uploadForm.addEventListener('submit', function(e) {
                e.preventDefault();

                if (selectedFiles.length === 0) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Nenhum arquivo selecionado',
                        html: `
                            <div style="text-align: center;">
                                <p style="font-size: 16px; margin: 20px 0;">
                                    Você precisa selecionar pelo menos um arquivo antes de fazer o upload.
                                </p>
                                <div style="background: #e3f2fd; padding: 15px; border-radius: 10px; margin-top: 15px;">
                                    <i class="fas fa-info-circle" style="color: #004071; font-size: 24px; margin-bottom: 10px;"></i>
                                    <p style="font-size: 13px; color: #004071; margin: 5px 0;">
                                        Clique em "Selecionar Arquivos" ou arraste os arquivos para a área acima
                                    </p>
                                </div>
                            </div>
                        `,
                        confirmButtonText: 'Entendi',
                        confirmButtonColor: '#004071',
                        width: '500px'
                    });
                    return false;
                }

                const totalSize = selectedFiles.reduce((sum, file) => sum + file.size, 0);

                if (totalSize > MAX_TOTAL_SIZE) {
                    const totalSizeMB = (totalSize / (1024 * 1024)).toFixed(2);
                    const exceededBy = ((totalSize - MAX_TOTAL_SIZE) / (1024 * 1024)).toFixed(2);
                    
                    Swal.fire({
                        icon: 'error',
                        title: 'Tamanho total excedido',
                        html: `
                            <div style="text-align: center;">
                                <div style="background: #f8d7da; padding: 20px; border-radius: 10px; margin: 15px 0;">
                                    <div style="font-size: 18px; margin-bottom: 10px;">
                                        <strong style="color: #dc3545;">${totalSizeMB} MB</strong>
                                    </div>
                                    <div style="font-size: 14px; color: #721c24;">
                                        Limite máximo: <strong>150 MB</strong><br>
                                        Você excedeu em: <strong>${exceededBy} MB</strong>
                                    </div>
                                </div>
                                <p style="font-size: 14px; color: #6c757d; margin-top: 15px;">
                                    Remova alguns arquivos ou faça o upload em mais de uma etapa.
                                </p>
                            </div>
                        `,
                        confirmButtonText: 'Entendi',
                        confirmButtonColor: '#dc3545',
                        width: '500px'
                    });
                    return false;
                }

                const dataTransfer = new DataTransfer();
                selectedFiles.forEach(file => {
                    dataTransfer.items.add(file);
                });
                fileInput.files = dataTransfer.files;

                const uploadBtn = document.getElementById('btn-upload');
                uploadBtn.disabled = true;
                uploadBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Enviando...';

                const totalSizeMB = (totalSize / (1024 * 1024)).toFixed(2);

                Swal.fire({
                    title: 'Enviando arquivos...',
                    html: `
                        <div style="text-align: center;">
                            <div style="background: #e3f2fd; padding: 20px; border-radius: 10px; margin: 20px 0;">
                                <div style="font-size: 48px; color: #004071; margin-bottom: 15px;">
                                    <i class="fas fa-cloud-upload-alt"></i>
                                </div>
                                <div style="font-size: 16px; margin-bottom: 10px;">
                                    <strong>${selectedFiles.length}</strong> arquivo(s)
                                </div>
                                <div style="font-size: 14px; color: #6c757d;">
                                    Tamanho total: <strong>${totalSizeMB} MB</strong>
                                </div>
                            </div>
                            <p style="font-size: 14px; color: #6c757d; margin-top: 15px;">
                                Por favor, aguarde enquanto os arquivos são enviados...
                            </p>
                        </div>
                    `,
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    showConfirmButton: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                uploadForm.submit();
            });

            $('#selecionar-todos').on('change', function() {
                $('.arquivo-checkbox').prop('checked', $(this).prop('checked'));
                atualizarContador();
            });

            $(document).on('change', '.arquivo-checkbox', function() {
                atualizarContador();

                if (!$(this).prop('checked')) {
                    $('#selecionar-todos').prop('checked', false);
                } else if ($('.arquivo-checkbox:checked').length === $('.arquivo-checkbox').length) {
                    $('#selecionar-todos').prop('checked', true);
                }
            });

            function atualizarContador() {
                var quantidade = $('.arquivo-checkbox:checked').length;
                $('#contador-selecionados').text(quantidade);
                $('#btn-excluir-selecionados').prop('disabled', quantidade === 0);
            }

            $('#btn-excluir-selecionados').on('click', function(e) {
                e.preventDefault();
                var quantidade = $('.arquivo-checkbox:checked').length;

                if (quantidade === 0) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Nenhum arquivo selecionado',
                        html: `
                            <div style="text-align: center;">
                                <p style="font-size: 16px; margin: 20px 0;">
                                    Você precisa selecionar pelo menos um arquivo para excluir.
                                </p>
                                <div style="background: #fff3cd; padding: 15px; border-radius: 10px; margin-top: 15px;">
                                    <i class="fas fa-info-circle" style="color: #856404; font-size: 24px; margin-bottom: 10px;"></i>
                                    <p style="font-size: 13px; color: #856404; margin: 5px 0;">
                                        Marque as caixas ao lado dos arquivos que deseja excluir
                                    </p>
                                </div>
                            </div>
                        `,
                        confirmButtonText: 'Entendi',
                        confirmButtonColor: '#ffc107',
                        width: '500px'
                    });
                    return false;
                }

                Swal.fire({
                    title: 'Confirmar exclusão',
                    html: `
                        <div style="text-align: center;">
                            <div style="font-size: 48px; color: #dc3545; margin: 20px 0;">
                                <i class="fas fa-trash-alt"></i>
                            </div>
                            <p style="font-size: 16px; margin: 15px 0;">
                                Você está prestes a excluir <strong style="color: #dc3545;">${quantidade}</strong> arquivo(s).
                            </p>
                            <div style="background: #f8d7da; padding: 15px; border-radius: 10px; margin-top: 15px;">
                                <p style="font-size: 14px; color: #721c24; margin: 0;">
                                    <i class="fas fa-exclamation-triangle"></i>
                                    Esta ação não pode ser desfeita!
                                </p>
                            </div>
                        </div>
                    `,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: '<i class="fas fa-trash-alt"></i> Sim, excluir',
                    cancelButtonText: '<i class="fas fa-times"></i> Cancelar',
                    width: '500px',
                    reverseButtons: true
                }).then((result) => {
                    if (result.isConfirmed) {
                        $('#form-excluir-lote').submit();
                    }
                });
            });

            $('.form-delete').on('submit', function(e) {
                e.preventDefault();
                const form = this;

                Swal.fire({
                    title: 'Confirmar exclusão',
                    html: `
                        <div style="text-align: center;">
                            <div style="font-size: 48px; color: #dc3545; margin: 20px 0;">
                                <i class="fas fa-trash-alt"></i>
                            </div>
                            <p style="font-size: 16px; margin: 15px 0;">
                                Tem certeza que deseja excluir este arquivo?
                            </p>
                            <div style="background: #f8d7da; padding: 15px; border-radius: 10px; margin-top: 15px;">
                                <p style="font-size: 14px; color: #721c24; margin: 0;">
                                    <i class="fas fa-exclamation-triangle"></i>
                                    Esta ação não pode ser desfeita!
                                </p>
                            </div>
                        </div>
                    `,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: '<i class="fas fa-trash-alt"></i> Sim, excluir',
                    cancelButtonText: '<i class="fas fa-times"></i> Cancelar',
                    width: '500px',
                    reverseButtons: true
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            });
        });
    </script>
@endsection