Hugging Face's logo

Spaces:
huggingfacejs
/
static-variables
Running

App Files Community
5
static-variables / jweb /ac1 /src /pages /loan.php
fellybikush's picture
fellybikush
Upload 99 files
628740b verified
raw
history blame
47.9 kB
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
// Start session and check if user is logged in
session_start();
if (!isset($_SESSION['logged_in']) || $_SESSION['logged_in'] !== true) {
 header('Location: ../../index.php');
 exit;
}
// Get user data from session
$username = $_SESSION['username'];
$email = $_SESSION['email'];
$tier = $_SESSION['tier'];
$package = $_SESSION['package'];
$balance = $_SESSION['balance'];
$total_deposits = $_SESSION['total_deposits'];
$total_withdrawals = $_SESSION['total_withdrawals'];
$rewards = $_SESSION['rewards'];
$earnings = $total_deposits - $total_withdrawals;
// Make sure user_id is set in session for eligibility checking
if (!isset($_SESSION['user_id'])) {
 // This should be set during login, but if not, we'll need to handle it
 // For now, we'll set a placeholder - you should update your login system to store user_id
 $_SESSION['user_id'] = 0; // This should be replaced with actual user ID from database
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Japanese Motors — Loan Services</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 <style>
 :root {
 --bg: #7b848d;
 --card: #7a2f3b;
 --card-2: #6f2630;
 --accent: #efdf2d;
 --muted: rgba(255,255,255,0.6);
 --glass: rgba(255,255,255,0.04);
 --promo-gradient: linear-gradient(180deg,#a13df0 0%, #ff2a79 50%, #d70b1a 100%);
 font-family: 'Poppins', system-ui, Arial;
 --banner-gradient-start: #a855f7;
 --banner-gradient-end: #ec4899;
 --spacing-unit: 1rem;
 --accent-primary: #7c3aed;
 --accent-secondary: #a855f7;
 --shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.1);
 --premium-gold: #d97706;
 }
body {
 background: var(--bg);
 font-family: 'Poppins', sans-serif;
 transition: all 0.3s ease;
 min-height: 100vh;
 }
.sidebar {
 width: 250px;
 height: 100vh;
 background: #0d1321;
 color: #fff;
 position: fixed;
 top: 0;
 left: -250px;
 transition: all 0.3s ease;
 z-index: 1000;
 overflow-y: auto;
 }
.sidebar.active {
 left: 0;
 }
#content {
 margin-left: 0;
 transition: all 0.3s ease;
 }
.sidebar.active ~ #content {
 margin-left: 250px;
 }
header {
 background: #222;
 color: white;
 padding: 15px 20px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 position: relative;
 z-index: 900;
 transition: all 0.3s ease;
 }
.sidebar.active ~ #content header {
 margin-left: 250px;
 }
.menu-toggle {
 background: transparent;
 border: none;
 color: white;
 font-size: 1.5rem;
 cursor: pointer;
 }
.logo-section {
 padding: 15px;
 border-bottom: 1px solid #1c2230;
 display: flex;
 align-items: center;
 gap: 10px;
 }
.brand {
 font-size: 1.2rem;
 font-weight: 700;
 color: #ff9800;
 }
.subtitle {
 font-size: 0.75rem;
 color: #aaa;
 }
.menu {
 list-style: none;
 padding: 0;
 margin: 0;
 }
.menu li a {
 display: flex;
 align-items: center;
 padding: 12px 20px;
 color: white;
 text-decoration: none;
 transition: background 0.3s;
 }
.menu li a:hover {
 background: #1c2230;
 }
.menu li a i {
 margin-right: 12px;
 }
.user-footer {
 padding: 15px;
 background: #222;
 display: flex;
 align-items: center;
 gap: 10px;
 position: sticky;
 bottom: 0;
 }
.avatar {
 width: 35px;
 height: 35px;
 background: #444;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: bold;
 color: white;
 }
.banner {
 max-width: 450px;
 margin: 0 auto calc(var(--spacing-unit) * 2);
 background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
 border-radius: 12px;
 padding: calc(var(--spacing-unit) * 1.5);
 text-align: center;
 box-shadow: var(--shadow-hover);
 animation: fadeIn 0.5s ease;
 }
@keyframes fadeIn {
 from { opacity: 0; transform: translateY(20px); }
 to { opacity: 1; transform: translateY(0); }
 }
@keyframes blink {
 0% { opacity: 1; }
 50% { opacity: 0.3; }
 100% { opacity: 1; }
 }
.banner .title {
 font-size: 1.25rem;
 margin-bottom: calc(var(--spacing-unit) * 1);
 color: #ffffff;
 font-weight: 700;
 animation: blink 1.5s infinite;
 }
.banner p {
 font-size: 0.95rem;
 line-height: 1.6;
 margin-bottom: calc(var(--spacing-unit) * 1);
 color: var(--premium-gold);
 animation: blink 1.5s infinite;
 }
.banner .footer {
 font-size: 0.75rem;
 color: rgba(255, 255, 255, 0.9);
 font-style: italic;
 animation: blink 1.5s infinite;
 }
.card {
 background: var(--card);
 border-radius: 12px;
 padding: 26px;
 color: white;
 box-shadow: 0 6px 0 rgba(0,0,0,0.08) inset;
 flex: 1;
 }
.balance {
 background: rgba(255,255,255,0.03);
 padding: 14px;
 border-radius: 10px;
 margin: 18px 0;
 display: flex;
 align-items: center;
 justify-content: space-between;
 }
.form-group {
 margin: 12px 0;
 }
label {
 display: block;
 margin-bottom: 8px;
 color: rgba(255,255,255,0.85);
 }
input, select, textarea {
 width: 100%;
 padding: 14px;
 border-radius: 10px;
 border: 1px solid rgba(255,255,255,0.05);
 background: transparent;
 color: white;
 }
.btn {
 display: inline-block;
 padding: 14px 24px;
 border-radius: 10px;
 background: var(--accent);
 color: #111;
 font-weight: 700;
 border: none;
 cursor: pointer;
 width: 100%;
 }
.btn-outline {
 background: transparent;
 border: 2px solid var(--accent);
 color: var(--accent);
 }
.btn-sm {
 padding: 8px 16px;
 font-size: 0.875rem;
 }
.btn-success {
 background: #10B981;
 color: white;
 }
.btn-danger {
 background: #EF4444;
 color: white;
 }
.btn-info {
 background: #3B82F6;
 color: white;
 }
.dashboard-card {
 background: rgba(0,0,0,0.2);
 border-radius: 12px;
 padding: 20px;
 margin-bottom: 20px;
 }
.stat-card {
 background: rgba(0,0,0,0.15);
 border-radius: 10px;
 padding: 16px;
 margin-bottom: 16px;
 }
.loan-card {
 background: rgba(0,0,0,0.15);
 border-radius: 10px;
 padding: 16px;
 margin-bottom: 16px;
 transition: transform 0.3s ease;
 border-left: 4px solid var(--accent);
 }
.loan-card:hover {
 transform: translateY(-3px);
 }
.faq-item {
 background: rgba(0,0,0,0.15);
 border-radius: 10px;
 padding: 16px;
 margin-bottom: 16px;
 cursor: pointer;
 }
.faq-answer {
 display: none;
 padding-top: 12px;
 color: var(--muted);
 }
.active-page {
 background: #1c2230;
 border-right: 4px solid var(--accent);
 }
.confirmation-modal {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0,0.7);
 z-index: 1000;
 justify-content: center;
 align-items: center;
 }
.modal-content {
 background: var(--card);
 border-radius: 12px;
 padding: 30px;
 width: 90%;
 max-width: 500px;
 color: white;
 }
.progress-bar {
 height: 6px;
 background: rgba(255,255,255,0.1);
 border-radius: 3px;
 overflow: hidden;
 margin: 15px 0;
 }
.progress-fill {
 height: 100%;
 background: var(--accent);
 width: 0%;
 transition: width 0.5s ease;
 }
.status-badge {
 display: inline-block;
 padding: 4px 12px;
 border-radius: 20px;
 font-size: 0.75rem;
 font-weight: 600;
 }
.status-pending {
 background: rgba(245, 158, 11, 0.2);
 color: #F59E0B;
 }
.status-approved {
 background: rgba(16, 185, 129, 0.2);
 color: #10B981;
 }
.status-rejected {
 background: rgba(239, 68, 68, 0.2);
 color: #EF4444;
 }
.status-processing {
 background: rgba(59, 130, 246, 0.2);
 color: #3B82F6;
 }
.payment-option {
 background: rgba(0,0,0,0.15);
 border-radius: 10px;
 padding: 16px;
 margin-bottom: 16px;
 cursor: pointer;
 transition: all 0.3s;
 border: 2px solid transparent;
 }
.payment-option:hover {
 transform: translateY(-3px);
 }
.payment-option.selected {
 border-color: var(--accent);
 }
.tabs {
 display: flex;
 border-bottom: 1px solid rgba(255,255,255,0.1);
 margin-bottom: 20px;
 }
.tab {
 padding: 10px 20px;
 cursor: pointer;
 opacity: 0.7;
 transition: opacity 0.3s;
 }
.tab.active {
 opacity: 1;
 border-bottom: 2px solid var(--accent);
 }
.tab-content {
 display: none;
 }
.tab-content.active {
 display: block;
 }
@media (max-width: 768px) {
 .cards {
 flex-direction: column;
 }
.promo {
 width: 92%;
 }
.grid-cols-2 {
 grid-template-columns: 1fr;
 }
.grid-cols-3 {
 grid-template-columns: 1fr;
 }
.action-buttons {
 flex-direction: column;
 gap: 8px;
 }
.action-buttons button {
 width: 100%;
 }
.tabs {
 overflow-x: auto;
 white-space: nowrap;
 }
 }
 </style>
</head>
<body>
 <!-- Sidebar -->
 <aside class="sidebar" id="sidebar">
 <div class="logo-section">
 <i data-feather="zap" class="text-yellow-400"></i>
 <div>
 <h2 class="brand">JMOTORS</h2>
 <p class="subtitle">Marketing Platform</p>
 </div>
 </div>
 <ul class="menu">
 <li><a href="index.php"><i data-feather="home"></i> Dashboard</a></li>
 <li><a href="meta-uploads.php"><i data-feather="upload"></i> Meta Uploads</a></li>
 <li><a href="transactions.php"><i data-feather="repeat"></i> Transactions</a></li>
 <li><a href="transfer.php"><i data-feather="send"></i> Transfer</a></li>
 <li><a href="daily-product.php"><i data-feather="shopping-bag"></i> Daily Product</a></li>
 <li><a href="withdraw.php"><i data-feather="dollar-sign"></i> Withdraw</a></li>
 <li><a href="packages.php"><i data-feather="package"></i> Packages</a></li>
 <li><a href="loan.php"><i data-feather="credit-card"></i> Loan</a></li>
 <li><a href="recharge.php"><i data-feather="battery-charging"></i> Recharge</a></li>
 <li><a href="agent-approval.php" class="active-page"><i data-feather="user-check"></i> Agent Approval</a></li>
 <li><a href="access-token.php"><i data-feather="key"></i> Access Token</a></li>
 <li><a href="agent-claim.php"><i data-feather="tag"></i> Agent Claim</a></li>
 <li><a href="team.php"><i data-feather="users"></i> Team</a></li>
 </ul>
 <ul class="menu bottom">
 <li><a href="profile.php"><i data-feather="user"></i> Profile</a></li>
 <li><a href="settings.php"><i data-feather="settings"></i> Settings</a></li>
 <li><a href="whatsapp-channel.php"><i data-feather="message-square"></i> Whatsapp Channel</a></li>
 <li><a href="customer-care.php"><i data-feather="headphones"></i> Customer Care</a></li>
 </ul>
 <div class="user-footer">
 <div class="avatar"><?php echo substr($username, 0, 2); ?></div>
 <div>
 <h4><?php echo $username; ?></h4>
 <p><?php echo $tier; ?> - Marketer</p>
 </div>
 </div>
 </aside>
 <!-- Main Content -->
 <div id="content">
 <header class="bg-gray-800 text-white p-4">
 <div class="flex items-center">
 <button class="menu-toggle" id="menu-toggle">
 <i data-feather="menu"></i>
 </button>
 <div class="ml-4 font-bold text-xl">Jmotors</div>
 </div>
 <nav class="flex items-center space-x-6">
 <a href="transfer.php" class="hover:text-yellow-300">Transfer</a>
 <a href="loan.php" class="hover:text-yellow-300">Loans</a>
 <a href="dailyproduct.php" class="hover:text-yellow-300">New Product</a>
 <div class="w-9 h-9 rounded-full bg-gradient-to-r from-yellow-300 to-orange-400 flex items-center justify-center font-bold">MI</div>
 </nav>
 </header>
 <main class="p-4">
 <div class="banner">
 <div class="title">💰 Instant Loan Services</div>
 <p>Get quick access to funds with our flexible loan options</p>
 <div class="footer">⚡ Quick approval &nbsp; • &nbsp; Flexible repayment &nbsp; • &nbsp; Low interest rates</div>
 </div>
 <div class="tabs">
 <div class="tab active" data-tab="new-loan">Apply for Loan</div>
 <div class="tab" data-tab="active-loans">Active Loans</div>
 <div class="tab" data-tab="loan-history">Loan History</div>
 </div>
 <div class="tab-content active" id="new-loan-tab">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
 <div class="dashboard-card md:col-span-2">
 <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
 <i data-feather="dollar-sign" class="text-green-400"></i> Loan Application
 </h3>
<div class="balance">
 <div>
 <p class="text-sm">Loan Limit</p>
 <h3 class="text-xl font-bold">50,000 KES</h3>
 </div>
 <div class="text-right">
 <p class="text-sm">Available</p>
 <p class="font-bold">35,000 KES</p>
 </div>
 </div>
<form id="loan-form">
 <div class="form-group">
 <label for="loan-amount">Loan Amount (KES)</label>
 <input type="number" id="loan-amount" placeholder="Enter amount" min="1000" max="35000" required>
 <p class="text-xs text-gray-400 mt-1">Min: 1,000 KES | Max: 35,000 KES</p>
 </div>
<div class="form-group">
 <label for="loan-duration">Repayment Period</label>
 <select id="loan-duration" required>
 <option value="">Select duration</option>
 <option value="7">7 days</option>
 <option value="14">14 days</option>
 <option value="30" selected>30 days</option>
 <option value="60">60 days</option>
 <option value="90">90 days</option>
 </select>
 </div>
<div class="form-group">
 <label for="loan-purpose">Loan Purpose</label>
 <select id="loan-purpose" required>
 <option value="">Select purpose</option>
 <option value="business">Business Expansion</option>
 <option value="emergency">Emergency</option>
 <option value="education">Education</option>
 <option value="health">Healthcare</option>
 <option value="other">Other</option>
 </select>
 </div>
<div class="form-group">
 <label>Disbursement Method</label>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mt-2">
 <div class="payment-option" data-method="mpesa">
 <div class="flex items-center">
 <i data-feather="smartphone" class="text-green-400 mr-2"></i>
 <span>M-Pesa</span>
 </div>
 <p class="text-xs mt-1">Instant to phone</p>
 </div>
 <div class="payment-option" data-method="bank">
 <div class="flex items-center">
 <i data-feather="briefcase" class="text-blue-400 mr-2"></i>
 <span>Bank Transfer</span>
 </div>
 <p class="text-xs mt-1">1-2 business days</p>
 </div>
 <div class="payment-option" data-method="paypal">
 <div class="flex items-center">
 <i data-feather="globe" class="text-yellow-400 mr-2"></i>
 <span>PayPal</span>
 </div>
 <p class="text-xs mt-1">International</p>
 </div>
 </div>
 <input type="hidden" id="disbursement-method" required>
 </div>
<div id="mpesa-details" class="hidden">
 <div class="form-group">
 <label for="mpesa-phone">M-Pesa Phone Number</label>
 <input type="tel" id="mpesa-phone" placeholder="07XX XXX XXX" pattern="[0-9]{10}">
 <p class="text-xs text-gray-400 mt-1">Enter your Safaricom number registered with M-Pesa</p>
 </div>
 </div>
<div id="bank-details" class="hidden">
 <div class="form-group">
 <label for="bank-name">Bank Name</label>
 <input type="text" id="bank-name" placeholder="Enter bank name">
 </div>
 <div class="form-group">
 <label for="account-number">Account Number</label>
 <input type="text" id="account-number" placeholder="Enter account number">
 </div>
 <div class="form-group">
 <label for="account-name">Account Name</label>
 <input type="text" id="account-name" placeholder="Enter account name">
 </div>
 </div>
<div id="paypal-details" class="hidden">
 <div class="form-group">
 <label for="paypal-email">PayPal Email</label>
 <input type="email" id="paypal-email" placeholder="Enter PayPal email">
 </div>
 </div>
<div class="form-group">
 <label for="notification-number">SMS Notification Number</label>
 <input type="tel" id="notification-number" placeholder="07XX XXX XXX" pattern="[0-9]{10}" required>
 <p class="text-xs text-gray-400 mt-1">Where should we send loan status updates?</p>
 </div>
<div class="bg-yellow-400 bg-opacity-20 p-3 rounded-lg mt-4 flex items-start">
 <i data-feather="info" class="text-yellow-400 mr-2 mt-1"></i>
 <div>
 <p class="text-sm font-bold">Loan Terms</p>
 <p class="text-sm">Interest rate: 5% per month | Processing fee: 2% of loan amount</p>
 <p class="text-sm">Late payment fee: 1% per day after due date</p>
 </div>
 </div>
<div class="form-group flex items-center mt-4">
 <input type="checkbox" id="agree-terms" class="w-5 h-5 mr-2">
 <label for="agree-terms" class="mb-0">I agree to the loan terms and conditions</label>
 </div>
<button type="submit" class="btn mt-4" id="submit-loan">Apply for Loan</button>
 </form>
 </div>
<div class="dashboard-card">
 <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
 <i data-feather="bar-chart-2" class="text-blue-400"></i> Loan Summary
 </h3>
<div class="stat-card">
 <div class="flex justify-between items-center mb-2">
 <span>Loan Amount</span>
 <span class="font-bold" id="summary-amount">0 KES</span>
 </div>
 </div>
<div class="stat-card">
 <div class="flex justify-between items-center mb-2">
 <span>Processing Fee (2%)</span>
 <span class="font-bold" id="summary-fee">0 KES</span>
 </div>
 </div>
<div class="stat-card">
 <div class="flex justify-between items-center mb-2">
 <span>Total Repayment</span>
 <span class="font-bold" id="summary-total">0 KES</span>
 </div>
 </div>
<div class="stat-card">
 <div class="flex justify-between items-center mb-2">
 <span>Due Date</span>
 <span class="font-bold" id="summary-due">--</span>
 </div>
 </div>
<div class="mt-6">
 <h4 class="font-bold mb-3 flex items-center gap-2">
 <i data-feather="clock" class="text-purple-400"></i> Repayment Schedule
 </h4>
 <div class="bg-gray-700 p-4 rounded-lg">
 <div class="flex justify-between items-center mb-2">
 <span>Monthly Installment</span>
 <span class="font-bold" id="summary-installment">0 KES</span>
 </div>
 <div class="flex justify-between items-center">
 <span>Number of Payments</span>
 <span class="font-bold" id="summary-payments">--</span>
 </div>
 </div>
 </div>
<div class="mt-6">
 <h4 class="font-bold mb-2">Eligibility Criteria</h4>
 <ul class="text-sm space-y-2">
 <li class="flex items-start">
 <i data-feather="check-circle" class="text-green-400 mr-2 mt-1"></i>
 <span>Minimum deposits of 20,000 KES OR</span>
 </li>
 <li class="flex items-start">
 <i data-feather="check-circle" class="text-green-400 mr-2 mt-1"></i>
 <span>Account age of 6+ months with sufficient activity</span>
 </li>
 <li class="flex items-start">
 <i data-feather="check-circle" class="text-green-400 mr-2 mt-1"></i>
 <span>No overdue loans</span>
 </li>
 </ul>
 </div>
 </div>
 </div>
 </div>
 <div class="tab-content" id="active-loans-tab">
 <div class="dashboard-card mt-6">
 <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
 <i data-feather="rotate-ccw" class="text-green-400"></i> Active Loans
 </h3>
 <div class="text-center py-8">
 <i data-feather="dollar-sign" class="mx-auto text-gray-400 text-4xl"></i>
 <p class="mt-2 text-gray-400">No active loans</p>
 <p class="text-sm text-gray-400">You don't have any active loans at the moment</p>
 </div>
 </div>
 </div>
 <div class="tab-content" id="loan-history-tab">
 <div class="dashboard-card mt-6">
 <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
 <i data-feather="list" class="text-blue-400"></i> Loan History
 </h3>
 <div class="text-center py-8">
 <i data-feather="file-text" class="mx-auto text-gray-400 text-4xl"></i>
 <p class="mt-2 text-gray-400">No loan history</p>
 <p class="text-sm text-gray-400">Your loan history will appear here</p>
 </div>
 </div>
 </div>
<div class="dashboard-card mt-8">
 <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
 <i data-feather="help-circle" class="text-purple-400"></i> Loan FAQ
 </h3>
<div class="faq-item">
 <div class="flex justify-between items-center">
 <h4 class="font-bold">How long does loan approval take?</h4>
 <i data-feather="chevron-down" class="faq-toggle"></i>
 </div>
 <div class="faq-answer">
 <p>Loan applications are typically processed within 2-4 hours during business hours. For M-Pesa disbursement, funds are sent immediately after approval. Bank transfers may take 1-2 business days. You'll receive an SMS notification once your loan is approved and disbursed.</p>
 </div>
 </div>
<div class="faq-item">
 <div class="flex justify-between items-center">
 <h4 class="font-bold">What are the interest rates and fees?</h4>
 <i data-feather="chevron-down" class="faq-toggle"></i>
 </div>
 <div class="faq-answer">
 <p>Our loans have a 5% monthly interest rate with a 2% processing fee. For example, a loan of 10,000 KES for 30 days would have a 500 KES interest charge and 200 KES processing fee, totaling 10,700 KES repayment. There are no hidden fees, and we clearly display all costs before you apply.</p>
 </div>
 </div>
<div class="faq-item">
 <div class="flex justify-between items-center">
 <h4 class="font-bold">What happens if I can't repay on time?</h4>
 <i data-feather="chevron-down" class="faq-toggle"></i>
 </div>
 <div class="faq-answer">
 <p>If you're unable to repay on time, please contact our support team before the due date to discuss options. We may offer a repayment extension with revised terms. Late payments incur a 1% daily penalty fee. Consistent communication helps us work with you to find a solution.</p>
 </div>
 </div>
 </div>
 </main>
 </div>
 <!-- SMS Preview Modal -->
 <div class="confirmation-modal" id="sms-modal">
 <div class="modal-content">
 <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
 <i data-feather="message-square" class="text-green-400"></i> SMS Notification Preview
 </h3>
<div class="bg-gray-800 p-4 rounded-lg mb-4">
 <div class="flex justify-between items-center mb-2">
 <span class="text-xs text-gray-400">To:</span>
 <span class="text-sm font-bold" id="sms-number-preview">0722 XXX XXX</span>
 </div>
 <div class="bg-gray-900 p-3 rounded mt-2">
 <p class="text-sm" id="sms-content">Your loan application for 5,000 KES has been received and is being processed. You will receive another SMS once approved. Thank you for choosing JMotors.</p>
 </div>
 <div class="flex justify-between items-center mt-2">
 <span class="text-xs text-gray-400">From:</span>
 <span class="text-xs">Jmotors</span>
 </div>
 </div>
<p class="text-sm mb-4">This SMS will be sent to the phone number you provided for loan status updates.</p>
<div class="flex gap-3">
 <button class="btn btn-outline flex-1" id="edit-sms">
 <i data-feather="edit" class="w-4 h-4 mr-1"></i> Edit Number
 </button>
 <button class="btn btn-success flex-1" id="confirm-sms">
 <i data-feather="send" class="w-4 h-4 mr-1"></i> Confirm & Send
 </button>
 </div>
 </div>
 </div>
 <script>
 feather.replace();
 document.addEventListener('DOMContentLoaded', function() {
 const toggleBtn = document.getElementById('menu-toggle');
 const sidebar = document.getElementById('sidebar');
 const content = document.getElementById('content');
toggleBtn.addEventListener('click', function() {
 sidebar.classList.toggle('active');
 content.classList.toggle('active');
 });
// Tab functionality
 const tabs = document.querySelectorAll('.tab');
 tabs.forEach(tab => {
 tab.addEventListener('click', function() {
 tabs.forEach(t => t.classList.remove('active'));
 this.classList.add('active');
document.querySelectorAll('.tab-content').forEach(content => {
 content.classList.remove('active');
 });
const tabId = this.getAttribute('data-tab');
 document.getElementById(`${tabId}-tab`).classList.add('active');
 });
 });
// FAQ toggle functionality
 const faqItems = document.querySelectorAll('.faq-item');
 faqItems.forEach(item => {
 item.addEventListener('click', function() {
 const answer = this.querySelector('.faq-answer');
 const icon = this.querySelector('.faq-toggle');
if (answer.style.display === 'block') {
 answer.style.display = 'none';
 icon.setAttribute('data-feather', 'chevron-down');
 } else {
 answer.style.display = 'block';
 icon.setAttribute('data-feather', 'chevron-up');
 }
 feather.replace();
 });
 });
// Payment method selection
 const paymentOptions = document.querySelectorAll('.payment-option');
 const disbursementMethod = document.getElementById('disbursement-method');
paymentOptions.forEach(option => {
 option.addEventListener('click', function() {
 paymentOptions.forEach(opt => opt.classList.remove('selected'));
 this.classList.add('selected');
const method = this.getAttribute('data-method');
 disbursementMethod.value = method;
document.getElementById('mpesa-details').classList.add('hidden');
 document.getElementById('bank-details').classList.add('hidden');
 document.getElementById('paypal-details').classList.add('hidden');
if (method === 'mpesa') {
 document.getElementById('mpesa-details').classList.remove('hidden');
 } else if (method === 'bank') {
 document.getElementById('bank-details').classList.remove('hidden');
 } else if (method === 'paypal') {
 document.getElementById('paypal-details').classList.remove('hidden');
 }
 });
 });
// Loan amount calculation
 const loanAmountInput = document.getElementById('loan-amount');
 const loanDurationSelect = document.getElementById('loan-duration');
function calculateLoanSummary() {
 const amount = parseFloat(loanAmountInput.value) || 0;
 const duration = parseInt(loanDurationSelect.value) || 30;
if (amount > 0) {
 const processingFee = amount * 0.02;
 const interest = amount * 0.05 * (duration / 30);
 const totalRepayment = amount + processingFee + interest;
 const installment = totalRepayment / (duration / 30);
const today = new Date();
 const dueDate = new Date();
 dueDate.setDate(today.getDate() + duration);
document.getElementById('summary-amount').textContent = amount.toLocaleString() + ' KES';
 document.getElementById('summary-fee').textContent = processingFee.toLocaleString() + ' KES';
 document.getElementById('summary-total').textContent = totalRepayment.toLocaleString() + ' KES';
 document.getElementById('summary-due').textContent = dueDate.toLocaleDateString();
 document.getElementById('summary-installment').textContent = installment.toLocaleString() + ' KES';
 document.getElementById('summary-payments').textContent = Math.ceil(duration / 30);
 }
 }
loanAmountInput.addEventListener('input', calculateLoanSummary);
 loanDurationSelect.addEventListener('change', calculateLoanSummary);
// Check eligibility when page loads
 checkEligibility();
// Function to check eligibility
 function checkEligibility() {
 fetch('loan-eligibility.php?check_eligibility=true')
 .then(response => response.json())
 .then(data => {
 if (!data.eligible) {
 const submitButton = document.getElementById('submit-loan');
 submitButton.disabled = true;
 submitButton.textContent = 'Not Eligible for Loan';
 submitButton.style.backgroundColor = '#6B7280';
 submitButton.style.cursor = 'not-allowed';
const alertDiv = document.createElement('div');
 alertDiv.className = 'bg-red-500 bg-opacity-20 p-3 rounded-lg mt-4 flex items-start';
 alertDiv.innerHTML = `
 <i data-feather="alert-circle" class="text-red-500 mr-2 mt-1"></i>
 <div>
 <p class="text-sm font-bold">Loan Eligibility Check Failed</p>
 <p class="text-sm">${data.reason}</p>
 <p class="text-sm mt-1">Please contact customer support if you believe this is an error.</p>
 </div>
 `;
 document.getElementById('loan-form').prepend(alertDiv);
 feather.replace();
 }
 })
 .catch(error => {
 console.error('Error checking eligibility:', error);
 });
 }
// Form submission
 const loanForm = document.getElementById('loan-form');
 const smsModal = document.getElementById('sms-modal');
 const smsNumberPreview = document.getElementById('sms-number-preview');
 const smsContent = document.getElementById('sms-content');
loanForm.addEventListener('submit', function(e) {
 e.preventDefault();
// Basic form validation
 const loanAmount = document.getElementById('loan-amount').value;
 const loanDuration = document.getElementById('loan-duration').value;
 const loanPurpose = document.getElementById('loan-purpose').value;
 const disbursementMethod = document.getElementById('disbursement-method').value;
 const notificationNumber = document.getElementById('notification-number').value;
 const agreeTerms = document.getElementById('agree-terms').checked;
if (!loanAmount || !loanDuration || !loanPurpose || !disbursementMethod || !notificationNumber) {
 alert('Please fill in all required fields.');
 return;
 }
if (!agreeTerms) {
 alert('You must agree to the loan terms and conditions.');
 return;
 }
// Method-specific validation
 if (disbursementMethod === 'mpesa') {
 const mpesaPhone = document.getElementById('mpesa-phone').value;
 if (!mpesaPhone || mpesaPhone.length !== 10) {
 alert('Please enter a valid M-Pesa phone number (10 digits).');
 return;
 }
 } else if (disbursementMethod === 'bank') {
 const bankName = document.getElementById('bank-name').value;
 const accountNumber = document.getElementById('account-number').value;
 const accountName = document.getElementById('account-name').value;
 if (!bankName || !accountNumber || !accountName) {
 alert('Please fill in all bank details.');
 return;
 }
 } else if (disbursementMethod === 'paypal') {
 const paypalEmail = document.getElementById('paypal-email').value;
 if (!paypalEmail || !paypalEmail.includes('@')) {
 alert('Please enter a valid PayPal email address.');
 return;
 }
 }
// Check eligibility before submission
 fetch('loan-eligibility.php?check_eligibility=true')
 .then(response => response.json())
 .then(data => {
 if (!data.eligible) {
 alert('You are not eligible for a loan: ' + data.reason);
 return;
 }
// If eligible, show SMS preview
 const formattedNumber = notificationNumber.substring(0, 4) + ' XXX ' + notificationNumber.substring(7);
 smsNumberPreview.textContent = formattedNumber;
smsContent.textContent = `Your loan application for ${loanAmount} KES has been received and is being processed. You will receive another SMS once approved. Thank you for choosing JMotors.`;
smsModal.style.display = 'flex';
 })
 .catch(error => {
 console.error('Error checking eligibility:', error);
 alert('An error occurred while checking eligibility.');
 });
 });
// SMS modal functionality
 document.getElementById('edit-sms').addEventListener('click', function() {
 smsModal.style.display = 'none';
 });
document.getElementById('confirm-sms').addEventListener('click', function() {
 // Submit the form data
 const formData = new FormData(loanForm);
fetch('loan-eligibility.php', {
 method: 'POST',
 body: formData
 })
 .then(response => response.json())
 .then(data => {
 if (data.success) {
 alert('Loan application submitted successfully!');
 smsModal.style.display = 'none';
 loanForm.reset();
// Reset UI
 paymentOptions.forEach(opt => opt.classList.remove('selected'));
 document.getElementById('mpesa-details').classList.add('hidden');
 document.getElementById('bank-details').classList.add('hidden');
 document.getElementById('paypal-details').classList.add('hidden');
// Re-check eligibility
 checkEligibility();
 } else {
 alert('Error: ' + data.message);
 }
 })
 .catch(error => {
 console.error('Error:', error);
 alert('An error occurred while submitting your application.');
 });
 });
// Close modal when clicking outside
 window.addEventListener('click', function(event) {
 if (event.target === smsModal) {
 smsModal.style.display = 'none';
 }
 });
 });
 </script>
</body>
</html>