@extends('layouts.portal')

@section('title', 'Onboard New Client')
@section('page_title', 'Onboard New Clients')
@section('page_subtitle', 'Register a new client and earn commission')

@section('sidebar')
    @include('agent.partials.sidebar', ['active' => 'onboard'])
@endsection

@push('styles')
<style>
    .onboard-container {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        min-height: 100vh;
    }
    
    .modern-header {
        background: white;
        border-radius: 20px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        padding: 32px;
        margin-bottom: 24px;
        border: 1px solid rgba(226, 232, 240, 0.5);
    }
    
    .commission-card {
        background: linear-gradient(135deg, #dbeafe 0%, #dcfce7 100%);
        border: 1px solid #3b82f6;
        border-radius: 20px;
        padding: 28px;
        margin-bottom: 24px;
        box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.1);
        position: relative;
        overflow: hidden;
    }
    
    .commission-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
        pointer-events: none;
    }
    
    .form-container {
        background: white;
        border-radius: 20px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        border: 1px solid rgba(226, 232, 240, 0.5);
        overflow: hidden;
    }
    
    .form-section {
        padding: 32px;
        border-bottom: 1px solid rgba(226, 232, 240, 0.5);
    }
    
    .form-section:last-child {
        border-bottom: none;
    }
    
    .section-header {
        display: flex;
        align-items: center;
        margin-bottom: 24px;
    }
    
    .section-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;
        font-size: 20px;
    }
    
    .personal-icon {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        color: white;
    }
    
    .address-icon {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: white;
    }
    
    .emergency-icon {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        color: white;
    }
    
    .section-title {
        font-size: 20px;
        font-weight: 700;
        color: #1f2937;
    }
    
    .form-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 24px;
    }
    
    .form-group {
        position: relative;
    }
    
    .form-label {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #374151;
        margin-bottom: 8px;
    }
    
    .required-star {
        color: #ef4444;
        margin-left: 2px;
    }
    
    .form-input {
        width: 100%;
        padding: 12px 16px;
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        font-size: 14px;
        transition: all 0.2s ease;
        background: #ffffff;
    }
    
    .form-input:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
    
    .form-input:hover {
        border-color: #d1d5db;
    }
    
    .form-select {
        width: 100%;
        padding: 12px 16px;
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        font-size: 14px;
        background: #ffffff;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .form-select:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
    
    .form-textarea {
        width: 100%;
        padding: 12px 16px;
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        font-size: 14px;
        resize: vertical;
        min-height: 100px;
        transition: all 0.2s ease;
        background: #ffffff;
    }
    
    .form-textarea:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
    
    .commission-badge {
        display: inline-flex;
        align-items: center;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 700;
        margin-right: 12px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .badge-primary {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        color: white;
    }
    
    .badge-secondary {
        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
        color: white;
    }
    
    .badge-tertiary {
        background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
        color: white;
    }
    
    .terms-section {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        padding: 24px 32px;
        border-top: 1px solid rgba(226, 232, 240, 0.5);
    }
    
    .checkbox-wrapper {
        display: flex;
        align-items: flex-start;
    }
    
    .checkbox-input {
        width: 20px;
        height: 20px;
        border: 2px solid #d1d5db;
        border-radius: 6px;
        margin-right: 12px;
        margin-top: 2px;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .checkbox-input:checked {
        background: #3b82f6;
        border-color: #3b82f6;
    }
    
    .checkbox-label {
        font-size: 14px;
        color: #4b5563;
        line-height: 1.5;
    }
    
    .form-actions {
        padding: 24px 32px;
        background: white;
        display: flex;
        justify-content: flex-end;
        gap: 16px;
        border-top: 1px solid rgba(226, 232, 240, 0.5);
    }
    
    .btn {
        padding: 12px 24px;
        border-radius: 12px;
        font-weight: 600;
        font-size: 14px;
        transition: all 0.2s ease;
        border: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    
    .btn-primary {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        color: white;
        box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3);
    }
    
    .btn-primary:hover {
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.4);
    }
    
    .btn-secondary {
        background: white;
        color: #6b7280;
        border: 2px solid #e5e7eb;
    }
    
    .btn-secondary:hover {
        background: #f9fafb;
        border-color: #d1d5db;
        color: #374151;
    }
    
    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .form-section {
        animation: slideIn 0.3s ease-out;
    }
    
    .form-section:nth-child(2) { animation-delay: 0.1s; }
    .form-section:nth-child(3) { animation-delay: 0.2s; }
    .form-section:nth-child(4) { animation-delay: 0.3s; }
    
    .coin-icon {
        animation: float 3s ease-in-out infinite;
    }
    
    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
    }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        setupAgentOnboardAddressMerging();
    });

    let familyMemberCount = 1;
    let assetCount = 1;
    let liabilityCount = 1;
    
    // Marital status conditional fields
    document.addEventListener('DOMContentLoaded', function() {
        const maritalStatus = document.getElementById('marital_status');
        if (maritalStatus) {
            maritalStatus.addEventListener('change', function() {
                const status = this.value;
                const spouseNameContainer = document.getElementById('spouse_name_container');
                const spouseIcContainer = document.getElementById('spouse_ic_container');
                const spouseCountContainer = document.getElementById('spouse_count_container');
                const childrenCountContainer = document.getElementById('children_count_container');
                
                // Hide all conditional fields first
                if (spouseNameContainer) spouseNameContainer.style.display = 'none';
                if (spouseIcContainer) spouseIcContainer.style.display = 'none';
                if (spouseCountContainer) spouseCountContainer.style.display = 'none';
                if (childrenCountContainer) childrenCountContainer.style.display = 'none';
                
                // Show based on marital status
                if (status === 'married') {
                    if (spouseNameContainer) spouseNameContainer.style.display = 'block';
                    if (spouseIcContainer) spouseIcContainer.style.display = 'block';
                    if (spouseCountContainer) spouseCountContainer.style.display = 'block';
                    if (childrenCountContainer) childrenCountContainer.style.display = 'block';
                } else if (status === 'divorced' || status === 'widowed') {
                    if (childrenCountContainer) childrenCountContainer.style.display = 'block';
                }
            });
        }
    });
    
    function addFamilyMember() {
        const container = document.getElementById('family-members-container');
        const newMember = document.createElement('div');
        newMember.className = 'family-member-card bg-gray-50 rounded-xl p-6 border-2 border-gray-200';
        newMember.innerHTML = `
            <div class="flex justify-between items-center mb-4">
                <h4 class="font-semibold text-gray-700">Family Member ${familyMemberCount + 1}</h4>
                <button type="button" onclick="this.parentElement.parentElement.remove()" class="text-red-500 hover:text-red-700">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="form-grid">
                <div class="form-group">
                    <label class="form-label">First Name</label>
                    <input type="text" name="family_members[${familyMemberCount}][first_name]" class="form-input">
                </div>
                <div class="form-group">
                    <label class="form-label">Last Name</label>
                    <input type="text" name="family_members[${familyMemberCount}][last_name]" class="form-input">
                </div>
                <div class="form-group">
                    <label class="form-label">Relationship</label>
                    <select name="family_members[${familyMemberCount}][relationship]" class="form-select">
                        <option value="">Select</option>
                        <option value="spouse">Spouse</option>
                        <option value="child">Child</option>
                        <option value="parent">Parent</option>
                        <option value="sibling">Sibling</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">IC/Passport</label>
                    <input type="text" name="family_members[${familyMemberCount}][ic_number]" class="form-input">
                </div>
                <div class="form-group">
                    <label class="form-label">Date of Birth</label>
                    <x-date-picker name="family_members[${familyMemberCount}][date_of_birth]" />
                </div>
                <div class="form-group">
                    <label class="form-label">Phone</label>
                    <input type="tel" name="family_members[${familyMemberCount}][phone]" class="form-input">
                </div>
                <div class="form-group">
                    <label class="form-label">Email</label>
                    <input type="email" name="family_members[${familyMemberCount}][email]" class="form-input">
                </div>
                <div class="form-group md:col-span-2">
                    <label class="form-label">Address</label>
                    <textarea name="family_members[${familyMemberCount}][address]" rows="2" class="form-textarea"></textarea>
                </div>
            </div>
        `;
        container.appendChild(newMember);
        familyMemberCount++;
    }
    
    function addAsset() {
        const container = document.getElementById('assets-container');
        const newAsset = document.createElement('div');
        newAsset.className = 'asset-card bg-gray-50 rounded-xl p-6 border-2 border-gray-200';
        newAsset.innerHTML = `
            <div class="flex justify-between items-center mb-4">
                <h4 class="font-semibold text-gray-700">Asset ${assetCount + 1}</h4>
                <button type="button" onclick="this.parentElement.parentElement.remove()" class="text-red-500 hover:text-red-700">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="form-grid">
                <div class="form-group">
                    <label class="form-label">Asset Type</label>
                    <select name="assets[${assetCount}][type]" class="form-select">
                        <option value="">Select type</option>
                        <option value="property">Property / Real Estate</option>
                        <option value="vehicle">Vehicle</option>
                        <option value="bank_account">Bank Account</option>
                        <option value="fixed_deposit">Fixed Deposit</option>
                        <option value="investment">Investment / Stocks</option>
                        <option value="insurance">Insurance Policy</option>
                        <option value="epf">EPF / Retirement Fund</option>
                        <option value="jewelry">Jewelry / Gold</option>
                        <option value="business">Business Interest</option>
                        <option value="other">Other</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Ownership Type</label>
                    <select name="assets[${assetCount}][ownership_type]" class="form-select">
                        <option value="single">Sole Ownership</option>
                        <option value="joint">Joint Ownership</option>
                        <option value="tenancy_in_common">Tenancy in Common</option>
                    </select>
                </div>
                <div class="form-group md:col-span-2">
                    <label class="form-label">Description</label>
                    <input type="text" name="assets[${assetCount}][description]" class="form-input" placeholder="e.g., 3-bedroom house in KL">
                </div>
                <div class="form-group md:col-span-2">
                    <label class="form-label">Location / Address</label>
                    <input type="text" name="assets[${assetCount}][location]" class="form-input" placeholder="e.g., No. 123, Jalan Tun Razak">
                </div>
                <div class="form-group">
                    <label class="form-label">Year Acquired</label>
                    <input type="number" name="assets[${assetCount}][acquisition_year]" min="1950" max="2099" class="form-input">
                </div>
                <div class="form-group">
                    <label class="form-label">Ownership %</label>
                    <input type="number" name="assets[${assetCount}][ownership_percentage]" value="100" min="1" max="100" class="form-input">
                </div>
                <div class="form-group">
                    <label class="form-label">Current Value (RM)</label>
                    <input type="number" name="assets[${assetCount}][value]" step="0.01" class="form-input">
                </div>
                <div class="form-group">
                    <label class="form-label">Market Value (RM)</label>
                    <input type="number" name="assets[${assetCount}][market_value]" step="0.01" class="form-input">
                </div>
                <div class="form-group md:col-span-2">
                    <label class="form-label">Additional Notes</label>
                    <textarea name="assets[${assetCount}][notes]" rows="3" class="form-textarea"></textarea>
                </div>
            </div>
        `;
        container.appendChild(newAsset);
        assetCount++;
    }
    
    function addLiability() {
        const container = document.getElementById('liabilities-container');
        const newLiability = document.createElement('div');
        newLiability.className = 'liability-card bg-gray-50 rounded-xl p-6 border-2 border-gray-200';
        newLiability.innerHTML = `
            <div class="flex justify-between items-center mb-4">
                <h4 class="font-semibold text-gray-700">Liability ${liabilityCount + 1}</h4>
                <button type="button" onclick="this.parentElement.parentElement.remove()" class="text-red-500 hover:text-red-700">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="form-grid">
                <div class="form-group">
                    <label class="form-label">Liability Type</label>
                    <select name="liabilities[${liabilityCount}][type]" class="form-select">
                        <option value="">Select type</option>
                        <option value="housing_loan">Housing Loan / Mortgage</option>
                        <option value="personal_loan">Personal Loan</option>
                        <option value="car_loan">Car Loan</option>
                        <option value="business_loan">Business Loan</option>
                        <option value="credit_card">Credit Card Debt</option>
                        <option value="other">Other</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Creditor/Bank</label>
                    <input type="text" name="liabilities[${liabilityCount}][creditor]" class="form-input" placeholder="e.g., Maybank">
                </div>
                <div class="form-group">
                    <label class="form-label">Amount Owed (RM)</label>
                    <input type="number" name="liabilities[${liabilityCount}][amount]" step="0.01" class="form-input">
                </div>
                <div class="form-group">
                    <label class="form-label">Monthly Payment (RM)</label>
                    <input type="number" name="liabilities[${liabilityCount}][monthly_payment]" step="0.01" class="form-input">
                </div>
                <div class="form-group">
                    <label class="form-label">Outstanding Balance (RM)</label>
                    <input type="number" name="liabilities[${liabilityCount}][outstanding_balance]" step="0.01" class="form-input">
                </div>
                <div class="form-group">
                    <label class="form-label">Due Date</label>
                    <x-date-picker name="liabilities[${liabilityCount}][due_date]" />
                </div>
                <div class="form-group md:col-span-2">
                    <label class="form-label">Description</label>
                    <textarea name="liabilities[${liabilityCount}][description]" rows="2" class="form-textarea"></textarea>
                </div>
            </div>
        `;
        container.appendChild(newLiability);
        liabilityCount++;
    }

    function setupAgentOnboardAddressMerging() {
        const container = document.querySelector('.agent-onboard-address-container');
        if (!container) return;

        const fields = container.querySelectorAll('input');
        const mergedField = container.querySelector('.agent-onboard-merged');

        fields.forEach(field => {
            field.addEventListener('input', () => mergeAgentOnboardAddress());
            field.addEventListener('change', () => mergeAgentOnboardAddress());
            field.addEventListener('blur', () => mergeAgentOnboardAddress());
        });

        mergeAgentOnboardAddress();
    }

    function mergeAgentOnboardAddress() {
        const line1 = document.querySelector('.agent-onboard-addr-1')?.value || '';
        const line2 = document.querySelector('.agent-onboard-addr-2')?.value || '';
        const city = document.querySelector('.agent-onboard-city')?.value || '';
        const state = document.querySelector('.agent-onboard-state')?.value || '';
        const postal = document.querySelector('.agent-onboard-postal')?.value || '';
        const country = document.querySelector('.agent-onboard-country')?.value || '';

        const parts = [];
        if (line1) parts.push(line1);
        if (line2) parts.push(line2);
        if (city) parts.push(city);
        if (state) parts.push(state);
        if (postal) parts.push(postal);
        if (country) parts.push(country);

        const mergedAddress = parts.join(', ');
        const mergedField = document.querySelector('.agent-onboard-merged');
        if (mergedField) {
            mergedField.value = mergedAddress;
        }
    }
</script>
@endpush

@section('content')
<div class="onboard-container">
    <div class="max-w-5xl mx-auto p-6">
        <!-- Header -->
        <div class="modern-header">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900 mb-2">Onboard New Client</h1>
                    <p class="text-gray-600">Register a new client and start earning commissions</p>
                </div>
                <div class="coin-icon">
                    <i class="fas fa-coins text-4xl text-yellow-500"></i>
                </div>
            </div>
        </div>

        <!-- Commission Info -->
        <div class="commission-card">
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <i class="fas fa-chart-line text-blue-600 text-3xl"></i>
                </div>
                <div class="ml-6 flex-1">
                    <h3 class="text-xl font-bold text-gray-900 mb-4">Earn Commission on Every Referral</h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div class="text-center">
                            <div class="commission-badge badge-primary mb-3">
                                <i class="fas fa-percentage mr-2"></i>
                                10%
                            </div>
                            <p class="text-sm font-medium text-gray-700">Direct Referral</p>
                            <p class="text-xs text-gray-500">First level commission</p>
                        </div>
                        <div class="text-center">
                            <div class="commission-badge badge-secondary mb-3">
                                <i class="fas fa-users mr-2"></i>
                                5%
                            </div>
                            <p class="text-sm font-medium text-gray-700">Level 2</p>
                            <p class="text-xs text-gray-500">Second level commission</p>
                        </div>
                        <div class="text-center">
                            <div class="commission-badge badge-tertiary mb-3">
                                <i class="fas fa-network-wired mr-2"></i>
                                3%
                            </div>
                            <p class="text-sm font-medium text-gray-700">Level 3</p>
                            <p class="text-xs text-gray-500">Third level commission</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Registration Form -->
        <div class="form-container">
            <form method="POST" action="{{ route('agent.clients.store') }}">
                @csrf
                
                <!-- Personal Information -->
                <div class="form-section">
                    <div class="section-header">
                        <div class="section-icon personal-icon">
                            <i class="fas fa-user"></i>
                        </div>
                        <h3 class="section-title">Testator Information</h3>
                    </div>
                    <div class="form-grid">
                        <div class="form-group">
                            <label class="form-label">
                                First Name <span class="required-star">*</span>
                            </label>
                            <input type="text" name="first_name" required
                                   class="form-input"
                                   placeholder="Enter first name">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">
                                Last Name <span class="required-star">*</span>
                            </label>
                            <input type="text" name="last_name" required
                                   class="form-input"
                                   placeholder="Enter last name">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">
                                Email Address <span class="required-star">*</span>
                            </label>
                            <input type="email" name="email" required
                                   class="form-input"
                                   placeholder="client@example.com">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">
                                Phone Number <span class="required-star">*</span>
                            </label>
                            <input type="tel" name="phone" required
                                   class="form-input"
                                   placeholder="+60 12-345 6789">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Alternative Phone</label>
                            <input type="tel" name="alternative_phone"
                                   class="form-input"
                                   placeholder="+60 12-345 6789">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Preferred Contact</label>
                            <select name="preferred_contact" class="form-select">
                                <option value="phone">Phone</option>
                                <option value="email">Email</option>
                                <option value="alternative_phone">Alternative Phone</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">
                                ID Number <span class="required-star">*</span>
                            </label>
                            <input type="text" name="ic_number" required
                                   class="form-input"
                                   placeholder="Enter ID/IC number">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">
                                Country <span class="required-star">*</span>
                            </label>
                            <input type="text" name="country" required
                                   class="form-input"
                                   placeholder="Malaysia">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">
                                Identification Type <span class="required-star">*</span>
                            </label>
                            <select name="identification_type" required class="form-select">
                                <option value="">Select type</option>
                                <option value="ic">IC</option>
                                <option value="passport">Passport</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Date of Birth</label>
                            <x-date-picker name="date_of_birth" />
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Occupation</label>
                            <input type="text" name="occupation"
                                   class="form-input"
                                   placeholder="Enter occupation">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Source of Funds</label>
                            <input type="text" name="source_of_funds"
                                   class="form-input"
                                   placeholder="e.g., Salary, Business">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">
                                Account Type <span class="required-star">*</span>
                            </label>
                            <select name="account_type" required class="form-select">
                                <option value="">Select type</option>
                                <option value="basic">Basic</option>
                                <option value="premium">Premium</option>
                                <option value="vip">VIP</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <!-- Address Information -->
                <div class="form-section">
                    <div class="section-header">
                        <div class="section-icon address-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <h3 class="section-title">Address Information</h3>
                    </div>
                    <div class="form-group">
                        <label class="form-label">
                            Full Address <span class="required-star">*</span>
                        </label>
                        <div class="bg-gray-50 p-4 rounded-xl border-2 border-gray-200 agent-onboard-address-container">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                <div class="md:col-span-2">
                                    <input type="text" name="address_line_1" placeholder="Address Line 1 *"
                                           class="agent-onboard-addr-1 w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-purple-500 focus:ring-2 focus:ring-purple-100 outline-none transition-all bg-white"
                                           placeholder="Address Line 1 *">
                                </div>
                                <div class="md:col-span-2">
                                    <input type="text" name="address_line_2" placeholder="Address Line 2 (Optional)"
                                           class="agent-onboard-addr-2 w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-purple-500 focus:ring-2 focus:ring-purple-100 outline-none transition-all bg-white"
                                           placeholder="Address Line 2 (Optional)">
                                </div>
                                <div>
                                    <input type="text" name="city" placeholder="City *"
                                           class="agent-onboard-city w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-purple-500 focus:ring-2 focus:ring-purple-100 outline-none transition-all bg-white"
                                           placeholder="City *">
                                </div>
                                <div>
                                    <input type="text" name="state" placeholder="State *"
                                           class="agent-onboard-state w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-purple-500 focus:ring-2 focus:ring-purple-100 outline-none transition-all bg-white"
                                           placeholder="State *">
                                </div>
                                <div>
                                    <input type="text" name="postal_code" placeholder="Postal Code *"
                                           class="agent-onboard-postal w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-purple-500 focus:ring-2 focus:ring-purple-100 outline-none transition-all bg-white"
                                           placeholder="Postal Code *">
                                </div>
                                <div>
                                    <input type="text" name="country" placeholder="Country *" value="Malaysia"
                                           class="agent-onboard-country w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-purple-500 focus:ring-2 focus:ring-purple-100 outline-none transition-all bg-white"
                                           value="Malaysia">
                                </div>
                            </div>
                            <textarea name="address" rows="2" readonly
                                      class="agent-onboard-merged w-full mt-3 px-3 py-2 border-2 border-gray-200 rounded-lg bg-gray-100 text-gray-600 text-sm resize-none"
                                      placeholder="Complete address will appear here..."></textarea>
                        </div>
                    </div>
                </div>
                
                <!-- Emergency Contact -->
                <div class="form-section">
                    <div class="section-header">
                        <div class="section-icon emergency-icon">
                            <i class="fas fa-phone-alt"></i>
                        </div>
                        <h3 class="section-title">Emergency Contact</h3>
                    </div>
                    <div class="form-grid">
                        <div class="form-group">
                            <label class="form-label">Emergency Contact Name</label>
                            <input type="text" name="emergency_contact_name"
                                   class="form-input"
                                   placeholder="Emergency contact name">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Emergency Contact Phone</label>
                            <input type="tel" name="emergency_contact_phone"
                                   class="form-input"
                                   placeholder="Emergency contact phone">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Emergency Relationship</label>
                            <input type="text" name="emergency_relationship"
                                   class="form-input"
                                   placeholder="e.g., Spouse, Parent, Sibling">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Emergency Email</label>
                            <input type="email" name="emergency_email"
                                   class="form-input"
                                   placeholder="Emergency contact email">
                        </div>
                    </div>
                </div>
                
                <!-- Account Settings -->
                <div class="form-section">
                    <div class="section-header">
                        <div class="section-icon" style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white;">
                            <i class="fas fa-lock"></i>
                        </div>
                        <h3 class="section-title">Account Settings</h3>
                    </div>
                    <div class="form-grid">
                        <div class="form-group md:col-span-2">
                            <label class="form-label">Password <span class="required-star">*</span></label>
                            <input type="password" name="password" required minlength="8"
                                   class="form-input"
                                   placeholder="Minimum 8 characters">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Marital Status <span class="required-star">*</span></label>
                            <select name="marital_status" id="marital_status" required class="form-select">
                                <option value="">Select status</option>
                                <option value="single">Single</option>
                                <option value="married">Married</option>
                                <option value="divorced">Divorced</option>
                                <option value="widowed">Widowed</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Religion</label>
                            <select name="religion" class="form-select">
                                <option value="">Select religion</option>
                                <option value="islam">Islam</option>
                                <option value="christianity">Christianity</option>
                                <option value="hinduism">Hindu</option>
                                <option value="buddhism">Buddhism</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        
                        <div class="form-group" id="spouse_name_container" style="display: none;">
                            <label class="form-label">Spouse Name</label>
                            <input type="text" name="spouse_name"
                                   class="form-input"
                                   placeholder="Spouse full name">
                        </div>
                        
                        <div class="form-group" id="spouse_ic_container" style="display: none;">
                            <label class="form-label">Spouse IC/Passport</label>
                            <input type="text" name="spouse_ic_number"
                                   class="form-input"
                                   placeholder="Spouse IC or passport number">
                        </div>
                        
                        <div class="form-group" id="spouse_count_container" style="display: none;">
                            <label class="form-label">Number of Spouses</label>
                            <input type="number" name="spouse_count" min="1" value="1"
                                   class="form-input">
                        </div>
                        
                        <div class="form-group" id="children_count_container" style="display: none;">
                            <label class="form-label">Number of Children</label>
                            <input type="number" name="children_count" min="0" value="0"
                                   class="form-input">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Will Type Preference</label>
                            <select name="will_type_preference" class="form-select">
                                <option value="">Select type</option>
                                <option value="individual">Individual</option>
                                <option value="joint">Joint (with spouse)</option>
                                <option value="trust">Trust-based</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <!-- Family Members -->
                <div class="form-section">
                    <div class="section-header">
                        <div class="section-icon" style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: white;">
                            <i class="fas fa-users"></i>
                        </div>
                        <h3 class="section-title">Family Members</h3>
                    </div>
                    <div id="family-members-container" class="space-y-6">
                        <div class="family-member-card bg-gray-50 rounded-xl p-6 border-2 border-gray-200">
                            <div class="flex justify-between items-center mb-4">
                                <h4 class="font-semibold text-gray-700">Family Member 1</h4>
                            </div>
                            <div class="form-grid">
                                <div class="form-group">
                                    <label class="form-label">First Name</label>
                                    <input type="text" name="family_members[0][first_name]" class="form-input">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Last Name</label>
                                    <input type="text" name="family_members[0][last_name]" class="form-input">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Relationship</label>
                                    <select name="family_members[0][relationship]" class="form-select">
                                        <option value="">Select</option>
                                        <option value="spouse">Spouse</option>
                                        <option value="child">Child</option>
                                        <option value="parent">Parent</option>
                                        <option value="sibling">Sibling</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">IC/Passport</label>
                                    <input type="text" name="family_members[0][ic_number]" class="form-input">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Date of Birth</label>
                                    <x-date-picker name="family_members[0][date_of_birth]" />
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Phone</label>
                                    <input type="tel" name="family_members[0][phone]" class="form-input">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Email</label>
                                    <input type="email" name="family_members[0][email]" class="form-input">
                                </div>
                                <div class="form-group md:col-span-2">
                                    <label class="form-label">Address</label>
                                    <textarea name="family_members[0][address]" rows="2" class="form-textarea"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <button type="button" onclick="addFamilyMember()" class="mt-4 w-full py-3 border-2 border-dashed border-purple-300 rounded-xl text-purple-600 hover:bg-purple-50 transition-all">
                        <i class="fas fa-plus mr-2"></i>Add Another Family Member
                    </button>
                </div>
                
                <!-- Assets -->
                <div class="form-section">
                    <div class="section-header">
                        <div class="section-icon" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white;">
                            <i class="fas fa-home"></i>
                        </div>
                        <h3 class="section-title">Assets</h3>
                    </div>
                    <div id="assets-container" class="space-y-4">
                        <div class="asset-card bg-gray-50 rounded-xl p-6 border-2 border-gray-200">
                            <div class="flex justify-between items-center mb-4">
                                <h4 class="font-semibold text-gray-700">Asset 1</h4>
                            </div>
                            <div class="form-grid">
                                <div class="form-group">
                                    <label class="form-label">Asset Type</label>
                                    <select name="assets[0][type]" class="form-select">
                                        <option value="">Select type</option>
                                        <option value="property">Property / Real Estate</option>
                                        <option value="vehicle">Vehicle</option>
                                        <option value="bank_account">Bank Account</option>
                                        <option value="fixed_deposit">Fixed Deposit</option>
                                        <option value="investment">Investment / Stocks</option>
                                        <option value="insurance">Insurance Policy</option>
                                        <option value="epf">EPF / Retirement Fund</option>
                                        <option value="jewelry">Jewelry / Gold</option>
                                        <option value="business">Business Interest</option>
                                        <option value="other">Other</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Ownership Type</label>
                                    <select name="assets[0][ownership_type]" class="form-select">
                                        <option value="single">Sole Ownership</option>
                                        <option value="joint">Joint Ownership</option>
                                        <option value="tenancy_in_common">Tenancy in Common</option>
                                    </select>
                                </div>
                                <div class="form-group md:col-span-2">
                                    <label class="form-label">Description</label>
                                    <input type="text" name="assets[0][description]" class="form-input" placeholder="e.g., 3-bedroom house in KL, Proton X70">
                                </div>
                                <div class="form-group md:col-span-2">
                                    <label class="form-label">Location / Address</label>
                                    <input type="text" name="assets[0][location]" class="form-input" placeholder="e.g., No. 123, Jalan Tun Razak, 50400 Kuala Lumpur">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Year Acquired</label>
                                    <input type="number" name="assets[0][acquisition_year]" min="1950" max="2099" class="form-input" placeholder="e.g., 2020">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Ownership %</label>
                                    <input type="number" name="assets[0][ownership_percentage]" value="100" min="1" max="100" class="form-input">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Current Value (RM)</label>
                                    <input type="number" name="assets[0][value]" step="0.01" class="form-input" placeholder="e.g., 500000">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Market Value (RM)</label>
                                    <input type="number" name="assets[0][market_value]" step="0.01" class="form-input" placeholder="e.g., 650000">
                                </div>
                                <div class="form-group md:col-span-2">
                                    <label class="form-label">Additional Notes</label>
                                    <textarea name="assets[0][notes]" rows="3" class="form-textarea"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <button type="button" onclick="addAsset()" class="mt-4 w-full py-3 border-2 border-dashed border-green-300 rounded-xl text-green-600 hover:bg-green-50 transition-all">
                        <i class="fas fa-plus mr-2"></i>Add Another Asset
                    </button>
                </div>
                
                <!-- Liabilities -->
                <div class="form-section">
                    <div class="section-header">
                        <div class="section-icon" style="background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white;">
                            <i class="fas fa-credit-card"></i>
                        </div>
                        <h3 class="section-title">Liabilities (Debts)</h3>
                    </div>
                    <div id="liabilities-container" class="space-y-4">
                        <div class="liability-card bg-gray-50 rounded-xl p-6 border-2 border-gray-200">
                            <div class="flex justify-between items-center mb-4">
                                <h4 class="font-semibold text-gray-700">Liability 1</h4>
                            </div>
                            <div class="form-grid">
                                <div class="form-group">
                                    <label class="form-label">Liability Type</label>
                                    <select name="liabilities[0][type]" class="form-select">
                                        <option value="">Select type</option>
                                        <option value="housing_loan">Housing Loan / Mortgage</option>
                                        <option value="personal_loan">Personal Loan</option>
                                        <option value="car_loan">Car Loan</option>
                                        <option value="business_loan">Business Loan</option>
                                        <option value="credit_card">Credit Card Debt</option>
                                        <option value="other">Other</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Creditor/Bank</label>
                                    <input type="text" name="liabilities[0][creditor]" class="form-input" placeholder="e.g., Maybank, CIMB">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Amount Owed (RM)</label>
                                    <input type="number" name="liabilities[0][amount]" step="0.01" class="form-input" placeholder="e.g., 350000">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Monthly Payment (RM)</label>
                                    <input type="number" name="liabilities[0][monthly_payment]" step="0.01" class="form-input" placeholder="e.g., 2500">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Outstanding Balance (RM)</label>
                                    <input type="number" name="liabilities[0][outstanding_balance]" step="0.01" class="form-input" placeholder="e.g., 320000">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Due Date</label>
                                    <x-date-picker name="liabilities[0][due_date]" />
                                </div>
                                <div class="form-group md:col-span-2">
                                    <label class="form-label">Description</label>
                                    <textarea name="liabilities[0][description]" rows="2" class="form-textarea"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <button type="button" onclick="addLiability()" class="mt-4 w-full py-3 border-2 border-dashed border-red-300 rounded-xl text-red-600 hover:bg-red-50 transition-all">
                        <i class="fas fa-plus mr-2"></i>Add Another Liability
                    </button>
                </div>
                
                <!-- Terms and Submit -->
                <div class="terms-section">
                    <div class="checkbox-wrapper">
                        <input type="checkbox" required class="checkbox-input">
                        <label class="checkbox-label">
                            I confirm that I have the client's consent to register them and that all information provided is accurate. 
                            I understand that commission will be paid upon successful payment by the client.
                        </label>
                    </div>
                </div>
                
                <div class="form-actions">
                    <a href="{{ route('agent.clients.index') }}" class="btn btn-secondary">
                        Cancel
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-user-plus"></i>
                        Register Client
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection