{% extends 'interns/base.html' %}

{% block title %}Evaluate Performance - InternMS{% endblock %}

{% block page_title %}
<i class="fas fa-star"></i> Performance Evaluation
{% endblock %}

{% block breadcrumb %}
<a href="{% url 'home' %}">Home</a> / <a href="{% url 'intern_list' %}">Interns</a> / Evaluate Performance
{% endblock %}

{% block content %}
<!-- Compact Header -->
<div class="card" style="margin-bottom: 1rem; padding: 1rem;">
    <div style="display: flex; justify-content: space-between; align-items: center;">
        <div>
            <h2 style="color: #00d4ff; margin: 0; font-size: 1.4rem;">Performance Evaluation</h2>
            <p style="opacity: 0.8; margin: 0; font-size: 0.9rem;">Assess intern performance and provide feedback</p>
        </div>
        <div>
            <a href="{% url 'intern_list' %}" class="btn btn-secondary" style="padding: 0.5rem 0.75rem; font-size: 0.9rem;">
                <i class="fas fa-arrow-left"></i> Back to Interns
            </a>
        </div>
    </div>
</div>

<!-- Compact Form -->
<div class="card" style="padding: 1.5rem;">
    <form method="post" style="max-width: 800px;">
        {% csrf_token %}
        
        <!-- Form Grid -->
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem;">
            <!-- Intern Selection -->
            <div class="form-group" style="margin-bottom: 0;">
                <label for="{{ form.intern.id_for_label }}" style="display: block; margin-bottom: 0.5rem; color: #00d4ff; font-weight: 500; font-size: 0.9rem;">
                    <i class="fas fa-user"></i> Select Intern
                </label>
                {{ form.intern }}
                {% if form.intern.errors %}
                    <div style="color: #ff4757; font-size: 0.8rem; margin-top: 0.25rem;">
                        {{ form.intern.errors.0 }}
                    </div>
                {% endif %}
            </div>
            
            <!-- Performance Score -->
            <div class="form-group" style="margin-bottom: 0;">
                <label for="{{ form.score.id_for_label }}" style="display: block; margin-bottom: 0.5rem; color: #00d4ff; font-weight: 500; font-size: 0.9rem;">
                    <i class="fas fa-chart-line"></i> Performance Score (1-10)
                </label>
                {{ form.score }}
                <div style="display: flex; justify-content: space-between; margin-top: 0.25rem; font-size: 0.75rem; opacity: 0.7;">
                    <span style="color: #ff4757;">1-3: Needs Work</span>
                    <span style="color: #ffa502;">4-6: Meets Expectations</span>
                    <span style="color: #2ed573;">7-10: Exceeds</span>
                </div>
                {% if form.score.errors %}
                    <div style="color: #ff4757; font-size: 0.8rem; margin-top: 0.25rem;">
                        {{ form.score.errors.0 }}
                    </div>
                {% endif %}
            </div>
        </div>
        
        <!-- Feedback Field -->
        <div class="form-group" style="margin-bottom: 1.5rem;">
            <label for="{{ form.feedback.id_for_label }}" style="display: block; margin-bottom: 0.5rem; color: #00d4ff; font-weight: 500; font-size: 0.9rem;">
                <i class="fas fa-comments"></i> Detailed Feedback
            </label>
            {{ form.feedback }}
            <small style="opacity: 0.7; font-size: 0.8rem; display: block; margin-top: 0.25rem;">
                Provide constructive feedback on strengths, areas for improvement, and specific examples
            </small>
            {% if form.feedback.errors %}
                <div style="color: #ff4757; font-size: 0.8rem; margin-top: 0.25rem;">
                    {{ form.feedback.errors.0 }}
                </div>
            {% endif %}
        </div>
        
        <!-- Action Buttons -->
        <div style="display: flex; gap: 1rem; justify-content: flex-start; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.1);">
            <button type="submit" class="btn" style="padding: 0.75rem 1.5rem; font-size: 0.9rem;">
                <i class="fas fa-save"></i> Submit Evaluation
            </button>
            <a href="{% url 'intern_list' %}" class="btn btn-secondary" style="padding: 0.75rem 1.5rem; font-size: 0.9rem;">
                <i class="fas fa-times"></i> Cancel
            </a>
        </div>
    </form>
</div>

<!-- Compact Guidelines -->
<div class="card" style="padding: 1rem; margin-top: 1rem;">
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">
        <!-- Evaluation Criteria -->
        <div>
            <h4 style="color: #2ed573; margin: 0 0 0.75rem 0; font-size: 0.95rem;">
                <i class="fas fa-clipboard-check"></i> What to Evaluate
            </h4>
            <ul style="margin: 0; padding-left: 1rem; font-size: 0.8rem; opacity: 0.8;">
                <li style="margin-bottom: 0.25rem;">Technical skills and code quality</li>
                <li style="margin-bottom: 0.25rem;">Problem-solving approach</li>
                <li style="margin-bottom: 0.25rem;">Communication and collaboration</li>
                <li style="margin-bottom: 0.25rem;">Initiative and learning attitude</li>
                <li style="margin-bottom: 0.25rem;">Meeting deadlines and requirements</li>
            </ul>
        </div>
        
        <!-- Scoring Guide -->
        <div>
            <h4 style="color: #ffa502; margin: 0 0 0.75rem 0; font-size: 0.95rem;">
                <i class="fas fa-star"></i> Scoring Guide
            </h4>
            <div style="font-size: 0.8rem; opacity: 0.8;">
                <div style="display: flex; justify-content: space-between; margin-bottom: 0.25rem;">
                    <span style="color: #ff4757;">1-3:</span>
                    <span>Below expectations, needs improvement</span>
                </div>
                <div style="display: flex; justify-content: space-between; margin-bottom: 0.25rem;">
                    <span style="color: #ffa502;">4-6:</span>
                    <span>Meets expectations, satisfactory</span>
                </div>
                <div style="display: flex; justify-content: space-between; margin-bottom: 0.25rem;">
                    <span style="color: #2ed573;">7-8:</span>
                    <span>Exceeds expectations, strong</span>
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <span style="color: #00d4ff;">9-10:</span>
                    <span>Outstanding, exceptional</span>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Form styling to match the compact design */
input, textarea, select {
    width: 100%;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 0.9rem;
    transition: border-color 0.3s ease;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #00d4ff;
    box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.1);
}

textarea {
    min-height: 120px;
    resize: vertical;
}

select option {
    background: #1a1a1a;
    color: #e0e0e0;
}

/* Score input styling */
input[type="number"] {
    text-align: center;
    font-weight: bold;
    font-size: 1.1rem;
}

/* Success message styling */
.messages {
    margin-bottom: 1rem;
}

.messages .alert {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.alert-success {
    background: rgba(46, 213, 115, 0.1);
    border: 1px solid rgba(46, 213, 115, 0.3);
    color: #2ed573;
}

.alert-error {
    background: rgba(255, 71, 87, 0.1);
    border: 1px solid rgba(255, 71, 87, 0.3);
    color: #ff4757;
}
</style>

<script>
// Auto-focus first field
document.addEventListener('DOMContentLoaded', function() {
    const firstSelect = document.querySelector('select');
    if (firstSelect) {
        firstSelect.focus();
    }
});

// Form validation feedback
document.querySelector('form').addEventListener('submit', function(e) {
    const requiredFields = this.querySelectorAll('input[required], select[required], textarea[required]');
    let hasErrors = false;
    
    requiredFields.forEach(field => {
        if (!field.value.trim()) {
            field.style.borderColor = '#ff4757';
            hasErrors = true;
        } else {
            field.style.borderColor = 'rgba(0, 212, 255, 0.3)';
        }
    });
    
    if (hasErrors) {
        e.preventDefault();
        // Scroll to first error
        const firstError = this.querySelector('input[style*="ff4757"], select[style*="ff4757"], textarea[style*="ff4757"]');
        if (firstError) {
            firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
            firstError.focus();
        }
    }
});

// Score input validation and visual feedback
const scoreInput = document.querySelector('input[name="score"]');
if (scoreInput) {
    scoreInput.addEventListener('input', function() {
        const value = parseInt(this.value);
        
        // Reset styles
        this.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
        
        if (value >= 1 && value <= 10) {
            if (value <= 3) {
                this.style.backgroundColor = 'rgba(255, 71, 87, 0.1)';
            } else if (value <= 6) {
                this.style.backgroundColor = 'rgba(255, 165, 2, 0.1)';
            } else if (value <= 8) {
                this.style.backgroundColor = 'rgba(46, 213, 115, 0.1)';
            } else {
                this.style.backgroundColor = 'rgba(0, 212, 255, 0.1)';
            }
        }
    });
    
    // Restrict input to 1-10
    scoreInput.addEventListener('blur', function() {
        const value = parseInt(this.value);
        if (value < 1) this.value = 1;
        if (value > 10) this.value = 10;
    });
}

// Dynamic feedback suggestions based on score
scoreInput?.addEventListener('change', function() {
    const feedbackField = document.querySelector('textarea[name="feedback"]');
    const score = parseInt(this.value);
    
    if (feedbackField && !feedbackField.value && score) {
        let suggestion = '';
        
        if (score <= 3) {
            suggestion = 'Areas for improvement:\n- \n- \n\nRecommendations:\n- \n- ';
        } else if (score <= 6) {
            suggestion = 'Strengths:\n- \n- \n\nAreas for growth:\n- \n- ';
        } else if (score <= 8) {
            suggestion = 'Strong performance in:\n- \n- \n\nContinue developing:\n- \n- ';
        } else {
            suggestion = 'Outstanding achievements:\n- \n- \n\nExceptional qualities:\n- \n- ';
        }
        
        // Only suggest if field is empty
        if (confirm('Would you like to use a feedback template based on the score?')) {
            feedbackField.value = suggestion;
            feedbackField.focus();
        }
    }
});
</script>
{% endblock %}