@extends('layouts.app')

@section('content')
<div class="container">
    <div class="evaluation-card">
        <div class="evaluation-header">
            <h1><i class="fas fa-trophy"></i> Evaluation Competition Detail</h1>
            <p class="subheader">View and manage competition details</p>
        </div>
        
        <div class="evaluation-body">
            <h2 class="evaluation-title">{{ $evaluationDetail->ecd_title }}</h2>
            <p class="evaluation-meta"><i class="fas fa-book"></i> Course: {{ $evaluationDetail->course->name }}</p>
            <p class="evaluation-text"><strong><i class="fas fa-info-circle"></i> Details:</strong> {{ $evaluationDetail->ecd_detail }}</p>
            <p class="evaluation-text"><strong><i class="fas fa-calendar-alt"></i> Entry Date/Time:</strong> {{ $evaluationDetail->entry_date_time }}</p>
        </div>

        <div class="evaluation-actions">
            <a href="{{ route('evaluation-details.edit', $evaluationDetail->id) }}" class="btn-edit"><i class="fas fa-edit"></i> Edit</a>
            <form action="{{ route('evaluation-details.destroy', $evaluationDetail->id) }}" method="POST" class="inline-form">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn-delete"><i class="fas fa-trash"></i> Delete</button>
            </form>
            <a href="{{ route('evaluation-details.index') }}" class="btn-back"><i class="fas fa-arrow-left"></i> Back to List</a>
        </div>
    </div>
</div>

<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">

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

<!-- Styles -->
<style>
    .container {
        max-width: 800px;
        margin: 30px auto;
        font-family: 'Inter', sans-serif;
    }
    .evaluation-card {
        background: #fff;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-left: 5px solid #3a0ca3;
    }
    .evaluation-header {
        text-align: center;
        margin-bottom: 20px;
    }
    .evaluation-header h1 {
        font-size: 24px;
        color: #3a0ca3;
    }
    .subheader {
        color: #4361ee;
        font-size: 14px;
    }
    .evaluation-body {
        padding: 15px;
    }
    .evaluation-title {
        font-size: 22px;
        font-weight: bold;
        color: #3a0ca3;
    }
    .evaluation-meta {
        font-size: 16px;
        color: #4361ee;
    }
    .evaluation-text {
        margin: 10px 0;
        font-size: 16px;
    }
    .evaluation-actions {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }
    .btn-edit, .btn-delete, .btn-back {
        padding: 10px 15px;
        border-radius: 5px;
        text-decoration: none;
        font-weight: bold;
        display: inline-flex;
        align-items: center;
    }
    .btn-edit {
        background: #ffca28;
        color: #3a0ca3;
    }
    .btn-delete {
        background: #dc3545;
        color: #fff;
        border: none;
        cursor: pointer;
    }
    .btn-back {
        background: #6c757d;
        color: #fff;
    }
    .btn-edit i, .btn-delete i, .btn-back i {
        margin-right: 5px;
    }
    .inline-form {
        display: inline;
    }
</style>
@endsection