@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>

    <!-- Form Section -->
    <section class="py-12 bg-gray-50">
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-white rounded-xl shadow-md p-6 md:p-8">
                @if ($errors->any())
                    <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
                        <div class="flex items-center gap-2 text-red-700 font-medium mb-2">
                            <i class="fas fa-exclamation-circle"></i>
                            <span>কিছু ত্রুটি হয়েছে</span>
                        </div>
                        <ul class="list-disc list-inside text-red-600 text-sm">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form action="{{ route('grievance.submit') }}" method="POST" enctype="multipart/form-data"
                    class="space-y-6">
                    @csrf

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-user mr-2 text-bd-green-500"></i>আপনার নাম <span
                                    class="text-red-500">*</span>
                            </label>
                            <input type="text" name="name" id="name" value="{{ old('name') }}" required
                                class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-bd-green-500 focus:border-bd-green-500 @error('name') border-red-500 @enderror"
                                placeholder="পূর্ণ নাম লিখুন">
                        </div>

                        <div>
                            <label for="phone" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-phone mr-2 text-bd-green-500"></i>ফোন নম্বর <span
                                    class="text-red-500">*</span>
                            </label>
                            <input type="tel" name="phone" id="phone" value="{{ old('phone') }}" required
                                class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-bd-green-500 focus:border-bd-green-500 @error('phone') border-red-500 @enderror"
                                placeholder="০১XXXXXXXXX">
                        </div>
                    </div>

                    <div>
                        <label for="union_ward" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-map-marker-alt mr-2 text-bd-green-500"></i>ইউনিয়ন/ওয়ার্ড (ঐচ্ছিক)
                        </label>
                        <input type="text" name="union_ward" id="union_ward" value="{{ old('union_ward') }}"
                            class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-bd-green-500 focus:border-bd-green-500"
                            placeholder="আপনার ইউনিয়ন বা ওয়ার্ড নাম">
                    </div>

                    <div>
                        <label for="subject" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-tag mr-2 text-bd-green-500"></i>বিষয় <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="subject" id="subject" value="{{ old('subject') }}" required
                            class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-bd-green-500 focus:border-bd-green-500 @error('subject') border-red-500 @enderror"
                            placeholder="অভিযোগের বিষয় সংক্ষেপে লিখুন">
                    </div>

                    <div>
                        <label for="description" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-align-left mr-2 text-bd-green-500"></i>বিবরণ <span class="text-red-500">*</span>
                        </label>
                        <textarea name="description" id="description" rows="5" required
                            class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-bd-green-500 focus:border-bd-green-500 @error('description') border-red-500 @enderror"
                            placeholder="আপনার সমস্যা বা অভিযোগের বিস্তারিত বিবরণ দিন...">{{ old('description') }}</textarea>
                    </div>

                    <div>
                        <label for="attachment" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-paperclip mr-2 text-bd-green-500"></i>সংযুক্তি (ঐচ্ছিক)
                        </label>
                        <input type="file" name="attachment" id="attachment" accept=".jpg,.jpeg,.png,.pdf"
                            class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-bd-green-500 focus:border-bd-green-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-bd-green-50 file:text-bd-green-600">
                        <p class="text-xs text-gray-500 mt-1">JPG, PNG বা PDF (সর্বোচ্চ 5MB)</p>
                    </div>

                    <div class="flex justify-end">
                        <button type="submit"
                            class="px-8 py-3 bg-bd-green-500 text-white rounded-lg font-semibold hover:bg-bd-green-600 transition">
                            <i class="fas fa-paper-plane mr-2"></i>অভিযোগ জমা দিন
                        </button>
                    </div>
                </form>
            </div>

            <!-- Info Cards -->
            <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="bg-blue-50 rounded-xl p-6">
                    <h3 class="font-bold text-blue-900 mb-2">
                        <i class="fas fa-info-circle mr-2"></i>গুরুত্বপূর্ণ তথ্য
                    </h3>
                    <p class="text-blue-700 text-sm">অভিযোগ জমা দেওয়ার পর আপনাকে একটি ট্র্যাকিং আইডি দেওয়া হবে। এই আইডি
                        দিয়ে পরে অভিযোগের অবস্থা জানতে পারবেন।</p>
                </div>
                <div class="bg-green-50 rounded-xl p-6">
                    <h3 class="font-bold text-green-900 mb-2">
                        <i class="fas fa-clock mr-2"></i>প্রক্রিয়াকরণ সময়
                    </h3>
                    <p class="text-green-700 text-sm">সাধারণত ৭-১৪ কার্যদিবসের মধ্যে অভিযোগ পর্যালোচনা করা হয়। জরুরি বিষয়ে
                        দ্রুত পদক্ষেপ নেওয়া হয়।</p>
                </div>
            </div>
        </div>
    </section>
@endsection