@extends('layouts.app')

@section('title', 'Dashboard')
@section('page-title', 'Dashboard')
@section('page-subtitle', 'Overview of your company operations')

@section('content')
    {{-- Stats Row --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6 animate-fade-up">
        <div class="stat-card">
            <div class="stat-icon bg-primary-100 text-primary-600">
                <svg class="w-5 h-5" 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"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
            </div>
            <div class="stat-value">{{ $stats['total_employees'] }}</div>
            <div class="stat-label">Total Employees</div>
        </div>

        <div class="stat-card">
            <div class="stat-icon bg-success-100 text-success-600">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
            </div>
            <div class="stat-value">{{ $stats['present_today'] }}</div>
            <div class="stat-label">Present Today</div>
        </div>

        <div class="stat-card">
            <div class="stat-icon bg-warning-100 text-warning-600">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            </div>
            <div class="stat-value">{{ $stats['pending_leaves'] }}</div>
            <div class="stat-label">Pending Leaves</div>
        </div>

        <div class="stat-card">
            <div class="stat-icon bg-accent-500/10 text-accent-600">
                <svg class="w-5 h-5" 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"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
            </div>
            <div class="stat-value">{{ $stats['active_notices'] }}</div>
            <div class="stat-label">Active Notices</div>
        </div>

        <div class="stat-card">
            <div class="stat-icon bg-danger-100 text-danger-500">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
            </div>
            <div class="stat-value">{{ $stats['pending_exits'] }}</div>
            <div class="stat-label">Active Exits</div>
        </div>

        <div class="stat-card">
            <div class="stat-icon {{ $stats['compliance_score'] >= 80 ? 'bg-success-100 text-success-600' : ($stats['compliance_score'] >= 50 ? 'bg-warning-100 text-warning-600' : 'bg-danger-100 text-danger-500') }}">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
            </div>
            <div class="stat-value">{{ $stats['compliance_score'] }}%</div>
            <div class="stat-label">Compliance Score</div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
        {{-- Recent Activity --}}
        <div class="lg:col-span-2 card-static animate-fade-up" style="animation-delay: 0.1s;">
            <div class="card-header">
                <h3 class="card-header-title">Recent Activity</h3>
            </div>
            <div class="card-body">
                @if($recentActivity->count() > 0)
                    <div class="space-y-3">
                        @foreach($recentActivity as $activity)
                        <div class="flex items-start gap-3">
                            <div class="w-2 h-2 rounded-full bg-primary-600 mt-1.5 flex-shrink-0"></div>
                            <div class="min-w-0 flex-1">
                                <p class="text-sm text-gray-700">{{ $activity->description }}</p>
                                <p class="text-xxs text-gray-400 mt-0.5">
                                    {{ $activity->user?->name ?? 'System' }} &middot; {{ $activity->created_at->diffForHumans() }}
                                </p>
                            </div>
                        </div>
                        @endforeach
                    </div>
                @else
                    <p class="text-sm text-gray-400 text-center py-8">No activity recorded yet</p>
                @endif
            </div>
        </div>

        {{-- Quick Actions --}}
        <div class="card-static animate-fade-up" style="animation-delay: 0.15s;">
            <div class="card-header">
                <h3 class="card-header-title">Quick Actions</h3>
            </div>
            <div class="card-body space-y-2">
                <a href="/employees/create" 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"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg>
                    </div>
                    <span>Add New Employee</span>
                </a>
                <a href="/attendance/upload" 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"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                    </div>
                    <span>Upload Attendance</span>
                </a>
                <a href="/leave/requests" 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"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                    </div>
                    <span>Review Leave Requests</span>
                </a>
                <a href="/notices/create" class="quick-action">
                    <div class="quick-action-icon bg-danger-100 text-danger-500">
                        <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"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
                    </div>
                    <span>Post Notice</span>
                </a>
                <a href="{{ route('reports.monthly.index') }}" 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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
                    </div>
                    <span>Generate Monthly Report</span>
                </a>
            </div>
        </div>
    </div>

    {{-- Notices & Birthday Widgets --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4 animate-fade-up" style="animation-delay: 0.2s;">
        @includeIf('notices::_notices-widget')
        @includeIf('notices::_birthday-widget')
    </div>
@endsection