@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 - Processos de Cobrança')

@section('content_header')
    <h1>Processos de Cobrança</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-3">
                    <div class="form-group">
                        <label>Status:</label>
                        <select id="filtroStatus" class="form-control">
                            <option value="">Todos</option>
                            <option value="Aberta">Aberta</option>
                            <option value="Em Negociação">Em Negociação</option>
                            <option value="Acordo Fechado">Acordo Fechado</option>
                            <option value="Quitada">Quitada</option>
                            <option value="Cancelada">Cancelada</option>
                            <option value="Incobrável">Incobrável</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Buscar (Nome/CNPJ):</label>
                        <input type="text" id="filtroBusca" class="form-control" placeholder="Nome ou CNPJ">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <label>Valor Mínimo:</label>
                        <input type="number" id="filtroValorMin" class="form-control" step="0.01" placeholder="0.00">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <label>Valor Máximo:</label>
                        <input type="number" id="filtroValorMax" class="form-control" step="0.01" placeholder="0.00">
                    </div>
                </div>
                <div class="col-md-2">
                    <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>
                            <button type="button" class="btn btn-secondary btn-block" onclick="limparFiltros()">
                                <i class="fas fa-eraser"></i> Limpar
                            </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>ID</th>
                            <th>Empresa</th>
                            <th>CNPJ</th>
                            <th>Status</th>
                            <th>Valor Total</th>
                            <th>Data Início</th>
                            <th>Qtd. Faturas</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 = {
            status: $('#filtroStatus').val(),
            busca: $('#filtroBusca').val(),
            valor_minimo: $('#filtroValorMin').val(),
            valor_maximo: $('#filtroValorMax').val()
        };

        // Mostra animação de carregamento
        mostrarLoading(true);

        $.ajax({
            url: '/sigo-laravel/public/api/v1/financeiro/cobranca/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() {
                // Esconde animação de carregamento
                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 statusClass = getStatusClass(processo.prc_status);
            const valorFormatado = formatarMoeda(processo.prc_valor_total);
            const dataFormatada = formatarData(processo.prc_data_inicio);

            const row = `
                <tr>
                    <td>${processo.prc_id}</td>
                    <td>
                        ${processo.plano?.pla_nome || processo.plano?.pla_razsoc || '-'}
                        <small class="text-muted">(${processo.plano?.pla_codigo || processo.prc_pla_codigo || '-'})</small>
                    </td>
                    <td>${formatarCNPJ(processo.plano?.pla_cgc) || '-'}</td>
                    <td><span class="badge badge-${statusClass}">${processo.prc_status}</span></td>
                    <td class="text-right">${valorFormatado}</td>
                    <td>${dataFormatada}</td>
                    <td class="text-center">${processo.faturas?.length || 0}</td>
                    <td class="text-center">
                        <a href="{{ route('financeiro.cobranca.show', '') }}/${processo.prc_id}" 
                           class="btn btn-sm btn-info" title="Ver Detalhes">
                            <i class="fas fa-eye"></i>
                        </a>
                    </td>
                </tr>
            `;
            tbody.append(row);
        });
    }

    function getStatusClass(status) {
        const classes = {
            'Aberta': 'warning',
            'Em Negociação': 'info',
            'Acordo Fechado': 'primary',
            'Quitada': 'success',
            'Cancelada': 'secondary',
            'Incobrável': 'danger'
        };
        return classes[status] || 'secondary';
    }

    function formatarMoeda(valor) {
        return new Intl.NumberFormat('pt-BR', {
            style: 'currency',
            currency: 'BRL'
        }).format(valor || 0);
    }

    function formatarData(data) {
        if (!data) return '-';
        const date = new Date(data);
        return date.toLocaleDateString('pt-BR');
    }

    function formatarCNPJ(cnpj) {
        if (!cnpj) return '-';
        return cnpj.replace(/^(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})$/, '$1.$2.$3/$4-$5');
    }

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