@extends('layouts.public')

@section('title', 'शिकायत निवारण प्रणाली | Grievance Redressal - Vishwas Bank')

@section('content')
<!-- HERO -->
<section class="bg-gradient-to-r from-navy via-royal to-navy text-white py-16 relative overflow-hidden">
    <div class="absolute inset-0 opacity-10 bg-[radial-gradient(#C6A15B_1px,transparent_1px)] [background-size:16px_16px]"></div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
        <span class="inline-block bg-gold/20 text-gold border border-gold/40 text-xs font-bold uppercase tracking-widest px-3 py-1 rounded-full mb-3">
            पारदर्शी एवं उत्तरदायी सेवा
        </span>
        <h1 class="text-3xl sm:text-5xl font-extrabold font-heading text-white mb-4">
            ग्राहक शिकायत एवं निवारण प्रकोष्ठ
        </h1>
        <p class="text-gold-light max-w-2xl mx-auto text-base sm:text-lg">
            आपकी संतुष्टि हमारा सर्वोच्च संकल्प है। अपनी किसी भी असुविधा या सुझाव को सीधे हमारे नोडल निवारण अधिकारी तक पहुंचाएं।
        </p>
    </div>
</section>

<!-- MAIN SECTION -->
<section class="py-12 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        @if(session('success'))
            <div class="mb-8 bg-emerald-50 border-l-4 border-emerald-500 p-4 rounded-r-xl shadow-sm flex items-start gap-3">
                <i class="fa-solid fa-circle-check text-emerald-500 text-xl mt-0.5"></i>
                <div>
                    <h4 class="font-bold text-emerald-900 text-sm">शिकायत सफलतापूर्वक दर्ज!</h4>
                    <p class="text-xs sm:text-sm text-emerald-800 mt-0.5">{{ session('success') }}</p>
                </div>
            </div>
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- LEFT 2 COLS: LODGE GRIEVANCE FORM -->
            <div class="lg:col-span-2 bg-white rounded-3xl p-6 sm:p-10 border border-gray-200 shadow-sm">
                <div class="border-b pb-4 mb-6">
                    <h2 class="text-2xl font-bold text-navy font-heading">ऑनलाइन शिकायत दर्ज करें</h2>
                    <p class="text-xs sm:text-sm text-gray-500 mt-1">प्रत्येक शिकायत को एक विशिष्ट ट्रैकिंग नंबर आवंटित किया जाता है।</p>
                </div>

                <form action="{{ route('grievance.submit') }}" method="POST" class="space-y-5">
                    @csrf
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-xs font-bold text-gray-700 uppercase mb-1.5">आवेदक का पूरा नाम *</label>
                            <input type="text" name="name" required value="{{ old('name') }}" placeholder="उदा. रमेश कुमार शर्मा"
                                   class="w-full px-4 py-2.5 rounded-xl border border-gray-300 focus:border-gold focus:ring-1 focus:ring-gold text-sm">
                            @error('name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-gray-700 uppercase mb-1.5">मोबाइल नंबर *</label>
                            <input type="text" name="phone" required value="{{ old('phone') }}" placeholder="उदा. 9876543210"
                                   class="w-full px-4 py-2.5 rounded-xl border border-gray-300 focus:border-gold focus:ring-1 focus:ring-gold text-sm">
                            @error('phone') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-xs font-bold text-gray-700 uppercase mb-1.5">ईमेल पता *</label>
                            <input type="email" name="email" required value="{{ old('email') }}" placeholder="उदा. yourname@gmail.com"
                                   class="w-full px-4 py-2.5 rounded-xl border border-gray-300 focus:border-gold focus:ring-1 focus:ring-gold text-sm">
                            @error('email') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-gray-700 uppercase mb-1.5">शिकायत की श्रेणी *</label>
                            <select name="category" required class="w-full px-4 py-2.5 rounded-xl border border-gray-300 focus:border-gold focus:ring-1 focus:ring-gold text-sm bg-white">
                                <option value="">-- श्रेणी चुनें --</option>
                                <option value="banking_service">खाता एवं पासबुक सेवा (Account Services)</option>
                                <option value="loan_emi">ऋण एवं ईएमआई संबंधी (Loans & EMI)</option>
                                <option value="field_collection">फील्ड एजेंट आचरण (Agent Behavior)</option>
                                <option value="deposit_fd_rd">सावधि जमा/ब्याज (FD/RD Issues)</option>
                                <option value="ambulance_service">एम्बुलेंस सेवा शिकायत (Ambulance Delay)</option>
                                <option value="teerth_yatra">तीर्थयात्रा संबंधी (Pilgrimage Registration)</option>
                                <option value="other">अन्य समस्या (Other Grievance)</option>
                            </select>
                            @error('category') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-gray-700 uppercase mb-1.5">विषय (Subject) *</label>
                        <input type="text" name="subject" required value="{{ old('subject') }}" placeholder="समस्या का संक्षिप्त विवरण"
                               class="w-full px-4 py-2.5 rounded-xl border border-gray-300 focus:border-gold focus:ring-1 focus:ring-gold text-sm">
                        @error('subject') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-gray-700 uppercase mb-1.5">विस्तृत विवरण (Description) *</label>
                        <textarea name="description" rows="4" required placeholder="कृपया अपनी समस्या, खाता नंबर (यदि लागू हो), शाखा का नाम और घटना की तिथि विस्तार से लिखें..."
                                  class="w-full px-4 py-2.5 rounded-xl border border-gray-300 focus:border-gold focus:ring-1 focus:ring-gold text-sm">{{ old('description') }}</textarea>
                        @error('description') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>

                    <button type="submit" class="w-full sm:w-auto px-8 py-3 bg-navy hover:bg-gold hover:text-navy text-white font-bold rounded-xl text-sm transition shadow-md">
                        शिकायत दर्ज करें <i class="fa-solid fa-paper-plane ml-2"></i>
                    </button>
                </form>
            </div>

            <!-- RIGHT COL: TRACKING & ESCALATION -->
            <div class="space-y-6">
                <!-- TRACK GRIEVANCE WIDGET -->
                <div class="bg-white rounded-3xl p-6 border border-gray-200 shadow-sm">
                    <div class="flex items-center space-x-2.5 mb-3 text-navy">
                        <i class="fa-solid fa-magnifying-glass-location text-gold text-xl"></i>
                        <h3 class="font-bold text-base">शिकायत स्थिति ट्रैक करें</h3>
                    </div>
                    <p class="text-xs text-gray-500 mb-4">अपनी पूर्व में दर्ज शिकायत का संदर्भ नंबर (उदा. CMP-2026-XXXX) दर्ज करें।</p>
                    
                    <form action="{{ route('grievance.track') }}" method="GET" class="space-y-3">
                        <input type="text" name="complaint_no" required placeholder="शिकायत ट्रैकिंग नंबर"
                               value="{{ request('complaint_no') }}"
                               class="w-full px-3.5 py-2 rounded-xl border border-gray-300 text-xs focus:border-gold focus:ring-1 focus:ring-gold uppercase">
                        <button type="submit" class="w-full py-2.5 bg-gold hover:bg-gold-dark text-navy font-bold rounded-xl text-xs transition">
                            स्थिति जांचें (Check Status)
                        </button>
                    </form>

                    <!-- COMPLAINT RESULT IF FOUND -->
                    @if(isset($complaint))
                        <div class="mt-4 p-4 rounded-xl border {{ $complaint ? 'bg-amber-50/50 border-amber-200' : 'bg-red-50 border-red-200' }} text-xs">
                            @if($complaint)
                                <div class="flex justify-between items-center mb-2">
                                    <span class="font-bold text-navy">{{ $complaint->complaint_no }}</span>
                                    <span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase
                                        @if($complaint->status === 'resolved') bg-emerald-100 text-emerald-800
                                        @elseif($complaint->status === 'in_progress') bg-blue-100 text-blue-800
                                        @else bg-amber-100 text-amber-800 @endif">
                                        {{ $complaint->status }}
                                    </span>
                                </div>
                                <p class="text-gray-700"><strong>विषय:</strong> {{ $complaint->subject }}</p>
                                <p class="text-gray-500 mt-1"><strong>दिनांक:</strong> {{ $complaint->created_at->format('d M, Y') }}</p>
                                @if($complaint->admin_notes)
                                    <div class="mt-2 p-2 bg-white rounded border border-gray-200 text-gray-800">
                                        <strong>अधिकारी टिप्पणी:</strong> {{ $complaint->admin_notes }}
                                    </div>
                                @endif
                            @else
                                <p class="text-red-700 font-medium">इस नंबर के लिए कोई शिकायत दर्ज नहीं मिली।</p>
                            @endif
                        </div>
                    @endif
                </div>

                <!-- ESCALATION MATRIX -->
                <div class="bg-gradient-to-br from-navy to-royal text-white rounded-3xl p-6 border border-gold/30">
                    <h3 class="text-base font-bold text-gold mb-3 flex items-center gap-2">
                        <i class="fa-solid fa-stairs"></i> निवारण सोपान (Escalation Matrix)
                    </h3>
                    <div class="space-y-3 text-xs">
                        <div class="p-3 bg-white/5 rounded-xl border border-white/10">
                            <span class="text-gold font-bold block">स्तर 1: शाखा प्रबंधक</span>
                            <p class="text-gray-300">प्राथमिक स्तर पर समाधान 3 कार्य दिवसों के भीतर।</p>
                        </div>
                        <div class="p-3 bg-white/5 rounded-xl border border-white/10">
                            <span class="text-gold font-bold block">स्तर 2: नोडल शिकायत अधिकारी</span>
                            <p class="text-gray-300">यदि 3 दिन में समाधान न हो। ईमेल: grievance@vishwasbank.in</p>
                        </div>
                        <div class="p-3 bg-white/5 rounded-xl border border-white/10">
                            <span class="text-gold font-bold block">स्तर 3: मुख्य कार्यकारी / बोर्ड</span>
                            <p class="text-gray-300">हेल्पलाइन: +91 9485877237 (सर्वोच्च समीक्षा प्रकोष्ठ)</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection