@extends('layouts.app')

@section('content')
<div class="container">
    <div class="evaluation-header">
        <h1 class="evaluation-title"><i class="fas fa-edit"></i> Edit Evaluation</h1>
    </div>

    <div class="evaluation-form-container">
        <form action="{{ route('evaluations.update', $evaluation->id) }}" method="POST">
            @csrf
            @method('PUT')
            
            <div class="form-section">
                <h3 class="section-title"><i class="fas fa-info-circle"></i> Evaluation Details</h3>
                
                <div class="form-group">
                    <label class="form-label">Student ID</label>
                    <input type="text" class="form-control" value="{{ $evaluation->student_id }}" readonly>
                </div>
                
                <div class="form-group">
                    <label class="form-label">Competition</label>
                    <input type="text" class="form-control" value="{{ $evaluation->competition->ecd_title }}" readonly>
                </div>
                
                <div class="form-group">
                    <label class="form-label">Category</label>
                    <input type="text" class="form-control" value="{{ $evaluation->category->name }}" readonly>
                </div>
            </div>

            <div class="form-section">
                <h3 class="section-title"><i class="fas fa-chart-line"></i> Evaluation</h3>
                
                <div class="form-group">
                    <label for="score" class="form-label">Score (0-{{ $evaluation->category->total_marks }})</label>
                    <div class="score-input">
                        <input type="range" class="form-control-range" 
                               name="score" id="score" 
                               min="0" max="{{ $evaluation->category->total_marks }}" 
                               step="1" value="{{ old('score', $evaluation->score) }}" 
                               oninput="updateScoreValue(this.value, 'scoreValue')">
                        <span id="scoreValue" class="score-display">{{ old('score', $evaluation->score) }}</span>
                    </div>
                    <div class="score-labels">
                        <span>0%</span>
                        <span>50%</span>
                        <span>100%</span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="comments" class="form-label">Comments</label>
                    <textarea class="form-control" name="comments" rows="3">{{ old('comments', $evaluation->comments) }}</textarea>
                </div>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn btn-submit">
                    <i class="fas fa-save"></i> Update Evaluation
                </button>
                <a href="{{ route('evaluations.index') }}" class="btn btn-cancel">
                    <i class="fas fa-times"></i> Cancel
                </a>
            </div>
        </form>
    </div>
</div>

<script>
// Update score display
function updateScoreValue(val, elementId) {
    const element = document.getElementById(elementId);
    element.innerText = val;
    
    const maxScore = parseInt(document.getElementById('score').max);
    const percentage = (val / maxScore) * 100;
    
    if (percentage < 40) {
        element.style.color = '#f44336';
    } else if (percentage < 70) {
        element.style.color = '#ff9800';
    } else {
        element.style.color = '#4caf50';
    }
}

document.addEventListener('DOMContentLoaded', function() {
    // Initialize score display
    const initialScore = document.getElementById('score').value;
    updateScoreValue(initialScore, 'scoreValue');
});
</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