@extends('admin.layout.app')
@section('body')
<div class="card card-page p-3 shadow-sm">
    <h4>{{ __('admin.library_reports') }}</h4>
    <div class="row g-3 mb-4">
        <div class="col-md-3"><div class="card bg-primary text-white"><div class="card-body"><h5>{{ __('admin.total_books') }}</h5><h2>{{ $totalBooks }}</h2></div></div></div>
        <div class="col-md-3"><div class="card bg-warning text-dark"><div class="card-body"><h5>{{ __('admin.currently_borrowed') }}</h5><h2>{{ $totalBorrowed }}</h2></div></div></div>
        <div class="col-md-3"><div class="card bg-danger text-white"><div class="card-body"><h5>{{ __('admin.overdue') }}</h5><h2>{{ $totalOverdue }}</h2></div></div></div>
        <div class="col-md-3"><div class="card bg-success text-white"><div class="card-body"><h5>{{ __('admin.fines_collected') }}</h5><h2>{{ number_format($totalFinesCollected,2) }} AFN</h2></div></div></div>
    </div>
    <h5>{{ __('admin.most_popular_books') }}</h5>
    <table class="table table-bordered"><thead><tr><th>{{ __('admin.book') }}</th><th>{{ __('admin.times_borrowed') }}</th></tr></thead>
    <tbody>@foreach($popularBooks as $pb)<tr><td>{{ $pb->book->title ?? '' }}</td><td>{{ $pb->total }}</td></tr>@endforeach</tbody></table>

    <h5 class="mt-4">{{ __('admin.borrowing_trend_last_12_months') }}</h5>
    <canvas id="trendChart" height="100"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('trendChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: { labels: {!! json_encode($trend->pluck('month')) !!}, datasets: [{ label: 'Borrowings', data: {!! json_encode($trend->pluck('count')) !!}, borderColor: 'blue', fill: false }] }
    });
</script>
@endsection