@extends('layouts.admin')
@section('title', 'Dashboard')
@section('content')
<div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4"><div><h1 class="h3 fw-bold mb-1">Security Command Center</h1><p class="text-secondary mb-0">Live operational overview for {{ now()->format('l, d F Y') }}</p></div><div class="d-flex gap-2"><button class="btn btn-white border" onclick="location.reload()"><i class="bi bi-arrow-clockwise me-1"></i> Refresh</button><button class="btn btn-primary"><i class="bi bi-download me-1"></i> Export</button></div></div>
@if(session('status'))<div class="alert alert-success alert-dismissible fade show"><i class="bi bi-check-circle me-2"></i>{{ session('status') }}<button class="btn-close" data-bs-dismiss="alert"></button></div>@endif
@php
$cards=[
 ['Total Users',$metrics['total_users'],'bi-people-fill','primary'],['Active Users',$metrics['active_users'],'bi-person-check-fill','success'],['Premium Users',$metrics['premium_users'],'bi-gem','warning'],
 ['Total Devices',$metrics['total_devices'],'bi-phone-fill','info'],['Online Devices',$metrics['online_devices'],'bi-wifi','success'],['Lost Devices',$metrics['lost_devices'],'bi-exclamation-octagon-fill','danger'],
 ["Today's Alerts",$metrics['theft_today'],'bi-shield-exclamation','danger'],['Critical Incidents',$metrics['critical_alerts'],'bi-radioactive','danger'],['Notifications',$metrics['notifications'],'bi-bell-fill','primary'],
 ['Revenue Today','₹'.number_format($metrics['revenue_today'],2),'bi-currency-rupee','success'],['Monthly Revenue','₹'.number_format($metrics['revenue_month'],2),'bi-graph-up-arrow','success'],['Wallet Balance','₹'.number_format($metrics['wallet_balance'],2),'bi-wallet2','warning']];
@endphp
<div class="row g-3 mb-4">@foreach($cards as [$label,$value,$icon,$color])<div class="col-12 col-sm-6 col-xl-3"><div class="card metric-card h-100"><div class="card-body d-flex align-items-center gap-3"><span class="metric-icon bg-{{ $color }}-subtle text-{{ $color }}"><i class="bi {{ $icon }}"></i></span><div><div class="text-secondary small">{{ $label }}</div><div class="metric-value">{{ $value }}</div></div></div></div></div>@endforeach</div>
<div class="row g-4 mb-4"><div class="col-xl-8"><div class="card panel h-100"><div class="card-body"><div class="d-flex justify-content-between mb-3"><div><h2 class="h5 mb-1">Platform Growth</h2><span class="text-secondary small">New users and devices over six months</span></div><span class="badge text-bg-light align-self-start">Monthly</span></div><div style="height:310px"><canvas id="growthChart"></canvas></div></div></div></div><div class="col-xl-4"><div class="card panel h-100"><div class="card-body"><h2 class="h5 mb-1">Device Status</h2><p class="text-secondary small">Current fleet availability</p><div style="height:250px"><canvas id="deviceChart"></canvas></div><div class="d-flex justify-content-center gap-4 small"><span><i class="bi bi-circle-fill text-success me-1"></i>Online</span><span><i class="bi bi-circle-fill text-secondary me-1"></i>Offline</span><span><i class="bi bi-circle-fill text-danger me-1"></i>Lost</span></div></div></div></div></div>
<div class="row g-4"><div class="col-xl-7" id="users"><div class="card panel"><div class="card-body"><div class="d-flex justify-content-between align-items-center mb-3"><h2 class="h5 mb-0">Latest Registered Users</h2><a href="#" class="small text-decoration-none">View all</a></div><div class="table-responsive"><table class="table align-middle mb-0"><thead><tr><th>User</th><th>Status</th><th>Plan</th><th>Registered</th></tr></thead><tbody>@forelse($latestUsers as $user)<tr><td><div class="fw-semibold">{{ $user->full_name ?: 'New User' }}</div><small class="text-secondary">{{ $user->email }}</small></td><td><span class="badge text-bg-{{ $user->status==='active'?'success':'secondary' }}">{{ ucfirst($user->status) }}</span></td><td>{!! $user->is_premium ? '<span class="badge text-bg-warning">Premium</span>' : '<span class="text-secondary small">Free</span>' !!}</td><td class="small text-secondary">{{ optional($user->created_at ? \Carbon\Carbon::parse($user->created_at) : null)->diffForHumans() }}</td></tr>@empty<tr><td colspan="4" class="text-center text-secondary py-5">No registered users yet.</td></tr>@endforelse</tbody></table></div></div></div></div>
<div class="col-xl-5" id="alerts"><div class="card panel mb-4"><div class="card-body"><h2 class="h5 mb-3">Latest Theft Alerts</h2>@forelse($latestAlerts as $alert)<div class="d-flex gap-3 py-2 border-bottom"><span class="metric-icon bg-danger-subtle text-danger" style="width:40px;height:40px"><i class="bi bi-shield-exclamation"></i></span><div class="flex-grow-1"><div class="d-flex justify-content-between"><strong class="small">{{ $alert->event_title }}</strong><span class="badge text-bg-danger">{{ ucfirst($alert->risk_level) }}</span></div><div class="small text-secondary">{{ $alert->device_name }} · {{ \Carbon\Carbon::parse($alert->created_at)->diffForHumans() }}</div></div></div>@empty<div class="text-center text-secondary py-4"><i class="bi bi-shield-check fs-1 d-block text-success mb-2"></i>No theft incidents reported.</div>@endforelse</div></div>
<div class="card panel"><div class="card-body"><h2 class="h5 mb-3">System Health</h2>@foreach(['Database'=>$system['database'],'Queue'=>ucfirst($system['queue']),'Cache'=>ucfirst($system['cache']),'Environment'=>ucfirst($system['environment'])] as $name=>$value)<div class="d-flex justify-content-between align-items-center py-2 border-bottom"><span><span class="status-dot me-2"></span>{{ $name }}</span><span class="small text-secondary">{{ $value }}</span></div>@endforeach</div></div></div></div>
@endsection
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.0/dist/chart.umd.min.js"></script>
<script>
new Chart(document.getElementById('growthChart'),{type:'line',data:{labels:@json($chart['labels']),datasets:[{label:'Users',data:@json($chart['users']),borderColor:'#6658f6',backgroundColor:'rgba(102,88,246,.12)',fill:true,tension:.4},{label:'Devices',data:@json($chart['devices']),borderColor:'#20c997',backgroundColor:'transparent',tension:.4}]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{position:'bottom'}},scales:{y:{beginAtZero:true,ticks:{precision:0}},x:{grid:{display:false}}}}});
new Chart(document.getElementById('deviceChart'),{type:'doughnut',data:{labels:['Online','Offline','Lost'],datasets:[{data:[{{ $metrics['online_devices'] }},{{ max(0,$metrics['total_devices']-$metrics['online_devices']-$metrics['lost_devices']) }},{{ $metrics['lost_devices'] }}],backgroundColor:['#20c997','#adb5bd','#dc3545'],borderWidth:0}]},options:{responsive:true,maintainAspectRatio:false,cutout:'72%',plugins:{legend:{display:false}}}});
</script>
@endpush