Car-Repairs-Shop/resources/views/livewire/customers/edit.blade.php

<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 for {{ $customer->full_name }}</flux:subheading>
        </div>
        <flux:button href="/customers/{{ $customer->id }}" variant="outline" size="sm">
            <flux:icon name="arrow-left" class="size-4" />
            Back to Customer
        </flux:button>
    </div>

    <!-- Flash Messages -->
    @if (session()->has('success'))
        <div class="bg-green-50 border border-green-200 text-green-800 rounded-md p-4">
            <div class="flex">
                <flux:icon name="check-circle" class="h-5 w-5 text-green-400" />
                <div class="ml-3">
                    <p class="text-sm font-medium">{{ session('success') }}</p>
                </div>
            </div>
        </div>
    @endif

    <!-- 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-6">
            <!-- 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>

            <!-- 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>