@extends('layouts.app')

@section('title', $canManage ? 'Complaints' : 'My Complaints')
@section('heading', $canManage ? 'Complaints' : 'My Complaints')

@section('content')
@if($canManage)
@include('hr.top-submenu')
@endif

    <div class="mb-5 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
        @if($canManage)
            <x-kpi-card title="Total complaints" :value="$kpis['total'] ?? 0" accent="slate" subtitle="All company records" />
            <x-kpi-card title="Pending" :value="$kpis['pending'] ?? 0" tone="warning" accent="amber" subtitle="Awaiting review" />
            <x-kpi-card title="Under review" :value="$kpis['under_review'] ?? 0" tone="info" accent="sky" subtitle="In progress" />
            <x-kpi-card title="Resolved" :value="$kpis['resolved'] ?? 0" accent="emerald" subtitle="Closed positively" />
            <x-kpi-card title="Against me" :value="$kpis['against_me'] ?? 0" tone="{{ ($kpis['against_me'] ?? 0) > 0 ? 'critical' : 'neutral' }}" accent="rose" subtitle="Complaints listing you" />
        @else
            <x-kpi-card
                title="Complaints against me"
                :value="$kpis['against_me'] ?? 0"
                tone="{{ ($kpis['against_me'] ?? 0) > 0 ? 'critical' : 'positive' }}"
                accent="rose"
                subtitle="Count only — details are hidden"
            />
            <x-kpi-card title="Complaints I raised" :value="$kpis['raised'] ?? 0" accent="slate" subtitle="Submitted by you" />
            <x-kpi-card title="My pending" :value="$kpis['raised_pending'] ?? 0" tone="warning" accent="amber" subtitle="Awaiting HR action" />
        @endif
    </div>

    @unless($canManage)
        <p class="mb-4 text-sm text-slate-600">
            Complaints filed against you are counted above. Subject and description stay private to Admin, HR, and Managers.
        </p>
    @endunless

    <x-card>
        <div class="mb-4 flex justify-end items-center gap-2">
            <form method="GET" class="flex gap-2">
                <select name="status" class="rounded-lg border border-slate-300 px-3 py-1.5 text-sm js-select2" onchange="this.form.submit()">
                    <option value="">All statuses</option>
                    <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="under_review" {{ request('status') === 'under_review' ? 'selected' : '' }}>Under review</option>
                    <option value="resolved" {{ request('status') === 'resolved' ? 'selected' : '' }}>Resolved</option>
                    <option value="rejected" {{ request('status') === 'rejected' ? 'selected' : '' }}>Rejected</option>
                </select>
            </form>
            @if(auth()->user()->hasPermission('complaints_create_own') || $canManage)
            <a href="{{ route('complaints.create') }}" class="inline-flex items-center rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">
                {{ $canManage ? 'Add Complaint' : 'Raise Complaint' }}
            </a>
            @endif
        </div>
        <x-table>
            <x-slot name="head">
                <tr>
                    @if($canManage)
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">From</th>
                    @endif
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Against</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Subject</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Date</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Status</th>
                    @if($canManage)
                    <th class="px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Actions</th>
                    @endif
                </tr>
            </x-slot>
            @forelse($complaints as $c)
                <tr>
                    @if($canManage)
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-900">{{ $c->fromUser?->name ?? '—' }}</td>
                    @endif
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ $c->againstUser?->name ?? '—' }}</td>
                    <td class="px-4 py-3 text-sm text-slate-600">{{ $c->subject }}</td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ $c->complaint_date?->format('M d, Y') }}</td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm">
                        <x-badge :variant="$c->statusBadgeVariant()">{{ $c->statusLabel() }}</x-badge>
                    </td>
                    @if($canManage)
                    <td class="whitespace-nowrap px-4 py-3 text-right text-sm">
                        <a href="{{ route('complaints.edit', $c) }}" class="btn-icon-action btn-icon-action--edit" title="Edit" aria-label="Edit"><i class="bi bi-pencil-square"></i></a>
                    </td>
                    @endif
                </tr>
            @empty
                <tr><td colspan="{{ $canManage ? 6 : 4 }}" class="px-4 py-8 text-center text-sm text-slate-500">No complaints yet.</td></tr>
            @endforelse
        </x-table>
        @if($complaints->hasPages())<div class="mt-4">{{ $complaints->links() }}</div>@endif
    </x-card>
@endsection