@extends('layouts.app')

@section('title', 'Nueva 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>Nueva Evaluación de Desempeño
                    </h1>
                    <p class="text-muted mb-0">Crear una nueva evaluación de desempeño</p>
                </div>
                <div>
                    <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>

    <!-- Formulario -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('admin.hr.performance-evaluations.store') }}" method="POST">
                        @csrf

                        <div class="row">
                            <!-- Información Básica -->
                            <div class="col-md-12">
                                <h5 class="mb-3 text-primary">
                                    <i class="fas fa-info-circle me-2"></i>Información Básica
                                </h5>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="employee_id" class="form-label">Empleado <span class="text-danger">*</span></label>
                                <select name="employee_id" id="employee_id" class="form-select @error('employee_id') is-invalid @enderror" required>
                                    <option value="">Seleccionar empleado...</option>
                                    @foreach($employees as $employee)
                                        <option value="{{ $employee->id }}" {{ old('employee_id', $selectedEmployeeId) == $employee->id ? 'selected' : '' }}>
                                            {{ $employee->first_name }} {{ $employee->last_name }} 
                                            ({{ $employee->employee_number ?? 'N/A' }}) - {{ $employee->department->name ?? 'N/A' }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('employee_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="evaluator_id" class="form-label">Evaluador <span class="text-danger">*</span></label>
                                <select name="evaluator_id" id="evaluator_id" class="form-select @error('evaluator_id') is-invalid @enderror" required>
                                    <option value="">Seleccionar evaluador...</option>
                                    @foreach($evaluators as $evaluator)
                                        <option value="{{ $evaluator->id }}" {{ old('evaluator_id', Auth::id()) == $evaluator->id ? 'selected' : '' }}>
                                            {{ $evaluator->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('evaluator_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4 mb-3">
                                <label for="evaluation_date" class="form-label">Fecha de Evaluación <span class="text-danger">*</span></label>
                                <input type="date" name="evaluation_date" id="evaluation_date" 
                                       class="form-control @error('evaluation_date') is-invalid @enderror" 
                                       value="{{ old('evaluation_date', date('Y-m-d')) }}" required>
                                @error('evaluation_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4 mb-3">
                                <label for="period_start" class="form-label">Período Inicio <span class="text-danger">*</span></label>
                                <input type="date" name="period_start" id="period_start" 
                                       class="form-control @error('period_start') is-invalid @enderror" 
                                       value="{{ old('period_start') }}" required>
                                @error('period_start')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4 mb-3">
                                <label for="period_end" class="form-label">Período Fin <span class="text-danger">*</span></label>
                                <input type="date" name="period_end" id="period_end" 
                                       class="form-control @error('period_end') is-invalid @enderror" 
                                       value="{{ old('period_end') }}" required>
                                @error('period_end')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="evaluation_type" class="form-label">Tipo de Evaluación <span class="text-danger">*</span></label>
                                <select name="evaluation_type" id="evaluation_type" class="form-select @error('evaluation_type') is-invalid @enderror" required>
                                    <option value="">Seleccionar tipo...</option>
                                    @foreach($evaluationTypes as $key => $label)
                                        <option value="{{ $key }}" {{ old('evaluation_type', 'annual') == $key ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('evaluation_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="status" class="form-label">Estado <span class="text-danger">*</span></label>
                                <select name="status" id="status" class="form-select @error('status') is-invalid @enderror" required>
                                    <option value="draft" {{ old('status', 'draft') == 'draft' ? 'selected' : '' }}>Borrador</option>
                                    <option value="submitted" {{ old('status') == 'submitted' ? 'selected' : '' }}>Enviada</option>
                                    <option value="reviewed" {{ old('status') == 'reviewed' ? 'selected' : '' }}>Revisada</option>
                                    <option value="approved" {{ old('status') == 'approved' ? 'selected' : '' }}>Aprobada</option>
                                </select>
                                @error('status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Criterios de Evaluación -->
                            <div class="col-md-12 mt-4">
                                <h5 class="mb-3 text-primary">
                                    <i class="fas fa-star me-2"></i>Criterios de Evaluación (0-100)
                                </h5>
                            </div>

                            @foreach($defaultCriteria as $criterion => $score)
                            <div class="col-md-6 mb-3">
                                <label for="criteria_{{ $loop->index }}" class="form-label">{{ $criterion }}</label>
                                <input type="number" name="criteria_scores[{{ $criterion }}]" 
                                       id="criteria_{{ $loop->index }}" 
                                       class="form-control criteria-score" 
                                       min="0" max="100" step="0.1"
                                       value="{{ old("criteria_scores.$criterion", $score) }}"
                                       placeholder="0-100">
                                <small class="text-muted">Puntuación de 0 a 100</small>
                            </div>
                            @endforeach

                            <div class="col-md-6 mb-3">
                                <label for="overall_score" class="form-label">Puntuación General</label>
                                <input type="number" name="overall_score" id="overall_score" 
                                       class="form-control @error('overall_score') is-invalid @enderror" 
                                       min="0" max="100" step="0.1"
                                       value="{{ old('overall_score') }}" 
                                       placeholder="Se calculará automáticamente si se deja vacío">
                                <small class="text-muted">Se calculará automáticamente como promedio de los criterios si se deja vacío</small>
                                @error('overall_score')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Comentarios -->
                            <div class="col-md-12 mt-4">
                                <h5 class="mb-3 text-primary">
                                    <i class="fas fa-comments me-2"></i>Comentarios y Observaciones
                                </h5>
                            </div>

                            <div class="col-md-12 mb-3">
                                <label for="strengths" class="form-label">Fortalezas</label>
                                <textarea name="strengths" id="strengths" rows="3" 
                                          class="form-control @error('strengths') is-invalid @enderror" 
                                          placeholder="Describa las fortalezas del empleado...">{{ old('strengths') }}</textarea>
                                @error('strengths')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-12 mb-3">
                                <label for="improvements" class="form-label">Áreas de Mejora</label>
                                <textarea name="improvements" id="improvements" rows="3" 
                                          class="form-control @error('improvements') is-invalid @enderror" 
                                          placeholder="Describa las áreas de mejora...">{{ old('improvements') }}</textarea>
                                @error('improvements')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-12 mb-3">
                                <label for="goals" class="form-label">Objetivos</label>
                                <textarea name="goals" id="goals" rows="3" 
                                          class="form-control @error('goals') is-invalid @enderror" 
                                          placeholder="Establezca objetivos para el próximo período...">{{ old('goals') }}</textarea>
                                @error('goals')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-12 mb-3">
                                <label for="comments" class="form-label">Comentarios Adicionales</label>
                                <textarea name="comments" id="comments" rows="3" 
                                          class="form-control @error('comments') is-invalid @enderror" 
                                          placeholder="Comentarios adicionales...">{{ old('comments') }}</textarea>
                                @error('comments')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="d-flex justify-content-end gap-2">
                                    <a href="{{ route('admin.hr.performance-evaluations.index') }}" class="btn btn-outline-secondary">
                                        <i class="fas fa-times me-1"></i>Cancelar
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save me-1"></i>Guardar Evaluación
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Calcular overall_score automáticamente cuando cambien los criterios
    document.addEventListener('DOMContentLoaded', function() {
        const criteriaInputs = document.querySelectorAll('.criteria-score');
        const overallScoreInput = document.getElementById('overall_score');

        function calculateOverallScore() {
            let total = 0;
            let count = 0;

            criteriaInputs.forEach(input => {
                const value = parseFloat(input.value);
                if (!isNaN(value) && value >= 0 && value <= 100) {
                    total += value;
                    count++;
                }
            });

            if (count > 0) {
                const average = total / count;
                // Solo actualizar si el campo está vacío o si el usuario no lo ha modificado manualmente
                if (!overallScoreInput.value || overallScoreInput.dataset.autoCalculated === 'true') {
                    overallScoreInput.value = average.toFixed(2);
                    overallScoreInput.dataset.autoCalculated = 'true';
                }
            }
        }

        criteriaInputs.forEach(input => {
            input.addEventListener('input', calculateOverallScore);
        });

        // Marcar si el usuario modifica manualmente el overall_score
        overallScoreInput.addEventListener('input', function() {
            this.dataset.autoCalculated = 'false';
        });

        // Calcular inicialmente
        calculateOverallScore();
    });
</script>
@endpush
@endsection