@extends('adminlte::page')

{{-- Desabilita DataTables e Buttons (não usamos nesta tela; evita erro "Cannot read properties of undefined (reading 'ext')") --}}
@section('plugins.Datatables', false)
@section('plugins.DatatablesPlugins', false)
{{-- Habilita Toastr para notificações --}}
@section('plugins.Toastr', true)

@section('title', 'Sigo 2.0 - Retenção de Clientes (Cobrança PF)')

@section('content_header')
    <h1>Retenção de Clientes (Cobrança Pessoa Física)</h1>
@stop

@section('content')
<div class="container-fluid">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Filtros de Busca</h3>
        </div>
        <div class="card-body">
            <form id="formFiltros" class="row">
                <div class="col-md-2">
                    <div class="form-group">
                        <label>Situação:</label>
                        <select id="filtroSituacao" class="form-control">
                            <option value="">Todas</option>
                            <option value="P">Pendente</option>
                            <option value="F">Finalizado</option>
                            <option value="C">Cancelado</option>
                            <option value="A">Aguardando contato</option>
                            <option value="B">Aguardando baixa de pagamento</option>
                            <option value="N">Negociando</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Nome:</label>
                        <input type="text" id="filtroNome" class="form-control" placeholder="Nome do titular">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <label>Data Início:</label>
                        <input type="date" id="filtroDataInicio" class="form-control">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <label>Data Fim:</label>
                        <input type="date" id="filtroDataFim" class="form-control">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <label>Qtd. Parcelas:</label>
                        <input type="number" id="filtroQtdParcelas" class="form-control" placeholder="Ex: 3">
                    </div>
                </div>
                <div class="col-md-1">
                    <div class="form-group">
                        <label>&nbsp;</label>
                        <div>
                            <button type="button" id="btnBuscar" class="btn btn-primary btn-block" onclick="buscarProcessos()">
                                <i class="fas fa-search"></i> <span class="btn-text">Buscar</span>
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Lista de Processos</h3>
        </div>
        <div class="card-body position-relative">
            <div id="loadingOverlay" class="d-none" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.8); z-index: 10; display: flex; align-items: center; justify-content: center;">
                <div class="text-center">
                    <i class="fas fa-spinner fa-spin fa-3x text-primary"></i>
                    <p class="mt-2 text-muted">Buscando processos...</p>
                </div>
            </div>
            <div class="table-responsive">
                <table id="tabelaProcessos" class="table table-bordered table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Código</th>
                            <th>Plano</th>
                            <th>Nome Titular</th>
                            <th>Início</th>
                            <th>Operador</th>
                            <th>Situação</th>
                            <th>Ligações</th>
                            <th>Ações</th>
                        </tr>
                    </thead>
                    <tbody id="tbodyProcessos">
                        <tr>
                            <td colspan="8" class="text-center">
                                <i class="fas fa-spinner fa-spin"></i> Carregando...
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@stop

@section('js')
<script>
    $(document).ready(function() {
        buscarProcessos();
    });

    function buscarProcessos() {
        const filtros = {
            nome: $('#filtroNome').val(),
            situacao: $('#filtroSituacao').val(),
            data_inicio: $('#filtroDataInicio').val(),
            data_fim: $('#filtroDataFim').val(),
            qtd_parcelas: $('#filtroQtdParcelas').val()
        };

        mostrarLoading(true);

        $.ajax({
            url: '/sigo-laravel/public/api/v1/financeiro/cobrancapf/processos',
            method: 'GET',
            data: filtros,
            headers: {
                'Authorization': 'Bearer ' + (localStorage.getItem('token') || ''),
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            success: function(response) {
                if (response.success) {
                    preencherTabela(response.data);
                } else {
                    var msg = 'Erro ao buscar processos: ' + (response.message || '');
                    if (typeof toastr !== 'undefined') {
                        toastr.error(msg);
                    } else {
                        alert(msg);
                    }
                }
            },
            error: function(xhr) {
                var msg = 'Erro ao buscar processos. Tente novamente.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    msg = xhr.responseJSON.message;
                }
                if (typeof toastr !== 'undefined') {
                    toastr.error(msg);
                } else {
                    alert(msg);
                }
                console.error(xhr);
            },
            complete: function() {
                mostrarLoading(false);
            }
        });
    }

    function mostrarLoading(mostrar) {
        const overlay = $('#loadingOverlay');
        const btnBuscar = $('#btnBuscar');
        const btnText = btnBuscar.find('.btn-text');
        const btnIcon = btnBuscar.find('i');

        if (mostrar) {
            overlay.removeClass('d-none');
            btnBuscar.prop('disabled', true);
            btnIcon.removeClass('fa-search').addClass('fa-spinner fa-spin');
            btnText.text('Buscando...');
        } else {
            overlay.addClass('d-none');
            btnBuscar.prop('disabled', false);
            btnIcon.removeClass('fa-spinner fa-spin').addClass('fa-search');
            btnText.text('Buscar');
        }
    }

    function preencherTabela(processos) {
        const tbody = $('#tbodyProcessos');
        tbody.empty();

        if (processos.length === 0) {
            tbody.append('<tr><td colspan="8" class="text-center">Nenhum processo encontrado</td></tr>');
            return;
        }

        processos.forEach(function(processo) {
            const situacaoClass = getSituacaoClass(processo.situacao);
            const titulosVencidos = processo.titulos_vencidos || 0;
            let situacaoTexto = processo.situacao;
            
            if (titulosVencidos > 0 && processo.pco_situacao !== 'C') {
                situacaoTexto = 'Parcelas Vencidas';
            }

            const row = `
                <tr>
                    <td>${processo.codigo}</td>
                    <td>${processo.plano || '-'}</td>
                    <td>${processo.nome_titular || '-'}</td>
                    <td>${processo.inicio || '-'}</td>
                    <td>${processo.operador || 'Disponível'}</td>
                    <td><span class="badge badge-${situacaoClass}">${situacaoTexto}</span></td>
                    <td class="text-center">${processo.qtd_ligs || 0}</td>
                    <td class="text-center">
                        <a href="{{ route('financeiro.cobrancapf.show', '') }}/${processo.codigo}" 
                           class="btn btn-sm btn-info" title="Ver Detalhes">
                            <i class="fas fa-eye"></i>
                        </a>
                    </td>
                </tr>
            `;
            tbody.append(row);
        });
    }

    function getSituacaoClass(situacao) {
        const classes = {
            'Pendente': 'warning',
            'Finalizado': 'success',
            'Cancelado': 'secondary',
            'Aguardando contato': 'info',
            'Aguardando baixa de pagamento': 'primary',
            'Negociando': 'info',
            'Parcelas Vencidas': 'danger'
        };
        return classes[situacao] || 'secondary';
    }

    function limparFiltros() {
        $('#formFiltros')[0].reset();
        buscarProcessos();
    }
</script>
@stop