@extends('layouts.app')
@section('title', 'Dashboard')
@section('content')

<!-- Stat Cards Row -->
<div class="grid grid-cols-1 md:grid-cols-5 gap-stack-md mb-gutter">
  <div class="surface-card p-stack-lg rounded-xl flex flex-col justify-between h-full">
    <div class="flex items-start justify-between mb-4">
      <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
        <span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">group</span>
      </div>
    </div>
    <div>
      <h3 class="text-headline-lg font-headline-lg text-on-surface mb-1">1,184</h3>
      <p class="text-label-md font-label-md text-outline">Active Learners</p>
    </div>
    <div class="mt-4">
      <span class="inline-flex items-center gap-1 text-[11px] font-bold text-green-600 bg-green-50 px-2 py-0.5 rounded">
        <span class="material-symbols-outlined text-[14px]">trending_up</span> 3.2%
      </span>
    </div>
  </div>

  <div class="surface-card p-stack-lg rounded-xl flex flex-col justify-between h-full">
    <div class="flex items-start justify-between mb-4">
      <div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center">
        <span class="material-symbols-outlined text-green-600" style="font-variation-settings: 'FILL' 1;">verified_user</span>
      </div>
    </div>
    <div>
      <h3 class="text-headline-lg font-headline-lg text-on-surface mb-1">92.6%</h3>
      <p class="text-label-md font-label-md text-outline">Compliance Rate</p>
    </div>
    <div class="mt-4">
      <span class="inline-flex items-center gap-1 text-[11px] font-bold text-green-600 bg-green-50 px-2 py-0.5 rounded">
        <span class="material-symbols-outlined text-[14px]">trending_up</span> 1.4%
      </span>
    </div>
  </div>

  <div class="surface-card p-stack-lg rounded-xl flex flex-col justify-between h-full">
    <div class="flex items-start justify-between mb-4">
      <div class="w-10 h-10 rounded-lg bg-orange-100 flex items-center justify-center">
        <span class="material-symbols-outlined text-orange-600" style="font-variation-settings: 'FILL' 1;">school</span>
      </div>
    </div>
    <div>
      <h3 class="text-headline-lg font-headline-lg text-on-surface mb-1">31</h3>
      <p class="text-label-md font-label-md text-outline">Published Courses</p>
    </div>
    <div class="mt-4">
      <span class="inline-flex items-center gap-1 text-[11px] font-bold text-on-secondary-container bg-secondary-container px-2 py-0.5 rounded">24 live</span>
    </div>
  </div>

  <div class="surface-card p-stack-lg rounded-xl flex flex-col justify-between h-full">
    <div class="flex items-start justify-between mb-4">
      <div class="w-10 h-10 rounded-lg bg-error-container flex items-center justify-center">
        <span class="material-symbols-outlined text-error" style="font-variation-settings: 'FILL' 1;">warning</span>
      </div>
    </div>
    <div>
      <h3 class="text-headline-lg font-headline-lg text-on-surface mb-1">47</h3>
      <p class="text-label-md font-label-md text-outline">Expiring &lt; 30 days</p>
    </div>
    <div class="mt-4">
      <span class="inline-flex items-center gap-1 text-[11px] font-bold text-error bg-error-container/50 px-2 py-0.5 rounded">Attention</span>
    </div>
  </div>

  <div class="surface-card p-stack-lg rounded-xl flex flex-col justify-between h-full">
    <div class="flex items-start justify-between mb-4">
      <div class="w-10 h-10 rounded-lg bg-yellow-100 flex items-center justify-center">
        <span class="material-symbols-outlined text-yellow-700" style="font-variation-settings: 'FILL' 1;">description</span>
      </div>
    </div>
    <div>
      <h3 class="text-headline-lg font-headline-lg text-on-surface mb-1">12</h3>
      <p class="text-label-md font-label-md text-outline">Policies Pending</p>
    </div>
    <div class="mt-4">
      <span class="inline-flex items-center gap-1 text-[11px] font-bold text-yellow-700 bg-yellow-50 px-2 py-0.5 rounded">Pending</span>
    </div>
  </div>
</div>

<!-- Performance & Quick Actions -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-gutter">
  <div class="lg:col-span-2 surface-card p-stack-lg rounded-xl">
    <div class="flex items-center justify-between mb-6">
      <div>
        <h3 class="text-headline-md font-headline-md text-on-surface">Course Performance</h3>
        <p class="text-label-md font-label-md text-outline">Completion rates over the last 7 days</p>
      </div>
      <button class="text-primary font-bold text-label-md hover:underline">View Analytics</button>
    </div>
    <div class="relative h-64 w-full flex items-end gap-2 pb-6 border-b border-outline-variant">
      @foreach(['Mon'=>45,'Tue'=>60,'Wed'=>85,'Thu'=>40,'Fri'=>92,'Sat'=>75,'Sun'=>55] as $day => $val)
        <div class="flex-1 {{ $day === 'Sat' ? 'bg-primary' : 'bg-primary/10' }} rounded-t-lg transition-all hover:opacity-80 relative group" style="height: {{ $val }}%;">
          <div class="absolute -top-8 left-1/2 -translate-x-1/2 bg-on-surface text-surface text-[10px] py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity">{{ $val }}%</div>
        </div>
      @endforeach
    </div>
    <div class="flex justify-between mt-2 text-outline text-[10px] uppercase font-bold tracking-tighter">
      <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
    </div>
  </div>

  <div class="space-y-stack-md">
    <div class="bg-primary text-on-primary p-stack-lg rounded-xl surface-card border-none relative overflow-hidden group">
      <div class="relative z-10">
        <h3 class="text-headline-md font-headline-md mb-2">New Course</h3>
        <p class="text-body-md font-body-md opacity-80 mb-6">Create a new learning path for your organization today.</p>
        <button class="bg-surface-container-lowest text-primary py-2 px-6 rounded-lg font-bold text-label-md hover:scale-105 transition-transform">Get Started</button>
      </div>
      <span class="material-symbols-outlined absolute -bottom-4 -right-4 text-[120px] opacity-10 rotate-12 transition-transform group-hover:rotate-0">add_task</span>
    </div>

    <div class="surface-card p-stack-lg rounded-xl">
      <h3 class="text-headline-md font-headline-md text-on-surface mb-4">Quick Links</h3>
      <div class="space-y-2">
        <a href="#" class="flex items-center gap-3 p-3 rounded-lg hover:bg-surface-container transition-colors group">
          <span class="material-symbols-outlined text-outline group-hover:text-primary">person_add</span>
          <span class="text-body-md font-body-md text-on-surface">Add New User</span>
        </a>
        <a href="#" class="flex items-center gap-3 p-3 rounded-lg hover:bg-surface-container transition-colors group">
          <span class="material-symbols-outlined text-outline group-hover:text-primary">upload_file</span>
          <span class="text-body-md font-body-md text-on-surface">Bulk Import Records</span>
        </a>
        <a href="#" class="flex items-center gap-3 p-3 rounded-lg hover:bg-surface-container transition-colors group">
          <span class="material-symbols-outlined text-outline group-hover:text-primary">mail</span>
          <span class="text-body-md font-body-md text-on-surface">Send Broadcast</span>
        </a>
      </div>
    </div>
  </div>
</div>

<!-- Pending Approvals & Recent Users -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-gutter mt-gutter">
  <div class="surface-card p-stack-lg rounded-xl">
    <div class="flex items-center justify-between mb-6">
      <h3 class="text-headline-md font-headline-md text-on-surface">Pending Approvals</h3>
      <span class="bg-yellow-50 text-yellow-700 px-3 py-1 rounded-full text-label-md font-bold">5 Action items</span>
    </div>
    <div class="space-y-4">
      <div class="flex items-center justify-between p-4 bg-surface-container-low rounded-lg border border-outline-variant/30">
        <div class="flex items-center gap-4">
          <div class="w-12 h-12 bg-surface-container rounded-lg flex items-center justify-center">
            <span class="material-symbols-outlined text-primary">verified</span>
          </div>
          <div>
            <p class="text-body-md font-bold text-on-surface">Course Certification Request</p>
            <p class="text-label-md font-label-md text-outline">David Miller • Advanced Cybersecurity</p>
          </div>
        </div>
        <div class="flex gap-2">
          <button class="p-2 text-error hover:bg-error-container rounded-full transition-colors"><span class="material-symbols-outlined">close</span></button>
          <button class="p-2 text-green-600 hover:bg-green-50 rounded-full transition-colors"><span class="material-symbols-outlined">check</span></button>
        </div>
      </div>
      <div class="flex items-center justify-between p-4 bg-surface-container-low rounded-lg border border-outline-variant/30">
        <div class="flex items-center gap-4">
          <div class="w-12 h-12 bg-surface-container rounded-lg flex items-center justify-center">
            <span class="material-symbols-outlined text-primary">policy</span>
          </div>
          <div>
            <p class="text-body-md font-bold text-on-surface">New Policy Acknowledgment</p>
            <p class="text-label-md font-label-md text-outline">IT Infrastructure Guidelines V2.0</p>
          </div>
        </div>
        <div class="flex gap-2">
          <button class="px-4 py-2 bg-primary text-on-primary rounded-lg text-label-md font-bold hover:opacity-90">Review</button>
        </div>
      </div>
    </div>
  </div>

  <div class="surface-card p-stack-lg rounded-xl">
    <div class="flex items-center justify-between mb-6">
      <h3 class="text-headline-md font-headline-md text-on-surface">Recent Users</h3>
      <button class="text-outline hover:text-primary transition-colors"><span class="material-symbols-outlined">more_horiz</span></button>
    </div>
    <div class="divide-y divide-outline-variant">
      <div class="py-4 flex items-center justify-between first:pt-0 last:pb-0">
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-full bg-secondary-container flex items-center justify-center text-primary font-bold">SJ</div>
          <div>
            <p class="text-body-md font-bold text-on-surface">Sarah Jenkins</p>
            <p class="text-label-md font-label-md text-outline">sarah.j@example.com</p>
          </div>
        </div>
        <div class="text-right">
          <p class="text-label-md font-label-md text-on-surface">2 mins ago</p>
          <p class="text-[10px] text-green-600 font-bold bg-green-50 px-2 rounded uppercase">Active</p>
        </div>
      </div>
      <div class="py-4 flex items-center justify-between">
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-full bg-secondary-container flex items-center justify-center text-primary font-bold">MR</div>
          <div>
            <p class="text-body-md font-bold text-on-surface">Michael Ross</p>
            <p class="text-label-md font-label-md text-outline">m.ross@example.com</p>
          </div>
        </div>
        <div class="text-right">
          <p class="text-label-md font-label-md text-on-surface">1 hour ago</p>
          <p class="text-[10px] text-green-600 font-bold bg-green-50 px-2 rounded uppercase">Active</p>
        </div>
      </div>
      <div class="py-4 flex items-center justify-between last:pb-0">
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-full bg-secondary-container flex items-center justify-center text-primary font-bold">ER</div>
          <div>
            <p class="text-body-md font-bold text-on-surface">Elena Rodriguez</p>
            <p class="text-label-md font-label-md text-outline">elena.rod@example.com</p>
          </div>
        </div>
        <div class="text-right">
          <p class="text-label-md font-label-md text-on-surface">3 hours ago</p>
          <p class="text-[10px] text-outline font-bold bg-surface-container px-2 rounded uppercase">Pending</p>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection