@extends('layouts.app')

@section('content')
<div class="container-fluid px-4 py-3">
    <!-- Header Section -->
    <div class="evaluation-header mb-4 p-4 rounded-3 shadow-sm">
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
            <div class="d-flex align-items-center mb-3 mb-md-0">
                <i class="fas fa-user-graduate fa-2x me-3 text-white"></i>
                <h1 class="evaluation-title mb-0 text-white">Student Evaluation Portal</h1>
            </div>
<div class="search-container">
    <form method="GET" action="{{ route('evaluations.competition_student') }}" class="d-flex">
        <div class="input-group">
            <input type="text" name="competition_id" class="form-control" 
                   placeholder="Enter Competition ID" value="{{ request('competition_id') }}">
            <button class="btn btn-premium" type="submit">
                <i class="fas fa-search me-1"></i> Search
            </button>
        </div>
    </form>
</div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="card border-0 shadow-sm rounded-3 overflow-hidden">
        <div class="card-body p-0">
            @if(request('competition_id'))
                @if($competitions->isEmpty())
                    <div class="empty-state p-5 text-center">
                        <i class="fas fa-trophy fa-4x mb-4 text-light"></i>
                        <h3 class="text-muted">Competition Not Found</h3>
                        <p class="text-muted">No competition found with ID: {{ request('competition_id') }}</p>
                    </div>
                @else
                    <div class="table-responsive">
                        <table class="table evaluation-table table-hover align-middle mb-0">
                            <thead class="table-primary">
                                <tr>
                                    <th class="ps-4">#</th>
                                    <th>Competition</th>
                                    <th>Course</th>
                                    <th class="text-center">Evaluators</th>
                                    <th class="text-center">Status</th>
                                    <th class="text-center">Timeline</th>
                                    <th class="text-end pe-4">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($competitions as $competition)
                                <tr class="evaluation-row">
                                    <td class="ps-4 fw-bold text-primary">1</td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-trophy me-2 text-warning"></i>
                                            <span>{{ $competition->ecd_title }}</span>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="course-badge">
                                            <i class="fas fa-book-open me-1"></i>
                                            {{ $competition->course->name ?? 'N/A' }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        <div class="d-flex justify-content-center">
                                            <span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2">
                                                <i class="fas fa-users me-1"></i>
                                                {{ $competition->evaluations_count }}/{{ $competition->total_evaluators }}
                                            </span>
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        <span class="badge status-badge bg-{{ $competition->status_class }}">
                                            {{ $competition->status_display }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        <small class="text-muted">
                                            <i class="far fa-calendar-alt me-1"></i>
                                            {{ $competition->formatted_start_date }}<br>
                                            <i class="far fa-clock me-1"></i>
                                            {{ $competition->formatted_end_date }}
                                        </small>
                                    </td>
                                    <td class="pe-4">
                                        <div class="d-flex justify-content-end gap-2">
                                            @if($competition->show_evaluate_button)
                                            <a href="{{ route('evaluations.create', ['competition_id' => $competition->id]) }}"
                                               class="btn btn-evaluate btn-sm px-3">
                                                <i class="fas fa-edit me-1"></i> Evaluate
                                            </a>
                                            @endif
                                            
                                            <a href="{{ route('evaluations.student_details', ['competitionId' => $competition->id]) }}" 
                                               class="btn btn-results btn-sm px-3">
                                                <i class="fas fa-chart-pie me-1"></i> Results
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            @else
                <div class="empty-state p-5 text-center">
                    <i class="fas fa-trophy fa-4x mb-4 text-light"></i>
                    <h3 class="text-muted">Search Competition</h3>
                    <p class="text-muted">Please enter a competition ID to view details</p>
                </div>
            @endif
        </div>
    </div>
</div>

<style>

/* Luxury Color Palette */
:root {
  --royal-blue: #2a3f9d;
  --deep-teal: #0d6c6c;
  --gold-accent: #d4af37;
  --pearl-white: #f8f9fa;
  --silver-gray: #e9ecef;
  --velvet-black: #212529;
  --emerald-green: #28a745;
  --ruby-red: #dc3545;
  --sapphire-blue: #007bff;
  --platinum: #d3d3d3;
  
  --gradient-primary: linear-gradient(135deg, var(--royal-blue), var(--sapphire-blue));
  --gradient-premium: linear-gradient(45deg, #d4af37, #f5d062);
  --gradient-success: linear-gradient(45deg, var(--emerald-green), #5cb85c);
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
  
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Luxurious Base Styles */
body {
  background-color: var(--pearl-white);
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  color: var(--velvet-black);
  line-height: 1.6;
}

.container-fluid {
  max-width: 1400px;
  padding: 2rem;
}

/* Premium Header */
.evaluation-header {
  background: var(--gradient-primary);
  border: none;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 1.75rem 2rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}

.evaluation-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 70%);
  transform: rotate(30deg);
}

.evaluation-title {
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.5px;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: relative;
  display: flex;
  align-items: center;
}

.evaluation-title i {
  margin-right: 1rem;
  font-size: 1.8rem;
  color: rgba(255,255,255,0.9);
}

/* Luxury Table Design */
.evaluation-table-container {
  background: white;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border: 1px solid var(--silver-gray);
}

.evaluation-table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(248, 249, 250, 0.5);
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.evaluation-table th {
  background: var(--gradient-primary);
  color: white;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  padding: 1.25rem 1.5rem;
  border: none;
  position: sticky;
  top: 0;
}

.evaluation-table td {
  padding: 1.5rem 1.5rem;
  vertical-align: middle;
  border-top: 1px solid rgba(233, 236, 239, 0.8);
  transition: var(--transition);
}

/* Premium Badges & Labels */
.course-badge {
  background-color: rgba(42, 63, 157, 0.1);
  color: var(--royal-blue);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(42, 63, 157, 0.2);
}

.course-badge i {
  margin-right: 0.5rem;
  font-size: 0.9rem;
  color: var(--royal-blue);
}

.status-badge {
  min-width: 100px;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 50px;
  box-shadow: var(--shadow-sm);
}

/* Luxury Buttons */
.btn-premium {
  background: var(--gradient-premium);
  color: #5e4200;
  border: none;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0.75rem 1.75rem;
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
}

.btn-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.4);
  color: #5e4200;
}

.btn-premium i {
  margin-right: 0.5rem;
}

.btn-evaluate {
  background: var(--gradient-primary);
  color: white;
  border: none;
  font-weight: 500;
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
}

.btn-results {
  background: var(--gradient-success);
  color: white;
  border: none;
  font-weight: 500;
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
}

.btn-evaluate i, .btn-results i {
  margin-right: 0.5rem;
  font-size: 0.9rem;
}

.btn-evaluate:hover, .btn-results:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Status Colors */
.bg-success {
  background-color: var(--emerald-green) !important;
}

.bg-secondary {
  background-color: var(--deep-teal) !important;
}

.bg-info {
  background-color: var(--sapphire-blue) !important;
}

/* Empty State Design */
.empty-state {
  padding: 3rem;
  text-align: center;
  background-color: white;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.empty-state i {
  font-size: 4rem;
  color: var(--platinum);
  margin-bottom: 1.5rem;
}

.empty-state h3 {
  color: var(--velvet-black);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.empty-state p {
  color: var(--gray);
  margin-bottom: 1.5rem;
}

.empty-state .btn {
  border-radius: 50px;
  padding: 0.5rem 1.5rem;
}

/* Hover Effects */
.evaluation-row:hover {
  background-color: rgba(42, 63, 157, 0.03) !important;
  transform: translateX(5px);
}

/* Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.evaluation-row {
  animation: fadeInUp 0.5s ease forwards;
  opacity: 0;
}

.evaluation-row:nth-child(1) { animation-delay: 0.1s; }
.evaluation-row:nth-child(2) { animation-delay: 0.2s; }
.evaluation-row:nth-child(3) { animation-delay: 0.3s; }
.evaluation-row:nth-child(4) { animation-delay: 0.4s; }

/* Responsive Design */
@media (max-width: 992px) {
  .container-fluid {
    padding: 1.5rem;
  }
  
  .evaluation-title {
    font-size: 1.75rem;
  }
  
  .evaluation-table th,
  .evaluation-table td {
    padding: 1rem;
  }
}

@media (max-width: 768px) {
  .container-fluid {
    padding: 1rem;
  }
  
  .evaluation-header {
    padding: 1.5rem;
  }
  
  .evaluation-title {
    font-size: 1.5rem;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .btn {
    width: 100%;
    justify-content: center;
  }
  
  .empty-state {
    padding: 2rem;
  }
}

@media (max-width: 576px) {
  .evaluation-title {
    font-size: 1.3rem;
  }
  
  .evaluation-table th {
    font-size: 0.7rem;
    padding: 0.75rem;
  }
  
  .evaluation-table td {
    padding: 0.75rem;
    font-size: 0.9rem;
  }
  
  .btn {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
  }
}
</style>

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