@extends('layouts.app')

@section('title', 'Dashboard 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-users me-2"></i>Dashboard RRHH
            </h1>
            <p class="text-muted mb-0">Gestión integral de recursos humanos</p>
        </div>
    </div>

    <!-- Estadísticas principales -->
    <div class="row g-3 mb-4">
        <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
            <div class="stat-card stat-card-primary">
                <div class="stat-card-icon">
                    <i class="fas fa-users"></i>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-label">Total Empleados</div>
                    <div class="stat-card-value">{{ number_format($stats['total_employees'] ?? 0) }}</div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
            <div class="stat-card stat-card-success">
                <div class="stat-card-icon">
                    <i class="fas fa-user-check"></i>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-label">Empleados Activos</div>
                    <div class="stat-card-value">{{ number_format($stats['active_employees'] ?? 0) }}</div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
            <div class="stat-card stat-card-info">
                <div class="stat-card-icon">
                    <i class="fas fa-building"></i>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-label">Departamentos</div>
                    <div class="stat-card-value">{{ number_format($stats['departments'] ?? 0) }}</div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
            <div class="stat-card stat-card-warning">
                <div class="stat-card-icon">
                    <i class="fas fa-briefcase"></i>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-label">Posiciones</div>
                    <div class="stat-card-value">{{ number_format($stats['positions'] ?? 0) }}</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Estadísticas secundarias -->
    <div class="row g-3 mb-4">
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
            <div class="stat-card stat-card-danger">
                <div class="stat-card-icon">
                    <i class="fas fa-calendar-times"></i>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-label">Solicitudes Pendientes</div>
                    <div class="stat-card-value">{{ number_format($stats['pending_leave_requests'] ?? 0) }}</div>
                </div>
            </div>
        </div>
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
            <div class="stat-card stat-card-secondary">
                <div class="stat-card-icon">
                    <i class="fas fa-graduation-cap"></i>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-label">Capacitaciones Próximas</div>
                    <div class="stat-card-value">{{ number_format($stats['upcoming_trainings'] ?? 0) }}</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tablas de información -->
    <div class="row g-4">
        <div class="col-lg-6">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 text-dark">
                        <i class="fas fa-user-plus me-2 text-primary"></i>Empleados Recientes
                    </h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th class="border-0 ps-4">Empleado</th>
                                    <th class="border-0">Departamento</th>
                                    <th class="border-0">Posición</th>
                                    <th class="border-0">Fecha Ingreso</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($recent_employees as $employee)
                                    <tr class="table-row-hover">
                                        <td class="ps-4">
                                            <div class="fw-semibold text-dark">{{ $employee->full_name ?? 'N/A' }}</div>
                                        </td>
                                        <td>
                                            <span class="badge bg-info text-white px-2 py-1">{{ $employee->department->name ?? 'N/A' }}</span>
                                        </td>
                                        <td>
                                            <span class="text-muted">{{ $employee->position->name ?? 'N/A' }}</span>
                                        </td>
                                        <td>
                                            <span class="fw-semibold text-dark">{{ $employee->hire_date ? $employee->hire_date->format('d/m/Y') : 'N/A' }}</span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center py-5">
                                            <div class="empty-state">
                                                <i class="fas fa-users fa-3x text-muted mb-3"></i>
                                                <h6 class="text-muted">No hay empleados registrados</h6>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 text-dark">
                        <i class="fas fa-clock me-2 text-warning"></i>Solicitudes Pendientes
                    </h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th class="border-0 ps-4">Empleado</th>
                                    <th class="border-0">Tipo</th>
                                    <th class="border-0">Período</th>
                                    <th class="border-0">Días</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($pending_requests as $request)
                                    <tr class="table-row-hover">
                                        <td class="ps-4">
                                            <div class="fw-semibold text-dark">{{ $request->employee->full_name ?? 'N/A' }}</div>
                                        </td>
                                        <td>
                                            <span class="badge bg-warning text-white px-2 py-1">{{ $request->leaveType->name ?? 'N/A' }}</span>
                                        </td>
                                        <td>
                                            <span class="text-muted">
                                                {{ $request->start_date ? $request->start_date->format('d/m') : 'N/A' }} - 
                                                {{ $request->end_date ? $request->end_date->format('d/m/Y') : 'N/A' }}
                                            </span>
                                        </td>
                                        <td>
                                            <span class="badge bg-primary text-white px-2 py-1">{{ $request->total_days ?? 0 }}</span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center py-5">
                                            <div class="empty-state">
                                                <i class="fas fa-calendar-check fa-3x text-muted mb-3"></i>
                                                <h6 class="text-muted">No hay solicitudes pendientes</h6>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Capacitaciones Próximas -->
    <div class="row g-4 mt-4">
        <div class="col-12">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 text-dark">
                        <i class="fas fa-graduation-cap me-2 text-primary"></i>Capacitaciones Próximas
                    </h5>
                    <a href="{{ route('admin.hr.trainings.upcoming') }}" class="btn btn-outline-primary btn-sm">
                        <i class="fas fa-eye me-1"></i>Ver Todas
                    </a>
                </div>
                <div class="card-body p-0">
                    @if(isset($upcoming_trainings) && $upcoming_trainings->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th class="border-0 ps-4">Capacitación</th>
                                        <th class="border-0">Tipo</th>
                                        <th class="border-0">Proveedor</th>
                                        <th class="border-0">Fecha Inicio</th>
                                        <th class="border-0">Duración</th>
                                        <th class="border-0">Costo</th>
                                        <th class="border-0">Estado</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($upcoming_trainings as $training)
                                        <tr class="table-row-hover">
                                            <td class="ps-4">
                                                <div class="fw-semibold text-dark">{{ $training->name }}</div>
                                                @if($training->description)
                                                    <small class="text-muted">{{ Str::limit($training->description, 50) }}</small>
                                                @endif
                                            </td>
                                            <td>
                                                @php
                                                    $typeColors = [
                                                        'internal' => 'bg-primary',
                                                        'external' => 'bg-info',
                                                        'online' => 'bg-success',
                                                        'certification' => 'bg-warning'
                                                    ];
                                                    $typeLabels = [
                                                        'internal' => 'Interna',
                                                        'external' => 'Externa',
                                                        'online' => 'En Línea',
                                                        'certification' => 'Certificación'
                                                    ];
                                                @endphp
                                                <span class="badge {{ $typeColors[$training->type] ?? 'bg-secondary' }} text-white px-2 py-1">
                                                    {{ $typeLabels[$training->type] ?? ucfirst($training->type) }}
                                                </span>
                                            </td>
                                            <td>
                                                <span class="text-muted">{{ $training->provider ?? 'N/A' }}</span>
                                            </td>
                                            <td>
                                                <span class="fw-semibold text-dark">
                                                    {{ $training->start_date ? $training->start_date->format('d/m/Y') : 'N/A' }}
                                                </span>
                                                @if($training->start_date)
                                                    <br>
                                                    <small class="text-muted">
                                                        {{ $training->start_date->diffForHumans() }}
                                                    </small>
                                                @endif
                                            </td>
                                            <td>
                                                @if($training->start_date && $training->end_date)
                                                    @php
                                                        $days = $training->start_date->diffInDays($training->end_date) + 1;
                                                    @endphp
                                                    <span class="text-muted">{{ $days }} día{{ $days > 1 ? 's' : '' }}</span>
                                                @else
                                                    <span class="text-muted">N/A</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($training->cost)
                                                    <span class="fw-semibold text-success">
                                                        {{ number_format($training->cost, 2) }} {{ $training->currency }}
                                                    </span>
                                                @else
                                                    <span class="text-muted">Gratuito</span>
                                                @endif
                                            </td>
                                            <td>
                                                @php
                                                    $now = now();
                                                    $startDate = $training->start_date;
                                                    
                                                    if (!$startDate) {
                                                        $status = 'scheduled';
                                                        $statusColor = 'bg-secondary';
                                                        $statusText = 'Programada';
                                                    } elseif ($startDate->isFuture()) {
                                                        $status = 'upcoming';
                                                        $statusColor = 'bg-info';
                                                        $statusText = 'Próxima';
                                                    } elseif ($startDate->isToday()) {
                                                        $status = 'today';
                                                        $statusColor = 'bg-warning';
                                                        $statusText = 'Hoy';
                                                    } else {
                                                        $status = 'past';
                                                        $statusColor = 'bg-success';
                                                        $statusText = 'Completada';
                                                    }
                                                @endphp
                                                <span class="badge {{ $statusColor }} text-white px-2 py-1">
                                                    {{ $statusText }}
                                                </span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <div class="empty-state">
                                <i class="fas fa-graduation-cap fa-3x text-muted mb-3"></i>
                                <h6 class="text-muted">No hay capacitaciones próximas</h6>
                                <p class="text-muted">Las capacitaciones programadas para los próximos 30 días aparecerán aquí.</p>
                                <a href="{{ route('admin.hr.trainings.create') }}" class="btn btn-primary">
                                    <i class="fas fa-plus me-1"></i>Crear Capacitación
                                </a>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
    /* Estilos para las tarjetas de estadísticas */
    .stat-card {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
        border-left: 4px solid;
        height: 100%;
    }

    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    }

    .stat-card-primary {
        border-left-color: #007bff;
    }

    .stat-card-success {
        border-left-color: #28a745;
    }

    .stat-card-info {
        border-left-color: #17a2b8;
    }

    .stat-card-warning {
        border-left-color: #ffc107;
    }

    .stat-card-danger {
        border-left-color: #dc3545;
    }

    .stat-card-secondary {
        border-left-color: #6c757d;
    }

    .stat-card-icon {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        flex-shrink: 0;
    }

    .stat-card-primary .stat-card-icon {
        background: rgba(0, 123, 255, 0.1);
        color: #007bff;
    }

    .stat-card-success .stat-card-icon {
        background: rgba(40, 167, 69, 0.1);
        color: #28a745;
    }

    .stat-card-info .stat-card-icon {
        background: rgba(23, 162, 184, 0.1);
        color: #17a2b8;
    }

    .stat-card-warning .stat-card-icon {
        background: rgba(255, 193, 7, 0.1);
        color: #ffc107;
    }

    .stat-card-danger .stat-card-icon {
        background: rgba(220, 53, 69, 0.1);
        color: #dc3545;
    }

    .stat-card-secondary .stat-card-icon {
        background: rgba(108, 117, 125, 0.1);
        color: #6c757d;
    }

    .stat-card-label {
        font-size: 0.875rem;
        color: #6c757d;
        font-weight: 500;
        margin-bottom: 0.25rem;
    }

    .stat-card-value {
        font-size: 1.75rem;
        font-weight: 700;
        color: #2c3e50;
        line-height: 1;
    }

    /* Estilos para la tabla */
    .table thead th {
        font-weight: 600;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #495057;
        padding: 1rem;
    }

    .table tbody td {
        padding: 1rem;
        vertical-align: middle;
    }

    .table-row-hover {
        transition: background-color 0.2s ease;
    }

    .table-row-hover:hover {
        background-color: #f8f9fa;
    }

    .text-gradient-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .empty-state {
        padding: 2rem;
    }

    .card {
        border-radius: 12px;
        overflow: hidden;
    }

    .badge {
        font-weight: 500;
        letter-spacing: 0.3px;
    }
</style>
@endpush
@endsection