@extends('layouts.app')

@section('content')
<div class="admin-panel">
    <header class="admin-header">
        <h1>Analytics Dashboard</h1>
        <a href="{{ route('gc.admin.dashboard') }}">← Admin home</a>
    </header>

    <div class="admin-stats">
        @foreach($totals as $label => $value)
            <div class="stat-card">
                <span class="stat-value">{{ number_format($value) }}</span>
                <span class="stat-label">{{ str_replace('_', ' ', ucfirst($label)) }}</span>
            </div>
        @endforeach
    </div>

    <section class="admin-section">
        <h2>Activity (last 14 days)</h2>
        <div class="admin-chart">
            @foreach($chart as $row)
            <div class="admin-chart-bar-group" title="{{ $row['label'] }}: {{ $row['messages'] }} messages">
                <div class="admin-chart-bar messages" style="height: {{ max(4, ($row['messages'] / $maxMessages) * 100) }}%"></div>
                <span class="admin-chart-label">{{ $row['label'] }}</span>
            </div>
            @endforeach
        </div>
        <p class="admin-chart-legend"><span class="dot messages"></span> Messages per day</p>
    </section>

    <section class="admin-section">
        <h2>Daily breakdown</h2>
        <table class="admin-table">
            <thead><tr><th>Date</th><th>Messages</th><th>New users</th><th>Calls</th></tr></thead>
            <tbody>
                @foreach($chart->reverse() as $row)
                <tr>
                    <td>{{ $row['label'] }}</td>
                    <td>{{ $row['messages'] }}</td>
                    <td>{{ $row['users'] }}</td>
                    <td>{{ $row['calls'] }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </section>
</div>
@endsection