@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 ?? [])
    ->map(function ($component, $index) {
      return (object) [
        'component' => $component->component
          ?? $component->component_name
          ?? $component->name
          ?? ('Component-' . ($index + 1)),
        'general_complaints' => (int) ($component->general_complaints ?? 0),
        'overall_pending_complaints' => (int) ($component->overall_pending_complaints ?? 0),
        'overall_in_progress_complaints' => (int) ($component->overall_in_progress_complaints ?? 0),
        'overall_returned_complaints' => (int) ($component->overall_returned_complaints ?? 0),
        'overall_closed_complaints' => (int) ($component->overall_closed_complaints ?? 0),
      ];
    });
@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>
@php
  $hotFile = public_path('hot');
  $hotUrl = file_exists($hotFile) ? trim((string) file_get_contents($hotFile)) : null;
  $hotHost = $hotUrl ? parse_url($hotUrl, PHP_URL_HOST) : null;
  $requestHost = request()->getHost();
  $useDevServer = $hotHost && $requestHost && strcasecmp($hotHost, $requestHost) === 0;
@endphp

@if($useDevServer)
  @vite(['resources/views/theme/default/assets/js/pages/grm.js'], 'build/themes/default')
@else
  <script type="module" src="{{ \Illuminate\Support\Facades\Vite::asset('resources/views/theme/default/assets/js/pages/grm.js', 'build/themes/default') }}"></script>
@endif
@endsection