@extends('layouts.frontend')

@section('title', 'অভিযোগ সফলভাবে জমা হয়েছে - ' . ($settings['site_name'] ?? 'সাংসদ পোর্টাল'))

@section('content')
    <!-- Success Section -->
    <section class="py-16 md:py-24 bg-gray-50">
        <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <div class="bg-white rounded-2xl shadow-lg p-8 md:p-12">
                <!-- Success Icon -->
                <div class="w-20 h-20 mx-auto mb-6 bg-green-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-check text-4xl text-green-600"></i>
                </div>

                <h1 class="text-2xl md:text-3xl font-bold text-gray-900 mb-4">
                    অভিযোগ সফলভাবে জমা হয়েছে!
                </h1>
                <p class="text-gray-600 mb-8">
                    আপনার অভিযোগ আমাদের কাছে পৌঁছেছে। অভিযোগের অবস্থা জানতে নিচের ট্র্যাকিং আইডি সংরক্ষণ করুন।
                </p>

                <!-- Tracking ID Card -->
                <div class="bg-bd-green-50 rounded-xl p-6 mb-8">
                    <p class="text-sm text-bd-green-600 mb-2">আপনার ট্র্যাকিং আইডি</p>
                    <div class="flex items-center justify-center gap-3">
                        <span id="trackingId"
                            class="text-2xl md:text-3xl font-bold text-bd-green-600 tracking-wider">{{ $trackingId }}</span>
                        <button onclick="copyTrackingId()"
                            class="p-2 bg-white rounded-lg text-bd-green-500 hover:bg-bd-green-100 transition"
                            title="কপি করুন">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="flex flex-col sm:flex-row justify-center gap-4">
                    <a href="{{ route('grievance.track') }}?tracking_id={{ $trackingId }}"
                        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 mr-2"></i>অবস্থা দেখুন
                    </a>
                    <a href="{{ route('home') }}"
                        class="px-6 py-3 bg-gray-100 text-gray-700 rounded-lg font-semibold hover:bg-gray-200 transition">
                        <i class="fas fa-home mr-2"></i>হোমে ফিরুন
                    </a>
                </div>
            </div>

            <!-- Info Box -->
            <div class="mt-8 bg-blue-50 rounded-xl p-6 text-left">
                <h3 class="font-bold text-blue-900 mb-3">
                    <i class="fas fa-lightbulb mr-2"></i>পরবর্তী পদক্ষেপ
                </h3>
                <ul class="space-y-2 text-blue-700 text-sm">
                    <li class="flex items-start gap-2">
                        <i class="fas fa-check-circle mt-1"></i>
                        <span>ট্র্যাকিং আইডি সংরক্ষণ করুন বা স্ক্রিনশট নিন</span>
                    </li>
                    <li class="flex items-start gap-2">
                        <i class="fas fa-check-circle mt-1"></i>
                        <span>যেকোনো সময় ট্র্যাকিং পেজে গিয়ে অবস্থা জানুন</span>
                    </li>
                    <li class="flex items-start gap-2">
                        <i class="fas fa-check-circle mt-1"></i>
                        <span>সাধারণত ৭-১৪ কার্যদিবসের মধ্যে প্রতিক্রিয়া পাবেন</span>
                    </li>
                </ul>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        function copyTrackingId() {
            const trackingId = document.getElementById('trackingId').innerText;
            navigator.clipboard.writeText(trackingId).then(() => {
                alert('ট্র্যাকিং আইডি কপি হয়েছে!');
            });
        }
    </script>
@endpush