@extends('layouts.app')

@section('title', 'Contratos')

@push('styles-custom')
    <link href="{{ asset('vendors/choices/choices.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('vendors/flatpickr/flatpickr.min.css') }}" rel="stylesheet" />
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <style>
        /* Estilo zebrado */
        .table-striped tbody tr:nth-of-type(odd) {
            background-color: rgba(0, 0, 0, 0.02);
        }

        /* Altura das linhas */
        .table td {
            padding: 0.875rem 0.75rem;
            vertical-align: middle;
        }

        /* Hover nas linhas */
        #contratosTable tbody tr:hover {
            background-color: rgba(var(--phoenix-primary-rgb, 13, 110, 253), 0.08) !important;
            transition: background-color 0.15s ease;
        }

        /* Badge customizado */
        .badge-phoenix {
            font-weight: 600;
            font-size: 0.75rem;
            padding: 0.375rem 0.75rem;
        }

        /* DataTables customização */
        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: var(--phoenix-primary);
            color: white !important;
            border-color: var(--phoenix-primary);
        }

        .dataTables_wrapper .dataTables_processing {
            background-color: rgba(255, 255, 255, 0.9);
            border: 1px solid #ddd;
            border-radius: 0.375rem;
            padding: 20px;
        }

        /* Scrollbar duplo */
        .table-responsive {
            position: relative;
        }

        .table-scroll-top {
            overflow-x: auto;
            overflow-y: hidden;
            height: 20px;
            margin-bottom: 10px;
        }

        .table-scroll-top-inner {
            height: 1px;
        }
    </style>
@endpush

@section('content')
<div class="content pt-3">
    <nav class="mb-3" aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item active">Contratos</li>
        </ol>
    </nav>

    <div class="mb-9">
        <!-- Título e Botão Adicionar -->
        <div class="row align-items-center justify-content-between g-3 mb-4">
            <div class="col-auto">
                <h2 class="mb-0">Contratos</h2>
                <p class="text-body-tertiary mb-0">Gerencie os contratos de forma eficiente</p>
            </div>
            <div class="col-auto">
                <button type="button" class="btn btn-primary" onclick="window.location='{{ route('contratos.create') }}'">
                    <span class="fas fa-plus me-2"></span>Adicionar Contrato
                </button>
            </div>
        </div>

        <!-- Card de Filtros -->
        <div class="card mb-4">
            <div class="card-header bg-body-tertiary">
                <div class="row align-items-center">
                    <div class="col">
                        <h5 class="mb-0">
                            <span class="fas fa-filter me-2"></span>Filtros
                        </h5>
                    </div>
                    <div class="col-auto">
                        <button type="button" id="toggleFilters" class="btn btn-link btn-sm text-body-tertiary p-0">
                            <span class="fas fa-chevron-up"></span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="card-body" id="filtersContainer">
                <form id="filterForm">
                    <!-- Primeira linha - Filtros principais -->
                    <div class="row g-3 mb-3">
                        <!-- Status -->
                        <div class="col-md-2">
                            <label class="form-label small fw-bold">Status</label>
                            <select name="status" id="filterStatus" class="form-select form-select-sm">
                                <option value="all">Todos</option>
                                <option value="ativo">Ativo</option>
                                <option value="concluido">Concluído</option>
                                <option value="cancelado">Cancelado</option>
                            </select>
                        </div>

                        <!-- Tipo de Contrato -->
                        <div class="col-md-2">
                            <label class="form-label small fw-bold">Tipo Contrato</label>
                            <select name="tipo_contrato" id="filterTipoContrato" class="form-select form-select-sm">
                                <option value="all">Todos</option>
                                <option value="Privado">Privado</option>
                                <option value="Prefeitura">Prefeitura</option>
                            </select>
                        </div>

                        <!-- Período -->
                        <div class="col-md-2">
                            <label class="form-label small fw-bold">Período</label>
                            <select name="periodo" id="filterPeriodo" class="form-select form-select-sm">
                                <option value="tudo">Tudo</option>
                                <option value="hoje">Hoje</option>
                                <option value="amanha">Amanhã</option>
                                <option value="proximo_7">Próximos 7 dias</option>
                                <option value="proximo_15">Próximos 15 dias</option>
                                <option value="proximo_mes">Próximo mês</option>
                                <option value="intervalo">Intervalo</option>
                                <option value="especifico">Específico</option>
                            </select>
                        </div>

                        <!-- Container para datas dinâmicas -->
                        <div class="col-md-5" id="datasContainer">
                            <!-- Intervalo de datas -->
                            <div id="intervaloContainer" style="display: none;">
                                <label class="form-label small fw-bold">Intervalo de Datas</label>
                                <div class="row g-2">
                                    <div class="col">
                                        <input type="date" name="data_inicio" id="dataInicio" class="form-control form-control-sm">
                                    </div>
                                    <div class="col">
                                        <input type="date" name="data_fim" id="dataFim" class="form-control form-control-sm">
                                    </div>
                                </div>
                            </div>

                            <!-- Data específica -->
                            <div id="especificoContainer" style="display: none;">
                                <label class="form-label small fw-bold">Data Específica</label>
                                <input type="date" name="data_especifica" id="dataEspecifica" class="form-control form-control-sm">
                            </div>
                        </div>

                        <!-- Registros por página -->
                        <div class="col-md-2">
                            <label class="form-label small fw-bold">Registros</label>
                            <select id="perPage" class="form-select form-select-sm">
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="100" selected>100</option>
                            </select>
                        </div>
                    </div>

                    <!-- Segunda linha - Buscas -->
                    <div class="row g-3">
                        <!-- Busca primária -->
                        <div class="col-12 col-xl-6">
                            <label class="form-label small fw-bold">Busca Principal</label>
                            <div class="row g-2">
                                <div class="col-12 col-md-8 mb-2 mb-md-0">
                                    <div class="position-relative">
                                        <input
                                            id="searchInput"
                                            class="form-control form-control-sm pe-5"
                                            type="search"
                                            name="q"
                                            placeholder="Buscar em todas as colunas"
                                        >
                                        <span class="fas fa-search position-absolute top-50 end-0 translate-middle-y me-3 text-body-tertiary"></span>
                                    </div>
                                </div>
                                <div class="col-12 col-md-4">
                                    <select name="field" id="searchField" class="form-select form-select-sm">
                                        <option value="">Todas as Colunas</option>
                                        <option value="evento">Evento</option>
                                        <option value="data">Data</option>
                                        <option value="cidade">Cidade</option>
                                        <option value="empresa">Empresa</option>
                                        <option value="tipo">Tipo</option>
                                        <option value="artista">Artista</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Busca secundária -->
                        <div class="col-12 col-xl-6">
                            <label class="form-label small fw-bold">Busca Secundária (opcional)</label>
                            <div class="row g-2">
                                <div class="col-12 col-md-8 mb-2 mb-md-0">
                                    <div class="position-relative">
                                        <input
                                            id="searchInput2"
                                            class="form-control form-control-sm pe-5"
                                            type="search"
                                            name="q2"
                                            placeholder="Segundo filtro (opcional)"
                                        >
                                        <span class="fas fa-search position-absolute top-50 end-0 translate-middle-y me-3 text-body-tertiary"></span>
                                    </div>
                                </div>
                                <div class="col-12 col-md-4">
                                    <select name="search_field2" id="searchField2" class="form-select form-select-sm">
                                        <option value="">Selecione</option>
                                        <option value="evento">Evento</option>
                                        <option value="data">Data</option>
                                        <option value="cidade">Cidade</option>
                                        <option value="empresa">Empresa</option>
                                        <option value="tipo">Tipo</option>
                                        <option value="artista">Artista</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Botões de ação -->
                    <div class="row mt-3">
                        <div class="col-12 text-end">
                            <button type="button" id="btnLimparFiltros" class="btn btn-outline-secondary btn-sm">
                                <span class="fas fa-times me-1"></span>Limpar
                            </button>
                            <button type="button" id="btnAplicarFiltros" class="btn btn-primary btn-sm">
                                <span class="fas fa-search me-1"></span>Aplicar Filtros
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Tabela -->
        <div class="card">
            <div class="card-body">
                <!-- Scrollbar superior -->
                <div class="table-scroll-top">
                    <div class="table-scroll-top-inner"></div>
                </div>

                <div class="table-responsive" id="tableContainer">
                    <table id="contratosTable" class="table table-striped table-sm fs-9 mb-0">
                        <thead class="bg-body-tertiary">
                            <tr>
                                <th class="border-0 ps-3">#</th>
                                <th class="border-0">Evento</th>
                                <th class="border-0 text-center">Data</th>
                                <th class="border-0">Cidade</th>
                                <th class="border-0">Empresa</th>
                                <th class="border-0">Tipo</th>
                                <th class="border-0">Tipo Contrato</th>
                                <th class="border-0">Artista</th>
                                <th class="border-0 text-center">Anexo</th>
                                <th class="border-0 text-center">Nota Fiscal</th>
                                <th class="border-0 text-end">Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Dados carregados via AJAX -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Container para modais dinâmicos -->
<div id="modalContainer"></div>

@endsection

@push('scripts-custom')
    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

    <script>
        let dataTable;
        let contratos = [];

        // Debug para verificar dados
        window.debugContratos = function() {
            console.log('Contratos carregados:', contratos);
        };

        $(document).ready(function() {
            // Inicializa DataTable
            initDataTable();

            // Configura event listeners
            setupEventListeners();

            // Atualiza placeholders
            updatePlaceholder();
            updatePlaceholder2();

            // Restaura filtros da URL
            restoreFiltersFromURL();

            // Toggle para filtros
            $('#toggleFilters').on('click', function() {
                const container = $('#filtersContainer');
                const icon = $(this).find('span');

                if (container.is(':visible')) {
                    container.slideUp();
                    icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
                } else {
                    container.slideDown();
                    icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
                }
            });
        });

        function initDataTable() {
            dataTable = $('#contratosTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route("contratos.index") }}',
                    type: 'GET',
                    data: function(d) {
                        // Adiciona todos os filtros
                        d.status = $('#filterStatus').val();
                        d.tipo_contrato = $('#filterTipoContrato').val();
                        d.periodo = $('#filterPeriodo').val();
                        d.data_inicio = $('#dataInicio').val();
                        d.data_fim = $('#dataFim').val();
                        d.data_especifica = $('#dataEspecifica').val();
                        d.field = $('#searchField').val();
                        d.q = $('#searchInput').val();
                        d.search_field2 = $('#searchField2').val();
                        d.q2 = $('#searchInput2').val();
                    },
                    dataSrc: function(json) {
                        console.log('Dados recebidos:', json);
                        // Armazena contratos para uso nos modais
                        contratos = json.data || [];
                        return contratos;
                    },
                    error: function(xhr, error, thrown) {
                        console.error('Erro no DataTable:', error, thrown);
                        console.error('Resposta:', xhr.responseText);

                        // Tenta parsear a resposta JSON se existir
                        try {
                            const response = JSON.parse(xhr.responseText);
                            if (response.error) {
                                alert('Erro ao carregar dados: ' + response.error);
                            }
                        } catch (e) {
                            alert('Erro ao carregar dados. Verifique o console para mais detalhes.');
                        }
                    }
                },
                columns: [
                    { data: 'id', name: 'id', className: 'ps-3 fw-bold' },
                    { data: 'evento', name: 'evento' },
                    {
                        data: 'data',
                        name: 'data',
                        className: 'text-center',
                        render: function(data, type, row) {
                            if (type === 'display' && data.display) {
                                return data.display;
                            }
                            return data.display || '';
                        }
                    },
                    { data: 'cidade', name: 'cidade' },
                    { data: 'empresa', name: 'empresa' },
                    { data: 'tipo', name: 'tipo' },
                    { 
                        data: 'tipo_contrato', 
                        name: 'tipo_contrato',
                        render: function(data, type, row) {
                            if (data === 'Prefeitura') {
                                return '<span class="badge bg-primary">' + data + '</span>';
                            } else if (data === 'Privado') {
                                return '<span class="badge bg-success">' + data + '</span>';
                            } else {
                                return '<span class="text-muted">Não especificado</span>';
                            }
                        }
                    },
                    { data: 'artista', name: 'artista' },
                    { data: 'anexo', name: 'anexo', className: 'text-center', orderable: false },
                    { data: 'nota_fiscal', name: 'nota_fiscal', className: 'text-center', orderable: false },
                    { data: 'acoes', name: 'acoes', orderable: false, searchable: false, className: 'text-end' }
                ],
                pageLength: 100,
                lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
                order: [[2, 'asc']], // Ordena por data
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/pt-BR.json'
                },
                dom: '<"d-none"lf>rt<"d-flex justify-content-between align-items-center mt-3"<"dataTables_info"i><"dataTables_paginate"p>>',
                drawCallback: function(settings) {
                    // Reinicializa tooltips
                    $('[data-bs-toggle="tooltip"]').tooltip();

                    // Aplicar coloração zebrada
                    setTimeout(function() {
                        $('#contratosTable tbody tr').each(function(index) {
                            const $row = $(this);
                            $row.removeClass('odd even');

                            if (index % 2 === 0) {
                                $row.css('background-color', '#ffffff');
                            } else {
                                $row.css('--phoenix-bg-opacity', '0.4');
                                $row.css('background-color', 'rgba(var(--phoenix-body-bg-rgb), var(--phoenix-bg-opacity))');
                            }
                        });
                    }, 50);

                    // Reaplica o scrollbar após redesenhar
                    setTimeout(setupDualScrollbar, 100);

                    // Gera modais para esta página
                    generateModals();
                }
            });

            // Sincroniza select de registros por página
            $('#perPage').on('change', function() {
                dataTable.page.len($(this).val()).draw();
            });
        }

        function setupEventListeners() {
            // Filtro de período
            $('#filterPeriodo').on('change', function() {
                const periodo = $(this).val();
                $('#intervaloContainer, #especificoContainer').hide();

                if (periodo === 'intervalo') {
                    $('#intervaloContainer').show();
                } else if (periodo === 'especifico') {
                    $('#especificoContainer').show();
                }

                // Se não for intervalo ou específico, aplica o filtro automaticamente
                if (periodo !== 'intervalo' && periodo !== 'especifico') {
                    dataTable.ajax.reload();
                }
            });

            // Aplicar filtros quando datas mudarem
            $('#dataInicio, #dataFim').on('change', function() {
                if ($('#dataInicio').val() && $('#dataFim').val()) {
                    dataTable.ajax.reload();
                }
            });

            $('#dataEspecifica').on('change', function() {
                dataTable.ajax.reload();
            });

            // Campo de busca
            $('#searchField').on('change', function() {
                updatePlaceholder();
                dataTable.ajax.reload();
            });

            // Aplicar filtro ao pressionar Enter no campo de busca
            $('#searchInput').on('keypress', function(e) {
                if (e.which === 13) {
                    e.preventDefault();
                    dataTable.ajax.reload();
                }
            });

            // Aplicar filtros
            $('#btnAplicarFiltros').on('click', function() {
                dataTable.ajax.reload();
            });

            // Limpar filtros
            $('#btnLimparFiltros').on('click', function() {
                $('#filterForm')[0].reset();
                $('#intervaloContainer, #especificoContainer').hide();
                updatePlaceholder();
                updatePlaceholder2();
                dataTable.ajax.reload();
            });

            // Aplicar filtros quando status mudar
            $('#filterStatus').on('change', function() {
                dataTable.ajax.reload();
            });

            // Aplicar filtros quando tipo de contrato mudar
            $('#filterTipoContrato').on('change', function() {
                dataTable.ajax.reload();
            });

            // Mudança no campo de busca secundária
            $('#searchField2').on('change', function() {
                updatePlaceholder2();
                dataTable.ajax.reload();
            });

            // Aplicar filtro ao pressionar Enter no campo de busca secundária
            $('#searchInput2').on('keypress', function(e) {
                if (e.which === 13) {
                    e.preventDefault();
                    dataTable.ajax.reload();
                }
            });
        }

        function restoreFiltersFromURL() {
            const params = new URLSearchParams(window.location.search);

            if (params.has('status')) $('#filterStatus').val(params.get('status'));
            if (params.has('periodo')) $('#filterPeriodo').val(params.get('periodo'));
            if (params.has('field')) $('#searchField').val(params.get('field'));
            if (params.has('q')) $('#searchInput').val(params.get('q'));
            if (params.has('search_field2')) $('#searchField2').val(params.get('search_field2'));
            if (params.has('q2')) $('#searchInput2').val(params.get('q2'));
            if (params.has('data_inicio')) $('#dataInicio').val(params.get('data_inicio'));
            if (params.has('data_fim')) $('#dataFim').val(params.get('data_fim'));
            if (params.has('data_especifica')) $('#dataEspecifica').val(params.get('data_especifica'));

            // Mostra/esconde campos de data conforme necessário
            const periodo = params.get('periodo');
            if (periodo === 'intervalo') {
                $('#intervaloContainer').show();
                $('#especificoContainer').hide();
            } else if (periodo === 'especifico') {
                $('#especificoContainer').show();
                $('#intervaloContainer').hide();
            }

            updatePlaceholder();
            updatePlaceholder2();

            // Aplica os filtros automaticamente se houver parâmetros na URL
            if (window.location.search) {
                dataTable.ajax.reload();
            }
        }

        function updatePlaceholder() {
            const field = $('#searchField').val();
            const input = $('#searchInput');
            if (!field || field === 'all') {
                input.attr('placeholder', 'Buscar em todas as colunas');
            } else {
                const labels = {
                    'evento': 'Buscar por Evento',
                    'data': 'Buscar por Data',
                    'cidade': 'Buscar por Cidade',
                    'empresa': 'Buscar por Empresa',
                    'tipo': 'Buscar por Tipo',
                    'artista': 'Buscar por Artista'
                };
                input.attr('placeholder', labels[field] || 'Buscar contratos...');
            }
        }

        function updatePlaceholder2() {
            const field = $('#searchField2').val();
            const input = $('#searchInput2');
            if (!field) {
                input.attr('placeholder', 'Segundo filtro (opcional)');
            } else {
                const labels = {
                    'evento': 'Buscar por Evento',
                    'data': 'Buscar por Data',
                    'cidade': 'Buscar por Cidade',
                    'empresa': 'Buscar por Empresa',
                    'tipo': 'Buscar por Tipo',
                    'artista': 'Buscar por Artista'
                };
                input.attr('placeholder', labels[field] || 'Buscar contratos...');
            }
        }

        // Sincronizar scrollbars horizontal
        function setupDualScrollbar() {
            const tableContainer = document.getElementById('tableContainer');
            const scrollTop = document.querySelector('.table-scroll-top');
            const scrollTopInner = document.querySelector('.table-scroll-top-inner');

            if (!tableContainer || !scrollTop || !scrollTopInner) return;

            // Função para atualizar largura
            function updateScrollWidth() {
                const tableWidth = tableContainer.querySelector('table').offsetWidth;
                scrollTopInner.style.width = tableWidth + 'px';

                // Mostrar/ocultar scrollbar superior baseado na necessidade
                if (tableContainer.scrollWidth > tableContainer.clientWidth) {
                    scrollTop.style.display = 'block';
                } else {
                    scrollTop.style.display = 'none';
                }
            }

            // Sincronizar scroll
            scrollTop.addEventListener('scroll', function() {
                tableContainer.scrollLeft = this.scrollLeft;
            });

            tableContainer.addEventListener('scroll', function() {
                scrollTop.scrollLeft = this.scrollLeft;
            });

            // Atualizar largura
            updateScrollWidth();

            // Atualizar largura quando a janela for redimensionada
            window.addEventListener('resize', updateScrollWidth);
        }

        // Função para confirmar exclusão
        function confirmarExclusao(contratoId) {
            if (confirm('Tem certeza que deseja excluir este contrato?')) {
                // Criar formulário e submeter
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = `/contratos/${contratoId}`;

                const csrfToken = document.createElement('input');
                csrfToken.type = 'hidden';
                csrfToken.name = '_token';
                csrfToken.value = '{{ csrf_token() }}';
                form.appendChild(csrfToken);

                const methodField = document.createElement('input');
                methodField.type = 'hidden';
                methodField.name = '_method';
                methodField.value = 'DELETE';
                form.appendChild(methodField);

                document.body.appendChild(form);
                form.submit();
            }
        }

        // Gerar modais dinamicamente para os contratos da página atual
        function generateModals() {
            const modalContainer = $('#modalContainer');
            modalContainer.empty(); // Limpa modais anteriores

            contratos.forEach(function(contrato) {
                // Usa o ID diretamente do objeto contrato
                const contratoId = contrato.id;

                if (!contratoId) {
                    console.warn('Contrato sem ID:', contrato);
                    return; // Pula este contrato
                }

                // Modal de anexo do contrato
                const anexoModal = `
                    <div class="modal fade" id="anexoModal-${contratoId}" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <form action="/contratos/${contratoId}/update-anexo" method="POST" enctype="multipart/form-data">
                                    @csrf
                                    @method('PUT')
                                    <div class="modal-header">
                                        <h5 class="modal-title">Anexo do Contrato #${contratoId}</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="mb-3">
                                            <label for="anexo_contrato" class="form-label">Novo Anexo (PDF, DOC, etc.)</label>
                                            <input type="file" name="anexo_contrato" id="anexo_contrato" class="form-control">
                                            <small class="form-text text-muted">Formatos permitidos: PDF, DOC, DOCX, ODT. Tamanho máximo: 2MB.</small>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                                        <button type="submit" class="btn btn-primary">Enviar Anexo</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>`;

                modalContainer.append(anexoModal);

                // Modal para visualizar anexo do contrato (se existir)
                if (contrato.anexo && contrato.anexo !== '<span class="text-muted">-</span>') {
                    const visualizarAnexoModal = `
                        <div class="modal fade" id="visualizarAnexoModal-${contratoId}" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-xl">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">
                                            Anexo do Contrato #${contratoId}
                                        </h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                                    </div>
                                    <div class="modal-body p-0">
                                        <iframe src="/contratos/${contratoId}/visualizar-anexo"
                                                style="width: 100%; height: 70vh; border: none;"
                                                id="anexoFrame-${contratoId}">
                                            <p>Seu navegador não suporta iframes. <a href="/contratos/${contratoId}/download-anexo" target="_blank">Clique aqui para fazer download</a></p>
                                        </iframe>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                                        <button type="button" class="btn btn-primary" onclick="imprimirAnexo(${contratoId})">
                                            <i class="fas fa-print me-2"></i>Imprimir
                                        </button>
                                        <a href="/contratos/${contratoId}/download-anexo" class="btn btn-success" target="_blank">
                                            <i class="fas fa-download me-2"></i>Download
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>`;

                    modalContainer.append(visualizarAnexoModal);
                }
            });

            // Agora precisamos gerar modais para notas fiscais
            // Como as notas fiscais são múltiplas por contrato, precisamos processar de forma diferente
            // Por enquanto, vamos deixar sem os modais de nota fiscal para evitar complexidade
        }

        // Handler para visualizar nota fiscal
        $(document).on('click', '[data-bs-target^="#visualizarNotaFiscalModal-"]', function(e) {
            e.preventDefault();

            const target = $(this).data('bs-target');
            const notaId = target.replace('#visualizarNotaFiscalModal-', '');
            const modalId = 'visualizarNotaFiscalModal-' + notaId;

            // Verifica se o modal já existe
            if ($('#' + modalId).length === 0) {
                // Cria o modal dinamicamente
                const notaFiscalModal = `
                    <div class="modal fade" id="${modalId}" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog modal-xl">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Nota Fiscal</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                                </div>
                                <div class="modal-body p-0">
                                    <iframe src="/contratos/notas-fiscais/${notaId}/visualizar"
                                            style="width: 100%; height: 70vh; border: none;"
                                            id="notaFiscalFrame-${notaId}">
                                        <p>Seu navegador não suporta iframes.</p>
                                    </iframe>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                                    <button type="button" class="btn btn-primary" onclick="imprimirNotaFiscal(${notaId})">
                                        <i class="fas fa-print me-2"></i>Imprimir
                                    </button>
                                    <a href="/contratos/notas-fiscais/${notaId}/download" class="btn btn-success" target="_blank">
                                        <i class="fas fa-download me-2"></i>Download
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>`;

                $('#modalContainer').append(notaFiscalModal);
            }

            // Abre o modal
            const modal = new bootstrap.Modal(document.getElementById(modalId));
            modal.show();
        });

        // Função para imprimir nota fiscal
        function imprimirNotaFiscal(notaFiscalId) {
            var frame = document.getElementById('notaFiscalFrame-' + notaFiscalId);
            if (frame) {
                try {
                    frame.contentWindow.print();
                } catch (e) {
                    console.error('Erro ao imprimir nota fiscal:', e);
                    alert('Não foi possível imprimir o documento. Tente fazer o download primeiro.');
                }
            }
        }

        // Função para imprimir anexo do contrato
        function imprimirAnexo(contratoId) {
            var frame = document.getElementById('anexoFrame-' + contratoId);
            if (frame) {
                try {
                    frame.contentWindow.print();
                } catch (e) {
                    console.error('Erro ao imprimir anexo:', e);
                    alert('Não foi possível imprimir o documento. Tente fazer o download primeiro.');
                }
            }
        }
    </script>
@endpush