<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Loans | IMMIA FINANCE LIMITED</title>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary: #1e40af;
            --primary-dark: #1e3a8a;
            --secondary: #0f172a;
            --accent: #06b6d4;
            --light: #f8fafc;
        }
        
        .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;
        }
        
        .progress-bar {
            transition: width 0.5s ease-in-out;
        }
    </style>
</head>
<body class="bg-gray-50">
   @php
    $customer = Auth::guard('customer')->user();
    // Fix the profile picture URL generation
    $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';
    @endphp

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

    <!-- Sidebar -->
    <div id="sidebar" class="sidebar fixed inset-y-0 left-0 z-40 w-64 bg-white shadow-lg">
        <!-- Logo -->
        <div class="p-6 border-b border-gray-200">
            <div class="flex items-center space-x-3">
                <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
                    <i class="fas fa-hand-holding-usd text-white text-lg"></i>
                </div>
                <div>
                    <h1 class="text-xl font-bold text-blue-600">IMMIA FINANCE</h1>
                    <p class="text-gray-500 text-xs">Client Portal</p>
                </div>
            </div>
        </div>
        
        <!-- Navigation -->
        <nav class="p-4 space-y-2">
            <a href="{{ route('customer.dashboard') }}" class="flex items-center space-x-3 p-3 text-gray-700 hover:bg-gray-100 rounded-lg font-medium">
                <i class="fas fa-tachometer-alt w-5"></i>
                <span>Dashboard</span>
            </a>
            <a href="{{ route('customer.applications.index') }}" class="flex items-center space-x-3 p-3 text-gray-700 hover:bg-gray-100 rounded-lg font-medium">
                <i class="fas fa-file-invoice-dollar w-5"></i>
                <span>My Applications</span>
                @if($applicationStats['active_applications_count'] ?? 0 > 0)
                <span class="ml-auto bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded-full">{{ $applicationStats['active_applications_count'] }}</span>
                @endif
            </a>
            <!-- Active My Loans Menu Item -->
            <a href="{{ route('customer.loans.index') }}" class="flex items-center space-x-3 p-3 bg-blue-50 text-blue-600 rounded-lg font-medium">
                <i class="fas fa-hand-holding-usd w-5"></i>
                <span>My Loans</span>
                @if($loanStats['active_loans_count'] > 0)
                <span class="ml-auto bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">{{ $loanStats['active_loans_count'] }}</span>
                @endif
            </a>
            <a href="{{ route('customer.loan.application.show') }}" class="flex items-center space-x-3 p-3 text-gray-700 hover:bg-gray-100 rounded-lg font-medium">
               <i class="fas fa-paper-plane w-5"></i>
               <span>Apply for Loan</span>
            </a>
            <a href="#" class="flex items-center space-x-3 p-3 text-gray-700 hover:bg-gray-100 rounded-lg font-medium">
                <i class="fas fa-money-bill-wave w-5"></i>
                <span>Make Payment</span>
            </a>
          <a href="{{ route('customer.transactions.history') }}" 
        class="flex items-center space-x-3 p-3 text-gray-700 hover:bg-gray-100 rounded-lg font-medium">
        <i class="fas fa-history w-5"></i>
        <span>Transaction History</span>
           </a>
            <a href="#" class="flex items-center space-x-3 p-3 text-gray-700 hover:bg-gray-100 rounded-lg font-medium">
                <i class="fas fa-file-alt w-5"></i>
                <span>Documents</span>
            </a>
            <a href="{{ route('customer.profile.show') }}" class="flex items-center space-x-3 p-3 text-gray-700 hover:bg-gray-100 rounded-lg font-medium">
                <i class="fas fa-user-cog w-5"></i>
                <span>Profile Settings</span>
            </a>
            <a href="#" class="flex items-center space-x-3 p-3 text-gray-700 hover:bg-gray-100 rounded-lg font-medium">
                <i class="fas fa-question-circle w-5"></i>
                <span>Help & Support</span>
            </a>
            <form method="POST" action="{{ route('customer.logout') }}" class="mt-8">
                @csrf
                <button type="submit" class="flex items-center space-x-3 p-3 text-gray-700 hover:bg-gray-100 rounded-lg font-medium w-full">
                    <i class="fas fa-sign-out-alt w-5"></i>
                    <span>Logout</span>
                </button>
            </form>
        </nav>
    </div>

    <!-- Main Content -->
    <div class="lg:ml-64">
        <!-- Top Bar -->
        <header class="bg-white shadow-sm border-b border-gray-200">
            <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-gray-900 text-truncate-safe">My Loans</h1>
                    <p class="text-gray-600 text-sm text-truncate-safe">Manage and track your active loans</p>
                </div>
                
                <div class="flex items-center space-x-2 sm:space-x-4">
                    <!-- Notifications -->
                    <div class="relative">
                        <button class="p-2 text-gray-600 hover:text-blue-600 relative">
                            <i class="fas fa-bell text-lg sm:text-xl"></i>
                            <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full notification-dot"></span>
                        </button>
                    </div>
                    
                    <!-- User Menu -->
                    <div class="relative">
                        <button class="flex items-center space-x-2 sm:space-x-3 p-2 rounded-lg hover:bg-gray-100">
                            <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center overflow-hidden">
                                @if($hasProfilePicture)
                                    <img src="{{ $profilePictureUrl }}" alt="Profile" class="w-full h-full object-cover">
                                @else
                                    <i class="fas fa-user text-blue-600 text-sm"></i>
                                @endif
                            </div>
                            <span class="text-gray-700 font-medium hidden sm:block">{{ $customer->customer }}</span>
                            <i class="fas fa-chevron-down text-gray-400 hidden sm:block"></i>
                        </button>
                    </div>
                </div>
            </div>
        </header>

        <!-- Main Content Area -->
        <main class="p-4 sm:p-6">
            <!-- Back Button -->
            <div class="mb-6">
                <a href="{{ route('customer.dashboard') }}" 
                   class="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Back to Dashboard
                </a>
            </div>

            <!-- Page Header -->
            <div class="mb-6 sm:mb-8">
                <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">My Loans</h1>
                <p class="text-gray-600 mt-2">Manage and track your active loans</p>
            </div>

            <!-- Loan Statistics -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 sm:gap-6 mb-6 sm:mb-8">
                <div class="bg-white rounded-xl p-4 sm:p-6 shadow-sm border card-hover">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-gray-600 text-sm">Active Loans</p>
                            <p class="text-xl sm:text-2xl font-bold text-green-600">{{ $loanStats['active_loans_count'] }}</p>
                        </div>
                        <div class="w-10 h-10 sm:w-12 sm:h-12 bg-green-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-hand-holding-usd text-green-600 text-lg sm:text-xl"></i>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl p-4 sm:p-6 shadow-sm border card-hover">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-gray-600 text-sm">Total Loan Amount</p>
                            <p class="text-xl sm:text-2xl font-bold text-blue-600">ZMW {{ number_format($loanStats['total_active_loan_amount'], 2) }}</p>
                        </div>
                        <div class="w-10 h-10 sm:w-12 sm:h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-money-bill-wave text-blue-600 text-lg sm:text-xl"></i>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl p-4 sm:p-6 shadow-sm border card-hover">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-gray-600 text-sm">Collection Progress</p>
                            <p class="text-xl sm:text-2xl font-bold text-purple-600">{{ $loanStats['average_collection_progress'] }}%</p>
                        </div>
                        <div class="w-10 h-10 sm:w-12 sm:h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-chart-line text-purple-600 text-lg sm:text-xl"></i>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 sm:p-6 shadow-sm border card-hover">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-gray-600 text-sm">Outstanding Balance</p>
                            <p class="text-xl sm:text-2xl font-bold text-orange-600">ZMW {{ number_format($loanStats['total_outstanding_balance'], 2) }}</p>
                        </div>
                        <div class="w-10 h-10 sm:w-12 sm:h-12 bg-orange-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-scale-balanced text-orange-600 text-lg sm:text-xl"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Loans List -->
            <div class="bg-white rounded-xl shadow-sm border">
                <div class="p-4 sm:p-6 border-b border-gray-200">
                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                        <div>
                            <h2 class="text-lg sm:text-xl font-bold text-gray-900">Active Loans</h2>
                            <p class="text-gray-600 text-sm">Your currently active loan accounts</p>
                        </div>
                        <div class="mt-4 sm:mt-0">
                            <div class="flex items-center space-x-2 text-sm">
                                <span class="text-gray-600">Total Repaid:</span>
                                <span class="font-semibold text-green-600">ZMW {{ number_format($loanStats['total_actual_repayment'], 2) }}</span>
                            </div>
                            @if($loanStats['overdue_loans_count'] > 0)
                            <div class="flex items-center space-x-2 text-sm mt-1">
                                <i class="fas fa-exclamation-triangle text-red-500"></i>
                                <span class="text-red-600">{{ $loanStats['overdue_loans_count'] }} loan(s) overdue</span>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
                
                <div class="p-4 sm:p-6">
                    @if($activeLoans->count() > 0)
                    <div class="space-y-4 sm:space-y-6">
                        @foreach($activeLoans as $loan)
                        @php
                            $totalRepayment = $loan->getTotalRepaymentAttribute();
                            $collectionProgress = $loan->getCollectionProgressAttribute();
                            $outstandingBalance = $loan->getOutstandingBalanceAttribute();
                        @endphp
                        <div class="border border-gray-200 rounded-lg p-4 sm:p-6 card-hover">
                            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4">
                                <div class="mb-4 sm:mb-0">
                                    <h3 class="text-lg sm:text-xl font-semibold text-gray-900">
                                        {{ $loan->product ?? $loan->loanProduct->product ?? 'Loan' }}
                                    </h3>
                                    <p class="text-gray-600 text-sm">Loan #{{ $loan->loannumber ?? $loan->loanid }}</p>
                                    
                                    <!-- Show overdue status -->
                                    @if($loan->is_overdue)
                                    <div class="flex items-center mt-1 text-red-600 text-sm">
                                        <i class="fas fa-exclamation-triangle mr-1"></i>
                                        <span>Overdue by {{ $loan->days_overdue }} days</span>
                                    </div>
                                    @endif
                                </div>
                                <div class="text-right">
                                    <p class="text-xl sm:text-2xl font-bold text-green-600">
                                        ZMW {{ number_format($loan->amount, 2) }}
                                    </p>
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
                                        {{ ucfirst($loan->status) }}
                                    </span>
                                </div>
                            </div>
                            
                            <!-- Enhanced Loan Details Grid -->
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
                                <div>
                                    <p class="text-gray-600 text-sm">Interest Rate</p>
                                    <p class="font-semibold text-gray-900">{{ $loan->rate }}%</p>
                                </div>
                                <div>
                                    <p class="text-gray-600 text-sm">Duration</p>
                                    <p class="font-semibold text-gray-900">{{ $loan->duration }} months</p>
                                </div>
                                <div>
                                    <p class="text-gray-600 text-sm">Outstanding Balance</p>
                                    <p class="font-semibold text-orange-600">ZMW {{ number_format($outstandingBalance, 2) }}</p>
                                </div>
                                <div>
                                    <p class="text-gray-600 text-sm">Total Repaid</p>
                                    <p class="font-semibold text-green-600">ZMW {{ number_format($loan->total_repaid, 2) }}</p>
                                </div>
                            </div>

                            <!-- Additional Loan Details -->
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                                <div>
                                    <p class="text-gray-600 text-sm">Disbursed Date</p>
                                    <p class="font-semibold text-gray-900">
                                        @if($loan->disburseddate)
                                            {{ \Carbon\Carbon::parse($loan->disburseddate)->format('M d, Y') }}
                                        @else
                                            N/A
                                        @endif
                                    </p>
                                </div>
                                <div>
                                    <p class="text-gray-600 text-sm">Maturity Date</p>
                                    <p class="font-semibold text-gray-900">
                                        @if($loan->maturitydate)
                                            {{ \Carbon\Carbon::parse($loan->maturitydate)->format('M d, Y') }}
                                        @else
                                            N/A
                                        @endif
                                    </p>
                                </div>
                            </div>
                            
                            <!-- Enhanced Collection Progress -->
                            <div class="mt-4">
                                <div class="flex justify-between text-sm text-gray-600 mb-2">
                                    <span>Collection Progress</span>
                                    <span>{{ $collectionProgress }}% (ZMW {{ number_format($loan->total_repaid, 2) }} of ZMW {{ number_format($totalRepayment, 2) }})</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-3">
                                    <div class="bg-green-600 h-3 rounded-full progress-bar" style="width: {{ $collectionProgress }}%"></div>
                                </div>
                                <div class="flex justify-between text-xs text-gray-500 mt-2">
                                    <span>Principal: ZMW {{ number_format($loan->principal_repaid, 2) }}</span>
                                    <span>Interest: ZMW {{ number_format($loan->interest_repaid, 2) }}</span>
                                </div>
                            </div>
                            
                            <!-- Action Buttons -->
                            <div class="mt-4 flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3">
                                <a href="{{ route('customer.loans.show', $loan->loanid) }}" 
                                   class="inline-flex items-center justify-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium">
                                    <i class="fas fa-eye mr-2"></i>
                                    View Details
                                </a>
                                <button class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">
                                    <i class="fas fa-file-invoice-dollar mr-2"></i>
                                    Make Payment
                                </button>
                                <button class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">
                                    <i class="fas fa-file-pdf mr-2"></i>
                                    Statement
                                </button>
                                @if($loan->is_overdue)
                                <span class="inline-flex items-center justify-center px-3 py-2 bg-red-100 text-red-800 rounded-lg text-sm font-medium">
                                    <i class="fas fa-clock mr-2"></i>
                                    Overdue
                                </span>
                                @endif
                            </div>
                        </div>
                        @endforeach
                    </div>
                    
                    <!-- Pagination -->
                    @if($activeLoans->hasPages())
                    <div class="mt-6">
                        {{ $activeLoans->links() }}
                    </div>
                    @endif
                    
                    @else
                    <div class="text-center py-12">
                        <i class="fas fa-hand-holding-usd text-4xl text-gray-300 mb-4"></i>
                        <h3 class="text-lg font-semibold text-gray-900 mb-2">No Active Loans</h3>
                        <p class="text-gray-600 mb-6">You don't have any active loans at the moment.</p>
                        <div class="space-y-4 sm:space-y-0 sm:space-x-4 sm:flex sm:justify-center">
                            <a href="{{ route('customer.loan.application.show') }}" 
                               class="inline-flex items-center justify-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-semibold">
                                <i class="fas fa-paper-plane mr-2"></i>
                                Apply for a Loan
                            </a>
                            <a href="{{ route('customer.applications.index') }}" 
                               class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors font-semibold">
                                <i class="fas fa-file-invoice-dollar mr-2"></i>
                                View Applications
                            </a>
                        </div>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Additional Information Section -->
            @if($activeLoans->count() > 0)
            <div class="mt-6 sm:mt-8 grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- Loan Summary -->
                <div class="bg-white rounded-xl shadow-sm border p-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">Loan Portfolio Summary</h3>
                    <div class="space-y-3">
                        <div class="flex justify-between">
                            <span class="text-gray-600">Total Loans</span>
                            <span class="font-semibold">{{ $loanStats['active_loans_count'] }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Total Amount Disbursed</span>
                            <span class="font-semibold">ZMW {{ number_format($loanStats['total_active_loan_amount'], 2) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Total Amount Repaid</span>
                            <span class="font-semibold text-green-600">ZMW {{ number_format($loanStats['total_actual_repayment'], 2) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Outstanding Balance</span>
                            <span class="font-semibold text-orange-600">ZMW {{ number_format($loanStats['total_outstanding_balance'], 2) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Average Collection Progress</span>
                            <span class="font-semibold text-purple-600">{{ $loanStats['average_collection_progress'] }}%</span>
                        </div>
                    </div>
                </div>

                <!-- Quick Actions -->
                <div class="bg-white rounded-xl shadow-sm border p-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">Quick Actions</h3>
                    <div class="space-y-3">
                        <a href="{{ route('customer.loan.application.show') }}" 
                           class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition-colors">
                            <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                                <i class="fas fa-paper-plane text-blue-600"></i>
                            </div>
                            <div>
                                <p class="font-medium text-gray-900">Apply for New Loan</p>
                                <p class="text-gray-600 text-sm">Submit a new loan application</p>
                            </div>
                        </a>
                        <button class="w-full flex items-center p-3 border border-gray-200 rounded-lg hover:border-green-500 hover:bg-green-50 transition-colors">
                            <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3">
                                <i class="fas fa-file-invoice-dollar text-green-600"></i>
                            </div>
                            <div>
                                <p class="font-medium text-gray-900">Make Payment</p>
                                <p class="text-gray-600 text-sm">Pay your loan balance</p>
                            </div>
                        </button>
                        <a href="{{ route('customer.dashboard') }}" 
                           class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-purple-500 hover:bg-purple-50 transition-colors">
                            <div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
                                <i class="fas fa-tachometer-alt text-purple-600"></i>
                            </div>
                            <div>
                                <p class="font-medium text-gray-900">Back to Dashboard</p>
                                <p class="text-gray-600 text-sm">Return to main dashboard</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            @endif
        </main>
    </div>

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

        // Close sidebar when clicking outside on mobile
        document.addEventListener('click', function(event) {
            const sidebar = document.getElementById('sidebar');
            const mobileButton = document.getElementById('mobile-menu-button');
            
            if (window.innerWidth < 1024 && 
                !sidebar.contains(event.target) && 
                !mobileButton.contains(event.target)) {
                sidebar.classList.remove('active');
            }
        });

        // Handle window resize
        window.addEventListener('resize', function() {
            if (window.innerWidth >= 1024) {
                document.getElementById('sidebar').classList.remove('active');
            }
        });

        // Simple progress bar animation
        document.addEventListener('DOMContentLoaded', function() {
            const progressBars = document.querySelectorAll('.progress-bar');
            progressBars.forEach(bar => {
                const width = bar.style.width;
                bar.style.width = '0';
                setTimeout(() => {
                    bar.style.width = width;
                }, 100);
            });
        });

        // Simulate real-time updates for notification dot
        setInterval(() => {
            const dot = document.querySelector('.notification-dot');
            if (dot) {
                dot.style.animation = 'none';
                setTimeout(() => {
                    dot.style.animation = 'pulse 2s infinite';
                }, 10);
            }
        }, 5000);
    </script>
</body>
</html>