@extends('layouts.app')

@section('title', 'Ver Evaluación de Desempeño')

@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-clipboard-check me-2 text-primary"></i>Evaluación de Desempeño
                    </h1>
                    <p class="text-muted mb-0">Detalles de la evaluación de desempeño</p>
                </div>
                <div>
                    <div class="btn-group" role="group">
                        @if($performanceEvaluation->status == 'draft')
                            <a href="{{ route('admin.hr.performance-evaluations.edit', $performanceEvaluation) }}" class="btn btn-warning">
                                <i class="fas fa-edit me-1"></i>Editar
                            </a>
                        @endif
                        <a href="{{ route('admin.hr.performance-evaluations.index') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left me-1"></i>Volver
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Información Principal -->
        <div class="col-lg-8">
            <!-- Información Básica -->
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 text-dark">
                        <i class="fas fa-info-circle me-2 text-primary"></i>Información Básica
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Empleado</label>
                            <div class="fw-bold">
                                {{ $performanceEvaluation->employee->first_name }} {{ $performanceEvaluation->employee->last_name }}
                                <small class="text-muted d-block">#{{ $performanceEvaluation->employee->employee_number ?? 'N/A' }}</small>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Evaluador</label>
                            <div class="fw-bold">{{ $performanceEvaluation->evaluator->name }}</div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-muted">Fecha de Evaluación</label>
                            <div class="fw-bold">{{ $performanceEvaluation->evaluation_date->format('d/m/Y') }}</div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-muted">Período Inicio</label>
                            <div class="fw-bold">{{ $performanceEvaluation->period_start->format('d/m/Y') }}</div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-muted">Período Fin</label>
                            <div class="fw-bold">{{ $performanceEvaluation->period_end->format('d/m/Y') }}</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Tipo de Evaluación</label>
                            <div>
                                @php
                                    $evaluationTypes = ['annual' => 'Anual', 'probation' => 'Prueba', 'project' => 'Proyecto', 'custom' => 'Personalizada'];
                                @endphp
                                <span class="badge bg-info">{{ $evaluationTypes[$performanceEvaluation->evaluation_type] ?? $performanceEvaluation->evaluation_type }}</span>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted">Estado</label>
                            <div>
                                @php
                                    $statusColors = [
                                        'draft' => 'secondary',
                                        'submitted' => 'info',
                                        'reviewed' => 'warning',
                                        'approved' => 'success'
                                    ];
                                    $statusLabels = [
                                        'draft' => 'Borrador',
                                        'submitted' => 'Enviada',
                                        'reviewed' => 'Revisada',
                                        'approved' => 'Aprobada'
                                    ];
                                    $statusColor = $statusColors[$performanceEvaluation->status] ?? 'secondary';
                                @endphp
                                <span class="badge bg-{{ $statusColor }}">{{ $statusLabels[$performanceEvaluation->status] ?? $performanceEvaluation->status }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Criterios de Evaluación -->
            @if($performanceEvaluation->criteria_scores && count($performanceEvaluation->criteria_scores) > 0)
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 text-dark">
                        <i class="fas fa-star me-2 text-primary"></i>Criterios de Evaluación
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        @foreach($performanceEvaluation->criteria_scores as $criterion => $score)
                        <div class="col-md-6 mb-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="fw-bold">{{ $criterion }}</span>
                                <span class="badge bg-{{ $score >= 80 ? 'success' : ($score >= 60 ? 'warning' : 'danger') }}">
                                    {{ number_format($score, 1) }}/100
                                </span>
                            </div>
                            <div class="progress mt-2" style="height: 8px;">
                                <div class="progress-bar bg-{{ $score >= 80 ? 'success' : ($score >= 60 ? 'warning' : 'danger') }}" 
                                     role="progressbar" 
                                     style="width: {{ $score }}%" 
                                     aria-valuenow="{{ $score }}" 
                                     aria-valuemin="0" 
                                     aria-valuemax="100">
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif

            <!-- Puntuación General -->
            @if($performanceEvaluation->overall_score !== null)
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 text-dark">
                        <i class="fas fa-chart-line me-2 text-primary"></i>Puntuación General
                    </h5>
                </div>
                <div class="card-body text-center">
                    <div class="display-4 fw-bold text-{{ $performanceEvaluation->overall_score >= 80 ? 'success' : ($performanceEvaluation->overall_score >= 60 ? 'warning' : 'danger') }}">
                        {{ number_format($performanceEvaluation->overall_score, 1) }}/100
                    </div>
                    <div class="progress mt-3" style="height: 20px;">
                        <div class="progress-bar bg-{{ $performanceEvaluation->overall_score >= 80 ? 'success' : ($performanceEvaluation->overall_score >= 60 ? 'warning' : 'danger') }}" 
                             role="progressbar" 
                             style="width: {{ $performanceEvaluation->overall_score }}%" 
                             aria-valuenow="{{ $performanceEvaluation->overall_score }}" 
                             aria-valuemin="0" 
                             aria-valuemax="100">
                        </div>
                    </div>
                </div>
            </div>
            @endif

            <!-- Comentarios -->
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 text-dark">
                        <i class="fas fa-comments me-2 text-primary"></i>Comentarios y Observaciones
                    </h5>
                </div>
                <div class="card-body">
                    @if($performanceEvaluation->strengths)
                    <div class="mb-4">
                        <label class="form-label fw-bold text-success">
                            <i class="fas fa-thumbs-up me-2"></i>Fortalezas
                        </label>
                        <div class="p-3 bg-light rounded">
                            {{ $performanceEvaluation->strengths }}
                        </div>
                    </div>
                    @endif

                    @if($performanceEvaluation->improvements)
                    <div class="mb-4">
                        <label class="form-label fw-bold text-warning">
                            <i class="fas fa-exclamation-triangle me-2"></i>Áreas de Mejora
                        </label>
                        <div class="p-3 bg-light rounded">
                            {{ $performanceEvaluation->improvements }}
                        </div>
                    </div>
                    @endif

                    @if($performanceEvaluation->goals)
                    <div class="mb-4">
                        <label class="form-label fw-bold text-info">
                            <i class="fas fa-bullseye me-2"></i>Objetivos
                        </label>
                        <div class="p-3 bg-light rounded">
                            {{ $performanceEvaluation->goals }}
                        </div>
                    </div>
                    @endif

                    @if($performanceEvaluation->comments)
                    <div class="mb-4">
                        <label class="form-label fw-bold text-primary">
                            <i class="fas fa-comment me-2"></i>Comentarios Adicionales
                        </label>
                        <div class="p-3 bg-light rounded">
                            {{ $performanceEvaluation->comments }}
                        </div>
                    </div>
                    @endif

                    @if(!$performanceEvaluation->strengths && !$performanceEvaluation->improvements && !$performanceEvaluation->goals && !$performanceEvaluation->comments)
                    <p class="text-muted text-center">No hay comentarios registrados.</p>
                    @endif
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Información del Empleado -->
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 text-dark">
                        <i class="fas fa-user me-2 text-primary"></i>Información del Empleado
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label text-muted">Nombre Completo</label>
                        <div class="fw-bold">
                            {{ $performanceEvaluation->employee->first_name }} {{ $performanceEvaluation->employee->last_name }}
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted">Número de Empleado</label>
                        <div class="fw-bold">{{ $performanceEvaluation->employee->employee_number ?? 'N/A' }}</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted">Departamento</label>
                        <div class="fw-bold">{{ $performanceEvaluation->employee->department->name ?? 'N/A' }}</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted">Posición</label>
                        <div class="fw-bold">{{ $performanceEvaluation->employee->position->name ?? 'N/A' }}</div>
                    </div>
                </div>
            </div>

            <!-- Acciones -->
            @if($performanceEvaluation->status == 'draft')
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 text-dark">
                        <i class="fas fa-cog me-2 text-primary"></i>Acciones
                    </h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('admin.hr.performance-evaluations.edit', $performanceEvaluation) }}" class="btn btn-warning">
                            <i class="fas fa-edit me-1"></i>Editar Evaluación
                        </a>
                        <form action="{{ route('admin.hr.performance-evaluations.destroy', $performanceEvaluation) }}" 
                              method="POST" 
                              onsubmit="return confirm('¿Está seguro de eliminar esta evaluación?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger w-100">
                                <i class="fas fa-trash me-1"></i>Eliminar Evaluación
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            @endif

            <!-- Cambiar Estado -->
            @if($performanceEvaluation->status != 'approved')
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 text-dark">
                        <i class="fas fa-exchange-alt me-2 text-primary"></i>Cambiar Estado
                    </h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.hr.performance-evaluations.change-status', $performanceEvaluation) }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <select name="status" class="form-select" required>
                                <option value="draft" {{ $performanceEvaluation->status == 'draft' ? 'selected' : '' }}>Borrador</option>
                                <option value="submitted" {{ $performanceEvaluation->status == 'submitted' ? 'selected' : '' }}>Enviada</option>
                                <option value="reviewed" {{ $performanceEvaluation->status == 'reviewed' ? 'selected' : '' }}>Revisada</option>
                                <option value="approved" {{ $performanceEvaluation->status == 'approved' ? 'selected' : '' }}>Aprobada</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-save me-1"></i>Actualizar Estado
                        </button>
                    </form>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection