@extends('layouts.app')

@section('title', 'Capacitaciones Próximas')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0 text-gray-800">
                        <i class="fas fa-graduation-cap me-2 text-primary"></i>Capacitaciones Próximas
                    </h1>
                    <p class="text-muted mb-0">Capacitaciones programadas para los próximos 30 días</p>
                </div>
                <div>
                    <a href="{{ route('admin.hr.trainings.index') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-list me-1"></i>Todas las Capacitaciones
                    </a>
                    <a href="{{ route('admin.hr.trainings.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus me-1"></i>Nueva Capacitación
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Estadísticas -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6">
            <div class="card stat-card stat-card-primary">
                <div class="stat-card-icon">
                    <i class="fas fa-graduation-cap"></i>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-label">Total Próximas</div>
                    <div class="stat-card-value">{{ number_format($stats['total_upcoming'] ?? 0) }}</div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card stat-card stat-card-info">
                <div class="stat-card-icon">
                    <i class="fas fa-calendar-week"></i>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-label">Esta Semana</div>
                    <div class="stat-card-value">{{ number_format($stats['this_week'] ?? 0) }}</div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card stat-card stat-card-warning">
                <div class="stat-card-icon">
                    <i class="fas fa-calendar-alt"></i>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-label">Próxima Semana</div>
                    <div class="stat-card-value">{{ number_format($stats['next_week'] ?? 0) }}</div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card stat-card stat-card-success">
                <div class="stat-card-icon">
                    <i class="fas fa-calendar"></i>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-label">Este Mes</div>
                    <div class="stat-card-value">{{ number_format($stats['this_month'] ?? 0) }}</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtros -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <form method="GET" class="row g-3">
                        <div class="col-md-3">
                            <label for="type" class="form-label">Tipo de Capacitación</label>
                            <select name="type" id="type" class="form-select">
                                <option value="">Todos los tipos</option>
                                <option value="internal" {{ request('type') == 'internal' ? 'selected' : '' }}>Interna</option>
                                <option value="external" {{ request('type') == 'external' ? 'selected' : '' }}>Externa</option>
                                <option value="online" {{ request('type') == 'online' ? 'selected' : '' }}>En Línea</option>
                                <option value="certification" {{ request('type') == 'certification' ? 'selected' : '' }}>Certificación</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="provider" class="form-label">Proveedor</label>
                            <input type="text" name="provider" id="provider" class="form-control" 
                                   value="{{ request('provider') }}" placeholder="Buscar por proveedor...">
                        </div>
                        <div class="col-md-3">
                            <label for="date_from" class="form-label">Desde</label>
                            <input type="date" name="date_from" id="date_from" class="form-control" 
                                   value="{{ request('date_from') }}">
                        </div>
                        <div class="col-md-3">
                            <label for="date_to" class="form-label">Hasta</label>
                            <input type="date" name="date_to" id="date_to" class="form-control" 
                                   value="{{ request('date_to') }}">
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-search me-1"></i>Filtrar
                            </button>
                            <a href="{{ route('admin.hr.trainings.upcoming') }}" class="btn btn-outline-secondary">
                                <i class="fas fa-times me-1"></i>Limpiar
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Lista de Capacitaciones -->
    <div class="row">
        <div class="col-12">
            <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-list me-2 text-primary"></i>Lista de Capacitaciones Próximas
                    </h5>
                </div>
                <div class="card-body p-0">
                    @if($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">Fecha Fin</th>
                                        <th class="border-0">Duración</th>
                                        <th class="border-0">Costo</th>
                                        <th class="border-0">Estado</th>
                                        <th class="border-0">Acciones</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, 60) }}</small>
                                                @endif
                                                @if($training->max_participants)
                                                    <br>
                                                    <small class="text-info">
                                                        <i class="fas fa-users me-1"></i>Máx: {{ $training->max_participants }} participantes
                                                    </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>
                                                @if($training->start_date)
                                                    <span class="fw-semibold text-dark">
                                                        {{ $training->start_date->format('d/m/Y') }}
                                                    </span>
                                                    <br>
                                                    <small class="text-muted">
                                                        {{ $training->start_date->format('H:i') }}
                                                    </small>
                                                    <br>
                                                    <small class="text-info">
                                                        {{ $training->start_date->diffForHumans() }}
                                                    </small>
                                                @else
                                                    <span class="text-muted">No programada</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($training->end_date)
                                                    <span class="fw-semibold text-dark">
                                                        {{ $training->end_date->format('d/m/Y') }}
                                                    </span>
                                                    <br>
                                                    <small class="text-muted">
                                                        {{ $training->end_date->format('H:i') }}
                                                    </small>
                                                @else
                                                    <span class="text-muted">N/A</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($training->start_date && $training->end_date)
                                                    @php
                                                        $days = $training->start_date->diffInDays($training->end_date) + 1;
                                                        $hours = $training->start_date->diffInHours($training->end_date);
                                                    @endphp
                                                    <span class="text-muted">{{ $days }} día{{ $days > 1 ? 's' : '' }}</span>
                                                    <br>
                                                    <small class="text-muted">{{ $hours }} horas</small>
                                                @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()) {
                                                        $daysUntil = $startDate->diffInDays($now);
                                                        if ($daysUntil <= 1) {
                                                            $status = 'urgent';
                                                            $statusColor = 'bg-danger';
                                                            $statusText = '¡Próxima!';
                                                        } elseif ($daysUntil <= 3) {
                                                            $status = 'soon';
                                                            $statusColor = 'bg-warning';
                                                            $statusText = 'Muy Próxima';
                                                        } else {
                                                            $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>
                                            <td>
                                                <div class="btn-group" role="group">
                                                    <a href="{{ route('admin.hr.trainings.edit', $training) }}" 
                                                       class="btn btn-outline-primary btn-sm" title="Editar">
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                    <button type="button" class="btn btn-outline-info btn-sm" 
                                                            onclick="showTrainingDetails({{ $training->id }})" title="Ver Detalles">
                                                        <i class="fas fa-eye"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- Paginación -->
                        <div class="d-flex justify-content-center py-3">
                            {{ $upcoming_trainings->appends(request()->query())->links() }}
                        </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">No se encontraron capacitaciones programadas para los próximos 30 días.</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>

<!-- Modal para detalles de capacitación -->
<div class="modal fade" id="trainingDetailsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Detalles de la Capacitación</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="trainingDetailsContent">
                <!-- Contenido se cargará dinámicamente -->
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function showTrainingDetails(trainingId) {
    // Aquí puedes implementar la lógica para cargar los detalles de la capacitación
    // Por ahora, simplemente mostramos el modal
    $('#trainingDetailsModal').modal('show');
    $('#trainingDetailsContent').html('<div class="text-center"><i class="fas fa-spinner fa-spin"></i> Cargando...</div>');
    
    // Simular carga de datos (reemplazar con llamada AJAX real)
    setTimeout(() => {
        $('#trainingDetailsContent').html(`
            <div class="alert alert-info">
                <i class="fas fa-info-circle me-2"></i>
                Funcionalidad de detalles en desarrollo. ID de capacitación: ${trainingId}
            </div>
        `);
    }, 1000);
}
</script>
@endpush

@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-icon {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
    }

    .stat-card-primary .stat-card-icon {
        background: linear-gradient(135deg, #007bff, #0056b3);
    }

    .stat-card-success .stat-card-icon {
        background: linear-gradient(135deg, #28a745, #1e7e34);
    }

    .stat-card-info .stat-card-icon {
        background: linear-gradient(135deg, #17a2b8, #138496);
    }

    .stat-card-warning .stat-card-icon {
        background: linear-gradient(135deg, #ffc107, #e0a800);
    }

    .stat-card-content {
        flex: 1;
    }

    .stat-card-label {
        font-size: 14px;
        color: #6c757d;
        margin-bottom: 4px;
    }

    .stat-card-value {
        font-size: 28px;
        font-weight: 700;
        color: #2c3e50;
    }

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

    .empty-state {
        padding: 3rem 1rem;
    }

    .empty-state i {
        color: #dee2e6;
    }
</style>
@endpush