@extends('layouts.app')

@section('content')
<div class="container">
    <div class="evaluation-header">
        <h1 class="evaluation-title"><i class="fas fa-star"></i> Add Evaluation</h1>
        <div class="header-actions">
    <a href="{{ route('evaluations.competition_student', ['competitionId' => $competition->id ?? null]) }}" class="btn btn-premium">
        <i class="fas fa-eye"></i> View Evaluation
    </a>
</div>
    </div>

    @if($errors->any())
        <div class="alert alert-danger alert-elegant">
            <i class="fas fa-exclamation-circle"></i> 
            <ul>
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @if(session('success'))
        <div class="alert alert-success alert-elegant">
            <i class="fas fa-check-circle"></i> {{ session('success') }}
        </div>
    @endif

    <div class="evaluation-form-container">
        <form action="{{ route('evaluations.store') }}" method="POST">
            @csrf
             <input type="hidden" name="competition_id" value="{{ $competition->id }}">
            
            <input type="hidden" name="evaluator_id" value="{{ $evaluatorId }}">
            
            <div class="form-section">
                <h3 class="section-title"><i class="fas fa-user-graduate"></i> Student Details</h3>
                
                <div class="form-group">
                    <label for="student-select" class="form-label">Select Student</label>
                    <select class="form-control" name="student_id" id="student-select" required>
                        <option value="" selected disabled>Select a student</option>
                        <!-- Students will be loaded via API -->
                    </select>
                    <i class="fas fa-user select-icon"></i>
                </div>
            </div>

            <div class="form-section">
                <h3 class="section-title"><i class="fas fa-tag"></i> Evaluation Categories</h3>
                
                <div class="categories-container">
                    @foreach($competition->categories as $category)
                    <div class="category-card">
                        <div class="category-header">
                            <h5>{{ $category->name }}</h5>
                            <span class="total-marks">Max: {{ $category->total_marks }}</span>
                        </div>
                        
                        <div class="category-evaluation">
                            <div class="form-group">
                                <label for="score-{{ $category->id }}" class="form-label">Score (0-{{ $category->total_marks }})</label>
                                <div class="score-input">
                                    <input type="range" class="form-control-range" 
                                           name="scores[{{ $category->id }}]" 
                                           id="score-{{ $category->id }}" 
                                           min="0" max="{{ $category->total_marks }}" 
                                           step="1" value="0" 
                                           oninput="updateScoreValue(this.value, 'scoreValue-{{ $category->id }}')">
                                    <span id="scoreValue-{{ $category->id }}" class="score-display">0</span>
                                </div>
                                <div class="score-labels">
                                    <span>0%</span>
                                    <span>50%</span>
                                    <span>100%</span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="comments-{{ $category->id }}" class="form-label">Comments</label>
                                <textarea class="form-control" name="comments[{{ $category->id }}]" 
                                          id="comments-{{ $category->id }}" rows="2" 
                                          placeholder="Your feedback..."></textarea>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            <div class="form-actions">
    <button type="submit" class="btn btn-submit" id="submitBtn">
        <i class="fas fa-check"></i> Submit Evaluation
    </button>
    <a href="{{ route('evaluations.competition_student', ['competitionId' => $competition->id ?? null]) }}" class="btn btn-cancel">
        <i class="fas fa-times"></i> Cancel
    </a>
</div>
        </form>
    </div>
</div>

<script>
// Update score display for each category
function updateScoreValue(val, elementId) {
    const element = document.getElementById(elementId);
    element.innerText = val;
    
    const maxScore = parseInt(element.parentElement.previousElementSibling.max);
    const percentage = (val / maxScore) * 100;
    
    // Update color based on percentage
    if (percentage < 40) {
        element.style.color = '#f44336';
    } else if (percentage < 70) {
        element.style.color = '#ff9800';
    } else {
        element.style.color = '#4caf50';
    }
    
    // Update width of the slider thumb
    const slider = document.getElementById(elementId.replace('scoreValue', 'score'));
    slider.style.setProperty('--thumb-width', `${percentage}%`);
}

// In the JavaScript section of the view, replace the student loading code with:
document.addEventListener('DOMContentLoaded', function() {
    // Initialize all score values to 0
    document.querySelectorAll('[id^="scoreValue-"]').forEach(el => {
        el.innerText = '0';
    });
    
    // Get the students data passed from the controller
    const studentsWithEvaluations = @json($studentsWithEvaluations ?? []);
    const studentSelect = document.getElementById('student-select');
    
    // Populate student select
    studentSelect.innerHTML = '<option value="" selected disabled>Select a student</option>';
    studentsWithEvaluations.forEach(student => {
        const option = new Option(`${student.name} (${student.id})`, student.id);
        studentSelect.add(option);
    });
    
    // Handle student selection change to pre-fill existing evaluations
    studentSelect.addEventListener('change', function() {
        const selectedStudentId = this.value;
        if (!selectedStudentId) return;
        
        // Find the selected student
        const selectedStudent = studentsWithEvaluations.find(s => s.id === selectedStudentId);
        
        if (selectedStudent && selectedStudent.evaluations) {
            // Pre-fill the form with existing evaluation data
            selectedStudent.evaluations.forEach(evaluation => {
                const scoreInput = document.querySelector(`input[name="scores[${evaluation.category_id}]"]`);
                const scoreValue = document.getElementById(`scoreValue-${evaluation.category_id}`);
                const commentTextarea = document.querySelector(`textarea[name="comments[${evaluation.category_id}]"]`);
                
                if (scoreInput && scoreValue) {
                    scoreInput.value = evaluation.score;
                    scoreValue.innerText = evaluation.score;
                    updateScoreValue(evaluation.score, `scoreValue-${evaluation.category_id}`);
                }
                
                if (commentTextarea && evaluation.comments) {
                    commentTextarea.value = evaluation.comments;
                }
            });
        } else {
            // Reset all inputs if no existing evaluation
            document.querySelectorAll('input[type="range"]').forEach(input => {
                input.value = 0;
                const scoreValueId = input.id.replace('score-', 'scoreValue-');
                document.getElementById(scoreValueId).innerText = '0';
                updateScoreValue(0, scoreValueId);
            });
            
            document.querySelectorAll('textarea').forEach(textarea => {
                textarea.value = '';
            });
        }
    });

    // Competition status check
    if ("{{ $competition->start_date > now() ? 'upcoming' : ($competition->end_date < now() ? 'closed' : 'active') }}" !== 'active') {
        document.getElementById('submitBtn').disabled = true;
    }
});
</script>

<style>
:root {
    --primary: #4361ee;
    --primary-light: #e0e7ff;
    --secondary: #3a0ca3;
    --accent: #4cc9f0;
    --success: #4caf50;
    --warning: #ff9800;
    --danger: #f44336;
    --dark: #2b2d42;
    --light: #f8f9fa;
    --gray: #6c757d;
}

/* Base Layout */
.container {
    max-width: 900px;
    margin: 20px auto;
    padding: 0 15px;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header */
.evaluation-header {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.evaluation-title {
    font-size: 1.4rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Form Container */
.evaluation-form-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Form Sections */
.form-section {
    margin-bottom: 1.5rem;
}

.section-title {
    color: var(--primary);
    font-size: 1.1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Form Elements */
.form-group {
    margin-bottom: 1.2rem;
    position: relative;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--dark);
}

.form-control {
    width: 100%;
    padding: 0.6rem 1rem 0.6rem 2.2rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 0.95rem;
}

.select-icon, .input-icon {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
}

/* Category Cards */
.categories-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 35vh;
    overflow-y: auto;
    padding-right: 5px;
}

.category-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.05);
    padding: 1rem;
    border-left: 3px solid var(--accent);
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}

.category-header h5 {
    margin: 0;
    color: var(--secondary);
    font-size: 1rem;
}

.total-marks {
    background: var(--primary-light);
    color: var(--secondary);
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Score Input */
.score-input {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
}

.score-input input[type="range"] {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: #e0e0e0;
    --thumb-width: 0%;
    background: linear-gradient(90deg, var(--success) 0% var(--thumb-width), #e0e0e0 var(--thumb-width) 100%);
}

.score-input input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.score-display {
    font-weight: 600;
    min-width: 30px;
    text-align: center;
    font-size: 1rem;
    color: var(--primary);
}

.score-labels {
    display: flex;
    justify-content: space-between;
    color: var(--gray);
    font-size: 0.75rem;
    margin-top: -0.5rem;
}

/* Buttons */
.btn-premium {
    background: linear-gradient(to right, #ff8a00, #da1b60);
    color: white;
    border: none;
    font-weight: 500;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(218, 27, 96, 0.3);
    transition: all 0.3s ease;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.btn-submit {
    background: linear-gradient(to right, var(--primary), var(--secondary));
    color: white;
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: 6px;
    font-size: 0.95rem;
}

.btn-cancel {
    background: white;
    color: var(--danger);
    border: 1px solid var(--danger);
    padding: 0.6rem 1.5rem;
    border-radius: 6px;
    font-size: 0.95rem;
}

/* Alerts */
.alert-elegant {
    border-left: 3px solid;
    padding: 0.8rem;
    margin-bottom: 1rem;
    border-radius: 4px;
}

.alert-danger {
    border-color: var(--danger);
    background-color: #fff8f8;
}

.alert-success {
    border-color: var(--success);
    background-color: #f8fff8;
}

/* Responsive */
@media (max-width: 768px) {
    .container {
        padding: 0 10px;
        height: auto;
    }
    
    .evaluation-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .categories-container {
        max-height: none;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .btn-submit, .btn-cancel {
        width: 100%;
    }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}
</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@endsection