@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">Performance Review</h1>
                    <p class="text-muted">{{ $performance->employee->full_name }} - {{ $performance->review_period }}</p>
                </div>
                <div>
                    <a href="{{ route('companies.hr.performance.index', $company) }}" class="btn btn-outline-secondary me-2">
                        <i class="fas fa-arrow-left"></i> Back to Reviews
                    </a>
                    @can('manage-performance', $company)
                    @if($performance->status !== 'completed')
                    <a href="{{ route('companies.hr.performance.edit', [$company, $performance]) }}" class="btn btn-outline-primary">
                        <i class="fas fa-edit"></i> Edit Review
                    </a>
                    @endif
                    @endcan
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Review Details -->
        <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">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <strong>Employee:</strong><br>
                                {{ $performance->employee->full_name }}<br>
                                <small class="text-muted">{{ $performance->employee->employee_id }} - {{ $performance->employee->position }}</small>
                            </div>
                            
                            <div class="mb-3">
                                <strong>Review Period:</strong><br>
                                {{ $performance->review_period }}
                            </div>
                            
                            <div class="mb-3">
                                <strong>Period:</strong><br>
                                {{ $performance->period_start->format('F d, Y') }} - {{ $performance->period_end->format('F d, Y') }}
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <strong>Review Type:</strong><br>
                                <span class="badge bg-info">{{ ucwords(str_replace('_', ' ', $performance->review_type)) }}</span>
                            </div>
                            
                            <div class="mb-3">
                                <strong>Review Date:</strong><br>
                                {{ $performance->review_date->format('F d, Y') }}
                            </div>
                            
                            <div class="mb-3">
                                <strong>Reviewer:</strong><br>
                                {{ $performance->reviewer->name }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Overall Rating -->
            @if($performance->overall_rating)
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Overall Rating</h5>
                </div>
                <div class="card-body text-center">
                    <div class="mb-3">
                        <span class="display-4 text-primary">{{ number_format($performance->overall_rating, 1) }}</span>
                        <span class="text-muted">/5.0</span>
                    </div>
                    <div class="rating-stars mb-3">
                        @for($i = 1; $i <= 5; $i++)
                            <i class="fas fa-star fa-2x {{ $i <= $performance->overall_rating ? 'text-warning' : 'text-muted' }}"></i>
                        @endfor
                    </div>
                    <div class="rating-description">
                        @if($performance->overall_rating >= 4.5)
                            <span class="badge bg-success fs-6">Excellent Performance</span>
                        @elseif($performance->overall_rating >= 3.5)
                            <span class="badge bg-primary fs-6">Above Average Performance</span>
                        @elseif($performance->overall_rating >= 2.5)
                            <span class="badge bg-info fs-6">Average Performance</span>
                        @elseif($performance->overall_rating >= 1.5)
                            <span class="badge bg-warning fs-6">Below Average Performance</span>
                        @else
                            <span class="badge bg-danger fs-6">Poor Performance</span>
                        @endif
                    </div>
                </div>
            </div>
            @endif

            <!-- KPI Scores -->
            @if($performance->kpi_scores && count($performance->kpi_scores) > 0)
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">KPI Scores</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>KPI</th>
                                    <th>Score</th>
                                    <th>Rating</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($performance->kpi_scores as $kpi)
                                    @if(isset($kpi['name']) && isset($kpi['score']))
                                    <tr>
                                        <td>{{ $kpi['name'] }}</td>
                                        <td>
                                            <span class="badge bg-{{ $kpi['score'] >= 4 ? 'success' : ($kpi['score'] >= 3 ? 'primary' : ($kpi['score'] >= 2 ? 'warning' : 'danger')) }}">
                                                {{ $kpi['score'] }}/5
                                            </span>
                                        </td>
                                        <td>
                                            <div class="rating-stars">
                                                @for($i = 1; $i <= 5; $i++)
                                                    <i class="fas fa-star {{ $i <= $kpi['score'] ? 'text-warning' : 'text-muted' }}"></i>
                                                @endfor
                                            </div>
                                        </td>
                                    </tr>
                                    @endif
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            @endif

            <!-- Goals -->
            @if(($performance->goals_achieved && count($performance->goals_achieved) > 0) || 
                ($performance->goals_pending && count($performance->goals_pending) > 0))
            <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">
                        @if($performance->goals_achieved && count($performance->goals_achieved) > 0)
                        <div class="col-md-6">
                            <h6 class="text-success">
                                <i class="fas fa-check-circle"></i> Goals Achieved
                            </h6>
                            <ul class="list-unstyled">
                                @foreach($performance->goals_achieved as $goal)
                                    @if($goal)
                                    <li class="mb-2">
                                        <i class="fas fa-check text-success me-2"></i>
                                        {{ $goal }}
                                    </li>
                                    @endif
                                @endforeach
                            </ul>
                        </div>
                        @endif
                        
                        @if($performance->goals_pending && count($performance->goals_pending) > 0)
                        <div class="col-md-6">
                            <h6 class="text-warning">
                                <i class="fas fa-clock"></i> Goals Pending
                            </h6>
                            <ul class="list-unstyled">
                                @foreach($performance->goals_pending as $goal)
                                    @if($goal)
                                    <li class="mb-2">
                                        <i class="fas fa-hourglass text-warning me-2"></i>
                                        {{ $goal }}
                                    </li>
                                    @endif
                                @endforeach
                            </ul>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            @endif

            <!-- 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">
                        @if($performance->strengths)
                        <div class="col-md-6">
                            <h6 class="text-success">
                                <i class="fas fa-thumbs-up"></i> Strengths
                            </h6>
                            <p class="text-muted">{{ $performance->strengths }}</p>
                        </div>
                        @endif
                        
                        @if($performance->areas_for_improvement)
                        <div class="col-md-6">
                            <h6 class="text-warning">
                                <i class="fas fa-chart-line"></i> Areas for Improvement
                            </h6>
                            <p class="text-muted">{{ $performance->areas_for_improvement }}</p>
                        </div>
                        @endif
                    </div>
                    
                    @if($performance->manager_comments)
                    <div class="mt-3">
                        <h6 class="text-primary">
                            <i class="fas fa-user-tie"></i> Manager Comments
                        </h6>
                        <p class="text-muted">{{ $performance->manager_comments }}</p>
                    </div>
                    @endif
                    
                    @if($performance->employee_comments)
                    <div class="mt-3">
                        <h6 class="text-info">
                            <i class="fas fa-user"></i> Employee Comments
                        </h6>
                        <p class="text-muted">{{ $performance->employee_comments }}</p>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Development Plan -->
            @if($performance->development_plan)
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Development Plan</h5>
                </div>
                <div class="card-body">
                    <p class="text-muted">{{ $performance->development_plan }}</p>
                </div>
            </div>
            @endif

            <!-- Training Recommendations -->
            @if($performance->training_recommendations && count($performance->training_recommendations) > 0)
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Training Recommendations</h5>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        @foreach($performance->training_recommendations as $training)
                            @if($training)
                            <li class="mb-2">
                                <i class="fas fa-graduation-cap text-primary me-2"></i>
                                {{ $training }}
                            </li>
                            @endif
                        @endforeach
                    </ul>
                </div>
            </div>
            @endif

            <!-- Employee Acknowledgment -->
            @if($performance->status === 'submitted' && auth()->user()->id === $performance->employee->user_id)
            <div class="card mb-4 border-warning">
                <div class="card-header bg-warning">
                    <h5 class="card-title mb-0 text-dark">
                        <i class="fas fa-exclamation-triangle"></i> Action Required
                    </h5>
                </div>
                <div class="card-body">
                    <p>Please review your performance evaluation and provide any comments before acknowledging.</p>
                    <form method="POST" action="{{ route('companies.hr.performance.acknowledge', [$company, $performance]) }}">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label">Your Comments (Optional)</label>
                            <textarea class="form-control" name="employee_comments" rows="3" 
                                      placeholder="Add any comments about this review...">{{ $performance->employee_comments }}</textarea>
                        </div>
                        <button type="submit" class="btn btn-warning">
                            <i class="fas fa-check"></i> Acknowledge Review
                        </button>
                    </form>
                </div>
            </div>
            @endif
        </div>

        <!-- Status & Timeline -->
        <div class="col-lg-4">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Review Status</h5>
                </div>
                <div class="card-body text-center">
                    @if($performance->status === 'draft')
                        <div class="mb-3">
                            <i class="fas fa-edit fa-3x text-secondary"></i>
                        </div>
                        <h5 class="text-secondary">Draft</h5>
                        <p class="text-muted">Review is being prepared</p>
                    @elseif($performance->status === 'submitted')
                        <div class="mb-3">
                            <i class="fas fa-paper-plane fa-3x text-warning"></i>
                        </div>
                        <h5 class="text-warning">Submitted</h5>
                        <p class="text-muted">Waiting for employee acknowledgment</p>
                    @elseif($performance->status === 'acknowledged')
                        <div class="mb-3">
                            <i class="fas fa-check-circle fa-3x text-info"></i>
                        </div>
                        <h5 class="text-info">Acknowledged</h5>
                        <p class="text-muted">Employee has acknowledged the review</p>
                    @else
                        <div class="mb-3">
                            <i class="fas fa-flag-checkered fa-3x text-success"></i>
                        </div>
                        <h5 class="text-success">Completed</h5>
                        <p class="text-muted">Review process is complete</p>
                    @endif
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Review Timeline</h5>
                </div>
                <div class="card-body">
                    <div class="timeline">
                        <div class="timeline-item">
                            <div class="timeline-marker bg-primary"></div>
                            <div class="timeline-content">
                                <h6 class="timeline-title">Review Created</h6>
                                <p class="timeline-description">
                                    Created by {{ $performance->reviewer->name }}
                                </p>
                                <small class="text-muted">{{ $performance->created_at->format('M d, Y g:i A') }}</small>
                            </div>
                        </div>
                        
                        @if($performance->status !== 'draft')
                        <div class="timeline-item">
                            <div class="timeline-marker bg-warning"></div>
                            <div class="timeline-content">
                                <h6 class="timeline-title">Review Submitted</h6>
                                <p class="timeline-description">
                                    Sent to employee for acknowledgment
                                </p>
                                <small class="text-muted">{{ $performance->updated_at->format('M d, Y g:i A') }}</small>
                            </div>
                        </div>
                        @endif
                        
                        @if($performance->employee_acknowledged_at)
                        <div class="timeline-item">
                            <div class="timeline-marker bg-info"></div>
                            <div class="timeline-content">
                                <h6 class="timeline-title">Employee Acknowledged</h6>
                                <p class="timeline-description">
                                    {{ $performance->employee->full_name }} acknowledged the review
                                </p>
                                <small class="text-muted">{{ $performance->employee_acknowledged_at->format('M d, Y g:i A') }}</small>
                            </div>
                        </div>
                        @endif
                        
                        @if($performance->status === 'completed')
                        <div class="timeline-item">
                            <div class="timeline-marker bg-success"></div>
                            <div class="timeline-content">
                                <h6 class="timeline-title">Review Completed</h6>
                                <p class="timeline-description">
                                    Performance review cycle completed
                                </p>
                                <small class="text-muted">{{ $performance->updated_at->format('M d, Y g:i A') }}</small>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
.rating-stars {
    font-size: 1rem;
}
.rating-stars .fa-star {
    margin-right: 2px;
}
.timeline {
    position: relative;
    padding-left: 30px;
}
.timeline-item {
    position: relative;
    margin-bottom: 20px;
}
.timeline-marker {
    position: absolute;
    left: -35px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #dee2e6;
}
.timeline::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dee2e6;
}
.timeline-title {
    margin-bottom: 5px;
    font-size: 1rem;
}
.timeline-description {
    margin-bottom: 5px;
    color: #6c757d;
}
</style>
@endpush
@endsection