@extends('layouts.publicador.layout_novo')

@section('content')
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card shadow-lg rounded-3 border-0">
                    <div class="card-header bg-gradient-light border-bottom py-4">
                        <div class="header-content">
                            <div class="d-flex justify-content-between align-items-center position-relative">
                                <div class="d-flex align-items-center">
                                    <div class="header-icon me-3">
                                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none"
                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" class="text-primary">
                                            <circle cx="12" cy="12" r="10" />
                                            <polyline points="12 6 12 12 16 14" />
                                        </svg>
                                    </div>
                                    <div>
                                        <h5 class="mb-1 header-title">
                                            <span class="text-primary fw-bold">Processo</span>
                                            <span class="badge bg-light text-primary ms-2 processo-badge">
                                                {{ $processo->id_processo_DA }}
                                            </span>
                                        </h5>
                                        <p class="text-muted mb-0 small">
                                            <i class="fas fa-clock me-1"></i>
                                            Histórico de Modificações
                                        </p>
                                    </div>
                                </div>
                                <a href="{{ route('publicador.processos.da.form_edit', str_replace(['.', '-'], '', $processo->id_processo_DA)) }}"
                                    class="btn btn-outline-primary rounded-pill px-4 py-2 hover-scale btn-voltar">
                                    <i class="fas fa-arrow-left me-2"></i>
                                    Voltar
                                </a>
                            </div>
                            <div class="header-decoration">
                                <svg width="120" height="120" viewBox="0 0 24 24" fill="none" opacity="0.1">
                                    <path
                                        d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
                                        fill="currentColor" />
                                    <path d="M12 6V12L16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </svg>
                            </div>
                        </div>
                    </div>

                    <div class="card-body p-4">
                        <div class="timeline">
                            @foreach ($edicoes as $edicao)
                                <div class="timeline-item" style="--animation-order: {{ $loop->index }}">
                                    <div class="timeline-line"></div>
                                    <div
                                        class="timeline-badge {{ $edicao->tipo_operacao == 'CREATE' ? 'bg-success' : 'bg-primary' }} hover-scale">
                                        @if ($edicao->tipo_operacao == 'CREATE')
                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
                                                stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                stroke-linejoin="round">
                                                <line x1="12" y1="5" x2="12" y2="19"></line>
                                                <line x1="5" y1="12" x2="19" y2="12"></line>
                                            </svg>
                                        @elseif($edicao->tipo_operacao == 'UPDATE')
                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
                                                stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                stroke-linejoin="round">
                                                <path d="M12 20h9"></path>
                                                <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
                                            </svg>
                                        @elseif($edicao->tipo_operacao == 'DELETE')
                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
                                                stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                stroke-linejoin="round">
                                                <path d="M3 6h18"></path>
                                                <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                                                <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
                                            </svg>
                                        @elseif($edicao->tipo_operacao == 'DELETE_FILE')
                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
                                                stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                stroke-linejoin="round">
                                                <path d="M14 2H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V8l-6-6z">
                                                </path>
                                                <path d="M14 3v5h5M9.9 17.1L14 13M14 17.1L9.9 13"></path>
                                            </svg>
                                        @else
                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
                                                stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                stroke-linejoin="round">
                                                <path d="M12 20h9"></path>
                                                <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
                                            </svg>
                                        @endif
                                    </div>
                                    <div class="timeline-content">
                                        <div class="card hover-shadow border-0">
                                            <div class="card-header bg-light py-3">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <span
                                                        class="badge {{ $edicao->tipo_operacao == 'CREATE' ? 'bg-success' : 'bg-primary' }} rounded-pill px-3 py-2">
                                                        {{ __('operations.' . $edicao->tipo_operacao) }}
                                                    </span>
                                                    <small class="text-muted fw-medium">
                                                        {{ is_string($edicao->data_edicao) ? date('d/m/Y H:i', strtotime($edicao->data_edicao)) : $edicao->data_edicao->format('d/m/Y H:i') }}
                                                    </small>
                                                </div>
                                            </div>
                                            <div class="card-body p-4">
                                                <div class="mb-3">
                                                    <div class="small text-muted mb-2">
                                                        Responsável pela alteração:
                                                        <span class="text-dark fw-medium">{{ $edicao->user->name }}</span>
                                                    </div>
                                                    <div class="text-preview bg-light p-3 rounded cursor-help"
                                                        data-bs-toggle="popover" data-bs-trigger="hover"
                                                        data-bs-placement="auto" data-bs-html="true"
                                                        data-bs-content="<div class='popover-description'>{{ $edicao->descricao }}</div>">
                                                        {{ Str::limit($edicao->descricao, 150) }}
                                                    </div>
                                                </div>
                                                <button type="button"
                                                    class="btn btn-sm btn-outline-primary rounded-pill px-3 hover-scale view-details"
                                                    data-edicao-id="{{ $edicao->edicao_id }}" data-bs-toggle="modal"
                                                    data-bs-target="#modalDetails">
                                                    <i class="fas fa-eye me-1"></i>
                                                    Ver Detalhes
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                            @if ($edicoes->isEmpty())
                                <div class="text-center py-5">
                                    <div class="empty-state">
                                        <i class="fas fa-info-circle fa-3x mb-3 text-muted"></i>
                                        <p class="text-muted mb-0">Nenhuma modificação encontrada para este processo.</p>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalDetails" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg rounded-4">
                <div class="modal-header bg-gradient-light border-bottom">
                    <h5 class="modal-title text-primary fw-bold">
                        <i class="fas fa-info-circle me-2"></i>
                        Detalhes da Modificação
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="details-content">
                        <div class="card shadow-sm mb-4">
                            <div class="card-header bg-light py-3">
                                <h6 class="mb-0 text-primary fw-bold">
                                    <i class="fas fa-user me-2"></i>
                                    Informações da Modificação
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label d-flex align-items-center">
                                            <i class="fas fa-tag me-2"></i>
                                            Tipo de Operação
                                        </label>
                                        <div class="tipo-operacao"></div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label d-flex align-items-center">
                                            <i class="fas fa-calendar me-2"></i>
                                            Data da Edição
                                        </label>
                                        <div class="data-edicao"></div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label d-flex align-items-center">
                                            <i class="fas fa-user me-2"></i>
                                            Responsável
                                        </label>
                                        <div class="responsavel"></div>
                                    </div>
                                    <div class="col-md-12">
                                        <label class="form-label d-flex align-items-center">
                                            <i class="fas fa-comment me-2"></i>
                                            Descrição
                                        </label>
                                        <div class="descricao bg-light p-3 rounded"></div>
                                    </div>
                                </div>
                                <div class="mt-4 text-end">
                                    <button type="button" class="btn btn-warning btn-sm rounded-pill"
                                        onclick="restaurarVersao('${edicao.edicao_id}')">
                                        <i class="fas fa-history me-2"></i>
                                        Restaurar para esta versão
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Dados do Processo -->
                        <div class="card shadow-sm mb-4 dados-processo-section" style="display: none;">
                            <div class="card-header bg-light py-3">
                                <h6 class="mb-0 text-primary fw-bold">
                                    <i class="fas fa-file-alt me-2"></i>
                                    Dados do Processo
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label">Situação</label>
                                        <div class="situacao"></div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Data Situação</label>
                                        <div class="data-situacao"></div>
                                    </div>
                                    <div class="col-md-12">
                                        <label class="form-label">Assunto</label>
                                        <div class="assunto"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Dados do Contrato -->
                        <div class="card shadow-sm mb-4 dados-contrato-section" style="display: none;">
                            <div class="card-header bg-light py-3">
                                <h6 class="mb-0 text-primary fw-bold">
                                    <i class="fas fa-file-contract me-2"></i>
                                    Dados do Contrato
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <label class="form-label">Número do Contrato</label>
                                        <div class="numero-contrato"></div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Empresa</label>
                                        <div class="empresa"></div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Vigência</label>
                                        <div class="vigencia"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Anexos -->
                        <div class="card shadow-sm anexos-section" style="display: none;">
                            <div class="card-header bg-light py-3">
                                <h6 class="mb-0 text-primary fw-bold">
                                    <i class="fas fa-paperclip me-2"></i>
                                    Anexos
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="anexos-list">
                                    <!-- Lista de anexos será preenchida via JavaScript -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-top-0">
                    <button type="button" class="btn btn-secondary rounded-pill px-4" data-bs-dismiss="modal">
                        <i class="fas fa-times me-2"></i>
                        Fechar
                    </button>
                </div>
            </div>
        </div>
    </div>

    <style>
        /* Reset e Variáveis */
        :root {
            --primary-color: #025490;
            --success-color: #198754;
            --timeline-width: 3px;
            --timeline-badge-size: 34px;
            --animation-timing: 0.3s;
            --card-border-radius: 1rem;
            --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
        }

        /* Melhorias nos Cards */
        .card {
            border: none;
            border-radius: var(--card-border-radius);
            box-shadow: var(--shadow-sm);
            transition: all var(--animation-timing) cubic-bezier(0.4, 0, 0.2, 1);
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
        }

        .card:hover {
            box-shadow: var(--shadow-md);
        }

        .card-header {
            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            padding: 1.25rem;
            border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
        }

        /* Timeline Aprimorada */
        .timeline {
            position: relative;
            padding: 2rem 0;
        }

        .timeline-item {
            position: relative;
            padding-left: 50px;
            margin-bottom: 2.5rem;
            opacity: 0;
            animation: fadeInUp 0.5s ease forwards;
            animation-delay: calc(var(--animation-order) * 0.1s);
        }

        .timeline-line {
            position: absolute;
            left: calc(var(--timeline-badge-size) / 2);
            top: 0;
            height: 100%;
            width: var(--timeline-width);
            background: linear-gradient(180deg, #e9ecef 0%, rgba(222, 226, 230, 0.5) 100%);
        }

        .timeline-badge {
            position: absolute;
            left: 0;
            top: 0;
            width: var(--timeline-badge-size);
            height: var(--timeline-badge-size);
            border-radius: 50%;
            text-align: center;
            color: white;
            z-index: 1;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
            transition: all var(--animation-timing) ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .timeline-badge svg {
            width: 16px;
            height: 16px;
            stroke-width: 2.5;
        }

        .text-primary {
            --bs-text-opacity: 1;
            color: #374151 !important;
        }

        .timeline-badge::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: calc(var(--timeline-badge-size) + 10px);
            height: calc(var(--timeline-badge-size) + 10px);
            border-radius: 50%;
            border: 2px solid transparent;
            transition: all var(--animation-timing) ease;
        }

        .timeline-badge:hover::after {
            border-color: currentColor;
            opacity: 0.2;
        }

        /* Melhorias nos Textos */
        .text-preview {
            max-height: 80px;
            overflow: hidden;
            position: relative;
            border-radius: 0.5rem;
            background-color: #f8f9fa;
            border: 1px solid rgba(0, 0, 0, 0.05);
            font-size: 0.875rem;
            line-height: 1.5;
        }

        .text-preview::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 20px;
            background: linear-gradient(to bottom, transparent, #f8f9fa);
        }

        /* Botões Aprimorados */
        .btn {
            transition: all var(--animation-timing) ease;
            font-weight: 500;
        }

        .btn-outline-primary {
            border-width: 2px;
        }

        .btn:hover {
            transform: translateY(-1px);
            box-shadow: var(--shadow-sm);
        }

        /* Badges Melhorados */
        .badge {
            font-weight: 500;
            letter-spacing: 0.3px;
            padding: 0.5em 1em;
        }

        /* Modal Aprimorado */
        .modal-content {
            border: none;
            border-radius: var(--card-border-radius);
            box-shadow: var(--shadow-lg);
        }

        .modal-header {
            background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%);
            border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
            padding: 1.5rem;
        }

        .modal-header .modal-title {
            color: white;
        }

        .modal-body {
            padding: 1.5rem;
        }

        /* Animações Suaves */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Estado Vazio Aprimorado */
        .empty-state {
            padding: 4rem 2rem;
            text-align: center;
            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
            border-radius: var(--card-border-radius);
            box-shadow: var(--shadow-sm);
        }

        .empty-state i {
            font-size: 3rem;
            color: var(--primary-color);
            opacity: 0.5;
            margin-bottom: 1rem;
        }

        /* Responsividade Aprimorada */
        @media (max-width: 768px) {
            .timeline-item {
                padding-left: 40px;
            }

            .card-body {
                padding: 1rem;
            }

            .modal-dialog {
                margin: 0.5rem;
            }

            .text-preview {
                max-height: 60px;
            }
        }

        h5.mb-0.text-primary.fw-bold {
            color: rgb(2 84 144) !important;
        }

        /* Scrollbar Personalizada */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb {
            background: #025490;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }

        .card-header {
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
        }

        .header-content {
            position: relative;
            z-index: 1;
        }

        .header-decoration {
            position: absolute;
            top: 50%;
            right: -20px;
            transform: translateY(-50%);
            color: var(--primary-color);
            opacity: 0.1;
            pointer-events: none;
        }

        .header-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 52px;
            height: 52px;
            background: rgba(13, 110, 253, 0.1);
            border-radius: 12px;
            padding: 12px;
        }

        .header-title {
            font-size: 1.25rem;
            letter-spacing: 0.5px;
        }

        .processo-badge {
            font-family: 'Roboto Mono', monospace;
            font-size: 0.9rem;
            padding: 0.5em 1em;
            border: 1px solid rgba(13, 110, 253, 0.2);
            background-color: rgba(13, 110, 253, 0.1);
        }

        .btn-voltar {
            border-width: 2px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .btn-voltar:hover {
            transform: translateX(-5px);
            box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15);
        }

        /* Gradient suave no background */
        .bg-gradient-light {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        }

        /* Media Queries */
        @media (max-width: 768px) {
            .header-icon {
                width: 42px;
                height: 42px;
                padding: 8px;
            }

            .header-decoration {
                display: none;
            }

            .processo-badge {
                display: block;
                margin-top: 0.5rem;
                margin-left: 0 !important;
            }
        }

        /* Estilo para o popover personalizado */
        .popover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            border: none;
            border-radius: 12px;
        }

        .popover-description {
            overflow-y: auto;
            padding: 0.5rem;
            font-size: 0.875rem;
            line-height: 1.6;
            color: #333;
            white-space: pre-wrap;
            word-break: break-word;
        }

        .cursor-help {
            cursor: help;
        }

        /* Scrollbar para o popover */
        .popover-description::-webkit-scrollbar {
            width: 4px;
        }

        .popover-description::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }

        .popover-description::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }

        .popover-description::-webkit-scrollbar-thumb:hover {
            background: #555;
        }


        .descricao .description-section:last-child {
            margin-bottom: 0 !important;
        }

        .descricao .change-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .descricao .change-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .descricao .field-name {
            font-weight: 500;
            color: #6c757d;
        }

        .descricao .value-change {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .descricao .old-value {
            color: #dc3545;
            text-decoration: line-through;
            opacity: 0.7;
        }

        .descricao .new-value {
            color: #198754;
            font-weight: 500;
        }

        @media (max-width: 768px) {
            .descricao .change-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }

            .descricao .value-change {
                width: 100%;
                justify-content: space-between;
            }
        }
    </style>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>

    <script>
        $(document).ready(function() {
            // Inicializa os tooltips
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });

            // Adiciona delay na animação para cada item
            $('.timeline-item').each(function(index) {
                $(this).css('--animation-order', index);
            });

            // Funções de utilidade
            function formatDate(dateString) {
                if (!dateString) return 'Não informado';
                const date = new Date(dateString);
                return date.toLocaleDateString('pt-BR') + ' ' +
                    date.toLocaleTimeString('pt-BR', {
                        hour: '2-digit',
                        minute: '2-digit'
                    });
            }

            function escapeHtml(unsafe) {
                return unsafe
                    .replace(/&/g, "&amp;")
                    .replace(/</g, "&lt;")
                    .replace(/>/g, "&gt;")
                    .replace(/"/g, "&quot;")
                    .replace(/'/g, "&#039;");
            }

            function getFieldLabel(key) {
                const labels = {
                    'situacao': 'Situação',
                    'data_situacao': 'Data Situação',
                    'assunto': 'Assunto',
                    'numero_contrato': 'Número do Contrato',
                    'protocolo_sei_contratos': 'Protocolo SEI',
                    'contrato_gms': 'Contrato GMS',
                    'empresa': 'Empresa',
                    'vigencia': 'Vigência',
                    'data_inicio': 'Data de Início',
                    'data_fim': 'Data de Fim'
                };
                return labels[key] || key;
            }

            function formatValue(key, value) {
                if (!value) return '-';
                if (key.includes('data')) {
                    return formatDate(value);
                }
                return value;
            }

            function formatDescription(description) {
                if (!description) return '';

                // Primeiro, decodifica os caracteres unicode
                let decoded = description.replace(/\\u([0-9a-fA-F]{4})/g, (_, hex) =>
                    String.fromCharCode(parseInt(hex, 16))
                );

                let sections = [];
                let currentSection = null;

                // Processa cada linha
                decoded.split('\n').forEach(line => {
                    if (line.includes('Alterações no Processo:') ||
                        line.includes('Alterações no Contrato') ||
                        line.includes('Alterações no Aditivo')) {
                        // Se já existe uma seção, fecha ela
                        if (currentSection) {
                            sections.push(`</div>`);
                        }
                        // Inicia nova seção
                        currentSection = `
                <div class="description-section mb-3">
                    <strong class="text-primary d-block mb-2">${line}</strong>
            `;
                        sections.push(currentSection);
                    } else if (line.includes('alterado de')) {
                        const [field, values] = line.split('alterado de');
                        const [oldValue, newValue] = values.split('para').map(v => v.trim());

                        sections.push(`
                <div class="change-item mb-2">
                    <span class="field-name">${field.trim()}</span>
                    <span class="value-change">
                        <span class="old-value">${oldValue.replace(/'/g, '')}</span>
                        <i class="fas fa-arrow-right mx-2"></i>
                        <span class="new-value">${newValue.replace(/'/g, '')}</span>
                    </span>
                </div>
            `);
                    }
                });

                // Fecha a última seção se existir
                if (currentSection) {
                    sections.push('</div>');
                }

                return sections.join('');
            }

            // Handler para o clique no botão de detalhes
            $('.view-details').click(function() {
                const edicaoId = $(this).data('edicao-id').replace(/-/g, '');
                const modalBody = $('#modalDetails .details-content');

                // Mostra loading
                modalBody.html(`
                    <div class="text-center py-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Carregando...</span>
                        </div>
                    </div>
                `);

                const url = "{{ route('publicador.processos.da.edicao-details', ':id') }}".replace(':id',
                    edicaoId);

                $.get(url, function(response) {
                    const edicao = response.edicao;
                    let contrato = null;

                    let modalHTML = `
                        <div class="card shadow-sm mb-4">
                            <div class="card-header bg-light py-3">
                                <h6 class="mb-0 text-primary fw-bold">
                                    <i class="fas fa-user me-2"></i>
                                    Informações da Modificação
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label d-flex align-items-center">
                                            <i class="fas fa-tag me-2"></i>
                                            Tipo de Operação
                                        </label>
                                        <span class="badge ${edicao.tipo_operacao === 'CREATE' ? 'bg-success' : 'bg-primary'} rounded-pill px-3 py-2">
                                            ${edicao.tipo_operacao}
                                        </span>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label d-flex align-items-center">
                                            <i class="fas fa-calendar me-2"></i>
                                            Data da Edição
                                        </label>
                                        <div>${formatDate(edicao.data_edicao)}</div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label d-flex align-items-center">
                                            <i class="fas fa-user me-2"></i>
                                            Responsável
                                        </label>
                                        <div>${edicao.user.name}</div>
                                    </div>
                                    <div class="col-12">
                                    <div class="col-md-12">
                                        <label class="form-label d-flex align-items-center">
                                            <i class="fas fa-comment me-2"></i>
                                            Descrição
                                        </label>
                                        <div class="bg-light p-3 rounded descricao">${formatDescription(edicao.descricao)}</div>
                                    </div>
                                </div>
                            </div>
                        </div>`;

                    // Adiciona seção do processo se houver dados
                    if (edicao.processo_historico) {
                        modalHTML += `
                            <div class="card shadow-sm mb-4">
                                <div class="card-header bg-light py-3">
                                    <h6 class="mb-0 text-primary fw-bold">
                                        <i class="fas fa-file-alt me-2"></i>
                                        Dados do Processo
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label class="form-label">Situação</label>
                                            <div>${edicao.processo_historico.situacao}</div>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">Data Situação</label>
                                            <div>${formatDate(edicao.processo_historico.data_situacao)}</div>
                                        </div>
                                        <div class="col-md-12">
                                            <label class="form-label">Assunto</label>
                                            <div>${edicao.processo_historico.assunto}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>`;

                        // Adiciona tabela de comparação se for UPDATE
                        if (edicao.tipo_operacao === 'UPDATE') {
                            modalHTML += `
                        <div class="card shadow-sm mb-4">
                            <div class="card-header bg-light py-3">
                                <h6 class="mb-0 text-primary fw-bold">
                                    <i class="fas fa-exchange-alt me-2"></i>
                                    Comparação de Valores
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-sm">
                                        <thead>
                                            <tr>
                                                <th>Campo</th>
                                                <th>Valor Anterior</th>
                                                <th>Valor Atual</th>
                                            </tr>
                                        </thead>
                                        <tbody>`;

                            ['situacao', 'data_situacao', 'assunto'].forEach(key => {
                                if (edicao.processo_historico[key] !== undefined) {
                                    modalHTML += `
                                <tr>
                                    <td><strong>${getFieldLabel(key)}</strong></td>
                                    <td>${formatValue(key, edicao.processo_historico[key])}</td>
                                    <td>${formatValue(key, edicao.processo_historico.contrato_original?.[key] || '-')}</td>
                                </tr>`;
                                }
                            });

                            modalHTML += `
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>`;
                        }
                    }

                    // Adiciona seção de contrato se houver dados
                    if (edicao.contratos_historico && edicao.contratos_historico.length > 0) {
                        contrato = edicao.contratos_historico[0];
                        modalHTML += `
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-light py-3">
                            <h6 class="mb-0 text-primary fw-bold">
                                <i class="fas fa-file-contract me-2"></i>
                                Dados do Contrato
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label">Número do Contrato</label>
                                    <div>${contrato.numero_contrato}</div>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Empresa</label>
                                    <div>${contrato.empresa}</div>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Vigência</label>
                                    <div>${contrato.vigencia}</div>
                                </div>
                            </div>
                        </div>
                    </div>`;

                        // Adiciona comparação de contrato se for UPDATE
                        if (edicao.tipo_operacao === 'UPDATE' && contrato.contrato_original) {
                            modalHTML += `
                        <div class="card shadow-sm mb-4">
                            <div class="card-header bg-light py-3">
                                <h6 class="mb-0 text-primary fw-bold">
                                    <i class="fas fa-exchange-alt me-2"></i>
                                    Comparação do Contrato
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-sm">
                                        <thead>
                                            <tr>
                                                <th>Campo</th>
                                                <th>Valor Anterior</th>
                                                <th>Valor Atual</th>
                                            </tr>
                                        </thead>
                                        <tbody>`;

                            Object.keys(getFieldLabel('contrato')).forEach(key => {
                                if (contrato[key] !== contrato.contrato_original[key]) {
                                    modalHTML += `
                                <tr>
                                    <td><strong>${getFieldLabel(key)}</strong></td>
                                    <td>${formatValue(key, contrato[key])}</td>
                                    <td>${formatValue(key, contrato.contrato_original[key])}</td>
                                </tr>`;
                                }
                            });

                            modalHTML += `
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>`;
                        }
                    }

                    // Adiciona seção de anexos se houver
                    if (contrato && contrato.anexos) {
                        const anexosArray = contrato.anexos.split(',').filter(Boolean);
                        if (anexosArray.length > 0) {
                            modalHTML += `
                        <div class="card shadow-sm">
                            <div class="card-header bg-light py-3">
                                <h6 class="mb-0 text-primary fw-bold">
                                    <i class="fas fa-paperclip me-2"></i>
                                    Anexos
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="anexos-list">`;

                            anexosArray.forEach(anexo => {
                                const nomeArquivo = anexo.split('/').pop();
                                modalHTML += `
                            <div class="anexo-item d-flex align-items-center bg-light p-2 rounded mb-2">
                                <i class="fas fa-file me-2"></i>
                                <span class="flex-grow-1">${nomeArquivo}</span>
                                <a href="/${anexo}" class="btn btn-sm btn-outline-primary me-2" target="_blank">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"></path>
                                        <circle cx="12" cy="12" r="3"></circle>
                                    </svg>
                                </a>
                            </div>`;
                            });

                            modalHTML += `
                                </div>
                            </div>
                        </div>`;
                        }
                    }

                    // Atualiza o conteúdo do modal
                    modalBody.html(modalHTML);

                }).fail(function() {
                    modalBody.html(`
                <div class="alert alert-danger" role="alert">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Erro ao carregar os detalhes. Por favor, tente novamente.
                </div>
            `);
                });
            });

            // Função de restauração
            window.restaurarVersao = function(edicaoId) {
                if (confirm(
                        'Tem certeza que deseja restaurar para esta versão? Esta ação irá sobrescrever os dados atuais.'
                    )) {
                    $.ajax({
                        url: '/processos/da/restore',
                        type: 'POST',
                        data: {
                            edicao_id: edicaoId,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.success) {
                                Swal.fire({
                                    title: 'Sucesso!',
                                    text: response.message,
                                    icon: 'success',
                                    confirmButtonText: 'Ok'
                                }).then(() => {
                                    window.location.reload();
                                });
                            } else {
                                Swal.fire({
                                    title: 'Erro!',
                                    text: response.message,
                                    icon: 'error',
                                    confirmButtonText: 'Ok'
                                });
                            }
                        },
                        error: function(xhr) {
                            Swal.fire({
                                title: 'Erro!',
                                text: 'Erro ao restaurar versão. Por favor, tente novamente.',
                                icon: 'error',
                                confirmButtonText: 'Ok'
                            });
                        }
                    });
                }
            };

            // Efeitos e eventos
            $('.timeline-badge').hover(
                function() {
                    $(this).css('transform', 'scale(1.1)');
                },
                function() {
                    $(this).css('transform', 'scale(1)');
                }
            );

            // Inicializa popovers
            var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
            var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
                return new bootstrap.Popover(popoverTriggerEl, {
                    boundary: 'window',
                    fallbackPlacements: ['top', 'bottom', 'right', 'left']
                });
            });

            // Limpeza do modal quando fechado
            $('#modalDetails').on('hidden.bs.modal', function() {
                $('#modalDetails .details-content').empty();
                $('body').removeClass('modal-open');
                $('.modal-backdrop').remove();
            });

            // Limpar popovers ao fechar
            document.addEventListener('hidden.bs.popover', function() {
                var popoverList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
                popoverList.map(function(popoverEl) {
                    var popover = bootstrap.Popover.getInstance(popoverEl);
                    if (popover) {
                        popover.hide();
                    }
                });
            });

            // Tratamento de erros globais
            window.addEventListener('error', function(e) {
                console.error('Erro global:', e.error);
                Swal.fire({
                    title: 'Erro!',
                    text: 'Ocorreu um erro inesperado. Por favor, tente novamente.',
                    icon: 'error',
                    confirmButtonText: 'Ok',
                    confirmButtonColor: '#025490'
                });
            });

            // Atualiza o título da página
            function updatePageTitle() {
                const pageTitle = document.getElementById('pageTitle');
                if (pageTitle) {
                    pageTitle.textContent = 'Relatório SEI - Histórico de Modificações';
                }
            }
            updatePageTitle();
        });
    </script>
@endsection
{{--
botão de restaurar versão
    <div class="mt-4 text-end">
        <button type="button" class="btn btn-warning btn-sm rounded-pill"
                onclick="restaurarVersao('${edicao.edicao_id}')">
            <i class="fas fa-history me-2"></i>
            Restaurar para esta versão
        </button>
    </div> --}}