<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
                    <!-- Additional Information -->
                <div>
                    <flux:heading size="lg" class="mb-4">Additional Information</flux:heading>
                    <div>
                        <flux:field>
                            <flux:label>Notes</flux:label>
                            <flux:textarea wire:model="notes" placeholder="Enter any additional notes about this customer..." rows="3" />
                            <flux:error name="notes" />
                        </flux:field>
                    </div>
                </div>

                <!-- User Account Settings -->
                <div>
                    <flux:heading size="lg" class="mb-4">Customer Portal Access</flux:heading>
                    <div class="space-y-4">
                        <div>
                            <flux:field>
                                <flux:checkbox wire:model.live="create_user_account" />
                                <flux:label>Create customer portal account</flux:label>
                                <flux:description>Allow this customer to login and access their portal</flux:description>
                            </flux:field>
                        </div>

                        @if($create_user_account)
                            <div class="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg border border-blue-200 dark:border-blue-800">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <flux:field>
                                            <flux:label>Password *</flux:label>
                                            <div class="flex space-x-2">
                                                <flux:input wire:model="password" type="text" placeholder="Generated password" class="flex-1" />
                                                <flux:button type="button" wire:click="generatePassword" variant="outline" size="sm">
                                                    Generate
                                                </flux:button>
                                            </div>
                                            <flux:error name="password" />
                                            <flux:description>Customer will receive this password via email</flux:description>
                                        </flux:field>
                                    </div>
                                    
                                    <div class="flex items-center">
                                        <flux:field>
                                            <flux:checkbox wire:model="send_welcome_email" />
                                            <flux:label>Send welcome email with login details</flux:label>
                                        </flux:field>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Form Actions -->:heading size="xl">Add New Customer</flux:heading>
            <flux:subheading>Create a new customer profile and optional user account</flux:subheading>
        </div>
        <flux:button href="/customers-list" variant="outline" size="sm">
            <flux:icon name="arrow-left" class="size-4" />
            Back to Customers
        </flux:button>
    </div>

    <!-- Customer Form -->
    <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
        <div class="p-6">
            <form wire:submit="save" class="space-y-8">
                <!-- Personal Information -->
                <div>
                    <flux:heading size="lg" class="mb-4">Personal Information</flux:heading>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <flux:field>
                                <flux:label>First Name *</flux:label>
                                <flux:input wire:model="first_name" placeholder="Enter first name" />
                                <flux:error name="first_name" />
                            </flux:field>
                        </div>
                        
                        <div>
                            <flux:field>
                                <flux:label>Last Name *</flux:label>
                                <flux:input wire:model="last_name" placeholder="Enter last name" />
                                <flux:error name="last_name" />
                            </flux:field>
                        </div>
                        
                        <div>
                            <flux:field>
                                <flux:label>Email Address *</flux:label>
                                <flux:input wire:model="email" type="email" placeholder="Enter email address" />
                                <flux:error name="email" />
                            </flux:field>
                        </div>
                        
                        <div>
                            <flux:field>
                                <flux:label>Phone Number *</flux:label>
                                <flux:input wire:model="phone" placeholder="Enter phone number" />
                                <flux:error name="phone" />
                            </flux:field>
                        </div>
                        
                        <div>
                            <flux:field>
                                <flux:label>Secondary Phone</flux:label>
                                <flux:input wire:model="secondary_phone" placeholder="Enter secondary phone (optional)" />
                                <flux:error name="secondary_phone" />
                            </flux:field>
                        </div>
                        
                        <div>
                            <flux:field>
                                <flux:label>Status *</flux:label>
                                <select wire:model="status" class="w-full rounded-md border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-2 focus:ring-blue-500">
                                    <option value="active">Active</option>
                                    <option value="inactive">Inactive</option>
                                </select>
                                <flux:error name="status" />
                            </flux:field>
                        </div>
                    </div>
                </div>

                <!-- Address Information -->
                <div>
                    <flux:heading size="lg" class="mb-4">Address Information</flux:heading>
                    <div class="grid grid-cols-1 gap-4">
                        <div>
                            <flux:field>
                                <flux:label>Street Address *</flux:label>
                                <flux:input wire:model="address" placeholder="Enter street address" />
                                <flux:error name="address" />
                            </flux:field>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div>
                                <flux:field>
                                    <flux:label>City *</flux:label>
                                    <flux:input wire:model="city" placeholder="Enter city" />
                                    <flux:error name="city" />
                                </flux:field>
                            </div>
                            
                            <div>
                                <flux:field>
                                    <flux:label>State *</flux:label>
                                    <flux:input wire:model="state" placeholder="CA" maxlength="2" />
                                    <flux:error name="state" />
                                </flux:field>
                            </div>
                            
                            <div>
                                <flux:field>
                                    <flux:label>ZIP Code *</flux:label>
                                    <flux:input wire:model="zip_code" placeholder="12345" />
                                    <flux:error name="zip_code" />
                                </flux:field>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Additional Information -->
                <div>
                    <flux:heading size="lg" class="mb-4">Additional Information</flux:heading>
                    <div>
                        <flux:field>
                            <flux:label>Notes</flux:label>
                            <flux:textarea wire:model="notes" placeholder="Enter any additional notes about this customer..." rows="3" />
                            <flux:error name="notes" />
                        </flux:field>
                    </div>
                </div>

                <!-- User Account Settings -->
                <div>
                    <flux:heading size="lg" class="mb-4">Customer Portal Access</flux:heading>
                    <div class="space-y-4">
                        <div>
                            <flux:field>
                                <flux:checkbox wire:model.live="create_user_account" />
                                <flux:label>Create customer portal account</flux:label>
                                <flux:description>Allow this customer to login and access their portal</flux:description>
                            </flux:field>
                        </div>

                        @if($create_user_account)
                            <div class="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg border border-blue-200 dark:border-blue-800">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <flux:field>
                                            <flux:label>Password *</flux:label>
                                            <div class="flex space-x-2">
                                                <flux:input wire:model="password" type="text" placeholder="Generated password" class="flex-1" />
                                                <flux:button type="button" wire:click="generatePassword" variant="outline" size="sm">
                                                    Generate
                                                </flux:button>
                                            </div>
                                            <flux:error name="password" />
                                            <flux:description>Customer will receive this password via email</flux:description>
                                        </flux:field>
                                    </div>
                                    
                                    <div class="flex items-center">
                                        <flux:field>
                                            <flux:checkbox wire:model="send_welcome_email" />
                                            <flux:label>Send welcome email with login details</flux:label>
                                        </flux:field>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="flex items-center justify-end space-x-3 pt-6 border-t border-zinc-200 dark:border-zinc-700">
                    <flux:button href="/customers-list" variant="outline">Cancel</flux:button>
                    <flux:button type="submit">
                        <flux:icon name="check" class="size-4" />
                        Create Customer
                    </flux:button>
                </div>
            </form>
        </div>
    </div>
</div>
