@extends('layouts.app')

@section('dashboard-title')
<h3 style="margin-top:17px;font-size:26px;">GRIEVANCE REDRESSAL MECHANISM PROGRESS</h3>
@endsection

@section('content')
<div class="py-4">

  {{-- Chart Section --}}
  <div class="bg-white rounded shadow p-4 mb-4">
    <canvas id="grievanceChart" style="width:100%; height:400px;"></canvas>
  </div>

  {{-- Legend --}}
  <div class="flex flex-wrap gap-4 mb-4 px-2">
    <div class="flex items-center gap-2">
      <span style="display:inline-block;width:30px;height:18px;background-color:#1a7a1a;border-radius:2px;"></span>
      <span style="font-size:13px;">General Complaints</span>
    </div>
    <div class="flex items-center gap-2">
      <span style="display:inline-block;width:30px;height:18px;background-color:#2db82d;border-radius:2px;"></span>
      <span style="font-size:13px;">Overall Pending Complaints</span>
    </div>
    <div class="flex items-center gap-2">
      <span style="display:inline-block;width:30px;height:18px;background-color:#4caf50;border-radius:2px;"></span>
      <span style="font-size:13px;">Overall, In-Progress Complaints</span>
    </div>
    <div class="flex items-center gap-2">
      <span style="display:inline-block;width:30px;height:18px;background-color:#a5d6a7;border-radius:2px;"></span>
      <span style="font-size:13px;">Overall Returned Complaints</span>
    </div>
    <div class="flex items-center gap-2">
      <span style="display:inline-block;width:30px;height:18px;background-color:#ffa000;border-radius:2px;"></span>
      <span style="font-size:13px;">Overall Closed Complaints</span>
    </div>
  </div>

  {{-- Table Section --}}
  <div class="overflow-x-auto rounded shadow">
    <table class="w-full border-collapse" style="font-family:Arial,Helvetica,sans-serif; font-size:14px;">
      <thead>
        <tr style="background-color:#2e7d32;">
          <th style="padding:12px 16px; text-align:left; color:white; font-weight:700; cursor:pointer;">Component ▲</th>
          <th style="padding:12px 16px; text-align:left; color:white; font-weight:700;">General Complaints</th>
          <th style="padding:12px 16px; text-align:left; color:white; font-weight:700;">Overall Pending<br>Complaints</th>
          <th style="padding:12px 16px; text-align:left; color:white; font-weight:700;">Overall, In-Progress<br>Complaints</th>
          <th style="padding:12px 16px; text-align:left; color:white; font-weight:700;">Overall Returned<br>Complaints</th>
          <th style="padding:12px 16px; text-align:left; color:white; font-weight:700;">Overall Closed Complaints</th>
        </tr>
      </thead>
      <tbody>
        @foreach($components as $component)
        <tr style="background-color:{{ $loop->even ? '#f9f9f9' : '#ffffff' }}; border-bottom:1px solid #e0e0e0;">
          <td style="padding:10px 16px;">{{ $component->component }}</td>
          <td style="padding:10px 16px;">{{ $component->general_complaints ?? '-' }}</td>
          <td style="padding:10px 16px;">{{ $component->overall_pending_complaints ?? '-' }}</td>
          <td style="padding:10px 16px;">{{ $component->overall_in_progress_complaints ?? '-' }}</td>
          <td style="padding:10px 16px;">{{ $component->overall_returned_complaints ?? '-' }}</td>
          <td style="padding:10px 16px;">{{ $component->overall_closed_complaints ?? '-' }}</td>
        </tr>
        @endforeach
      </tbody>
    </table>
  </div>

</div>

{{-- Chart.js --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>

<script>
const ctx = document.getElementById('grievanceChart').getContext('2d');

const labels = @json($components->pluck('component'));
const generalComplaints = @json($components->pluck('general_complaints'));
const pendingComplaints = @json($components->pluck('overall_pending_complaints'));
const inProgressComplaints = @json($components->pluck('overall_in_progress_complaints'));
const returnedComplaints = @json($components->pluck('overall_returned_complaints'));
const closedComplaints = @json($components->pluck('overall_closed_complaints'));

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [
      { label: 'General Complaints', data: generalComplaints, backgroundColor: '#1a7a1a' },
      { label: 'Overall Pending Complaints', data: pendingComplaints, backgroundColor: '#2db82d' },
      { label: 'Overall In-Progress Complaints', data: inProgressComplaints, backgroundColor: '#4caf50' },
      { label: 'Overall Returned Complaints', data: returnedComplaints, backgroundColor: '#a5d6a7' },
      { label: 'Overall Closed Complaints', data: closedComplaints, backgroundColor: '#ffa000' },
    ]
  },
  options: {
    responsive: true,
    plugins: {
      legend: { display: false },
      datalabels: {
        color: '#fff',          // White text for contrast inside bars
        anchor: 'end',       // Position inside the bar
        align: 'start',        // Center the text vertically
        font: { weight: 'bold', size: 14 }
      }
    },
    scales: {
      x: { grid: { display: false }, ticks: { font: { size: 13 } } },
      y: { beginAtZero: true, ticks: { stepSize: 20, font: { size: 13 } }, grid: { color: '#e0e0e0' } }
    }
  },
  plugins: [ChartDataLabels] // Register the plugin
});
</script>
@endsection