@extends('layouts.app')

@section('content')
<div class="container">
    <div class="evaluation-header">
        
        <h1 class="evaluation-title"><i class="fas fa-trophy"></i> Evaluation Competition Details</h1>
        @if(session('success'))
            <div class="alert alert-success alert-elegant">
                <i class="fas fa-check-circle"></i> {{ session('success') }}
            </div>
        @endif
        <div class="header-buttons">
            <div class="button-group">
                <a href="{{ route('evaluation-details.create') }}" class="btn btn-premium">
                    <i class="fas fa-plus"></i> Add Competition
                </a>
                <a href="{{ route('categories.index') }}" class="btn btn-premium">
                    <i class="fas fa-list"></i> Categories
                </a>
                <button class="btn btn-premium" data-bs-toggle="modal" data-bs-target="#addCategoryModal">
                    <i class="fas fa-plus"></i> Add Categories
                </button>
            </div>
            <div class="button-group">
                
                <a href="{{ route('evaluation-details.index') }}" class="btn btn-premium">
                    <i class="fas fa-trophy me-1"></i> Competitions
                </a>
            </div>
        </div>
    </div>

    <div class="evaluation-table-container">
        <table class="evaluation-table">
            <thead>
                <tr>
                    <th class="header-id">ID</th>
                    <th class="header-course">Course</th>
                    <th class="header-title">Title</th>
                    <th class="header-date">Entry Date/Time</th>
                    <th class="header-actions">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($details as $detail)
                <tr class="evaluation-row">
                    <td class="cell-id">{{ $detail->id }}</td>
                    <td class="cell-course">
                        <span class="course-badge">{{ $detail->course->name }}</span>
                    </td>
                    <td class="cell-title">{{ $detail->ecd_title }}</td>
                    <td class="cell-date">
                        <i class="far fa-calendar-alt"></i> {{ date('M d, Y', strtotime($detail->entry_date_time)) }}
                        <br>
                        <i class="far fa-clock"></i> {{ date('h:i A', strtotime($detail->entry_date_time)) }}
                    </td>
                    <td class="cell-actions">
                        <div class="action-buttons">
                            <a href="{{ route('evaluation-details.show', $detail->id) }}" class="btn-view">
                                <i class="fas fa-eye"></i>
                            </a>
                            <a href="{{ route('evaluation-details.edit', $detail->id) }}" class="btn-edit">
                                <i class="fas fa-edit"></i>
                            </a>
                            <form action="{{ route('evaluation-details.destroy', $detail->id) }}" method="POST">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn-delete">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                            </form>
                            <a href="{{ route('categories.index', ['competition_id' => $detail->id]) }}" class="btn btn-category" title="View Categories">
                                <i class="fas fa-tags"></i>
                            </a>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<style>
/* Unique Color Scheme */
:root {
    --primary: #4361ee;
    --secondary: #3a0ca3;
    --accent: #4fc3f7;
    --dark: #2d3142;
    --light: #f8f9fa;
    --success: #4caf50;
    --warning: #ff9800;
    --danger: #f44336;
}

/* Header Styles */
.evaluation-header {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 10px;
    color: white;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.evaluation-title {
    font-weight: 600;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Alert Style */
.alert-elegant {
    border-left: 4px solid var(--success);
    background-color: #f8fff8;
    color: var(--dark);
    border-radius: 4px;
}

/* Premium Button */
.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;
}

.btn-info {
    background: var(--accent);
    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(79, 195, 247, 0.3);
    transition: all 0.3s ease;
}

.btn-premium:hover, .btn-info:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(218, 27, 96, 0.4);
    color: white;
}

/* Table Container */
.evaluation-table-container {
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
    overflow: hidden;
    padding: 1rem;
}

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

.evaluation-table th {
    background-color: var(--primary);
    color: white;
    font-weight: 500;
    padding: 1rem;
    text-align: left;
}

.evaluation-table th:first-child {
    border-top-left-radius: 8px;
}

.evaluation-table th:last-child {
    border-top-right-radius: 8px;
}

.evaluation-row {
    transition: all 0.2s ease;
    border-bottom: 1px solid #eee;
}

.evaluation-row:hover {
    background-color: #f5f9ff;
}

.evaluation-table td {
    padding: 1.2rem 1rem;
    vertical-align: middle;
}

/* Cell Specific Styles */
.cell-id {
    font-weight: 600;
    color: var(--secondary);
}

.cell-course .course-badge {
    background-color: #e3f2fd;
    color: var(--secondary);
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-block;
}

.cell-date {
    color: #666;
    font-size: 0.9rem;
}

.cell-date i {
    margin-right: 5px;
    color: var(--primary);
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 8px;
}

.btn-view, .btn-edit, .btn-delete, .btn-category {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-view {
    background-color: var(--primary);
}

.btn-edit {
    background-color: var(--warning);
}

.btn-delete {
    background-color: var(--danger);
}

.btn-category {
    background-color: var(--success);
}

.btn-view:hover, .btn-edit:hover, .btn-delete:hover, .btn-category:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

.btn-evaluate {
    background: linear-gradient(to right, #ffc107, #ff9800);
    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(255, 152, 0, 0.3);
    transition: all 0.3s ease;
}

.btn-evaluate:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 152, 0, 0.4);
    color: white;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .evaluation-table {
        display: block;
        overflow-x: auto;
    }
    
    .action-buttons {
        flex-wrap: wrap;
    }
}

</style>

<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

@endsection