@extends('layouts.app')

@section('title', 'Contas a Receber')

@push('styles-custom')
    <link href="{{ asset('vendors/choices/choices.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('vendors/flatpickr/flatpickr.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('vendors/select2/css/select2.css') }}" rel="stylesheet" />
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <style>
        /* Mantém estilos do Select2 */
        .select2-container--default .select2-selection--single {
            height: 31px;
            padding: 0.1rem 0.5rem;
            font-size: 0.8125rem;
            border-radius: 0.25rem;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 24px;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 30px;
        }
        .modal-lg .select2-container {
            width: 100% !important;
        }

        /* Estilo zebrado igual ao Contas a Pagar */
        .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 */
        .table tbody tr:hover {
            background-color: rgba(var(--phoenix-primary-rgb), 0.1);
            transition: background-color 0.15s ease;
        }

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

        /* Remover estilos conflitantes do DataTables */
        #contasAReceberTable tbody tr.odd,
        #contasAReceberTable tbody tr.even {
            background-color: inherit !important;
        }

        /* Garantir que a classe bg-secondary-subtle funcione */
        .bg-secondary-subtle {
            background-color: var(--bs-secondary-bg, #e9ecef) !important;
        }

        /* CSS adicional para forçar a coloração */
        .row-white {
            background-color: #ffffff !important;
        }

        .row-bg-body {
            --phoenix-bg-opacity: 0.4;
            background-color: rgba(var(--phoenix-body-bg-rgb), var(--phoenix-bg-opacity)) !important;
        }

        /* Desabilitar estilos padrão do DataTables que podem conflitar */
        table.dataTable tbody tr {
            background-color: inherit !important;
        }

        table.dataTable.stripe tbody tr.odd,
        table.dataTable.display tbody tr.odd {
            background-color: #ffffff !important;
        }

        table.dataTable.stripe tbody tr.even,
        table.dataTable.display tbody tr.even {
            --phoenix-bg-opacity: 0.4;
            background-color: rgba(var(--phoenix-body-bg-rgb), var(--phoenix-bg-opacity)) !important;
        }
        /* Hover melhorado */
        .table tbody tr:hover {
            background-color: rgba(var(--phoenix-primary-rgb), 0.08) !important;
            transition: background-color 0.15s ease;
        }

        /* Hover melhorado */
        .table tbody tr:hover {
            background-color: rgba(var(--phoenix-primary-rgb), 0.08) !important;
            transition: background-color 0.15s ease;
        }

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

        /* Melhorar contraste nos badges */
        .badge-phoenix {
            font-weight: 600;
            font-size: 0.75rem;
            padding: 0.375rem 0.75rem;
        }

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

        /* Hover nas linhas */
        .table tbody tr:hover {
            background-color: rgba(var(--phoenix-primary-rgb), 0.1);
        }

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

        /* 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;
        }

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

        /* Badge customizado para status */
        .badge-phoenix-success {
            background-color: rgba(var(--phoenix-success-rgb), 0.1);
            color: var(--phoenix-success);
        }

        .badge-phoenix-warning {
            background-color: rgba(var(--phoenix-warning-rgb), 0.1);
            color: var(--phoenix-warning);
        }

        .badge-phoenix-danger {
            background-color: rgba(var(--phoenix-danger-rgb), 0.1);
            color: var(--phoenix-danger);
        }

        .badge-phoenix-info {
            background-color: rgba(var(--phoenix-info-rgb), 0.1);
            color: var(--phoenix-info);
        }
        /* Badge para data de recebimento */
        .badge-phoenix-secondary {
            background-color: rgba(var(--phoenix-secondary-rgb), 0.1);
            color: var(--phoenix-secondary);
        }

        /* Estilo para coluna de data de recebimento */
        td[data-column="data_recebimento"] {
            white-space: nowrap;
        }
    </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">Contas a Receber</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">Contas a Receber</h2>
                <p class="text-body-tertiary mb-0">Gerencie suas contas a receber de forma eficiente</p>
            </div>
            <div class="col-auto">
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-outline-primary" onclick="window.location='{{ route('contas-a-receber.por-evento') }}'">
                        <span class="fas fa-calendar-alt me-2"></span>Por Evento
                    </button>
                    <button type="button" class="btn btn-outline-danger" id="btnExportarPDF" title="Exportar PDF com filtros aplicados">
                        <span class="fas fa-file-pdf me-2"></span>Exportar PDF
                    </button>
                    <button type="button" class="btn btn-primary" onclick="window.location='{{ route('contas-a-receber.create') }}'">
                        <span class="fas fa-plus me-2"></span>Adicionar Conta
                    </button>
                </div>
            </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="recebido">Recebido</option>
                                <option value="pendente">Em Aberto</option>
                                <option value="parcial">Parcial</option>
                            </select>
                        </div>

                        <!-- Período Vencimento -->
                        <div class="col-md-2">
                            <label class="form-label small fw-bold">Período Vencimento</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>

                        <!-- Período Recebimento -->
                        <div class="col-md-2">
                            <label class="form-label small fw-bold">Período Recebimento</label>
                            <select name="periodo_recebimento" id="filterPeriodoRecebimento" class="form-select form-select-sm">
                                <option value="tudo">Tudo</option>
                                <option value="hoje">Hoje</option>
                                <option value="proximo_7">Últimos 7 dias</option>
                                <option value="proximo_15">Últimos 15 dias</option>
                                <option value="proximo_mes">Último 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-6" id="datasContainer">
                            <!-- Intervalo de datas Vencimento -->
                            <div id="intervaloContainer" style="display: none;">
                                <label class="form-label small fw-bold">Intervalo Vencimento</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 Vencimento -->
                            <div id="especificoContainer" style="display: none;">
                                <label class="form-label small fw-bold">Data Específica Vencimento</label>
                                <input type="date" name="data_especifica" id="dataEspecifica" class="form-control form-control-sm">
                            </div>

                            <!-- Intervalo de datas Recebimento -->
                            <div id="intervaloRecebimentoContainer" style="display: none;">
                                <label class="form-label small fw-bold">Intervalo Recebimento</label>
                                <div class="row g-2">
                                    <div class="col">
                                        <input type="date" name="data_recebimento_inicio" id="dataRecebimentoInicio" class="form-control form-control-sm">
                                    </div>
                                    <div class="col">
                                        <input type="date" name="data_recebimento_fim" id="dataRecebimentoFim" class="form-control form-control-sm">
                                    </div>
                                </div>
                            </div>

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

                    <!-- Segunda linha - Filtros adicionais -->
                    <div class="row g-3 mb-3">
                        <!-- 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>

                        <!-- Artista -->
                        <div class="col-md-2">
                            <label class="form-label small fw-bold">Artista</label>
                            <select name="artista_id" id="filterArtista" class="form-select form-select-sm">
                                <option value="">Todos os Artistas</option>
                            </select>
                        </div>

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

                        <!-- Espaço para futuros filtros -->
                        <div class="col-md-6">
                            <!-- Reservado para futuros filtros -->
                        </div>
                    </div>

                    <!-- Terceira 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="search_field" id="searchField" class="form-select form-select-sm">
                                        <option value="">Todas as Colunas</option>
                                        <option value="descricao">Descrição</option>
                                        <option value="dataextra">Data Evento</option>
                                        <option value="empresa">Empresa</option>
                                        <option value="artista">Artista</option>
                                        <option value="tipo_contrato">Tipo Contrato</option>
                                        <option value="cliente">Cliente</option>
                                        <option value="valor">Valor</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="descricao">Descrição</option>
                                        <option value="dataextra">Data Evento</option>
                                        <option value="empresa">Empresa</option>
                                        <option value="artista">Artista</option>
                                        <option value="tipo_contrato">Tipo Contrato</option>
                                        <option value="valor">Valor</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="contasAReceberTable" 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">Descrição</th>
                                <th class="border-0 text-center">Data Evento</th>
                                <th class="border-0">Empresa</th>
                                <th class="border-0">Artista</th>
                                <th class="border-0 text-center">Tipo Contrato</th>
                                <th class="border-0">Cliente</th>
                                <th class="border-0 text-center">Vencimento</th>
                                <th class="border-0 text-center">Data Recebimento</th>
                                <th class="border-0 text-end">Valor</th>
                                <th class="border-0 text-end">Recebido</th>
                                <th class="border-0 text-end">Saldo</th>
                                <th class="border-0 text-center">Status</th>
                                <th class="border-0 text-end">Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Dados carregados via AJAX -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Totais da Página -->
<div class="card-footer p-0">
    <div class="bg-body-tertiary rounded-bottom">
        <div class="row g-0">
            <!-- Card Quantidade -->
            <div class="col-6 col-lg-3 border-end border-translucent">
                <div class="card border-0 rounded-0 text-center">
                    <div class="card-body py-4">
                        <div class="d-flex justify-content-center align-items-center mb-3">
                            <div class="avatar avatar-xl">
                                <div class="avatar-name rounded-circle bg-info-subtle">
                                    <span class="fs-2 text-info" data-feather="hash"></span>
                                </div>
                            </div>
                        </div>
                        <h4 id="totalQtdPagina" class="mb-2 text-body-emphasis lh-1">-</h4>
                        <p class="fs-9 text-body-tertiary mb-0">Registros</p>
                        <div class="d-flex justify-content-center">
                            <span class="badge badge-phoenix badge-phoenix-info">
                                <span class="fas fa-file-invoice me-1"></span>Página
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card Valor Total -->
            <div class="col-6 col-lg-3 border-end border-translucent">
                <div class="card border-0 rounded-0 text-center">
                    <div class="card-body py-4">
                        <div class="d-flex justify-content-center align-items-center mb-3">
                            <div class="avatar avatar-xl">
                                <div class="avatar-name rounded-circle bg-primary-subtle">
                                    <span class="fs-2 text-primary" data-feather="dollar-sign"></span>
                                </div>
                            </div>
                        </div>
                        <h4 id="totalValorPagina" class="mb-2 text-body-emphasis lh-1">-</h4>
                        <p class="fs-9 text-body-tertiary mb-0">Valor Total</p>
                        <div class="d-flex justify-content-center">
                            <span class="badge badge-phoenix badge-phoenix-primary">
                                <span class="fas fa-coins me-1"></span>A Receber
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card Total Recebido -->
            <div class="col-6 col-lg-3 border-end border-translucent">
                <div class="card border-0 rounded-0 text-center">
                    <div class="card-body py-4">
                        <div class="d-flex justify-content-center align-items-center mb-3">
                            <div class="avatar avatar-xl">
                                <div class="avatar-name rounded-circle bg-success-subtle">
                                    <span class="fs-2 text-success" data-feather="trending-up"></span>
                                </div>
                            </div>
                        </div>
                        <h4 id="totalRecebidoPagina" class="mb-2 text-body-emphasis lh-1">-</h4>
                        <p class="fs-9 text-body-tertiary mb-0">Total Recebido</p>
                        <div class="d-flex justify-content-center">
                            <span class="badge badge-phoenix badge-phoenix-success">
                                <span class="fas fa-check me-1"></span>Recebido
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card Saldo -->
            <div class="col-6 col-lg-3">
                <div class="card border-0 rounded-0 text-center">
                    <div class="card-body py-4">
                        <div class="d-flex justify-content-center align-items-center mb-3">
                            <div class="avatar avatar-xl">
                                <div class="avatar-name rounded-circle bg-warning-subtle">
                                    <span class="fs-2 text-warning" data-feather="clock"></span>
                                </div>
                            </div>
                        </div>
                        <h4 id="totalSaldoPagina" class="mb-2 text-body-emphasis lh-1">-</h4>
                        <p class="fs-9 text-body-tertiary mb-0">Saldo Pendente</p>
                        <div class="d-flex justify-content-center">
                            <span class="badge badge-phoenix badge-phoenix-warning">
                                <span class="fas fa-hourglass-half me-1"></span>Pendente
                            </span>
                        </div>
                    </div>
                </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>

    <!-- Choices e Select2 -->
    <script src="{{ asset('vendors/choices/choices.min.js') }}"></script>
    <script src="{{ asset('vendors/select2/js/select2.min.js') }}"></script>

    <script>
        // Função para capturar todos os parâmetros de filtro atuais
        function getFilterParams() {
            const params = new URLSearchParams(window.location.search);
            const filters = {};

            // Captura todos os parâmetros da URL
            for (const [key, value] of params) {
                filters[key] = value;
            }

            // Captura também os valores atuais dos filtros no formulário
            filters.status = $('#filterStatus').val() || 'all';
            filters.artista_id = $('#filterArtista').val() || '';
            filters.tipo_contrato = $('#filterTipoContrato').val() || '';
            filters.periodo = $('#filterPeriodo').val() || 'tudo';
            filters.periodo_recebimento = $('#filterPeriodoRecebimento').val() || 'tudo';
            filters.search_field = $('#searchField').val() || '';
            filters.q = $('#searchInput').val() || '';
            filters.search_field2 = $('#searchField2').val() || '';
            filters.q2 = $('#searchInput2').val() || '';
            filters.data_inicio = $('#dataInicio').val() || '';
            filters.data_fim = $('#dataFim').val() || '';
            filters.data_especifica = $('#dataEspecifica').val() || '';
            filters.data_recebimento_inicio = $('#dataRecebimentoInicio').val() || '';
            filters.data_recebimento_fim = $('#dataRecebimentoFim').val() || '';
            filters.data_recebimento_especifica = $('#dataRecebimentoEspecifica').val() || '';

            return filters;
        }

        // Função para adicionar campos hidden com os filtros em um formulário
        function addFilterFieldsToForm(form, filters) {
            for (const [key, value] of Object.entries(filters)) {
                if (value) {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = key;
                    input.value = value;
                    form.appendChild(input);
                }
            }
        }

        // Funções para abrir modais dinamicamente
        function registrarRecebimento(contaId) {
            const filters = getFilterParams();

            $.get(`/contas-a-receber/${contaId}/modal-recebimento`, function(html) {
                $('#modalContainer').empty();
                $('#modalContainer').html(html);

                // Adiciona os filtros ao formulário
                const form = document.querySelector(`#moda_baixar${contaId} form`);
                if (form) {
                    addFilterFieldsToForm(form, filters);

                    // Debug para verificar se os filtros foram adicionados
                    console.log('Filtros adicionados ao formulário de recebimento:', filters);
                }

                $(`#moda_baixar${contaId}`).modal('show');

                if (typeof Choices !== 'undefined') {
                    document.querySelectorAll('[data-choices]').forEach(element => {
                        new Choices(element);
                    });
                }

                $('.valor-input').mask('#.##0,00', {reverse: true});
            }).fail(function(xhr, status, error) {
                console.error('Erro ao carregar modal de recebimento:', error);
                alert('Erro ao carregar modal de recebimento. Tente novamente.');
            });
        }

        function viewRecebimentos(contaId) {
            $.get(`/contas-a-receber/${contaId}/modal-visualizar`, function(html) {
                $('#modalContainer').empty();
                $('#modalContainer').html(html);
                $(`#moda_view${contaId}`).modal('show');

                // Inicializa tooltips
                $('[data-bs-toggle="tooltip"]').tooltip();
            });
        }

        function anexarNota(contaId) {
            const filters = getFilterParams();

            $.get(`/contas-a-receber/${contaId}/modal-anexar`, function(html) {
                $('#modalContainer').empty();
                $('#modalContainer').html(html);

                // Adiciona os filtros ao formulário
                const form = document.querySelector(`#modal_anexar_notaS${contaId} form`);
                if (form) {
                    addFilterFieldsToForm(form, filters);
                }

                $(`#modal_anexar_notaS${contaId}`).modal('show');
            });
        }

        function anexarComprovante(contaId) {
            const filters = getFilterParams();

            $.get(`/contas-a-receber/${contaId}/modal-anexar-comprovante`, function(html) {
                $('#modalContainer').empty();
                $('#modalContainer').html(html);

                // Adiciona os filtros ao formulário
                const form = document.querySelector(`#modal_anexar_comprovanteS${contaId} form`);
                if (form) {
                    addFilterFieldsToForm(form, filters);
                }

                $(`#modal_anexar_comprovanteS${contaId}`).modal('show');
            });
        }

        function confirmarExclusao(contaId) {
            const filters = getFilterParams();

            // Criar modal de confirmação dinamicamente
            const modalHtml = `
                <div class="modal fade" id="deleteModal${contaId}" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header bg-danger text-white">
                                <h5 class="modal-title">
                                    <i class="fas fa-exclamation-triangle me-2"></i>Confirmar Exclusão
                                </h5>
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                <div class="alert alert-warning d-flex align-items-center" role="alert">
                                    <span class="fas fa-exclamation-triangle me-2"></span>
                                    <div>
                                        <strong>Atenção!</strong> Esta ação não pode ser desfeita.
                                    </div>
                                </div>
                                <p class="mb-0">Tem certeza que deseja excluir a conta a receber <strong>#${contaId}</strong>?</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                    <i class="fas fa-times me-1"></i>Cancelar
                                </button>
                                <button type="button" class="btn btn-danger" onclick="executarExclusao(${contaId})">
                                    <i class="fas fa-trash me-1"></i>Excluir
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            `;

            // Remove modal anterior se existir
            $(`#deleteModal${contaId}`).remove();

            // Adiciona modal ao container
            $('#modalContainer').append(modalHtml);

            // Exibe o modal
            $(`#deleteModal${contaId}`).modal('show');
        }

        function executarExclusao(contaId) {
            const filters = getFilterParams();

            const form = document.createElement('form');
            form.method = 'POST';
            form.action = `/contas-a-receber/${contaId}`;

            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);

            // Adiciona os filtros
            addFilterFieldsToForm(form, filters);

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

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

            // Restaura cada filtro se existir na URL
            if (params.has('status')) $('#filterStatus').val(params.get('status'));
            if (params.has('artista_id')) $('#filterArtista').val(params.get('artista_id'));
            if (params.has('tipo_contrato')) $('#filterTipoContrato').val(params.get('tipo_contrato'));
            if (params.has('periodo')) $('#filterPeriodo').val(params.get('periodo'));
            if (params.has('search_field')) $('#searchField').val(params.get('search_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'));
            if (params.has('data_recebimento_inicio')) $('#dataRecebimentoInicio').val(params.get('data_recebimento_inicio'));
            if (params.has('data_recebimento_fim')) $('#dataRecebimentoFim').val(params.get('data_recebimento_fim'));
            if (params.has('data_recebimento_especifica')) $('#dataRecebimentoEspecifica').val(params.get('data_recebimento_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();
            } else {
                $('#intervaloContainer, #especificoContainer').hide();
            }

            const periodoRecebimento = params.get('periodo_recebimento');
            if (periodoRecebimento === 'intervalo') {
                $('#intervaloRecebimentoContainer').show();
                $('#especificoRecebimentoContainer').hide();
            } else if (periodoRecebimento === 'especifico') {
                $('#especificoRecebimentoContainer').show();
                $('#intervaloRecebimentoContainer').hide();
            } else {
                $('#intervaloRecebimentoContainer, #especificoRecebimentoContainer').hide();
            }

            // Atualizar placeholders baseado nos filtros restaurados
            updatePlaceholder();
            updatePlaceholder2();

            // Debug para verificar se os filtros foram restaurados
            console.log('Filtros restaurados da URL:', Object.fromEntries(params));
        }

        // Função para carregar artistas com lançamentos
        function carregarArtistas() {
            $.ajax({
                url: '{{ route("contas-a-receber.artistas-com-lancamentos") }}',
                method: 'GET',
                success: function(response) {
                    const select = $('#filterArtista');
                    
                    // Limpa opções existentes (exceto "Todos")
                    select.find('option:not(:first)').remove();
                    
                    // Adiciona artistas
                    if (response.artistas && response.artistas.length > 0) {
                        response.artistas.forEach(function(artista) {
                            select.append(`<option value="${artista.id}">${artista.nome_completo}</option>`);
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Erro ao carregar artistas:', error);
                }
            });
        }

        let dataTable;
        const transferencias = @json($transferencias ?? []);

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

            // Configura event listeners
            setupEventListeners();

            // Carrega artistas para o select
            carregarArtistas();

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

            restoreFiltersFromURL();

            // Remove a linha problemática e substitua por:
            if (window.location.search) {
                // Os filtros já são aplicados automaticamente pelo DataTable
                // Não precisa de função adicional aqui
            }

            // 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');
                }
            });

            // ADICIONAR O EVENT LISTENER DO BOTÃO EXPORTAR AQUI
            $('#btnExportarPDF').off('click').on('click', function(e) {
                e.preventDefault();
                console.log('Botão de exportar clicado!');
                
                const btn = $(this);
                const originalText = btn.html();
                
                // Desabilita botão e mostra loading
                btn.prop('disabled', true).html('<span class="fas fa-spinner fa-spin me-2"></span>Gerando PDF...');
                
                // Captura todos os filtros ativos
                const filtros = getFilterParams();
                console.log('Filtros capturados:', filtros);
                
                // Cria URL com filtros
                const url = new URL('{{ route("contas-a-receber.exportar-pdf") }}', window.location.origin);
                Object.keys(filtros).forEach(key => {
                    if (filtros[key] && filtros[key] !== 'all' && filtros[key] !== 'tudo' && filtros[key] !== '') {
                        url.searchParams.append(key, filtros[key]);
                    }
                });
                
                console.log('URL final:', url.toString());
                
                // Abre em nova aba para download
                window.open(url.toString(), '_blank');
                
                // Restaura botão após 2 segundos
                setTimeout(() => {
                    btn.prop('disabled', false).html(originalText);
                }, 2000);
            });
        });

        function initDataTable() {
            dataTable = $('#contasAReceberTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route("contas-a-receber.index") }}',
                    type: 'GET',
                    data: function(d) {
                        // Adiciona todos os filtros
                        d.status = $('#filterStatus').val();
                        d.artista_id = $('#filterArtista').val();
                        d.tipo_contrato = $('#filterTipoContrato').val();
                        d.periodo = $('#filterPeriodo').val();
                        d.periodo_recebimento = $('#filterPeriodoRecebimento').val();
                        d.data_inicio = $('#dataInicio').val();
                        d.data_fim = $('#dataFim').val();
                        d.data_especifica = $('#dataEspecifica').val();
                        d.data_recebimento_inicio = $('#dataRecebimentoInicio').val();
                        d.data_recebimento_fim = $('#dataRecebimentoFim').val();
                        d.data_recebimento_especifica = $('#dataRecebimentoEspecifica').val();
                        d.search_field = $('#searchField').val();
                        d.q = $('#searchInput').val();
                        d.search_field2 = $('#searchField2').val();
                        d.q2 = $('#searchInput2').val();
                    }
                },
                columns: [
                    { data: 'id', name: 'id', className: 'ps-3 fw-bold' },
                    { data: 'descricao', name: 'descricao' },
                    { data: 'data_extra', name: 'data_extra', className: 'text-center' },
                    { data: 'empresa', name: 'empresa' },
                    { data: 'artista', name: 'artista' },
                    { 
                        data: 'tipo_contrato', 
                        name: 'tipo_contrato', 
                        className: 'text-center',
                        orderable: true,
                        searchable: true
                    },
                    { data: 'cliente', name: 'cliente' },
                    {
                        data: 'vencimento',
                        name: 'data_vencimento',
                        className: 'text-center',
                        render: function(data, type, row) {
                            if (type === 'display' && data.display) {
                                if (data.badge && data.class) {
                                    return `<span class="${data.class}">${data.display}</span>`;
                                }
                                return data.display;
                            }
                            return data.display || '';
                        }
                    },
                    {
                        data: 'data_recebimento',
                        name: 'data_recebimento',
                        className: 'text-center',
                        render: function(data, type, row) {
                            if (type === 'display' && data) {
                                if (data.badge && data.class) {
                                    return `<span class="${data.class}">${data.display}</span>`;
                                }
                                return data.display;
                            }
                            return data?.display || '<span class="text-muted">-</span>';
                        }
                    },
                    { data: 'valor', name: 'valor', className: 'text-end fw-medium' },
                    { data: 'recebido', name: 'recebido', className: 'text-end text-success fw-medium' },
                    { data: 'saldo', name: 'saldo', className: 'text-end fw-medium' },
                    { data: 'status', name: 'status', 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: [[6, 'asc']], // Ordena por vencimento
                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) {
                    // Atualizar totais PRIMEIRO
                    const response = settings.json;
                    console.log('Response completa:', response); // Debug
                    if (response && response.totals) {
                        atualizarTotais(response.totals);
                    } else {
                        console.log('Totals não encontrados na resposta'); // Debug
                        atualizarTotais(null);
                    }

                    // Reinicializa tooltips
                    $('[data-bs-toggle="tooltip"]').tooltip();

                    // Aplicar coloração zebrada com bg-body
                    setTimeout(function() {
                        $('#contasAReceberTable tbody tr').each(function(index) {
                            const $row = $(this);

                            // Remove TODAS as classes de background possíveis
                            $row.removeClass('bg-body bg-body-secondary bg-body-highlight bg-gray-100 bg-secondary-subtle table-active odd even row-white row-bg-body');

                            // Remove estilos inline conflitantes
                            $row.css('background-color', '');
                            $row.css('--phoenix-bg-opacity', '');

                            if (index % 2 === 0) {
                                // Linhas pares (0, 2, 4...) - BRANCO
                                $row.css('background-color', '#ffffff');
                                $row.addClass('row-white');
                            } else {
                                // Linhas ímpares (1, 3, 5...) - bg-body mais claro
                                $row.css('--phoenix-bg-opacity', '0.4');
                                $row.css('background-color', 'rgba(var(--phoenix-body-bg-rgb), var(--phoenix-bg-opacity))');
                                $row.addClass('row-bg-body');
                            }
                        });

                        console.log('Coloração zebrada aplicada com bg-body!'); // Debug
                    }, 50);

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

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

        function setupEventListeners() {
            // Filtro de período vencimento
            $('#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();
                }
            });

            // Filtro de período recebimento
            $('#filterPeriodoRecebimento').on('change', function() {
                const periodo = $(this).val();
                $('#intervaloRecebimentoContainer, #especificoRecebimentoContainer').hide();

                if (periodo === 'intervalo') {
                    $('#intervaloRecebimentoContainer').show();
                } else if (periodo === 'especifico') {
                    $('#especificoRecebimentoContainer').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();
            });

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

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

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

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

            // Mudança nos campos de busca
            $('#searchField').on('change', function() {
                updatePlaceholder();
                dataTable.ajax.reload();
            });

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

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

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

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

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

        // 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 quando a tabela for redesenhada
            dataTable.on('draw.dt', updateScrollWidth);

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

            // Atualizar largura inicial e forçar exibição
            setTimeout(() => {
                updateScrollWidth();
                // Forçar verificação de scroll
                if (tableContainer.scrollWidth > tableContainer.clientWidth) {
                    scrollTop.style.display = 'block';
                }
            }, 100);

            // Observer para detectar mudanças na tabela
            const observer = new MutationObserver(() => {
                setTimeout(updateScrollWidth, 50);
            });

            observer.observe(tableContainer, {
                childList: true,
                subtree: true,
                attributes: true
            });
        }

        // Configurar scrollbar duplo desde o início
        function initScrollbar() {
            setTimeout(() => {
                setupDualScrollbar();
                // Forçar atualização inicial
                const event = new Event('resize');
                window.dispatchEvent(event);
            }, 500);
        }

        // Chamar após inicializar o DataTable
        initScrollbar();

        // Também chamar quando a tabela for redesenhada
        dataTable.on('draw.dt', function() {
            setTimeout(setupDualScrollbar, 100);
        });

        function updatePlaceholder() {
            const field = $('#searchField').val();
            const input = $('#searchInput');
            if (!field) {
                input.attr('placeholder', 'Buscar em todas as colunas');
            } else if (field === 'valor') {
                input.attr('placeholder', 'Ex: 1500,00 ou 1.500,00');
            } else {
                const label = field.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
                input.attr('placeholder', 'Buscar por ' + label);
            }
        }

        function updatePlaceholder2() {
            const field = $('#searchField2').val();
            const input = $('#searchInput2');
            if (!field) {
                input.attr('placeholder', 'Segundo filtro (opcional)');
            } else if (field === 'valor') {
                input.attr('placeholder', 'Ex: 1500,00 ou 1.500,00');
            } else {
                const label = field.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
                input.attr('placeholder', 'Buscar por ' + label);
            }
        }

        // Handler para excluir nota fiscal quando o modal for carregado
        $(document).on('click', '.excluir-nota-fiscal', function(e) {
            e.preventDefault();

            const button = $(this);
            const notaId = button.data('id');
            const url = button.data('url');

            if (confirm('Tem certeza que deseja excluir esta nota fiscal?')) {
                $.ajax({
                    url: url,
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        // Remove a linha da tabela
                        $(`#nota-fiscal-${notaId}`).fadeOut(300, function() {
                            $(this).remove();
                        });

                        // Mostra mensagem de sucesso
                        if (typeof toastr !== 'undefined') {
                            toastr.success('Nota fiscal excluída com sucesso!');
                        } else {
                            alert('Nota fiscal excluída com sucesso!');
                        }
                    },
                    error: function(xhr) {
                        console.error('Erro ao excluir nota fiscal:', xhr);

                        if (typeof toastr !== 'undefined') {
                            toastr.error('Erro ao excluir nota fiscal.');
                        } else {
                            alert('Erro ao excluir nota fiscal.');
                        }
                    }
                });
            }
        });

        // Handler para excluir comprovante anexo quando o modal for carregado
        $(document).on('click', '.excluir-comprovante-anexo', function(e) {
            e.preventDefault();

            const button = $(this);
            const comprovanteId = button.data('id');
            const url = button.data('url');

            if (confirm('Tem certeza que deseja excluir este comprovante?')) {
                $.ajax({
                    url: url,
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        // Remove a linha da tabela
                        $(`#comprovante-anexo-${comprovanteId}`).fadeOut(300, function() {
                            $(this).remove();
                        });

                        // Mostra mensagem de sucesso
                        if (typeof toastr !== 'undefined') {
                            toastr.success('Comprovante excluído com sucesso!');
                        } else {
                            alert('Comprovante excluído com sucesso!');
                        }
                    },
                    error: function(xhr) {
                        console.error('Erro ao excluir comprovante:', xhr);

                        if (typeof toastr !== 'undefined') {
                            toastr.error('Erro ao excluir comprovante.');
                        } else {
                            alert('Erro ao excluir comprovante.');
                        }
                    }
                });
            }
        });

        // Função para formatar valores em moeda brasileira
        function formatarMoeda(valor) {
            return 'R$ ' + parseFloat(valor).toLocaleString('pt-BR', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            });
        }

        // Função para atualizar totais
        function atualizarTotais(totals) {
            if (totals) {
                $('#totalQtdPagina').text(totals.quantidade || 0);
                $('#totalValorPagina').text(formatarMoeda(totals.valor || 0));
                $('#totalRecebidoPagina').text(formatarMoeda(totals.recebido || 0));
                $('#totalSaldoPagina').text(formatarMoeda(totals.saldo || 0));
            } else {
                $('#totalQtdPagina').text('-');
                $('#totalValorPagina').text('-');
                $('#totalRecebidoPagina').text('-');
                $('#totalSaldoPagina').text('-');
            }
        }

        // Função para editar mantendo os filtros
        function editarComFiltros(contaId) {
            const filters = getFilterParams();

            // Construir URL de edição com filtros
            let editUrl = `/contas-a-receber/${contaId}/edit`;
            const urlParams = new URLSearchParams();

            // Adicionar todos os filtros à URL
            for (const [key, value] of Object.entries(filters)) {
                if (value && value !== 'all' && value !== 'tudo') {
                    urlParams.append(key, value);
                }
            }

            // Se há parâmetros, adiciona à URL
            if (urlParams.toString()) {
                editUrl += '?' + urlParams.toString();
            }

            // Navegar para a página de edição
            window.location.href = editUrl;
        }
    </script>
@endpush