<?php echo $__env->yieldContent('styles'); ?>
<style>
    /* Premium subtle animations */
    .animate-bounce-subtle {
        animation: bounceSubtle 2s infinite;
    }
    @keyframes bounceSubtle {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-4px); }
    }
    .modal-backdrop {
        background-color: rgba(15, 23, 42, 0.65);
        backdrop-filter: blur(8px);
    }
</style>

<?php $__env->startSection('content'); ?>
<div class="space-y-8 pb-12 animate-fade-in relative">
    
    <!-- Operational Overview Premium Header with Quick Action Deck -->
    <div class="relative overflow-hidden bg-gradient-to-br from-slate-950 via-slate-900 to-indigo-950 text-white rounded-[2rem] p-6 md:p-8 shadow-2xl border border-slate-800/80">
        <!-- Accent Glow Effects -->
        <div class="absolute -top-24 -right-24 w-96 h-96 bg-indigo-500/10 blur-[100px] rounded-full pointer-events-none"></div>
        <div class="absolute -bottom-24 -left-24 w-80 h-80 bg-emerald-500/5 blur-[80px] rounded-full pointer-events-none"></div>
        
        <div class="relative z-10 flex flex-col lg:flex-row lg:items-center justify-between gap-6">
            <div class="space-y-3">
                <div class="flex flex-wrap items-center gap-2">
                    <span class="inline-flex items-center gap-1.5 bg-emerald-500/15 text-emerald-400 border border-emerald-500/35 text-[10px] font-black uppercase tracking-wider px-3 py-1 rounded-full shadow-sm">
                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                        Workspace Active
                    </span>
                    <span class="inline-flex items-center gap-1.5 bg-indigo-500/15 text-indigo-300 border border-indigo-500/30 text-[10px] font-black uppercase tracking-wider px-3 py-1 rounded-full shadow-sm">
                        🛡️ Safe Ledger System
                    </span>
                    <span class="inline-flex items-center gap-1.5 bg-amber-500/15 text-amber-300 border border-amber-500/30 text-[10px] font-black uppercase tracking-wider px-3 py-1 rounded-full shadow-sm">
                        💼 NGO & Company Suite
                    </span>
                </div>
                <h1 class="text-2xl md:text-3xl lg:text-4xl font-black tracking-tight text-white mt-1">
                    Finance Controller Hub 👋
                </h1>
                <p class="text-xs md:text-sm text-slate-350 font-medium max-w-2xl leading-relaxed">
                    Tenant Operator: <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-300 font-extrabold">Teletalk Corp Ltd</span> • Unified ledger workspace for cash advance loops, physical bank pools, and micro-loan disclosures.
                </p>
                
                <!-- Quick Interactive Operations Deck -->
                <div class="flex flex-wrap gap-3 pt-3">
                    <button onclick="openModal('modalCashIn')" class="px-5 py-3 bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800 text-white font-extrabold text-xs rounded-2xl flex items-center gap-2.5 shadow-lg shadow-emerald-700/25 transition-all duration-200 hover:-translate-y-0.5 active:translate-y-0 cursor-pointer">
                        <span class="text-sm">📥</span>
                        <span>+ Add Cash In (টাকা প্রাপ্তি)</span>
                    </button>
                    
                    <button onclick="openModal('modalCashOut')" class="px-5 py-3 bg-gradient-to-r from-indigo-500 to-indigo-600 hover:from-indigo-600 hover:to-indigo-750 text-white font-extrabold text-xs rounded-2xl flex items-center gap-2.5 shadow-lg shadow-indigo-600/25 transition-all duration-200 hover:-translate-y-0.5 active:translate-y-0 cursor-pointer">
                        <span class="text-sm">📤</span>
                        <span>- Add Cash Out (টাকা পরিশোধ)</span>
                    </button>
                    
                    <a href="#vouchersLedgerSection" class="px-5 py-3 bg-slate-800/80 hover:bg-slate-750 text-slate-200 border border-slate-700/80 font-black text-xs rounded-2xl flex items-center gap-2 transition duration-150">
                        <span>📝</span>
                        <span>Manage Vouchers (ভাউচার কেবিনেট)</span>
                    </a>
                </div>
            </div>
            
            <div class="flex flex-wrap items-center gap-3 self-start lg:self-end font-mono lg:flex-col lg:items-end">
                <!-- UTC Timestamp Indicator -->
                <div class="bg-slate-900/90 border border-slate-805 text-slate-350 text-xs px-4 py-3 rounded-2xl flex items-center gap-2.5 shadow-inner">
                    <span class="text-indigo-400 animate-pulse">⏱️</span> 
                    <span class="font-bold text-white tracking-wide">Date: <?php echo e(date('Y-m-d')); ?></span>
                </div>

                <div class="flex items-center gap-2.5 mt-2">
                    <!-- Dropdown Filter Selection -->
                    <div class="relative min-w-[140px]">
                        <select id="timeFilterSelect" onchange="window.location.href = '?filter=' + this.value" class="w-full appearance-none bg-indigo-500 hover:bg-indigo-600 border border-indigo-400/40 text-white font-extrabold text-xs rounded-2xl py-2.5 pl-4 pr-10 focus:outline-none focus:ring-2 focus:ring-indigo-400 cursor-pointer shadow-md transition duration-155">
                            <option value="month" <?php echo e($filterDetails['value'] === 'month' ? 'selected' : ''); ?>>This Month</option>
                            <option value="week" <?php echo e($filterDetails['value'] === 'week' ? 'selected' : ''); ?>>This Week</option>
                            <option value="today" <?php echo e($filterDetails['value'] === 'today' ? 'selected' : ''); ?>>Today</option>
                        </select>
                        <span class="absolute inset-y-0 right-4 flex items-center pointer-events-none text-white text-[10px] opacity-80">▼</span>
                    </div>

                    <!-- Refresh Button -->
                    <a href="<?php echo e(request()->url()); ?>?filter=<?php echo e($filterDetails['value']); ?>" class="p-2.5 bg-slate-900/95 hover:bg-slate-800 text-slate-200 border border-slate-805 rounded-2xl transition duration-200 flex items-center justify-center cursor-pointer shadow-md" title="রিফ্রেশ করুন">
                        🔄
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Live Drawer Petty Cash Warning Dynamic Banner -->
    <div class="bg-gradient-to-r from-blue-50 to-white border border-blue-200 rounded-[1.5rem] p-4.5 flex flex-col md:flex-row items-start md:items-center justify-between gap-4 shadow-xs">
        <div class="flex items-start md:items-center gap-3">
            <div class="p-2 bg-blue-100 text-blue-800 rounded-xl text-base shadow-inner shrink-0">
                📢
            </div>
            <div>
                <h4 class="text-xs font-black text-slate-900">ব্র্যাঞ্চ ক্যাশ ড্রয়ার লাইভ আপডেট (Operational Balance Warning)</h4>
                <p class="text-[11px] text-slate-500 font-bold mt-0.5 leading-relaxed">
                    কারেন্ট ব্রাঞ্চ: <span class="text-blue-700 font-extrabold"><?php echo e($branchInfo->name ?? 'Teletalk Main Branch'); ?></span> • 
                    নগদ অর্থ ভল্ট ব্যালেন্স: <span class="bg-blue-100 text-blue-800 px-1.5 py-0.5 rounded font-black font-mono">৳<?php echo e(number_format($branchInfo->balance ?? 0, 2)); ?></span>. 
                    এর অধিক নগদ ব্যয় অনুমোদনযোগ্য নয় এবং অডিটর রিভিউয়ের উপর নির্ভর করবে।
                </p>
            </div>
        </div>
        <div class="shrink-0 text-right">
            <span class="text-[10px] font-mono bg-blue-100 text-blue-900 px-2.5 py-1 rounded-lg border border-blue-250 font-bold uppercase">
                Active Drawer
            </span>
        </div>
    </div>

    <!-- Metrics Cards Grid (High contrast, fluid text sizing, no line wraps) -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6">
        
        <!-- Card 1: Total Cash Balance - Imperial Slate Theme -->
        <div class="relative bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 border border-slate-800 rounded-[2rem] p-5 shadow-2xl text-white overflow-hidden flex flex-col justify-between min-h-[160px] transition-all duration-300 hover:-translate-y-1.5 hover:shadow-indigo-500/10 hover:border-indigo-500/30">
            <span class="absolute -bottom-8 -right-8 w-24 h-24 bg-indigo-500/20 blur-2xl rounded-full pointer-events-none"></span>
            
            <div class="flex items-start justify-between gap-3">
                <div class="space-y-0.5">
                    <h4 class="text-[9px] md:text-[10px] font-black text-slate-400 tracking-wider uppercase font-sans">TOTAL CASH BALANCE</h4>
                    <p class="text-xs text-indigo-300 font-extrabold">মোট ক্যাশ ব্যালেন্স</p>
                </div>
                <div class="bg-indigo-505/10 border border-indigo-500/30 p-2.5 rounded-2xl text-indigo-400 shrink-0 shadow-inner flex items-center justify-center bg-slate-900/80">
                    <span class="text-lg">🏛️</span>
                </div>
            </div>
            
            <div class="mt-4 space-y-1">
                <h3 class="text-lg sm:text-base md:text-xl xl:text-lg 2xl:text-xl font-mono font-black text-white leading-tight truncate" title="৳<?php echo e(number_format($totalCashBalance, 2)); ?>">
                    ৳<?php echo e(number_format($totalCashBalance, 2)); ?>

                </h3>
                <p class="text-[9px] text-slate-400 font-bold flex items-center gap-1.5">
                    <span class="w-1.5 h-1.5 rounded-full bg-indigo-450 animate-ping"></span>
                    সব ব্রাঞ্চের মোট সমন্বয়
                </p>
            </div>
        </div>

        <!-- Card 2: Cash In - Mint Emerald Theme -->
        <div class="relative bg-white border border-slate-200/95 rounded-[2rem] p-5 shadow-xs overflow-hidden flex flex-col justify-between min-h-[160px] transition-all duration-300 hover:-translate-y-1.5 hover:shadow-xl hover:border-emerald-300">
            <span class="absolute -bottom-8 -right-8 w-24 h-24 bg-emerald-500/5 blur-2xl rounded-full pointer-events-none"></span>
            
            <div class="flex items-start justify-between gap-3">
                <div class="space-y-0.5">
                    <h4 class="text-[9px] md:text-[10px] font-black text-slate-400 tracking-wider uppercase font-sans">CASH IN • <?php echo e($filterDetails['label_en']); ?></h4>
                    <p class="text-xs text-emerald-600 font-extrabold"><?php echo e($filterDetails['label_bn']); ?> ক্যাশ ইন</p>
                </div>
                <div class="bg-emerald-50 border border-emerald-100 p-2.5 rounded-2xl text-emerald-600 shrink-0 shadow-xs flex items-center justify-center">
                    <span class="text-lg">📈</span>
                </div>
            </div>
            
            <div class="mt-4 space-y-1">
                <h3 class="text-lg sm:text-base md:text-xl xl:text-lg 2xl:text-xl font-mono font-black text-emerald-600 leading-tight truncate" title="৳<?php echo e(number_format($totalCashIn, 2)); ?>">
                    ৳<?php echo e(number_format($totalCashIn, 2)); ?>

                </h3>
                <p class="text-[9px] text-slate-500 font-bold flex items-center gap-1">
                    <span class="text-emerald-500 font-black">✓</span> <?php echo e($cashInCount); ?> টি ক্যাশ ভাউচার
                </p>
            </div>
        </div>

        <!-- Card 3: Cash Out - Rose Crimson Theme -->
        <div class="relative bg-white border border-slate-200/95 rounded-[2rem] p-5 shadow-xs overflow-hidden flex flex-col justify-between min-h-[160px] transition-all duration-300 hover:-translate-y-1.5 hover:shadow-xl hover:border-rose-300">
            <span class="absolute -bottom-8 -right-8 w-24 h-24 bg-rose-500/5 blur-2xl rounded-full pointer-events-none"></span>
            
            <div class="flex items-start justify-between gap-3">
                <div class="space-y-0.5">
                    <h4 class="text-[9px] md:text-[10px] font-black text-slate-400 tracking-wider uppercase font-sans">CASH OUT • <?php echo e($filterDetails['label_en']); ?></h4>
                    <p class="text-xs text-rose-505 font-extrabold"><?php echo e($filterDetails['label_bn']); ?> ক্যাশ আউট</p>
                </div>
                <div class="bg-rose-50 border border-rose-100 p-2.5 rounded-2xl text-rose-550 shrink-0 shadow-xs flex items-center justify-center">
                    <span class="text-lg">📉</span>
                </div>
            </div>
            
            <div class="mt-4 space-y-1">
                <h3 class="text-lg sm:text-base md:text-xl xl:text-lg 2xl:text-xl font-mono font-black text-rose-600 leading-tight truncate" title="৳<?php echo e(number_format($totalCashOut, 2)); ?>">
                    ৳<?php echo e(number_format($totalCashOut, 2)); ?>

                </h3>
                <p class="text-[9px] text-slate-500 font-bold flex items-center gap-1">
                    <span class="text-rose-450 font-black">×</span> <?php echo e($cashOutCount); ?> টি খরচের রেকর্ড
                </p>
            </div>
        </div>

        <!-- Card 4: Remaining Balance - Ocean Sapphire Theme -->
        <div class="relative bg-slate-50/70 border border-slate-200/90 rounded-[2rem] p-5 shadow-xs overflow-hidden flex flex-col justify-between min-h-[160px] transition-all duration-300 hover:-translate-y-1.5 hover:shadow-xl hover:border-slate-350">
            <span class="absolute -bottom-8 -right-8 w-24 h-24 bg-slate-500/5 blur-2xl rounded-full pointer-events-none"></span>
            
            <div class="flex items-start justify-between gap-3">
                <div class="space-y-0.5">
                    <h4 class="text-[9px] md:text-[10px] font-black text-slate-405 tracking-wider uppercase font-sans">REMAINING • <?php echo e($filterDetails['label_en']); ?></h4>
                    <p class="text-xs text-slate-600 font-extrabold"><?php echo e($filterDetails['label_bn']); ?> অবশিষ্ট</p>
                </div>
                <div class="bg-slate-100 border border-slate-200/60 p-2.5 rounded-2xl text-slate-700 shrink-0 shadow-xs flex items-center justify-center">
                    <span class="text-lg">🔄</span>
                </div>
            </div>
            
            <div class="mt-4 space-y-1">
                <h3 class="text-lg sm:text-base md:text-xl xl:text-lg 2xl:text-xl font-mono font-black text-slate-800 leading-tight truncate" title="৳<?php echo e(number_format($remainingBalance, 2)); ?>">
                    ৳<?php echo e(number_format($remainingBalance, 2)); ?>

                </h3>
                <p class="text-[9px] font-black">
                    <?php if($remainingBalance >= 0): ?>
                        <span class="inline-flex items-center gap-1 text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded-lg border border-emerald-150 text-[10px] uppercase font-bold">● Surplus (উদ্বৃত্ত)</span>
                    <?php else: ?>
                        <span class="inline-flex items-center gap-1 text-rose-700 bg-rose-50 px-2 py-0.5 rounded-lg border border-rose-150 text-[10px] uppercase font-bold">● Deficit (ঘাটতি)</span>
                    <?php endif; ?>
                </p>
            </div>
        </div>

        <!-- Card 5: Total Cash Advance - Indigo Purple Theme -->
        <div class="relative bg-white border border-slate-200/95 rounded-[2rem] p-5 shadow-xs overflow-hidden flex flex-col justify-between min-h-[160px] transition-all duration-300 hover:-translate-y-1.5 hover:shadow-xl hover:border-indigo-300">
            <span class="absolute -bottom-8 -right-8 w-24 h-24 bg-indigo-500/5 blur-2xl rounded-full pointer-events-none"></span>
            
            <div class="flex items-start justify-between gap-3">
                <div class="space-y-0.5">
                    <h4 class="text-[9px] md:text-[10px] font-black text-slate-400 tracking-wider uppercase font-sans">TOTAL CASH ADVANCE</h4>
                    <p class="text-xs text-indigo-700 font-extrabold">মোট ক্যাশ অগ্রিম</p>
                </div>
                <div class="bg-indigo-50 border border-indigo-100 p-2.5 rounded-2xl text-indigo-600 shrink-0 shadow-xs flex items-center justify-center">
                    <span class="text-lg">💼</span>
                </div>
            </div>
            
            <div class="mt-4 space-y-1">
                <h3 class="text-lg sm:text-base md:text-xl xl:text-lg 2xl:text-xl font-mono font-black text-slate-800 leading-tight truncate" title="৳<?php echo e(number_format($totalCashAdvance, 2)); ?>">
                    ৳<?php echo e(number_format($totalCashAdvance, 2)); ?>

                </h3>
                <div class="flex">
                    <span class="text-[9px] font-black bg-amber-50 text-amber-700 px-2 py-0.5 rounded-lg border border-amber-200 flex items-center gap-1">
                        ⚠️ বাকি: ৳<?php echo e(number_format($activeAdvances, 2)); ?>

                    </span>
                </div>
            </div>
        </div>

        <!-- Card 6: Pending Approvals - Golden Amber Glow -->
        <div class="relative bg-white border border-slate-200/95 rounded-[2rem] p-5 shadow-xs overflow-hidden flex flex-col justify-between min-h-[160px] transition-all duration-300 hover:-translate-y-1.5 hover:shadow-xl hover:border-amber-350">
            <span class="absolute top-2.5 right-2.5 w-2.5 h-2.5 bg-amber-500 rounded-full block animate-ping"></span>
            <span class="absolute top-2.5 right-2.5 w-2.5 h-2.5 bg-amber-500 rounded-full block"></span>
            
            <div class="flex items-start justify-between gap-3">
                <div class="space-y-0.5">
                    <h4 class="text-[9px] md:text-[10px] font-black text-slate-400 tracking-wider uppercase font-sans">PENDING APPROVALS</h4>
                    <p class="text-xs text-amber-600 font-extrabold font-sans">অনুমোদনের অপেক্ষায়</p>
                </div>
                <div class="bg-amber-50 border border-amber-100 p-2.5 rounded-2xl text-amber-550 shrink-0 shadow-xs flex items-center justify-center">
                    <span class="text-lg">⏱️</span>
                </div>
            </div>
            
            <div class="mt-4 space-y-1">
                <h3 class="text-lg sm:text-base md:text-xl xl:text-lg 2xl:text-xl font-mono font-black text-slate-800 leading-tight">
                    <?php echo e($pendingApprovalsCount); ?> টি ভাউচার
                </h3>
                <p class="text-[9px] text-amber-600 font-black flex items-center gap-1">
                    ⚠️ অডিট অপেক্ষক রিভিউ
                </p>
            </div>
        </div>
    </div>

    <!-- Details Sections Grid: Physical Banks & Expense Analysis Breakdown -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        
        <!-- Corporate Liquid Banking Registers -->
        <div class="lg:col-span-1 bg-white border border-slate-200/80 rounded-[2rem] p-6 lg:p-8 shadow-sm hover:shadow-xl transition duration-300">
            <div class="flex items-center justify-between mb-6 pb-4 border-b border-slate-100">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 bg-gradient-to-br from-indigo-50 to-blue-50 text-indigo-600 rounded-2xl border border-indigo-100 flex items-center justify-center shadow-xs">
                        <span class="text-lg">🏦</span>
                    </div>
                    <div>
                        <h3 class="text-sm font-extrabold text-slate-900 uppercase tracking-wide font-sans">ব্যাংক অ্যাকাউন্টসমূহ</h3>
                        <p class="text-[10px] text-slate-400 font-bold">ক্যাশ-পুলে সংযুক্ত নিরাপদে রক্ষিত ব্যাংক</p>
                    </div>
                </div>
                <span class="font-mono text-[10px] bg-indigo-50 text-indigo-700 px-3 py-1.5 rounded-xl font-black border border-indigo-150">
                    ৳<?php echo e(number_format($totalBankLiquidity ?? 0, 2)); ?> Pool
                </span>
            </div>

            <div class="space-y-4 max-h-[340px] overflow-y-auto pr-1">
                <?php $__empty_1 = true; $__currentLoopData = $bankAccounts; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $bank): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <div class="relative group p-4 bg-gradient-to-r from-slate-50/60 to-white hover:to-indigo-50/20 border border-slate-200/50 rounded-2xl hover:border-indigo-400 hover:shadow-sm transition-all duration-200 text-xs">
                        <div class="flex items-center justify-between gap-2.5 mb-2">
                            <span class="text-xs font-black text-slate-850 group-hover:text-indigo-900 transition-colors leading-tight"><?php echo e($bank->bank_name); ?></span>
                            <span class="font-mono text-xs font-black text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-lg border border-indigo-100/50">
                                ৳<?php echo e(number_format($bank->balance, 2)); ?>

                            </span>
                        </div>
                        <div class="flex items-center justify-between text-[10px] font-bold text-slate-450 font-mono">
                            <span class="truncate max-w-[130px]" title="<?php echo e($bank->account_name); ?>">👤 <?php echo e($bank->account_name); ?></span>
                            <span class="text-slate-555"><?php echo e($bank->account_number); ?></span>
                        </div>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                    <div class="text-center py-16">
                        <span class="text-4xl block opacity-60">📭</span>
                        <p class="text-xs text-slate-400 mt-3 font-extrabold">কোনো ব্যাংক অ্যাকাউন্ট ক্যাশপুলে যুক্ত পাওয়া যায়নি।</p>
                    </div>
                <?php endif; ?>
            </div>
        </div>

        <!-- Expense Categorization & Dynamic Analytics progress map -->
        <div class="lg:col-span-2 bg-white border border-slate-200/80 rounded-[2rem] p-6 lg:p-8 shadow-sm hover:shadow-xl transition duration-300">
            <div class="flex items-center justify-between mb-6 pb-4 border-b border-slate-100">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 bg-gradient-to-br from-rose-50 to-orange-50 text-rose-500 rounded-2xl border border-rose-100 flex items-center justify-center shadow-xs">
                        <span class="text-lg">📊</span>
                    </div>
                    <div>
                        <h3 class="text-sm font-extrabold text-slate-900 uppercase tracking-wide font-sans">শীর্ষ ব্যয় খাত ভিত্তিক পরিসংখ্যান</h3>
                        <p class="text-[10px] text-slate-400 font-bold">ক্যাশ আউট অ্যাকাউন্টিং ক্যাটাগরি বিশ্লেষণ</p>
                    </div>
                </div>
                <span class="font-mono text-[10px] bg-rose-50 text-rose-700 px-3 py-1.5 rounded-xl font-black border border-rose-150">
                    <?php echo e(count($expensesBreakdown)); ?> টি খাত ট্র্যাকিং
                </span>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-h-[340px] overflow-y-auto pr-1">
                <?php $__empty_1 = true; $__currentLoopData = $expensesBreakdown; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $exp): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <?php
                        $percentage = $totalCashOut > 0 ? round(($exp->total / $totalCashOut) * 100, 1) : 0;
                        // Colorful Premium palettes mapped explicitly for aesthetics
                        $palettes = [
                            ['from-blue-500 to-indigo-600', 'bg-blue-50 text-blue-700 border-blue-100', 'blue'],
                            ['from-purple-500 to-pink-600', 'bg-purple-50 text-purple-700 border-purple-100', 'purple'],
                            ['from-coral-500 to-rose-600', 'bg-rose-50 text-rose-700 border-rose-100', 'rose'],
                            ['from-amber-500 to-orange-600', 'bg-amber-50 text-amber-705 border-amber-100', 'amber'],
                        ];
                        $pack = $palettes[$index % count($palettes)];
                    ?>
                    <div class="p-4 bg-slate-50/50 hover:bg-slate-50 border border-slate-150/70 rounded-2xl space-y-3 transition duration-150 text-xs">
                        <div class="flex justify-between items-start gap-2">
                            <div class="flex items-center gap-2">
                                <span class="w-2.5 h-2.5 rounded-full bg-gradient-to-r <?php echo e($pack[0]); ?> shadow-xs"></span>
                                <span class="text-xs font-extrabold text-slate-750 leading-tight"><?php echo e($exp->category); ?></span>
                            </div>
                            <span class="font-mono text-[11px] font-black text-slate-900">
                                ৳<?php echo e(number_format($exp->total, 2)); ?>

                            </span>
                        </div>
                        
                        <div class="space-y-1">
                            <!-- Premium rounded bar -->
                            <div class="w-full bg-slate-200/80 h-3 rounded-full overflow-hidden p-[1px] relative shadow-inner">
                                <div class="bg-gradient-to-r <?php echo e($pack[0]); ?> h-full rounded-full transition-all duration-700 shadow-sm" style="width: <?php echo e(max(4, $percentage)); ?>%"></div>
                            </div>
                            <div class="flex justify-between items-center text-[9px] font-bold text-slate-405">
                                <span class="uppercase">Percentage share</span>
                                <span class="px-1.5 py-0.5 rounded-md border <?php echo e($pack[1]); ?> font-black font-mono">
                                    <?php echo e($percentage); ?>%
                                </span>
                            </div>
                        </div>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                    <div class="col-span-2 text-center py-20 text-slate-400">
                        <span class="text-4xl block mb-2">📊</span>
                        <p class="text-xs font-bold">এই ফিল্টার ডেট রেঞ্জে কোনো অনুমোদিত ব্যয়ের ভাউচার নেই।</p>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <!-- Recent Vouchers Ledger / Corporate Journals Table (Voucher Cabinet) -->
    <div id="vouchersLedgerSection" class="bg-white border border-slate-200/85 rounded-[2rem] p-6 lg:p-8 shadow-sm hover:shadow-xl transition duration-300">
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6 pb-4 border-b border-slate-150/60">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-gradient-to-br from-indigo-50 to-purple-50 text-slate-805 rounded-2xl border border-indigo-100 flex items-center justify-center shadow-xs">
                    <span class="text-lg">📝</span>
                </div>
                <div>
                    <h3 class="text-sm font-extrabold text-slate-900 uppercase tracking-wide font-sans">ভাউচার হিসাব বই ও অডিট ট্রেইল</h3>
                    <p class="text-[10px] text-slate-400 font-bold">সাম্প্রতিক লেনদেন অনুমোদন, প্রত্যাখ্যান এবং বিবরণী পর্যালোচনা</p>
                </div>
            </div>
            <div class="flex flex-wrap items-center gap-2">
                <span class="text-[10px] bg-slate-50 text-slate-650 font-mono font-bold px-3 py-1.5 rounded-xl border border-slate-200">
                    Ledger Queue: <?php echo e(count($recentVouchers)); ?> Vouchers Registered
                </span>
                <a href="<?php echo e(route('transactions.index')); ?>" class="text-[11px] font-black text-blue-700 hover:text-blue-800 bg-blue-50 px-3 py-1.5 rounded-xl border border-blue-200 flex items-center gap-1">
                    See All Book →
                </a>
            </div>
        </div>

        <div class="overflow-x-auto rounded-2xl border border-slate-150/70">
            <table class="w-full text-xs text-left text-slate-700 min-w-[900px]">
                <thead>
                    <tr class="bg-slate-50/80 border-b border-slate-200/80 text-[10px] font-black uppercase text-slate-400 tracking-wider">
                        <th class="py-4.5 px-6">ভাউচার নং (Voucher No)</th>
                        <th class="py-4.5 px-4">তারিখ (Date)</th>
                        <th class="py-4.5 px-4">LEN (Type)</th>
                        <th class="py-4.5 px-4">খাত (Category)</th>
                        <th class="py-4.5 px-4">পার্টিকুলার / বিবরণ (Particulars)</th>
                        <th class="py-4.5 px-4">পরিমাণ (Amount)</th>
                        <th class="py-4.5 px-4">অবস্থা (Status)</th>
                        <th class="py-4.5 px-6 text-right">কার্যক্রম (Actions Area)</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-150/60">
                    <?php $__empty_1 = true; $__currentLoopData = $recentVouchers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <tr class="hover:bg-slate-50/50 transition duration-150">
                            <!-- Voucher No with Monospaced highlight badge -->
                            <td class="py-4 px-6 font-mono font-black text-slate-900">
                                <span class="bg-gradient-to-r from-slate-50 to-slate-100 border border-slate-200 text-slate-800 px-3 py-1 rounded-xl shadow-xs text-[11px]">
                                    <?php echo e($item->voucher_no); ?>

                                </span>
                            </td>
                            <!-- Formatted Date -->
                            <td class="py-4 px-4 font-mono text-slate-500 font-semibold truncate">
                                <?php echo e($item->created_at->format('Y-m-d H:i')); ?>

                            </td>
                            <!-- In/Out status badge with mini-indicator lights -->
                            <td class="py-4 px-4">
                                <?php if($item->type === 'Cash In'): ?>
                                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[9px] font-black uppercase bg-emerald-50 text-emerald-800 border border-emerald-250/30">
                                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 block"></span>
                                        📥 Cash In
                                    </span>
                                <?php else: ?>
                                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[9px] font-black uppercase bg-rose-50 text-rose-800 border border-rose-250/30">
                                        <span class="w-1.5 h-1.5 rounded-full bg-rose-500 block"></span>
                                        📤 Cash Out
                                    </span>
                                <?php endif; ?>
                            </td>
                            <!-- Sector/Category -->
                            <td class="py-4 px-4 text-slate-800 font-extrabold text-[11px] truncate max-w-[150px]" title="<?php echo e($item->category); ?>">
                                <?php echo e($item->category); ?>

                            </td>
                            <!-- Particulars info with tooltips -->
                            <td class="py-4 px-4 truncate max-w-[200px] font-medium text-slate-500" title="<?php echo e($item->particulars); ?>">
                                <?php echo e($item->particulars); ?>

                            </td>
                            <!-- Numeric standard monospaced currencies -->
                            <td class="py-4 px-4 font-mono font-bold text-slate-900 whitespace-nowrap">
                                <span class="text-[12.5px]">৳<?php echo e(number_format($item->amount, 2)); ?></span>
                            </td>
                            <!-- Flow status audit triggers -->
                            <td class="py-4 px-4">
                                <?php if($item->status === 'Approved'): ?>
                                    <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-[10px] font-black bg-emerald-50 text-emerald-800 border border-emerald-200">
                                        ✓ Approved
                                    </span>
                                <?php elseif($item->status === 'Rejected'): ?>
                                    <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-[10px] font-black bg-rose-50 text-rose-805 border border-rose-200">
                                        × Rejected
                                    </span>
                                <?php else: ?>
                                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black bg-amber-50 text-amber-705 border border-amber-200 animate-pulse">
                                        ⏱️ Pending
                                    </span>
                                <?php endif; ?>
                            </td>
                            
                            <!-- ACTIONS PANEL FOR MANAGING VOUCHERS directly on dashboard -->
                            <td class="py-4 px-6 text-right whitespace-nowrap">
                                <div class="flex items-center justify-end gap-1.5">
                                    <button 
                                        type="button"
                                        onclick="showVoucherDetails(this)"
                                        data-id="<?php echo e($item->id); ?>"
                                        data-voucher-no="<?php echo e($item->voucher_no); ?>"
                                        data-date="<?php echo e($item->created_at->format('Y-m-d H:i')); ?>"
                                        data-type="<?php echo e($item->type); ?>"
                                        data-category="<?php echo e($item->category); ?>"
                                        data-particulars="<?php echo e($item->particulars); ?>"
                                        data-amount="<?php echo e(number_format($item->amount, 2)); ?>"
                                        data-payment-method="<?php echo e($item->payment_method); ?>"
                                        data-reference-no="<?php echo e($item->reference_no ?? 'N/A'); ?>"
                                        data-attachment-name="<?php echo e($item->attachment_name); ?>"
                                        data-created-by="<?php echo e($item->created_by_name ?? 'N/A'); ?>"
                                        data-status="<?php echo e($item->status); ?>"
                                        data-approval-notes="<?php echo e($item->approval_notes ?? 'None'); ?>"
                                        class="px-2.5 py-1.5 bg-slate-100 hover:bg-slate-200 text-slate-800 hover:text-slate-900 border border-slate-200 text-[10px] font-black rounded-lg transition duration-100 cursor-pointer flex items-center gap-1"
                                    >
                                        👁️ View Details
                                    </button>

                                    <?php if($item->status === 'Pending'): ?>
                                        <?php if(Auth::user()->role === 'Auditor' || Auth::user()->role === 'Super Admin' || Auth::user()->role === 'Company Admin'): ?>
                                            <!-- Approve Form Quick Fire -->
                                            <form action="<?php echo e(route('transactions.approve', $item->id)); ?>" method="POST" onsubmit="return confirm('এই ভাউচারটি অনুমোদন এবং ড্রয়ার ক্যাশ সমন্বয় করতে চান?');" class="inline">
                                                <?php echo csrf_field(); ?>
                                                <button type="submit" class="px-2.5 py-1.5 bg-emerald-600 hover:bg-emerald-700 text-white text-[10px] font-black rounded-lg transition duration-100 flex items-center gap-1 shadow-sm">
                                                    🟢 Approve
                                                </button>
                                            </form>

                                            <!-- Reject Drawer trigger -->
                                            <button 
                                                onclick="triggerRejectModal('<?php echo e($item->id); ?>', '<?php echo e($item->voucher_no); ?>')"
                                                class="px-2.5 py-1.5 bg-rose-600 hover:bg-rose-700 text-white text-[10px] font-black rounded-lg transition duration-100 flex items-center gap-1 shadow-sm"
                                            >
                                                🔴 Reject
                                            </button>
                                        <?php else: ?>
                                            <span class="text-[9px] text-slate-400 font-mono italic">No Permissions</span>
                                        <?php endif; ?>
                                    <?php endif; ?>

                                    <?php if(Auth::user()->isSuperAdmin()): ?>
                                        <!-- Edit button trigger -->
                                        <button 
                                            type="button"
                                            onclick="openEditVoucherModal(this)"
                                            data-id="<?php echo e($item->id); ?>"
                                            data-voucher-no="<?php echo e($item->voucher_no); ?>"
                                            data-type="<?php echo e($item->type); ?>"
                                            data-amount="<?php echo e($item->amount); ?>"
                                            data-category="<?php echo e($item->category); ?>"
                                            data-particulars="<?php echo e($item->particulars); ?>"
                                            data-payment-method="<?php echo e($item->payment_method); ?>"
                                            data-bank-account-id="<?php echo e($item->bank_account_id); ?>"
                                            data-reference-no="<?php echo e($item->reference_no); ?>"
                                            data-status="<?php echo e($item->status); ?>"
                                            class="px-2.5 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white text-[10px] font-black rounded-lg transition duration-100 flex items-center gap-1 shadow-sm cursor-pointer"
                                        >
                                            ✏️ Edit
                                        </button>

                                        <!-- Delete button with form -->
                                        <form action="<?php echo e(route('superadmin.vouchers.delete', $item->id)); ?>" method="POST" onsubmit="return confirm('এই ভাউচারটি কি সম্পূর্ণ ডিলিট করতে চান? ডিলিট করলে এর আর্থিক প্রভাব উল্টানো হবে।');" class="inline">
                                            <?php echo csrf_field(); ?>
                                            <?php echo method_field('DELETE'); ?>
                                            <button type="submit" class="px-2.5 py-1.5 bg-rose-600 hover:bg-rose-700 text-white text-[10px] font-black rounded-lg transition duration-100 flex items-center gap-1 shadow-sm">
                                                🗑️ Delete
                                            </button>
                                        </form>
                                    <?php endif; ?>
                                </div>
                            </td>
                        </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <tr>
                            <td colspan="8" class="py-16 text-center text-slate-400">
                                <span class="text-4xl block opacity-60">📁</span>
                                <p class="text-xs font-black mt-3 font-sans">ভাউচার ডায়রি ফাইলে কোনো অ্যাকাউন্ট লগ পাওয়া যায়নি।</p>
                            </td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>

    <?php if(Auth::user()->isSuperAdmin() || Auth::user()->role === 'Company Admin'): ?>
    <!-- ============================================== -->
    <!--    SUPER ADMIN QUICK LEDGER & CREDENTIAL HUB   -->
    <!-- ============================================== -->
    <div class="bg-slate-900 border border-slate-800 rounded-[2rem] p-6 lg:p-8 shadow-2xl relative overflow-hidden text-slate-200 space-y-6">
        <!-- Decoration light highlights -->
        <span class="absolute -top-12 -right-12 w-40 h-40 bg-indigo-500/10 blur-3xl rounded-full pointer-events-none"></span>
        <span class="absolute -bottom-16 -left-16 w-36 h-36 bg-emerald-500/5 blur-2xl rounded-full pointer-events-none"></span>

        <!-- Panel Header -->
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b pb-4 border-slate-800 relative z-10">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-indigo-500/20 text-indigo-400 rounded-2xl border border-indigo-500/30 flex items-center justify-center shadow-lg">
                    <span class="text-lg font-bold">🛡️</span>
                </div>
                <div>
                    <h3 class="text-base font-black uppercase tracking-wide font-sans text-transparent bg-clip-text bg-gradient-to-r from-white via-slate-200 to-indigo-300">সুপার এডমিন কুইক কন্ট্রোল প্যানেল & ইউজার কন্ট্রোল</h3>
                    <p class="text-[10px] text-slate-400 font-bold mt-0.5">পাসওয়ার্ড রিস্টোরেশন, ইউজার ক্রেডেনশিয়াল আপডেট ও বিভাগ/ডিপার্টমেন্ট সেটিংস লাইভ প্যানেল</p>
                </div>
            </div>
            <div class="flex items-center gap-2 font-mono">
                <span class="text-[9px] bg-slate-950 text-indigo-400 font-bold px-3 py-1.5 rounded-xl border border-slate-800">
                    Role Authority: <?php echo e(Auth::user()->role); ?>

                </span>
            </div>
        </div>

        <div class="grid grid-cols-1 xl:grid-cols-3 gap-6 relative z-10">
            
            <!-- COLUMN 1: ACTIVE USERS & CREDENTIAL UPDATE -->
            <div class="p-5 bg-slate-950/60 rounded-3xl border border-slate-800/80 space-y-4">
                <div class="border-b pb-2.5 border-slate-800 flex justify-between items-center">
                    <div>
                        <h4 class="text-xs font-black text-slate-100 flex items-center gap-1.5">
                            <span>👤</span> ইউজার অ্যাকাউন্টসমূহ (<?php echo e($users->count()); ?>)
                        </h4>
                        <p class="text-[9px] text-slate-500 font-bold">লগইন ক্রেডেনশিয়াল পরিবর্তন ও পিন পরিবর্তন এড্রেস</p>
                    </div>
                </div>

                <div class="space-y-2.5 max-h-[380px] overflow-y-auto pr-1">
                    <?php $__empty_1 = true; $__currentLoopData = $users; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $usr): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <div class="p-3 bg-slate-900 border border-slate-800 hover:border-slate-700 rounded-2xl flex flex-col gap-2 transition">
                            <div class="flex items-center justify-between">
                                <span class="text-xs font-extrabold text-white truncate max-w-[150px]"><?php echo e($usr->name); ?></span>
                                <span class="text-[8.5px] px-2 py-0.5 font-bold rounded-lg <?php echo e($usr->is_active ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'bg-rose-500/10 text-rose-400 border border-rose-500/20'); ?>">
                                    <?php echo e($usr->is_active ? 'Active' : 'Locked'); ?>

                                </span>
                            </div>
                            
                            <div class="text-[10px] space-y-0.5 text-slate-400 font-bold">
                                <p class="font-mono text-slate-500 text-[9px] truncate">📧 <?php echo e($usr->email); ?></p>
                                <p class="flex justify-between">
                                    <span>🔑 <?php echo e($usr->role); ?></span>
                                    <span>🏢 <?php echo e($usr->branch->name ?? 'Main Branch'); ?></span>
                                </p>
                            </div>

                            <button 
                                type="button"
                                onclick="openDashboardEditUserModal(this)"
                                data-id="<?php echo e($usr->id); ?>"
                                data-name="<?php echo e($usr->name); ?>"
                                data-email="<?php echo e($usr->email); ?>"
                                data-role="<?php echo e($usr->role); ?>"
                                data-branch-id="<?php echo e($usr->branch_id); ?>"
                                data-designation="<?php echo e($usr->designation); ?>"
                                data-phone="<?php echo e($usr->phone); ?>"
                                data-is-active="<?php echo e($usr->is_active ? '1' : '0'); ?>"
                                class="w-full py-1.5 bg-slate-800 hover:bg-slate-750 text-white font-extrabold text-[10px] rounded-xl transition cursor-pointer"
                            >
                                ✏️ পাসওয়ার্ড বা তথ্য এডিট করুন
                            </button>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <div class="text-center py-10 bg-slate-900/40 rounded-2xl border border-dashed border-slate-800">
                            <span class="text-2xl block text-slate-600">👤</span>
                            <p class="text-[10px] text-slate-500 mt-2 font-bold">কোনো ইউজার অ্যাকাউন্ট পাওয়া যায়নি।</p>
                        </div>
                    <?php endif; ?>
                </div>
            </div>

            <!-- COLUMN 2: SECURITY RESET TOKENS PANEL -->
            <div class="p-5 bg-slate-950/60 rounded-3xl border border-slate-800/80 space-y-4">
                <div class="border-b pb-2.5 border-slate-800">
                    <h4 class="text-xs font-black text-slate-100 flex items-center gap-1.5">
                        <span>🔑</span> পাসওয়ার্ড রিসেট টোকেন (Security Reset)
                    </h4>
                    <p class="text-[9px] text-slate-500 font-bold">রিসেট লিংক তৈরি, সরাসরি ব্রাউজার ভিজিট এবং বাতিল পদ্ধতি</p>
                </div>

                <!-- Token Generator form -->
                <form action="<?php echo e(route('superadmin.passwordTokens.store')); ?>" method="POST" class="space-y-3">
                    <?php echo csrf_field(); ?>
                    <div class="space-y-1">
                        <label class="block text-[9.5px] text-slate-400 font-extrabold uppercase">টোকেন তৈরির জন্য ইউজার নির্বাচন করুন</label>
                        <select name="email" required class="w-full bg-slate-900 border border-slate-800 rounded-xl p-2.5 text-xs text-white focus:outline-none font-bold">
                            <option value="">-- ইউজার বেছে নিন --</option>
                            <?php $__currentLoopData = $users; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $usr): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($usr->email); ?>"><?php echo e($usr->name); ?> (<?php echo e($usr->email); ?>) [<?php echo e($usr->role); ?>]</option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                    </div>
                    <button type="submit" class="w-full py-2 bg-indigo-600 hover:bg-indigo-750 text-white font-black text-[10px] rounded-xl transition cursor-pointer">
                        ➕ নতুন পাসওয়ার্ড রিসেট টোকেন তৈরি করুন
                    </button>
                </form>

                <!-- Active reset tokens status queue -->
                <div class="space-y-2 pt-1 font-sans">
                    <span class="text-[9px] font-black text-slate-400 uppercase tracking-wider block">সচল সিকিউরিটি টোকেনসমূহ (Active Keys)</span>

                    <div class="space-y-2 max-h-[190px] overflow-y-auto pr-1">
                        <?php $__empty_1 = true; $__currentLoopData = $resetTokens; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $token): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                            <?php
                                $resetUrl = route('password.reset', ['token' => $token->token]) . '?email=' . urlencode($token->email);
                            ?>
                            <div class="p-2.5 bg-slate-900 border border-slate-800 rounded-2xl flex flex-col gap-1.5 text-[9px] text-slate-350">
                                <div class="flex items-center justify-between">
                                    <span class="font-extrabold text-white truncate max-w-[130px]" title="<?php echo e($token->email); ?>"><?php echo e($token->email); ?></span>
                                    <form action="<?php echo e(route('superadmin.passwordTokens.delete', $token->email)); ?>" method="POST" class="inline m-0">
                                        <?php echo csrf_field(); ?>
                                        <?php echo method_field('DELETE'); ?>
                                        <button type="submit" onclick="return confirm('এই টোকেনটি কি সম্পূর্ণ বাতিল ও ডিলিট করতে চান?')" class="text-rose-455 hover:text-white font-bold bg-slate-950 border border-rose-900/30 hover:bg-rose-955 rounded px-1.5 py-0.5 text-[8.5px] cursor-pointer" title="টোকেন ডিলিট করুন">
                                            বাতিল করুন
                                        </button>
                                    </form>
                                </div>
                                <div class="bg-slate-950 p-1.5 rounded-lg border border-slate-800 relative">
                                    <input type="text" readonly value="<?php echo e($resetUrl); ?>" onclick="this.select(); document.execCommand('copy')" class="w-full bg-transparent font-mono text-[8px] text-indigo-400 truncate outline-none select-all font-bold cursor-pointer" title="ক্লিক করে লিংকটি কপি করুন">
                                </div>
                                <div class="flex items-center justify-between text-[8px] text-slate-500">
                                    <span>⏰ তৈরির সময়: <?php echo e($token->created_at); ?></span>
                                    <a href="<?php echo e($resetUrl); ?>" target="_blank" class="text-blue-400 hover:underline">সরাসরি রিসেট করুন ↗</a>
                                </div>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                            <div class="p-4 text-center text-slate-500 font-bold bg-slate-900/20 rounded-2xl border border-dashed border-slate-800 text-[9.5px]">
                                কোনো সক্রিয় রিসেট টোকেন রেকর্ড নেই।
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>

            <!-- COLUMN 3: DEPARTMENTS CONTROL PANEL -->
            <div class="p-5 bg-slate-950/60 rounded-3xl border border-slate-800/80 space-y-4">
                <div class="border-b pb-2.5 border-slate-800">
                    <h4 class="text-xs font-black text-slate-100 flex items-center gap-1.5">
                        <span>🏢</span> বিভাগ বা ডিপার্টমেন্ট সেটিংস (SaaS Departments)
                    </h4>
                    <p class="text-[9px] text-slate-500 font-bold">নতুন বিভাগ তৈরি, নাম সংশোধন ও একটিভ/ইনএক্টিভ অবস্থা নির্ধারণ</p>
                </div>

                <!-- Create Department Form -->
                <form action="<?php echo e(route('superadmin.storeDepartment')); ?>" method="POST" class="space-y-3">
                    <?php echo csrf_field(); ?>
                    <div class="space-y-1">
                        <label class="block text-[9.5px] text-slate-400 font-extrabold uppercase">নতুন বিভাগের নাম (New Department Name)</label>
                        <input type="text" name="name" required placeholder="যেমন: বিক্রয় ও বিপণন বিভাগ" class="w-full bg-slate-900 border border-slate-800 rounded-xl p-2.5 text-xs text-white focus:outline-none font-bold">
                    </div>
                    <button type="submit" class="w-full py-2 bg-indigo-600 hover:bg-indigo-750 text-white font-black text-[10px] rounded-xl transition cursor-pointer">
                        ➕ নতুন ডিপার্টমেন্ট প্রস্তুত করুন
                    </button>
                </form>

                <!-- List of current departments -->
                <div class="space-y-2 pt-1 font-sans">
                    <span class="text-[9px] font-black text-slate-400 uppercase tracking-wider block">বর্তমান বিভাগের তালিকা (System Departments)</span>

                    <div class="space-y-1.5 max-h-[190px] overflow-y-auto pr-1">
                        <?php $__empty_1 = true; $__currentLoopData = $departments; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $dept): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                            <div class="p-2.5 bg-slate-900 border border-slate-800 rounded-2xl flex items-center justify-between text-[10px] text-slate-300">
                                <div class="space-y-0.5 truncate max-w-[140px]">
                                    <span class="font-extrabold text-white block truncate" title="<?php echo e($dept->name); ?>"><?php echo e($dept->name); ?></span>
                                    <span class="text-[7.5px] uppercase font-bold px-1.5 py-0.5 rounded <?php echo e($dept->status === 'Active' ? 'bg-emerald-500/10 text-emerald-450 border border-emerald-500/20' : 'bg-rose-500/10 text-rose-450 border border-rose-500/20'); ?>">
                                        <?php echo e($dept->status); ?>

                                    </span>
                                </div>
                                
                                <div class="flex items-center gap-1 shrink-0">
                                    <button 
                                        type="button" 
                                        onclick="openDashboardEditDeptModal(this)"
                                        data-id="<?php echo e($dept->id); ?>"
                                        data-name="<?php echo e($dept->name); ?>"
                                        data-status="<?php echo e($dept->status); ?>"
                                        class="text-indigo-400 hover:text-white font-bold bg-slate-950 border border-slate-800 px-1.5 py-1 rounded text-[8.5px] cursor-pointer"
                                    >
                                        ✏️ Edit
                                    </button>
                                    
                                    <form action="<?php echo e(route('superadmin.deleteDepartment', $dept->id)); ?>" method="POST" class="inline m-0">
                                        <?php echo csrf_field(); ?>
                                        <?php echo method_field('DELETE'); ?>
                                        <button type="submit" onclick="return confirm('এই ডিপার্টমেন্টটি কি ডিলিট করতে চান?')" class="text-rose-500 hover:text-white font-bold bg-slate-950 border border-slate-800 px-1.5 py-1 rounded text-[8.5px] cursor-pointer" title="ডিলিট করুন">
                                            🗑️ Delete
                                        </button>
                                    </form>
                                </div>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                            <div class="p-4 text-center text-slate-500 font-bold bg-slate-900/20 rounded-2xl border border-dashed border-slate-800 text-[9.5px]">
                                কোনো ডিপার্টমেন্ট রেকর্ড সেটআপ নেই।
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- ============================================== -->
    <!--    MODAL: DASHBOARD USER CREDENTIAL UPDATE     -->
    <!-- ============================================== -->
    <div id="modalEditUserDash" class="hidden fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-xs flex items-center justify-center p-4">
        <div class="bg-white rounded-[2rem] border border-slate-200 shadow-2xl overflow-hidden max-w-lg w-full flex flex-col relative animate-in fade-in zoom-in-95 duration-200 text-slate-800">
            <div class="p-6 border-b border-slate-100 flex items-center justify-between bg-slate-50">
                <h3 class="text-xs font-black uppercase tracking-wider text-slate-700 flex items-center gap-2">
                    <span>👤</span> ইউজার প্রোফাইল ও অ্যাক্সেস পিন এডিট (Edit Credentials)
                </h3>
                <button type="button" onclick="closeDashboardModal('modalEditUserDash')" class="text-slate-400 hover:text-slate-705 font-extrabold text-lg p-1.5">&times;</button>
            </div>
            <form id="editUserDashForm" action="" method="POST" class="p-6 space-y-4 text-xs font-bold text-slate-650">
                <?php echo csrf_field(); ?>
                
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block mb-1.5 text-slate-500">ইউজারের নাম (Full Name) *</label>
                        <input type="text" name="name" id="editUserDashName" required class="w-full bg-slate-50 border border-slate-200 rounded-xl p-2.5 font-bold focus:ring-1 focus:ring-blue-500 text-slate-800">
                    </div>
                    <div>
                        <label class="block mb-1.5 text-slate-500">লগইন ইমেইল (Username) *</label>
                        <input type="email" name="email" id="editUserDashEmail" required class="w-full bg-slate-50 border border-slate-200 rounded-xl p-2.5 font-mono font-bold focus:ring-1 focus:ring-blue-500 text-slate-800">
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block mb-1.5 text-slate-500">ইউজার রোল (Security Role) *</label>
                        <select name="role" id="editUserDashRole" required class="w-full bg-slate-50 border border-slate-200 rounded-xl p-2.5 focus:ring-1 focus:ring-blue-500 text-slate-800">
                            <option value="Super Admin">Super Admin (শীর্ষ এডমিন)</option>
                            <option value="Company Admin">Company Admin (কোম্পানি এডমিন)</option>
                            <option value="Cashier">Cashier (ক্যাশিয়ার)</option>
                            <option value="Accountant">Accountant (অ্যাকাউন্ট্যান্ট)</option>
                            <option value="Auditor">Auditor (অডিটর)</option>
                        </select>
                    </div>
                    <div>
                        <label class="block mb-1.5 text-slate-500">ব্রাঞ্চ অ্যাসাইনমেন্ট (Branch) *</label>
                        <select name="branch_id" id="editUserDashBranch" required class="w-full bg-slate-50 border border-slate-200 rounded-xl p-2.5 focus:ring-1 focus:ring-blue-500 text-slate-800">
                            <?php $__currentLoopData = $branches; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $br): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($br->id); ?>"><?php echo e($br->name); ?></option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block mb-1.5 text-slate-500">পদবী (Designation)</label>
                        <input type="text" name="designation" id="editUserDashDesignation" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-2.5 focus:ring-1 focus:ring-blue-500 text-slate-800">
                    </div>
                    <div>
                        <label class="block mb-1.5 text-slate-500">মোবাইল নম্বর (Phone)</label>
                        <input type="text" name="phone" id="editUserDashPhone" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-2.5 focus:ring-1 focus:ring-blue-500 text-slate-800">
                    </div>
                </div>

                <div class="bg-indigo-50 border border-indigo-150 rounded-2xl p-4 space-y-1.5">
                    <label class="block text-indigo-900 font-black">নতুন পাসওয়ার্ড (New Log-in Password / PIN)</label>
                    <input type="password" name="password" placeholder="অপরিবর্তিত রাখতে এটি সম্পূর্ণ খালি রাখুন" class="w-full bg-white border border-indigo-200 rounded-xl p-2.5 font-mono focus:ring-1 focus:ring-indigo-500 text-slate-800 font-bold">
                    <p class="text-[9.5px] text-slate-450 font-semibold mt-1">ন্যূনতম ৬ অক্ষর লিখুন। খালি রাখলে ইউজারের পূর্ববর্তী পাসওয়ার্ড বা পিন কোড বহাল থাকবে।</p>
                </div>

                <div>
                    <label class="block mb-1.5 text-slate-500">একাউন্টের অবস্থা (Account Status)</label>
                    <select name="is_active" id="editUserDashActive" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-2.5 focus:ring-1 focus:ring-blue-500 text-slate-800 font-bold">
                        <option value="1">Active (সচল বা ব্যবহারযোগ্য)</option>
                        <option value="0">Locked (স্থগিত বা নিষ্ক্রিয়)</option>
                    </select>
                </div>

                <div class="pt-4 border-t border-slate-100 flex items-center justify-end gap-3 text-xs">
                    <button type="button" onclick="closeDashboardModal('modalEditUserDash')" class="bg-slate-150 hover:bg-slate-200 text-slate-705 px-4 py-2.5 rounded-xl transition cursor-pointer">
                        বাতিল (Close)
                    </button>
                    <button type="submit" class="bg-blue-600 hover:bg-blue-750 text-white px-5 py-2.5 rounded-xl shadow-md transition cursor-pointer">
                        সংরক্ষণ করুন (Save Changes)
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- ============================================== -->
    <!--    MODAL: DASHBOARD DEPARTMENT UPDATE          -->
    <!-- ============================================== -->
    <div id="modalEditDeptDash" class="hidden fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-xs flex items-center justify-center p-4">
        <div class="bg-white rounded-[2rem] border border-slate-200 shadow-2xl overflow-hidden max-w-md w-full flex flex-col relative animate-in fade-in zoom-in-95 duration-200 text-slate-800 font-bold">
            <div class="p-6 border-b border-slate-100 flex items-center justify-between bg-slate-50 font-sans">
                <h3 class="text-xs font-black uppercase tracking-wider text-slate-700 flex items-center gap-2">
                    <span>🏢</span> ডিপার্টমেন্ট বিবরণী ও নাম এডিট (Edit Department)
                </h3>
                <button type="button" onclick="closeDashboardModal('modalEditDeptDash')" class="text-slate-400 hover:text-slate-705 font-extrabold text-lg p-1.5">&times;</button>
            </div>
            <form id="editDeptDashForm" action="" method="POST" class="p-6 space-y-4 text-xs font-bold text-slate-650">
                <?php echo csrf_field(); ?>
                <?php echo method_field('PATCH'); ?>
                
                <div>
                    <label class="block mb-1.5 text-slate-500">বিভাগের নাম (Department Name) *</label>
                    <input type="text" name="name" id="editDeptDashName" required class="w-full bg-slate-50 border border-slate-200 rounded-xl p-2.5 font-bold focus:ring-1 focus:ring-blue-500 text-slate-800">
                </div>

                <div>
                    <label class="block mb-1.5 text-slate-500">অবস্থা (Department Status) *</label>
                    <select name="status" id="editDeptDashStatus" required class="w-full bg-slate-50 border border-slate-200 rounded-xl p-2.5 focus:ring-1 focus:ring-blue-500 text-slate-800 font-bold">
                        <option value="Active">Active (সচল)</option>
                        <option value="Inactive">Inactive (নিষ্ক্রিয়)</option>
                    </select>
                </div>

                <div class="pt-4 border-t border-slate-100 flex items-center justify-end gap-3 text-xs">
                    <button type="button" onclick="closeDashboardModal('modalEditDeptDash')" class="bg-slate-150 hover:bg-slate-200 text-slate-705 px-4 py-2.5 rounded-xl transition cursor-pointer">
                        বাতিল (Close)
                    </button>
                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5 rounded-xl shadow-md transition cursor-pointer">
                        পরিবর্তন সংরক্ষণ করুন
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        function openDashboardEditUserModal(btn) {
            const id = btn.getAttribute('data-id');
            const name = btn.getAttribute('data-name');
            const email = btn.getAttribute('data-email');
            const role = btn.getAttribute('data-role');
            const branchId = btn.getAttribute('data-branch-id');
            const designation = btn.getAttribute('data-designation') || '';
            const phone = btn.getAttribute('data-phone') || '';
            const isActive = btn.getAttribute('data-is-active');

            const form = document.getElementById('editUserDashForm');
            form.action = `/users/${id}/update`;

            document.getElementById('editUserDashName').value = name;
            document.getElementById('editUserDashEmail').value = email;
            document.getElementById('editUserDashRole').value = role;
            document.getElementById('editUserDashBranch').value = branchId;
            document.getElementById('editUserDashDesignation').value = designation;
            document.getElementById('editUserDashPhone').value = phone;
            document.getElementById('editUserDashActive').value = isActive;

            document.getElementById('modalEditUserDash').classList.remove('hidden');
            document.body.classList.add('overflow-hidden');
        }

        function openDashboardEditDeptModal(btn) {
            const id = btn.getAttribute('data-id');
            const name = btn.getAttribute('data-name');
            const status = btn.getAttribute('data-status');

            const form = document.getElementById('editDeptDashForm');
            form.action = `/admin/departments/${id}/update`;

            document.getElementById('editDeptDashName').value = name;
            document.getElementById('editDeptDashStatus').value = status;

            document.getElementById('modalEditDeptDash').classList.remove('hidden');
            document.body.classList.add('overflow-hidden');
        }

        function closeDashboardModal(modalId) {
            document.getElementById(modalId).classList.add('hidden');
            document.body.classList.remove('overflow-hidden');
        }
    </script>
    <?php endif; ?>
</div>

<!-- ============================================== -->
<!--    MODAL: ADD CASH IN (টাকা প্রাপ্তি রসিদ)     -->
<!-- ============================================== -->
<div id="modalCashIn" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <!-- Backdrop -->
        <div onclick="closeModal('modalCashIn')" class="fixed inset-0 transition-opacity modal-backdrop"></div>
        
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
        
        <!-- Modal Content Pane -->
        <div class="inline-block align-bottom bg-white rounded-3xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full border border-slate-200">
            <!-- Header -->
            <div class="bg-gradient-to-r from-emerald-600 to-emerald-700 text-white px-6 py-5 flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-black tracking-tight leading-none flex items-center gap-2">
                        <span>📥</span> নতুন ক্যাশ ইন / প্রাপ্তি ভাউচার
                    </h3>
                    <p class="text-[10px] text-emerald-100 font-bold mt-1 uppercase tracking-wider">New Cash In Receipt / Grant Income</p>
                </div>
                <button onclick="closeModal('modalCashIn')" class="text-white hover:text-emerald-250 font-black text-lg p-1.5">&times;</button>
            </div>
            
            <!-- Body Form -->
            <form action="<?php echo e(route('transactions.store')); ?>" method="POST" enctype="multipart/form-data" class="p-6 space-y-4">
                <?php echo csrf_field(); ?>
                <input type="hidden" name="type" value="Cash In">
                
                <div class="grid grid-cols-2 gap-4">
                    <!-- Amount -->
                    <div class="col-span-2 space-y-1.5">
                        <label class="block text-xs font-black text-slate-800 uppercase tracking-wide">৳ পরিমাণ (Amount in BDT) <span class="text-rose-500">*</span></label>
                        <div class="relative rounded-2xl shadow-sm">
                            <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-slate-400 font-bold font-mono">৳</span>
                            <input type="number" name="amount" required min="1" step="0.01" class="w-full pl-8 pr-4 py-3 bg-slate-50 border border-slate-205 focus:ring-2 focus:ring-emerald-400 focus:outline-none rounded-2xl font-mono font-black text-lg text-slate-850" placeholder="0.00">
                        </div>
                    </div>

                    <!-- Category selection NGO / Company specific -->
                    <div class="col-span-2 space-y-1.5">
                        <label class="block text-xs font-black text-slate-800 uppercase tracking-wide">হিসাবের খাত (Category) <span class="text-rose-500">*</span></label>
                        <select name="category" required class="w-full px-4 py-3 bg-slate-50 border border-slate-205 focus:ring-2 focus:ring-emerald-400 focus:outline-none rounded-2xl font-semibold text-xs text-slate-700">
                            <option value="">-- অ্যাকাউন্ট সার্ভিস খাত নির্বাচন করুন --</option>
                            <?php
                                $userCompId = auth()->user()->company_id;
                                $incomeCats = \App\Models\Category::getIncomeCategories($userCompId);
                            ?>
                            <?php $__currentLoopData = $incomeCats; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $catName): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($catName); ?>"><?php echo e($catName); ?></option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                    </div>

                    <!-- Payment Method -->
                    <div class="col-span-1 space-y-1.5">
                        <label class="block text-xs font-black text-slate-800 uppercase tracking-wide">লেনদেন মাধ্যম <span class="text-rose-500">*</span></label>
                        <select id="cashInPaymentMethod" name="payment_method" required onchange="toggleBankSelection('cashInPaymentMethod', 'cashInBankArea')" class="w-full px-4 py-3 bg-slate-50 border border-slate-205 focus:ring-2 focus:ring-emerald-400 focus:outline-none rounded-2xl font-semibold text-xs text-slate-700">
                            <option value="Cash">Cash (ড্রয়ার ভল্ট)</option>
                            <option value="Bank">Bank (ব্যাংক অ্যাকাউন্ট)</option>
                        </select>
                    </div>

                    <!-- Reference No -->
                    <div class="col-span-1 space-y-1.5">
                        <label class="block text-xs font-black text-slate-800 uppercase tracking-wide">রেফারেন্স নং / রসিদ নং</label>
                        <input type="text" name="reference_no" class="w-full px-4 py-3 bg-slate-50 border border-slate-205 focus:ring-2 focus:ring-emerald-400 focus:outline-none rounded-2xl font-semibold text-xs text-slate-700" placeholder="e.g. Receipt #, Dep Slip">
                    </div>

                    <!-- Bank selector conditional -->
                    <div id="cashInBankArea" class="col-span-2 space-y-1.5 hidden">
                        <label class="block text-xs font-black text-slate-800 uppercase tracking-wide">গ্রাহক ব্যাংক হিসাব (Bank Account)</label>
                        <select name="bank_account_id" class="w-full px-4 py-3 bg-slate-50 border border-slate-205 focus:ring-2 focus:ring-emerald-400 focus:outline-none rounded-2xl font-semibold text-xs text-slate-700">
                            <option value="">-- জমা দেওয়ার ব্যাংক হিসাব নির্বাচন করুন --</option>
                            <?php $__currentLoopData = $bankAccounts; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $bank): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($bank->id); ?>"><?php echo e($bank->bank_name); ?> - <?php echo e($bank->account_number); ?> (৳<?php echo e(number_format($bank->balance, 2)); ?>)</option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                    </div>

                    <!-- File Upload -->
                    <div class="col-span-2 space-y-1.5">
                        <label class="block text-xs font-black text-slate-800 uppercase tracking-wide">রসিদ / ভাউচার ফাইল সংযুক্ত করুন (JPG, PNG, PDF - Max 2MB)</label>
                        <input type="file" name="attachment" class="w-full px-4 py-2.5 bg-slate-50 border border-slate-205 focus:ring-2 focus:ring-emerald-400 focus:outline-none rounded-2xl text-xs text-slate-600">
                    </div>

                    <!-- Particulars -->
                    <div class="col-span-2 space-y-1.5">
                        <label class="block text-xs font-black text-slate-800 uppercase tracking-wide">বিস্তারিত বিবরণ / জমার নোট <span class="text-rose-500">*</span></label>
                        <textarea name="particulars" required rows="3" class="w-full px-4 py-3 bg-slate-50 border border-slate-205 focus:ring-2 focus:ring-emerald-400 focus:outline-none rounded-2xl font-semibold text-xs text-slate-700" placeholder="কোথা থেকে এবং কি বাবাদ ফান্ডস সিস্টেমে প্রবেশ করলো বিস্তারিত লিখুন..."></textarea>
                    </div>
                </div>

                <!-- Footer Operations -->
                <div class="pt-4 border-t border-slate-100 flex items-center justify-end gap-2.5">
                    <button type="button" onclick="closeModal('modalCashIn')" class="px-4 py-2.5 bg-slate-100 hover:bg-slate-250 border border-slate-200 text-slate-700 hover:text-slate-900 font-extrabold text-[11px] rounded-xl transition cursor-pointer">
                        বাতিল করুন
                    </button>
                    <button type="submit" class="px-5 py-2.5 bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800 text-white font-black text-[11px] rounded-xl shadow-md transition cursor-pointer">
                        ভাউচার তৈরি করুন (Generate In-Voucher)
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- ============================================== -->
<!--    MODAL: ADD CASH OUT (টাকা পরিশোধ ব্যয়)    -->
<!-- ============================================== -->
<div id="modalCashOut" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <!-- Backdrop -->
        <div onclick="closeModal('modalCashOut')" class="fixed inset-0 transition-opacity modal-backdrop"></div>
        
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
        
        <!-- Modal Content Pane -->
        <div class="inline-block align-bottom bg-white rounded-3xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full border border-slate-200">
            <!-- Header -->
            <div class="bg-gradient-to-r from-indigo-505 to-indigo-600 text-white px-6 py-5 flex items-center justify-between bg-slate-900">
                <div>
                    <h3 class="text-lg font-black tracking-tight leading-none flex items-center gap-2">
                        <span>📤</span> নতুন ক্যাশ আউট / ব্যয় ভাউচার
                    </h3>
                    <p class="text-[10px] text-indigo-100 font-bold mt-1 uppercase tracking-wider">New Cash Out Payment / Disclose Expense</p>
                </div>
                <button onclick="closeModal('modalCashOut')" class="text-white hover:text-indigo-250 font-black text-lg p-1.5">&times;</button>
            </div>
            
            <!-- Body Form -->
            <form action="<?php echo e(route('transactions.store')); ?>" method="POST" enctype="multipart/form-data" class="p-6 space-y-4">
                <?php echo csrf_field(); ?>
                <input type="hidden" name="type" value="Cash Out">
                
                <div class="grid grid-cols-2 gap-4">
                    <!-- Amount -->
                    <div class="col-span-2 space-y-1.5">
                        <div class="flex items-center justify-between">
                            <label class="block text-xs font-black text-slate-800 uppercase tracking-wide">৳ পরিমাণ (Amount in BDT) <span class="text-rose-500">*</span></label>
                            <span class="text-[10px] font-mono font-bold text-slate-400">Available vault cash: ৳<?php echo e(number_format($branchInfo->balance ?? 0, 2)); ?></span>
                        </div>
                        <div class="relative rounded-2xl shadow-sm">
                            <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-slate-400 font-bold font-mono">৳</span>
                            <input 
                                type="number" 
                                id="cashOutAmountValue" 
                                name="amount" 
                                required 
                                min="1" 
                                step="0.01" 
                                oninput="validateCashOutLimit(this.value, '<?php echo e($branchInfo->balance ?? 0); ?>')"
                                class="w-full pl-8 pr-4 py-3 bg-slate-50 border border-slate-205 focus:ring-2 focus:ring-indigo-400 focus:outline-none rounded-2xl font-mono font-black text-lg text-slate-850" 
                                placeholder="0.00"
                            >
                        </div>
                        <!-- Dynamic Validation Warnings -->
                        <div id="cashOutBalanceWarningContainer" class="hidden">
                            <p id="cashOutWarningText" class="text-[10.5px] p-2 bg-rose-50 text-rose-700 font-black rounded-lg border border-rose-150 flex items-center gap-1.5 mt-1"></p>
                        </div>
                    </div>

                    <!-- Category selection NGO / Company specific expenses -->
                    <div class="col-span-2 space-y-1.5">
                        <label class="block text-xs font-black text-slate-800 uppercase tracking-wide">ব্যয়ের খাত (Category) <span class="text-rose-500">*</span></label>
                        <select name="category" required class="w-full px-4 py-3 bg-slate-50 border border-slate-205 focus:ring-2 focus:ring-indigo-400 focus:outline-none rounded-2xl font-semibold text-xs text-slate-700">
                            <option value="">-- ব্যয়ের সার্ভিস ক্যাটাগরি নির্বাচন করুন --</option>
                            <?php
                                $expenseCats = \App\Models\Category::getExpenseCategories($userCompId);
                            ?>
                            <?php $__currentLoopData = $expenseCats; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $catName): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($catName); ?>"><?php echo e($catName); ?></option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                    </div>

                    <!-- Payment Method -->
                    <div class="col-span-1 space-y-1.5">
                        <label class="block text-xs font-black text-slate-800 uppercase tracking-wide">লেনদেন মাধ্যম <span class="text-rose-500">*</span></label>
                        <select id="cashOutPaymentMethod" name="payment_method" required onchange="toggleBankSelection('cashOutPaymentMethod', 'cashOutBankArea')" class="w-full px-4 py-3 bg-slate-50 border border-slate-205 focus:ring-2 focus:ring-indigo-400 focus:outline-none rounded-2xl font-semibold text-xs text-slate-700">
                            <option value="Cash">Cash (ড্রয়ার ভল্ট)</option>
                            <option value="Bank">Bank (ব্যাংক অ্যাকাউন্ট)</option>
                            <option value="Cheque">Cheque (চেক বই পেইমেন্ট)</option>
                        </select>
                    </div>

                    <!-- Reference No -->
                    <div class="col-span-1 space-y-1.5">
                        <label class="block text-xs font-black text-slate-800 uppercase tracking-wide">রেফারেন্স নং / ভাউচার নং</label>
                        <input type="text" name="reference_no" class="w-full px-4 py-3 bg-slate-50 border border-slate-205 focus:ring-2 focus:ring-indigo-400 focus:outline-none rounded-2xl font-semibold text-xs text-slate-700" placeholder="e.g. Receipt #, Cheque No">
                    </div>

                    <!-- Bank selector conditional -->
                    <div id="cashOutBankArea" class="col-span-2 space-y-1.5 hidden">
                        <label class="block text-xs font-black text-slate-800 uppercase tracking-wide">উৎস ব্যাংক হিসাব (Bank Account Source)</label>
                        <select name="bank_account_id" class="w-full px-4 py-3 bg-slate-50 border border-slate-205 focus:ring-2 focus:ring-indigo-400 focus:outline-none rounded-2xl font-semibold text-xs text-slate-700">
                            <option value="">-- উত্তোলন করার ব্যাংক হিসাব নির্বাচন করুন --</option>
                            <?php $__currentLoopData = $bankAccounts; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $bank): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($bank->id); ?>"><?php echo e($bank->bank_name); ?> - <?php echo e($bank->account_number); ?> (৳<?php echo e(number_format($bank->balance, 2)); ?>)</option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                    </div>

                    <!-- File Attachment -->
                    <div class="col-span-2 space-y-1.5">
                        <label class="block text-xs font-black text-slate-800 uppercase tracking-wide">বিল / ভাউচার ফাইল কপি সংযুক্ত করুন (JPG, PNG, PDF)</label>
                        <input type="file" name="attachment" class="w-full px-4 py-2.5 bg-slate-50 border border-slate-205 focus:ring-2 focus:ring-indigo-400 focus:outline-none rounded-2xl text-xs text-slate-600">
                    </div>

                    <!-- Particulars -->
                    <div class="col-span-2 space-y-1.5">
                        <label class="block text-xs font-black text-slate-800 uppercase tracking-wide">বিস্তারিত বিবরণ / ব্যয়ের বিবরণ <span class="text-rose-500">*</span></label>
                        <textarea name="particulars" required rows="3" class="w-full px-4 py-3 bg-slate-50 border border-slate-205 focus:ring-2 focus:ring-indigo-400 focus:outline-none rounded-2xl font-semibold text-xs text-slate-700" placeholder="টাকা কাকে পরিশোধ করা হলো এবং কি উদ্দেশ্যে বিস্তারিত লিখুন..."></textarea>
                    </div>
                </div>

                <!-- Footer Operations -->
                <div class="pt-4 border-t border-slate-100 flex items-center justify-end gap-2.5">
                    <button type="button" onclick="closeModal('modalCashOut')" class="px-4 py-2.5 bg-slate-100 hover:bg-slate-250 border border-slate-200 text-slate-700 hover:text-slate-900 font-extrabold text-[11px] rounded-xl transition cursor-pointer">
                        বাতিল করুন
                    </button>
                    <button type="submit" class="px-5 py-2.5 bg-gradient-to-r from-indigo-500 to-indigo-600 hover:from-indigo-650 hover:to-indigo-755 text-white font-black text-[11px] rounded-xl shadow-md transition cursor-pointer">
                        ভাউচার তৈরি করুন (Generate Out-Voucher)
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- ============================================== -->
<!--    MODAL: VOUCHER AUDITOR RECEIPT DETAILS     -->
<!-- ============================================== -->
<div id="modalVoucherDetails" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <!-- Backdrop -->
        <div onclick="closeModal('modalVoucherDetails')" class="fixed inset-0 transition-opacity modal-backdrop"></div>
        
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
        
        <!-- Modal Content Pane -->
        <div class="inline-block align-bottom bg-white rounded-3xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-xl sm:w-full border border-slate-200">
            <!-- Header with Voucher No -->
            <div class="bg-slate-900 text-white px-6 py-5 flex items-center justify-between">
                <div>
                    <h3 class="text-sm font-bold uppercase tracking-widest text-slate-400 leading-none">Voucher Detail Audit Log</h3>
                    <h2 id="viewVoucherNo" class="text-xl font-mono font-black text-white mt-1.5">VCH-XXXX-XXX</h2>
                </div>
                <button onclick="closeModal('modalVoucherDetails')" class="text-white hover:text-slate-300 font-black text-lg p-1.5">&times;</button>
            </div>
            
            <!-- Details Board -->
            <div class="p-6 space-y-5">
                
                <div class="grid grid-cols-2 gap-4 border-b border-slate-100 pb-4">
                    <!-- Column 1 -->
                    <div class="space-y-1.5">
                        <span class="text-[9px] font-black text-slate-400 uppercase tracking-wider block">লেনদেনের ধরণ / Type</span>
                        <span id="viewVoucherType" class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black uppercase text-slate-800"></span>
                    </div>

                    <!-- Column 2 -->
                    <div class="space-y-1.5">
                        <span class="text-[9px] font-black text-slate-400 uppercase tracking-wider block font-sans">তৈরি করেছেন / Created By</span>
                        <span id="viewVoucherCreator" class="text-xs font-extrabold text-slate-800">N/A</span>
                    </div>

                    <!-- Column 1.2 -->
                    <div class="space-y-1.5">
                        <span class="text-[9px] font-black text-slate-400 uppercase tracking-wider block">হিসাবের খাত / Category</span>
                        <span id="viewVoucherCategory" class="text-xs font-black text-indigo-700 bg-indigo-50 px-2.5 py-1 rounded-lg border border-indigo-100">N/A</span>
                    </div>

                    <!-- Column 2.2 -->
                    <div class="space-y-1.5">
                        <span class="text-[9px] font-black text-slate-400 uppercase tracking-wider block">সময় ও তারিখ / Timestamp</span>
                        <span id="viewVoucherDate" class="text-xs font-mono font-bold text-slate-705">N/A</span>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4 border-b border-slate-100 pb-4">
                    <!-- Method -->
                    <div class="space-y-1.5">
                        <span class="text-[9px] font-black text-slate-400 uppercase tracking-wider block">লেনদেন মাধ্যম / Method</span>
                        <span id="viewVoucherMethod" class="text-xs font-bold text-slate-800">N/A</span>
                    </div>

                    <!-- Ref No -->
                    <div class="space-y-1.5">
                        <span class="text-[9px] font-black text-slate-400 uppercase tracking-wider block">রেফারেন্স নং / Ref No</span>
                        <span id="viewVoucherRef" class="text-xs font-mono font-bold text-slate-800">N/A</span>
                    </div>
                </div>

                <!-- Particulars description -->
                <div class="space-y-1.5 bg-slate-50 p-4 rounded-2xl border border-slate-150/70">
                    <span class="text-[9px] font-black text-slate-400 uppercase tracking-wider block">বিস্তারিত বিবরণ / Particulars Log</span>
                    <p id="viewVoucherParticulars" class="text-xs text-slate-700 font-medium leading-relaxed"></p>
                </div>

                <!-- Ledger Audit Financial Total -->
                <div class="p-4 bg-gradient-to-br from-slate-900 to-slate-950 text-white rounded-2xl flex items-center justify-between shadow-lg">
                    <div>
                        <span class="text-[9px] font-black text-slate-400 uppercase tracking-wider block">অনুমোদিত পরিমাণ (Consolidated Balance sum)</span>
                        <p class="text-[10px] text-blue-300 font-bold mt-0.5">Approved Ledger Accounting Total</p>
                    </div>
                    <span id="viewVoucherAmount" class="font-mono text-xl font-extrabold text-white">৳0.00</span>
                </div>

                <!-- Dynamic Attachment view area -->
                <div id="viewVoucherAttachmentRow" class="hidden flex items-center justify-between p-3.5 bg-blue-50/50 border border-blue-200/40 rounded-2xl">
                    <div class="flex items-center gap-2">
                        <span class="text-lg">📁</span>
                        <div>
                            <h4 class="text-xs font-bold text-slate-800">ভাউচার রসিদ সংযোগ ফাইল</h4>
                            <p class="text-[10px] text-slate-400 font-mono" id="viewAttachmentNameLabel"></p>
                        </div>
                    </div>
                    <a id="viewVoucherAttachmentLink" href="" target="_blank" class="px-3.5 py-1.5 bg-blue-100 hover:bg-blue-200 text-blue-800 text-[10px] font-black rounded-lg border border-blue-200/50 transition">
                        রসিদ ডাউনলোড / দেখুন 📥
                    </a>
                </div>

                <!-- Audit status info -->
                <div class="p-3.5 border rounded-2xl flex items-center justify-between text-xs font-bold" id="viewVoucherStatusBlock">
                    <span class="text-[10px] font-black text-slate-400 uppercase">Audit Status</span>
                    <span id="viewVoucherStatusText" class="px-3 py-1 rounded-full text-[10px] font-black"></span>
                </div>
            </div>

            <!-- Footer Operations -->
            <div class="p-6 border-t border-slate-100 flex items-center justify-end gap-2.5 bg-slate-50/70">
                <button type="button" onclick="closeModal('modalVoucherDetails')" class="px-5 py-2.5 bg-slate-800 hover:bg-slate-900 text-white font-extrabold text-xs rounded-xl shadow-md transition cursor-pointer">
                    কঠিন বন্ধ করুন (Exit)
                </button>
            </div>
        </div>
    </div>
</div>

<!-- ============================================== -->
<!--    MODAL: AUDITOR REJECT BRIEF EXPLANATION    -->
<!-- ============================================== -->
<div id="modalVoucherReject" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <!-- Backdrop -->
        <div onclick="closeRejectModal()" class="fixed inset-0 transition-opacity modal-backdrop"></div>
        
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
        
        <!-- Modal Content Pane -->
        <div class="inline-block align-bottom bg-white rounded-3xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-md sm:w-full border border-slate-200">
            <!-- Header -->
            <div class="bg-rose-600 text-white px-6 py-4 flex items-center justify-between">
                <div>
                    <h3 class="text-sm font-black tracking-tight leading-none uppercase">ভাউচার বাতিল করুন (Reject Journal Audit)</h3>
                    <h4 id="rejectVoucherTitleCode" class="text-xs font-mono font-bold tracking-wider mt-1 text-rose-100"></h4>
                </div>
                <button onclick="closeRejectModal()" class="text-white hover:text-rose-100 font-black text-lg p-1.5">&times;</button>
            </div>
            
            <!-- Reject Form -->
            <form id="rejectVoucherFormElement" action="" method="POST" class="p-6 space-y-4">
                <?php echo csrf_field(); ?>
                <div class="space-y-1.5">
                    <label class="block text-xs font-black text-slate-800 uppercase tracking-wide">বাতিল করার নির্দিষ্ট কারণ (Rejection Reason/Notes) <span class="text-rose-500">*</span></label>
                    <textarea name="notes" required rows="3" class="w-full px-4 py-3 bg-slate-50 border border-slate-205 focus:ring-2 focus:ring-rose-450 focus:outline-none rounded-2xl font-semibold text-xs text-slate-700" placeholder="ভাউচার বা বিল বাতিল করার পেছনের কারণ বা অডিট অসঙ্গতি বিস্তারিত লিখুন..."></textarea>
                </div>

                <div class="pt-4 border-t border-slate-100 flex items-center justify-end gap-2.5">
                    <button type="button" onclick="closeRejectModal()" class="px-4 py-2.5 bg-slate-100 hover:bg-slate-250 text-slate-700 hover:text-slate-900 font-extrabold text-[11px] rounded-xl transition cursor-pointer">
                        ফিরে যান
                    </button>
                    <button type="submit" class="px-5 py-2.5 bg-rose-600 hover:bg-rose-700 text-white font-black text-[11px] rounded-xl shadow-md transition cursor-pointer">
                        নিশ্চিত বাতিল করুন (Confirm Reject)
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<?php $__env->startSection('scripts'); ?>
<script>
    // System utility to open modal drawer containers smoothly
    function openModal(modalId) {
        const modal = document.getElementById(modalId);
        if (modal) {
            modal.classList.remove('hidden');
            document.body.classList.add('overflow-hidden');
        }
    }

    // System utility to close modal drawer containers smoothly
    function closeModal(modalId) {
        const modal = document.getElementById(modalId);
        if (modal) {
            modal.classList.add('hidden');
            document.body.classList.remove('overflow-hidden');
        }
    }

    // Toggle showing bank input fields based on elected payment channel payment methods
    function toggleBankSelection(selectElementId, targetWrapId) {
        const select = document.getElementById(selectElementId);
        const target = document.getElementById(targetWrapId);
        if (select && target) {
            if (select.value === 'Bank' || select.value === 'Cheque') {
                target.classList.remove('hidden');
                target.querySelector('select').setAttribute('required', 'required');
            } else {
                target.classList.add('hidden');
                target.querySelector('select').removeAttribute('required');
                target.querySelector('select').value = '';
            }
        }
    }

    // Meticulous limit warning calculations checking if cashout exceeds live branch vault funds!
    function validateCashOutLimit(valueStr, availableBalance) {
        const amount = parseFloat(valueStr);
        const limit = parseFloat(availableBalance);
        const warningBox = document.getElementById('cashOutBalanceWarningContainer');
        const warning = document.getElementById('cashOutWarningText');
        const paymentMethod = document.getElementById('cashOutPaymentMethod').value;
        
        if (warningBox && warning) {
            if (amount > limit && paymentMethod === 'Cash') {
                warningBox.classList.remove('hidden');
                warning.innerHTML = `⚠️ <b>সীমা সতর্কতা:</b> আপনার ব্র্যাঞ্চ ভল্ট ক্যাশের চেয়ে বেশি ব্যয় সাবমিট করছেন! বর্তমান ব্র্যাঞ্চ ক্যাশঃ <b>৳${limit.toLocaleString('en-US', {minimumFractionDigits: 2})}</b>. আপনার এই রানিং ভাউচারটি পোস্টিং সম্পন্ন হলেও তা ক্যাশ জমা হওয়া পর্যন্ত <b>অডিটর পেন্ডিং</b> রিভিঊ অবস্থায় আটকে থাকবে।`;
            } else {
                warningBox.classList.add('hidden');
            }
        }
    }

    // Monitor paymethod method shifts on Cashout fields directly to re-examine limit warnings
    document.getElementById('cashOutPaymentMethod').addEventListener('change', function() {
        const value = document.getElementById('cashOutAmountValue').value;
        validateCashOutLimit(value, '<?php echo e($branchInfo->balance ?? 0); ?>');
    });

    // Populate and showcase rich details modal dynamically based on row datasets
    function showVoucherDetails(btnElement) {
        // Retrieve values
        const id = btnElement.getAttribute('data-id');
        const voucherNo = btnElement.getAttribute('data-voucher-no');
        const date = btnElement.getAttribute('data-date');
        const type = btnElement.getAttribute('data-type');
        const category = btnElement.getAttribute('data-category');
        const particulars = btnElement.getAttribute('data-particulars');
        const amount = btnElement.getAttribute('data-amount');
        const paymentMethod = btnElement.getAttribute('data-payment-method');
        const referenceNo = btnElement.getAttribute('data-reference-no');
        const attachmentName = btnElement.getAttribute('data-attachment-name');
        const createdBy = btnElement.getAttribute('data-created-by');
        const status = btnElement.getAttribute('data-status');
        const notes = btnElement.getAttribute('data-approval-notes');

        // Map values to modal placeholders
        document.getElementById('viewVoucherNo').innerText = voucherNo;
        document.getElementById('viewVoucherCreator').innerText = createdBy;
        document.getElementById('viewVoucherCategory').innerText = category;
        document.getElementById('viewVoucherDate').innerText = date;
        document.getElementById('viewVoucherMethod').innerText = paymentMethod;
        document.getElementById('viewVoucherRef').innerText = referenceNo;
        document.getElementById('viewVoucherParticulars').innerText = particulars;
        document.getElementById('viewVoucherAmount').innerText = '৳' + amount;

        // Customise type badge
        const typeBadge = document.getElementById('viewVoucherType');
        if (type === 'Cash In') {
            typeBadge.innerText = '📥 Cash In';
            typeBadge.className = 'inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black uppercase bg-emerald-50 text-emerald-800 border border-emerald-250/30';
        } else {
            typeBadge.innerText = '📤 Cash Out';
            typeBadge.className = 'inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black uppercase bg-rose-50 text-rose-800 border border-rose-250/30';
        }

        // Customise attachment row
        const attachRow = document.getElementById('viewVoucherAttachmentRow');
        if (attachmentName && attachmentName !== '' && attachmentName !== 'null') {
            attachRow.classList.remove('hidden');
            document.getElementById('viewAttachmentNameLabel').innerText = attachmentName;
            document.getElementById('viewVoucherAttachmentLink').setAttribute('href', `/storage/attachments/${attachmentName}`);
        } else {
            attachRow.classList.add('hidden');
        }

        // Customise status block
        const statusText = document.getElementById('viewVoucherStatusText');
        const statusBlock = document.getElementById('viewVoucherStatusBlock');
        statusText.innerText = status;
        
        if (status === 'Approved') {
            statusText.className = 'px-3 py-1 rounded-full text-[10px] font-black bg-emerald-50 text-emerald-800 border border-emerald-200';
            statusBlock.className = 'p-3.5 border rounded-2xl flex flex-col md:flex-row items-start md:items-center justify-between text-xs font-bold bg-emerald-50/20 border-emerald-200';
            statusBlock.innerHTML = `<span class="text-[10px] font-black text-slate-500 uppercase">Audit Status</span> <div class="text-right"><span class="px-3 py-1 rounded-full text-[10px] font-black bg-emerald-50 text-emerald-850 border border-emerald-250">✓ Approved</span> <p class="text-[10px] text-slate-450 font-bold mt-1.5">Note: ${notes}</p></div>`;
        } else if (status === 'Rejected') {
            statusText.className = 'px-3 py-1 rounded-full text-[10px] font-black bg-rose-50 text-rose-800 border border-rose-200';
            statusBlock.className = 'p-3.5 border rounded-2xl flex flex-col md:flex-row items-start md:items-center justify-between text-xs font-bold bg-rose-50/20 border-rose-200';
            statusBlock.innerHTML = `<span class="text-[10px] font-black text-slate-500 uppercase">Audit Status</span> <div class="text-right"><span class="px-3 py-1 rounded-full text-[10px] font-black bg-rose-50 text-rose-850 border border-rose-250">× Rejected</span> <p class="text-[10px] text-rose-700 font-bold mt-1.5">Note: ${notes}</p></div>`;
        } else {
            statusText.className = 'px-3 py-1 rounded-full text-[10px] font-black bg-amber-50 text-amber-700 border border-amber-200 animate-pulse';
            statusBlock.className = 'p-3.5 border rounded-2xl flex items-center justify-between text-xs font-bold bg-amber-50/20 border-amber-200';
            statusBlock.innerHTML = `<span class="text-[10px] font-black text-slate-500 uppercase">Audit Status</span> <span class="px-3 py-1 rounded-full text-[10px] font-black bg-amber-50 text-amber-750 border border-amber-250 animate-pulse">⏱️ Pending Auditor Review</span>`;
        }

        // Open details modal
        openModal('modalVoucherDetails');
    }

    // Trigger reject modal with custom action address
    function triggerRejectModal(voucherId, voucherNo) {
        const modal = document.getElementById('modalVoucherReject');
        const form = document.getElementById('rejectVoucherFormElement');
        const headerCode = document.getElementById('rejectVoucherTitleCode');
        
        if (modal && form && headerCode) {
            headerCode.innerText = `Voucher ID: ${voucherNo}`;
            form.setAttribute('action', `/vouchers/${voucherId}/reject`);
            modal.classList.remove('hidden');
            document.body.classList.add('overflow-hidden');
        }
    }

    // Close reject confirmation modal
    function closeRejectModal() {
        const modal = document.getElementById('modalVoucherReject');
        if (modal) {
            modal.classList.add('hidden');
            document.body.classList.remove('overflow-hidden');
        }
    }
</script>

<?php if(Auth::user()->isSuperAdmin()): ?>
<!-- Edit Voucher Modal for Super Admin -->
<div id="edit-voucher-modal" class="hidden fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-xs flex items-center justify-center p-4">
    <div class="bg-white rounded-3xl border border-slate-200 shadow-xl overflow-hidden max-w-lg w-full flex flex-col relative animate-in fade-in zoom-in-95 duration-200">
        <div class="p-5 border-b border-slate-100 flex items-center justify-between bg-slate-50">
            <h3 class="text-xs font-black uppercase tracking-wider text-slate-700 flex items-center gap-2">
                <span>✏️</span> ভাউচার সংশোধন ও এডিট (Edit Ledger Voucher)
            </h3>
            <button onclick="closeEditVoucherModal()" class="text-slate-400 hover:text-slate-700 font-bold text-sm">✖</button>
        </div>
        <form id="editVoucherForm" action="" method="POST" class="p-5 space-y-4 text-xs font-bold text-slate-600">
            <?php echo csrf_field(); ?>
            
            <div class="bg-indigo-50/55 border border-indigo-100 rounded-xl p-3 mb-2 flex justify-between items-center">
                <span class="text-indigo-800">ভাউচার নম্বর:</span>
                <span id="editVoucherNoLabel" class="font-mono text-slate-900 font-black tracking-wider">VCH-XXXX</span>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block mb-1.5">লেনদেনের ধরণ *</label>
                    <select name="type" id="editVoucherType" required class="w-full bg-slate-50 border border-slate-200 rounded-xl p-2.5 font-bold focus:ring-1 focus:ring-indigo-500">
                        <option value="Cash In">Cash In (প্রাপ্তি)</option>
                        <option value="Cash Out">Cash Out (পরিশোধ)</option>
                    </select>
                </div>
                <div>
                    <label class="block mb-1.5">টাকার পরিমাণ (BDT) *</label>
                    <input type="number" step="0.01" name="amount" id="editVoucherAmount" required min="1" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-2.5 font-mono font-bold focus:ring-1 focus:ring-indigo-500">
                </div>
            </div>

            <div>
                <label class="block mb-1.5">হিসাবের খাত (Category) *</label>
                <select name="category" id="editVoucherCategory" required class="w-full bg-slate-50 border border-slate-200 rounded-xl p-2.5 focus:ring-1 focus:ring-indigo-500">
                    <?php
                        $userCompId = auth()->user()->company_id;
                        $editModalAllCats = \App\Models\Category::getExpenseCategories($userCompId)->merge(\App\Models\Category::getIncomeCategories($userCompId));
                    ?>
                    <?php $__currentLoopData = $editModalAllCats; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $catName): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <option value="<?php echo e($catName); ?>"><?php echo e($catName); ?></option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </select>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block mb-1.5">পেমেন্ট মেথড *</label>
                    <select name="payment_method" id="editVoucherPaymentMethod" onchange="toggleEditVoucherBankSelect(this.value)" required class="w-full bg-slate-50 border border-slate-200 rounded-xl p-2.5 focus:ring-1 focus:ring-indigo-500">
                        <option value="Cash">Cash (নগদ)</option>
                        <option value="Bank">Bank (ব্যাংক ট্রান্সফার)</option>
                        <option value="Cheque">Cheque (চেক)</option>
                    </select>
                </div>
                <div>
                    <label class="block mb-1.5">রেফারেন্স নং / মেমো</label>
                    <input type="text" name="reference_no" id="editVoucherReferenceNo" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-2.5 font-mono focus:ring-1 focus:ring-indigo-500">
                </div>
            </div>

            <?php
                $editModalBankAccounts = \App\Models\BankAccount::where('company_id', $userCompId)->where('status', 'Active')->get();
            ?>
            <div id="editVoucherBankSelectDiv" class="hidden">
                <label class="block mb-1.5">ব্যাংক অ্যাকাউন্ট *</label>
                <select name="bank_account_id" id="editVoucherBankAccountId" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-2.5 focus:ring-1 focus:ring-indigo-500">
                    <option value="">-- অ্যাকাউন্ট নির্বাচন করুন --</option>
                    <?php $__currentLoopData = $editModalBankAccounts; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $b): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <option value="<?php echo e($b->id); ?>"><?php echo e($b->bank_name); ?> - (<?php echo e($b->account_number); ?>)</option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </select>
            </div>

            <div>
                <label class="block mb-1.5">অডিট স্ট্যাটাস (Status) *</label>
                <select name="status" id="editVoucherStatus" required class="w-full bg-slate-50 border border-slate-200 rounded-xl p-2.5 focus:ring-1 focus:ring-indigo-500">
                    <option value="Pending">Pending (অপেক্ষমান)</option>
                    <option value="Approved">Approved (অনুমোদিত)</option>
                    <option value="Rejected">Rejected (প্রত্যাখ্যাত)</option>
                </select>
            </div>

            <div>
                <label class="block mb-1.5">লেনদেনের বিবরণ (Particulars) *</label>
                <textarea name="particulars" id="editVoucherParticulars" rows="3" required class="w-full bg-slate-50 border border-slate-200 rounded-xl p-2.5 font-normal text-slate-800 focus:ring-1 focus:ring-indigo-500"></textarea>
            </div>

            <div class="pt-2 border-t border-slate-100 flex items-center justify-end gap-3 font-bold text-xs">
                <button type="button" onclick="closeEditVoucherModal()" class="bg-slate-100 text-slate-700 px-4 py-2.5 rounded-xl hover:bg-slate-200 transition">
                    বাতিল (Close)
                </button>
                <button type="submit" class="bg-indigo-600 text-white px-5 py-2.5 rounded-xl hover:bg-indigo-700 shadow-md shadow-indigo-500/10">
                    পরিবর্তন সংরক্ষণ করুন
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    function openEditVoucherModal(button) {
        const id = button.getAttribute('data-id');
        const voucherNo = button.getAttribute('data-voucher-no');
        const type = button.getAttribute('data-type');
        const amount = button.getAttribute('data-amount');
        const category = button.getAttribute('data-category');
        const particulars = button.getAttribute('data-particulars');
        const paymentMethod = button.getAttribute('data-payment-method');
        const bankAccountId = button.getAttribute('data-bank-account-id');
        const referenceNo = button.getAttribute('data-reference-no');
        const status = button.getAttribute('data-status');

        document.getElementById('editVoucherForm').action = `/admin/vouchers/${id}/update`;
        document.getElementById('editVoucherNoLabel').innerText = voucherNo;
        document.getElementById('editVoucherType').value = type;
        document.getElementById('editVoucherAmount').value = amount;
        document.getElementById('editVoucherCategory').value = category;
        document.getElementById('editVoucherParticulars').value = particulars;
        document.getElementById('editVoucherPaymentMethod').value = paymentMethod;
        document.getElementById('editVoucherReferenceNo').value = referenceNo || '';
        document.getElementById('editVoucherStatus').value = status;

        if (paymentMethod === 'Bank') {
            document.getElementById('editVoucherBankSelectDiv').classList.remove('hidden');
            document.getElementById('editVoucherBankAccountId').value = bankAccountId || '';
            document.getElementById('editVoucherBankAccountId').required = true;
        } else {
            document.getElementById('editVoucherBankSelectDiv').classList.add('hidden');
            document.getElementById('editVoucherBankAccountId').value = '';
            document.getElementById('editVoucherBankAccountId').required = false;
        }

        document.getElementById('edit-voucher-modal').classList.remove('hidden');
    }

    function closeEditVoucherModal() {
        document.getElementById('edit-voucher-modal').classList.add('hidden');
    }

    function toggleEditVoucherBankSelect(method) {
        const bankDiv = document.getElementById('editVoucherBankSelectDiv');
        const bankAccountSelect = document.getElementById('editVoucherBankAccountId');
        if (method === 'Bank') {
            bankDiv.classList.remove('hidden');
            bankAccountSelect.required = true;
        } else {
            bankDiv.classList.add('hidden');
            bankAccountSelect.value = '';
            bankAccountSelect.required = false;
        }
    }
</script>
<?php endif; ?>
<?php $__env->stopSection(); ?>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\cash_management\resources\views/dashboard.blade.php ENDPATH**/ ?>