@extends('layouts.app')

@section('content')
<div class="container-fluid py-4">
    <!-- 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">Create Performance Review</h1>
                    <p class="text-muted">{{ $company->name }} - Employee Performance Evaluation</p>
                </div>
                <div>
                    <a href="{{ route('companies.hr.performance.index', $company) }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left"></i> Back to Reviews
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Review Form -->
    <form method="POST" action="{{ route('companies.hr.performance.store', $company) }}">
        @csrf
        <div class="row">
            <div class="col-lg-8">
                <!-- Basic Information -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Review Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Employee <span class="text-danger">*</span></label>
                                <select class="form-select @error('employee_id') is-invalid @enderror" 
                                        name="employee_id" required>
                                    <option value="">Select Employee</option>
                                    @foreach($employees as $employee)
                                        <option value="{{ $employee->id }}" {{ old('employee_id') == $employee->id ? 'selected' : '' }}>
                                            {{ $employee->full_name }} ({{ $employee->employee_id }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('employee_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Review Type <span class="text-danger">*</span></label>
                                <select class="form-select @error('review_type') is-invalid @enderror" 
                                        name="review_type" required>
                                    <option value="">Select Type</option>
                                    @foreach($reviewTypes as $type)
                                        <option value="{{ $type }}" {{ old('review_type') == $type ? 'selected' : '' }}>
                                            {{ ucwords(str_replace('_', ' ', $type)) }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('review_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label class="form-label">Review Period <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('review_period') is-invalid @enderror" 
                                       name="review_period" value="{{ old('review_period') }}" required
                                       placeholder="e.g., Q1 2024, Annual 2024">
                                @error('review_period')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Period Start <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('period_start') is-invalid @enderror" 
                                       name="period_start" value="{{ old('period_start') }}" required>
                                @error('period_start')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Period End <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('period_end') is-invalid @enderror" 
                                       name="period_end" value="{{ old('period_end') }}" required>
                                @error('period_end')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Review Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('review_date') is-invalid @enderror" 
                                       name="review_date" value="{{ old('review_date', date('Y-m-d')) }}" required>
                                @error('review_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Overall Rating (1-5)</label>
                                <select class="form-select @error('overall_rating') is-invalid @enderror" 
                                        name="overall_rating">
                                    <option value="">Not Rated</option>
                                    <option value="1" {{ old('overall_rating') == '1' ? 'selected' : '' }}>1 - Poor</option>
                                    <option value="2" {{ old('overall_rating') == '2' ? 'selected' : '' }}>2 - Below Average</option>
                                    <option value="3" {{ old('overall_rating') == '3' ? 'selected' : '' }}>3 - Average</option>
                                    <option value="4" {{ old('overall_rating') == '4' ? 'selected' : '' }}>4 - Above Average</option>
                                    <option value="5" {{ old('overall_rating') == '5' ? 'selected' : '' }}>5 - Excellent</option>
                                </select>
                                @error('overall_rating')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- KPI Scores -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">KPI Scores</h5>
                        <small class="text-muted">Rate key performance indicators (1-5 scale)</small>
                    </div>
                    <div class="card-body">
                        <div id="kpi-container">
                            <div class="kpi-item row mb-3">
                                <div class="col-md-6">
                                    <input type="text" class="form-control" 
                                           name="kpi_scores[0][name]" placeholder="KPI Name (e.g., Sales Target)">
                                </div>
                                <div class="col-md-4">
                                    <select class="form-select" name="kpi_scores[0][score]">
                                        <option value="">Select Score</option>
                                        <option value="1">1 - Poor</option>
                                        <option value="2">2 - Below Average</option>
                                        <option value="3">3 - Average</option>
                                        <option value="4">4 - Above Average</option>
                                        <option value="5">5 - Excellent</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <button type="button" class="btn btn-outline-danger" onclick="removeKPI(this)">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-outline-primary" onclick="addKPI()">
                            <i class="bi bi-plus-circle"></i> Add KPI
                        </button>
                    </div>
                </div>

                <!-- Goals -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Goals & Achievements</h5>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Goals Achieved</label>
                                <div id="achieved-goals-container">
                                    <div class="achieved-goal-item mb-2">
                                        <div class="input-group">
                                            <input type="text" class="form-control" 
                                                   name="goals_achieved[]" placeholder="Enter achieved goal">
                                            <button type="button" class="btn btn-outline-danger" 
                                                    onclick="removeGoal(this, 'achieved')">
                                                <i class="bi bi-x"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <button type="button" class="btn btn-sm btn-outline-success" 
                                        onclick="addGoal('achieved')">
                                    <i class="bi bi-plus-circle"></i> Add Achieved Goal
                                </button>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Goals Pending</label>
                                <div id="pending-goals-container">
                                    <div class="pending-goal-item mb-2">
                                        <div class="input-group">
                                            <input type="text" class="form-control" 
                                                   name="goals_pending[]" placeholder="Enter pending goal">
                                            <button type="button" class="btn btn-outline-danger" 
                                                    onclick="removeGoal(this, 'pending')">
                                                <i class="bi bi-x"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <button type="button" class="btn btn-sm btn-outline-warning" 
                                        onclick="addGoal('pending')">
                                    <i class="bi bi-plus-circle"></i> Add Pending Goal
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Comments & Feedback -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Comments & Feedback</h5>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Strengths</label>
                                <textarea class="form-control @error('strengths') is-invalid @enderror" 
                                          name="strengths" rows="4" 
                                          placeholder="Highlight employee's key strengths...">{{ old('strengths') }}</textarea>
                                @error('strengths')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Areas for Improvement</label>
                                <textarea class="form-control @error('areas_for_improvement') is-invalid @enderror" 
                                          name="areas_for_improvement" rows="4" 
                                          placeholder="Identify areas needing development...">{{ old('areas_for_improvement') }}</textarea>
                                @error('areas_for_improvement')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Manager Comments</label>
                                <textarea class="form-control @error('manager_comments') is-invalid @enderror" 
                                          name="manager_comments" rows="4" 
                                          placeholder="Overall manager assessment...">{{ old('manager_comments') }}</textarea>
                                @error('manager_comments')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Development Plan</label>
                                <textarea class="form-control @error('development_plan') is-invalid @enderror" 
                                          name="development_plan" rows="4" 
                                          placeholder="Outline development plan and next steps...">{{ old('development_plan') }}</textarea>
                                @error('development_plan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Training Recommendations -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Training Recommendations</h5>
                    </div>
                    <div class="card-body">
                        <div id="training-container">
                            <div class="training-item mb-2">
                                <div class="input-group">
                                    <input type="text" class="form-control" 
                                           name="training_recommendations[]" 
                                           placeholder="Enter training course or skill development recommendation">
                                    <button type="button" class="btn btn-outline-danger" 
                                            onclick="removeTraining(this)">
                                        <i class="bi bi-x"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-outline-primary" onclick="addTraining()">
                            <i class="bi bi-plus-circle"></i> Add Training Recommendation
                        </button>
                    </div>
                </div>

                <div class="d-flex justify-content-end">
                    <a href="{{ route('companies.hr.performance.index', $company) }}" 
                       class="btn btn-secondary me-2">Cancel</a>
                    <button type="submit" class="btn btn-primary">
                        <span class="btn-text">
                            <i class="bi bi-save"></i> Create Performance Review
                        </span>
                        <span class="btn-loading d-none">
                            <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                            Creating Review...
                        </span>
                    </button>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="card-title mb-0">Review Guidelines</h6>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled">
                            <li class="mb-3">
                                <i class="bi bi-star-fill text-warning me-2"></i>
                                <strong>Rating Scale</strong><br>
                                <small class="text-muted">Use 1-5 scale (1=Poor, 5=Excellent)</small>
                            </li>
                            <li class="mb-3">
                                <i class="bi bi-bullseye text-primary me-2"></i>
                                <strong>Be Specific</strong><br>
                                <small class="text-muted">Provide concrete examples and measurable outcomes</small>
                            </li>
                            <li class="mb-3">
                                <i class="bi bi-balance-circle text-success me-2"></i>
                                <strong>Be Fair</strong><br>
                                <small class="text-muted">Balance positive feedback with constructive criticism</small>
                            </li>
                            <li class="mb-3">
                                <i class="bi bi-graph-up text-info me-2"></i>
                                <strong>Focus on Growth</strong><br>
                                <small class="text-muted">Identify development opportunities and career paths</small>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <h6 class="card-title mb-0">Rating Guide</h6>
                    </div>
                    <div class="card-body">
                        <div class="small">
                            <div class="mb-2">
                                <strong>5 - Excellent:</strong> Exceeds expectations
                            </div>
                            <div class="mb-2">
                                <strong>4 - Above Average:</strong> Consistently meets and often exceeds expectations
                            </div>
                            <div class="mb-2">
                                <strong>3 - Average:</strong> Meets expectations
                            </div>
                            <div class="mb-2">
                                <strong>2 - Below Average:</strong> Sometimes meets expectations
                            </div>
                            <div>
                                <strong>1 - Poor:</strong> Does not meet expectations
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

@push('scripts')
<script>
let kpiCount = 1;

function addKPI() {
    const container = document.getElementById('kpi-container');
    const newKPI = document.createElement('div');
    newKPI.className = 'kpi-item row mb-3';
    newKPI.innerHTML = `
        <div class="col-md-6">
            <input type="text" class="form-control" 
                   name="kpi_scores[${kpiCount}][name]" placeholder="KPI Name">
        </div>
        <div class="col-md-4">
            <select class="form-select" name="kpi_scores[${kpiCount}][score]">
                <option value="">Select Score</option>
                <option value="1">1 - Poor</option>
                <option value="2">2 - Below Average</option>
                <option value="3">3 - Average</option>
                <option value="4">4 - Above Average</option>
                <option value="5">5 - Excellent</option>
            </select>
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-outline-danger" onclick="removeKPI(this)">
                <i class="bi bi-trash"></i>
            </button>
        </div>
    `;
    container.appendChild(newKPI);
    kpiCount++;
}

function removeKPI(button) {
    if (document.querySelectorAll('.kpi-item').length > 1) {
        button.closest('.kpi-item').remove();
    }
}

function addGoal(type) {
    const container = document.getElementById(`${type}-goals-container`);
    const newGoal = document.createElement('div');
    newGoal.className = `${type}-goal-item mb-2`;
    newGoal.innerHTML = `
        <div class="input-group">
            <input type="text" class="form-control" 
                   name="goals_${type}[]" placeholder="Enter ${type} goal">
            <button type="button" class="btn btn-outline-danger" 
                    onclick="removeGoal(this, '${type}')">
                <i class="bi bi-x"></i>
            </button>
        </div>
    `;
    container.appendChild(newGoal);
}

function removeGoal(button, type) {
    if (document.querySelectorAll(`.${type}-goal-item`).length > 1) {
        button.closest(`.${type}-goal-item`).remove();
    }
}

function addTraining() {
    const container = document.getElementById('training-container');
    const newTraining = document.createElement('div');
    newTraining.className = 'training-item mb-2';
    newTraining.innerHTML = `
        <div class="input-group">
            <input type="text" class="form-control" 
                   name="training_recommendations[]" 
                   placeholder="Enter training recommendation">
            <button type="button" class="btn btn-outline-danger" 
                    onclick="removeTraining(this)">
                <i class="bi bi-x"></i>
            </button>
        </div>
    `;
    container.appendChild(newTraining);
}

function removeTraining(button) {
    if (document.querySelectorAll('.training-item').length > 1) {
        button.closest('.training-item').remove();
    }
}
</script>
@endpush
@endsection