<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-semibold text-zinc-900 dark:text-white dark:text-white">Add New Supplier</h1>
            <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400 dark:text-gray-400">Create a new supplier for your inventory</p>
        </div>
        <flux:button wire:navigate href="{{ route('inventory.suppliers.index') }}" variant="ghost">
            <flux:icon.arrow-left class="w-4 h-4" />
            Back to Suppliers
        </flux:button>
    </div>

    <!-- Form -->
    <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 p-6">
        <form wire:submit="save" class="space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Basic Information -->
                <div class="md:col-span-2">
                    <h3 class="text-lg font-medium text-zinc-900 dark:text-white dark:text-white mb-4">Basic Information</h3>
                </div>

                <!-- Name -->
                <div>
                    <flux:field>
                        <flux:label>Supplier Name*</flux:label>
                        <flux:input wire:model="name" placeholder="Enter supplier name" />
                        <flux:error name="name" />
                    </flux:field>
                </div>

                <!-- Company Name -->
                <div>
                    <flux:field>
                        <flux:label>Company Name</flux:label>
                        <flux:input wire:model="company_name" placeholder="Enter company name" />
                        <flux:error name="company_name" />
                    </flux:field>
                </div>

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

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

                <!-- Contact Person -->
                <div>
                    <flux:field>
                        <flux:label>Contact Person</flux:label>
                        <flux:input wire:model="contact_person" placeholder="Enter contact person name" />
                        <flux:error name="contact_person" />
                    </flux:field>
                </div>

                <!-- Payment Terms -->
                <div>
                    <flux:field>
                        <flux:label>Payment Terms</flux:label>
                        <flux:input wire:model="payment_terms" placeholder="e.g., Net 30, COD" />
                        <flux:error name="payment_terms" />
                    </flux:field>
                </div>

                <!-- Address Information -->
                <div class="md:col-span-2">
                    <h3 class="text-lg font-medium text-zinc-900 dark:text-white dark:text-white mb-4 mt-6">Address Information</h3>
                </div>

                <!-- Address -->
                <div class="md:col-span-2">
                    <flux:field>
                        <flux:label>Street Address</flux:label>
                        <flux:input wire:model="address" placeholder="Enter street address" />
                        <flux:error name="address" />
                    </flux:field>
                </div>

                <!-- City -->
                <div>
                    <flux:field>
                        <flux:label>City</flux:label>
                        <flux:input wire:model="city" placeholder="Enter city" />
                        <flux:error name="city" />
                    </flux:field>
                </div>

                <!-- State -->
                <div>
                    <flux:field>
                        <flux:label>State/Province</flux:label>
                        <flux:input wire:model="state" placeholder="Enter state or province" />
                        <flux:error name="state" />
                    </flux:field>
                </div>

                <!-- Zip Code -->
                <div>
                    <flux:field>
                        <flux:label>ZIP/Postal Code</flux:label>
                        <flux:input wire:model="zip_code" placeholder="Enter ZIP or postal code" />
                        <flux:error name="zip_code" />
                    </flux:field>
                </div>

                <!-- Rating -->
                <div>
                    <flux:field>
                        <flux:label>Rating (0-5)</flux:label>
                        <flux:input wire:model="rating" type="number" min="0" max="5" step="0.1" placeholder="0" />
                        <flux:error name="rating" />
                    </flux:field>
                </div>

                <!-- Status -->
                <div class="md:col-span-2">
                    <flux:field>
                        <flux:checkbox wire:model="is_active" label="Active Supplier" />
                        <flux:error name="is_active" />
                    </flux:field>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="flex items-center justify-end space-x-4 pt-6 border-t border-zinc-200 dark:border-zinc-700">
                <flux:button wire:navigate href="{{ route('inventory.suppliers.index') }}" variant="ghost">
                    Cancel
                </flux:button>
                <flux:button type="submit" variant="primary">
                    Create Supplier
                </flux:button>
            </div>
        </form>
    </div>
</div>
