{{-- Modern Price Range Filter Component --}}
@props(['priceRange', 'minPrice' => null, 'maxPrice' => null])

<div class="px-5 py-4" x-data="{
    open: true,
    minValue: @entangle('minPrice'),
    maxValue: @entangle('maxPrice'),
    tempMin: '',
    tempMax: ''
}">
    <button
        @click="open = !open"
        class="flex items-center justify-between w-full text-left group"
    >
        <div class="flex items-center gap-2">
            <h3 class="text-sm font-semibold text-zinc-900 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">Price Range</h3>
            @if($minPrice !== null || $maxPrice !== null)
                <span class="inline-flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-indigo-600 rounded-full">1</span>
            @endif
        </div>
        <div class="w-6 h-6 rounded-lg bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center group-hover:bg-indigo-100 dark:group-hover:bg-indigo-900/30 transition-colors">
            <svg class="w-3.5 h-3.5 text-zinc-500 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-all duration-200" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
        </div>
    </button>

    <div x-show="open" x-collapse class="mt-4 space-y-4">
        {{-- Price range indicator --}}
        <div class="flex items-center justify-between px-3 py-2 bg-zinc-50 dark:bg-zinc-800 rounded-xl">
            <span class="text-xs text-zinc-500 dark:text-zinc-400">Available range</span>
            <span class="text-xs font-semibold text-zinc-700 dark:text-zinc-300">
                ${{ number_format($priceRange['min'], 0) }} - ${{ number_format($priceRange['max'], 0) }}
            </span>
        </div>

        {{-- Input fields --}}
        <div class="flex items-center gap-3">
            <div class="flex-1 relative">
                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400 text-sm">$</span>
                <input
                    type="number"
                    x-model="tempMin"
                    placeholder="{{ number_format($priceRange['min'], 0) }}"
                    class="w-full pl-7 pr-3 py-2.5 text-sm border-0 rounded-xl bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                >
            </div>
            <div class="flex-shrink-0">
                <svg class="w-4 h-4 text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
                </svg>
            </div>
            <div class="flex-1 relative">
                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400 text-sm">$</span>
                <input
                    type="number"
                    x-model="tempMax"
                    placeholder="{{ number_format($priceRange['max'], 0) }}"
                    class="w-full pl-7 pr-3 py-2.5 text-sm border-0 rounded-xl bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                >
            </div>
        </div>

        {{-- Buttons --}}
        <div class="flex gap-2">
            <button
                @click="$wire.applyPriceRange(tempMin, tempMax)"
                class="flex-1 px-4 py-2.5 text-sm font-semibold bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl transition-all hover:shadow-lg hover:shadow-indigo-500/25"
            >
                Apply Range
            </button>
            @if($minPrice !== null || $maxPrice !== null)
                <button
                    wire:click="clearPriceFilter"
                    class="px-4 py-2.5 text-sm font-medium text-zinc-700 dark:text-zinc-300 bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded-xl transition-colors"
                >
                    Clear
                </button>
            @endif
        </div>

        {{-- Quick price shortcuts --}}
        <div class="flex flex-wrap gap-2">
            <button
                @click="tempMin = 0; tempMax = 500; $wire.applyPriceRange(0, 500)"
                class="px-3 py-1.5 text-xs font-medium text-zinc-600 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 hover:text-indigo-600 dark:hover:text-indigo-400 rounded-lg transition-all"
            >
                Under $500
            </button>
            <button
                @click="tempMin = 500; tempMax = 1000; $wire.applyPriceRange(500, 1000)"
                class="px-3 py-1.5 text-xs font-medium text-zinc-600 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 hover:text-indigo-600 dark:hover:text-indigo-400 rounded-lg transition-all"
            >
                $500 - $1000
            </button>
            <button
                @click="tempMin = 1000; tempMax = 2500; $wire.applyPriceRange(1000, 2500)"
                class="px-3 py-1.5 text-xs font-medium text-zinc-600 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 hover:text-indigo-600 dark:hover:text-indigo-400 rounded-lg transition-all"
            >
                $1000 - $2500
            </button>
            <button
                @click="tempMin = 2500; tempMax = ''; $wire.applyPriceRange(2500, null)"
                class="px-3 py-1.5 text-xs font-medium text-zinc-600 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 hover:text-indigo-600 dark:hover:text-indigo-400 rounded-lg transition-all"
            >
                $2500+
            </button>
        </div>
    </div>
</div>