<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register New Client - HAVEN GRAZURI ADVANCE</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        :root {
            --primary: #0A3D62;
            --secondary: #3C9EBD;
            --background: #FFFFFF;
            --success: #2ECC71;
            --error: #E74C3C;
        }
        .bg-primary { background-color: var(--primary); }
        .bg-secondary { background-color: var(--secondary); }
        .text-primary { color: var(--primary); }
        .text-secondary { color: var(--secondary); }
        .border-primary { border-color: var(--primary); }
        .border-secondary { border-color: var(--secondary); }
    </style>
</head>
<body class="bg-gray-50">
    <div class="min-h-screen">
        <!-- Header -->
        <div class="bg-primary shadow">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex justify-between h-16">
                    <div class="flex items-center">
                        <h1 class="text-xl font-bold text-white">HAVEN GRAZURI ADVANCE</h1>
                    </div>
                    <div class="flex items-center space-x-4">
                        <a href="/clients/" class="text-white hover:text-gray-300">← Back to Clients</a>
                        <a href="{% url 'users:logout' %}" class="text-white hover:text-gray-300">Logout</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
            <div class="bg-white shadow-lg rounded-lg overflow-hidden">
                <!-- Form Header -->
                <div class="bg-primary px-6 py-4">
                    <h2 class="text-2xl font-bold text-white text-center">REGISTRATION FORM</h2>
                    <p class="text-center text-blue-100 mt-2">Your bridge to success</p>
                </div>

                {% if messages %}
                <div class="mb-4">
                  {% for message in messages %}
                    <div class="p-3 rounded-md {% if message.tags == 'error' %}bg-red-100 text-red-800{% else %}bg-green-100 text-green-800{% endif %}">
                      {{ message }}
                    </div>
                  {% endfor %}
                </div>
                {% endif %}

                <form method="post" enctype="multipart/form-data" class="p-6 space-y-8">
                    {% csrf_token %}
                    
                    <!-- PERSONAL INFORMATION -->
                    <div class="border-b border-gray-200 pb-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">PERSONAL INFORMATION</h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">DATE OF REGISTRATION</label>
                                <input type="date" name="registration_date" value="{{ today|date:'Y-m-d' }}" 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Branch *</label>
                                <select name="branch" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
                                    <option value="">Select branch</option>
                                    {% for branch in branches %}
                                    <option value="{{ branch.id }}" {% if branch.id|stringformat:'s' == request.session.selected_branch_id %}selected{% endif %}>{{ branch.name }}</option>
                                    {% endfor %}
                                </select>
                                <div class="text-red-500 text-xs mt-1 hidden" id="branch-error">Please select a branch.</div>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Full Name *</label>
                                <input type="text" name="first_name" required 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                       placeholder="Enter full name">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Nickname</label>
                                <input type="text" name="nickname" 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                       placeholder="Enter nickname">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Date of Birth *</label>
                                <input type="date" name="date_of_birth" required 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Email</label>
                                <input type="email" name="email" 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                       placeholder="Enter email address">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Phone Number *</label>
                                <input type="tel" name="phone_number" required 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                       placeholder="+254XXXXXXXXX">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Gender *</label>
                                <select name="gender" required 
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
                                    <option value="">Select gender</option>
                                    <option value="M">Male</option>
                                    <option value="F">Female</option>
                                    <option value="O">Other</option>
                                </select>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Marital Status *</label>
                                <div class="space-y-2">
                                    <label class="flex items-center">
                                        <input type="radio" name="marital_status" value="single" class="mr-2">
                                        Single
                                    </label>
                                    <label class="flex items-center">
                                        <input type="radio" name="marital_status" value="married" class="mr-2">
                                        Married
                                    </label>
                                    <label class="flex items-center">
                                        <input type="radio" name="marital_status" value="divorced" class="mr-2">
                                        Divorced
                                    </label>
                                    <label class="flex items-center">
                                        <input type="radio" name="marital_status" value="widowed" class="mr-2">
                                        Widowed
                                    </label>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Country *</label>
                                <input type="text" name="country" value="Kenya" required 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">National ID No. *</label>
                                <input type="text" name="id_number" required 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                       placeholder="Enter national ID number">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Place of Birth</label>
                                <input type="text" name="place_of_birth" 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                       placeholder="Enter place of birth">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Nationality *</label>
                                <input type="text" name="nationality" value="Kenyan" required 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Domicile</label>
                                <input type="text" name="domicile" 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                       placeholder="Enter domicile">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">CP Domicile</label>
                                <input type="text" name="cp_domicile" 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                       placeholder="Enter CP domicile">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Start Time</label>
                                <input type="time" name="start_time" 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Post Code</label>
                                <input type="text" name="postal_code" 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                       placeholder="Enter postal code">
                            </div>
                        </div>
                    </div>

                    <!-- BUSINESS ADDRESS -->
                    <div class="border-b border-gray-200 pb-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">BUSINESS ADDRESS</h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-2">Present Address *</label>
                                <textarea name="physical_address" rows="3" required 
                                          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                          placeholder="Enter current address"></textarea>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">The City *</label>
                                <input type="text" name="city" required 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                       placeholder="Enter city">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Postal Code</label>
                                <input type="text" name="postal_code_business" 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                       placeholder="Enter postal code">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Present County *</label>
                                <input type="text" name="county" required 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                       placeholder="Enter county">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Physical Location</label>
                                <input type="text" name="physical_location" 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                       placeholder="Enter physical location">
                            </div>
                        </div>
                    </div>

                    <!-- BUSINESS INFORMATION -->
                    <div class="border-b border-gray-200 pb-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">BUSINESS INFORMATION</h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Business Name *</label>
                                <input type="text" name="business_name" required 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                       placeholder="Enter business name">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Business Type *</label>
                                <select name="business_type" required 
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                        onchange="toggleOtherBusinessType(this)">
                                    <option value="">Select business type</option>
                                    <option value="retail">Retail</option>
                                    <option value="agriculture">Agriculture</option>
                                    <option value="transport">Transport</option>
                                    <option value="manufacturing">Manufacturing</option>
                                    <option value="services">Services</option>
                                    <option value="technology">Technology</option>
                                    <option value="other">Other</option>
                                </select>
                            </div>
                            
                            <div id="otherBusinessTypeContainer" style="display: none;">
                                <label class="block text-sm font-medium text-gray-700 mb-2">Specify Business Type *</label>
                                <input type="text" name="other_business_type" 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                       placeholder="Please specify your business type">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Business Address</label>
                                <textarea name="business_address" rows="3" 
                                          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                          placeholder="Enter business address"></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- CAPITAL INVESTED -->
                    <div class="border-b border-gray-200 pb-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">CAPITAL INVESTED</h3>
                        
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">What amount of capital has been/will be invested?</label>
                                <input type="number" name="capital_invested" 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                       placeholder="Enter amount in KES">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Please state source of funds</label>
                                <textarea name="source_of_funds" rows="3" 
                                          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                          placeholder="Describe source of funds"></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- EXPECTED TURNOVER -->
                    <div class="border-b border-gray-200 pb-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">EXPECTED TURNOVER</h3>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">What is the business' weekly or monthly turnover likely to be?</label>
                            <input type="number" name="expected_turnover" 
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                   placeholder="Enter expected turnover in KES">
                        </div>
                    </div>

                    <!-- DOCUMENT UPLOADS -->
                    <div class="border-b border-gray-200 pb-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">DOCUMENT UPLOADS</h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">National ID Document *</label>
                                <input type="file" name="id_document" accept=".pdf,.jpg,.jpeg,.png" required 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
                                <p class="text-xs text-gray-500 mt-1">Upload front and back of ID (PDF, JPG, PNG)</p>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Selfie Photo *</label>
                                <input type="file" name="selfie" accept=".jpg,.jpeg,.png" required 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
                                <p class="text-xs text-gray-500 mt-1">Upload a clear selfie photo (JPG, PNG)</p>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Utility Bill</label>
                                <input type="file" name="utility_bill" accept=".pdf,.jpg,.jpeg,.png" 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
                                <p class="text-xs text-gray-500 mt-1">Upload recent utility bill (PDF, JPG, PNG)</p>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Bank Statement</label>
                                <input type="file" name="bank_statement" accept=".pdf,.jpg,.jpeg,.png" 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
                                <p class="text-xs text-gray-500 mt-1">Upload recent bank statement (PDF, JPG, PNG)</p>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Logbook</label>
                                <input type="file" name="logbook" accept=".pdf,.jpg,.jpeg,.png" 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
                                <p class="text-xs text-gray-500 mt-1">Upload vehicle logbook (PDF, JPG, PNG)</p>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Title Deed</label>
                                <input type="file" name="title_deed" accept=".pdf,.jpg,.jpeg,.png" 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
                                <p class="text-xs text-gray-500 mt-1">Upload title deed (PDF, JPG, PNG)</p>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Other Documents</label>
                                <input type="file" name="other_documents" accept=".pdf,.jpg,.jpeg,.png" multiple 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
                                <p class="text-xs text-gray-500 mt-1">Upload any other relevant documents (PDF, JPG, PNG)</p>
                            </div>
                        </div>
                    </div>

                    <!-- SIGNATURE -->
                    <div class="border-b border-gray-200 pb-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">SIGNATURE</h3>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Digital Signature</label>
                            <input type="file" name="signature" accept=".jpg,.jpeg,.png" 
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
                            <p class="text-xs text-gray-500 mt-1">Upload your signature image (JPG, PNG)</p>
                        </div>
                    </div>

                    <!-- REGISTRATION FEE -->
                    <div class="border-b border-gray-200 pb-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">REGISTRATION FEE</h3>
                        
                        <div class="bg-blue-50 p-4 rounded-lg mb-6">
                            <div class="flex items-center mb-2">
                                <span>ℹ️</span>
                                <h4 class="text-sm font-medium text-blue-900">Registration Fee Information</h4>
                            </div>
                            <p class="text-sm text-blue-800">
                                A one-time registration fee is required for all new clients. 
                            </p>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Registration Fee Amount (KES) *</label>
                                <input type="number" name="registration_fee_amount" step="0.01" min="0" required 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                       placeholder="Enter registration fee amount">
                                <p class="text-xs text-gray-500 mt-1">Standard registration fee amount</p>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Payment Status</label>
                                <div class="space-y-2">
                                    <label class="flex items-center">
                                        <input type="radio" name="registration_fee_paid" value="false" checked class="mr-2">
                                        Pending Payment
                                    </label>
                                    <label class="flex items-center">
                                        <input type="radio" name="registration_fee_paid" value="true" class="mr-2" onchange="togglePaymentDetails(this)">
                                        Already Paid
                                    </label>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Payment Details (hidden by default) -->
                        <div id="paymentDetails" class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6" style="display: none;">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Payment Method</label>
                                <select name="registration_fee_payment_method" 
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
                                    <option value="">Select payment method</option>
                                    <option value="mpesa">M-Pesa</option>
                                    <option value="bank">Bank Transfer</option>
                                    <option value="cash">Cash</option>
                                    <option value="cheque">Cheque</option>
                                    <option value="card">Card Payment</option>
                                </select>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Receipt Number</label>
                                <input type="text" name="registration_fee_receipt_number" 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                       placeholder="Enter receipt number">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Payment Date</label>
                                <input type="date" name="registration_fee_payment_date" 
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Payment Notes</label>
                                <textarea name="registration_fee_notes" rows="2" 
                                          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                          placeholder="Additional notes about payment"></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- DECLARATION -->
                    <div class="border-b border-gray-200 pb-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">DECLARATION</h3>
                        
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <p class="text-sm text-gray-700 mb-4">
                                I/We confirm that:
                            </p>
                            <ul class="text-sm text-gray-700 space-y-2 mb-4">
                                <li>A) The information we have provided herein and the disclosure made are true</li>
                                <li>B) We have received, read, and understood the general terms and conditions of HAVEN GRAZURI VESTMENT LIMITEDKenya Limited and undertake to comply, observe, and be bound by the same.</li>
                            </ul>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Full Names as per ID/PP *</label>
                                    <input type="text" name="declaration_name" required 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                           placeholder="Enter full names as per ID">
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Personal P.I.N</label>
                                    <input type="text" name="personal_pin" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                           placeholder="Enter personal PIN">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- RECOMMENDERS -->
                    <div class="border-b border-gray-200 pb-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">RECOMMENDERS</h3>
                        
                        <div class="space-y-4">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Recommender Name</label>
                                    <input type="text" name="recommender_name" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                           placeholder="Enter recommender name">
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Recommender ID/PP No.</label>
                                    <input type="text" name="recommender_id" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                           placeholder="Enter recommender ID">
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Recommender Tel</label>
                                    <input type="tel" name="recommender_tel" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                           placeholder="Enter recommender telephone">
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Recommender Mobile</label>
                                    <input type="tel" name="recommender_mobile" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                           placeholder="Enter recommender mobile">
                                </div>
                                
                                <div class="md:col-span-2">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Current Place of Residence</label>
                                    <input type="text" name="recommender_residence" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                           placeholder="Enter current place of residence">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- GUARANTORS -->
                    <div class="border-b border-gray-200 pb-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">GUARANTORS (Optional)</h3>
                        
                        <div class="space-y-4">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Guarantor Name</label>
                                    <input type="text" name="guarantor_name" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                           placeholder="Enter guarantor name">
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Guarantor ID/PP No.</label>
                                    <input type="text" name="guarantor_id" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                           placeholder="Enter guarantor ID">
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Guarantor Tel</label>
                                    <input type="tel" name="guarantor_tel" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                           placeholder="Enter guarantor telephone">
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Guarantor Mobile</label>
                                    <input type="tel" name="guarantor_mobile" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                           placeholder="Enter guarantor mobile">
                                </div>
                                
                                <div class="md:col-span-2">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Current Place of Residence</label>
                                    <input type="text" name="guarantor_residence" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                           placeholder="Enter current place of residence">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Form Actions -->
                    <div class="flex justify-end space-x-4 pt-6">
                        <a href="/clients/" 
                           class="px-6 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
                            Cancel
                        </a>
                        <button type="submit" 
                                class="px-6 py-2 bg-primary text-white rounded-md hover:bg-secondary">
                            Register Client
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        // Function to toggle the "Other" business type input field
        function toggleOtherBusinessType(selectElement) {
            const otherContainer = document.getElementById('otherBusinessTypeContainer');
            const otherInput = document.querySelector('input[name="other_business_type"]');
            
            if (selectElement.value === 'other') {
                otherContainer.style.display = 'block';
                otherInput.setAttribute('required', 'required');
            } else {
                otherContainer.style.display = 'none';
                otherInput.removeAttribute('required');
                otherInput.value = '';
            }
        }
        
        // Function to toggle payment details for registration fee
        function togglePaymentDetails(radio) {
            const paymentDetails = document.getElementById('paymentDetails');
            if (radio.value === 'true' && radio.checked) {
                paymentDetails.style.display = 'grid';
            } else {
                paymentDetails.style.display = 'none';
            }
        }
        }

        // Form validation and enhancement
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.querySelector('form');
            
            form.addEventListener('submit', function(e) {
                console.log('Form submission started...');
                const requiredFields = form.querySelectorAll('[required]');
                let isValid = true;
                let missingFields = [];
                
                // Check required fields
                requiredFields.forEach(field => {
                    // Skip email field since it's optional
                    if (field.name === 'email') return;
                    
                    if (!field.value.trim()) {
                        field.classList.add('border-red-500');
                        isValid = false;
                        missingFields.push(field.name.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase()));
                    } else {
                        field.classList.remove('border-red-500');
                    }
                });
                
                // Check radio buttons for marital status
                const maritalStatusRadios = form.querySelectorAll('input[name="marital_status"]');
                const maritalStatusSelected = Array.from(maritalStatusRadios).some(radio => radio.checked);
                if (!maritalStatusSelected) {
                    isValid = false;
                    missingFields.push('marital_status');
                }

                // Check required file fields
                const requiredFiles = ['id_document', 'selfie'];
                requiredFiles.forEach(name => {
                    const input = form.querySelector(`input[type="file"][name="${name}"]`);
                    if (input && !input.files.length) {
                        input.classList.add('border-red-500');
                        isValid = false;
                        missingFields.push(name);
                    } else if (input) {
                        input.classList.remove('border-red-500');
                    }
                });
                
                if (!isValid) {
                    e.preventDefault();
                    alert('Please fill in all required fields marked with *: ' + missingFields.join(', '));
                    return false;
                }
                
                console.log('Form is valid, submitting...');
                // Don't return anything - let the form submit naturally
            });
            
            // File upload preview
            const fileInputs = document.querySelectorAll('input[type="file"]');
            fileInputs.forEach(input => {
                input.addEventListener('change', function() {
                    const file = this.files[0];
                    if (file) {
                        // Use system setting for max file size (default 10MB)
                        const maxSize = {{ max_file_size_mb|default:10 }} * 1024 * 1024;
                        if (file.size > maxSize) {
                            alert(`File size must be less than {{ max_file_size_mb|default:10 }}MB`);
                            this.value = '';
                        }
                    }
                });
            });
        });
    </script>
</body>
</html>
