@extends('layouts.admin')

@section('title', 'Dashboard Admin - KLISE')
@section('page_title', 'Dashboard Admin')
@section('page_subtitle', 'Pantau performa artikel, laporan masuk, dan aktivitas pengguna.')
@section('hide_breadcrumbs', '1')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/admin/dashboard.css') }}?v={{ filemtime(public_path('css/admin/dashboard.css')) }}">
@endpush

@section('content')
    <section class="admin-stats-grid">
        <article class="admin-stat-card admin-stat-card--today">
            <div class="admin-stat-card__head">
                <span>Pengunjung Hari Ini</span>
                <small>Realtime</small>
            </div>
            <strong>{{ number_format($stats['today_clicks']) }}</strong>
        </article>
        <article class="admin-stat-card admin-stat-card--month">
            <div class="admin-stat-card__head">
                <span>Pengunjung Bulan Ini</span>
                <small>30 Hari</small>
            </div>
            <strong>{{ number_format($stats['month_clicks']) }}</strong>
        </article>
        <article class="admin-stat-card admin-stat-card--year">
            <div class="admin-stat-card__head">
                <span>Pengunjung Tahun Ini</span>
                <small>Tahunan</small>
            </div>
            <strong>{{ number_format($stats['year_clicks']) }}</strong>
        </article>
        <article class="admin-stat-card admin-stat-card--reports">
            <div class="admin-stat-card__head">
                <span>Total Laporan</span>
                <small>Masuk</small>
            </div>
            <strong>{{ number_format($stats['total_reports']) }}</strong>
        </article>
        <article class="admin-stat-card admin-stat-card--wartawan">
            <div class="admin-stat-card__head">
                <span>Total Wartawan</span>
                <small>Aktif</small>
            </div>
            <strong>{{ number_format($stats['total_wartawan']) }}</strong>
        </article>
        <article class="admin-stat-card admin-stat-card--monthly-reports">
            <div class="admin-stat-card__head">
                <span>Laporan Bulan Ini</span>
                <small>Bulanan</small>
            </div>
            <strong>{{ number_format($stats['reports_this_month']) }}</strong>
        </article>
    </section>

    <section class="chart-grid">
        @php
            $dailyMax = max(1, $dailySeries->max('value'));
            $monthlyMax = max(1, $monthlySeries->max('value'));
            $yearlyMax = max(1, $yearlySeries->max('value'));
        @endphp

        <article class="chart-card chart-card--daily">
            <div class="section-headline section-headline--panel">
                <div>
                    <span class="eyebrow">Harian</span>
                    <h2>Klik 7 hari terakhir</h2>
                </div>
            </div>
            @foreach ($dailySeries as $point)
                <div class="chart-row">
                    <span>{{ $point['label'] }}</span>
                    <div class="chart-bar"><i style="width: {{ ($point['value'] / $dailyMax) * 100 }}%"></i></div>
                    <strong>{{ $point['value'] }}</strong>
                </div>
            @endforeach
        </article>

        <article class="chart-card chart-card--monthly">
            <div class="section-headline section-headline--panel">
                <div>
                    <span class="eyebrow">Bulanan</span>
                    <h2>Klik 6 bulan terakhir</h2>
                </div>
            </div>
            @foreach ($monthlySeries as $point)
                <div class="chart-row">
                    <span>{{ $point['label'] }}</span>
                    <div class="chart-bar"><i style="width: {{ ($point['value'] / $monthlyMax) * 100 }}%"></i></div>
                    <strong>{{ $point['value'] }}</strong>
                </div>
            @endforeach
        </article>

        <article class="chart-card chart-card--yearly">
            <div class="section-headline section-headline--panel">
                <div>
                    <span class="eyebrow">Tahunan</span>
                    <h2>Klik 5 tahun terakhir</h2>
                </div>
            </div>
            @foreach ($yearlySeries as $point)
                <div class="chart-row">
                    <span>{{ $point['label'] }}</span>
                    <div class="chart-bar"><i style="width: {{ ($point['value'] / $yearlyMax) * 100 }}%"></i></div>
                    <strong>{{ $point['value'] }}</strong>
                </div>
            @endforeach
        </article>
    </section>
@endsection