@extends('template_pages.session')

@section('page_title', 'Detalhes da Recorrência #' . request()->route('id'))
@section('page_icon', 'calendar-check')
@section('navbar', 'finance.navbar')

@section('content_page')
<div class="card-body">
    <div class="ibox-content">
        <div class="row">
            <!-- Recurrence 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">{{ isset($recurrenceData) ? $recurrenceData['project_name'] : 'Carregando...' }}</h3>
                        </div>
                        <div class="ms-auto">
                            <a href="{{ route('finance.recurrence.edit', ['id' => request()->route('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 class="card">
                                        <div class="card-body">
                                            <table id="billing-history-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 data-table-sort>Vencimento</th>
                                                        <th data-table-sort>Descrição</th>
                                                        <th data-table-sort>Status</th>
                                                        <th data-table-sort>Valor</th>
                                                        <th></th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div><!-- end col -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recurrence Information Sidebar -->
            <div class="col-xl-4">
                <div class="card card-h-100 rounded-end">
                    <div class="card-body p-0">
                        <div class="p-3 border-bottom border-dashed">
                            <h5 class="mb-0">Informações da Recorrência</h5>
                        </div>
                        <div class="p-3 border-bottom border-dashed">
                            <div class="mb-2">
                                <small class="text-muted">Status</small>
                                <div>
                                    @if(isset($recurrenceData) && $recurrenceData['active'])
                                        <span class="badge text-bg-success fs-xxs">Ativo</span>
                                    @else
                                        <span class="badge text-bg-danger fs-xxs">Inativo</span>
                                    @endif
                                </div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">Projeto</small>
                                <div>{{ isset($recurrenceData) ? $recurrenceData['project_name'] : 'Carregando...' }}</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">Cliente Faturável</small>
                                <div>{{ isset($recurrenceData) ? $recurrenceData['finance_client_name'] : 'Carregando...' }}</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">Valor</small>
                                <div>{{ isset($recurrenceData) ? $recurrenceData['value'] : 'Carregando...' }}</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">Dia de Emissão</small>
                                <div>{{ isset($recurrenceData) ? $recurrenceData['issue_day'] : 'Carregando...' }}</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">Data de Vencimento</small>
                                <div>{{ isset($recurrenceData) ? $recurrenceData['due_date'] : 'Carregando...' }}</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">Ciclo</small>
                                <div>{{ isset($recurrenceData) ? ($recurrenceData['cycle'] == 0 ? 'Infinito' : $recurrenceData['cycle']) : 'Carregando...' }}</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">Ciclos Passados</small>
                                <div>{{ isset($recurrenceData) ? $recurrenceData['past_cycle'] : 'Carregando...' }}</div>
                            </div>
                        </div>
                        <div class="p-3">
                            <div class="mb-2">
                                <small class="text-muted">Data de Criação</small>
                                <div>{{ isset($recurrenceData) ? $recurrenceData['created_at'] : 'Carregando...' }}</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">Última Atualização</small>
                                <div>{{ isset($recurrenceData) ? $recurrenceData['updated_at'] : 'Carregando...' }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </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 src="{{ asset('assets/scripts/ui-components.js') }}"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const table = new DataTable('#billing-history-table', {
        ajax: {
            url: '{{ route('finance.recurrence.charges.ajax', request()->route('id')) }}',
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            dataSrc: 'data'
        },
        processing: true,
        serverSide: false,
        responsive: true,
        pageLength: 10,
        lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
        order: [[0, 'desc']],
        columns: [
            { data: 'due_date', defaultContent: '-' },
            {
                data: 'description',
                defaultContent: '-',
                render: function(data, type, row, meta) {
                    if (!data) return '-';
                    if (type === 'display') return data; // mantém o HTML da âncora
                    // para ordenação/filtragem, remover tags HTML
                    var tmp = document.createElement('div');
                    tmp.innerHTML = data;
                    return tmp.textContent || tmp.innerText || '';
                }
            },
            { data: 'status', defaultContent: '-' },
            { data: 'value', defaultContent: '-' },
            { data: 'timestamp_due_date' }
        ],
        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: [4], visible: false, searchable: false },
            { targets: 0, orderData: [4] }
        ],
        drawCallback: function(settings) {
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }

            // Atualiza texto de info e move a paginação para o rodapé (se existir)
            const info = table.page.info();
            const infoEl = document.getElementById('billing-history-info');
            const pagEl = document.getElementById('billing-history-pagination');

            if (infoEl) {
                infoEl.textContent = `Mostrando ${info.start + 1} a ${info.end} de ${info.recordsTotal}`;
            }
            if (pagEl) {
                const dtContainer = table.table().container();
                const dtPaginate = dtContainer.querySelector('.dataTables_paginate');
                if (dtPaginate) {
                    pagEl.innerHTML = '';
                    pagEl.appendChild(dtPaginate);
                }
            }
        }
    });

    // Busca global e linhas por página (se os elementos existirem no layout)
    $('#billing-history-search').on('keyup', function() {
        table.search(this.value).draw();
    });

    $('#billing-history-rows').on('change', function() {
        table.page.len(parseInt(this.value, 10)).draw();
    });
});
</script>
@endpush

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