@extends('layouts.app')

@section('title', 'Dashboard')
@section('page-title', 'Company Portal')
@section('page-subtitle', 'View your company\'s HR overview')

@section('content')
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
        {{-- Welcome Card --}}
        <div class="lg:col-span-2 card-static animate-fade-up">
            <div class="card-body">
                <div class="flex items-center gap-4 mb-4">
                    <div class="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center">
                        <svg class="w-6 h-6 text-primary-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
                    </div>
                    <div>
                        <h2 class="font-display text-xl font-semibold text-gray-900">
                            Welcome, {{ auth()->user()->name }}
                        </h2>
                        <p class="text-sm text-gray-500">
                            You have read-only access to your company's HR data. View reports, employee directory, and notices.
                        </p>
                    </div>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 mt-6">
                    <a href="/employees" class="quick-action">
                        <div class="quick-action-icon bg-primary-100 text-primary-600">
                            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
                        </div>
                        <span>Employee Directory</span>
                    </a>
                    <a href="/notices" class="quick-action">
                        <div class="quick-action-icon bg-warning-100 text-warning-600">
                            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/></svg>
                        </div>
                        <span>Notices</span>
                    </a>
                    <a href="/reports" class="quick-action">
                        <div class="quick-action-icon bg-success-100 text-success-600">
                            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
                        </div>
                        <span>Reports</span>
                    </a>
                </div>
            </div>
        </div>

        {{-- Notices Preview --}}
        <div class="card-static animate-fade-up" style="animation-delay: 0.1s;">
            <div class="card-header">
                <h3 class="card-header-title">Latest Notices</h3>
                <a href="/notices" class="btn-ghost">View all &rarr;</a>
            </div>
            <div class="card-body">
                <p class="text-sm text-gray-400 text-center py-8">No notices yet</p>
            </div>
        </div>
    </div>
@endsection