@extends('layouts.frontend')

@section('title', 'অভিযোগ ট্র্যাক করুন - ' . ($settings['site_name'] ?? 'সাংসদ পোর্টাল'))

@section('content')
    <!-- Page Header -->
    <section class="bg-bd-green-500 text-white py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h1 class="text-3xl md:text-4xl font-bold mb-2">অভিযোগ ট্র্যাক করুন</h1>
            <p class="text-bd-green-100">আপনার অভিযোগের বর্তমান অবস্থা জানুন</p>
        </div>
    </section>

    <!-- Search Section -->
    <section class="py-12 bg-gray-50">
        <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Search Form -->
            <div class="bg-white rounded-xl shadow-md p-6 mb-8">
                <form action="{{ route('grievance.track') }}" method="GET" class="space-y-4">
                    <div>
                        <label for="tracking_id" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-hashtag mr-2 text-bd-green-500"></i>ট্র্যাকিং আইডি লিখুন
                        </label>
                        <div class="flex gap-3">
                            <input type="text" name="tracking_id" id="tracking_id" value="{{ request('tracking_id') }}"
                                required
                                class="flex-1 px-4 py-3 border rounded-lg focus:ring-2 focus:ring-bd-green-500 focus:border-bd-green-500 text-lg tracking-wider"
                                placeholder="GRV-XXXXXXXX">
                            <button type="submit"
                                class="px-6 py-3 bg-bd-green-500 text-white rounded-lg font-semibold hover:bg-bd-green-600 transition">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Result Section -->
            @if (isset($grievance))
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <!-- Header -->
                    <div class="bg-bd-green-50 p-6 border-b">
                        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                            <div>
                                <p class="text-sm text-gray-500 mb-1">ট্র্যাকিং আইডি</p>
                                <p class="text-xl font-bold text-bd-green-600">{{ $grievance->tracking_id }}</p>
                            </div>
                            <span
                                class="px-4 py-2 rounded-full text-sm font-medium
                                {{ $grievance->status === 'pending' ? 'bg-yellow-100 text-yellow-700' : '' }}
                                {{ $grievance->status === 'processing' ? 'bg-blue-100 text-blue-700' : '' }}
                                {{ $grievance->status === 'resolved' ? 'bg-green-100 text-green-700' : '' }}">
                                <i class="fas fa-circle text-xs mr-2"></i>{{ $grievance->status_label }}
                            </span>
                        </div>
                    </div>

                    <!-- Progress Steps -->
                    <div class="p-6 border-b">
                        <div class="flex items-center justify-between relative">
                            <div class="absolute top-5 left-8 right-8 h-1 bg-gray-200 -z-10"></div>
                            <div class="absolute top-5 left-8 h-1 bg-bd-green-500 -z-10 transition-all duration-500"
                                style="width: {{ $grievance->status === 'pending' ? '0%' : ($grievance->status === 'processing' ? '50%' : '100%') }}">
                            </div>

                            <div class="flex flex-col items-center">
                                <div
                                    class="w-10 h-10 rounded-full flex items-center justify-center bg-bd-green-500 text-white">
                                    <i class="fas fa-check"></i>
                                </div>
                                <p class="text-sm text-gray-600 mt-2">জমা</p>
                            </div>

                            <div class="flex flex-col items-center">
                                <div
                                    class="w-10 h-10 rounded-full flex items-center justify-center
                                    {{ in_array($grievance->status, ['processing', 'resolved']) ? 'bg-bd-green-500 text-white' : 'bg-gray-200 text-gray-500' }}">
                                    <i
                                        class="fas fa-cog {{ $grievance->status === 'processing' ? 'animate-spin' : '' }}"></i>
                                </div>
                                <p class="text-sm text-gray-600 mt-2">প্রক্রিয়াধীন</p>
                            </div>

                            <div class="flex flex-col items-center">
                                <div
                                    class="w-10 h-10 rounded-full flex items-center justify-center
                                    {{ $grievance->status === 'resolved' ? 'bg-green-600 text-white' : 'bg-gray-200 text-gray-500' }}">
                                    <i class="fas fa-flag-checkered"></i>
                                </div>
                                <p class="text-sm text-gray-600 mt-2">সমাধান</p>
                            </div>
                        </div>
                    </div>

                    <!-- Details -->
                    <div class="p-6 space-y-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <p class="text-sm text-gray-500">নাম</p>
                                <p class="font-medium text-gray-900">{{ $grievance->name }}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">ফোন</p>
                                <p class="font-medium text-gray-900">{{ $grievance->phone }}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">ইউনিয়ন/ওয়ার্ড</p>
                                <p class="font-medium text-gray-900">{{ $grievance->union_ward ?: 'N/A' }}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">জমার তারিখ</p>
                                <p class="font-medium text-gray-900">{{ $grievance->created_at->format('d M, Y - H:i') }}
                                </p>
                            </div>
                        </div>

                        <div class="border-t pt-4">
                            <p class="text-sm text-gray-500 mb-1">বিষয়</p>
                            <p class="font-medium text-gray-900">{{ $grievance->subject }}</p>
                        </div>

                        <div>
                            <p class="text-sm text-gray-500 mb-1">বিবরণ</p>
                            <p class="text-gray-700">{{ $grievance->description }}</p>
                        </div>

                        @if ($grievance->admin_note)
                            <div class="bg-green-50 rounded-lg p-4 border border-green-200">
                                <p class="text-sm text-green-700 font-medium mb-1">
                                    <i class="fas fa-comment-dots mr-2"></i>প্রশাসনিক মন্তব্য
                                </p>
                                <p class="text-green-800">{{ $grievance->admin_note }}</p>
                            </div>
                        @endif
                    </div>
                </div>
            @elseif(request('tracking_id'))
                <div class="bg-white rounded-xl shadow-md p-12 text-center">
                    <div class="w-16 h-16 mx-auto mb-4 bg-red-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-times text-2xl text-red-600"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-2">কোনো অভিযোগ পাওয়া যায়নি</h3>
                    <p class="text-gray-600">এই ট্র্যাকিং আইডি দিয়ে কোনো অভিযোগ খুঁজে পাওয়া যায়নি।<br>অনুগ্রহ করে সঠিক
                        ট্র্যাকিং আইডি দিন।</p>
                </div>
            @endif

            <!-- Help Box -->
            <div class="mt-8 bg-blue-50 rounded-xl p-6">
                <h3 class="font-bold text-blue-900 mb-2">
                    <i class="fas fa-question-circle mr-2"></i>ট্র্যাকিং আইডি কোথায় পাবেন?
                </h3>
                <p class="text-blue-700 text-sm">
                    অভিযোগ জমা দেওয়ার পর আপনাকে একটি ট্র্যাকিং আইডি দেওয়া হয়। এটি GRV- দিয়ে শুরু হয়।
                    <a href="{{ route('grievance.form') }}" class="underline hover:no-underline ml-1">নতুন অভিযোগ দাখিল
                        করুন →</a>
                </p>
            </div>
        </div>
    </section>
@endsection