{{-- resources/views/contas_a_pagar/scripts/parcelas.blade.php --}}

<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('Script de parcelas carregado');
    
    // Aplica máscaras nos campos existentes ao carregar a página
    aplicarMascarasExistentes();
});

// Função global para aplicar máscara de data
function aplicarMascaraData(selector) {
    // Aplica máscara de data
    $(selector).mask('00/00/0000', {
        placeholder: 'dd/mm/aaaa',
        translation: {
            '0': {pattern: /[0-9]/}
        }
    });
    
    // Aplica Flatpickr
    flatpickr(selector, {
        allowInput: true,
        dateFormat: "d/m/Y",
        onClose: function(selectedDates, dateStr, instance) {
            if (selectedDates.length === 0 && instance.input.value !== "") {
                alert("Data inválida! Por favor, insira uma data válida no formato dd/mm/aaaa.");
                instance.clear();
            }
        }
    });
}

// Função global para aplicar máscara de valor monetário
function aplicarMascaraValor(selector) {
    $(selector).mask('###.###.###.##0,00', {
        reverse: true,
        placeholder: '0,00',
        translation: {
            '#': {pattern: /[0-9]/, optional: true}
        }
    });
}

// Função para aplicar máscaras em campos já existentes
function aplicarMascarasExistentes() {
    // Aplica máscara nos campos de data existentes
    $('.flatpickr').each(function() {
        if (!this._flatpickr) { // Evita re-inicializar
            aplicarMascaraData(this);
        }
    });
    
    // Aplica máscara nos campos de valor existentes
    $('.valor').each(function() {
        aplicarMascaraValor(this);
    });
}

// Função global para adicionar parcela (chamada pela view principal)
function adicionarParcela(eventoId) {
    var uniqueId = 'p_' + Date.now();
    var defaultValor = '{{ number_format(session('conta_a_pagar.valor') ?? 0, 2, ',', '.') }}';

    var html = `
    <div class="parcelas-form border p-3 mb-3" id="parcela-${uniqueId}">
        <div class="row mb-3">
            <div class="col-md-4">
                <label for="data_pagamento_${uniqueId}" class="form-label">
                    Data do Vencimento <span class="text-danger">*</span>
                </label>
                <input type="text"
                       class="form-control flatpickr"
                       id="data_pagamento_${uniqueId}"
                       name="parcelas[${eventoId}][${uniqueId}][data]"
                       placeholder="dd/mm/aaaa"
                       required>
            </div>
            <div class="col-md-4">
                <label for="valor_${uniqueId}" class="form-label">
                    Valor <span class="text-danger">*</span>
                </label>
                <div class="input-group">
                    <span class="input-group-text">R$</span>
                    <input type="text"
                           class="form-control valor"
                           id="valor_${uniqueId}"
                           name="parcelas[${eventoId}][${uniqueId}][valor]"
                           placeholder="0,00"
                           required
                           value="${defaultValor}">
                </div>
            </div>
            <div class="col-md-4 d-flex justify-content-end align-items-end">
                <button type="button" class="btn btn-danger btn-sm" onclick="removerParcela('${uniqueId}', '${eventoId}')">
                    <span class="fas fa-trash-alt"></span> Remover Parcela
                </button>
            </div>
        </div>
    </div>
    `;

    // Insere HTML no container do evento
    document.getElementById('parcelas-container-' + eventoId).insertAdjacentHTML('beforeend', html);

    // Aplica máscaras nos novos campos criados
    aplicarMascaraData("#data_pagamento_"+uniqueId);
    aplicarMascaraValor("#valor_"+uniqueId);
}

// Função global para remover parcela (chamada pela view principal)
function removerParcela(uniqueId, eventoId) {
    console.log('Tentando remover parcela:', uniqueId, eventoId);
    var element = document.getElementById('parcela-' + uniqueId);
    if (element) {
        element.remove();
        console.log('Parcela removida com sucesso');
    } else {
        console.warn('Elemento não encontrado:', 'parcela-' + uniqueId);
        // Busca alternativa
        var alternativeElement = document.querySelector(`[id*="${uniqueId}"]`);
        if (alternativeElement) {
            var parcelaDiv = alternativeElement.closest('.parcelas-form');
            if (parcelaDiv) {
                parcelaDiv.remove();
                console.log('Parcela removida via busca alternativa');
            }
        }
    }
}
</script>