@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">
                <i class="fas fa-tags text-indigo-600 mr-2"></i>Evaluation Categories
            </h1>
            <p class="text-gray-600 mt-1">Manage all evaluation categories</p>
        </div>
        <div class="flex space-x-2 mt-4 md:mt-0">
            <a href="{{ route('categories.create') }}" class="btn btn-primary">
                <i class="fas fa-plus mr-2"></i> Add Category
            </a>
        </div>
    </div>

    @if(session('success'))
        <div class="bg-green-50 border-l-4 border-green-500 p-4 mb-6 rounded">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-check-circle text-green-500"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-green-700">
                        {{ session('success') }}
                    </p>
                </div>
            </div>
        </div>
    @endif

    <div class="bg-white shadow rounded-lg overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            ID
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Competition
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Category Name
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Max Marks
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Passing Marks
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Actions
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @foreach($categories as $category)
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ $category->id }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <a href="{{ route('evaluation-details.show', $category->ecd_id) }}" class="text-indigo-600 hover:text-indigo-900">
                                {{ $category->competition->ecd_title ?? 'N/A' }}
                            </a>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ $category->name }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ $category->max_marks }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ $category->passing_marks }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                            <a href="{{ route('categories.edit', $category->id) }}" class="text-indigo-600 hover:text-indigo-900 mr-3">
                                <i class="fas fa-edit"></i>
                            </a>
                            <form action="{{ route('categories.destroy', $category->id) }}" method="POST" class="inline">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-red-600 hover:text-red-900" onclick="return confirm('Are you sure?')">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </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-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(218, 27, 96, 0.4);
    color: white;
}

.competition-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.competition-link:hover {
    text-decoration: underline;
    color: var(--secondary);
}

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

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

.btn-edit, .btn-delete {
    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-edit {
    background-color: var(--warning);
}

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

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

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

<!-- Bootstrap Modal Script -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
@endsection