<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Active Loans | 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 { --zedbank-blue: #0077C5; --zedbank-blue-dark: #005A94; }
        .bg-zedbank-blue { background-color: var(--zedbank-blue); }
        .bg-zedbank-blue-dark { background-color: var(--zedbank-blue-dark); }
        .text-zedbank-blue { color: var(--zedbank-blue); }
        .sidebar { transition: all 0.3s ease; z-index: 50; }
        @media (max-width: 1024px) {
            .sidebar { transform: translateX(-100%); }
            .sidebar.active { transform: translateX(0); }
        }
        .card-hover { transition: all 0.3s ease; }
        .card-hover:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); }
        .notification-dot { animation: pulse 2s infinite; }
        @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
        .text-truncate-safe { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    </style>
</head>
<body class="bg-gray-50">

<?php
    $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';
    
    $totalOutstanding = $loanStats['total_balance'] + $loanStats['total_interest'] + $loanStats['total_processing'];
    $totalRepaid = $loanStats['total_principal'] - $loanStats['total_balance'];
?>

<button id="mobile-menu-button" class="lg:hidden fixed top-4 left-4 z-50 bg-zedbank-blue text-white p-3 rounded-lg shadow-lg">
    <i class="fas fa-bars"></i>
</button>

<div id="sidebar" class="sidebar fixed inset-y-0 left-0 w-64 bg-zedbank-blue shadow-lg text-white">
    <div class="p-6 border-b border-zedbank-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-zedbank-blue text-lg"></i>
            </div>
            <div>
                <h1 class="text-xl font-bold uppercase tracking-tight">IMMIA FINANCE</h1>
                <p class="text-blue-100 text-xs font-medium uppercase tracking-widest">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-zedbank-blue-dark rounded-lg font-medium transition-colors">
            <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-zedbank-blue-dark rounded-lg font-medium transition-colors">
            <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-zedbank-blue text-[10px] font-black px-2 py-0.5 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 bg-zedbank-blue-dark rounded-lg font-medium shadow-inner">
            <i class="fas fa-hand-holding-usd w-5"></i><span>My Loans</span>
        </a>
        <a href="<?php echo e(route('customer.loan.application.show')); ?>" class="flex items-center space-x-3 p-3 hover:bg-zedbank-blue-dark rounded-lg font-medium transition-colors">
            <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 hover:bg-zedbank-blue-dark rounded-lg font-medium transition-colors">
            <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-zedbank-blue-dark rounded-lg font-medium transition-colors">
            <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-zedbank-blue-dark rounded-lg font-medium transition-colors">
            <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="pt-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 transition-all">
                <i class="fas fa-sign-out-alt w-5"></i><span>Logout</span>
            </button>
        </form>
    </nav>
</div>

<div class="lg:ml-64 min-h-screen">
    <header class="bg-zedbank-blue shadow-sm border-b border-zedbank-blue-dark sticky top-0 z-30">
        <div class="flex justify-between items-center px-4 sm:px-6 py-4">
            <div class="min-w-0 flex-1">
                <h1 class="text-xl sm:text-2xl font-bold text-white text-truncate-safe uppercase tracking-tight">Active Loans</h1>
                <p class="text-blue-50 text-[10px] font-black opacity-80 uppercase tracking-widest">Account Overview: <?php echo e($customer->customer); ?></p>
            </div>
            
            <div class="flex items-center space-x-4">
                <div class="relative hidden sm:block">
                    <button class="p-2 text-white hover:bg-zedbank-blue-dark rounded-full transition-colors relative">
                        <i class="fas fa-bell text-xl"></i>
                        <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full notification-dot"></span>
                    </button>
                </div>
                <div class="flex items-center space-x-3 p-2 rounded-xl bg-zedbank-blue-dark text-white border border-white/10">
                    <div class="w-8 h-8 rounded-full overflow-hidden border-2 border-white/20">
                        <img src="<?php echo e($profilePictureUrl); ?>" alt="Profile" class="w-full h-full object-cover">
                    </div>
                    <span class="font-black text-[10px] hidden sm:block uppercase tracking-wider"><?php echo e($customer->customer); ?></span>
                </div>
            </div>
        </div>
    </header>

    <main class="p-4 sm:p-6 lg:p-8">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
            <div class="bg-white p-5 rounded-2xl shadow-sm border border-gray-100 card-hover">
                <p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Total Principal</p>
                <p class="text-xl font-black text-gray-800">ZMW <?php echo e(number_format($loanStats['total_principal'], 2)); ?></p>
            </div>
            <div class="bg-white p-5 rounded-2xl shadow-sm border border-gray-100 card-hover">
                <p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Total Repaid</p>
                <p class="text-xl font-black text-green-600">ZMW <?php echo e(number_format($totalRepaid, 2)); ?></p>
            </div>
            <div class="bg-white p-5 rounded-2xl shadow-sm border border-gray-100 card-hover">
                <p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Interest Balance</p>
                <p class="text-xl font-black text-amber-600">ZMW <?php echo e(number_format($loanStats['total_interest'], 2)); ?></p>
            </div>
            <div class="bg-white p-5 rounded-2xl shadow-sm border border-zedbank-blue/20 card-hover bg-zedbank-blue/[0.02]">
                <p class="text-[10px] font-black text-zedbank-blue uppercase tracking-widest mb-1">Total Outstanding</p>
                <p class="text-xl font-black text-zedbank-blue">ZMW <?php echo e(number_format($totalOutstanding, 2)); ?></p>
            </div>
        </div>

        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden card-hover">
            <div class="p-6 border-b border-gray-50 flex justify-between items-center">
                <h2 class="text-xs font-black text-gray-400 uppercase tracking-widest">Active Loan Records</h2>
                <div class="text-xs font-bold text-zedbank-blue"><?php echo e($loans->total()); ?> Loans Found</div>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-100">
                    <thead class="bg-gray-50/50">
                        <tr class="text-gray-400 text-[10px] font-black uppercase tracking-widest">
                            <th class="px-6 py-4 text-left">Loan No</th>
                            <th class="px-6 py-4 text-left">Product</th>
                            <th class="px-6 py-4 text-left">Disbursed</th>
                            <th class="px-6 py-4 text-right">Principal Bal</th>
                            <th class="px-6 py-4 text-right">Interest Bal</th>
                            <th class="px-6 py-4 text-right">Total Due</th>
                            <th class="px-6 py-4 text-center">Status</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-50">
                        <?php $__empty_1 = true; $__currentLoopData = $loans; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $loan): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <tr class="hover:bg-gray-50/80 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap text-xs font-black text-gray-800"><?php echo e($loan->loannumber); ?></td>
                            <td class="px-6 py-4 whitespace-nowrap text-xs font-medium text-gray-500"><?php echo e($loan->loanType->product ?? 'Personal Loan'); ?></td>
                            <td class="px-6 py-4 whitespace-nowrap text-xs font-bold text-gray-400">
                                <?php echo e($loan->disburseddate ? \Carbon\Carbon::parse($loan->disburseddate)->format('d M, Y') : 'N/A'); ?>

                            </td>
                            <td class="px-6 py-4 text-right text-xs font-black text-red-500"><?php echo e(number_format($loan->principalbalance, 2)); ?></td>
                            <td class="px-6 py-4 text-right text-xs font-black text-amber-600"><?php echo e(number_format($loan->interestbalance, 2)); ?></td>
                            <td class="px-6 py-4 text-right text-xs font-black text-gray-900 bg-gray-50/30">
                                ZMW <?php echo e(number_format($loan->principalbalance + $loan->interestbalance + $loan->processing_fee_balance, 2)); ?>

                            </td>
                            <td class="px-6 py-4 text-center">
                                <span class="px-3 py-1 rounded-full font-black text-[9px] uppercase tracking-wider bg-green-100 text-green-700">
                                    <i class="fas fa-check-circle mr-1"></i> Active
                                </span>
                            </td>
                        </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <tr>
                            <td colspan="7" class="px-6 py-20 text-center">
                                <div class="flex flex-col items-center">
                                    <div class="w-16 h-16 bg-gray-50 rounded-full flex items-center justify-center mb-4">
                                        <i class="fas fa-hand-holding-usd text-3xl text-gray-200"></i>
                                    </div>
                                    <p class="text-sm font-black text-gray-300 uppercase tracking-widest">No active loans on record</p>
                                </div>
                            </td>
                        </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
            <?php if($loans->hasPages()): ?>
            <div class="p-4 border-t border-gray-50">
                <?php echo e($loans->links()); ?>

            </div>
            <?php endif; ?>
        </div>
    </main>
</div>

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

</body>
</html><?php /**PATH /home/topacvbu/public_html/zedbankos.cloud/customer-portal/resources/views/customer/loans/index.blade.php ENDPATH**/ ?>