@extends('layouts.public')
@section('title', __('Track Grievance'))
@section('content')
<section class="py-16">
    <div class="max-w-xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-3xl font-bold text-center mb-4">{{ __('Track Grievance') }}</h1>
        <p class="text-center text-gray-600 dark:text-gray-400 mb-8">{{ __('Enter tracking number') }}</p>
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-8">
            <form method="POST" action="{{ route('public.grievance.track.result') }}">
                @csrf
                <div class="mb-6">
                    <label class="block text-sm font-medium mb-2">{{ __('Tracking Number') }}</label>
                    <input type="text" name="tracking_number" value="{{ old('tracking_number') }}" required
                           class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:ring-green-500 focus:border-green-500"
                           placeholder="GRV-XXXXXXXXXX">
                    @error('tracking_number') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
                </div>
                <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg font-semibold transition">{{ __('Track Grievance') }}</button>
            </form>
        </div>
        @if(isset($grievance))
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-8 mt-8">
                <h2 class="font-bold text-lg mb-4 text-green-700 dark:text-green-400">{{ __('Grievance') }} {{ __('Details') ?? 'বিস্তারিত' }}</h2>
                <div class="space-y-3 text-sm">
                    <div class="flex justify-between"><span class="text-gray-500">{{ __('Tracking Number') }}</span><span class="font-mono font-semibold">{{ $grievance->tracking_number }}</span></div>
                    <div class="flex justify-between"><span class="text-gray-500">{{ __('Category') }}</span><span>{{ $grievance->category_label }}</span></div>
                    <div class="flex justify-between"><span class="text-gray-500">{{ __('Status') }}</span>
                        <span class="px-2 py-0.5 rounded text-xs font-semibold
                            {{ match($grievance->status) {
                                'resolved' => 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
                                'investigating' => 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
                                'under_review' => 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300',
                                'rejected' => 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300',
                                default => 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'
                            } }}">
                            {{ ucfirst(str_replace('_', ' ', $grievance->status)) }}
                        </span>
                    </div>
                    <div class="flex justify-between"><span class="text-gray-500">{{ __('Priority') }}</span><span>{{ ucfirst($grievance->priority) }}</span></div>
                    <div class="flex justify-between"><span class="text-gray-500">{{ __('Date') }}</span><span>{{ $grievance->created_at->format('d/m/Y') }}</span></div>
                    <div class="border-t dark:border-gray-700 mt-4 pt-4">
                        <p class="text-gray-500 text-xs mb-1">{{ __('Description') }}</p>
                        <p class="text-gray-700 dark:text-gray-300">{{ $grievance->description }}</p>
                    </div>
                    @if($grievance->resolution_notes)
                        <div class="border-t dark:border-gray-700 mt-4 pt-4">
                            <p class="text-gray-500 text-xs mb-1">{{ __('Resolution Notes') }}</p>
                            <p class="text-gray-700 dark:text-gray-300">{{ $grievance->resolution_notes }}</p>
                        </div>
                    @endif
                </div>
            </div>
        @elseif(isset($notFound))
            <div class="bg-yellow-50 dark:bg-yellow-900/30 rounded-xl p-6 mt-8 text-center">
                <p class="text-yellow-700 dark:text-yellow-300">{{ __('No results found') }}</p>
            </div>
        @endif
    </div>
</section>
@endsection