@extends('layouts.app')

@section('content')
<div class="space-y-6">
    <!-- Header Block -->
    <div>
        <h1 class="text-xl font-bold tracking-tight text-slate-900 md:text-2xl">✅ ওডিট অনুমোদন কেন্দ্র (Voucher Approvals & Rejection)</h1>
        <p class="text-xs text-slate-500 font-medium">শাখা ব্যবস্থাপক বা ক্যাশিয়ার কর্তৃক তৈরি বিচারাধীন এবং অপেক্ষমান ভাউচার অনুমোদন পেনেল।</p>
    </div>

    <!-- Live Alerts / Counters -->
    @php
        $pendingNum = $pendingVouchers->count();
    @endphp
    @if($pendingNum > 0)
        <div class="bg-amber-50 text-amber-800 border border-amber-200 rounded-3xl p-5 shadow-sm flex items-center gap-4">
            <span class="text-3xl">⏳</span>
            <div>
                <h4 class="font-bold text-sm">পেন্ডিং ভাউচার সংখ্যাঃ {{ $pendingNum }} টি</h4>
                <p class="text-xs text-amber-700/80 mt-1">দয়া করে ভাউচারের বিবরণ ও পরিমাণ যাচাই করে অনুমোদন বা প্রত্যাখ্যান নিশ্চিত করুন।</p>
            </div>
        </div>
    @else
        <div class="bg-emerald-50 text-emerald-800 border border-emerald-200 rounded-3xl p-5 shadow-sm flex items-center gap-4">
            <span class="text-3xl">🎉</span>
            <div>
                <h4 class="font-bold text-sm">অনুমোদন সম্পন্ন</h4>
                <p class="text-xs text-emerald-700/85 mt-1">সব ভাউচার প্রসেস হয়ে গিয়েছে! অনুমোদন করার মত কোনো ভাউচার বিচারাধীন নেই।</p>
            </div>
        </div>
    @endif

    <!-- Part 1: Pending Vouchers -->
    <div class="bg-white border border-slate-200 rounded-3xl p-6 shadow-sm">
        <h3 class="text-xs font-black uppercase text-slate-400 tracking-wider mb-5">⏳ বিচারাধীন পেন্ডিং ভাউচার সমূহ</h3>
        
        <div class="overflow-x-auto">
            <table class="w-full text-xs font-medium text-slate-700">
                <thead>
                    <tr class="text-left text-[11px] text-slate-400 font-bold border-b border-slate-100 uppercase tracking-wider">
                        <th class="py-3 px-4">ভাউচার আইডি</th>
                        <th class="py-3 px-4">তৈরি কারক</th>
                        <th class="py-3 px-4">বিবরণ (Particulars) / ক্যাটাগরি</th>
                        <th class="py-3 px-4">পেমেন্ট সোর্স</th>
                        <th class="py-3 px-4">পরিমাণ (Amount)</th>
                        <th class="py-3 px-4 text-center">অনুমোদন কন্ট্রোল</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($pendingVouchers as $voucher)
                        <tr class="hover:bg-slate-50/50 transition">
                            <td class="py-4 px-4 font-mono font-bold">
                                <span class="block text-slate-800">{{ $voucher->voucher_no }}</span>
                                <span class="text-[9px] text-slate-400 font-normal block mt-1">তৈরিঃ {{ $voucher->created_at->format('Y-m-d H:i') }}</span>
                            </td>
                            <td class="py-4 px-4">
                                <p class="font-bold text-slate-800">{{ $voucher->created_by_name }}</p>
                                <span class="bg-slate-100 text-slate-600 border border-slate-200 text-[10px] px-2 py-0.5 mt-0.5 rounded-md inline-block">শাখা আইডিঃ {{ $voucher->branch_id }}</span>
                            </td>
                            <td class="py-4 px-4">
                                <p class="max-w-[250px] truncate-3-lines text-slate-800 leading-relaxed font-semibold mb-1" title="{{ $voucher->particulars }}">{{ $voucher->particulars }}</p>
                                <span class="bg-amber-100 text-amber-800 font-extrabold text-[9px] px-2 py-0.5 rounded-sm">{{ $voucher->category }}</span>
                            </td>
                            <td class="py-4 px-4 font-bold text-slate-600 font-mono">
                                {{ $voucher->payment_method }}
                                @if($voucher->bankAccount)
                                    <span class="block text-[10px] font-normal text-slate-400 font-sans">({{ $voucher->bankAccount->bank_name }})</span>
                                @endif
                            </td>
                            <td class="py-4 px-4 font-mono">
                                <span class="text-sm font-black {{ $voucher->type === 'Cash In' ? 'text-emerald-600' : 'text-rose-600' }}">
                                    {{ $voucher->type === 'Cash In' ? 'প্রাপ্তি (+)' : 'পরিষদ (-)' }} ৳{{ number_format($voucher->amount, 2) }}
                                </span>
                            </td>
                            <td class="py-4 px-4 text-center">
                                <div class="flex items-center justify-center gap-2">
                                    <!-- Approve button -->
                                    <form action="{{ route('transactions.approve', $voucher->id) }}" method="POST">
                                        @csrf
                                        <button type="submit" class="bg-emerald-600 hover:bg-emerald-700 text-white font-extrabold text-[10px] px-3.5 py-2 rounded-xl shadow-sm transition-all">
                                            ✅ অনুমোদন
                                        </button>
                                    </form>

                                    <!-- Reject action with inline modal indicator -->
                                    <button onclick="openRejectDialog('{{ $voucher->id }}', '{{ $voucher->voucher_no }}')" class="bg-rose-50 border border-rose-200 hover:bg-rose-600 text-rose-600 hover:text-white font-extrabold text-[10px] px-3.5 py-2 rounded-xl shadow-sm transition-all">
                                        ❌ বাতিল
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="py-12 text-center text-slate-400 font-bold">অনুমোদনের জন্য কোনো ভাউচার বিচারাধীন নেই!</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Part 2: Processed History -->
    <div class="bg-white border border-slate-200 rounded-3xl p-6 shadow-sm">
        <h3 class="text-xs font-black uppercase text-slate-400 tracking-wider mb-5">📜 সাম্প্রতিক প্রসেসড ভাউচার রেকর্ড</h3>
        <div class="overflow-x-auto">
            <table class="w-full text-xs font-medium text-slate-700">
                <thead>
                    <tr class="text-left text-[11px] text-slate-400 font-bold border-b border-slate-100 uppercase tracking-wider">
                        <th class="py-2.5 px-4">ভাউচার</th>
                        <th class="py-2.5 px-4">পরিমাণ (Amount)</th>
                        <th class="py-2.5 px-4">Particulars</th>
                        <th class="py-2.5 px-4">অবস্থা (Status)</th>
                        <th class="py-2.5 px-4">মন্তব্য (Audit notes)</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @foreach($processedVouchers as $p)
                        <tr class="hover:bg-slate-50/50 transition text-slate-600">
                            <td class="py-2.5 px-4 font-mono font-bold">{{ $p->voucher_no }}</td>
                            <td class="py-2.5 px-4 font-mono font-bold">৳{{ number_format($p->amount, 2) }}</td>
                            <td class="py-2.5 px-4 max-w-[200px] truncate" title="{{ $p->particulars }}">{{ $p->particulars }}</td>
                            <td class="py-2.5 px-4">
                                <span class="px-2 py-0.5 rounded-full text-[9px] font-black uppercase {{ $p->status === 'Approved' ? 'bg-emerald-50 text-emerald-700' : 'bg-rose-50 text-rose-700' }}">
                                    {{ $p->status }}
                                </span>
                            </td>
                            <td class="py-2.5 px-4 text-slate-400 max-w-[200px] truncate" title="{{ $p->approval_notes }}">{{ $p->approval_notes }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Rejection ModalDialog -->
<div id="rejectModal" class="hidden fixed inset-0 z-50 bg-slate-900/60 flex items-center justify-center p-4 backdrop-blur-xs">
    <div class="bg-white border border-slate-200 rounded-3xl max-w-md w-full p-6 shadow-xl relative animate-in fade-in zoom-in-95 duration-200">
        <button onclick="closeRejectDialog()" class="absolute top-4 right-4 text-slate-400 hover:text-slate-600 font-extrabold text-lg">&times;</button>
        
        <h3 class="text-base font-black text-slate-900 tracking-tight flex items-center gap-2">
            <span>❌ ভাউচার প্রত্যাখ্যান বাতিলকরণ</span>
        </h3>
        <p class="text-xs text-slate-500 mt-1 mb-4" id="rejectHeadingText">ভাউচার নং VCH প্রত্যাখ্যান করার কারণ ব্যাখ্যা করুন।</p>

        <form id="rejectForm" action="" method="POST" class="space-y-4 text-xs font-sans">
            @csrf
            <div>
                <label class="block font-bold text-slate-705 mb-1.5">প্রত্যাখ্যান করার অডিট মন্তব্য / নোট *</label>
                <textarea name="notes" required rows="3" placeholder="কেনো প্রত্যাখ্যাত হচ্ছে বিস্তারিত লিখুন (যেমনঃ ইনভয়েস অমিল)..." class="w-full bg-slate-50 border border-slate-200 px-4 py-2.5 rounded-xl focus:outline-none focus:ring-1 focus:ring-rose-500 text-slate-850 font-medium"></textarea>
            </div>

            <div class="flex items-center justify-end gap-3 pt-2">
                <button type="button" onclick="closeRejectDialog()" class="bg-slate-100 hover:bg-slate-200 text-slate-600 font-bold px-4 py-2.5 rounded-xl transition-all">ফিরে যান</button>
                <button type="submit" class="bg-rose-600 hover:bg-rose-700 text-white font-extrabold px-6 py-2.5 rounded-xl transition-all shadow-md shadow-rose-500/10">অপ্রত্যাখ্যান নিশ্চিত করুন</button>
            </div>
        </form>
    </div>
</div>

<script>
    function openRejectDialog(id, voucherNo) {
        const dialog = document.getElementById('rejectModal');
        const headingText = document.getElementById('rejectHeadingText');
        const form = document.getElementById('rejectForm');

        headingText.innerHTML = `<strong>${voucherNo}</strong> প্রত্যাখ্যান করা হচ্ছে। বাতিল করার যৌক্তিক কারণ সংযুক্ত করুন যাতে ক্রিয়েটর জানতে পারে।`;
        form.action = `/vouchers/${id}/reject`;
        dialog.classList.remove('hidden');
    }

    function closeRejectDialog() {
        const dialog = document.getElementById('rejectModal');
        dialog.classList.add('hidden');
    }
</script>
@endsection
