@extends('layouts.admin_master')
@section('content')
<h1>Admin Dashboard</h1>
<div class="dashboard-grid" style="display:grid; grid-gap:20px; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); margin-top:22px;">
    <div class="dash-card">
        <h3>Total Reporters</h3>
        <div class="dash-val" id="reporters_total">–</div>
    </div>
    <div class="dash-card">
        <h3>Reporters: Pending</h3>
        <div class="dash-val" id="reporters_pending">–</div>
    </div>
    <div class="dash-card">
        <h3>Reporters: Accepted</h3>
        <div class="dash-val" id="reporters_accepted">–</div>
    </div>
    <div class="dash-card">
        <h3>Total News Posts</h3>
        <div class="dash-val" id="posts_total">–</div>
    </div>
    <div class="dash-card">
        <h3>Posts: Published</h3>
        <div class="dash-val" id="posts_published">–</div>
    </div>
    <div class="dash-card">
        <h3>Posts: Draft</h3>
        <div class="dash-val" id="posts_draft">–</div>
    </div>
    <div class="dash-card">
        <h3>Total Categories</h3>
        <div class="dash-val" id="categories_total">–</div>
    </div>
    <div class="dash-card">
        <h3>E-papers Uploaded</h3>
        <div class="dash-val" id="epapers_total">–</div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function loadStats() {
    fetch('/admin/dashboard/stats')
        .then(r => r.json())
        .then(stats => {
            for(let key in stats) {
                document.getElementById(key).textContent = stats[key];
            }
        });
}
window.onload = loadStats;
</script>
@endsection