@extends('layouts.admin')

@section('title', 'Dashboard')
@section('active', 'dashboard')

@section('content')
<div class="row g-3 mb-4">
  <div class="col-sm-6 col-xl-3"><div class="stat-card bg-soft-blue"><div class="ic" aria-hidden="true"><i class="bi bi-calendar-check"></i></div><div><div class="stat-num">{{ rupiah($bulanIni) }}</div><div class="stat-lbl">Penjualan {{ now()->translatedFormat('F Y') }}</div></div></div></div>
  <div class="col-sm-6 col-xl-3"><div class="stat-card bg-soft-green"><div class="ic" aria-hidden="true"><i class="bi bi-cash-stack"></i></div><div><div class="stat-num">{{ rupiah($omzet) }}</div><div class="stat-lbl">Total omzet</div></div></div></div>
  <div class="col-6 col-xl-3"><a href="{{ route('admin.pesanan.index') }}" class="text-reset d-block h-100"><div class="stat-card bg-soft-orange"><div class="ic" aria-hidden="true"><i class="bi bi-hourglass-split"></i></div><div><div class="stat-num">{{ $perluProses }}</div><div class="stat-lbl">Perlu diproses</div></div></div></a></div>
  <div class="col-6 col-xl-3"><a href="{{ route('admin.pelanggan.index') }}" class="text-reset d-block h-100"><div class="stat-card bg-soft-purple"><div class="ic" aria-hidden="true"><i class="bi bi-people"></i></div><div><div class="stat-num">{{ $totalPelanggan }}</div><div class="stat-lbl">Total pelanggan</div></div></div></a></div>
</div>
<p class="small text-muted-soft mb-4"><i class="bi bi-info-circle me-1" aria-hidden="true"></i>Omzet dihitung dari pesanan yang pembayarannya (Virtual Account / QRIS) sudah diverifikasi: berstatus diproses, dikirim, atau selesai.</p>

<div class="row g-4 dashboard-insights">
  <div class="col-lg-8">
    <div class="card-soft p-4 h-100">
      <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
        <h2 class="h6 fw-bold mb-0">Grafik Penjualan 6 Bulan Terakhir</h2>
        <a href="{{ route('admin.laporan') }}" class="btn btn-sm btn-light-blue">Laporan lengkap</a>
      </div>
      <div class="chart-box">
        <canvas id="chartPenjualan" role="img" aria-label="Grafik penjualan 6 bulan terakhir"></canvas>
      </div>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="card-soft p-4 h-100">
      <h2 class="h6 fw-bold mb-3">Produk Terlaris</h2>
      @forelse ($terlaris as $i => $t)
        <div class="d-flex align-items-center gap-2 mb-3">
          <span class="badge bg-soft-blue rounded-pill">{{ $i + 1 }}</span>
          <div class="flex-grow-1 small fw-semibold text-truncate" title="{{ $t->product_name }}">{{ $t->product_name }}</div>
          <span class="text-muted-soft small text-nowrap">{{ (int) $t->total_qty }} pcs</span>
        </div>
      @empty
        <p class="text-muted-soft small mb-0">Belum ada penjualan.</p>
      @endforelse
      <div class="admin-quick-actions mt-4 pt-3 border-top"><h3 class="h6 mb-3">Akses cepat</h3><div class="d-grid quick-action-grid">
        <a class="btn btn-light-blue" href="{{ route('admin.pesanan.index', ['status' => 'dibayar']) }}"><i class="bi bi-credit-card" aria-hidden="true"></i>Verifikasi pembayaran</a>
        <a class="btn btn-light-blue" href="{{ route('admin.produk.create') }}"><i class="bi bi-plus-circle" aria-hidden="true"></i>Tambah produk</a>
        <a class="btn btn-light-blue" href="{{ route('admin.ongkir.index') }}"><i class="bi bi-truck" aria-hidden="true"></i>Atur pengiriman</a>
        <a class="btn btn-light-blue" href="{{ route('admin.laporan') }}"><i class="bi bi-bar-chart" aria-hidden="true"></i>Lihat laporan</a>
      </div></div>
    </div>
  </div>
</div>

<div class="card-soft p-4 mt-4">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h2 class="h6 fw-bold mb-0">Pesanan Terbaru</h2>
    <a href="{{ route('admin.pesanan.index') }}" class="btn btn-sm btn-light-blue">Lihat semua</a>
  </div>
  <div class="table-responsive">
    <table class="table align-middle mb-0">
      <thead><tr><th scope="col">Kode</th><th scope="col">Penerima</th><th scope="col">Total</th><th scope="col">Status</th><th scope="col"><span class="visually-hidden">Aksi</span></th></tr></thead>
      <tbody>
        @forelse ($terbaru as $order)
        <tr>
          <td class="fw-semibold text-nowrap">{{ $order->code }}</td>
          <td>{{ $order->recipient_name }}</td>
          <td class="text-nowrap">{{ rupiah($order->total) }}</td>
          <td>@include('partials.status-badge', ['status' => $order->status])</td>
          <td><a href="{{ route('admin.pesanan.show', $order) }}" class="btn btn-sm btn-light-blue" aria-label="Detail pesanan {{ $order->code }}">Detail</a></td>
        </tr>
        @empty
        <tr><td colspan="5" class="text-center text-muted-soft py-4">Belum ada pesanan.</td></tr>
        @endforelse
      </tbody>
    </table>
  </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('vendor/chartjs/chart.umd.min.js') }}"></script>
<script>
  (function () {
    var el = document.getElementById('chartPenjualan');
    if (!el || typeof Chart === 'undefined') return;
    new Chart(el, {
      type: 'line',
      data: {
        labels: @json($labels),
        datasets: [{ label: 'Penjualan', data: @json($data), borderColor: '#2b6fe0', backgroundColor: 'rgba(43,111,224,.12)', fill: true, tension: .35, pointRadius: 4, pointBackgroundColor: '#2b6fe0' }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: { display: false },
          tooltip: { callbacks: { label: function (c) { return 'Rp ' + Number(c.parsed.y).toLocaleString('id-ID'); } } }
        },
        scales: { y: { beginAtZero: true, ticks: { callback: function (v) { return 'Rp ' + Number(v).toLocaleString('id-ID'); } } } }
      }
    });
  })();
</script>
@endpush