@extends('layouts.app')

@section('content')
<div class="container">
    <!-- Header Section -->
    <div class="evaluation-header">
        <h1 class="evaluation-title">
            <i class="fas fa-list-alt"></i> Evaluation Records
            @if($competitionId)
                <span class="badge bg-primary">
                    Competition: {{ $competition->ecd_title ?? 'N/A' }}
                </span>
            @endif
        </h1>
        <div class="header-actions">
            <a href="{{ route('evaluations.competitions') }}" class="btn btn-premium">
                <i class="fas fa-trophy"></i> View All Competitions
            </a>
            <a href="{{ route('evaluation-details.index') }}" class="btn btn-premium">
                <i class="fas fa-list"></i> Manage Competitions
            </a>
        </div>
    </div>

    @if($summaryData->isEmpty())
        <div class="alert alert-info mt-4">
            <i class="fas fa-info-circle"></i> No evaluation summaries found for this competition.
        </div>
    @else
        <div class="evaluation-table-container">
            <div class="table-header-actions">
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" id="summarySearch" placeholder="Search by student ID...">
                </div>
                <div class="table-actions">
                    <button class="btn-export" onclick="exportToExcel()">
                        <i class="fas fa-file-excel"></i> Export to Excel
                    </button>
                    <button class="btn-print" onclick="window.print()">
                        <i class="fas fa-print"></i> Print
                    </button>
                </div>
            </div>

            <div class="table-responsive">
                <table class="evaluation-table" id="evaluationTable">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Student ID</th>
                            <th>Categories</th>
                            <th>Overall Score</th>
                            <th>Evaluators</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($summaryData as $index => $summary)
                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td>
                                <div class="student-info">
                                    <i class="fas fa-user-graduate"></i>
                                    <span>{{ $summary['student_id'] }}</span>
                                </div>
                            </td>
                            <td>
                                <div class="categories-container">
                                    @foreach($summary['categories'] as $categoryId => $category)
                                    <div class="category-item">
                                        <div class="category-header">
                                            <span class="category-name">{{ $category['name'] }}</span>
                                            <span class="score-percentage">{{ number_format($category['percentage'], 2) }}%</span>
                                        </div>
                                        <div class="category-details">
                                            <span class="score-value">{{ $category['score'] }}/{{ $category['total_marks'] }}</span>
                                            <div class="score-container">
                                                <div class="score-progress" style="--percentage: {{ $category['percentage'] }}%"></div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </td>
                            <td>
                                <div class="overall-score">
                                    <div class="score-container">
                                        <div class="score-progress" style="--percentage: {{ $summary['overall_percentage'] }}%">
                                            <span class="score-value-inside">{{ number_format($summary['overall_percentage'], 2) }}%</span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="evaluators-count">
                                    <span class="completed">{{ $summary['evaluators_count'] }}</span>
                                    <span class="separator">/</span>
                                    <span class="total">{{ $summary['total_evaluators'] }}</span>
                                </div>
                            </td>
                            <td>
                                <div class="evaluation-status">
                                    @if($summary['evaluators_count'] >= $summary['total_evaluators'])
                                        <span class="badge-completed">
                                            <i class="fas fa-check-circle"></i> Completed
                                        </span>
                                    @elseif($summary['evaluators_count'] > 0)
                                        <span class="badge-in-progress">
                                            <i class="fas fa-spinner"></i> In Progress
                                        </span>
                                    @else
                                        <span class="badge-pending">
                                            <i class="fas fa-clock"></i> Pending
                                        </span>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            
            <div class="table-footer">
                <div class="showing-entries">
                    Showing {{ count($summaryData) }} entries
                </div>
            </div>
        </div>
    @endif
</div>

<style>
/* Modern Color Scheme */
:root {
    --primary: #4361ee;
    --primary-light: #eef2ff;
    --primary-dark: #3730a3;
    --secondary: #06b6d4;
    --success: #10b981;
    --success-light: #d1fae5;
    --warning: #f59e0b;
    --danger: #ef4444;
    --dark: #1f2937;
    --light: #f9fafb;
    --gray: #6b7280;
    --light-gray: #e5e7eb;
    --white: #ffffff;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Styles */
.container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}

/* Header Styles */
.evaluation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--white);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
}

.evaluation-title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.5px;
}

.evaluation-title .badge {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    margin-left: 1rem;
    background-color: rgba(255,255,255,0.2);
    border-radius: 50px;
}

.header-actions {
    display: flex;
    gap: 0.75rem;
}

/* Button Styles */
.btn-premium {
    background: linear-gradient(135deg, #f97316, #ec4899);
    color: white;
    border: none;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
    text-decoration: none;
    font-size: 0.95rem;
}

.btn-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* Alert Styles */
.alert {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-info {
    background-color: #e0f2fe;
    color: #0369a1;
    border-left: 4px solid #0369a1;
}

/* Table Container */
.evaluation-table-container {
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

/* Table Header Actions */
.table-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.search-box {
    position: relative;
    min-width: 250px;
    flex: 1;
}

.search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray);
    font-size: 0.9rem;
}

.search-box input {
    width: 100%;
    padding: 0.6rem 1rem 0.6rem 2.5rem;
    border: 1px solid var(--light-gray);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: var(--transition);
    background-color: var(--light);
}

.search-box input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
    outline: none;
    background-color: var(--white);
}

.table-actions {
    display: flex;
    gap: 0.75rem;
}

.btn-export, .btn-print {
    background: linear-gradient(135deg, var(--success), #34d399);
    color: var(--white);
    border: none;
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--transition);
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-print {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.btn-export:hover, .btn-print:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Table Styles */
.evaluation-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.95rem;
}

.evaluation-table th {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--white);
    padding: 14px 16px;
    text-align: left;
    position: sticky;
    top: 0;
    font-weight: 600;
}

.evaluation-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--light-gray);
    vertical-align: middle;
}

.evaluation-table tr:last-child td {
    border-bottom: none;
}

.evaluation-table tr:hover {
    background-color: var(--primary-light);
}

/* Cell Styles */
.student-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.student-info i {
    color: var(--primary);
}

/* Categories Container */
.categories-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.category-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background-color: var(--light);
    border-radius: 8px;
    padding: 12px;
    transition: var(--transition);
}

.category-item:hover {
    background-color: var(--white);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

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

.category-name {
    font-weight: 600;
    color: var(--dark);
}

.score-percentage {
    font-weight: 700;
    color: var(--success);
    background-color: var(--success-light);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.9rem;
}

.category-details {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.score-value {
    min-width: 80px;
    font-weight: 500;
    color: var(--dark);
    background-color: var(--light-gray);
    padding: 4px 8px;
    border-radius: 4px;
    text-align: center;
}

.score-container {
    flex-grow: 1;
    position: relative;
    height: 28px;
    background-color: var(--light-gray);
    border-radius: 14px;
    overflow: hidden;
}

.score-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--success), var(--secondary));
    width: var(--percentage);
    transition: width 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12px;
}

.score-value-inside {
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
    text-shadow: 0 0 2px rgba(0,0,0,0.3);
    position: relative;
    z-index: 2;
}

.overall-score .score-container {
    min-width: 150px;
}

.overall-score .score-progress {
    background: linear-gradient(90deg, var(--primary), var(--secondary));
}

/* Evaluators Count Style */
.evaluators-count {
    font-weight: 600;
    color: var(--dark);
    background-color: var(--light-gray);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    display: inline-block;
}

.evaluators-count .completed {
    color: var(--success);
    font-weight: 700;
}

.evaluators-count .separator {
    margin: 0 4px;
    color: var(--gray);
}

.evaluators-count .total {
    color: var(--dark);
}

/* Evaluation Status Badges */
.evaluation-status .badge-completed,
.evaluation-status .badge-in-progress,
.evaluation-status .badge-pending {
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.evaluation-status .badge-completed {
    background-color: var(--success-light);
    color: var(--success);
}

.evaluation-status .badge-in-progress {
    background-color: #fef3c7;
    color: #92400e;
}

.evaluation-status .badge-pending {
    background-color: #e0f2fe;
    color: #0369a1;
}

/* Table Footer */
.table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--light-gray);
}

.showing-entries {
    font-size: 0.9rem;
    color: var(--gray);
}

/* Responsive Design */
@media (max-width: 992px) {
    .category-details {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .score-container {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .evaluation-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .header-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .table-header-actions {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .search-box {
        width: 100%;
    }
    
    .evaluation-table {
        display: block;
        overflow-x: auto;
    }
}

@media (max-width: 576px) {
    .container {
        padding: 0 1rem;
    }
    
    .evaluation-header {
        padding: 1.25rem;
    }
    
    .evaluation-title {
        font-size: 1.5rem;
    }
    
    .btn-premium, .btn-export, .btn-print {
        padding: 0.6rem 1.25rem;
        font-size: 0.9rem;
    }
    
    .evaluation-table-container {
        padding: 1rem;
    }
    
    .category-name {
        font-size: 0.9rem;
    }
    
    .score-percentage {
        font-size: 0.8rem;
    }
    
    .table-actions {
        width: 100%;
        justify-content: space-between;
    }
    
    .btn-export, .btn-print {
        flex: 1;
        justify-content: center;
    }
}

/* Print Styles */
@media print {
    body * {
        visibility: hidden;
    }
    .evaluation-table-container, .evaluation-table-container * {
        visibility: visible;
    }
    .evaluation-table-container {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        box-shadow: none;
    }
    .table-header-actions {
        display: none;
    }
    .evaluation-header {
        display: none;
    }
}
</style>

<script>
// Search functionality
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('summarySearch').addEventListener('keyup', function() {
        const input = this.value.toLowerCase();
        const rows = document.querySelectorAll('.evaluation-table tbody tr');
        
        rows.forEach(row => {
            const studentId = row.querySelector('.student-info span').textContent.toLowerCase();
            row.style.display = studentId.includes(input) ? '' : 'none';
        });
    });
});

// Export to Excel functionality
function exportToExcel() {
    const table = document.getElementById('evaluationTable');
    const html = table.outerHTML;
    
    // Create a Blob with the table data
    const blob = new Blob([html], {type: 'application/vnd.ms-excel'});
    
    // Create a download link
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = 'evaluation_results.xls';
    a.click();
    
    // Clean up
    URL.revokeObjectURL(a.href);
}
</script>

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