@extends('layouts.app')
@section('content')
<div class="container">
  <h2>Manager Dashboard — {{ auth()->user()->department->name ?? '' }}</h2>
  <div class="mb-3">
    <form method="get">
      <label>From</label><input type="date" name="from" value="{{ $from }}">
      <label>To</label><input type="date" name="to" value="{{ $to }}">
      <button class="btn btn-primary">Filter</button>
    </form>
  </div>

  <div style="width:700px" class="mb-4">
    <canvas id="hoursChart"></canvas>
  </div>

  <div style="width:700px" class="mb-4">
    <canvas id="issuesChart"></canvas>
  </div>

  <div>
    <h4>Escalations: {{ $escalations }}</h4>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const hoursData = @json($hours->map(function($h){ return ['name'=>$h->user->name,'hours'=>(float)$h->total_hours]; }));
const issuesData = @json($topIssues->map(fn($i)=>['issue'=>$i->issue_type,'count'=>$i->cnt]));

new Chart(document.getElementById('hoursChart'), {
  type: 'bar',
  data: { labels: hoursData.map(h=>h.name), datasets: [{ label:'Hours', data: hoursData.map(h=>h.hours) }] }
});

new Chart(document.getElementById('issuesChart'), {
  type: 'pie',
  data: { labels: issuesData.map(i=>i.issue || 'Unknown'), datasets: [{ data: issuesData.map(i=>i.count) }] }
});
</script>
@endsection