@extends('layouts.app')
@section('title', 'Project Categories - Admin')

@section('content')
<div class="page-header">
    <h2>Project Categories</h2>
    <p style="font-size: 0.8rem; color: #64748b; margin: 0;">Manage FYP project categories</p>
</div>

<div class="form-card mb-4">
    <div class="card-header">Create Category</div>
    <div class="card-body">
        <form method="POST" action="{{ route('admin.categories.store') }}">
            @csrf
            <div class="row g-2 align-items-end">
                <div class="col-md-8">
                    <label class="form-label">Category  <span class="text-danger">*</span></label>
                    <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" placeholder="e.g. Artificial Intelligence" required>
                    @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-4">
                    <button type="submit" class="btn btn-primary w-100">Add</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="table-card">
    <div class="card-header">Category List</div>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>#</th>
                <th>Category </th>
                <th style="width: 160px;">Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse($categories as $i => $cat)
            <tr>
                <td>{{ $categories->firstItem() + $i }}</td>
                <td>{{ $cat->name }}</td>
                <td>
                    <button type="button" class="btn btn-sm btn-outline-primary"
                        onclick="editCategory({{ $cat->id }}, '{{ $cat->name }}')">Edit</button>
                    <form method="POST" action="{{ route('admin.categories.destroy', $cat) }}" style="display:inline;" onsubmit="return confirm('Delete this category?');">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
                    </form>
                </td>
            </tr>
            @empty
            <tr><td colspan="3" class="empty-state">No categories found.</td></tr>
            @endforelse
        </tbody>
    </table>
    <div class="px-3 py-2">{{ $categories->links() }}</div>
</div>

<div class="modal fade" id="editCategoryModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content" style="border-radius: 4px;">
            <div class="modal-header" style="background: #f8fafc;">
                <h5 class="modal-title" style="font-size:0.9rem;font-weight:600;">Edit Category</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="editCategoryForm" method="POST">
                @csrf @method('PUT')
                <div class="modal-body">
                    <label class="form-label">Category</label>
                    <input type="text" name="name" id="editCategoryName" class="form-control" required>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-sm btn-primary">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
function editCategory(id, name) {
    document.getElementById('editCategoryForm').action = '/admin/categories/' + id;
    document.getElementById('editCategoryName').value = name;
    new bootstrap.Modal(document.getElementById('editCategoryModal')).show();
}
</script>
@endpush
@endsection