@extends('layouts.admin')

@section('title', 'Dashboard')

@section('content')
    <x-page-header
        title="Dashboard"
        :breadcrumbs="[
            ['label' => 'Admin', 'href' => route('admin.dashboard')],
            ['label' => 'Dashboard'],
        ]"
        subtitle="Quick overview of projects, people, and approvals."
    />

    <div class="dashboard-stats">
        <div class="dashboard-card dashboard-card--projects">
            <div class="dashboard-card__icon">
                <svg width="80" height="80" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                </svg>
            </div>
            <p class="dashboard-card__label">Total Projects</p>
            <p class="dashboard-card__value">{{ $stats['total_projects'] }}</p>
            <div class="dashboard-card__meta">
                <span class="dashboard-pill">
                    <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
                    </svg>
                    +12% Growth
                </span>
            </div>
        </div>

        <div class="dashboard-card dashboard-card--engineers">
            <div class="dashboard-card__icon">
                <svg width="80" height="80" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M9 7a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" />
                </svg>
            </div>
            <p class="dashboard-card__label">Active Engineers</p>
            <p class="dashboard-card__value">{{ $stats['total_engineers'] }}</p>
            <div class="dashboard-card__meta"><em>Currently deployed</em></div>
        </div>

        <div class="dashboard-card dashboard-card--tasks">
            <div class="dashboard-card__icon">
                <svg width="80" height="80" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
            </div>
            <p class="dashboard-card__label">Pending Tasks</p>
            <p class="dashboard-card__value">{{ $stats['total_tasks'] - $stats['completed_tasks'] }}</p>
            <div class="dashboard-card__meta"><em>Needs attention</em></div>
        </div>

        <div class="dashboard-card dashboard-card--requests">
            <div class="dashboard-card__icon">
                <svg width="80" height="80" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
            </div>
            <p class="dashboard-card__label">Open Requests</p>
            <p class="dashboard-card__value">{{ $stats['pending_maintenance_requests'] }}</p>
            <div class="dashboard-card__meta">
                <span class="dashboard-badge-danger">High Priority</span>
            </div>
        </div>
    </div>

    <div class="dashboard-panels">
        <div class="dashboard-panel">
            <div class="dashboard-panel__header">
                <p class="dashboard-panel__title">Recent Activity</p>
                <p class="dashboard-panel__subtitle">System-wide event logs</p>
            </div>
            <x-table-wrapper>
                <table class="dashboard-table">
                    <thead>
                        <tr>
                            <th>Time</th>
                            <th>User</th>
                            <th>Action</th>
                            <th>Module</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($recentActivities as $log)
                            <tr>
                                <td><span class="dashboard-mono">{{ optional($log->created_at)->format('d M Y, H:i') }}</span></td>
                                <td>{{ $log->user?->name ?? '-' }}</td>
                                <td>{{ $log->action }}</td>
                                <td>{{ $log->module }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center" style="color: var(--text-secondary); padding: 1.25rem 1.5rem;">No activity yet.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </x-table-wrapper>
        </div>

        <div class="dashboard-panel">
            <div class="dashboard-panel__header">
                <p class="dashboard-panel__title">Latest Reports</p>
                <p class="dashboard-panel__subtitle">Submissions from site leads</p>
            </div>
            <x-table-wrapper>
                <table class="dashboard-table">
                    <thead>
                        <tr>
                            <th>Project</th>
                            <th>Title</th>
                            <th>Supervisor</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($latestReports as $report)
                            <tr>
                                <td>
                                    <span class="dashboard-chip">{{ $report->project?->code ?? '-' }}</span>
                                </td>
                                <td>{{ $report->title }}</td>
                                <td>{{ $report->siteSupervisor?->name ?? '-' }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="3" class="text-center" style="color: var(--text-secondary); padding: 1.25rem 1.5rem;">No reports yet.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </x-table-wrapper>
        </div>
    </div>
@endsection