@extends('Layout.LayoutBaseCliente')


@section('Conteudo')
<div class="main-content">

    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
                        <h4 class="mb-sm-0">CONDOMÍNIO PLANALTO DO KINU</h4>

                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="javascript: void(0);">Dashboards</a></li>
                                <li class="breadcrumb-item active">Minhas contas</li>
                            </ol>
                        </div>

                    </div>
                </div>
            </div>
            <!-- end page title -->

            <div class="row project-wrapper">
                <div class="col-xxl-12">
                    <div class="row">
                        <div class="col-xl-4">
                            <div class="card card-animate">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar-sm flex-shrink-0">
                                            <span class="avatar-title bg-danger-subtle text-primary rounded-2 fs-2">
                                                <i data-feather="dollar-sign" class="text-danger"></i>
                                            </span>
                                        </div>
                                        <div class="flex-grow-1 overflow-hidden ms-3">
                                            <p class="text-uppercase fw-medium text-muted text-truncate mb-3">Dívidas</p>
                                            <div class="d-flex align-items-center mb-3">
                                                <h4 class="fs-4 flex-grow-1 mb-0"><span class="counter-value" data-target="825">0</span></h4>
                                                <span class="badge bg-danger-subtle text-danger fs-12"><i class="ri-arrow-down-s-line fs-13 align-middle me-1"></i>5.02 %</span>
                                            </div>
                                            <p class="text-muted text-truncate mb-0">últimos meses</p>
                                        </div>
                                    </div>
                                </div><!-- end card body -->
                            </div>
                        </div><!-- end col -->

                        <div class="col-xl-4">
                            <div class="card card-animate">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar-sm flex-shrink-0">
                                            <span class="avatar-title bg-success-subtle text-success rounded-2 fs-2">
                                                <i data-feather="dollar-sign" class="text-success"></i>
                                            </span>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <p class="text-uppercase fw-medium text-muted mb-3">Pagamentos Validados</p>
                                            <div class="d-flex align-items-center mb-3">
                                                <h4 class="fs-4 flex-grow-1 mb-0"><span class="counter-value" data-target="7522">0</span></h4>
                                                <span class="badge bg-success-subtle text-success fs-12"><i class="ri-arrow-up-s-line fs-13 align-middle me-1"></i>3.58 %</span>
                                            </div>
                                            <p class="text-muted mb-0">últimos meses</p>
                                        </div>
                                    </div>
                                </div><!-- end card body -->
                            </div>
                        </div><!-- end col -->

                        <div class="col-xl-4">
                            <div class="card card-animate">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar-sm flex-shrink-0">
                                            <span class="avatar-title bg-info-subtle text-info rounded-2 fs-2">
                                                <i data-feather="message-square" class="text-info"></i>
                                            </span>
                                        </div>
                                        <div class="flex-grow-1 overflow-hidden ms-3">
                                            <p class="text-uppercase fw-medium text-muted text-truncate mb-3">Notificações e Aviso</p>
                                            <div class="d-flex align-items-center mb-3">
                                                <h4 class="fs-4 flex-grow-1 mb-0"><span class="counter-value" data-target="168">0</span></h4>
                                                <span class="badge bg-info-subtle text-info fs-12"><i class="ri-arrow-down-s-line fs-13 align-middle me-1"></i>10.35 %</span>
                                            </div>
                                            <p class="text-muted text-truncate mb-0">últimos meses</p>
                                        </div>
                                    </div>
                                </div><!-- end card body -->
                            </div>
                        </div><!-- end col -->
                    </div><!-- end row -->

                    
                </div><!-- end col -->

                
            </div><!-- end row -->





            <div class="card-body">

                
                <div class="live-preview">

                    <div>
                        
                        @include("Clientes.Componentes.PagamentoTaxa")
                       
                    </div>

                </div>


<!-- MINHAS COBRANÇAS -->
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header bg-danger">
                                <h5 class="card-title mb-0 text-white">Minhas Cobranças</h5>
                            </div>
                            <div class="card-body">
                                <table id="scroll-horizontal" class="table nowrap align-middle" style="width:100%">
                                    <thead>
                                        <tr>
                                            
                                            <th>Descrição</th>
                                            <th>Vencimento</th>
                                            <th>Valor</th>
                                            <th>Status</th>
                                            <th>Acção</th>
                                            
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            
                                            <td>Taxa 01/2025</td>
                                            <td>10/01/2025</td>
                                            <td>AOA 20.000</td>
                                            <td><span class="badge bg-danger">Atrasado</span></td>
                                            <td>
                                                <button type="button" class="btn btn-primary btn-label"  data-bs-toggle="modal" data-bs-target=".exampleModalFullscreen"><i class="ri-check-double-line label-icon align-middle fs-16 me-2"></i>Pagar</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            
                                            <td>Taxa 02/2025</td>
                                            <td>10/02/2025</td>
                                            <td>AOA 20.000</td>
                                            <td><span class="badge bg-success">Pendente</span></td>
                                            <td>
                                                <button type="button" class="btn btn-primary btn-label"  data-bs-toggle="modal" data-bs-target=".exampleModalFullscreen"><i class="ri-check-double-line label-icon align-middle fs-16 me-2"></i>Pagar</button>
                                            </td>
                                        </tr>
                                        
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div><!--end col-->
                </div><!--end row-->

<!-- historico de pagamentos-->

<div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header bg-success">
                                <h5 class="card-title mb-0 text-white">Histórico de Pagamentos</h5>
                            </div>
                            <div class="card-body">
                                <table id="example" class="table table-bordered dt-responsive nowrap table-striped align-middle" style="width:100%">
                                    <thead>
                                        <tr>
                                            
                                            <th>Descrição</th>
                                            <th>Data de Pagamento</th>
                                            <th>Valor</th>
                                            <th>Forma</th>
                                            <th>Comprovativo</th>
                                            <th>Recibo</th>
                                            
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            
                                            <td>Taxa 01/2025</td>
                                            <td>10/01/2025</td>
                                            <td>AOA 20.000</td>
                                            <td><span class="badge badge-label bg-success"><i class="mdi mdi-circle-medium"></i> TPA</span></span></td>
                                            <td>
                                                <!-- Buttons Group -->
                                                <button type="button" class="btn btn-success waves-effect waves-light"  data-bs-toggle="tooltip" data-bs-placement="top" title="Visualizar"><i class="  ri-eye-line"></i></button>
                                                <button type="button" class="btn btn-info waves-effect waves-light"  data-bs-toggle="tooltip" data-bs-placement="top" title="Baixar"><i class=" ri-inbox-archive-line"></i></button>
                                                
                                            </td>
                                            <td>
                                                <!-- Buttons Group -->
                                                <button type="button" class="btn btn-success waves-effect waves-light"  data-bs-toggle="tooltip" data-bs-placement="top" title="Visualizar"><i class="  ri-eye-line"></i></button>
                                                <button type="button" class="btn btn-info waves-effect waves-light"  data-bs-toggle="tooltip" data-bs-placement="top" title="Baixar"><i class=" ri-inbox-archive-line"></i></button>
                                                
                                            </td>
                                        </tr>
                                        <tr>
                                            
                                            <td>Taxa 02/2025</td>
                                            <td>10/02/2025</td>
                                            <td>AOA 20.000</td>
                                            <td><span class="badge badge-label bg-primary"><i class="mdi mdi-circle-medium"></i> Transferência</span></td>
                                            <td>
                                                <!-- Buttons Group -->
                                                <button type="button" class="btn btn-success waves-effect waves-light"  data-bs-toggle="tooltip" data-bs-placement="top" title="Visualizar"><i class="  ri-eye-line"></i></button>
                                                <button type="button" class="btn btn-info waves-effect waves-light"  data-bs-toggle="tooltip" data-bs-placement="top" title="Baixar"><i class=" ri-inbox-archive-line"></i></button>
                                                
                                            </td>
                                            <td>
                                                <!-- Buttons Group -->
                                                <button type="button" class="btn btn-success waves-effect waves-light"  data-bs-toggle="tooltip" data-bs-placement="top" title="Visualizar"><i class="  ri-eye-line"></i></button>
                                                <button type="button" class="btn btn-info waves-effect waves-light"  data-bs-toggle="tooltip" data-bs-placement="top" title="Baixar"><i class=" ri-inbox-archive-line"></i></button>
                                                
                                            </td>
                                        </tr>
                                        
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div><!--end col-->
                </div><!--end row-->








            

            

        </div>
        <!-- container-fluid -->
    </div>
   




@endsection