@extends('template_pages.session')

@section('page_title', 'Detalhes do Resumo de Cobranças #' . request()->route('id'))
@section('page_icon', 'folder-closed')
@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 rounded-start">
                    <div class="card-header align-items-center p-3">
                        <div>
                            <h3 class="mb-0 d-flex fs-xl align-items-center">{{ $billing_summary->title }}</h3>
                        </div>
                        <div class="ms-auto">
                            <a href="{{ route('finance.billing_summary.edit', ['id' => $billing_summary->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>
                            <li class="nav-item">
                                <a class="nav-link" data-bs-toggle="tab" href="#projects" role="tab">
                                    <i data-lucide="folder-kanban" class="fs-lg me-md-1 align-middle"></i>
                                    <span class="d-none d-md-inline-block align-middle">Projetos associados</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 Projeto">
                                                    <i data-lucide="search" class="app-search-icon text-muted"></i>
                                                </div>
                                            </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 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>ID</th>
                                                        <th data-table-sort>Código do Resumo</th>
                                                        <th data-table-sort>Data Emissão</th>
                                                        <th data-table-sort>Nº De Cobranças</th>
                                                        <th data-table-sort>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($bills as $bill)
                                                        <tr>
                                                            <td>{{ $bill->id }}</td>
                                                            <td><a href="{{ route('finance.billing_summary.bills_summary', ['id' => $bill->id]) }}">{{ $bill->cod }}</a></td>
                                                            <td><span class="d-none" data-sort="created_ts">{{ optional($bill->created_at)->getTimestamp() }}</span>{{ optional($bill->created_at)->format('d/m/Y') }}</td>
                                                            <td>{{ is_array($bill->id_payments) ? count($bill->id_payments) : 0 }}</td>
                                                            <td>
                                                                {!! \App\Helpers\FormatHelper::getStatusBadge($bill->stage) ?? '—' !!}
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </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>
                            <!-- PROJETOS -->
                            <div class="tab-pane fade" id="projects" 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>
                                            </div>
                                        </div>

                                        <div class="table-responsive">
                                            <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>ID</th>
                                                        <th data-table-sort>Projetos</th>
                                                        <th data-table-sort>Cliente Institucional</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($projects as $project)
                                                        <tr>
                                                            <td>{{ $project->id }}</td>
                                                            <td><a href="{{ route('projects.detailsview', ['module' => $module, 'id' => $project->id]) }}">{{ $project->name }}</a></td>
                                                            <td>{{ $project->financeClient && $project->financeClient->coreClient ? $project->financeClient->coreClient->name : '—' }}</td>
                                                        </tr>
                                                    @endforeach
                                                </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>
                            </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 Resumo de Cobrança</h5>
                        </div>
                        <div class="p-3 border-bottom border-dashed">
                            <div class="mb-2">
                                <small class="text-muted">Status</small>
                                <div>
                                    @if($billing_summary->active)
                                        <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">Nome do Resumo</small>
                                <div>{{ $billing_summary->title }}</div>
                            </div>
                        </div>
                        <div class="p-3 border-bottom border-dashed">
                            <div class="mb-2">
                                <small class="text-muted">Contato Principal</small>
                                <div class="contact_add"><small class="text-muted"><b>Nome:</b></small> {{ $billing_summary->contact_name }}</div>
                                <div class="contact_add"><small class="text-muted"><b>Email:</b></small> {{ $billing_summary->main_email }}</div>
                                @if(!empty($billing_summary->main_phone))
                                <div class="contact_add"><small class="text-muted"><b>Telefone:</b></small> {{ $billing_summary->main_phone }}</div>
                                @endif
                            </div>
                            @if(is_array($billing_summary->additional_contact) && count($billing_summary->additional_contact))
                            @foreach($billing_summary->additional_contact as $contact)
                            <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['contact_name'] ?? '—' }}</div>
                                <div class="contact_add"><small class="text-muted"><b>Email:</b></small> {{ $contact['contact_email'] ?? '—' }}</div>
                                @if(!empty($contact['contact_phone']))
                                <div class="contact_add"><small class="text-muted"><b>Telefone:</b></small> {{ $contact['contact_phone'] }}</div>
                                @endif
                            </div>
                            @endforeach
                            @endif
                        </div>
                        <div class="p-3">
                            <a type="button" class="btn btn-warning" href="{{ route('finance.billing_summary.sync', ['id' => $billing_summary->id]) }}">
                                <i data-lucide="download" class="align-middle me-1 fs-xl"></i> Sincronizar Cobranças
                            </a>
                        </div>
                    </div> <!-- end card-body -->
                </div> <!-- end card -->
            </div> <!-- end col-xl-4 -->
        </div>       
    </div> <!-- end row -->
</div>
@endsection

@push('scripts')
<!-- Custom table -->
<script src="{{ asset('assets/inspinia/js/pages/custom-table.js') }}"></script>
<script>
$("#disable").click(function() {
    showAlert("confirm", {
        title: "Destativar Resumo de Cobrança?",
        text: "Essa ação não pode ser desfeita!"
    }, {
        onConfirm: () => {
            showAlert("successToast", { text: "Resumo de Cobrança com sucesso!" });
        },
        onCancel: () => {
            showAlert("canceledToast", { text: "Ação cancelada com sucesso!" });
        }
    });
});
</script>
@endpush