@extends('layouts.app')

@section('content')
<div class="space-y-6">
    <!-- Header banner -->
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <h1 class="text-xl font-bold tracking-tight text-slate-900 md:text-2xl">🖨️ কর্পোরেট স্টেটমেন্ট ও রিপোর্ট সেন্টার (Reports Generator)</h1>
            <p class="text-xs text-slate-500 font-medium">কাস্টম ডেইট-অবধি হিসাব ফিল্টারিং, প্রাপ্তি ও প্রদান সামারি কার্ড এবং প্রিন্ট-উইন্ডো সামঞ্জস্যতা।</p>
        </div>
        <div>
            <button onclick="window.print()" class="bg-slate-900 hover:bg-slate-800 text-white font-extrabold text-xs px-4 py-2.5 rounded-xl flex items-center gap-2 shadow-md transition-all">
                🖨️ প্রিন্ট করুন (Print Statement)
            </button>
        </div>
    </div>

    <!-- Date filtering control panel (hidden during page print) -->
    <div class="bg-white border border-slate-200 rounded-3xl p-5 shadow-sm print:hidden">
        <form action="{{ route('reports.index') }}" method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-4 text-xs font-bold text-slate-600">
            <div>
                <label class="block text-[11px] text-slate-400 mb-1.5 uppercase tracking-wider">শুরুর তারিখ (Start Date)</label>
                <input type="date" name="start_date" value="{{ $startDate }}" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-2.5 focus:outline-none focus:ring-1 focus:ring-blue-500">
            </div>
            <div>
                <label class="block text-[11px] text-slate-400 mb-1.5 uppercase tracking-wider">শেষের তারিখ (End Date)</label>
                <input type="date" name="end_date" value="{{ $endDate }}" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-2.5 focus:outline-none focus:ring-1 focus:ring-blue-500">
            </div>
            <div>
                <label class="block text-[11px] text-slate-400 mb-1.5 uppercase tracking-wider">ভাউচার ধরণ (Voucher Type)</label>
                <select name="type" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 focus:outline-none focus:ring-1 focus:ring-blue-500 text-slate-700">
                    <option value="">সকল ধরণের ভাউচার</option>
                    <option value="Cash In" {{ $type === 'Cash In' ? 'selected' : '' }}>ক্যাশ ইন (Cash In)</option>
                    <option value="Cash Out" {{ $type === 'Cash Out' ? 'selected' : '' }}>ক্যাশ আউট (Cash Out)</option>
                </select>
            </div>
            <div>
                <label class="block text-[11px] text-slate-400 mb-1.5 uppercase tracking-wider">অডিট স্ট্যাটাস (Audit Status)</label>
                <div class="flex gap-2">
                    <select name="status" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 focus:outline-none focus:ring-1 focus:ring-blue-500 text-slate-705">
                        <option value="">সকল স্ট্যাটাস</option>
                        <option value="Approved" {{ $status === 'Approved' ? 'selected' : '' }}>অনুমোদিত (Approved)</option>
                        <option value="Pending" {{ $status === 'Pending' ? 'selected' : '' }}>বিচারাধীন (Pending)</option>
                        <option value="Rejected" {{ $status === 'Rejected' ? 'selected' : '' }}>বাতিলকৃত (Rejected)</option>
                    </select>
                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-5 rounded-xl font-black font-sans transition shadow-sm shadow-blue-500/10">🔍</button>
                </div>
            </div>
        </form>
    </div>

    <!-- Highlight analytics cards (printable) -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
        <div class="bg-white border border-slate-200 rounded-3xl p-5 shadow-sm">
            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">ফিল্টারকৃত প্রাপ্তি (Cash In Total)</span>
            <h3 class="text-xl font-black text-emerald-600 font-mono mt-1">৳{{ number_format($filteredIn, 2) }}</h3>
            <p class="text-[10px] text-slate-400 mt-1">নির্বাচিত সময়ে সর্বমোট লিকুইড ক্যাশ প্রাপ্তি ভলিউম।</p>
        </div>
        <div class="bg-white border border-slate-200 rounded-3xl p-5 shadow-sm">
            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">ফিল্টারকৃত প্রদান / খরচ (Cash Out Total)</span>
            <h3 class="text-xl font-black text-rose-600 font-mono mt-1">৳{{ number_format($filteredOut, 2) }}</h3>
            <p class="text-[10px] text-slate-400 mt-1">নির্বাচিত সময়ে সর্বমোট লিকুইড ক্যাশ প্রদান ভলিউম।</p>
        </div>
        <div class="bg-white border border-slate-200 rounded-3xl p-5 shadow-sm">
            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">নেট ক্যাশ ফ্লো (Net Cash Flow)</span>
            <h3 class="text-xl font-black {{ $netFlow >= 0 ? 'text-blue-600' : 'text-rose-600' }} font-mono mt-1">
                ৳{{ number_format($netFlow, 2) }}
            </h3>
            <p class="text-[10px] text-slate-400 mt-1">প্রাপ্তি এবং প্রদানের মধ্যকার প্রকৃত ভারসাম্য অবশিষ্টাংশ।</p>
        </div>
    </div>

    <!-- Printable ledger reports table block -->
    <div class="bg-white border border-slate-200 rounded-3xl p-6 shadow-sm overflow-hidden">
        <div class="border-b border-slate-100 pb-4 mb-4 flex items-center justify-between">
            <div>
                <h3 class="text-sm font-extrabold text-slate-800">📋 নির্বাচিত সময়ভিত্তিক হিসাব বিবরণী তালিকা</h3>
                <p class="text-[10px] text-slate-400 mt-0.5">রিপোর্ট রেঞ্জঃ {{ $startDate }} হতে {{ $endDate }}</p>
            </div>
            <div class="font-mono text-[10px] bg-slate-100 text-slate-600 rounded-md px-2 py-1 uppercase font-bold">
                ভাউচার সংখ্যাঃ {{ $reportVouchers->count() }} টি
            </div>
        </div>

        <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">রেকর্ড টাইপ</th>
                        <th class="py-3 px-4">গ্রহীতা / Particulars</th>
                        <th class="py-3 px-4">পেমেন্ট সূত্র</th>
                        <th class="py-3 px-4 text-right">পরিমাণ (Amount)</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($reportVouchers as $row)
                        <tr class="hover:bg-slate-50/50 transition">
                            <td class="py-3 px-4 font-mono text-slate-500">{{ $row->created_at->format('Y-m-d H:i') }}</td>
                            <td class="py-3 px-4 font-mono font-bold text-slate-800">{{ $row->voucher_no }}</td>
                            <td class="py-3 px-4">
                                <span class="px-2 py-0.5 rounded text-[9px] font-bold {{ $row->type === 'Cash In' ? 'bg-emerald-50 text-emerald-700 border border-emerald-100' : 'bg-rose-50 text-rose-700 border border-rose-100' }}">
                                    {{ $row->type }}
                                </span>
                            </td>
                            <td class="py-3 px-4">
                                <p class="text-slate-850 font-semibold">{{ $row->particulars }}</p>
                                <span class="text-[9px] font-normal text-slate-400">খাতঃ {{ $row->category }} | প্রস্তুতকারীঃ {{ $row->created_by_name }}</span>
                            </td>
                            <td class="py-3 px-4 font-bold text-slate-600 font-mono">{{ $row->payment_method }}</td>
                            <td class="py-3 px-4 text-right font-mono font-black text-sm {{ $row->type === 'Cash In' ? 'text-emerald-600' : 'text-rose-600' }}">
                                ৳{{ number_format($row->amount, 2) }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="py-12 text-center text-slate-400">ফিল্টারকৃত মানদণ্ডে কোনো ভাউচার তথ্য পাওয়া যায়নি।</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection
