@extends('template_pages.session')

@section('page_title', 'Detalhes do Cliente Faturável #' . $clientData['id'])
@section('page_icon', 'hand-coins')
@section('navbar', 'finance.navbar')

@section('content_page')
<div class="card-body">
    <div class="ibox-content">
        <div class="row">
            <!-- Project Main Details -->
            <div class="col-xl-8">
                <div class="card card-h-100 rounded-start">
                    <div class="card-header align-items-center p-3">
                        <div>
                            <h3 class="mb-0 d-flex fs-xl align-items-center">{{ $clientData['legal_name'] }}</h3>
                        </div>
                        <div class="ms-auto">
                            <a href="{{ route('finance.billing.client.editview', ['id' => $clientData['id']]) }}" class="btn btn-light"><i class="ti ti-pencil me-1"></i> Editar</a>
                        </div>
                    </div>
                    <div class="card-body px-3">
                        <!-- Tabs -->
                        <ul class="nav nav-tabs nav-bordered mb-3" role="tablist">
                            <li class="nav-item active">
                                <a class="nav-link active" data-bs-toggle="tab" href="#billing_history" role="tab">
                                    <i data-lucide="circle-dollar-sign" class="fs-lg me-md-1 align-middle"></i>
                                    <span class="d-none d-md-inline-block align-middle">Histórico de cobranças</span>
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content">                        
                            <div class="tab-pane fade active show" id="billing_history" role="tabpanel">
                                <div class="col-12">
                                    <div data-table data-table-rows-per-page="10" class="card">
                                        <div class="card-header border-light justify-content-between">

                                            <div class="d-flex gap-2">
                                                <div class="app-search">
                                                    <input data-table-search type="search" class="form-control" placeholder="Procurar Cobrança">
                                                    <i data-lucide="search" class="app-search-icon text-muted"></i>
                                                </div>
                                                <button data-table-delete-selected class="btn btn-danger d-none">Delete</button>
                                            </div>

                                            <div class="d-flex gap-1">
                                                <!-- Records Per Page -->
                                                <div>
                                                    <select data-table-set-rows-per-page class="form-select form-control my-1 my-md-0">
                                                        <option value="10">10</option>
                                                        <option value="20">20</option>
                                                        <option value="50">50</option>
                                                        <option value="100">100</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="table-responsive">
                                            <table id="billing-history-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 data-table-sort>Vencimento</th>
                                                        <th data-table-sort>Descrição</th>
                                                        <th data-table-sort>Status</th>
                                                        <th data-table-sort>Valor</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <!-- Os dados serão carregados via AJAX -->
                                                </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>
                                    </div>

                                </div><!-- end col -->
                            </div>
                        </div>
                    </div> <!-- end card-body -->
                </div> <!-- end card -->
            </div> <!-- end col-xl-8 -->

            <!-- Team Sidebar -->
            <div class="col-xl-4">
                <div class="card">
                    <div class="card-body p-0">
                        <div class="p-3 border-bottom border-dashed">
                            <h5 class="mb-0">Informações do Cliente Faturável</h5>
                        </div>
                        <div class="p-3 border-bottom border-dashed">
                            <div class="mb-2">
                                <small class="text-muted">Status</small>
                                <div>
                                    @if($clientData['status'])
                                        <span class="badge badge-label text-bg-success fs-xxs">Ativo</span>
                                    @else
                                        <span class="badge badge-label text-bg-danger fs-xxs">Desativado</span>
                                    @endif
                                </div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">Cliente Faturável</small>
                                <div>{{ $clientData['legal_name'] }}</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">Cliente Institucional</small>
                                <div>{{ $clientData['coreClient']->name ?? 'Não informado' }}</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">CPF/CNPJ</small>
                                <div>{{ $clientData['document_number'] }}</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">Vencimento Preferencial</small>
                                <div>{{ $clientData['preferential_due_date'] ? 'Dia ' . $clientData['preferential_due_date'] : 'Não Informado' }}</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">Vencimento apenas em dias úteis</small>
                                <div>
                                    @if($clientData['due_on_working_days_only'])
                                        <span class="badge badge-label text-bg-success fs-xxs">Ativo</span>
                                    @else
                                        <span class="badge badge-label text-bg-light fs-xxs">Desativado</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="p-3 border-bottom border-dashed">
                            @if($clientData['contacts']->isNotEmpty())
                                <div class="mb-2">
                                @foreach($clientData['contacts'] as $contact)
                                    @if($contact['is_primary'])
                                    <div class="@if($loop->last) mb-0 @else mb-2 @endif">
                                        <small class="text-muted">Contato Principal</small>
                                        <div class="contact_add"><small class="text-muted"><b>Nome:</b></small> {{ $contact['name'] }}</div>
                                        <div class="contact_add"><small class="text-muted"><b>Email:</b></small> {{ $contact['email'] }}</div>
                                        @if(!empty($contact['phone']))
                                        <div class="contact_add"><small class="text-muted"><b>Telefone:</b></small> {{ $contact['phone'] }}</div>
                                        @endif
                                    </div>
                                    @else
                                    <div class="@if($loop->last) mb-0 @else mb-2 @endif">
                                        <small class="text-muted">Contato Adicional</small>
                                        <div class="contact_add"><small class="text-muted"><b>Nome:</b></small> {{ $contact['name'] }}</div>
                                        <div class="contact_add"><small class="text-muted"><b>Email:</b></small> {{ $contact['email'] }}</div>
                                        @if(!empty($contact['phone']))
                                        <div class="contact_add"><small class="text-muted"><b>Telefone:</b></small> {{ $contact['phone'] }}</div>
                                        @endif
                                    </div>
                                    @endif
                                @endforeach
                                </div>
                            @else
                                <div class="mb-2">
                                    <small class="text-muted">Contato</small>
                                    <div>Não informado</div>
                                </div>
                            @endif
                        </div>
                        <div class="p-3">
                            <div class="mb-2">
                                <small class="text-muted">CEP</small>
                                <div>{{ $clientData['zipcode'] ?? 'Não informado' }}</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">Endereço</small>
                                <div>
                                    @php
                                        $address = collect([
                                            $clientData['street_type'],
                                            $clientData['street_name'],
                                            $clientData['number'] ? '- ' . $clientData['number'] : null,
                                            $clientData['complement'] ? '- ' . $clientData['complement'] : null,
                                            $clientData['neighborhood'] ? '- ' . $clientData['neighborhood'] : null,
                                            $clientData['city'] ? '- ' . $clientData['city'] : null,
                                            $clientData['state'] ? '- ' . $clientData['state'] : null
                                        ])->filter()->implode(' ');
                                    @endphp
                                    {{ $address ?: 'Não informado' }}
                                </div>
                            </div>
                        </div>
                    </div> <!-- end card-body -->
                </div> <!-- end card -->
            </div> <!-- end col-xl-4 -->
        </div>       
    </div> <!-- end row -->
</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() {
    // Carregar histórico de cobranças via AJAX
    loadBillingHistory();
});

function loadBillingHistory() {
    $.ajax({
        url: '{{ route('finance.billing.client.charges.ajax', ['id' => $clientData['id']]) }}',
        type: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        beforeSend: function() {
            // Mostrar loading
            const tbody = $('#billing-history-table tbody');
            tbody.html(`
                <tr>
                    <td colspan="4" class="text-center">
                        <div class="spinner-border spinner-border-sm" role="status">
                            <span class="visually-hidden">Carregando...</span>
                        </div>
                        Carregando histórico...
                    </td>
                </tr>
            `);
        },
        success: function(response) {
            if (response.success) {
                populateBillingTable(response.data);
            } else {
                console.error('Erro ao carregar histórico:', response.message);
                showErrorInTable(response.message || "Erro ao carregar histórico de cobranças");
                if (typeof showAlert === 'function') {
                    showAlert("error", { text: "Erro ao carregar histórico de cobranças" });
                }
            }
        },
        error: function(xhr, status, error) {
            console.error('Erro na requisição AJAX:', {
                status: xhr.status,
                statusText: xhr.statusText,
                responseText: xhr.responseText,
                error: error
            });
            
            let errorMessage = "Erro ao carregar histórico de cobranças";
            if (xhr.status === 404) {
                errorMessage = "Cliente não encontrado";
            } else if (xhr.status === 500) {
                errorMessage = "Erro interno do servidor";
            }
            
            showErrorInTable(errorMessage);
            if (typeof showAlert === 'function') {
                showAlert("error", { text: errorMessage });
            }
        }
    });
}

function populateBillingTable(data) {
    const tbody = $('#billing-history-table tbody');
    tbody.empty();
    
    if (data && data.length > 0) {
        data.forEach(function(item) {
            const row = `
                <tr>
                    <td>${item.due_date || '-'}</td>
                    <td><a href="#" title="${item.description || ''}">${item.description || '-'}</a></td>
                    <td>${item.status || '-'}</td>
                    <td>${item.amount || '-'}</td>
                </tr>
            `;
            tbody.append(row);
        });
    } else {
        tbody.append(`
            <tr>
                <td colspan="4" class="text-center text-muted">Nenhuma cobrança encontrada</td>
            </tr>
        `);
    }
}

function showErrorInTable(message) {
    const tbody = $('#billing-history-table tbody');
    tbody.html(`
        <tr>
            <td colspan="4" class="text-center text-danger">
                <i class="ti ti-alert-circle me-1"></i>
                ${message}
            </td>
        </tr>
    `);
}
</script>
@endpush