<!-- Modal Overlay Backdrop Component -->
<div id="loan-request-modal" class="fixed inset-0 bg-slate-900/40 backdrop-blur-xs z-50 hidden items-center justify-center p-4 transition-opacity duration-300">
    
    <!-- Modal Structural Content Window -->
    <div class="bg-white rounded-xl shadow-md border border-slate-300/80 w-full max-w-2xl overflow-hidden transform transition-all flex flex-col max-h-[90vh]">
        
        <!-- Header Controls Panel -->
        <div class="px-5 py-3.5 border-b border-slate-300/80 flex items-center justify-between bg-stone-50/50">
            <div>
                <h2 class="text-xs font-black text-slate-950 uppercase tracking-tight">Apply For Financial Advance</h2>
                <p class="text-[10px] text-slate-600 font-semibold mt-0.5">Define principal bounds and parameterizations for management evaluation.</p>
            </div>
            <button onclick="closeLoanModal()" class="w-7 h-7 rounded border border-slate-300 bg-white hover:bg-stone-100 text-slate-700 flex items-center justify-center font-black text-xs transition active:scale-95" aria-label="Close Modal Panel">
                ✕
            </button>
        </div>

        <!-- Form Elements Processing Area -->
        <div class="overflow-y-auto p-5 custom-scrollbar">
            <!-- Redirected action back to the ledger dashboard context root -->
            <form action="my_loans.php" method="POST" class="space-y-4">
                <!-- Added hidden parameters identifier to match our dashboard script logic -->
                <input type="hidden" name="action" value="submit_loan">
                
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <!-- Amount Parametrization -->
                    <div class="space-y-1.5">
                        <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">
                            Requested Capital Principal (₦)
                        </label>
                        <div class="relative">
                            <span class="absolute left-3 top-2.5 text-slate-400 font-black text-xs font-mono">₦</span>
                            <input type="number" step="0.01" name="amount" required placeholder="0.00" min="1"
                                   class="w-full bg-stone-50/40 border border-slate-300 p-2 pl-7 rounded text-xs font-black font-mono text-slate-950 focus:outline-none focus:border-indigo-700 focus:bg-white transition">
                        </div>
                    </div>

                    <!-- Amortization Length Window -->
                    <div class="space-y-1.5">
                        <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">
                            Repayment Window (Months)
                        </label>
                        <div class="relative">
                            <input type="number" name="months" min="1" required placeholder="e.g., 5"
                                   class="w-full bg-stone-50/40 border border-slate-300 p-2 rounded text-xs font-black font-mono text-slate-950 focus:outline-none focus:border-indigo-700 focus:bg-white transition">
                        </div>
                    </div>
                </div>

                <!-- Strategic Case Narrative -->
                <div class="space-y-1.5">
                    <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">
                        Justification Statement & Purpose Description
                    </label>
                    <textarea name="reason" rows="4" required placeholder="Provide structured situational context or details to assist review pools..."
                              class="w-full bg-stone-50/40 border border-slate-300 p-3 rounded text-xs font-semibold text-slate-950 focus:outline-none focus:border-indigo-700 focus:bg-white transition resize-none leading-relaxed"></textarea>
                </div>

                <!-- Operational Execution Action Triggers -->
                <div class="pt-4 border-t border-slate-200/80 flex flex-col sm:flex-row justify-end items-center gap-2">
                    <button type="button" onclick="closeLoanModal()" 
                            class="w-full sm:w-auto px-4 py-1.5 rounded border border-slate-300 bg-white hover:bg-stone-100 text-slate-700 font-black text-[10px] transition uppercase tracking-wider text-center">
                        Cancel Changes
                    </button>
                    <button type="submit" 
                            class="w-full sm:w-auto bg-slate-950 hover:bg-indigo-700 text-white font-black text-[10px] px-4 py-1.5 rounded shadow-xs transition uppercase tracking-wider text-center whitespace-nowrap">
                        Submit Application
                    </button>
                </div>

            </form>
        </div>

    </div>
</div>