{{-- resources/views/admin/dashboard.blade.php --}}
@extends('admin.layouts.app')
@section('title', 'Dashboard')

@push('styles')
<style>
.chart-container { position: relative; height: 220px; }
</style>
@endpush

@section('content')

<div class="page-header">
  <div class="page-header-left">
    <div class="breadcrumb">Admin / Dashboard</div>
    <h1>Dashboard</h1>
    <p>Selamat datang, {{ auth()->user()->name }}.</p>
  </div>
  <span style="font-size:0.78rem; color:var(--text-2)">
    {{ \Carbon\Carbon::now()->locale('id')->isoFormat('dddd, D MMMM Y') }}
  </span>
</div>

{{-- STATS --}}
<div class="stats-grid">
  <div class="stat-card">
    <div class="stat-label">Total Konsultasi</div>
    <div class="stat-val red">{{ $totalKonsultasi }}</div>
    <div class="stat-sub">{{ $konsultasiHariIni }} konsultasi hari ini</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Data Penyakit</div>
    <div class="stat-val">{{ $totalPenyakit }}</div>
    <div class="stat-sub">{{ $totalHama }} hama · {{ $totalPenyakitOnly }} penyakit</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Total Gejala</div>
    <div class="stat-val">{{ $totalGejala }}</div>
    <div class="stat-sub">{{ $totalRule }} rule aktif</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Terdeteksi</div>
    <div class="stat-val green">{{ $totalTerdeteksi }}</div>
    <div class="stat-sub">{{ $totalTidakTerdeteksi }} tidak terdeteksi</div>
  </div>
</div>

<div style="display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-bottom:1.25rem;">

  {{-- PENYAKIT TERBANYAK --}}
  <div class="card">
    <div class="card-header">
      <div class="card-title">Penyakit Paling Sering Terdeteksi</div>
    </div>
    <div class="card-body">
      @forelse($penyakitTerbanyak as $item)
      <div style="margin-bottom:0.85rem;">
        <div style="display:flex; justify-content:space-between; margin-bottom:4px;">
          <span style="font-size:0.82rem; font-weight:500;">{{ $item->penyakit->nama ?? '-' }}</span>
          <span style="font-size:0.78rem; color:var(--text-2);">{{ $item->total }}x</span>
        </div>
        @php $persen = $penyakitTerbanyak->first()->total > 0 ? ($item->total / $penyakitTerbanyak->first()->total * 100) : 0; @endphp
        <div style="height:6px; background:var(--border); border-radius:3px; overflow:hidden;">
          <div style="height:100%; width:{{ $persen }}%; background:var(--red); border-radius:3px; transition: width 0.8s ease;"></div>
        </div>
      </div>
      @empty
        <p style="color:var(--text-3); font-size:0.83rem; text-align:center; padding:1rem 0;">Belum ada data konsultasi.</p>
      @endforelse
    </div>
  </div>

  {{-- KONSULTASI TERBARU --}}
  <div class="card">
    <div class="card-header">
      <div class="card-title">Konsultasi Terbaru</div>
      <a href="{{ route('admin.konsultasi.index') }}" class="btn btn-sm">Lihat Semua</a>
    </div>
    <div class="table-wrap">
      <table>
        <thead>
          <tr><th>Kode</th><th>Tanggal</th><th>Hasil</th><th>CF</th></tr>
        </thead>
        <tbody>
          @forelse($konsultasiTerbaru as $k)
          <tr>
            <td>
              <a href="{{ route('admin.konsultasi.show', $k->id) }}" style="font-family:monospace; font-size:0.75rem; color:var(--red); text-decoration:none;">
                {{ $k->kode_konsultasi }}
              </a>
            </td>
            <td style="font-size:0.78rem; color:var(--text-2);">
              {{ \Carbon\Carbon::parse($k->tanggal)->format('d M, H:i') }}
            </td>
            <td>
              @if($k->hasilUtama && $k->hasilUtama->penyakit)
                <span class="badge {{ $k->hasilUtama->penyakit->jenis === 'Hama' ? 'badge-hama' : 'badge-penyakit' }}">
                  {{ $k->hasilUtama->penyakit->nama }}
                </span>
              @else
                <span style="color:var(--text-3); font-size:0.78rem;">—</span>
              @endif
            </td>
            <td>
              @if($k->hasilUtama)
                <span class="badge badge-mono">{{ number_format($k->hasilUtama->persentase, 1) }}%</span>
              @endif
            </td>
          </tr>
          @empty
          <tr><td colspan="4" style="text-align:center; color:var(--text-3); padding:2rem;">Belum ada konsultasi.</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

</div>

{{-- GRAFIK --}}
<div style="display:grid; grid-template-columns:2fr 1fr; gap:1.25rem;">

  {{-- Grafik Konsultasi per Bulan --}}
  <div class="card">
    <div class="card-header">
      <div class="card-title">Grafik Konsultasi per Bulan</div>
      <span style="font-size:0.72rem; color:var(--text-3);">{{ \Carbon\Carbon::now()->year }}</span>
    </div>
    <div class="card-body">
      <div class="chart-container">
        <canvas id="chartKonsultasi"></canvas>
      </div>
    </div>
  </div>

  {{-- Grafik Donut Hama vs Penyakit --}}
  <div class="card">
    <div class="card-header">
      <div class="card-title">Komposisi Diagnosa</div>
    </div>
    <div class="card-body" style="display:flex; flex-direction:column; align-items:center; gap:16px;">
      <div style="position:relative; width:160px; height:160px;">
        <canvas id="chartDonut"></canvas>
      </div>
      <div style="display:flex; flex-direction:column; gap:6px; width:100%;">
        <div style="display:flex; align-items:center; gap:8px; font-size:0.78rem;">
          <span style="width:12px; height:12px; border-radius:3px; background:#C0392B; display:inline-block;"></span>
          <span style="color:var(--text-2); flex:1;">Penyakit</span>
          <span style="font-weight:600;">{{ $totalPenyakitOnly }}</span>
        </div>
        <div style="display:flex; align-items:center; gap:8px; font-size:0.78rem;">
          <span style="width:12px; height:12px; border-radius:3px; background:#F39C12; display:inline-block;"></span>
          <span style="color:var(--text-2); flex:1;">Hama</span>
          <span style="font-weight:600;">{{ $totalHama }}</span>
        </div>
        <div style="display:flex; align-items:center; gap:8px; font-size:0.78rem;">
          <span style="width:12px; height:12px; border-radius:3px; background:#27AE60; display:inline-block;"></span>
          <span style="color:var(--text-2); flex:1;">Terdeteksi</span>
          <span style="font-weight:600;">{{ $totalTerdeteksi }}</span>
        </div>
      </div>
    </div>
  </div>

</div>

@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
<script>
// Data konsultasi per bulan dari controller
// Pastikan $konsultasiPerBulan dikirim dari DashboardController
const bulanLabels = ['Jan','Feb','Mar','Apr','Mei','Jun','Jul','Agu','Sep','Okt','Nov','Des'];
const konsultasiData = @json($konsultasiPerBulan ?? array_fill(0, 12, 0));

// Grafik garis konsultasi per bulan
const ctx1 = document.getElementById('chartKonsultasi').getContext('2d');
new Chart(ctx1, {
  type: 'line',
  data: {
    labels: bulanLabels,
    datasets: [{
      label: 'Konsultasi',
      data: konsultasiData,
      borderColor: '#C0392B',
      backgroundColor: 'rgba(192,57,43,0.08)',
      borderWidth: 2.5,
      pointBackgroundColor: '#C0392B',
      pointRadius: 4,
      pointHoverRadius: 6,
      fill: true,
      tension: 0.4,
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: { display: false },
      tooltip: {
        backgroundColor: '#1A1A2E',
        titleColor: '#fff',
        bodyColor: '#ccc',
        padding: 10,
        cornerRadius: 8,
      }
    },
    scales: {
      x: { grid: { display: false }, ticks: { font: { family: 'Poppins', size: 11 }, color: '#9CA3AF' } },
      y: { grid: { color: '#F0F0F0' }, ticks: { font: { family: 'Poppins', size: 11 }, color: '#9CA3AF', stepSize: 1 }, beginAtZero: true }
    }
  }
});

// Grafik donut
const ctx2 = document.getElementById('chartDonut').getContext('2d');
new Chart(ctx2, {
  type: 'doughnut',
  data: {
    labels: ['Penyakit', 'Hama', 'Terdeteksi'],
    datasets: [{
      data: [{{ $totalPenyakitOnly }}, {{ $totalHama }}, {{ $totalTerdeteksi }}],
      backgroundColor: ['#C0392B', '#F39C12', '#27AE60'],
      borderWidth: 0,
      hoverOffset: 6,
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    cutout: '68%',
    plugins: {
      legend: { display: false },
      tooltip: {
        backgroundColor: '#1A1A2E',
        titleColor: '#fff',
        bodyColor: '#ccc',
        padding: 10,
        cornerRadius: 8,
      }
    }
  }
});
</script>
@endpush