@extends('template_pages.session')

@section('page_title', 'Detalhes do Projeto #' . (isset($projectData) ? $projectData['id'] : request()->route('id')))
@section('page_icon', 'folder-kanban')

@php
    $module = request()->segment(1);
@endphp

@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">
                                {{ isset($projectData) ? $projectData['name'] : 'Carregando...' }}
                            </h3>
                        </div>
                        <div class="ms-auto">
                            <a href="{{ route('projects.editview', ['module' => $module, 'id' => isset($projectData) ? $projectData['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> <!-- 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 Projeto</h5>
                        </div>
                        <div class="p-3 border-bottom border-dashed">
                            <div class="mb-2">
                                <small class="text-muted">Status</small>
                                <div>
                                    @if(isset($projectData) && $projectData['status'])
                                        <span class="badge text-bg-success fs-xxs">Ativo</span>
                                    @else
                                        <span class="badge text-bg-danger fs-xxs">Desativado</span>
                                    @endif
                                </div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">Projeto</small>
                                <div>{{ isset($projectData) ? $projectData['name'] : 'Carregando...' }}</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">Cliente Faturável</small>
                                <div>{{ isset($projectData) ? $projectData['finance_client_name'] : 'Carregando...' }}</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">Cliente Institucional</small>
                                <div>{{ isset($projectData) ? $projectData['client_name'] : 'Carregando...' }}</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">CPF/CNPJ</small>
                                <div>{{ isset($projectData) ? $projectData['finance_client_document'] : 'Carregando...' }}</div>
                            </div>
                            @if(isset($projectData) && !empty($projectData['monday_id']))
                                <div>
                                    <small class="text-muted">Projeto Monday</small>
                                    <div>{{ $projectData['monday_id'] }} - {{ $projectData['monday_project_name'] ?? '' }}</div>
                                </div>
                            @endif
                        </div>
                        <div class="p-3 border-bottom border-dashed">
                            @if(isset($projectData['finance_client_contacts']) && $projectData['finance_client_contacts']->isNotEmpty())
                                <div class="mb-2">
                                @foreach($projectData['finance_client_contacts'] as $contact)
                                    @if($contact['is_primary'])
                                    <div class="{{ $loop->last ? 'mb-0' : 'mb-2' }}">
                                        <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="{{ $loop->last ? 'mb-0' : 'mb-2' }}">
                                        <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>
                            @endif
                            <div class="mb-2">
                                <small class="text-muted">Notificação por Email</small>
                                <div>
                                    @if(isset($projectData) && $projectData['send_mail'])
                                        <span class="badge text-bg-success fs-xxs">Ativo</span>
                                    @else
                                        <span class="badge text-bg-danger fs-xxs">Desativado</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="p-3">
                            <div class="mb-2">
                                <small class="text-muted">CEP</small>
                                <div>{{ isset($projectData) ? $projectData['finance_client_zipcode'] : 'Carregando...' }}</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">Endereço</small>
                                <div>
                                    @if(isset($projectData))
                                        {{ $projectData['finance_client_address'] }}
                                    @else
                                        Carregando...
                                    @endif
                                </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 src="{{ asset('assets/scripts/ui-components.js') }}"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Inicializar DataTable (padrão da página Index)
    const table = new DataTable('#billing-history-table', {
        ajax: {
            url: '{{ route('projects.charges.ajax', ['module' => $module, 'id' => 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: 'amount', 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é
            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
    $('#billing-history-search').on('keyup', function() {
        table.search(this.value).draw();
    });

    // Linhas por página
    $('#billing-history-rows').on('change', function() {
        table.page.len(parseInt(this.value, 10)).draw();
    });
});

$("#disable").click(function() {
    showAlert("confirm", {
        title: "Destativar Projeto?",
        text: "Essa ação não pode ser desfeita!"
    }, {
        onConfirm: () => {
            showAlert("successToast", { text: "Projeto removido com sucesso!" });
        },
        onCancel: () => {
            showAlert("canceledToast", { text: "Ação cancelada com sucesso!" });
        }
    });
});
</script>
@endpush