@extends('layouts.app')

@section('content')
<div class="space-y-6">
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-3xl font-bold text-gray-800">Operations Dashboard</h2>
        <span class="bg-gray-100 text-gray-800 text-sm font-medium px-4 py-1.5 rounded-full">Operational User</span>
    </div>

    <!-- Quick Actions -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="card p-6 border-l-4 border-blue-500">
            <h3 class="font-bold text-lg mb-2">Student Management</h3>
            <p class="text-sm text-gray-500 mb-4">Create students, manage records, and handle allocations.</p>
            <div class="flex gap-2">
                <button class="px-4 py-2 bg-blue-500 text-white rounded text-sm hover:bg-blue-600 transition">Create Student</button>
                <button class="px-4 py-2 bg-gray-100 text-gray-600 rounded text-sm hover:bg-gray-200 transition">Import Excel</button>
            </div>
        </div>

        <div class="card p-6 border-l-4 border-purple-500">
            <h3 class="font-bold text-lg mb-2">Academic Data</h3>
            <p class="text-sm text-gray-500 mb-4">Manage Departments, Semesters, and Subjects.</p>
            <div class="flex gap-2">
                <button class="px-4 py-2 bg-purple-500 text-white rounded text-sm hover:bg-purple-600 transition">Manage Data</button>
            </div>
        </div>

        <div class="card p-6 border-l-4 border-red-500">
            <h3 class="font-bold text-lg mb-2">Recycle Bin</h3>
            <p class="text-sm text-gray-500 mb-4">Restore or permanently delete soft-deleted records.</p>
            <button class="px-4 py-2 bg-red-100 text-red-600 rounded text-sm hover:bg-red-200 transition font-medium">View Deleted Items</button>
        </div>
    </div>
</div>
@endsection