{% extends "base.html" %}
{% load static %}

{% block title %}Performance Review Details | HR Management{% endblock %}

{% block css %}
<link href="{% static 'plugins/chart.js/dist/Chart.min.css' %}" rel="stylesheet" />
<style>
    .review-header {
        background-color: #f8f9fa;
        border-radius: 5px;
        padding: 20px;
        margin-bottom: 20px;
    }
    .status-badge {
        font-size: 14px;
        padding: 8px 15px;
        border-radius: 30px;
    }
    .status-draft {
        background-color: #e9ecef;
        color: #495057;
    }
    .status-in-progress {
        background-color: #fff3cd;
        color: #856404;
    }
    .status-completed {
        background-color: #d4edda;
        color: #155724;
    }
    .status-overdue {
        background-color: #f8d7da;
        color: #721c24;
    }
    .score-badge {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        color: white;
    }
    .score-excellent {
        background-color: #28a745;
    }
    .score-good {
        background-color: #17a2b8;
    }
    .score-average {
        background-color: #ffc107;
    }
    .score-needs-improvement {
        background-color: #fd7e14;
    }
    .score-poor {
        background-color: #dc3545;
    }
    .category-card {
        transition: all 0.3s ease;
    }
    .category-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    .timeline {
        position: relative;
        padding-left: 30px;
    }
    .timeline::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 2px;
        background-color: #dee2e6;
    }
    .timeline-item {
        position: relative;
        padding-bottom: 20px;
    }
    .timeline-item::before {
        content: '';
        position: absolute;
        left: -34px;
        top: 0;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #2d62ed;
    }
    .timeline-date {
        font-size: 12px;
        color: #6c757d;
    }
    .progress-thin {
        height: 5px;
    }
    .rating-stars {
        color: #ffc107;
    }
    .comment-box {
        background-color: #f8f9fa;
        border-radius: 5px;
        padding: 15px;
        margin-bottom: 15px;
    }
</style>
{% endblock %}

{% block content %}
<!-- begin breadcrumb -->
<ol class="breadcrumb float-xl-end">
    <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Home</a></li>
    <li class="breadcrumb-item"><a href="{% url 'hr:dashboard' %}">HR</a></li>
    <li class="breadcrumb-item"><a href="{% url 'hr:performance_review_list' %}">Performance Reviews</a></li>
    <li class="breadcrumb-item active">Review Details</li>
</ol>
<!-- end breadcrumb -->

<!-- begin page-header -->
<h1 class="page-header">Performance Review Details</h1>
<!-- end page-header -->

<!-- begin row -->
<div class="row">
    <!-- begin col-8 -->
    <div class="col-xl-8">
        <!-- begin panel -->
        <div class="panel panel-inverse">
            <!-- begin panel-heading -->
            <div class="panel-heading">
                <h4 class="panel-title">Review Information</h4>
                <div class="panel-heading-btn">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
                </div>
            </div>
            <!-- end panel-heading -->
            
            <!-- begin panel-body -->
            <div class="panel-body">
                <!-- Review Header -->
                <div class="review-header">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="d-flex align-items-center">
                                <div class="avatar avatar-lg me-3">
                                    <img src="{% static 'img/user/default-avatar.jpg' %}" alt="{{ review.employee.get_full_name }}" class="rounded-circle">
                                </div>
                                <div>
                                    <h4 class="mb-0">{{ review.employee.get_full_name }}</h4>
                                    <p class="text-muted mb-0">{{ review.employee.job_title }}</p>
                                    <p class="text-muted mb-0">
                                        {% if review.employee.department %}
                                        {{ review.employee.department.name }}
                                        {% else %}
                                        No Department
                                        {% endif %}
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 text-md-end mt-3 mt-md-0">
                            <span class="status-badge 
                                {% if review.status == 'DRAFT' %}status-draft
                                {% elif review.status == 'IN_PROGRESS' %}status-in-progress
                                {% elif review.status == 'COMPLETED' %}status-completed
                                {% elif review.status == 'OVERDUE' %}status-overdue{% endif %}">
                                {% if review.status == 'DRAFT' %}
                                <i class="fas fa-file"></i> Draft
                                {% elif review.status == 'IN_PROGRESS' %}
                                <i class="fas fa-hourglass-half"></i> In Progress
                                {% elif review.status == 'COMPLETED' %}
                                <i class="fas fa-check-circle"></i> Completed
                                {% elif review.status == 'OVERDUE' %}
                                <i class="fas fa-exclamation-circle"></i> Overdue
                                {% endif %}
                            </span>
                        </div>
                    </div>
                </div>
                
                <!-- Review Details -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Review Details</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <table class="table table-borderless">
                                    <tbody>
                                        <tr>
                                            <th width="40%">Review Period:</th>
                                            <td>{{ review.period_start|date:"F d, Y" }} - {{ review.period_end|date:"F d, Y" }}</td>
                                        </tr>
                                        <tr>
                                            <th>Review Type:</th>
                                            <td>{{ review.get_review_type_display }}</td>
                                        </tr>
                                        <tr>
                                            <th>Due Date:</th>
                                            <td>
                                                {{ review.due_date|date:"F d, Y" }}
                                                {% if review.status == 'OVERDUE' %}
                                                <span class="badge bg-danger ms-1">Overdue</span>
                                                {% endif %}
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>Created By:</th>
                                            <td>{{ review.created_by.get_full_name }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <table class="table table-borderless">
                                    <tbody>
                                        <tr>
                                            <th width="40%">Reviewer:</th>
                                            <td>
                                                {% if review.reviewer %}
                                                {{ review.reviewer.get_full_name }}
                                                {% else %}
                                                Not assigned
                                                {% endif %}
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>Created On:</th>
                                            <td>{{ review.created_at|date:"F d, Y" }}</td>
                                        </tr>
                                        <tr>
                                            <th>Last Updated:</th>
                                            <td>{{ review.updated_at|date:"F d, Y" }}</td>
                                        </tr>
                                        <tr>
                                            <th>Completed On:</th>
                                            <td>
                                                {% if review.completed_at %}
                                                {{ review.completed_at|date:"F d, Y" }}
                                                {% else %}
                                                Not completed
                                                {% endif %}
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Overall Score -->
                {% if review.overall_score %}
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Overall Performance</h5>
                    </div>
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-md-4 text-center">
                                <div class="d-inline-flex align-items-center justify-content-center mb-3">
                                    <div class="score-badge 
                                        {% if review.overall_score >= 4.5 %}score-excellent
                                        {% elif review.overall_score >= 3.5 %}score-good
                                        {% elif review.overall_score >= 2.5 %}score-average
                                        {% elif review.overall_score >= 1.5 %}score-needs-improvement
                                        {% else %}score-poor{% endif %}"
                                        style="width: 80px; height: 80px; font-size: 24px;">
                                        {{ review.overall_score }}
                                    </div>
                                </div>
                                <h5>
                                    {% if review.overall_score >= 4.5 %}
                                    Excellent
                                    {% elif review.overall_score >= 3.5 %}
                                    Good
                                    {% elif review.overall_score >= 2.5 %}
                                    Average
                                    {% elif review.overall_score >= 1.5 %}
                                    Needs Improvement
                                    {% else %}
                                    Poor
                                    {% endif %}
                                </h5>
                            </div>
                            <div class="col-md-8">
                                <canvas id="scoreRadarChart" height="250"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}
                
                <!-- Performance Categories -->
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">Performance Categories</h5>
                        {% if review.status == 'IN_PROGRESS' %}
                        <div class="progress" style="width: 150px; height: 10px;">
                            <div class="progress-bar" role="progressbar" style="width: {{ review.completion_percentage|default:0 }}%;" aria-valuenow="{{ review.completion_percentage|default:0 }}" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        {% endif %}
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            {% for category in categories %}
                            <div class="col-md-6">
                                <div class="card category-card h-100">
                                    <div class="card-body">
                                        <h5 class="card-title">{{ category.name }}</h5>
                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <div class="rating-stars">
                                                {% for i in "12345" %}
                                                <i class="fas fa-star{% if forloop.counter > category.score %}-o{% endif %}"></i>
                                                {% endfor %}
                                            </div>
                                            <div class="score-badge 
                                                {% if category.score >= 4.5 %}score-excellent
                                                {% elif category.score >= 3.5 %}score-good
                                                {% elif category.score >= 2.5 %}score-average
                                                {% elif category.score >= 1.5 %}score-needs-improvement
                                                {% else %}score-poor{% endif %}">
                                                {{ category.score }}
                                            </div>
                                        </div>
                                        <p class="card-text">{{ category.comments|linebreaks }}</p>
                                    </div>
                                </div>
                            </div>
                            {% empty %}
                            <div class="col-12">
                                <div class="alert alert-info">
                                    No performance categories have been evaluated yet.
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                
                <!-- Goals and Achievements -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Goals and Achievements</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>Goal</th>
                                        <th>Target</th>
                                        <th>Achievement</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for goal in goals %}
                                    <tr>
                                        <td>{{ goal.description }}</td>
                                        <td>{{ goal.target }}</td>
                                        <td>{{ goal.achievement }}</td>
                                        <td>
                                            {% if goal.status == 'EXCEEDED' %}
                                            <span class="badge bg-success">Exceeded</span>
                                            {% elif goal.status == 'ACHIEVED' %}
                                            <span class="badge bg-primary">Achieved</span>
                                            {% elif goal.status == 'PARTIALLY_ACHIEVED' %}
                                            <span class="badge bg-warning">Partially Achieved</span>
                                            {% elif goal.status == 'NOT_ACHIEVED' %}
                                            <span class="badge bg-danger">Not Achieved</span>
                                            {% else %}
                                            <span class="badge bg-secondary">In Progress</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% empty %}
                                    <tr>
                                        <td colspan="4" class="text-center">No goals have been set for this review period.</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <!-- Strengths and Areas for Improvement -->
                <div class="row g-3 mb-4">
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-header bg-success-transparent">
                                <h5 class="card-title mb-0 text-success">Strengths</h5>
                            </div>
                            <div class="card-body">
                                {% if review.strengths %}
                                <ul class="mb-0">
                                    {% for strength in review.strengths_list %}
                                    <li>{{ strength }}</li>
                                    {% endfor %}
                                </ul>
                                {% else %}
                                <p class="text-muted mb-0">No strengths have been identified yet.</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-header bg-warning-transparent">
                                <h5 class="card-title mb-0 text-warning">Areas for Improvement</h5>
                            </div>
                            <div class="card-body">
                                {% if review.areas_for_improvement %}
                                <ul class="mb-0">
                                    {% for area in review.areas_for_improvement_list %}
                                    <li>{{ area }}</li>
                                    {% endfor %}
                                </ul>
                                {% else %}
                                <p class="text-muted mb-0">No areas for improvement have been identified yet.</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 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">
                        {% if review.development_plan %}
                        {{ review.development_plan|linebreaks }}
                        {% else %}
                        <p class="text-muted mb-0">No development plan has been created yet.</p>
                        {% endif %}
                    </div>
                </div>
                
                <!-- Comments -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Comments</h5>
                    </div>
                    <div class="card-body">
                        <!-- Reviewer Comments -->
                        {% if review.reviewer_comments %}
                        <div class="comment-box">
                            <h6>Reviewer Comments</h6>
                            <p class="mb-0">{{ review.reviewer_comments|linebreaks }}</p>
                        </div>
                        {% endif %}
                        
                        <!-- Employee Comments -->
                        {% if review.employee_comments %}
                        <div class="comment-box">
                            <h6>Employee Comments</h6>
                            <p class="mb-0">{{ review.employee_comments|linebreaks }}</p>
                        </div>
                        {% endif %}
                        
                        {% if not review.reviewer_comments and not review.employee_comments %}
                        <p class="text-muted mb-0">No comments have been added yet.</p>
                        {% endif %}
                    </div>
                </div>
                
                <!-- Action Buttons -->
                <div class="d-flex justify-content-between">
                    <a href="{% url 'hr:performance_review_list' %}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Back to List
                    </a>
                    <div>
                        {% if review.status != 'COMPLETED' %}
                        <a href="{% url 'hr:performance_review_update' review.id %}" class="btn btn-primary">
                            <i class="fas fa-edit"></i> Edit Review
                        </a>
                        {% endif %}
                        
                        {% if review.status == 'IN_PROGRESS' %}
                        <a href="{% url 'hr:complete_performance_review' review.id %}" class="btn btn-success">
                            <i class="fas fa-check-circle"></i> Complete Review
                        </a>
                        {% endif %}
                        
                        {% if review.status != 'COMPLETED' %}
                        <a href="{% url 'hr:performance_review_delete' review.id %}" class="btn btn-danger">
                            <i class="fas fa-trash"></i> Delete
                        </a>
                        {% endif %}
                    </div>
                </div>
            </div>
            <!-- end panel-body -->
        </div>
        <!-- end panel -->
    </div>
    <!-- end col-8 -->
    
    <!-- begin col-4 -->
    <div class="col-xl-4">
        <!-- Employee Information -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">Employee Information</h5>
            </div>
            <div class="card-body">
                <div class="d-flex align-items-center mb-3">
                    <div class="avatar avatar-lg me-3">
                        <img src="{% static 'img/user/default-avatar.jpg' %}" alt="{{ review.employee.get_full_name }}" class="rounded-circle">
                    </div>
                    <div>
                        <h5 class="mb-0">{{ review.employee.get_full_name }}</h5>
                        <p class="text-muted mb-0">{{ review.employee.job_title }}</p>
                    </div>
                </div>
                
                <table class="table table-borderless">
                    <tbody>
                        <tr>
                            <th width="40%">Employee ID:</th>
                            <td>{{ review.employee.employee_id }}</td>
                        </tr>
                        <tr>
                            <th>Department:</th>
                            <td>
                                {% if review.employee.department %}
                                {{ review.employee.department.name }}
                                {% else %}
                                Not assigned
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Manager:</th>
                            <td>
                                {% if review.employee.manager %}
                                {{ review.employee.manager.get_full_name }}
                                {% else %}
                                Not assigned
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Hire Date:</th>
                            <td>{{ review.employee.hire_date|date:"F d, Y" }}</td>
                        </tr>
                        <tr>
                            <th>Employment Status:</th>
                            <td>{{ review.employee.get_employment_status_display }}</td>
                        </tr>
                    </tbody>
                </table>
                
                <a href="{% url 'hr:employee_detail' review.employee.id %}" class="btn btn-sm btn-outline-primary w-100">
                    <i class="fas fa-user"></i> View Full Profile
                </a>
            </div>
        </div>
        
        <!-- Review History -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">Review History</h5>
            </div>
            <div class="card-body">
                <div class="timeline">
                    {% for event in review_history %}
                    <div class="timeline-item">
                        <div class="timeline-date">{{ event.timestamp|date:"F d, Y H:i" }}</div>
                        <div class="timeline-content">
                            <h6 class="mb-1">{{ event.title }}</h6>
                            <p class="mb-0">{{ event.description }}</p>
                            {% if event.user %}
                            <small class="text-muted">By {{ event.user.get_full_name }}</small>
                            {% endif %}
                        </div>
                    </div>
                    {% empty %}
                    <p class="text-muted mb-0">No history available.</p>
                    {% endfor %}
                </div>
            </div>
        </div>
        
        <!-- Previous Reviews -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">Previous Reviews</h5>
            </div>
            <div class="card-body">
                <div class="list-group list-group-flush">
                    {% for prev_review in previous_reviews %}
                    <a href="{% url 'hr:performance_review_detail' prev_review.id %}" class="list-group-item list-group-item-action">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-1">{{ prev_review.get_review_type_display }}</h6>
                                <p class="mb-1 text-muted">{{ prev_review.period_start|date:"M d, Y" }} - {{ prev_review.period_end|date:"M d, Y" }}</p>
                            </div>
                            <div>
                                {% if prev_review.overall_score %}
                                <div class="score-badge 
                                    {% if prev_review.overall_score >= 4.5 %}score-excellent
                                    {% elif prev_review.overall_score >= 3.5 %}score-good
                                    {% elif prev_review.overall_score >= 2.5 %}score-average
                                    {% elif prev_review.overall_score >= 1.5 %}score-needs-improvement
                                    {% else %}score-poor{% endif %}">
                                    {{ prev_review.overall_score }}
                                </div>
                                {% else %}
                                <span class="badge bg-secondary">N/A</span>
                                {% endif %}
                            </div>
                        </div>
                    </a>
                    {% empty %}
                    <div class="text-center py-3">
                        <p class="mb-0">No previous reviews found.</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        
        <!-- Related Documents -->
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Related Documents</h5>
            </div>
            <div class="card-body">
                <div class="list-group list-group-flush">
                    {% for document in related_documents %}
                    <a href="{{ document.file.url }}" class="list-group-item list-group-item-action" target="_blank">
                        <div class="d-flex align-items-center">
                            <div class="me-3">
                                <i class="fas fa-file-pdf fa-2x text-danger"></i>
                            </div>
                            <div>
                                <h6 class="mb-1">{{ document.title }}</h6>
                                <p class="mb-0 text-muted">{{ document.uploaded_at|date:"M d, Y" }}</p>
                            </div>
                        </div>
                    </a>
                    {% empty %}
                    <div class="text-center py-3">
                        <p class="mb-0">No related documents found.</p>
                    </div>
                    {% endfor %}
                </div>
                
                {% if review.status != 'COMPLETED' %}
                <div class="mt-3">
                    <a href="{% url 'hr:upload_review_document' review.id %}" class="btn btn-sm btn-outline-primary w-100">
                        <i class="fas fa-upload"></i> Upload Document
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    <!-- end col-4 -->
</div>
<!-- end row -->
{% endblock %}

{% block js %}
<script src="{% static 'plugins/chart.js/dist/Chart.min.js' %}"></script>
<script>
    $(document).ready(function() {
        // Radar Chart for Performance Categories
        {% if categories %}
        var ctx = document.getElementById('scoreRadarChart').getContext('2d');
        var scoreRadarChart = new Chart(ctx, {
            type: 'radar',
            data: {
                labels: [
                    {% for category in categories %}
                    '{{ category.name }}',
                    {% endfor %}
                ],
                datasets: [{
                    label: 'Performance Score',
                    data: [
                        {% for category in categories %}
                        {{ category.score }},
                        {% endfor %}
                    ],
                    backgroundColor: 'rgba(45, 98, 237, 0.2)',
                    borderColor: 'rgba(45, 98, 237, 1)',
                    pointBackgroundColor: 'rgba(45, 98, 237, 1)',
                    pointBorderColor: '#fff',
                    pointHoverBackgroundColor: '#fff',
                    pointHoverBorderColor: 'rgba(45, 98, 237, 1)'
                }]
            },
            options: {
                scale: {
                    ticks: {
                        beginAtZero: true,
                        max: 5
                    }
                },
                legend: {
                    position: 'bottom'
                }
            }
        });
        {% endif %}
    });
</script>
{% endblock %}