
@extends('layouts.anggota')

@section('content')
<!DOCTYPE html>
<html lang="id">
<head>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

  <style>
    body {
      background: url('{{ asset("images/bg2.jpg") }}') no-repeat center center fixed;
      background-size: cover;
      font-family: 'Inter', sans-serif;
      backdrop-filter: blur(5px);
      margin: 0;
    }

    .glass {
      background: rgba(255, 255, 255, 0.85);
      border-radius: 16px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.2);
      padding: 30px;
      margin-top: 30px;
    }

    .navbar-custom {
      background: rgba(13, 71, 161, 0.95);
      backdrop-filter: blur(6px);
    }

    .navbar-custom .nav-link {
      color: #fff !important;
      font-weight: 500;
    }

    .navbar-custom .nav-link:hover {
      color: #ffeb3b !important;
    }
  </style>
</head>
<body>


<div class="container glass">
  <h3 class="fw-bold mb-4 text-center text-primary">
    <i class="bi bi-bar-chart-line"></i> Statistik & Laporan
  </h3>

  <div class="row text-center mb-4">
    <div class="col-md-3"><h6>Total Koleksi</h6><h4>{{ $totalBuku }}</h4></div>
    <div class="col-md-3"><h6>Total Anggota</h6><h4>{{ $totalAnggota }}</h4></div>
    <div class="col-md-3"><h6>Peminjaman</h6><h4>{{ $totalPeminjaman }}</h4></div>
    <div class="col-md-3"><h6>Pengembalian</h6><h4>{{ $totalPengembalian }}</h4></div>
  </div>

  <canvas id="chartPeminjaman" height="120"></canvas>
</div>

<script>
const ctx = document.getElementById('chartPeminjaman').getContext('2d');
new Chart(ctx, {
  type: 'bar',
  data: {
    labels: {!! json_encode($bulanLabels) !!},
    datasets: [{
      label: 'Jumlah Peminjaman per Bulan',
      data: {!! json_encode($dataPeminjaman) !!},
      backgroundColor: 'rgba(13, 71, 161, 0.6)',
      borderColor: '#0d47a1',
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    scales: {
      y: { beginAtZero: true }
    }
  }
});
</script>

</body>
</html>
@endsection

