@extends('layouts.app')
@section('title', '問題回報統計')
@section('content')
  <div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap">
      <h1 class="mb-0 fw-bold">問題回報統計</h1>
      <form class="d-flex align-items-center gap-2" method="get">
        <label class="mb-0 fw-semibold" for="month">月份</label>
        <select id="month" name="month" class="form-select form-select-sm" style="width: 120px;">
          <option value="">全部月份</option>
          @foreach ($months as $ym)
            <option value="{{ $ym }}" {{ $currentMonth == $ym ? 'selected' : '' }}>{{ $ym }}</option>
          @endforeach
        </select>
        <button class="btn btn-primary btn-sm">切換</button>
        @if (request('month'))
          <a href="{{ route('issues.stats') }}" class="btn btn-link btn-sm text-danger">全部</a>
        @endif
      </form>
    </div>

    <div class="row g-4">
      <!-- 圓餅圖 -->
      <div class="col-md-4">
        <div class="card shadow-sm mb-3 rounded-3">
          <div class="card-header fw-bold fs-6 bg-light">處理進度分布</div>
          <div class="card-body text-center">
            <canvas id="statusPie" style="max-width:240px;max-height:240px;margin:auto"></canvas>
            <div class="d-flex flex-wrap justify-content-center gap-2 mt-3">
              @php
                $statusMap = [
                    'pending' => ['name' => '待處理', 'color' => '#adb5bd'],
                    'in_progress' => ['name' => '處理中', 'color' => '#fbbf24'],
                    'hold' => ['name' => '暫不處理', 'color' => '#38bdf8'],
                    'watching' => ['name' => '觀察', 'color' => '#0d6efd'],
                    'completed' => ['name' => '完成', 'color' => '#51cf66'],
                ];
              @endphp
              @foreach ($statusPie as $s)
                @php
                  $info = $statusMap[$s->status] ?? ['name' => $s->status, 'color' => '#aaa'];
                @endphp
                <span class="badge rounded-pill d-flex align-items-center px-2 py-1"
                  style="background:{{ $info['color'] }};color:#fff;opacity:.94;min-width:92px;font-size:.98em">
                  <span
                    style="display:inline-block;width:14px;height:14px;background:{{ $info['color'] }};border-radius:3px;margin-right:6px"></span>
                  {{ $info['name'] }} <span class="ms-1">({{ $s->cnt }})</span>
                </span>
              @endforeach
            </div>
          </div>
        </div>
      </div>
      <!-- 各部門長條圖 -->
      <div class="col-md-4">
        <div class="card shadow-sm mb-3 rounded-3">
          <div class="card-header fw-bold fs-6 bg-light">各部門問題數</div>
          <div class="card-body">
            <canvas id="deptBar" style="max-height:220px"></canvas>
          </div>
        </div>
      </div>
      <!-- 各模組長條圖 -->
      <div class="col-md-4">
        <div class="card shadow-sm mb-3 rounded-3">
          <div class="card-header fw-bold fs-6 bg-light">各模組問題數</div>
          <div class="card-body">
            <canvas id="moduleBar" style="max-height:220px"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('scripts')
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script>
    const statusMap = {
      pending: {
        name: '待處理',
        color: '#adb5bd'
      },
      in_progress: {
        name: '處理中',
        color: '#fbbf24'
      },
      hold: {
        name: '暫不處理',
        color: '#38bdf8'
      },
      watching: {
        name: '觀察',
        color: '#0d6efd'
      },
      completed: {
        name: '完成',
        color: '#51cf66'
      }
    };
    // 圓餅圖
    const pieLabels = {!! json_encode($statusPie->pluck('status')->map(fn($s) => $statusMap[$s]['name'] ?? $s)) !!};
    const pieData = {!! json_encode($statusPie->pluck('cnt')) !!};
    const pieColors = {!! json_encode($statusPie->pluck('status')->map(fn($s) => $statusMap[$s]['color'] ?? '#aaa')) !!};

    new Chart(document.getElementById('statusPie'), {
      type: 'doughnut',
      data: {
        labels: pieLabels,
        datasets: [{
          data: pieData,
          backgroundColor: pieColors
        }]
      },
      options: {
        responsive: true,
        plugins: {
          legend: {
            display: false
          }
        },
        cutout: '70%',
        layout: {
          padding: 0
        }
      }
    });

    // 部門長條圖
    const deptLabels = {!! json_encode($deptBar->pluck('department')) !!};
    const deptCounts = {!! json_encode($deptBar->pluck('cnt')) !!};
    new Chart(document.getElementById('deptBar'), {
      type: 'bar',
      data: {
        labels: deptLabels,
        datasets: [{
          label: '問題數',
          data: deptCounts,
          backgroundColor: '#228be6',
          borderRadius: 9,
          borderSkipped: false,
          barThickness: 22
        }]
      },
      options: {
        responsive: true,
        plugins: {
          legend: {
            display: false
          }
        },
        indexAxis: 'y',
        scales: {
          x: {
            beginAtZero: true,
            ticks: {
              stepSize: 1
            }
          }
        },
        layout: {
          padding: 10
        }
      }
    });

    // 模組長條圖
    const modLabels = {!! json_encode($moduleBar->pluck('module')) !!};
    const modCounts = {!! json_encode($moduleBar->pluck('cnt')) !!};
    new Chart(document.getElementById('moduleBar'), {
      type: 'bar',
      data: {
        labels: modLabels,
        datasets: [{
          label: '問題數',
          data: modCounts,
          backgroundColor: '#51cf66',
          borderRadius: 9,
          borderSkipped: false,
          barThickness: 22
        }]
      },
      options: {
        responsive: true,
        plugins: {
          legend: {
            display: false
          }
        },
        indexAxis: 'y',
        scales: {
          x: {
            beginAtZero: true,
            ticks: {
              stepSize: 1
            }
          }
        },
        layout: {
          padding: 10
        }
      }
    });
  </script>
@endpush