<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <flux:heading size="xl">Edit Customer</flux:heading>
            <flux:subheading>Update customer information and manage user account for {{ $customer->full_name }}</flux:subheading>
        </div>
        <div class="flex space-x-2">
            <flux:button href="/customers/{{ $customer->id }}" variant="outline" size="sm">
                <flux:icon name="arrow-left" class="size-4" />
                Back to Customer
            </flux:button>
            @if($has_user_account && $customer->user && $customer->user->isCustomer())
                <flux:badge variant="success" size="sm">Has Portal Access</flux:badge>
            @elseif($has_user_account)
                <flux:badge variant="warning" size="sm">Portal Inactive</flux:badge>
            @else
                <flux:badge variant="outline" size="sm">No Portal Access</flux:badge>
            @endif
        </div>
    </div>

    <!-- Customer Edit Form -->
    <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
        <form wire:submit="updateCustomer" class="p-6 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>
            </div>

            <!-- Contact Information -->
            <div>
                <flux:heading size="lg" class="mb-4">Contact Information</flux:heading>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <flux:field>
                            <flux:label>Email *</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 *</flux:label>
                            <flux:input wire:model="phone" placeholder="Enter primary phone number" />
                            <flux:error name="phone" />
                        </flux:field>
                    </div>
                    <div class="md:col-span-2">
                        <flux:field>
                            <flux:label>Secondary Phone</flux:label>
                            <flux:input wire:model="secondary_phone" placeholder="Enter secondary phone number (optional)" />
                            <flux:error name="secondary_phone" />
                        </flux:field>
                    </div>
                </div>
            </div>

            <!-- Address Information -->
            <div>
                <flux:heading size="lg" class="mb-4">Address Information</flux:heading>
                <div class="space-y-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="Enter state" />
                                <flux:error name="state" />
                            </flux:field>
                        </div>
                        <div>
                            <flux:field>
                                <flux:label>ZIP Code *</flux:label>
                                <flux:input wire:model="zip_code" placeholder="Enter ZIP code" />
                                <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 class="space-y-4">
                    <div>
                        <flux:field>
                            <flux:label>Customer Status *</flux:label>
                            <div class="mt-1 space-y-2">
                                <label class="flex items-center">
                                    <input type="radio" wire:model="status" value="active" class="text-accent border-zinc-300 dark:border-zinc-600 focus:ring-2 focus:ring-accent" />
                                    <span class="ml-2 text-sm">Active</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="radio" wire:model="status" value="inactive" class="text-accent border-zinc-300 dark:border-zinc-600 focus:ring-2 focus:ring-accent" />
                                    <span class="ml-2 text-sm">Inactive</span>
                                </label>
                            </div>
                            <flux:error name="status" />
                        </flux:field>
                    </div>
                    <div>
                        <flux:field>
                            <flux:label>Notes</flux:label>
                            <flux:textarea wire:model="notes" placeholder="Add any additional notes about the customer..." rows="4" />
                            <flux:error name="notes" />
                        </flux:field>
                    </div>
                </div>
            </div>

            <!-- User Account Management -->
            <div>
                <flux:heading size="lg" class="mb-4">Customer Portal Access</flux:heading>
                
                @if($has_user_account)
                    <!-- Existing User Account -->
                    @if($customer->user && $customer->user->isCustomer())
                        <div class="bg-green-50 dark:bg-green-900/20 p-4 rounded-lg border border-green-200 dark:border-green-800">
                            <div class="flex items-center mb-4">
                                <flux:icon name="check-circle" class="h-5 w-5 text-green-600 mr-2" />
                                <span class="font-medium text-green-800 dark:text-green-200">Customer has active portal access</span>
                            </div>
                    @else
                        <div class="bg-yellow-50 dark:bg-yellow-900/20 p-4 rounded-lg border border-yellow-200 dark:border-yellow-800">
                            <div class="flex items-center mb-4">
                                <flux:icon name="exclamation-triangle" class="h-5 w-5 text-yellow-600 mr-2" />
                                <span class="font-medium text-yellow-800 dark:text-yellow-200">Customer portal access is inactive</span>
                            </div>
                    @endif
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <flux:field>
                                    <flux:label>User Status</flux:label>
                                    <select wire:model="user_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-blue-500">
                                        <option value="active">Active</option>
                                        <option value="inactive">Inactive</option>
                                    </select>
                                </flux:field>
                            </div>
                            
                            <div>
                                <flux:field>
                                    <flux:checkbox wire:model.live="reset_password" />
                                    <flux:label>Reset password</flux:label>
                                    <flux:description>Generate new password for customer portal</flux:description>
                                </flux:field>
                            </div>
                        </div>

                        @if($reset_password)
                            <div class="mt-4">
                                <flux:field>
                                    <flux:label>New Password</flux:label>
                                    <div class="flex space-x-2">
                                        <flux:input wire:model="new_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="new_password" />
                                    <flux:description>Customer will need to use this password to login</flux:description>
                                </flux:field>
                            </div>
                        @endif
                    </div>
                @else
                    <!-- No User Account -->
                    <div class="bg-yellow-50 dark:bg-yellow-900/20 p-4 rounded-lg border border-yellow-200 dark:border-yellow-800">
                        <div class="flex items-center mb-4">
                            <flux:icon name="exclamation-triangle" class="h-5 w-5 text-yellow-600 mr-2" />
                            <span class="font-medium text-yellow-800 dark:text-yellow-200">Customer has no portal access</span>
                        </div>
                        
                        <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="mt-4">
                                <flux:field>
                                    <flux:label>Password</flux:label>
                                    <div class="flex space-x-2">
                                        <flux:input wire:model="new_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="new_password" />
                                    <flux:description>Customer will receive this password to access their portal</flux:description>
                                </flux:field>
                            </div>
                        @endif
                    </div>
                @endif
            </div>

            <!-- Form Actions -->
            <div class="flex items-center justify-between pt-6 border-t border-zinc-200 dark:border-zinc-700">
                <flux:button href="/customers/{{ $customer->id }}" variant="outline">
                    Cancel
                </flux:button>
                <flux:button type="submit" variant="primary">
                    <flux:icon name="check" class="size-4" />
                    Update Customer
                </flux:button>
            </div>
        </form>
    </div>
</div>
