@extends('layouts.app')

@section('content')
<div class="container-fluid px-4 py-4">
    <div class="card shadow-lg border-0">
        <!-- Header Section -->
        <div class="card-header bg-gradient-primary text-white py-3">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="mb-1">
                        <i class="fas fa-chart-bar me-2"></i>
                        {{ $competition->ecd_title }} - Evaluation Report
                    </h3>
                    <p class="mb-0 small opacity-75">
                        <i class="fas fa-book me-1"></i> {{ $competition->course->name ?? 'N/A' }}
                    </p>
                </div>
                <span class="badge bg-white text-primary fs-6 shadow-sm">
                    <i class="fas fa-id-card me-1"></i> {{ $student_id }}
                </span>
            </div>
        </div>

        <!-- Evaluation Table -->
        <div class="card-body p-0">
            <div class="table-responsive rounded-bottom">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-dark">
                        <tr>
                            <th width="18%" class="ps-4 py-3">Evaluator</th>
                            @foreach($categories as $category)
                            <th class="text-center py-3">
                                <div class="fw-normal">{{ $category->name }}</div>
                                <div class="small fw-light opacity-75">(Max: {{ $category->total_marks }})</div>
                            </th>
                            @endforeach
                            <th width="22%" class="text-center py-3">Feedback</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($evaluationData as $data)
                        <tr class="border-top">
                            <td class="ps-4 fw-bold text-primary">
                                <i class="fas fa-user-edit me-2 text-muted"></i>
                                {{ $data['evaluator_number'] }}
                            </td>
                            
                            @foreach($categories as $category)
                            <td class="text-center">
                                @if(isset($data['marks'][$category->id]))
                                @php
                                    $score = $data['marks'][$category->id];
                                    $percentage = ($score / $category->total_marks) * 100;
                                @endphp
                                <div class="d-flex flex-column align-items-center">
                                    <span class="badge rounded-pill bg-opacity-10 
                                        {{ $percentage >= 70 ? 'bg-success text-success' : 
                                           ($percentage >= 50 ? 'bg-warning text-warning' : 'bg-danger text-danger') }}
                                        px-3 py-2 mb-1 fw-bold">
                                        {{ $score }}/{{ $category->total_marks }}
                                    </span>
                                    <small class="text-muted">
                                        {{ number_format($percentage, 1) }}%
                                    </small>
                                </div>
                                @else
                                <span class="text-muted">-</span>
                                @endif
                            </td>
                            @endforeach
                            
                            <td class="text-center">
                                @if(count($data['comments']) > 0)
                                <button class="btn btn-sm btn-outline-primary rounded-pill view-comments" 
                                    data-bs-toggle="modal" 
                                    data-bs-target="#commentsModal"
                                    data-evaluator="{{ $data['evaluator_number'] }}"
                                    data-comments="{{ implode('|||', $data['comments']) }}">
                                    <i class="fas fa-comment-alt me-1"></i>
                                    View Feedback
                                    <span class="badge bg-primary ms-1">{{ count($data['comments']) }}</span>
                                </button>
                                @else
                                <span class="text-muted small">No feedback</span>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Overall Performance Card -->
            <div class="mt-4 p-4 bg-light rounded-3 border">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <div class="d-flex align-items-center">
                            <div class="bg-primary bg-opacity-10 p-3 rounded-circle me-3">
                                <i class="fas fa-star fa-2x text-primary"></i>
                            </div>
                            <div>
                                <h4 class="mb-1">Overall Performance</h4>
                                <p class="mb-0 text-muted small">Combined evaluation score</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="d-flex align-items-center justify-content-end">
                            <div class="text-end me-3">
                                <div class="text-muted small">Final Score</div>
                                <h2 class="mb-0 fw-bold 
                                    {{ $overallPercentage >= 70 ? 'text-success' : 
                                       ($overallPercentage >= 50 ? 'text-warning' : 'text-danger') }}">
                                    {{ $overallPercentage }}%
                                </h2>
                            </div>
                            <div class="progress rounded-pill" style="height: 20px; width: 150px;">
                                <div class="progress-bar progress-bar-striped 
                                    {{ $overallPercentage >= 70 ? 'bg-success' : 
                                       ($overallPercentage >= 50 ? 'bg-warning' : 'bg-danger') }}" 
                                    role="progressbar" 
                                    style="width: {{ $overallPercentage }}%"
                                    aria-valuenow="{{ $overallPercentage }}" 
                                    aria-valuemin="0" 
                                    aria-valuemax="100">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Comments Modal -->
<div class="modal fade" id="commentsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-gradient-primary text-white">
                <h5 class="modal-title" id="modalTitle">
                    <i class="fas fa-comments me-2"></i>
                    Evaluation Feedback
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4" id="modalComments">
                <!-- Comments will be inserted here -->
            </div>
            <div class="modal-footer bg-light">
                <button type="button" class="btn btn-primary px-4 rounded-pill" data-bs-dismiss="modal">
                    <i class="fas fa-check me-1"></i> Done
                </button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const commentModal = new bootstrap.Modal('#commentsModal');
    const modalTitle = document.getElementById('modalTitle');
    const modalBody = document.getElementById('modalComments');
    
    document.querySelectorAll('.view-comments').forEach(button => {
        button.addEventListener('click', function() {
            const evaluator = this.getAttribute('data-evaluator');
            const comments = this.getAttribute('data-comments').split('|||');
            
            modalTitle.textContent = `Feedback from ${evaluator}`;
            modalBody.innerHTML = comments.map((comment, index) => `
                <div class="comment-card mb-3 p-3 bg-white rounded border-start border-3 border-primary shadow-sm">
                    <div class="d-flex">
                        <div class="flex-shrink-0">
                            <span class="badge bg-primary rounded-circle me-3" style="width: 24px; height: 24px; line-height: 24px;">${index + 1}</span>
                        </div>
                        <div class="flex-grow-1">
                            <p class="mb-0">${comment}</p>
                            <div class="text-end mt-2">
                                <small class="text-muted">
                                    <i class="far fa-user-circle me-1"></i> ${evaluator}
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            `).join('');
            
            commentModal.show();
        });
    });
});
</script>

<style>
    .card {
        border: none;
        border-radius: 0.75rem;
        overflow: hidden;
    }
    .card-header {
        border-bottom: none;
    }
    .bg-gradient-primary {
        background: linear-gradient(135deg, #1e88e5, #0d47a1);
    }
    .table th {
        vertical-align: middle;
        position: sticky;
        top: 0;
        background-color: #2c3e50;
    }
    .table-hover tbody tr:hover {
        background-color: rgba(30, 136, 229, 0.05);
    }
    .badge {
        font-weight: 500;
        letter-spacing: 0.5px;
    }
    .progress {
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    }
    .progress-bar {
        transition: width 0.6s ease;
    }
    .comment-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .comment-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
    }
    .rounded-bottom {
        border-bottom-left-radius: 0.75rem !important;
        border-bottom-right-radius: 0.75rem !important;
    }
    .rounded-pill {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .bg-opacity-10 {
        background-color: rgba(var(--bs-primary-rgb), 0.1);
    }
</style>
@endsection