@extends('template_pages.session')

@section('page_title', 'Relatório Operacionais')
@section('page_icon', 'chart-no-axes-combined')
@section('navbar', 'finance.navbar')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/inspinia/plugins/filepond/filepond.min.css') }}" type="text/css">
<link rel="stylesheet" href="{{ asset('assets/inspinia/plugins/filepond/filepond-plugin-image-preview.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/inspinia/plugins/dropzone/dropzone.css') }}" type="text/css">
<!-- Daterangepicker Plugin CSS -->
<link rel="stylesheet" href="{{ asset('assets/inspinia/plugins/daterangepicker/daterangepicker.css') }}" type="text/css">
<!-- Select Plugin CSS -->
<link rel="stylesheet" href="{{ asset('assets/inspinia/plugins/select2/select2.min.css') }}">
@endpush

@php 
    $filter = request()->get('filter');
@endphp

@section('content_page')
<div class="card-body pb-0" style="flex: none;">
    <div class="d-flex align-items-center gap-1">
        <i data-lucide="funnel" class="fs-4"></i>
        <h4 class="mb-0">Filtros</h4>
    </div>
    <div class="row mt-3">
        <div class="col-md-4">
            <label class="form-label">Pago/Agendado em</label>
            <div class="input-group date_range_ptbr" data-toggle="date-range-picker" id="paid_at_group">
                <span class="input-group-text"><i data-lucide="calendar-check"></i></span>
                <input type="text" class="form-control" name="paid_at" id="paid_at" placeholder="DD/MM/YYYY - DD/MM/YYYY" autocomplete="off">
            </div>
        </div>
        <div class="col-md-4 mt-3 mt-md-0">
            <label class="form-label">Data de Emissão</label>
            <div class="input-group date_range_ptbr" data-toggle="date-range-picker" id="created_at_group">
                <span class="input-group-text"><i data-lucide="calendar"></i></span>
                <input type="text" class="form-control" name="created_at" id="created_at" placeholder="DD/MM/YYYY - DD/MM/YYYY" autocomplete="off">
            </div>
        </div>
        <div class="col-md-4 mt-3 mt-md-0">
            <label class="form-label">Tipo</label>
            <select class="select2 form-control select2-multiple" multiple="multiple" data-placeholder="Selecionar Tipo" id="type" name="type">
                <option value="Custo">Custo</option>
                <option value="Despesa">Despesa</option>
            </select>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-md-4">
            <label class="form-label">Status</label>
            <select class="select2 form-control select2-multiple" multiple="multiple" data-placeholder="Selecionar Status" id="expense_status" name="expense_status">
                <option value="draft">Rascunho</option>
                <option value="scheduled">Agendado</option>
                <option value="pending">Pendente</option>
                <option value="processing">Processando</option>
                <option value="done">Pago</option>
                <option value="rejected">Rejeitado</option>
                <option value="error">Erro</option>
            </select>
        </div>
        <div class="col-md-4 mt-3 mt-md-0">
            <label class="form-label">Origem</label>
            <select class="select2 form-control select2-multiple" multiple="multiple" data-placeholder="Selecionar Origem" id="payment_origin" name="payment_origin">
                <option value="boleto">Boletos</option>
                <option value="transferencia">Transferências</option>
                <option value="pix_qrcode">PIX QR Code</option>
            </select>
        </div>
        <div class="col-md-4 mt-3 mt-md-0">
            <label class="form-label">Conta Corrente</label>
            <select class="select2 form-control" data-placeholder="Selecionar CC" id="provider_filter" name="provider">
                <option value="">Todas</option>
                <option value="asaas">Asaas</option>
                <option value="iugu">Iugu</option>
            </select>
        </div>
    </div>
    <div class="row mt-3">
        <div class="d-flex gap-2 col-12 col-lg-auto">
            <a href="javascript:void(0);" class="btn btn-light apply_filters">Aplicar Filtros</a>
            <a href="javascript:void(0);" class="btn btn-dark remove_filters">Limpar Filtros</a>
        </div>
    </div>
</div>

<div class="border-top border-dashed my-3"></div>
<div class="card-body pt-0" style="flex: none;">
    <div class="d-flex align-items-center gap-1">
        <i data-lucide="chart-column-big" class="fs-4"></i>
        <h4 class="mb-0">Resumo</h4>
    </div>
</div>

<div class="card-body pt-0 pb-0" style="flex: none;">
    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-5 g-3">
        <div class="col-12 col-xxl">
            <div class="card bg-light bg-opacity-10 mb-0 h-100">
                <div class="card-header d-flex border-dashed align-items-center">
                    <h5 class="card-title">Total</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="avatar fs-60 avatar-img-size flex-shrink-0">
                            <span class="avatar-title text-bg-dark bg-opacity-90 rounded-circle fs-32">
                                <i data-lucide="badge-dollar-sign"></i>
                            </span>
                        </div>
                        <div class="text-end">
                            <h3 class="mb-2 fw-normal" id="summary-total-value">R$ 0,00</h3>
                            <p class="mb-0 text-muted" id="summary-total-count">0 Custos/Despesas</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>      
        <div class="col-12 col-xxl">
            <div class="card bg-success bg-opacity-10 mb-0 h-100">
                <div class="card-header d-flex border-dashed align-items-center">
                    <h5 class="card-title">Pago</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="avatar fs-60 avatar-img-size flex-shrink-0">
                            <span class="avatar-title text-bg-success bg-opacity-90 rounded-circle fs-32">
                                <i data-lucide="badge-check"></i>
                            </span>
                        </div>
                        <div class="text-end">
                            <h3 class="mb-2 fw-normal" id="summary-paid-value">R$ 0,00</h3>
                            <p class="mb-0 text-muted" id="summary-paid-count">0 Custos/Despesas</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-xxl">
            <div class="card bg-primary bg-opacity-10 mb-0 h-100">
                <div class="card-header d-flex border-dashed align-items-center">
                    <h5 class="card-title">Agendado</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="avatar fs-60 avatar-img-size flex-shrink-0">
                            <span class="avatar-title text-bg-primary bg-opacity-90 rounded-circle fs-32">
                                <i data-lucide="clock"></i>
                            </span>
                        </div>
                        <div class="text-end">
                            <h3 class="mb-2 fw-normal" id="summary-scheduled-value">R$ 0,00</h3>
                            <p class="mb-0 text-muted" id="summary-scheduled-count">0 Custos/Despesas</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-xxl">
            <div class="card bg-warning bg-opacity-10 mb-0 h-100">
                <div class="card-header d-flex border-dashed align-items-center">
                    <h5 class="card-title">Em Processamento</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="avatar fs-60 avatar-img-size flex-shrink-0">
                            <span class="avatar-title text-bg-warning bg-opacity-90 rounded-circle fs-32">
                                <i data-lucide="badge-alert"></i>
                            </span>
                        </div>
                        <div class="text-end">
                            <h3 class="mb-2 fw-normal" id="summary-processing-value">R$ 0,00</h3>
                            <p class="mb-0 text-muted" id="summary-processing-count">0 Custos/Despesas</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-xxl">
            <div class="card bg-danger bg-opacity-10 mb-0 h-100">
                <div class="card-header d-flex border-dashed align-items-center">
                    <h5 class="card-title">Rejeitado/Erro</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="avatar fs-60 avatar-img-size flex-shrink-0">
                            <span class="avatar-title text-bg-danger bg-opacity-90 rounded-circle fs-32">
                                <i data-lucide="badge-x"></i>
                            </span>
                        </div>
                        <div class="text-end">
                            <h3 class="mb-2 fw-normal" id="summary-rejected-value">R$ 0,00</h3>
                            <p class="mb-0 text-muted" id="summary-rejected-count">0 Custos/Despesas</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="border-top border-dashed my-3"></div>
<div class="card-body pt-0" style="flex: none;">
    <div class="d-flex align-items-center gap-1">
        <i data-lucide="chart-no-axes-combined" class="fs-4"></i>
        <h4 class="mb-0">Resultados</h4>
    </div>
</div>
<div class="card-body">
    <table id="expenses-ajax-table" class="table table-custom table-centered table-select table-hover w-100 mb-0">
        <thead class="bg-light align-middle bg-opacity-25 thead-sm">
            <tr class="text-uppercase fs-xxs">
                <th class="text-center checkbox-select-datatable" style="width: 1%;"></th>
                <th class="text-center checkbox-select-datatable" data-bs-toggle="tooltip" title="Conta Corrente">CC</th>
                <th data-table-sort>Origem</th>
                <th data-table-sort>Tipo</th>
                <th data-table-sort>Descrição</th>
                <th data-table-sort>Categoria</th>
                <th data-table-sort>Beneficiário / Nome da Conta</th>
                <th data-table-sort>Valor</th>
                <th data-table-sort>Emissão</th>
                <th data-table-sort>Pago Em</th>
                <th class="text-center checkbox-select-datatable" data-bs-toggle="tooltip" title="Comprovante Bancário">CB</th>
                <th class="text-center checkbox-select-datatable" data-bs-toggle="tooltip" title="Comprovante Fiscal">CF</th>
                <th class="text-center checkbox-select-datatable" data-table-sort>Status</th>
                <th class="text-center checkbox-select-datatable" style="width: 1%;">Ações</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
<div class="card-footer border-0">
    <div class="d-flex justify-content-between align-items-center">
        <div data-table-pagination-info=""></div>
        <div data-table-pagination></div>
    </div>
</div>

<!-- Modal Confirm Barcode -->
<div class="modal fade" id="modal-upload-file" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Anexar Comprovante</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="col">
                    <form action="#" method="post" class="dropzone" id="fileDropzone" data-previews-container="#file-previews" data-upload-preview-template="#uploadPreviewTemplate">
                        <input type="hidden" id="csrf_token" value="{{ csrf_token() }}">
                        <input type="hidden" name="item_id" id="upload_item_id">
                        <input type="hidden" name="item_type" id="upload_item_type">
                        <input type="hidden" name="receipt_category" id="upload_receipt_category">
                        <div class="dz-message needsclick">
                            <div class="avatar-lg mx-auto mb-2">
                                <span class="avatar-title bg-info-subtle text-info rounded-circle">
                                    <i class="ti ti-upload fs-24"></i>
                                </span>
                            </div>
                            <h4 class="fs-base">Arraste e solte arquivos aqui ou clique para fazer upload</h4>
                        </div>
                    </form>
                    <div id="uploadError" class="text-danger mt-3 text-center" style="display:none">Anexe pelo menos um arquivo.</div>
                    <div class="dropzone-previews row" id="file-previews"></div>
                    <div class="d-none" id="uploadPreviewTemplate">
                        <div class="card mt-2 mb-0 border-dashed border">
                            <div class="p-2">
                                <div class="row align-items-center">
                                    <div class="col-auto">
                                        <img data-dz-thumbnail src="#" class="avatar-sm rounded bg-light d-none" alt="">
                                        <span class="avatar-sm rounded bg-light d-flex align-items-center justify-content-center" data-dz-icon>
                                            <i data-lucide="file" class="fs-24 text-body"></i>
                                        </span>
                                    </div>
                                    <div class="col ps-0">
                                        <p class="fw-semibold m-0" data-dz-name></p>
                                        <p class="mb-0 text-muted" data-dz-size></p>
                                    </div>
                                    <div class="col-auto">
                                        <a href="" class="btn btn-link btn-lg text-danger" data-dz-remove>
                                            <i class="ti ti-x"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" id="btn-confirm-upload">Confirmar</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<!-- Dropzone Plugin Js -->
<script src="{{ asset('assets/inspinia/plugins/dropzone/dropzone-min.js') }}"></script>
<!-- Filepond Plugin Js -->
<script src="{{ asset('assets/inspinia/plugins/filepond/filepond.min.js') }}"></script>
<script src="{{ asset('assets/inspinia/plugins/filepond/filepond-plugin-image-preview.min.js') }}"></script>
<script src="{{ asset('assets/inspinia/plugins/filepond/filepond-plugin-file-validate-size.min.js') }}"></script>
<script src="{{ asset('assets/inspinia/plugins/filepond/filepond-plugin-image-exif-orientation.min.js') }}"></script>
<script src="{{ asset('assets/inspinia/plugins/filepond/filepond-plugin-file-encode.min.js') }}"></script>
<!-- Daterangepicker Plugin Js -->
<script src="{{ asset('assets/inspinia/plugins/moment/moment.min.js') }}"></script>
<script src="{{ asset('assets/inspinia/plugins/daterangepicker/daterangepicker.js') }}"></script>
<script src="{{ asset('assets/scripts/date_picker_pt_br.js') }}"></script>
<!-- Datatables js -->
<script src="{{ asset('assets/inspinia/plugins/datatables/dataTables.min.js') }}"></script>
<script src="{{ asset('assets/inspinia/plugins/datatables/dataTables.bootstrap5.min.js') }}"></script>
<!-- Select2 Plugin Js -->
<script src="{{ asset('assets/inspinia/plugins/select2/select2.min.js') }}"></script>
<script>
if (window.Dropzone) { Dropzone.autoDiscover = false; }
document.addEventListener('DOMContentLoaded', function () {
    const applyBtn = document.querySelector('.apply_filters');
    const clearBtn = document.querySelector('.remove_filters');
    const createdInput = document.getElementById('created_at');
    const paidInput = document.getElementById('paid_at');
    const typeSelect = document.getElementById('type');
    const statusSelect = document.getElementById('expense_status');

    // Pre-definir filtro Pago/Agendado em (mês inteiro)
    const startOfMonth = moment().startOf('month');
    const endOfNextMonth = moment().add(1, 'month').endOf('month');
    const defaultRange = `${startOfMonth.format('DD/MM/YYYY')} - ${endOfNextMonth.format('DD/MM/YYYY')}`;

    if (paidInput) {
        paidInput.value = defaultRange;
    }

    // Atualiza o componente daterangepicker do "Pago/Agendado em" quando estiver pronto
    $(document).ready(function() {
        var paidPicker = $('#paid_at').data('daterangepicker');
        if (paidPicker) {
            paidPicker.setStartDate(startOfMonth);
            paidPicker.setEndDate(endOfNextMonth);
        }
    });

    $('#type').select2({
        placeholder: "Selecionar Tipo",
        allowClear: true,
        width: '100%'
    });

    $('#expense_status').select2({
        placeholder: "Selecionar Status",
        allowClear: true,
        width: '100%'
    });

    $('#payment_origin').select2({
        placeholder: "Selecionar Origem",
        allowClear: true,
        width: '100%'
    });

    $('#provider_filter').select2({
        placeholder: "Selecionar CC",
        allowClear: true,
        width: '100%'
    });

    const summaryEls = {
        totalValue: document.getElementById('summary-total-value'),
        totalCount: document.getElementById('summary-total-count'),
        paidValue: document.getElementById('summary-paid-value'),
        paidCount: document.getElementById('summary-paid-count'),
        scheduledValue: document.getElementById('summary-scheduled-value'),
        scheduledCount: document.getElementById('summary-scheduled-count'),
        processingValue: document.getElementById('summary-processing-value'),
        processingCount: document.getElementById('summary-processing-count'),
        rejectedValue: document.getElementById('summary-rejected-value'),
        rejectedCount: document.getElementById('summary-rejected-count'),
    };

    function getSelectedTypes() {
        return $('#type').val() || [];
    }

    function getSelectedStatuses() {
        return $('#expense_status').val() || [];
    }

    function getSelectedOrigins() {
        return $('#payment_origin').val() || [];
    }

    function getSelectedProvider() {
        return $('#provider_filter').val() || '';
    }

    function parseRange(value) {
        if (!value) return { start: null, end: null };
        const v = String(value).trim();
        if (!v) return { start: null, end: null };
        const parts = v.split(' - ').map(s => s.trim());
        if (parts.length === 2) {
            return { start: parts[0], end: parts[1] };
        } else {
            return { start: v, end: v };
        }
    }

    function renderSummary(s) {
        if (!s) return;
        summaryEls.totalValue.textContent = s.total_value ?? 'R$ 0,00';
        summaryEls.totalCount.textContent = `${s.total_count ?? 0} Custos/Despesas`;

        summaryEls.paidValue.textContent = s.paid_value ?? 'R$ 0,00';
        summaryEls.paidCount.textContent = `${s.paid_count ?? 0} Custos/Despesas`;

        summaryEls.processingValue.textContent = s.processing_value ?? 'R$ 0,00';
        summaryEls.processingCount.textContent = `${s.processing_count ?? 0} Custos/Despesas`;

        summaryEls.rejectedValue.textContent = s.rejected_value ?? 'R$ 0,00';
        summaryEls.rejectedCount.textContent = `${s.rejected_count ?? 0} Custos/Despesas`;

        summaryEls.scheduledValue.textContent = s.scheduled_value ?? 'R$ 0,00';
        summaryEls.scheduledCount.textContent = `${s.scheduled_count ?? 0} Custos/Despesas`;
    }

    // Inicializa DataTable com AJAX + filtros
    var table = $('#expenses-ajax-table').DataTable({
        processing: true,
        serverSide: false,
        ajax: {
            url: "{{ route('finance.reports.operational.list.ajax') }}",
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            data: function (d) {
                const paidRange = parseRange(paidInput ? paidInput.value : '');
                d.paid_start = paidRange.start;
                d.paid_end = paidRange.end;
                const createdRange = parseRange(createdInput ? createdInput.value : '');
                d.created_start = createdRange.start;
                d.created_end = createdRange.end;
                d.type = getSelectedTypes();
                d.expense_status = getSelectedStatuses();
                d.payment_origin = getSelectedOrigins();
                d.provider = getSelectedProvider();
            },
            dataSrc: 'data'
        },
        columns: [
            { data: 'expand', name: 'expand', orderable: false, searchable: false, className: 'details-control align-middle text-center' },
            { data: 'cc', name: 'cc', orderable: false, searchable: false, className: 'text-center' },
            { data: 'origin', name: 'origin' },
            { data: 'type', name: 'type' },
            { data: 'description', name: 'description' },
            { data: 'category', name: 'category' },
            { data: 'beneficiary', name: 'beneficiary' },
            { data: 'value', name: 'value' },
            { data: 'created_at', name: 'created_at', render: function (data, type, row) {
                return (type === 'sort' || type === 'type') ? (row.timestamp_created_at ?? '') : data;
            }},
            { data: 'payment_date', name: 'payment_date', render: function (data, type, row) {
                return (type === 'sort' || type === 'type') ? (row.timestamp_payment_date ?? '') : data;
            }},
            { data: 'cb', name: 'cb', orderable: false, searchable: false, className: 'text-center' },
            { data: 'cf', name: 'cf', orderable: false, searchable: false, className: 'text-center' },
            { data: 'status', name: 'status', className: 'text-center' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false, className: 'text-center' },
        ],
        order: [[9, 'desc']],
        pageLength: 50,
        lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
        language: {
            url: '{{ asset('assets/inspinia/plugins/datatables/pt_br.json') }}',
            paginate: {
                first: '<i class="ti ti-chevrons-left"></i>',
                previous: '<i class="ti ti-chevron-left"></i>',
                next: '<i class="ti ti-chevron-right"></i>',
                last: '<i class="ti ti-chevrons-right"></i>'
            },
            processing: '',
        },
        columnDefs: [],
        drawCallback: function(settings) {
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
            // (Re)inicializa tooltips do Bootstrap nas células renderizadas via AJAX
            if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
                document.querySelectorAll('#expenses-ajax-table [data-bs-toggle="tooltip"]').forEach(function(el) {
                    var existing = bootstrap.Tooltip.getInstance(el);
                    if (existing) existing.dispose();
                    new bootstrap.Tooltip(el);
                });
            }
        }
    });

    // Atualiza resumo quando a chamada AJAX retornar
    $('#expenses-ajax-table').on('xhr.dt', function (e, settings, json) {
        renderSummary(json?.summary || {});
    });

    // Toggle Row (Expandir detalhes)
    $('#expenses-ajax-table tbody').on('click', '.toggle-row', function (e) {
        e.preventDefault();
        var $btn = $(this);
        var tr = $btn.closest('tr');
        var row = table.row(tr);
        var icon = $btn.find('i');

        if (row.child.isShown()) {
            // Fechar
            row.child.hide();
            tr.removeClass('shown');
            icon.attr('data-lucide', 'plus');
        } else {
            // Fechar outros abertos (opcional, mas bom para UI limpa)
            table.rows().every(function() {
                if (this.child.isShown()) {
                    this.child.hide();
                    $(this.node()).removeClass('shown');
                    $(this.node()).find('.toggle-row i').attr('data-lucide', 'plus');
                }
            });

            // Abrir atual
            var content = row.data().expanded_content;
            row.child('<div class="accordion-row p-0 w-100">' + content + '</div>').show();
            tr.addClass('shown');
            icon.attr('data-lucide', 'minus');
        }
        lucide.createIcons();
    });

    // Delete Item
    $('#expenses-ajax-table tbody').on('click', '.btn-delete-item', function(e) {
        e.preventDefault();
        var id = $(this).data('id');

        Swal.fire({
            title: 'Tem certeza?',
            text: "Esta ação não pode ser desfeita.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Sim, excluir!',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                var url = '{{ route("finance.transactions.delete", 0) }}';
                url = url.replace('/0', '/' + id);

                $.ajax({
                    url: url,
                    type: 'POST',
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire('Excluído!', response.message || 'Item excluído com sucesso.', 'success');
                            table.ajax.reload(null, false);
                        } else {
                            Swal.fire('Erro!', response.message || 'Erro ao excluir item.', 'error');
                        }
                    },
                    error: function(xhr) {
                        Swal.fire('Erro!', xhr.responseJSON?.message || 'Erro ao excluir item.', 'error');
                    }
                });
            }
        });
    });

    // Retry Payment
    $('#expenses-ajax-table tbody').on('click', '.btn-retry-payment', function(e) {
        e.preventDefault();
        var id = $(this).data('id');

        Swal.fire({
            title: 'Nova tentativa de pagamento',
            text: "Deseja fazer uma nova tentativa de pagamento para este item?",
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Sim, tentar novamente',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                var url = '{{ route("finance.transactions.retry", 0) }}';
                url = url.replace('/0', '/' + id);

                $.ajax({
                    url: url,
                    type: 'POST',
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                title: 'Sucesso!',
                                text: response.message,
                                icon: 'success',
                                timer: 2000,
                                showConfirmButton: false
                            });
                            table.ajax.reload(null, false);
                        } else {
                            Swal.fire('Erro!', response.message || 'Erro ao processar nova tentativa.', 'error');
                        }
                    },
                    error: function(xhr) {
                        Swal.fire('Erro!', xhr.responseJSON?.message || 'Erro ao processar nova tentativa.', 'error');
                    }
                });
            }
        });
    });

    // Aplicar filtros
    applyBtn.addEventListener('click', function () {
        table.ajax.reload();
    });

    clearBtn.addEventListener('click', function () {
        // Limpa campos de data
        document.getElementById('created_at').value = '';
        document.getElementById('paid_at').value = '';

        // Limpa campos de select (Choices/Select2)
        $('#type option').prop('selected', false);
        $('#type').trigger('change');
        
        $('#expense_status option').prop('selected', false);
        $('#expense_status').trigger('change');

        $('#payment_origin option').prop('selected', false);
        $('#payment_origin').trigger('change');

        $('#provider_filter').val(null).trigger('change');

        // Recarrega tabela
        table.ajax.reload();
    });

    // Configuração do Dropzone
    var ACCEPT = 'image/jpeg,image/png,application/pdf,.jpg,.jpeg,.png,.pdf';
    var ALLOWED_MIME = ['image/jpeg','image/png','application/pdf'];
    var ALLOWED_EXT = ['.jpg','.jpeg','.png','.pdf'];
    
    function isAllowed(file) {
        var t = (file && file.type ? file.type : '').toLowerCase();
        var n = (file && file.name ? file.name : '').toLowerCase();
        if (ALLOWED_MIME.indexOf(t) !== -1) return true;
        for (var i = 0; i < ALLOWED_EXT.length; i++) {
            if (n.endsWith(ALLOWED_EXT[i])) return true;
        }
        return false;
    }

    function acceptFn(file, done) {
        if (isAllowed(file)) return done();
        return done('Formato de arquivo não permitido. Aceitos: JPG, JPEG, PNG, PDF.');
    }

    var dz;
    try { dz = Dropzone.forElement('#fileDropzone'); } catch (e) {}
    if (!dz) {
        try {
            dz = new Dropzone('#fileDropzone', {
                url: '#', // Será substituído ou processado manualmente
                autoProcessQueue: false,
                previewsContainer: '#file-previews',
                previewTemplate: $('#uploadPreviewTemplate').html(),
                acceptedFiles: ACCEPT,
                accept: acceptFn,
                maxFiles: 1,
                dictInvalidFileType: 'Formato de arquivo não permitido. Aceitos: JPG, JPEG, PNG, PDF.',
                dictMaxFilesExceeded: 'Apenas um arquivo é permitido.'
            });
        } catch(e) {
            console.error("Erro ao inicializar Dropzone:", e);
        }
    } else {
        dz.options.acceptedFiles = ACCEPT;
        dz.options.accept = acceptFn;
        dz.options.maxFiles = 1;
        dz.options.dictInvalidFileType = 'Formato de arquivo não permitido. Aceitos: JPG, JPEG, PNG, PDF.';
        dz.options.dictMaxFilesExceeded = 'Apenas um arquivo é permitido.';
        dz.options.autoProcessQueue = false;
        dz.options.previewsContainer = '#file-previews';
        dz.options.previewTemplate = $('#uploadPreviewTemplate').html();
    }
    
    if (dz && dz.hiddenFileInput) {
        dz.hiddenFileInput.setAttribute('accept', ACCEPT);
    }

    var uploadError = $('#uploadError');
    var previewsEl = $('#file-previews');
    
    function updatePreviewsVisibility() {
        if (!previewsEl || !previewsEl.length) return;
        var files = dz && dz.files ? dz.files : [];
        var has = files.length > 0;
        
        if (has && uploadError && uploadError.length) uploadError.hide();
    }
    
    updatePreviewsVisibility();

    if (dz && typeof dz.on === 'function') {
        dz.on('addedfile', function(file) {
            if (this.files.length > 1) {
                this.removeFile(this.files[0]);
            }
            if (!isAllowed(file)) {
                dz.removeFile(file);
                if (uploadError && uploadError.length) {
                    uploadError.show();
                    uploadError.text('Formato de arquivo não permitido. Aceitos: JPG, JPEG, PNG, PDF.');
                }
                return;
            }
            if (previewsEl && previewsEl.length) { previewsEl.removeClass('d-none'); }
            updatePreviewsVisibility();
            var isImage = file && file.type && file.type.indexOf('image') === 0;
            var $preview = $(file.previewElement);
            if ($preview && $preview.length) {
                var $imgEl = $preview.find('[data-dz-thumbnail]');
                var $iconEl = $preview.find('[data-dz-icon]');
                if (isImage) {
                    $imgEl.removeClass('d-none');
                    $iconEl.addClass('d-none');
                } else {
                    $imgEl.addClass('d-none');
                    $iconEl.removeClass('d-none');
                }
            }
        });
        dz.on('removedfile', function() {
            updatePreviewsVisibility();
        });
    }

    // Event listener para abrir modal de upload
    $(document).on('click', '.btn-upload-receipt, .btn-upload-tax-receipt', function(e) {
        e.preventDefault();
        let id = $(this).data('id');
        let type = $(this).data('type'); // 'expense' or 'transfer'
        let isCb = $(this).hasClass('btn-upload-receipt'); // Se tem a classe de CB, é CB. Caso contrário (tax-receipt), é CF.
        let category = isCb ? 'cb' : 'cf';

        $('#upload_item_id').val(id);
        $('#upload_item_type').val(type);
        $('#upload_receipt_category').val(category);

        $('#modal-upload-file').modal('show');
    });

    $('#btn-confirm-upload').on('click', function(e) {
        e.preventDefault();
        if (!dz || dz.files.length === 0) {
            $('#uploadError').show();
            return;
        }

        var file = dz.files[0];
        var formData = new FormData();
        formData.append('file', file);
        formData.append('item_id', $('#upload_item_id').val());
        formData.append('item_type', $('#upload_item_type').val());
        formData.append('receipt_category', $('#upload_receipt_category').val());
        formData.append('_token', $('meta[name="csrf-token"]').attr('content') || $('#csrf_token').val());

        var btn = $(this);
        var originalText = btn.text();
        btn.prop('disabled', true).text('Enviando...');

        $.ajax({
            url: "{{ route('finance.reports.operational.upload_receipt') }}",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.success) {
                    Swal.fire({
                        title: 'Sucesso!',
                        text: response.message,
                        icon: 'success',
                        timer: 1500,
                        showConfirmButton: false
                    });
                    $('#modal-upload-file').modal('hide');
                    table.ajax.reload(null, false); // Recarrega tabela mantendo paginação
                } else {
                    Swal.fire({
                        title: 'Erro!',
                        text: response.message || 'Erro ao enviar arquivo.',
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            },
            error: function(xhr) {
                var msg = 'Erro ao enviar arquivo.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    msg = xhr.responseJSON.message;
                }
                Swal.fire({
                    title: 'Erro!',
                    text: msg,
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            },
            complete: function() {
                btn.prop('disabled', false).text(originalText);
            }
        });
    });
    
    // Reset dropzone when modal is closed
    $('#modal-upload-file').on('hidden.bs.modal', function () {
        if (dz) {
            dz.removeAllFiles(true);
        }
        if (uploadError) uploadError.hide();
        $('#upload_item_id').val('');
        $('#upload_item_type').val('');
        $('#upload_receipt_category').val('');
    });

    // Cancelar agendamento (boletos e transferências)
    $('#expenses-ajax-table tbody').on('click', '.btn-cancel-scheduled', function(e) {
        e.preventDefault();

        var id = $(this).data('id');
        var type = $(this).data('type'); // 'expense' ou 'transfer'

        Swal.fire({
            title: 'Tem certeza?',
            text: "Esta ação vai cancelar o agendamento do pagamento.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Sim, cancelar!',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                var url = "{{ route('finance.reports.operational.cancel_scheduled', ['id' => ':id']) }}";
                url = url.replace(':id', id);

                $.ajax({
                    url: url,
                    type: 'POST',
                    data: {
                        id: id,
                        type: type,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire(
                                'Agendamento cancelado!',
                                response.message || 'Agendamento cancelado com sucesso.',
                                'success'
                            );
                            table.ajax.reload(null, false);
                        } else {
                            Swal.fire(
                                'Erro!',
                                response.message || 'Erro ao cancelar agendamento.',
                                'error'
                            );
                        }
                    },
                    error: function(xhr) {
                        Swal.fire(
                            'Erro!',
                            'Erro ao cancelar agendamento: ' + (xhr.responseJSON?.message || 'Erro desconhecido.'),
                            'error'
                        );
                    }
                });
            }
        });
    });
});
</script>
@endpush