@extends('layouts.app')

@section('title', 'Capacitaciones')

@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
                    </h1>
                    <p class="text-muted mb-0">Gestión de capacitaciones y entrenamientos</p>
                </div>
                <div>
                    <a href="{{ route('admin.hr.trainings.upcoming') }}" class="btn btn-outline-info">
                        <i class="fas fa-calendar-check me-1"></i>Ver Próximas
                    </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>

    <!-- 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="status" class="form-label">Estado</label>
                            <select name="status" id="status" class="form-select">
                                <option value="">Todos los estados</option>
                                <option value="upcoming" {{ request('status') == 'upcoming' ? 'selected' : '' }}>Próximas</option>
                                <option value="ongoing" {{ request('status') == 'ongoing' ? 'selected' : '' }}>En Curso</option>
                                <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Completadas</option>
                                <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>Canceladas</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="search" class="form-label">Buscar</label>
                            <input type="text" name="search" id="search" class="form-control" 
                                   value="{{ request('search') }}" placeholder="Buscar capacitación...">
                        </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.index') }}" 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
                    </h5>
                </div>
                <div class="card-body p-0">
                    @if($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">Costo</th>
                                        <th class="border-0">Estado</th>
                                        <th class="border-0">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($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
                                            </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>
                                                @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->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;
                                                    $endDate = $training->end_date;
                                                    
                                                    if (!$startDate) {
                                                        $status = 'scheduled';
                                                        $statusColor = 'bg-secondary';
                                                        $statusText = 'Programada';
                                                    } elseif ($startDate->isFuture()) {
                                                        $status = 'upcoming';
                                                        $statusColor = 'bg-info';
                                                        $statusText = 'Próxima';
                                                    } elseif ($startDate->isToday() || ($endDate && $endDate->isFuture())) {
                                                        $status = 'ongoing';
                                                        $statusColor = 'bg-warning';
                                                        $statusText = 'En Curso';
                                                    } elseif ($endDate && $endDate->isPast()) {
                                                        $status = 'completed';
                                                        $statusColor = 'bg-success';
                                                        $statusText = 'Completada';
                                                    } else {
                                                        $status = 'completed';
                                                        $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>
                                                    <form action="{{ route('admin.hr.trainings.destroy', $training) }}" 
                                                          method="POST" class="d-inline" 
                                                          onsubmit="return confirm('¿Estás seguro de eliminar esta capacitación?')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-outline-danger btn-sm" title="Eliminar">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- Paginación -->
                        <div class="d-flex justify-content-center py-3">
                            {{ $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 registradas</h6>
                                <p class="text-muted">Comienza creando tu primera capacitación.</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) {
    $('#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>
    .table-row-hover:hover {
        background-color: #f8f9fa;
    }

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

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