@extends('template_pages.session')

@section('page_title', 'Cobranças')
@section('page_icon', 'badge-dollar-sign')
@section('navbar', 'finance.navbar')

@push('styles')
<!-- Datatables css -->
<link href="{{ asset('assets/inspinia/plugins/datatables/responsive.bootstrap5.min.css') }}" rel="stylesheet" type="text/css">
@endpush

@section('filter')
<div class="card-header border-light flex-row-reverse">
    <div class="d-flex align-items-center gap-2">
        <span class="me-2 fw-semibold">Filtrar por:</span>

        <!-- Filtro Status -->
        <div class="app-search">
            <select id="filter-status" class="form-select form-control my-1 my-md-0">
                <option value="">Todos os Status</option>
                <option value="Pendente">Pendente</option>
                <option value="Vencido">Vencido</option>
                <option value="Pago">Pago</option>
                <option value="Pago Externamente">Pago Externamente</option>
                <option value="Pago com atraso">Pago com atraso</option>
                <option value="Expirado">Expirado</option>
                <option value="Cancelado">Cancelado</option>
            </select>
            <i data-lucide="box" class="app-search-icon text-muted"></i>
        </div>

        <!-- Botão Limpar Filtros -->
        <button id="clear-filters" class="btn btn-outline-primary">
            <i data-lucide="x" class="me-1"></i>
            Limpar
        </button>
    </div>
</div>
@endsection

@section('content_page')
<div class="card border-0">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h4 class="card-title mb-0">
            <i data-lucide="badge-dollar-sign" class="me-2"></i>
            Lista de Cobranças
        </h4>
        <div class="d-flex gap-2">
            <a href="{{ route('finance.charges.add') }}" class="btn btn-primary">
                <i data-lucide="plus" class="me-1"></i>
                Nova Cobrança
            </a>
        </div>
    </div>
    
    <div class="card-body">
        <table id="charges-ajax-table" class="table table-striped table-hover dt-responsive align-middle mb-0">
            <thead class="bg-light align-middle bg-opacity-25 thead-sm">
                <tr class="text-uppercase fs-xxs">
                    <th class="text-center" style="width: 1%;"></th>
                    <th data-table-sort data-column="status">Status</th>
                    <th data-table-sort>ID</th>
                    <th data-table-sort>Projeto</th>
                    <th data-table-sort>Emissão</th>
                    <th data-table-sort>Vencimento</th>
                    <th data-table-sort>Pago em</th>
                    <th data-table-sort>Valor</th>
                    <th data-table-sort>Tipo Empresa</th>
                    <th data-table-sort>Cliente Faturável</th>
                    <th data-table-sort>Descrição</th>
                    <th data-table-sort>Tag</th>
                    <th class="text-center" style="width: 1%;">Ações</th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <!-- Data will be loaded via AJAX -->
            </tbody>
        </table>
    </div>

    <div class="card-footer border-0">
        <div class="d-flex justify-content-between align-items-center">
            <div id="table-info" class="text-muted"></div>
            <div id="table-pagination"></div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<!-- 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>
<script>
$(document).ready(function () {
    // Initialize DataTable with AJAX
    var table = $('#charges-ajax-table').DataTable({
        processing: true,
        serverSide: false,
        ajax: {
            url: "{{ route('finance.charges.list.ajax') }}",
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            dataSrc: 'data'
        },
        columns: [
            { data: 'expand', name: 'expand', orderable: false, searchable: false, className: 'details-control align-middle text-center' },
            { data: 'status', name: 'status' },
            { data: 'id', name: 'id' },
            { data: 'project_name', name: 'project_name' },
            { data: 'issue_date', name: 'issue_date' },
            { data: 'due_date', name: 'due_date' },
            { data: 'paid_at', name: 'paid_at' },
            { data: 'value', name: 'value' },
            { data: 'company_type', name: 'company_type' },
            { data: 'client_name', name: 'client_name' },
            { data: 'description', name: 'description' },
            { data: 'tag', name: 'tag' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false, className: 'text-center' },
            { data: 'timestamp_issue_day' },
            { data: 'timestamp_due_date' },
            { data: 'timestamp_paid_at' }
        ],
        order: [[2, 'desc']],
        pageLength: 10,
        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: [
            { targets: [13, 14, 15], visible: false, searchable: false },
            { targets: 4, orderData: [13] },
            { targets: 5, orderData: [14] },
            { targets: 6, orderData: [15] }
        ],
        drawCallback: function(settings) {
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        }
    });

    // Filtro de status
    $('#filter-status').on('change', function() {
        var statusValue = this.value;
        
        // Mapear os valores do filtro para os valores do banco de dados
        var statusMapping = {
            'Pendente': 'Pendente',
            'Vencido': 'Vencido', 
            'Pago': 'Pago',
            'Pago Externamente': 'Pago Externamente',
            'Pago com atraso': 'Pago com atraso',
            'Expirado': 'Expirado',
            'Cancelado': 'Cancelado'
        };
        
        var mappedStatus = statusMapping[statusValue] || statusValue;
        table.column(1).search(mappedStatus).draw();
    });

    // Limpar todos os filtros
    $('#clear-filters').on('click', function() {
        $('#filter-status').val('');
        table.search('').columns().search('').draw();
    });

    // Funcionalidade de expandir/recolher linhas
    $('#charges-ajax-table tbody').on('click', '.toggle-row', function (e) {
        e.preventDefault();

        var $btn = $(this);
        var tr = $btn.closest('tr');
        var row = table.row(tr);

        if (row.child.isShown()) {
            // Fechar a linha expandida
            row.child.hide();
            tr.removeClass('shown');
            $btn.find('i').attr('data-lucide', 'plus');
        } else {
            // Fechar todas as outras linhas expandidas
            table.rows().every(function() {
                if (this.child.isShown()) {
                    this.child.hide();
                    $(this.node()).removeClass('shown');
                }
            });
            $('.toggle-row i').attr('data-lucide', 'plus');

            // Abrir a linha atual
            var data = row.data();
            var chargeId = $btn.data('id');
            
            // Buscar dados detalhados da cobrança via AJAX
            $.ajax({
                url: "{{ route('finance.charges.details.ajax') }}",
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: {
                    charge_id: chargeId
                },
                success: function(response) {
                    // Criar estrutura de informações detalhadas da cobrança
                    var expandedContent = createChargeDetailedInfoBox({
                        chargeId: chargeId,
                        detailsUrl: "{{ route('finance.charges.view', ['id' => '__ID__']) }}".replace('__ID__', chargeId),
                        editUrl: "{{ route('finance.charges.edit', ['id' => '__ID__']) }}".replace('__ID__', chargeId),
                        billStage: response.bill_stage,
                    
                        // Novos campos simplificados vindos do backend
                        billUrl: response.bill_url || '',
                        nfsUrl: response.nfs_url || '',
                        nfsStatus: response.nfs_status || '',
                    
                        // Status de notificação (email)
                        mailStage: parseInt(response.mail_stage ?? 0, 10),
                        failedMail: (response.failed_mail === 'Sim')
                    });
                    
                    row.child('<div class="accordion-row" style="padding: 0; width: 100%;">' + expandedContent + '</div>').show();
                    tr.addClass('shown');
                    $btn.find('i').attr('data-lucide', 'minus');
                    
                    // Re-render dos ícones do Lucide
                    lucide.createIcons();
                },
                error: function(xhr, status, error) {
                    var errorContent = createChargeErrorBox();
                    row.child('<div class="accordion-row" style="padding: 0; width: 100%;">' + errorContent + '</div>').show();
                    tr.addClass('shown');
                    $btn.find('i').attr('data-lucide', 'minus');
                    lucide.createIcons();
                }
            });
        }

        // Re-render dos ícones do Lucide
        lucide.createIcons();
    });

    // Função para criar caixa de informações detalhadas da cobrança
    function createChargeDetailedInfoBox(options) {
        var defaults = {
            chargeId: '',
            detailsUrl: '#',
            editUrl: '#',
            billStage: 0,
            billUrl: '',
            nfsUrl: '',
            nfsStatus: '',
            mailStage: 0,
            failedMail: false
        };
        var settings = Object.assign({}, defaults, options);
    
        // Mapeamento simples para status de email
        function getMailStageView(stage) {
            var map = {
                0: { label: 'Ainda não enviado', cls: 'bg-secondary' },
                1: { label: 'Email enviado para o cliente', cls: 'bg-primary' },
                2: { label: 'Email de cobrança próxima do vencimento enviado', cls: 'bg-info' },
                3: { label: 'Email de cobrança vencida enviado', cls: 'bg-danger' }
            };
            return map[stage] || map[0];
        }
    
        // Mapeamento de status Spedy da NFS-e
        function getNfsStatusView(status) {
            if (!status) return null;
    
            var emitidas = ['authorized', 'inContingent', 'received'];
            var canceladas = ['canceled', 'removed', 'disabled'];
    
            if (emitidas.includes(status)) {
                return { label: 'Emitida', cls: 'badge bg-success', note: '' };
            }
            if (canceladas.includes(status)) {
                return { label: 'Cancelada', cls: 'badge bg-secondary', note: '' };
            }
            if (status === 'rejected' || status === 'denied') {
                return { 
                    label: 'NFS-e Rejeitada', 
                    cls: 'badge bg-danger', 
                    note: 'O cron não tentará novamente. Ajuste necessário.' 
                };
            }
            // created / enqueued / outros estados de processamento
            return { 
                label: 'Em processamento', 
                cls: 'badge bg-primary', 
                note: 'Emissão de Nota Fiscal em andamento.' 
            };
        }
    
        var mailView = getMailStageView(parseInt(settings.mailStage || 0, 10));
        var nfsView = getNfsStatusView(settings.nfsStatus);

        // Adicionado: Se o boleto existe, mas a NF ainda não tem status,
        // significa que o sistema está tentando emiti-la.
        if (settings.billUrl && !nfsView) {
            nfsView = {
                label: 'Aguardando Emissão',
                cls: 'badge bg-info',
                note: 'A emissão da NFS-e está na fila e será processada em breve.'
            };
        }

        // Bloco de Links (apenas se existir)
        var linksHtml = `
            <div class="mb-2">
                ${settings.billUrl ? `
                    <div class="d-flex flex-wrap gap-1 align-items-center">Boleto: <a href="${settings.billUrl}" target="_blank">${settings.billUrl}</a></div>` : ``}
                ${settings.nfsUrl ? `
                    <div class="d-flex mt-2 flex-wrap gap-1 align-items-center">NFS-e: <a href="${settings.nfsUrl}" target="_blank">${settings.nfsUrl}</a></div>` : ``}
                ${(!settings.billUrl && !settings.nfsUrl) ? `
                    <span class="text-muted"><i data-lucide="link-2" class="me-1"></i>Pendente gerar boleto e NFS-e.</span>` : ``}
            </div>
        `;
    
        // Bloco de Status de Notificação (email)
        var mailStatusHtml = `
            <div class="mb-2">
                <strong>Status de Notificação:</strong>
                <span class="ms-2 badge ${mailView.cls}">${mailView.label}</span>
            </div>
            ${settings.failedMail ? `
                <div class="alert alert-danger py-2 mb-2">
                    <i data-lucide="alert-triangle" class="me-2"></i>
                    <small>Houve falha no disparo do email.</small>
                </div>
            ` : ``}
        `;
    
        // Pequeno indicador do status da NFS-e para orientar o usuário sobre o retry
        var nfsStatusHtml = nfsView ? `
            <div class="mt-2">
                <strong>Status da NFS-e:</strong>
                <span class="ms-2 ${nfsView.cls}">${nfsView.label}</span>
                ${nfsView.note ? `<div class="mt-1 text-muted"><small>${nfsView.note}</small></div>` : ``}
            </div>
        ` : ``;
    
        return `
            <div class="charge-detailed-info-box" style="overflow-x: hidden; max-width: 100%;">
                <div class="card border-0 mb-0">
                    <div class="card-header bg-light-subtle border-bottom">
                        <div class="d-flex w-100 justify-content-between align-items-center">
                            <h6 class="card-title mb-0 fw-semibold">
                                <i data-lucide="badge-dollar-sign" class="me-2"></i>
                                Detalhes da Cobrança
                            </h6>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="d-block d-md-none gap-2 mb-3">
                            <a href="${settings.detailsUrl}" class="btn btn-sm btn-outline-secondary">
                                <i data-lucide="eye" class="me-1"></i>Visualizar
                            </a>
                            ${parseInt(settings.billStage, 10) <= 2 ? `
                            <a href="${settings.editUrl}" class="btn btn-sm btn-outline-primary">
                                <i class="ti ti-edit fs-lg me-1"></i>Editar
                            </a>` : ``}
                        </div>
    
                        <div class="row g-3">
                            <div class="col-12">
                                <h6 class="fw-semibold mb-2 text-primary">
                                    <i data-lucide="link-2" class="me-2"></i>Links
                                </h6>
                                ${linksHtml}
                            </div>
                            <div class="col-12">
                                <h6 class="fw-semibold mb-2 text-primary">
                                    <i data-lucide="mail" class="me-2"></i>Status
                                </h6>
                                ${mailStatusHtml}
                                ${nfsStatusHtml}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    // Função para criar caixa de erro
    function createChargeErrorBox() {
        return `
            <div class="charge-detailed-info-box">
                <div class="card border-0 mb-0">
                    <div class="card-header bg-light-subtle border-bottom">
                        <div class="d-flex w-100 justify-content-between align-items-center">
                            <h6 class="card-title mb-0 fw-semibold">
                                <i data-lucide="alert-triangle" class="me-2"></i>
                                Erro
                            </h6>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="text-center text-danger">
                            <i data-lucide="x-circle" class="me-2"></i>
                            Erro ao carregar detalhes da cobrança. Tente novamente.
                        </div>
                    </div>
                </div>
            </div>
        `;
    }
});
</script>
@endpush