@extends('layout.template')
@section('title', 'SICCAP ICATEP')
@section('content')
<div class="content-body">
    <style>
        .hover-scale {
            transition: transform 0.2s ease-in-out;
            cursor: pointer;
        }

        .hover-scale:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
        }

        .report-card {
            border: 1px solid #dee2e6;
            border-radius: 12px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .card-top {
            padding: 0.5rem 0;
            flex-shrink: 0;
        }

        .card-bottom {
            background-color: white;
            padding: 0.5rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .report-title {
            font-size: 0.85rem;
            /* Slight overlap adjust */
            font-weight: 600;
            color: #6e6e6e;
            margin-bottom: 0.1rem;
            text-align: center;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .pointer-events-none {
            pointer-events: none;
        }
    </style>
    <!-- row -->
    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-12 ">
                <div class="card" style="border-radius: 12px;">
                    <div class="card-header border-0 pb-0">
                        <h4 class="card-title">Reportes</h4>
                    </div>
                    <div class="card-body">
                        <div class="row gx-3">

                             <!-- ORDEN DE REPORTES 1 -->
                             @puede('Reportes', 'reporte_aulas_presupuesto')
                             <div class="col-md-3">
                                 <a href="{{ route('reportes.aulas.presupuestos') }}" class="text-decoration-none">
                                     <div class="card report-card shadow-sm hover-scale h-80">
                                         <div class="card-top text-center" style="background: #2C3E50;">
                                             <i class="la la-dollar-sign la-3x text-white"></i>
                                         </div>
                                         <div class="card-bottom text-center">
                                             <div class="report-title">Asignacion Presupuesto</div>
                                         </div>
                                     </div>
                                 </a>
                             </div>
                             @endpuede

                            <!-- ORDEN DE REPORTES 2 -->
                            @puede('Reportes', 'reporte_aulas')
                            <div class="col-md-3">
                                <a href="{{ route('reportesAulas') }}" class="text-decoration-none">
                                    <div class="card report-card shadow-sm hover-scale">
                                        <div class="card-top text-center" style="background: #2C3E50;">
                                            <i class="la la-building la-3x text-white"></i>
                                        </div>
                                        <div class="card-bottom text-center">
                                            <div class="report-title">Aulas</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            @endpuede

                             <!-- ORDEN DE REPORTES 3 -->
                            @if(Auth::check() && Auth::user()->usu_perfil_id == 1)
                            @puede('Reportes', 'reporte_aulas_jefe')
                            <div class="col-md-3">
                                <a href="{{ route('reportes.aulas.jefe') }}" class="text-decoration-none">
                                    <div class="card report-card shadow-sm hover-scale">
                                        <div class="card-top text-center" style="background: #2C3E50;">
                                            <i class="la la-building la-3x text-white"></i>
                                        </div>
                                        <div class="card-bottom text-center">
                                            <div class="report-title">Aulas (Jefe)</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            @endpuede
                            @endif

                             <!-- ORDEN DE REPORTES 4 -->
                             @puede('Reportes', 'reporte_capacitandos_general')
                             <div class="col-md-3">
                                 <a href="{{ route('reportesCapacitandosGeneral') }}" class="text-decoration-none">
                                     <div class="card report-card shadow-sm hover-scale h-80">
                                         <div class="card-top text-center" style="background: #2C3E50;">
                                             <i class="la la-graduation-cap la-3x text-white"></i>
                                         </div>
                                         <div class="card-bottom text-center">
                                             <div class="report-title">Capacitandos (General)</div>
                                         </div>
                                     </div>
                                 </a>
                             </div>
                             @endpuede

                            <!-- ORDEN DE REPORTES 5 -->
                            @puede('Reportes', 'reporte_capacitandos')
                            <div class="col-md-3">
                                <a href="{{ route('reportesCapacitandos') }}" class="text-decoration-none">
                                    <div class="card report-card shadow-sm hover-scale h-80">
                                        <div class="card-top text-center" style="background: #2C3E50;">
                                            <i class="la la-graduation-cap la-3x text-white"></i>
                                        </div>
                                        <div class="card-bottom text-center">
                                            <div class="report-title">Capacitandos en Aulas</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            @endpuede

                           

                            <!-- ORDEN DE REPORTES 6 -->
                            @puede('Encuestas de satisfaccion', 'entrar_modulo_encuestas')
                            <div class="col-md-3">
                                <a href="{{ route('reportesEncuestas') }}" class="text-decoration-none">
                                    <div class="card report-card shadow-sm hover-scale h-80">
                                        <div class="card-top text-center" style="background: #2C3E50;">
                                            <i class="la la-smile la-3x text-white"></i>
                                        </div>
                                        <div class="card-bottom text-center">
                                            <div class="report-title">Encuestas de Satisfacción</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            @endpuede

                            @puede('Encuestas de satisfaccion', 'entrar_modulo_encuesta_avanzada')
                            <div class="col-md-3">
                                <a href="{{ route('reportes.encuestas.mensual') }}" class="text-decoration-none">
                                    <div class="card report-card shadow-sm hover-scale h-80">
                                        <div class="card-top text-center" style="background: #2C3E50;">
                                            <i class="la la-smile la-3x text-white"></i>
                                        </div>
                                        <div class="card-bottom text-center">
                                            <div class="report-title">Encuesta (Filtros Avanzados)</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            @endpuede

                            @puede('Encuestas de satisfaccion evaluacion', 'entrar_modulo_encuesta_eva')
                            <div class="col-md-3">
                                <a href="{{ route('reportesEncuestasEva') }}" class="text-decoration-none">
                                    <div class="card report-card shadow-sm hover-scale h-80">
                                        <div class="card-top text-center" style="background: #2C3E50;">
                                            <i class="la la-smile la-3x text-white"></i>
                                        </div>
                                        <div class="card-bottom text-center">
                                            <div class="report-title">Encuestas de Satisfacción de Evaluación</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            @endpuede

                            <!-- ORDEN DE REPORTES 7 -->
                            @puede('Reportes', 'reporte_estatus_pago_capacitandos')
                            <div class="col-md-3">
                                <a href="{{ route('reportesPagosAulas') }}" class="text-decoration-none">
                                    <div class="card report-card shadow-sm hover-scale h-80">
                                        <div class="card-top text-center" style="background: #2C3E50;">
                                            <i class="la la-comment-dollar la-3x text-white"></i>
                                        </div>
                                        <div class="card-bottom text-center">
                                            <div class="report-title">Estatus de Pago de Capacitandos</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            @endpuede

                           

                            <!-- ORDEN DE REPORTES 9 -->
                            @if(Auth::check() && Auth::user()->usu_perfil_id == 1)
                            @puede('Reportes', 'reporte_inscritos_por_curso')
                                <div class="col-md-3">
                                    <a href="{{ route('reportes.inscritos.curso') }}" class="text-decoration-none">
                                        <div class="card report-card shadow-sm hover-scale h-80">
                                            <div class="card-top text-center" style="background: #2C3E50;">
                                                <i class="la la-pencil la-3x text-white"></i>
                                            </div>
                                            <div class="card-bottom text-center">
                                                <div class="report-title">Inscritos por curso</div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                @endpuede
                            @else
                                @puede('Reportes', 'reporte_inscritos_por_curso')
                                    <div class="col-md-3 pointer-events-none">
                                        <div class="card report-card shadow-sm hover-scale h-80">
                                            <div class="card-top text-center bg-dark">
                                                <i class="la la-pencil la-3x text-white"></i>
                                            </div>
                                            <div class="card-bottom text-center">
                                                <div class="report-title">Inscritos por curso</div>
                                            </div>
                                        </div>
                                    </div>
                                @endpuede
                            @endif

                            <!-- ORDEN DE REPORTES 10 -->
                            @puede('Reportes', 'reporte_pscs')
                            <div class="col-md-3">
                                <a href="{{ route('reportes.instructores') }}" class="text-decoration-none">
                                    <div class="card report-card shadow-sm hover-scale">
                                        <div class="card-top text-center" style="background: #2C3E50;">
                                            <i class="la la-paste la-3x text-white"></i>
                                        </div>
                                        <div class="card-bottom text-center">
                                            <div class="report-title">Instructores (PSC)</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            @endpuede

                           

                              <!-- ORDEN DE REPORTES 13 -->
                            @puede('Reportes', 'reporte_referencia_pagos')
                            <div class="col-md-3">
                                <a href="{{ route('reportesReferenciasPagos') }}">
                                    <div class="card report-card shadow-sm hover-scale h-80">
                                        <div class="card-top text-center" style="background: #2C3E50;">
                                            <i class="la la-receipt la-3x text-white"></i>
                                        </div>
                                        <div class="card-bottom text-center">
                                            <div class="report-title">Referencia de Pagos</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            @endpuede

                            

                            <!-- ORDEN DE REPORTES 15 -->
                            @puede('Reportes', 'reporte_estatus_pagos')
                            <div class="col-md-3">
                                <a href="{{ route('reportes.estatus.pagos') }}" class="text-decoration-none">
                                    <div class="card report-card shadow-sm hover-scale h-80">
                                        <div class="card-top text-center" style="background: #2C3E50;">
                                            <i class="la la-money-bill-wave la-3x text-white"></i>
                                        </div>
                                        <div class="card-bottom text-center">
                                            <div class="report-title">Reporte de Pagos</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            @endpuede

                            <!-- ORDEN DE REPORTES FACTURAS PSC 15 -->
                            @puede('Reportes', 'reporte_descarga_facturas_psc')
                            <div class="col-md-3">
                                <a href="{{ route('indexReporteFacturasPsc')}}" class="text-decoration-none">
                                    <div class="card report-card shadow-sm hover-scale h-80">
                                        <div class="card-top text-center" style="background: #2C3E50;">
                                            <!--<i class="la la-money-bill-wave la-3x text-white"></i>-->
                                            <i class="la la-file-invoice-dollar la-3x text-white"></i>
                                        </div>
                                        <div class="card-bottom text-center">
                                            <div class="report-title">Descarga Facturas PSC</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            @endpuede

                           

                            <!-- ORDEN DE REPORTES 16 -->
                            
                            
                            <!-- REPORTES INACTIVOS -->

                             <!-- ORDEN DE REPORTES 5 -->
                             @puede('Reportes', 'reporte_contratos')
                             <div class="col-md-3 pointer-events-none">
                                 <div class="card report-card shadow-sm hover-scale h-80">
                                     <div class="card-top text-center bg-dark">
                                         <i class="la la-file-contract la-3x text-white"></i>
                                     </div>
                                     <div class="card-bottom text-center">
                                         <div class="report-title">Contratos</div>
                                     </div>
                                 </div>
                             </div>
                             @endpuede

                              <!-- ORDEN DE REPORTES 8 -->
                            @puede('Reportes', 'reporte_facturas_pagadas_recurso_federal')
                            <div class="col-md-3 pointer-events-none">
                                <div class="card report-card shadow-sm hover-scale h-80">
                                    <div class="card-top text-center bg-dark">
                                        <i class="la la-file-invoice-dollar la-3x text-white"></i>
                                    </div>
                                    <div class="card-bottom text-center">
                                        <div class="report-title">Facturas RF</div>
                                    </div>
                                </div>
                            </div>
                            @endpuede

                             <!-- ORDEN DE REPORTES 11 -->
                             @puede('Reportes', 'reporte_modelos_negocio_en_el_trabajo')
                             <div class="col-md-3 pointer-events-none">
                                 <div class="card report-card shadow-sm hover-scale h-80">
                                     <div class="card-top text-center bg-dark">
                                         <i class="la la-pencil-square la-3x text-white"></i>
                                     </div>
                                     <div class="card-bottom text-center">
                                         <div class="report-title">Modelo de negocio</div>
                                     </div>
                                 </div>
                             </div>
                             @endpuede
 
                              <!-- ORDEN DE REPORTES 12 -->
                              @puede('Reportes', 'reporte_planeacion_estatus_pagos')
                              <div class="col-md-3 pointer-events-none">
                                  <div class="card report-card shadow-sm hover-scale h-80">
                                      <div class="card-top text-center bg-dark">
                                          <i class="la la-tasks la-3x text-white"></i>
                                      </div>
                                      <div class="card-bottom text-center">
                                          <div class="report-title">Planeación Pagos</div>
                                      </div>
                                  </div>
                              </div>
                              @endpuede

                              <!-- ORDEN DE REPORTES 14 -->
                            @puede('Reportes', 'reporte_registro_actividades')
                            <div class="col-md-3 pointer-events-none">
                                <div class="card report-card shadow-sm hover-scale h-80">
                                    <div class="card-top text-center bg-dark">
                                        <i class="la la-clipboard-list la-3x text-white"></i>
                                    </div>
                                    <div class="card-bottom text-center">
                                        <div class="report-title">Registro actividades</div>
                                    </div>
                                </div>
                            </div>
                            @endpuede

                           

                           

                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection


@push('scripts')

@endpush