<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Settings | 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; }
        @media (max-width: 768px) {
            .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
        $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';
    ?>

    <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 z-40 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">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-zedbank-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-zedbank-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-zedbank-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-zedbank-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-zedbank-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 hover:bg-zedbank-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-zedbank-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 bg-zedbank-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-zedbank-blue shadow-sm border-b border-zedbank-blue-dark">
            <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">Profile Settings</h1>
                    <p class="text-blue-50 text-sm text-truncate-safe">Personal Identification & Account Data</p>
                </div>
                
                <div class="flex items-center space-x-4">
                    <div class="relative">
                        <button class="p-2 text-white hover:bg-zedbank-blue-dark rounded-full 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-lg bg-zedbank-blue-dark text-white">
                        <div class="w-8 h-8 rounded-full overflow-hidden border border-white">
                            <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>
            </div>
        </header>

        <main class="p-4 sm:p-6 space-y-6">
            <div class="max-w-5xl mx-auto space-y-6">
                
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden card-hover">
                    <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex items-center gap-2">
                        <i class="fas fa-user-circle text-zedbank-blue"></i>
                        <h3 class="text-sm font-bold text-gray-800 uppercase tracking-widest">Personal & Contact Info</h3>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
                            <div><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">Title</label><p class="text-sm font-bold text-gray-900"><?php echo e($customer->title ?? '—'); ?></p></div>
                            <div><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">First Name</label><p class="text-sm font-bold text-gray-900"><?php echo e($customer->first_name); ?></p></div>
                            <div><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">Middle Name</label><p class="text-sm font-bold text-gray-900"><?php echo e($customer->middle_name ?? '—'); ?></p></div>
                            <div><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">Surname</label><p class="text-sm font-bold text-gray-900"><?php echo e($customer->surname); ?></p></div>
                            <div><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">Date of Birth</label><p class="text-sm font-bold text-gray-900"><?php echo e($customer->dob ? $customer->dob->format('d M, Y') : '—'); ?></p></div>
                            <div><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">ID Type</label><p class="text-sm font-bold text-gray-900 uppercase"><?php echo e($customer->idtype ?? 'NRC'); ?></p></div>
                            <div><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">ID Number</label><p class="text-sm font-bold text-gray-900"><?php echo e($customer->number); ?></p></div>
                            <div><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">T-PIN</label><p class="text-sm font-bold text-gray-900"><?php echo e($customer->tpin); ?></p></div>
                        </div>
                        <div class="pt-6 border-t border-gray-50 grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">Email</label><p class="text-sm font-bold text-gray-900 lowercase"><?php echo e($customer->email); ?></p></div>
                            <div><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">Primary Phone</label><p class="text-sm font-bold text-gray-900"><?php echo e($customer->phone); ?></p></div>
                            <div><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">Office Phone</label><p class="text-sm font-bold text-gray-900"><?php echo e($customer->office_phone ?? '—'); ?></p></div>
                            <div><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">Town</label><p class="text-sm font-bold text-gray-900 uppercase"><?php echo e($customer->town); ?></p></div>
                            <div><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">Province</label><p class="text-sm font-bold text-gray-900 uppercase"><?php echo e($customer->province); ?></p></div>
                            <div class="md:col-span-3"><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">Physical Address</label><p class="text-sm font-bold text-gray-900 uppercase"><?php echo e($customer->address); ?></p></div>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden card-hover">
                    <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex items-center gap-2">
                        <i class="fas fa-heart text-red-600"></i>
                        <h3 class="text-sm font-bold text-gray-800 uppercase tracking-widest">Next of Kin Details</h3>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                            <div><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">First Name</label><p class="text-sm font-bold text-gray-900"><?php echo e($customer->nok_first_name ?? '—'); ?></p></div>
                            <div><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">Surname</label><p class="text-sm font-bold text-gray-900"><?php echo e($customer->nok_surname ?? '—'); ?></p></div>
                            <div><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">Mobile Phone</label><p class="text-sm font-bold text-gray-900"><?php echo e($customer->nok_mobile_phone ?? '—'); ?></p></div>
                            <div><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">Telephone</label><p class="text-sm font-bold text-gray-900"><?php echo e($customer->nok_telephone ?? $customer->nok_phone ?? '—'); ?></p></div>
                            <div class="md:col-span-2"><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">Email Address</label><p class="text-sm font-bold text-gray-900"><?php echo e($customer->nok_email ?? '—'); ?></p></div>
                            <div><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">Town</label><p class="text-sm font-bold text-gray-900 uppercase"><?php echo e($customer->nok_town ?? '—'); ?></p></div>
                            <div><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">Province</label><p class="text-sm font-bold text-gray-900 uppercase"><?php echo e($customer->nok_province ?? '—'); ?></p></div>
                            <div class="md:col-span-2"><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">Physical Address</label><p class="text-sm font-bold text-gray-900 uppercase"><?php echo e($customer->nok_physical_address ?? '—'); ?></p></div>
                            <div class="md:col-span-2"><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">Postal Address</label><p class="text-sm font-bold text-gray-900 uppercase"><?php echo e($customer->nok_postal_address ?? '—'); ?></p></div>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden card-hover">
                    <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex items-center gap-2">
                        <i class="fas fa-briefcase text-zedbank-blue"></i>
                        <h3 class="text-sm font-bold text-gray-800 uppercase tracking-widest">Work Information</h3>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                            <div class="md:col-span-2"><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">Employer Name</label><p class="text-sm font-bold text-gray-900 uppercase"><?php echo e($customer->employer_name ?? '—'); ?></p></div>
                            <div><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">Job Title</label><p class="text-sm font-bold text-gray-900 uppercase"><?php echo e($customer->job_title ?? '—'); ?></p></div>
                            <div><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">Employee Number</label><p class="text-sm font-bold text-gray-900 uppercase"><?php echo e($customer->employee_no ?? '—'); ?></p></div>
                            <div><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">Employment Type</label><p class="text-sm font-bold text-gray-900 uppercase"><?php echo e($customer->employment_type ?? 'Permanent'); ?></p></div>
                            <div><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">Years in Employment</label><p class="text-sm font-bold text-gray-900"><?php echo e($customer->years_in_employment ?? '0'); ?></p></div>
                            <div><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">Retirement Year</label><p class="text-sm font-bold text-gray-900"><?php echo e($customer->retirement_year ?? '—'); ?></p></div>
                            <div><label class="text-[10px] text-red-500 font-black uppercase tracking-tighter">Contract Expiry</label><p class="text-sm font-bold text-red-600"><?php echo e($customer->contract_expiry_date ? $customer->contract_expiry_date->format('d M, Y') : 'N/A'); ?></p></div>
                            
                            <div class="md:col-span-2"><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">Employer Town</label><p class="text-sm font-bold text-gray-900 uppercase"><?php echo e($customer->employer_town ?? '—'); ?></p></div>
                            <div class="md:col-span-2"><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">Employer Province</label><p class="text-sm font-bold text-gray-900 uppercase"><?php echo e($customer->employer_province ?? '—'); ?></p></div>
                            <div class="md:col-span-4"><label class="text-[10px] text-gray-400 font-black uppercase tracking-tighter">Employer Physical Address</label><p class="text-sm font-bold text-gray-900 uppercase"><?php echo e($customer->employer_address ?? '—'); ?></p></div>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden card-hover">
                    <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center">
                        <div class="flex items-center gap-2">
                            <i class="fas fa-exchange-alt text-zedbank-blue"></i>
                            <h3 class="text-sm font-bold text-gray-800 uppercase tracking-widest">Transaction History</h3>
                        </div>
                        <span class="text-[9px] bg-gray-100 text-gray-500 px-2 py-1 rounded font-black uppercase tracking-widest">Unified Ledger</span>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="min-w-full text-xs">
                            <thead class="bg-gray-50/50 border-b">
                                <tr class="text-gray-400 font-black uppercase tracking-tighter">
                                    <th class="px-6 py-4 text-left">Date</th>
                                    <th class="px-6 py-4 text-left">Type</th>
                                    <th class="px-6 py-4 text-left">Reference</th>
                                    <th class="px-6 py-4 text-left">Amount</th>
                                    <th class="px-6 py-4 text-left">Status</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100">
                                <?php $__empty_1 = true; $__currentLoopData = $allTransactions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $tx): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                <tr class="hover:bg-gray-50/50 transition-colors">
                                    <td class="px-6 py-4 font-bold text-gray-600"><?php echo e($tx->tx_date ? $tx->tx_date->format('d M, Y') : '—'); ?></td>
                                    <td class="px-6 py-4">
                                        <span class="px-2 py-0.5 rounded text-[9px] font-black uppercase tracking-widest <?php echo e($tx->tx_type === 'Disbursement' ? 'bg-blue-100 text-blue-700' : 'bg-green-100 text-green-700'); ?>">
                                            <?php echo e($tx->tx_type); ?>

                                        </span>
                                    </td>
                                    <td class="px-6 py-4 text-gray-500 font-mono"><?php echo e($tx->loannumber ?? 'N/A'); ?></td>
                                    <td class="px-6 py-4 font-black <?php echo e($tx->tx_type === 'Disbursement' ? 'text-blue-600' : 'text-green-600'); ?>">
                                        <?php echo e($tx->tx_type === 'Disbursement' ? '-' : '+'); ?> ZMW <?php echo e(number_format($tx->tx_amount, 2)); ?>

                                    </td>
                                    <td class="px-6 py-4">
                                        <span class="px-2 py-0.5 bg-gray-100 text-gray-500 rounded text-[9px] font-bold uppercase"><?php echo e($tx->status ?? 'COMPLETED'); ?></span>
                                    </td>
                                </tr>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                <tr>
                                    <td colspan="5" class="px-6 py-12 text-center text-gray-400 italic font-medium">No transactions recorded yet.</td>
                                </tr>
                                <?php endif; ?>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden card-hover">
                    <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50">
                        <div class="flex items-center gap-2">
                            <i class="fas fa-history text-zedbank-blue"></i>
                            <h3 class="text-sm font-bold text-gray-800 uppercase tracking-widest">Communication Audit</h3>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="space-y-4">
                            <?php $__empty_1 = true; $__currentLoopData = $allMessages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $msg): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                            <div class="flex items-start gap-4 p-4 rounded-xl border border-gray-50 bg-gray-50/50">
                                <div class="w-10 h-10 flex-shrink-0 flex items-center justify-center rounded-lg bg-white border border-gray-200">
                                    <i class="fas fa-comment-dots text-zedbank-blue"></i>
                                </div>
                                <div class="flex-1">
                                    <div class="flex justify-between items-center mb-1">
                                        <span class="text-[9px] font-black uppercase text-zedbank-blue tracking-widest"><?php echo e($msg->category); ?></span>
                                        <span class="text-[9px] text-gray-400 font-bold uppercase"><?php echo e($msg->created_at->format('d M, Y')); ?></span>
                                    </div>
                                    <p class="text-sm text-gray-600 font-medium leading-relaxed"><?php echo e($msg->message); ?></p>
                                </div>
                            </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                            <div class="text-center py-10 opacity-30">
                                <i class="fas fa-comment-slash text-2xl mb-2 text-gray-300"></i>
                                <p class="text-[10px] font-black uppercase tracking-widest">No recent messages</p>
                            </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>

            </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/profile.blade.php ENDPATH**/ ?>