<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment Details | IMMIA FINANCE LIMITED</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --midnight-indigo: #1A237E;
            --immia-blue: #0077C5;
            --immia-blue-dark: #005A94;
            --amber-glow: #FFB300;
            --vivid-crimson: #D32F2F;
            --rich-black: #111111;
        }

        .bg-immia-blue { background-color: var(--immia-blue); }
        .bg-immia-blue-dark { background-color: var(--immia-blue-dark); }
        .bg-midnight-indigo { background-color: var(--midnight-indigo); }
        .text-immia-blue { color: var(--immia-blue); }
        .text-vivid-crimson { color: var(--vivid-crimson); }

        .sidebar { transition: all 0.3s ease; }
        @media (max-width: 768px) {
            .sidebar { transform: translateX(-100%); }
            .sidebar.active { transform: translateX(0); }
        }

        .input-focus-ring:focus-within {
            border-color: var(--immia-blue);
            box-shadow: 0 0 0 1px var(--immia-blue);
        }

        /* --- MODERN TRANSPARENT OVERLAY --- */
        #processing-overlay { 
            display: none; 
            backdrop-filter: blur(12px); 
            background-color: rgba(0, 119, 197, 0.85); /* Immia Blue with Transparency */
        }
        
        .loader-container { position: relative; width: 100px; height: 100px; }
        .loader-ring {
            position: absolute; width: 100%; height: 100%;
            border: 4px solid transparent; border-top-color: #00C853;
            border-radius: 50%; animation: rotate-premium 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        }
        .loader-ring-inner {
            position: absolute; width: 70%; height: 70%; top: 15%; left: 15%;
            border: 4px solid transparent; border-bottom-color: var(--amber-glow);
            border-radius: 50%; animation: rotate-premium-reverse 1.5s linear infinite;
        }
        .loader-pulse {
            position: absolute; width: 30%; height: 30%; top: 35%; left: 35%;
            background-color: white; border-radius: 50%;
            animation: pulse-premium 1.5s ease-in-out infinite;
        }

        @keyframes rotate-premium { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        @keyframes rotate-premium-reverse { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } }
        @keyframes pulse-premium { 0%, 100% { transform: scale(0.8); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 1; } }
    </style>
</head>
<body class="bg-[#F8F9FB]">
    <?php
        $customer = Auth::guard('customer')->user();
        $hasProfilePicture = $customer->docpath && Storage::disk('public')->exists($customer->docpath);
        $profilePictureUrl = $hasProfilePicture ? asset('storage/' . $customer->docpath) : 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=500&q=60';
    ?>

    <div id="processing-overlay" class="fixed inset-0 z-[100] flex flex-col items-center justify-center text-white">
        <div class="loader-container mb-8">
            <div class="loader-ring"></div>
            <div class="loader-ring-inner"></div>
            <div class="loader-pulse"></div>
        </div>
        <div class="text-center px-8 max-w-sm">
            <h2 class="text-2xl font-black mb-3 uppercase tracking-widest text-white">Authorizing</h2>
            <p class="text-blue-50 text-sm font-medium mb-6 leading-relaxed">Sent to your device. Enter your <span class="text-white font-bold">PIN</span> to finish.</p>
            
            <div class="flex flex-col items-center space-y-6">
                <div class="inline-flex items-center space-x-3 bg-white/10 border border-white/10 px-6 py-3 rounded-2xl">
                    <span class="flex h-2 w-2 relative"><span class="animate-ping absolute h-full w-full rounded-full bg-emerald-400 opacity-75"></span><span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span></span>
                    <span id="polling-status" class="text-xs font-bold uppercase tracking-widest">Waiting for response...</span>
                </div>

                <button type="button" onclick="cancelPaymentProcess()" class="text-[10px] font-black uppercase tracking-[0.2em] text-blue-200 hover:text-white border-b border-transparent hover:border-white transition-all pb-1">
                    Cancel Process
                </button>
            </div>
        </div>
    </div>

    <div id="sidebar" class="sidebar fixed inset-y-0 left-0 z-40 w-64 bg-immia-blue shadow-lg text-white">
        <div class="p-6 border-b border-immia-blue-dark">
            <div class="flex items-center space-x-3">
                <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center"><i class="fas fa-hand-holding-usd text-immia-blue text-lg"></i></div>
                <div><h1 class="text-xl font-bold">IMMIA FINANCE</h1><p class="text-blue-100 text-xs">Client Portal</p></div>
            </div>
        </div>
        <nav class="p-4 space-y-2">
            <a href="<?php echo e(route('customer.dashboard')); ?>" class="flex items-center space-x-3 p-3 hover:bg-immia-blue-dark rounded-lg font-medium">
                <i class="fas fa-tachometer-alt w-5"></i><span>Dashboard</span>
            </a>
            <a href="<?php echo e(route('customer.applications.index')); ?>" class="flex items-center space-x-3 p-3 hover:bg-immia-blue-dark rounded-lg font-medium">
                <i class="fas fa-file-invoice-dollar w-5"></i><span>My Applications</span>
                <?php if(count($activeApplications) > 0): ?><span class="ml-auto bg-white text-immia-blue text-xs px-2 py-1 rounded-full"><?php echo e(count($activeApplications)); ?></span><?php endif; ?>
            </a>
            <a href="<?php echo e(route('customer.loans.index')); ?>" class="flex items-center space-x-3 p-3 hover:bg-immia-blue-dark rounded-lg font-medium">
                <i class="fas fa-hand-holding-usd w-5"></i><span>My Loans</span>
                <?php if($loanStats['active_loans_count'] > 0): ?><span class="ml-auto bg-green-400 text-white text-xs px-2 py-1 rounded-full font-bold"><?php echo e($loanStats['active_loans_count']); ?></span><?php endif; ?>
            </a>
            <a href="<?php echo e(route('customer.loan.application.show')); ?>" class="flex items-center space-x-3 p-3 hover:bg-immia-blue-dark rounded-lg font-medium">
                <i class="fas fa-paper-plane w-5"></i><span>Apply for Loan</span>
            </a>
            <a href="<?php echo e(route('customer.payments.method')); ?>" class="flex items-center space-x-3 p-3 bg-immia-blue-dark rounded-lg font-medium">
                <i class="fas fa-money-bill-wave w-5"></i><span>Make Payment</span>
            </a>
            <a href="<?php echo e(route('customer.transactions.history')); ?>" class="flex items-center space-x-3 p-3 hover:bg-immia-blue-dark rounded-lg font-medium">
                <i class="fas fa-history w-5"></i><span>Transaction History</span>
            </a>
            <a href="<?php echo e(route('customer.profile.show')); ?>" class="flex items-center space-x-3 p-3 hover:bg-immia-blue-dark rounded-lg font-medium">
                <i class="fas fa-user-cog w-5"></i><span>Profile Settings</span>
            </a>
            <form method="POST" action="<?php echo e(route('customer.logout')); ?>" class="mt-8">
                <?php echo csrf_field(); ?>
                <button type="submit" class="flex items-center space-x-3 p-3 hover:bg-red-600 rounded-lg font-medium w-full text-left">
                    <i class="fas fa-sign-out-alt w-5"></i><span>Logout</span>
                </button>
            </form>
        </nav>
    </div>

    <div class="lg:ml-64">
        <header class="bg-immia-blue shadow-sm border-b border-immia-blue-dark">
            <div class="flex justify-between items-center px-4 sm:px-6 py-4">
                <div class="flex items-center min-w-0 flex-1">
                    <a href="<?php echo e(route('customer.payments.method')); ?>" class="mr-4 text-white hover:bg-white/10 p-2 rounded-full transition-colors">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <div>
                        <h1 class="text-xl font-bold text-white">Payment Details</h1>
                        <p class="text-blue-100 text-xs">Review and confirm your repayment</p>
                    </div>
                </div>
                <div class="flex items-center space-x-3 p-2 rounded-lg bg-immia-blue-dark text-white">
                    <div class="w-8 h-8 rounded-full overflow-hidden border border-white/20">
                        <img src="<?php echo e($profilePictureUrl); ?>" alt="Profile" class="w-full h-full object-cover">
                    </div>
                    <span class="font-medium hidden sm:block"><?php echo e($customer->customer); ?></span>
                </div>
            </div>
        </header>

        <main class="p-4 sm:p-8 flex justify-center">
            <div class="w-full max-w-xl">
                <div class="bg-[#FFF9E6] border border-[#FFE082] rounded-3xl p-8 text-center mb-6 shadow-sm">
                    <p class="text-xs font-bold text-gray-500 uppercase tracking-widest mb-1">Total Outstanding Balance</p>
                    <h2 class="text-4xl font-black text-vivid-crimson tracking-tight">
                        ZMW <?php echo e(number_format($loanStats['total_outstanding_balance'], 2)); ?>

                    </h2>
                </div>

                <div class="flex justify-center mb-8">
                    <div class="bg-blue-50 border border-blue-100 px-4 py-2 rounded-xl">
                        <p class="text-[10px] font-black text-immia-blue uppercase tracking-widest">
                            REPAYMENT REF: <span class="ml-1 text-gray-700"><?php echo e($loanNumber); ?></span>
                        </p>
                    </div>
                </div>

                <div class="bg-white border border-gray-100 rounded-2xl p-5 flex items-center mb-8 shadow-sm">
                    <div class="w-12 h-12 flex items-center justify-center rounded-xl bg-gray-50 border border-gray-100">
                        <?php if($method == 'MTN'): ?> <span class="text-[10px] font-black italic bg-yellow-400 p-2 rounded">MTN</span>
                        <?php elseif($method == 'Airtel'): ?> <span class="text-[10px] font-black italic bg-red-600 text-white p-2 rounded uppercase">airtel</span>
                        <?php else: ?> <i class="fas fa-mobile-alt text-green-600 text-xl"></i> <?php endif; ?>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-bold text-gray-800">Paying with <?php echo e($method); ?> Mobile Money</p>
                        <p class="text-[10px] text-gray-400 font-bold uppercase">Provider confirmed</p>
                    </div>
                </div>

                <form id="payment-details-form" onsubmit="handlePaymentSubmit(event)" action="<?php echo e(route('customer.payments.process')); ?>" method="POST" class="space-y-6">
                    <?php echo csrf_field(); ?>
                    <input type="hidden" name="provider" value="<?php echo e($method); ?>">
                    <input type="hidden" name="loan_number" value="<?php echo e($loanNumber); ?>">

                    <div class="bg-white rounded-2xl border-2 border-gray-100 p-5 transition-all input-focus-ring">
                        <label class="text-[10px] font-bold text-immia-blue uppercase tracking-widest">Payment Amount</label>
                        <div class="flex items-center mt-2">
                            <span class="text-2xl font-bold text-immia-blue mr-3">ZMW</span>
                            <input type="number" step="0.01" name="amount" value="<?php echo e($amount); ?>" 
                                class="w-full text-3xl font-black text-gray-900 outline-none bg-transparent" required>
                        </div>
                    </div>

                    <div class="bg-white rounded-2xl border-2 border-gray-100 p-5 transition-all input-focus-ring">
                        <label class="text-[10px] font-bold text-immia-blue uppercase tracking-widest">Mobile Money Number</label>
                        <div class="flex items-center mt-2">
                            <i class="fas fa-phone-alt text-immia-blue mr-4 text-lg"></i>
                            <input type="tel" name="phone_number" value="<?php echo e($customer->phone); ?>" 
                                class="w-full text-xl font-bold text-gray-900 outline-none bg-transparent" placeholder="09xxxxxxx" required>
                        </div>
                    </div>

                    <button type="submit" class="w-full bg-gray-900 text-white h-16 rounded-2xl font-black text-sm tracking-[0.2em] hover:bg-black shadow-xl transition-all transform active:scale-[0.98] uppercase">
                        Proceed to Secure Pay
                    </button>
                </form>
            </div>
        </main>
    </div>

    <script>
        let pollingInterval; // Variable to store the interval globally for cancellation

        document.getElementById('mobile-menu-button').addEventListener('click', function() {
            document.getElementById('sidebar').classList.toggle('active');
        });

        async function handlePaymentSubmit(event) {
            event.preventDefault();
            document.getElementById('processing-overlay').style.display = 'flex';
            const form = event.target;
            const formData = new FormData(form);

            try {
                const response = await fetch(form.action, {
                    method: 'POST',
                    body: formData,
                    headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
                });
                const result = await response.json();
                if (result.success && result.referenceId) {
                    startPolling(result.referenceId);
                } else {
                    document.getElementById('processing-overlay').style.display = 'none';
                    alert(result.message || 'Initiation failed.');
                }
            } catch (error) {
                document.getElementById('processing-overlay').style.display = 'none';
                alert('Connection error.');
            }
        }

        function startPolling(refId) {
            const statusLabel = document.getElementById('polling-status');
            
            // Clear any existing interval before starting a new one
            if(pollingInterval) clearInterval(pollingInterval);

            pollingInterval = setInterval(async () => {
                try {
                    let url = "<?php echo e(route('customer.payments.status', ['referenceId' => 'REF_ID'])); ?>".replace('REF_ID', refId);
                    const response = await fetch(url, { headers: { 'Accept': 'application/json' } });
                    const result = await response.json();
                    const status = result.data.status.toLowerCase();
                    if (status === 'successful' || status === 'success') {
                        clearInterval(pollingInterval);
                        statusLabel.innerText = "Success!";
                        setTimeout(() => { window.location.href = "<?php echo e(route('customer.dashboard')); ?>?payment=success"; }, 1500);
                    } else if (status === 'failed') {
                        clearInterval(pollingInterval);
                        document.getElementById('processing-overlay').style.display = 'none';
                        alert("Transaction declined.");
                    }
                } catch (e) {}
            }, 3000);
        }

        // NEW: Cancellation function
        function cancelPaymentProcess() {
            if (confirm("Are you sure you want to stop waiting for this transaction?")) {
                if(pollingInterval) clearInterval(pollingInterval);
                document.getElementById('processing-overlay').style.display = 'none';
                alert("Payment status check cancelled. Please refresh your dashboard in a few minutes to see if the payment was processed.");
            }
        }
    </script>
</body>
</html><?php /**PATH /home/topacvbu/public_html/zedbankos.cloud/customer-portal/resources/views/customer/payment_details.blade.php ENDPATH**/ ?>