@extends('layouts.master')
@section('title') Inicio @endsection
@section('content')
<!-- this is breadcrumbs -->
@component('components.breadcrumb')
@slot('li_1') Inicio @endslot
@slot('li_2') Panel Catastro @endslot
@slot('title') Registro de Pagos @endslot
@endcomponent

<!-- start page content -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body mb-n3">
                <div class="row">
                    <!-- Reporte Recibos Vencidos -->
                    <div class="col-md-4">
                        <div class="card shadow-sm border-danger">
                            <div class="card-body text-center">
                                <h5 class="card-title text-danger">Recibos Vencidos</h5>
                                <p class="card-text">Consulta todos los recibos pendientes que ya pasaron su fecha de vencimiento.</p>
                                <a href="{{ route('reportes.recibos_vencidos') }}" class="btn btn-danger">
                                    Ver Reporte
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Reporte Pagos -->
                    <div class="col-md-4">
                        <div class="card shadow-sm border-success">
                            <div class="card-body text-center">
                                <h5 class="card-title text-success">Pagos</h5>
                                <p class="card-text">Visualiza el historial completo de pagos realizados por los clientes.</p>
                                <a href="{{ route('reportes.pagos') }}" class="btn btn-success">
                                    Ver Reporte
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Reporte Cierre de Caja -->
                    <div class="col-md-4">
                        <div class="card shadow-sm border-primary">
                            <div class="card-body text-center">
                                <h5 class="card-title text-primary">Cierre de Caja</h5>
                                <p class="card-text">Genera un resumen del movimiento de caja en la fecha actual.</p>
                                <a href="{{ route('reportes.cierre_caja') }}" class="btn btn-primary">
                                    Ver Reporte
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <!-- Proyección de Recaudación -->
                        <div class="col-md-4">
                            <div class="card shadow-sm border-warning">
                                <div class="card-body text-center">
                                    <h5 class="card-title text-warning">Proyección de Recaudación</h5>
                                    <p class="card-text">Visualiza lo que se debería cobrar según la facturación del mes o rango de fechas.</p>
                                    <a href="{{ route('reportes.proyeccion_recaudacion') }}" class="btn btn-warning">
                                        Ver Reporte
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- Recaudado Real -->
                        <div class="col-md-4">
                            <div class="card shadow-sm border-info">
                                <div class="card-body text-center">
                                    <h5 class="card-title text-info">Recaudado Real</h5>
                                    <p class="card-text">Muestra lo que efectivamente se ha cobrado mientras se registran los pagos de los clientes.</p>
                                    <a href="{{ route('reportes.recaudado_real') }}" class="btn btn-info">
                                        Ver Reporte
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="card shadow-sm border-secondary">
                                <div class="card-body text-center">
                                    <h5 class="card-title text-secondary">Pagos por Cronograma</h5>
                                    <p class="card-text">Consulta el estado de pago de los clientes de acuerdo al cronograma mensual seleccionado.</p>
                                    <a href="{{ route('reportes.pagos_cronograma') }}" class="btn btn-secondary">
                                        Ver Reporte
                                    </a>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>

            


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














<!--end row-->


@endsection
@section('script')
<!-- jQuery y DataTables -->

<!-- jQuery y DataTables -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<!-- DataTables Buttons -->
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.colVis.min.js"></script>

<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- tablas -->







@endsection