@extends('layouts.admin')
@section('title', 'Training Programs')
@section('content')
<div class="p-4 sm:p-6 lg:ml-64"><div class="max-w-7xl mx-auto">
  <h1 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900 mb-2">Training Programs</h1>
  <p class="text-sm text-gray-600 mb-4">Plan sessions, enroll employees, and track completion.</p>

  <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
    <div class="bg-white border rounded p-4"><p class="text-xs text-gray-500">Programs</p><p class="text-xl sm:text-2xl lg:text-3xl font-bold">0</p></div>
    <div class="bg-white border rounded p-4"><p class="text-xs text-gray-500">Sessions</p><p class="text-xl sm:text-2xl lg:text-3xl font-bold">0</p></div>
    <div class="bg-white border rounded p-4"><p class="text-xs text-gray-500">Enrollments</p><p class="text-xl sm:text-2xl lg:text-3xl font-bold">0</p></div>
  </div>

  <div class="mt-6 bg-white border rounded p-4">
    <h2 class="text-sm font-semibold mb-3">Actions</h2>
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
      <a href="#" class="text-[11px] px-3 py-2 border rounded hover:bg-gray-50">Create Program</a>
      <a href="#" class="text-[11px] px-3 py-2 border rounded hover:bg-gray-50">Schedule Session</a>
      <a href="#" class="text-[11px] px-3 py-2 border rounded hover:bg-gray-50">Enroll Employees</a>
      <a href="#" class="text-[11px] px-3 py-2 border rounded hover:bg-gray-50">Track Completion</a>
    </div>
  </div>
</div></div>
@endsection