@extends('layouts.portal')

@section('title', 'Edit Client')
@section('page_title', 'Edit Client')
@section('page_subtitle', 'Update client information and assign staff')

@section('sidebar')
    <ul class="space-y-1">
        <li>
            <a href="{{ route('admin.dashboard') }}" class="sidebar-item flex items-center p-3 text-gray-300 hover:text-white">
                <i class="fas fa-tachometer-alt w-5 mr-3 text-center"></i>
                <span>Dashboard</span>
            </a>
        </li>
        <li class="pt-4 pb-2">
            <p class="px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Client Management</p>
        </li>
        <li>
            <a href="{{ route('admin.clients') }}" class="sidebar-item active flex items-center p-3 text-white">
                <i class="fas fa-users w-5 mr-3 text-center"></i>
                <span>Clients</span>
            </a>
        </li>
    </ul>
@endsection

@push('styles')
<style>
    .modern-edit-container {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        min-height: 100vh;
    }
    
    .modern-header-card {
        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);
    }
    
    .info-alert {
        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
        border: 1px solid #3b82f6;
        border-radius: 16px;
        padding: 20px;
        margin-bottom: 24px;
        box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1);
    }
    
    .form-section {
        background: white;
        border-radius: 16px;
        margin-bottom: 20px;
        overflow: hidden;
        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);
        transition: all 0.3s ease;
    }
    
    .form-section:hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        transform: translateY(-2px);
    }
    
    .section-header {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        padding: 24px 32px;
        border-bottom: 1px solid rgba(226, 232, 240, 0.5);
    }
    
    .section-content {
        padding: 32px;
    }
    
    .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;
        transition: color 0.2s ease;
    }
    
    .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);
        background: #ffffff;
    }
    
    .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);
    }
    
    .password-field {
        position: relative;
    }
    
    .password-toggle {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: #6b7280;
        cursor: pointer;
        padding: 8px;
        border-radius: 8px;
        transition: all 0.2s ease;
    }
    
    .password-toggle:hover {
        background: #f3f4f6;
        color: #374151;
    }
    
    .security-section {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        border-left: 4px solid #f59e0b;
    }
    
    .security-section .section-header {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    }
    
    .identification-section {
        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
        border-left: 4px solid #3b82f6;
    }
    
    .identification-section .section-header {
        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    }
    
    .form-actions {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        padding: 32px;
        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;
    }
    
    .password-strength {
        height: 4px;
        border-radius: 2px;
        margin-top: 8px;
        transition: all 0.3s ease;
        background: #e5e7eb;
    }
    
    .required-star {
        color: #ef4444;
        margin-left: 2px;
    }
    
    .input-icon {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #3b82f6;
        pointer-events: none;
    }
    
    .form-hint {
        font-size: 12px;
        color: #6b7280;
        margin-top: 4px;
    }
    
    @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; }
    .form-section:nth-child(5) { animation-delay: 0.4s; }
    .form-section:nth-child(6) { animation-delay: 0.5s; }
</style>
@endpush

@section('content')
<div class="modern-edit-container">
    <div class="max-w-6xl mx-auto p-6">
        <!-- Header -->
        <div class="modern-header-card">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900 mb-2">Edit Client</h1>
                    <p class="text-gray-600">Update client information and manage account settings</p>
                </div>
                <a href="{{ route('admin.clients') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i>
                    Back to Clients
                </a>
            </div>
        </div>

        <!-- Client Info Card -->
        @if($client->referred_by)
        <div class="bg-gradient-to-r from-indigo-50 to-blue-50 border-l-4 border-indigo-500 rounded-lg shadow-sm p-4 mb-4">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="bg-indigo-100 rounded-full p-2">
                        <i class="fas fa-user-friends text-indigo-600 text-lg"></i>
                    </div>
                </div>
                <div class="ml-4 flex-1">
                    <h3 class="text-base font-semibold text-gray-900 mb-1">Agent Referred Client</h3>
                    <div class="flex flex-col sm:flex-row sm:items-center gap-2">
                        <div class="flex items-center text-sm text-gray-700">
                            <i class="fas fa-user-tie mr-2 text-indigo-500"></i>
                            <span class="font-medium">{{ $client->referredByUser->name ?? 'Unknown Agent' }}</span>
                        </div>
                        <div class="hidden sm:block text-gray-400">•</div>
                        <div class="flex items-center text-sm">
                            <span class="text-gray-600">Status:</span>
                            <span class="ml-1 px-2 py-1 text-xs font-semibold rounded-full 
                                @if($client->status === 'active') bg-green-100 text-green-800
                                @elseif($client->status === 'pending') bg-yellow-100 text-yellow-800
                                @elseif($client->status === 'inactive') bg-red-100 text-red-800
                                @else bg-gray-100 text-gray-800
                                @endif">
                                {{ ucfirst($client->status) }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <!-- Edit Form -->
        <form method="POST" action="{{ route('admin.clients.update', $client) }}">
            @csrf
            @method('PUT')
            
            <!-- Personal Information -->
            <div class="form-section">
                <div class="section-header">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-user text-blue-600 mr-3"></i>
                        Personal Information
                    </h3>
                </div>
                <div class="section-content">
                    <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
                                   value="{{ $client->first_name }}"
                                   class="form-input">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">
                                Last Name <span class="required-star">*</span>
                            </label>
                            <input type="text" name="last_name" required
                                   value="{{ $client->last_name }}"
                                   class="form-input">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">
                                Email Address <span class="required-star">*</span>
                            </label>
                            <input type="email" name="email" required
                                   value="{{ $client->email }}"
                                   class="form-input">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">
                                Phone Number <span class="required-star">*</span>
                            </label>
                            <input type="tel" name="phone" required
                                   value="{{ $client->phone }}"
                                   class="form-input">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Alternative Phone</label>
                            <input type="tel" name="alternative_phone"
                                   value="{{ $client->alternative_phone }}"
                                   class="form-input">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Preferred Contact</label>
                            <select name="preferred_contact" class="form-select">
                                <option value="phone" {{ $client->preferred_contact == 'phone' ? 'selected' : '' }}>Phone</option>
                                <option value="email" {{ $client->preferred_contact == 'email' ? 'selected' : '' }}>Email</option>
                                <option value="alternative_phone" {{ $client->preferred_contact == 'alternative_phone' ? 'selected' : '' }}>Alternative Phone</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">
                                Country <span class="required-star">*</span>
                            </label>
                            <input type="text" name="country" required
                                   value="{{ $client->country }}"
                                   class="form-input">
                        </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="ic" {{ $client->identification_type == 'ic' ? 'selected' : '' }}>National IC</option>
                                <option value="passport" {{ $client->identification_type == 'passport' ? 'selected' : '' }}>Passport</option>
                                <option value="other" {{ $client->identification_type == 'other' ? 'selected' : '' }}>Other ID</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Date of Birth</label>
                            <x-date-picker
                    name="date_of_birth"
                />date_of_birth ? $client->date_of_birth->format('Y-m-d') : '' }}"
                                   class="form-input">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Occupation</label>
                            <input type="text" name="occupation"
                                   value="{{ $client->occupation }}"
                                   class="form-input">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Source of Funds</label>
                            <input type="text" name="source_of_funds"
                                   value="{{ $client->source_of_funds }}"
                                   class="form-input">
                        </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="basic" {{ $client->account_type == 'basic' ? 'selected' : '' }}>Basic</option>
                                <option value="premium" {{ $client->account_type == 'premium' ? 'selected' : '' }}>Premium</option>
                                <option value="vip" {{ $client->account_type == 'vip' ? 'selected' : '' }}>VIP</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Address Information -->
            <div class="form-section">
                <div class="section-header">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-map-marker-alt text-green-600 mr-3"></i>
                        Address Information
                    </h3>
                </div>
                <div class="section-content">
                    <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 admin-client-edit-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="admin-client-edit-addr-1 w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition-all bg-white"
                                           value="{{ old('address_line_1') }}">
                                </div>
                                <div class="md:col-span-2">
                                    <input type="text" name="address_line_2" placeholder="Address Line 2 (Optional)"
                                           class="admin-client-edit-addr-2 w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition-all bg-white"
                                           value="{{ old('address_line_2') }}">
                                </div>
                                <div>
                                    <input type="text" name="city" placeholder="City *"
                                           class="admin-client-edit-city w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition-all bg-white"
                                           value="{{ old('city') }}">
                                </div>
                                <div>
                                    <input type="text" name="state" placeholder="State *"
                                           class="admin-client-edit-state w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition-all bg-white"
                                           value="{{ old('state') }}">
                                </div>
                                <div>
                                    <input type="text" name="postal_code" placeholder="Postal Code *"
                                           class="admin-client-edit-postal w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition-all bg-white"
                                           value="{{ old('postal_code') }}">
                                </div>
                                <div>
                                    <input type="text" name="country" placeholder="Country *" value="Malaysia"
                                           class="admin-client-edit-country w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition-all bg-white"
                                           value="{{ old('country', 'Malaysia') }}">
                                </div>
                            </div>
                            <textarea name="address" rows="2" readonly
                                      class="admin-client-edit-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...">{{ old('address', $client->address) }}</textarea>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Emergency Contact -->
            <div class="form-section">
                <div class="section-header">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-phone-alt text-red-600 mr-3"></i>
                        Emergency Contact
                    </h3>
                </div>
                <div class="section-content">
                    <div class="form-grid">
                        <div class="form-group">
                            <label class="form-label">Emergency Contact Name</label>
                            <input type="text" name="emergency_contact_name"
                                   value="{{ $client->emergency_contact_name }}"
                                   class="form-input">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Emergency Contact Phone</label>
                            <input type="tel" name="emergency_contact_phone"
                                   value="{{ $client->emergency_contact_phone }}"
                                   class="form-input">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Emergency Relationship</label>
                            <input type="text" name="emergency_relationship"
                                   value="{{ $client->emergency_relationship }}"
                                   class="form-input">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Emergency Email</label>
                            <input type="email" name="emergency_email"
                                   value="{{ $client->emergency_email }}"
                                   class="form-input">
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Account Settings -->
            <div class="form-section">
                <div class="section-header">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-cog text-purple-600 mr-3"></i>
                        Account Settings
                    </h3>
                </div>
                <div class="section-content">
                    <div class="form-grid">
                        <div class="form-group">
                            <label class="form-label">
                                Account Status <span class="required-star">*</span>
                            </label>
                            <select name="status" required class="form-select">
                                <option value="inactive" {{ $client->status == 'inactive' ? 'selected' : '' }}>Inactive (Pending Approval)</option>
                                <option value="active" {{ $client->status == 'active' ? 'selected' : '' }}>Active</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Assigned Staff</label>
                            <select name="assigned_staff_id" class="form-select">
                                <option value="">Select Staff Member</option>
                                @foreach($staff as $staffMember)
                                    <option value="{{ $staffMember->id }}" {{ $client->assigned_staff_id == $staffMember->id ? 'selected' : '' }}>
                                        {{ $staffMember->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Security Information -->
            <div class="form-section security-section">
                <div class="section-header">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-shield-alt text-yellow-600 mr-3"></i>
                        Security Information
                    </h3>
                </div>
                <div class="section-content">
                    <div class="form-grid">
                        <div class="form-group">
                            <label class="form-label">Current Password</label>
                            <div class="password-field">
                                <input type="password" id="currentPassword" value="********" readonly
                                       class="form-input pr-12" style="background: #f9fafb; color: #6b7280;">
                                <button type="button" onclick="togglePassword('currentPassword')" 
                                        class="password-toggle">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                            <p class="form-hint">Current client password (hidden for security)</p>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">New Password</label>
                            <div class="password-field">
                                <input type="password" name="password" id="newPassword"
                                       placeholder="Leave blank to keep current password"
                                       class="form-input pr-12">
                                <button type="button" onclick="togglePassword('newPassword')" 
                                        class="password-toggle">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                            <div id="passwordStrength" class="password-strength"></div>
                            <p class="form-hint">Leave blank to keep current password</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Identification Information -->
            <div class="form-section identification-section">
                <div class="section-header">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-id-card text-blue-600 mr-3"></i>
                        Identification Information
                    </h3>
                </div>
                <div class="section-content">
                    <div class="form-grid">
                        <div class="form-group">
                            <label class="form-label">
                                ID Number <span class="required-star">*</span>
                            </label>
                            <div class="password-field">
                                <input type="text" name="ic_number" required
                                       value="{{ $client->ic_number }}"
                                       class="form-input pr-12 font-mono">
                                <div class="input-icon">
                                    <i class="fas fa-fingerprint"></i>
                                </div>
                            </div>
                            <p class="form-hint">Government-issued identification number</p>
                        </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="ic" {{ $client->identification_type == 'ic' ? 'selected' : '' }}>National IC</option>
                                <option value="passport" {{ $client->identification_type == 'passport' ? 'selected' : '' }}>Passport</option>
                                <option value="other" {{ $client->identification_type == 'other' ? 'selected' : '' }}>Other ID</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Form Actions -->
            <div class="form-section">
                <div class="form-actions">
                    <div class="flex justify-end space-x-4">
                        <a href="{{ route('admin.clients') }}" class="btn btn-secondary">
                            Cancel
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i>
                            Update Client
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

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

function togglePassword(inputId) {
    const input = document.getElementById(inputId);
    const icon = event.currentTarget.querySelector('i');
    
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
    } else {
        input.type = 'password';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
    }
}

// Password strength indicator
document.getElementById('newPassword').addEventListener('input', function(e) {
    const password = e.target.value;
    const strengthBar = document.getElementById('passwordStrength');
    
    if (password.length === 0) {
        strengthBar.style.width = '0%';
        strengthBar.style.backgroundColor = '#e5e7eb';
        return;
    }
    
    let strength = 0;
    if (password.length >= 8) strength++;
    if (password.match(/[a-z]/)) strength++;
    if (password.match(/[A-Z]/)) strength++;
    if (password.match(/[0-9]/)) strength++;
    if (password.match(/[^a-zA-Z0-9]/)) strength++;
    
    const percentage = (strength / 5) * 100;
    strengthBar.style.width = percentage + '%';
    
    if (strength <= 2) {
        strengthBar.style.backgroundColor = '#ef4444';
    } else if (strength <= 3) {
        strengthBar.style.backgroundColor = '#f59e0b';
    } else {
        strengthBar.style.backgroundColor = '#10b981';
    }
});

// Form validation
document.querySelector('form').addEventListener('submit', function(e) {
    const newPassword = document.getElementById('newPassword').value;
    const icNumber = document.querySelector('input[name="ic_number"]').value;
    
    if (newPassword && newPassword.length < 6) {
        e.preventDefault();
        alert('Password must be at least 6 characters long');
        return;
    }
    
    if (!icNumber) {
        e.preventDefault();
        alert('IC Number is required');
        return;
    }
});

// Auto-format IC number
document.querySelector('input[name="ic_number"]').addEventListener('input', function(e) {
    let value = e.target.value.replace(/\s/g, '').toUpperCase();
    if (value.length > 12) {
        value = value.substring(0, 12);
    }
    e.target.value = value;
});

function setupAdminClientEditAddressMerging() {
    const container = document.querySelector('.admin-client-edit-address-container');
    if (!container) return;

    const fields = container.querySelectorAll('input');
    const mergedField = container.querySelector('.admin-client-edit-merged');

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

    mergeAdminClientEditAddress();
}

function mergeAdminClientEditAddress() {
    const line1 = document.querySelector('.admin-client-edit-addr-1')?.value || '';
    const line2 = document.querySelector('.admin-client-edit-addr-2')?.value || '';
    const city = document.querySelector('.admin-client-edit-city')?.value || '';
    const state = document.querySelector('.admin-client-edit-state')?.value || '';
    const postal = document.querySelector('.admin-client-edit-postal')?.value || '';
    const country = document.querySelector('.admin-client-edit-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('.admin-client-edit-merged');
    if (mergedField) {
        mergedField.value = mergedAddress;
    }
}
</script>
@endpush