@extends('theme.default.layouts.app')

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

@section('content')
@php
    $components = collect($components ?? [
        (object)[
            'component' => 'Component-I',
            'general_complaints' => 18,
            'overall_pending_complaints' => 6,
            'overall_in_progress_complaints' => 4,
            'overall_returned_complaints' => 2,
            'overall_closed_complaints' => 6,
        ],
        (object)[
            'component' => 'Component-II',
            'general_complaints' => 12,
            'overall_pending_complaints' => 3,
            'overall_in_progress_complaints' => 5,
            'overall_returned_complaints' => 1,
            'overall_closed_complaints' => 3,
        ],
        (object)[
            'component' => 'Component-III',
            'general_complaints' => 15,
            'overall_pending_complaints' => 4,
            'overall_in_progress_complaints' => 6,
            'overall_returned_complaints' => 2,
            'overall_closed_complaints' => 3,
        ],
        (object)[
            'component' => 'Component-IV',
            'general_complaints' => 9,
            'overall_pending_complaints' => 2,
            'overall_in_progress_complaints' => 3,
            'overall_returned_complaints' => 1,
            'overall_closed_complaints' => 3,
        ],
    ]);
@endphp

<div class="py-4">

  {{-- Chart Section --}}
  <div id="grmChartWrapper" class="bg-white rounded shadow p-4 mb-4" style="position:relative;">
    <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>

<script>
window.grmChartData = {
  labels: @json($components->pluck('component')),
  generalComplaints: @json($components->pluck('general_complaints')),
  pendingComplaints: @json($components->pluck('overall_pending_complaints')),
  inProgressComplaints: @json($components->pluck('overall_in_progress_complaints')),
  returnedComplaints: @json($components->pluck('overall_returned_complaints')),
  closedComplaints: @json($components->pluck('overall_closed_complaints'))
};
</script>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<script src="{{ asset('theme/default/assets/js/chart-toolbar.js') }}"></script>
@vite(['resources/views/theme/default/assets/js/pages/grm.js'], 'build/themes/default')
@endsection