<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personal Information - Immia Finance</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50 min-h-screen flex items-center justify-center py-8">
    <div class="max-w-4xl w-full mx-4">
        <!-- Logo -->
        <div class="text-center mb-8">
            <div class="flex items-center justify-center space-x-3 mb-4">
                <div class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center">
                    <i class="fas fa-hand-holding-usd text-white text-xl"></i>
                </div>
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">IMMIA FINANCE</h1>
                    <p class="text-blue-600 text-sm">Customer Portal</p>
                </div>
            </div>
            <h2 class="text-3xl font-bold text-gray-900">Personal Information</h2>
            <p class="text-gray-600 mt-2">Step 3: Complete your personal details</p>
        </div>

        <!-- Personal Information Form -->
        <div class="bg-white rounded-2xl shadow-lg p-8">
            <form method="POST" action="{{ route('customer.register.step3.submit') }}">
                @csrf

                <div class="space-y-8">
                    <!-- Personal Details Section -->
                    <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6">
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">Personal Details</h3>
                        <p class="text-gray-600 mb-6">Your basic personal information</p>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- Title -->
                            <div>
                                <label for="title" class="block text-sm font-medium text-gray-700 mb-1">Title *</label>
                                <select id="title" name="title" required 
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                                    <option value="">Select Title</option>
                                    <option value="Dr" {{ old('title') == 'Dr' ? 'selected' : '' }}>Dr</option>
                                    <option value="Prof" {{ old('title') == 'Prof' ? 'selected' : '' }}>Prof</option>
                                    <option value="Mr" {{ old('title') == 'Mr' ? 'selected' : '' }}>Mr</option>
                                    <option value="Mrs" {{ old('title') == 'Mrs' ? 'selected' : '' }}>Mrs</option>
                                    <option value="Miss" {{ old('title') == 'Miss' ? 'selected' : '' }}>Miss</option>
                                </select>
                                @error('title')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>

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

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

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

                            <!-- Middle Name -->
                            <div>
                                <label for="middle_name" class="block text-sm font-medium text-gray-700 mb-1">Middle Name</label>
                                <input type="text" id="middle_name" name="middle_name" value="{{ old('middle_name') }}" 
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                                    placeholder="Enter your middle name">
                                @error('middle_name')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Full Name (Auto-generated) -->
                            <div class="md:col-span-2">
                                <label for="customer" class="block text-sm font-medium text-gray-700 mb-1">
                                    Full Name (Auto-generated) *
                                </label>
                                <input type="text" id="customer" name="customer" value="{{ old('customer') }}" readonly required 
                                    class="w-full px-4 py-3 border border-gray-300 bg-gray-50 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                                    placeholder="Full name will be generated automatically">
                                @error('customer')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                                <p class="text-xs text-gray-500 mt-1">This field is automatically generated from your title, surname, and first name</p>
                            </div>
                        </div>
                    </div>

                    <!-- Contact Information Section -->
                    <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6">
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">Contact Information</h3>
                        <p class="text-gray-600 mb-6">Your contact details</p>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- Phone Number -->
                            <div>
                                <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">
                                    Mobile Number *
                                </label>
                                <input type="tel" id="phone" name="phone" value="{{ old('phone') }}" required 
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                                    placeholder="Enter your mobile number">
                                @error('phone')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>

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

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

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

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

                    <!-- Identification Section -->
                    <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6">
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">Identification</h3>
                        <p class="text-gray-600 mb-6">Your identification details</p>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- Customer Group -->
                            <div>
                                <label for="cgroup" class="block text-sm font-medium text-gray-700 mb-1">
                                    Customer Type *
                                </label>
                                <select id="cgroup" name="cgroup" required 
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                                    <option value="">Select customer type</option>
                                    <option value="Individual" {{ old('cgroup') == 'Individual' ? 'selected' : '' }}>Individual</option>
                                    <option value="Company" {{ old('cgroup') == 'Company' ? 'selected' : '' }}>Company</option>
                                </select>
                                @error('cgroup')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- ID Type -->
                            <div>
                                <label for="idtype" class="block text-sm font-medium text-gray-700 mb-1">
                                    ID Type *
                                </label>
                                <select id="idtype" name="idtype" required 
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                                    <option value="">Select ID type</option>
                                    <option value="NRC" {{ old('idtype') == 'NRC' ? 'selected' : '' }}>NRC</option>
                                    <option value="Passport" {{ old('idtype') == 'Passport' ? 'selected' : '' }}>Passport</option>
                                    <option value="Driving License" {{ old('idtype') == 'Driving License' ? 'selected' : '' }}>Driving License</option>
                                </select>
                                @error('idtype')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>

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

                <!-- Action Buttons -->
                <div class="flex space-x-4 mt-8">
                    <a 
                        href="{{ route('customer.register.step2') }}" 
                        class="flex-1 bg-gray-500 hover:bg-gray-600 text-white py-3 px-6 rounded-lg font-semibold text-center transition-colors"
                    >
                        <i class="fas fa-arrow-left mr-2"></i>Back
                    </a>
                    <button 
                        type="submit" 
                        class="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg font-semibold transition-colors"
                    >
                        Complete Registration
                        <i class="fas fa-check ml-2"></i>
                    </button>
                </div>
            </form>
        </div>

        <!-- Progress Steps -->
        <div class="flex justify-center mt-8">
            <div class="flex items-center space-x-4">
                <div class="flex flex-col items-center">
                    <div class="w-8 h-8 bg-green-500 text-white rounded-full flex items-center justify-center text-sm font-semibold">
                        <i class="fas fa-check"></i>
                    </div>
                    <span class="text-xs text-green-500 font-medium mt-1">Email & Password</span>
                </div>
                <div class="w-12 h-0.5 bg-green-500"></div>
                <div class="flex flex-col items-center">
                    <div class="w-8 h-8 bg-green-500 text-white rounded-full flex items-center justify-center text-sm font-semibold">
                        <i class="fas fa-check"></i>
                    </div>
                    <span class="text-xs text-green-500 font-medium mt-1">Profile Picture</span>
                </div>
                <div class="w-12 h-0.5 bg-blue-600"></div>
                <div class="flex flex-col items-center">
                    <div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-semibold">
                        3
                    </div>
                    <span class="text-xs text-blue-600 font-medium mt-1">Personal Info</span>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const titleSelect = document.getElementById('title');
            const surnameInput = document.getElementById('surname');
            const firstNameInput = document.getElementById('first_name');
            const middleNameInput = document.getElementById('middle_name');
            const fullNameInput = document.getElementById('customer');

            function updateFullName() {
                const title = titleSelect.value;
                const surname = surnameInput.value;
                const firstName = firstNameInput.value;
                const middleName = middleNameInput.value;

                let fullName = '';
                
                if (title) {
                    fullName += title + ' ';
                }
                
                if (surname) {
                    fullName += surname + ' ';
                }
                
                if (firstName) {
                    fullName += firstName + ' ';
                }
                
                if (middleName) {
                    fullName += middleName;
                }

                fullNameInput.value = fullName.trim();
            }

            // Add event listeners to update full name automatically
            titleSelect.addEventListener('change', updateFullName);
            surnameInput.addEventListener('input', updateFullName);
            firstNameInput.addEventListener('input', updateFullName);
            middleNameInput.addEventListener('input', updateFullName);

            // Initialize full name on page load
            updateFullName();
        });
    </script>
</body>
</html>