@extends('layouts.app')

@section('content')
<div class="container">
    <div class="evaluation-header">
        <h1 class="evaluation-title"><i class="fas fa-tags"></i> Evaluation Categories</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>
                <button class="btn btn-premium" data-bs-toggle="modal" data-bs-target="#addCategoryModal">
                    <i class="fas fa-plus"></i> Add Categories
                </button>
                <a href="{{ route('categories.index') }}" class="btn btn-premium">
                    <i class="fas fa-list"></i> Categories
                </a>
                <a href="{{ route('evaluations.competitions') }}" class="btn btn-premium">
                    <i class="fas fa-star me-1"></i>Evaluations Competition Details
                </a>
            </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>ID</th>
                    <th>Competition</th>
                    <th>Category Name</th>
                    <th>Description</th>
                    <th>Total Marks</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($categories as $category)
                <tr>
                    <td>{{ $category->id }}</td>
                    <td>
                        <a href="{{ route('evaluation-details.show', $category->ecd_id) }}" class="competition-link">
                            {{ $category->competition->ecd_title ?? 'N/A' }}
                        </a>
                    </td>
                    <td>{{ $category->name }}</td>
                    <td>{{ $category->description }}</td>
                    <td>{{ $category->total_marks }}</td>
                    <td>
                        <div class="action-buttons">
                            <a href="{{ route('categories.edit', $category->id) }}" class="btn-edit">
                                <i class="fas fa-edit"></i>
                            </a>
                            <form action="{{ route('categories.destroy', $category->id) }}" method="POST">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn-delete">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<!-- Add Category Modal -->
<div class="modal fade" id="addCategoryModal" tabindex="-1" aria-labelledby="addCategoryModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addCategoryModalLabel">Add New Category</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('categories.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="ecd_id" class="form-label">Select Competition</label>
                        <select class="form-control" name="ecd_id" required>
                            <option value="">Select Competition</option>
                            @foreach($competitions as $competition)
                                <option value="{{ $competition->id }}" {{ request('competition_id') == $competition->id ? 'selected' : '' }}>
                                    {{ $competition->ecd_title }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="name" class="form-label">Category Name</label>
                        <input type="text" class="form-control" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        <textarea class="form-control" name="description"></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="total_marks" class="form-label">Total Marks</label>
                        <input type="number" class="form-control" name="total_marks" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save Category</button>
                </div>
            </form>
        </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