<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apply for Loan | 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">
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    
    <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;
        }

        .prefilled-field {
            background-color: #f8fafc;
            border-color: #e2e8f0;
            color: #64748b;
            cursor: not-allowed;
        }

        .form-section {
            transition: all 0.3s ease;
        }

        .loading-spinner {
            display: none;
        }

        .loading-spinner.active {
            display: inline-block;
        }
    </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';
    @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>
            </a>
            <a href="{{ route('customer.loan.application.show') }}" class="flex items-center space-x-3 p-3 bg-blue-50 text-blue-600 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">Loan Application</h1>
                    <p class="text-gray-600 text-sm text-truncate-safe">Complete the form below to apply for a new loan</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">
            <!-- Debug Information -->
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
                <div class="flex items-start space-x-3">
                    <i class="fas fa-info-circle text-blue-600 mt-1"></i>
                    <div>
                        <h4 class="font-semibold text-blue-800">Form Information</h4>
                        <p class="text-blue-700 text-sm mt-1">
                            Route: <code>{{ route('customer.loan.application.submit') }}</code><br>
                            Method: POST | CSRF: {{ csrf_token() ? '✅ Present' : '❌ Missing' }}
                        </p>
                    </div>
                </div>
            </div>

            @if($errors->any())
                <div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
                    <div class="flex items-start space-x-3">
                        <i class="fas fa-exclamation-triangle text-red-600 mt-1"></i>
                        <div>
                            <h4 class="font-semibold text-red-800">Please fix the following errors:</h4>
                            <ul class="text-red-700 text-sm mt-1 list-disc list-inside">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            @endif

            @if(session('success'))
                <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
                    <div class="flex items-start space-x-3">
                        <i class="fas fa-check-circle text-green-600 mt-1"></i>
                        <div>
                            <h4 class="font-semibold text-green-800">Success!</h4>
                            <p class="text-green-700 text-sm mt-1">{{ session('success') }}</p>
                        </div>
                    </div>
                </div>
            @endif

            @if(session('error'))
                <div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
                    <div class="flex items-start space-x-3">
                        <i class="fas fa-exclamation-circle text-red-600 mt-1"></i>
                        <div>
                            <h4 class="font-semibold text-red-800">Error!</h4>
                            <p class="text-red-700 text-sm mt-1">{{ session('error') }}</p>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Customer Info -->
            <div class="flex items-center gap-4 mb-8 p-4 bg-gray-50 rounded-lg">
                <div class="relative">
                    <img
                        src="{{ $profilePictureUrl }}"
                        alt="Profile"
                        class="w-16 h-16 rounded-full object-cover border-4 border-gray-200 shadow-sm"
                    />
                </div>
                <div>
                    <p class="text-sm text-gray-500">Applicant</p>
                    <p class="text-gray-700 font-medium">{{ $customer->full_name ?? $customer->customer }}</p>
                    <p class="text-sm text-gray-600">{{ $customer->email }} • {{ $customer->phone }}</p>
                    <p class="text-xs text-blue-600 font-medium mt-1">Customer No: {{ $customer->customer_number ?? 'N/A' }}</p>
                </div>
            </div>

            <!-- Auto-filled Notice -->
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
                <div class="flex items-start space-x-3">
                    <i class="fas fa-info-circle text-blue-600 mt-1"></i>
                    <div>
                        <h4 class="font-semibold text-blue-800">Auto-filled Information</h4>
                        <p class="text-blue-700 text-sm mt-1">
                            Your personal information has been pre-filled from your profile. Please review and update any information that may have changed.
                        </p>
                    </div>
                </div>
            </div>

            <!-- Loan Application Form -->
            <form id="loanApplicationForm" action="{{ route('customer.loan.application.submit') }}" method="POST" class="space-y-8">
                @csrf
                
                <!-- PART 1: Applicant Details Card -->
                <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 form-section">
                    <h3 class="text-xl font-semibold text-gray-800 mb-2">Applicant Details</h3>
                    <p class="text-gray-600 mb-6">Your personal information (pre-filled from your profile)</p>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Title -->
                        <div>
                            <label for="title" class="block text-sm font-medium text-gray-700 mb-1">Title</label>
                            <select id="title" name="title" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors prefilled-field" required readonly>
                                <option value="">Select Title</option>
                                <option value="Dr" {{ old('title', $customer->title) == 'Dr' ? 'selected' : '' }}>Dr</option>
                                <option value="Prof" {{ old('title', $customer->title) == 'Prof' ? 'selected' : '' }}>Prof</option>
                                <option value="Mr" {{ old('title', $customer->title) == 'Mr' ? 'selected' : '' }}>Mr</option>
                                <option value="Mrs" {{ old('title', $customer->title) == 'Mrs' ? 'selected' : '' }}>Mrs</option>
                                <option value="Miss" {{ old('title', $customer->title) == 'Miss' ? 'selected' : '' }}>Miss</option>
                            </select>
                            <p class="text-xs text-gray-500 mt-1">From your profile</p>
                        </div>

                        <!-- Surname -->
                        <div>
                            <label for="surname" class="block text-sm font-medium text-gray-700 mb-1">Surname</label>
                            <input type="text" id="surname" name="surname" value="{{ old('surname', $customer->surname) }}" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors prefilled-field" required readonly>
                            <p class="text-xs text-gray-500 mt-1">From your profile</p>
                        </div>

                        <!-- First Name -->
                        <div>
                            <label for="first_name" class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
                            <input type="text" id="first_name" name="first_name" value="{{ old('first_name', $customer->first_name) }}" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors prefilled-field" required readonly>
                            <p class="text-xs text-gray-500 mt-1">From your profile</p>
                        </div>

                        <!-- Middle Name -->
                        <div>
                            <label for="middle_name" class="block text-sm font-medium text-gray-700 mb-1">Middle Name</label>
                            <input type="text" id="middle_name" name="middle_name" value="{{ old('middle_name', $customer->middle_name) }}" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors prefilled-field" readonly>
                            <p class="text-xs text-gray-500 mt-1">From your profile</p>
                        </div>

                        <!-- Date of Birth -->
                        <div>
                            <label for="date_of_birth" class="block text-sm font-medium text-gray-700 mb-1">Date of Birth</label>
                            <input type="date" id="date_of_birth" name="date_of_birth" value="{{ old('date_of_birth', $customer->dob ? $customer->dob->format('Y-m-d') : '') }}" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors prefilled-field" required readonly>
                            <p class="text-xs text-gray-500 mt-1">From your profile</p>
                        </div>

                        <!-- NRC Number -->
                        <div>
                            <label for="nrc_number" class="block text-sm font-medium text-gray-700 mb-1">NRC Number</label>
                            <input type="text" id="nrc_number" name="nrc_number" value="{{ old('nrc_number', $customer->number) }}" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors prefilled-field" required readonly>
                            <p class="text-xs text-gray-500 mt-1">From your profile</p>
                        </div>

                        <!-- Email -->
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                            <input type="email" id="email" name="email" value="{{ old('email', $customer->email) }}" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors prefilled-field" required readonly>
                            <p class="text-xs text-gray-500 mt-1">From your profile</p>
                        </div>

                        <!-- Mobile Number -->
                        <div>
                            <label for="mobile_number" class="block text-sm font-medium text-gray-700 mb-1">Mobile Number</label>
                            <input type="tel" id="mobile_number" name="mobile_number" value="{{ old('mobile_number', $customer->phone) }}" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors prefilled-field" required readonly>
                            <p class="text-xs text-gray-500 mt-1">From your profile</p>
                        </div>

                        <!-- Office Telephone -->
                        <div>
                            <label for="office_phone" class="block text-sm font-medium text-gray-700 mb-1">Office Telephone</label>
                            <input type="tel" id="office_phone" name="office_phone" value="{{ old('office_phone', $customer->office_phone) }}" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors prefilled-field" readonly>
                            <p class="text-xs text-gray-500 mt-1">From your profile</p>
                        </div>

                        <!-- Bank Branch -->
                        <div>
                            <label for="bank_branch" class="block text-sm font-medium text-gray-700 mb-1">Bank Branch *</label>
                            <input type="text" id="bank_branch" name="bank_branch" value="{{ old('bank_branch') }}" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors" required placeholder="Enter bank branch name">
                            @error('bank_branch')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Account Number -->
                        <div>
                            <label for="account_number" class="block text-sm font-medium text-gray-700 mb-1">Account Number *</label>
                            <input type="text" id="account_number" name="account_number" value="{{ old('account_number') }}" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors" required placeholder="Enter your account number">
                            @error('account_number')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Years in Employment -->
                        <div>
                            <label for="employment_years" class="block text-sm font-medium text-gray-700 mb-1">Years in Employment *</label>
                            <input type="number" id="employment_years" name="employment_years" value="{{ old('employment_years') }}" min="0" max="50"
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors" required placeholder="Enter years">
                            @error('employment_years')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Employee Number -->
                        <div>
                            <label for="employee_number" class="block text-sm font-medium text-gray-700 mb-1">Employee Number</label>
                            <input type="text" id="employee_number" name="employee_number" value="{{ old('employee_number') }}" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors" placeholder="Enter employee number">
                        </div>

                        <!-- Year of Retirement -->
                        <div>
                            <label for="retirement_year" class="block text-sm font-medium text-gray-700 mb-1">Year of Retirement</label>
                            <input type="number" id="retirement_year" name="retirement_year" value="{{ old('retirement_year') }}" min="{{ date('Y') }}" max="{{ date('Y') + 50 }}"
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors" placeholder="Enter retirement year">
                        </div>

                        <!-- Physical Address -->
                        <div class="md:col-span-2">
                            <label for="physical_address" class="block text-sm font-medium text-gray-700 mb-1">Physical Address</label>
                            <textarea id="physical_address" name="physical_address" rows="2" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors prefilled-field" required readonly>{{ old('physical_address', $customer->address) }}</textarea>
                            <p class="text-xs text-gray-500 mt-1">From your profile</p>
                        </div>

                        <!-- Postal Address -->
                        <div class="md:col-span-2">
                            <label for="postal_address" class="block text-sm font-medium text-gray-700 mb-1">Postal Address *</label>
                            <textarea id="postal_address" name="postal_address" rows="2" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors" required placeholder="Enter your postal address">{{ old('postal_address', $customer->address) }}</textarea>
                            @error('postal_address')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Town -->
                        <div>
                            <label for="town" class="block text-sm font-medium text-gray-700 mb-1">Town</label>
                            <input type="text" id="town" name="town" value="{{ old('town', $customer->town) }}" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors prefilled-field" required readonly>
                            <p class="text-xs text-gray-500 mt-1">From your profile</p>
                        </div>

                        <!-- Province -->
                        <div>
                            <label for="province" class="block text-sm font-medium text-gray-700 mb-1">Province</label>
                            <input type="text" id="province" name="province" value="{{ old('province', $customer->province) }}" 
                                class="w-full border border-gray-300 rounded-lg px-3py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors prefilled-field" required readonly>
                            <p class="text-xs text-gray-500 mt-1">From your profile</p>
                        </div>
                    </div>
                </div>

                <!-- PART 2: Employment Details Card -->
                <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 form-section">
                    <h3 class="text-xl font-semibold text-gray-800 mb-2">Employment Details</h3>
                    <p class="text-gray-600 mb-6">Your current employment information</p>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Job Title -->
                        <div>
                            <label for="job_title" class="block text-sm font-medium text-gray-700 mb-1">Job Title *</label>
                            <input type="text" id="job_title" name="job_title" value="{{ old('job_title', $customer->occupation) }}" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors" required placeholder="Enter your job title">
                            @error('job_title')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Employer Name -->
                        <div>
                            <label for="employer_name" class="block text-sm font-medium text-gray-700 mb-1">Employer's Name *</label>
                            <input type="text" id="employer_name" name="employer_name" value="{{ old('employer_name', $customer->company) }}" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors" required placeholder="Enter employer's name">
                            @error('employer_name')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Gross Salary -->
                        <div>
                            <label for="gross_salary" class="block text-sm font-medium text-gray-700 mb-1">Gross Salary (ZMW) *</label>
                            <input type="number" id="gross_salary" name="gross_salary" value="{{ old('gross_salary', $customer->income) }}" step="0.01" min="0"
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors" required placeholder="Enter gross salary">
                            @error('gross_salary')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Net Salary -->
                        <div>
                            <label for="net_salary" class="block text-sm font-medium text-gray-700 mb-1">Net Salary (ZMW) *</label>
                            <input type="number" id="net_salary" name="net_salary" value="{{ old('net_salary') }}" step="0.01" min="0"
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors" required placeholder="Enter net salary">
                            @error('net_salary')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Employment Type -->
                        <div>
                            <label for="employment_type" class="block text-sm font-medium text-gray-700 mb-1">Employment Type *</label>
                            <select id="employment_type" name="employment_type" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors" required>
                                <option value="">Select Employment Type</option>
                                <option value="permanent" {{ old('employment_type') == 'permanent' ? 'selected' : '' }}>Permanent Employment</option>
                                <option value="contract" {{ old('employment_type') == 'contract' ? 'selected' : '' }}>Contract Employment</option>
                            </select>
                            @error('employment_type')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Contract Expiry Date -->
                        <div id="contract_expiry_container" class="{{ old('employment_type') == 'contract' ? '' : 'hidden' }}">
                            <label for="contract_expiry_date" class="block text-sm font-medium text-gray-700 mb-1">Contract Expiry Date *</label>
                            <input type="date" id="contract_expiry_date" name="contract_expiry_date" value="{{ old('contract_expiry_date') }}" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors" {{ old('employment_type') == 'contract' ? 'required' : '' }}>
                            @error('contract_expiry_date')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Employer Physical Address -->
                        <div class="md:col-span-2">
                            <label for="employer_physical_address" class="block text-sm font-medium text-gray-700 mb-1">Employer Physical Address *</label>
                            <textarea id="employer_physical_address" name="employer_physical_address" rows="2" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors" required placeholder="Enter employer's physical address">{{ old('employer_physical_address') }}</textarea>
                            @error('employer_physical_address')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Employer Postal Address -->
                        <div class="md:col-span-2">
                            <label for="employer_postal_address" class="block text-sm font-medium text-gray-700 mb-1">Employer Postal Address *</label>
                            <textarea id="employer_postal_address" name="employer_postal_address" rows="2" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors" required placeholder="Enter employer's postal address">{{ old('employer_postal_address') }}</textarea>
                            @error('employer_postal_address')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Employer Town/Province -->
                        <div class="md:col-span-2">
                            <label for="employer_town_province" class="block text-sm font-medium text-gray-700 mb-1">Employer Town/Province *</label>
                            <input type="text" id="employer_town_province" name="employer_town_province" value="{{ old('employer_town_province') }}" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors" required placeholder="Enter employer's town/province">
                            @error('employer_town_province')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- PART 3: Loan Information Card -->
                <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 form-section">
                    <h3 class="text-xl font-semibold text-gray-800 mb-2">Loan Information</h3>
                    <p class="text-gray-600 mb-6">Details about the loan you're applying for</p>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Loan Product -->
                        <div class="md:col-span-2">
                            <label for="loan_product" class="block text-sm font-medium text-gray-700 mb-1">Loan Product *</label>
                            <select id="loan_product" name="loan_product" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors" required>
                                <option value="">Select Loan Product</option>
                                @foreach($loanTypes as $loanType)
                                    <option value="{{ $loanType->id }}" data-rate="{{ $loanType->monthlyrate }}" {{ old('loan_product') == $loanType->id ? 'selected' : '' }}>
                                        {{ $loanType->product }} - {{ $loanType->details }} ({{ $loanType->monthlyrate }}% monthly)
                                    </option>
                                @endforeach
                            </select>
                            @error('loan_product')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Loan Amount -->
                        <div>
                            <label for="loan_amount" class="block text-sm font-medium text-gray-700 mb-1">Loan Amount (ZMW) *</label>
                            <input type="number" id="loan_amount" name="loan_amount" value="{{ old('loan_amount') }}" step="0.01" min="100"
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors" required placeholder="Enter loan amount">
                            @error('loan_amount')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Loan Tenure -->
                        <div>
                            <label for="loan_tenure" class="block text-sm font-medium text-gray-700 mb-1">Loan Tenure (Months) *</label>
                            <input type="number" id="loan_tenure" name="loan_tenure" value="{{ old('loan_tenure') }}" min="1" max="120"
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors" required placeholder="Enter months">
                            @error('loan_tenure')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Interest Rate (Display Only) -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Interest Rate</label>
                            <input type="text" id="interest_rate_display" class="w-full border border-gray-300 rounded-lg px-3 py-2 bg-gray-100 text-gray-600" readonly placeholder="Select loan product">
                        </div>

                        <!-- Estimated Monthly Payment (Display Only) -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Estimated Monthly Payment</label>
                            <input type="text" id="estimated_payment_display" class="w-full border border-gray-300 rounded-lg px-3 py-2 bg-gray-100 text-gray-600" readonly placeholder="Calculate automatically">
                        </div>

                        <!-- Loan Purpose -->
                        <div class="md:col-span-2">
                            <label for="loan_purpose" class="block text-sm font-medium text-gray-700 mb-1">Purpose of Loan *</label>
                            <textarea id="loan_purpose" name="loan_purpose" rows="3" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors" required placeholder="Describe the purpose of your loan">{{ old('loan_purpose') }}</textarea>
                            @error('loan_purpose')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- PART 4: Next of Kin Information Card -->
                <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 form-section">
                    <h3 class="text-xl font-semibold text-gray-800 mb-2">Next of Kin Information</h3>
                    <p class="text-gray-600 mb-6">Your emergency contact person</p>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Kin Surname -->
                        <div>
                            <label for="kin_surname" class="block text-sm font-medium text-gray-700 mb-1">Surname *</label>
                            <input type="text" id="kin_surname" name="kin_surname" value="{{ old('kin_surname') }}" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors" required placeholder="Enter next of kin surname">
                            @error('kin_surname')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Kin First Name -->
                        <div>
                            <label for="kin_first_name" class="block text-sm font-medium text-gray-700 mb-1">First Name *</label>
                            <input type="text" id="kin_first_name" name="kin_first_name" value="{{ old('kin_first_name') }}" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors" required placeholder="Enter next of kin first name">
                            @error('kin_first_name')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Kin Telephone -->
                        <div>
                            <label for="kin_telephone" class="block text-sm font-medium text-gray-700 mb-1">Telephone *</label>
                            <input type="tel" id="kin_telephone" name="kin_telephone" value="{{ old('kin_telephone') }}" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors" required placeholder="Enter next of kin telephone">
                            @error('kin_telephone')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Kin Email -->
                        <div>
                            <label for="kin_email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                            <input type="email" id="kin_email" name="kin_email" value="{{ old('kin_email') }}" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors" placeholder="Enter next of kin email">
                        </div>

                        <!-- Kin Town -->
                        <div>
                            <label for="kin_town" class="block text-sm font-medium text-gray-700 mb-1">Town *</label>
                            <input type="text" id="kin_town" name="kin_town" value="{{ old('kin_town') }}" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors" required placeholder="Enter next of kin town">
                            @error('kin_town')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Kin Province -->
                        <div>
                            <label for="kin_province" class="block text-sm font-medium text-gray-700 mb-1">Province *</label>
                            <input type="text" id="kin_province" name="kin_province" value="{{ old('kin_province') }}" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors" required placeholder="Enter next of kin province">
                            @error('kin_province')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Kin Country -->
                        <div>
                            <label for="kin_country" class="block text-sm font-medium text-gray-700 mb-1">Country *</label>
                            <input type="text" id="kin_country" name="kin_country" value="{{ old('kin_country', 'Zambia') }}" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors" required>
                        </div>

                        <!-- Kin Physical Address -->
                        <div class="md:col-span-2">
                            <label for="kin_physical_address" class="block text-sm font-medium text-gray-700 mb-1">Physical Address *</label>
                            <textarea id="kin_physical_address" name="kin_physical_address" rows="2" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors" required placeholder="Enter next of kin physical address">{{ old('kin_physical_address') }}</textarea>
                            @error('kin_physical_address')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Kin Postal Address -->
                        <div class="md:col-span-2">
                            <label for="kin_postal_address" class="block text-sm font-medium text-gray-700 mb-1">Postal Address *</label>
                            <textarea id="kin_postal_address" name="kin_postal_address" rows="2" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-colors" required placeholder="Enter next of kin postal address">{{ old('kin_postal_address') }}</textarea>
                            @error('kin_postal_address')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="flex flex-col md:flex-row justify-between space-y-3 md:space-y-0 md:space-x-4 pt-6">
                    <a href="{{ route('customer.dashboard') }}" class="bg-gray-100 text-gray-700 px-6 py-3 rounded-lg hover:bg-gray-200 transition-colors text-center">
                        <i class="fas fa-arrow-left mr-2"></i>Back to Dashboard
                    </a>
                    <div class="flex space-x-4">
                        <button type="reset" class="bg-gray-100 text-gray-700 px-6 py-3 rounded-lg hover:bg-gray-200 transition-colors">
                            <i class="fas fa-redo mr-2"></i>Reset Form
                        </button>
                        <button type="submit" id="submitBtn" class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors flex items-center justify-center min-w-40">
                            <span id="submitText">Submit Application</span>
                            <i id="submitSpinner" class="fas fa-spinner fa-spin ml-2 hidden"></i>
                        </button>
                    </div>
                </div>
            </form>
        </main>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('Loan application form loaded');
            
            // Mobile menu toggle
            const mobileMenuButton = document.getElementById('mobile-menu-button');
            const sidebar = document.getElementById('sidebar');
            
            if (mobileMenuButton && sidebar) {
                mobileMenuButton.addEventListener('click', function() {
                    sidebar.classList.toggle('active');
                });
            }

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

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

            // Employment type toggle
            const employmentType = document.getElementById('employment_type');
            const contractExpiryContainer = document.getElementById('contract_expiry_container');
            const contractExpiryDate = document.getElementById('contract_expiry_date');

            if (employmentType && contractExpiryContainer) {
                employmentType.addEventListener('change', function() {
                    if (this.value === 'contract') {
                        contractExpiryContainer.classList.remove('hidden');
                        if (contractExpiryDate) {
                            contractExpiryDate.setAttribute('required', 'required');
                        }
                    } else {
                        contractExpiryContainer.classList.add('hidden');
                        if (contractExpiryDate) {
                            contractExpiryDate.removeAttribute('required');
                        }
                    }
                });

                // Initialize on page load
                if (employmentType.value === 'contract') {
                    contractExpiryContainer.classList.remove('hidden');
                }
            }

            // Loan calculation
            const loanProduct = document.getElementById('loan_product');
            const loanAmount = document.getElementById('loan_amount');
            const loanTenure = document.getElementById('loan_tenure');
            const interestRateDisplay = document.getElementById('interest_rate_display');
            const estimatedPaymentDisplay = document.getElementById('estimated_payment_display');

            function calculateMonthlyPayment() {
                if (!loanProduct.value || !loanAmount.value || !loanTenure.value) {
                    return;
                }

                const selectedOption = loanProduct.options[loanProduct.selectedIndex];
                const interestRate = parseFloat(selectedOption.getAttribute('data-rate')) || 0;
                const amount = parseFloat(loanAmount.value);
                const tenure = parseInt(loanTenure.value);

                if (interestRate > 0 && amount > 0 && tenure > 0) {
                    const monthlyRate = interestRate / 100;
                    const monthlyPayment = (amount * monthlyRate * Math.pow(1 + monthlyRate, tenure)) / 
                                         (Math.pow(1 + monthlyRate, tenure) - 1);
                    
                    if (interestRateDisplay) {
                        interestRateDisplay.value = interestRate + '% monthly';
                    }
                    
                    if (estimatedPaymentDisplay) {
                        estimatedPaymentDisplay.value = 'ZMW ' + monthlyPayment.toFixed(2);
                    }
                }
            }

            if (loanProduct) {
                loanProduct.addEventListener('change', calculateMonthlyPayment);
            }
            if (loanAmount) {
                loanAmount.addEventListener('input', calculateMonthlyPayment);
            }
            if (loanTenure) {
                loanTenure.addEventListener('input', calculateMonthlyPayment);
            }

            // Form submission handling
            const form = document.getElementById('loanApplicationForm');
            const submitBtn = document.getElementById('submitBtn');
            const submitText = document.getElementById('submitText');
            const submitSpinner = document.getElementById('submitSpinner');

            if (form) {
                form.addEventListener('submit', function(e) {
                    console.log('Form submission started');
                    
                    // Show loading state
                    if (submitBtn && submitText && submitSpinner) {
                        submitText.textContent = 'Submitting...';
                        submitSpinner.classList.remove('hidden');
                        submitBtn.disabled = true;
                    }

                    let isValid = true;
                    const missingFields = [];
                    
                    // Check required fields
                    const requiredFields = form.querySelectorAll('[required]');
                    requiredFields.forEach(field => {
                        if (!field.value.trim()) {
                            isValid = false;
                            missingFields.push(field.name);
                            field.classList.add('border-red-500', 'bg-red-50');
                            
                            // Scroll to first error
                            if (missingFields.length === 1) {
                                field.scrollIntoView({ behavior: 'smooth', block: 'center' });
                            }
                        } else {
                            field.classList.remove('border-red-500', 'bg-red-50');
                        }
                    });

                    if (!isValid) {
                        e.preventDefault();
                        console.log('Validation failed. Missing fields:', missingFields);
                        
                        // Reset button state
                        if (submitBtn && submitText && submitSpinner) {
                            submitText.textContent = 'Submit Application';
                            submitSpinner.classList.add('hidden');
                            submitBtn.disabled = false;
                        }
                        
                        alert('Please fill in all required fields marked in red.');
                        return false;
                    }
                    
                    console.log('Form validation passed, proceeding with submission...');
                    // Form will now submit normally
                });
            }

            // Remove red border when user starts typing
            const inputs = form ? form.querySelectorAll('input, select, textarea') : [];
            inputs.forEach(input => {
                input.addEventListener('input', function() {
                    if (this.value.trim()) {
                        this.classList.remove('border-red-500', 'bg-red-50');
                    }
                });
            });

            // Auto-format currency fields
            const currencyFields = form ? form.querySelectorAll('input[type="number"][step="0.01"]') : [];
            currencyFields.forEach(field => {
                field.addEventListener('blur', function() {
                    if (this.value) {
                        this.value = parseFloat(this.value).toFixed(2);
                    }
                });
            });

            // Make prefilled fields non-editable
            const prefilledFields = form ? form.querySelectorAll('.prefilled-field') : [];
            prefilledFields.forEach(field => {
                field.addEventListener('focus', function(e) {
                    e.preventDefault();
                    this.blur();
                });
                
                field.addEventListener('click', function(e) {
                    e.preventDefault();
                });
            });

            // Initialize calculations if values are pre-filled
            calculateMonthlyPayment();
        });
    </script>
</body>
</html>