@extends('layouts.app')

@section('title', 'Reportes RRHH')

@section('content')
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gradient-primary">
                <i class="fas fa-chart-bar me-2"></i>Reportes de Recursos Humanos
            </h1>
            <p class="text-muted mb-0">Seleccione el tipo de reporte que desea generar</p>
        </div>
    </div>

    <!-- Cards de Reportes -->
    <div class="row g-4">
        <!-- Reporte de Asistencia -->
        <div class="col-xl-4 col-lg-6 col-md-6">
            <div class="card shadow-sm border-0 h-100 report-card">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center mb-3">
                        <div class="report-icon bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 60px; height: 60px;">
                            <i class="fas fa-calendar-check fa-2x"></i>
                        </div>
                        <div>
                            <h5 class="mb-0">Asistencia</h5>
                            <p class="text-muted mb-0 small">Reportes de ausencias y asistencia</p>
                        </div>
                    </div>
                    <p class="text-muted small mb-3">
                        Genera reportes detallados de asistencia, ausencias por período, horas trabajadas, tardanzas y análisis comparativos.
                    </p>
                    <a href="{{ route('admin.hr.reports.attendance') }}" class="btn btn-primary btn-sm w-100">
                        <i class="fas fa-arrow-right me-2"></i>Generar Reporte
                    </a>
                </div>
            </div>
        </div>

        <!-- Reporte de Nómina -->
        <div class="col-xl-4 col-lg-6 col-md-6">
            <div class="card shadow-sm border-0 h-100 report-card">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center mb-3">
                        <div class="report-icon bg-success text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 60px; height: 60px;">
                            <i class="fas fa-money-bill-wave fa-2x"></i>
                        </div>
                        <div>
                            <h5 class="mb-0">Nómina</h5>
                            <p class="text-muted mb-0 small">Reportes de nómina y pagos</p>
                        </div>
                    </div>
                    <p class="text-muted small mb-3">
                        Reportes detallados de nómina por período, desglose de pagos, deducciones, beneficios y análisis por departamento.
                    </p>
                    <a href="{{ route('admin.hr.reports.payroll') }}" class="btn btn-success btn-sm w-100">
                        <i class="fas fa-arrow-right me-2"></i>Generar Reporte
                    </a>
                </div>
            </div>
        </div>

        <!-- Reporte de Capacitaciones -->
        <div class="col-xl-4 col-lg-6 col-md-6">
            <div class="card shadow-sm border-0 h-100 report-card">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center mb-3">
                        <div class="report-icon bg-info text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 60px; height: 60px;">
                            <i class="fas fa-graduation-cap fa-2x"></i>
                        </div>
                        <div>
                            <h5 class="mb-0">Capacitaciones</h5>
                            <p class="text-muted mb-0 small">Reportes de capacitaciones</p>
                        </div>
                    </div>
                    <p class="text-muted small mb-3">
                        Reportes de capacitaciones completadas, empleados por capacitar, costos, efectividad y certificaciones.
                    </p>
                    <a href="{{ route('admin.hr.reports.trainings') }}" class="btn btn-info btn-sm w-100">
                        <i class="fas fa-arrow-right me-2"></i>Generar Reporte
                    </a>
                </div>
            </div>
        </div>

        <!-- Reporte de Evaluaciones -->
        <div class="col-xl-4 col-lg-6 col-md-6">
            <div class="card shadow-sm border-0 h-100 report-card">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center mb-3">
                        <div class="report-icon bg-warning text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 60px; height: 60px;">
                            <i class="fas fa-star fa-2x"></i>
                        </div>
                        <div>
                            <h5 class="mb-0">Evaluaciones</h5>
                            <p class="text-muted mb-0 small">Reportes de desempeño</p>
                        </div>
                    </div>
                    <p class="text-muted small mb-3">
                        Reportes de evaluaciones de desempeño, comparativas, metas alcanzadas y análisis por departamento.
                    </p>
                    <a href="{{ route('admin.hr.reports.evaluations') }}" class="btn btn-warning btn-sm w-100">
                        <i class="fas fa-arrow-right me-2"></i>Generar Reporte
                    </a>
                </div>
            </div>
        </div>

        <!-- Reportes Generales -->
        <div class="col-xl-4 col-lg-6 col-md-6">
            <div class="card shadow-sm border-0 h-100 report-card">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center mb-3">
                        <div class="report-icon bg-secondary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 60px; height: 60px;">
                            <i class="fas fa-chart-pie fa-2x"></i>
                        </div>
                        <div>
                            <h5 class="mb-0">Generales</h5>
                            <p class="text-muted mb-0 small">Reportes generales RRHH</p>
                        </div>
                    </div>
                    <p class="text-muted small mb-3">
                        Reportes de empleados por departamento, estructura organizacional, costos de RRHH y rotación de personal.
                    </p>
                    <a href="{{ route('admin.hr.reports.general') }}" class="btn btn-secondary btn-sm w-100">
                        <i class="fas fa-arrow-right me-2"></i>Generar Reporte
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.report-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.report-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.report-icon {
    transition: transform 0.2s;
}

.report-card:hover .report-icon {
    transform: scale(1.1);
}
</style>
@endsection