<div class="space-y-4">
    <flux:card class="p-6">
        <!-- Price Header -->
        <div class="mb-6">
            <div class="flex items-baseline gap-2">
                <flux:heading size="xl" class="text-zinc-900 dark:text-zinc-100">
                    ${{ number_format($property->price_per_night) }}
                </flux:heading>
                <flux:text class="text-zinc-600 dark:text-zinc-400">per order (excl. shipping if applicable)</flux:text>
            </div>
        </div>

        <!-- Checkout Form -->
        <form wire:submit="book" class="space-y-4">
            <div class="rounded-xl border border-lime-200 bg-lime-50/60 p-3 dark:border-lime-900/40 dark:bg-lime-900/10">
                <flux:text class="text-sm text-lime-800 dark:text-lime-300">
                    Add this item to your order. You will choose payment and confirm shipping or digital delivery on the next step.
                </flux:text>
            </div>

            @if (($property->setup_service_price ?? 0) > 0)
                <flux:field>
                    <flux:label>Add-on services</flux:label>
                    <flux:select variant="listbox" wire:model.live="serviceType">
                        <flux:select.option value="script_only">Product only</flux:select.option>
                        <flux:select.option value="script_with_setup">
                            Product + professional setup (+${{ number_format($property->setup_service_price, 2) }})
                        </flux:select.option>
                    </flux:select>
                    <flux:error name="serviceType" />
                </flux:field>
            @endif

            <!-- Price Breakdown -->
            @if ($this->priceCalculation)
                <div class="pt-4 border-t border-zinc-200 dark:border-zinc-700 space-y-3">
                    <!-- Price Details -->
                    <div class="space-y-2">
                        <div class="flex justify-between">
                            <flux:text class="text-zinc-600 dark:text-zinc-400">
                                Item subtotal
                            </flux:text>
                            <flux:text class="text-zinc-900 dark:text-zinc-100">
                                ${{ number_format($this->priceCalculation['price_per_night'] * $this->priceCalculation['nights'], 2) }}
                            </flux:text>
                        </div>

                        @if ($this->priceCalculation['cleaning_fee'] > 0)
                            <div class="flex justify-between">
                                <flux:text class="text-zinc-600 dark:text-zinc-400">Handling fee</flux:text>
                                <flux:text class="text-zinc-900 dark:text-zinc-100">
                                    ${{ number_format($this->priceCalculation['cleaning_fee']) }}
                                </flux:text>
                            </div>
                        @endif

                        <div class="flex justify-between">
                            <flux:text class="text-zinc-600 dark:text-zinc-400">Platform fee (10%)</flux:text>
                            <flux:text class="text-zinc-900 dark:text-zinc-100">
                                ${{ number_format($this->priceCalculation['service_fee'], 2) }}
                            </flux:text>
                        </div>

                        @if (($this->priceCalculation['setup_service_fee'] ?? 0) > 0)
                            <div class="flex justify-between">
                                <flux:text class="text-zinc-600 dark:text-zinc-400">Setup service</flux:text>
                                <flux:text class="text-zinc-900 dark:text-zinc-100">
                                    ${{ number_format($this->priceCalculation['setup_service_fee'], 2) }}
                                </flux:text>
                            </div>
                        @endif
                    </div>

                    <!-- Total -->
                    <div class="flex justify-between pt-3 border-t border-zinc-200 dark:border-zinc-700">
                        <flux:heading size="base" class="text-zinc-900 dark:text-zinc-100">Total</flux:heading>
                        <flux:heading size="base" class="text-zinc-900 dark:text-zinc-100">
                            ${{ number_format($this->priceCalculation['total_price'], 2) }}
                        </flux:heading>
                    </div>
                </div>
            @endif

            <!-- Optional Fields (Collapsible) -->
            @if ($checkIn && $checkOut)
                <div class="pt-4 border-t border-zinc-200 dark:border-zinc-700 space-y-4">
                    <flux:field>
                        <flux:label>Phone Number (Optional)</flux:label>
                        <flux:input 
                            type="tel" 
                            wire:model="guestPhone" 
                            placeholder="Your phone number"
                            :error="$errors->first('guestPhone')"
                        />
                        <flux:error name="guestPhone" />
                    </flux:field>

                    <flux:field>
                        <flux:label>Special Requests (Optional)</flux:label>
                        <flux:textarea 
                            wire:model="specialRequests" 
                            rows="3"
                            placeholder="Any setup notes or custom requirements?"
                            :error="$errors->first('specialRequests')"
                        />
                        <flux:error name="specialRequests" />
                    </flux:field>
                </div>
            @endif

            <!-- Place Order Button -->
            <flux:button 
                type="submit" 
                variant="primary" 
                class="w-full"
            >
                @if ($property->instant_book)
                    <flux:icon.bolt variant="micro" class="w-4 h-4" />
                    Buy now
                @else
                    Add to cart & checkout
                @endif
            </flux:button>

            <!-- Checkout Notes -->
            @if ($checkIn && $checkOut)
                <div class="pt-4 space-y-2 text-xs text-zinc-500 dark:text-zinc-400">
                    <p><strong>• Your order:</strong> Covers this product listing; shipping or digital delivery is confirmed at checkout.</p>
                    @if (($property->setup_service_price ?? 0) > 0)
                        <p><strong>• Services:</strong> Optional setup or installation add-on available.</p>
                    @endif
                    <p class="pt-2 text-zinc-400 dark:text-zinc-500">
                        After placing your order, choose your payment method to complete checkout.
                    </p>
                </div>
            @endif
        </form>
    </flux:card>

    <!-- Flash Messages -->
    @if (session()->has('error'))
        <div class="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
            <flux:text class="text-sm text-red-700 dark:text-red-400">
                {{ session('error') }}
            </flux:text>
        </div>
    @endif
</div>
