@props([
    'name',
    'label' => null,
    'min' => 0,
    'max' => 100,
    'step' => 1,
    'value' => null,
    'valueMin' => null,
    'valueMax' => null,
    'marks' => [],
    'help' => null,
    'error' => null,
])

@php
    $isRange = $valueMin !== null && $valueMax !== null;
    $resolvedError = $error ?? $errors->first($name);
@endphp

<x-forms.field :label="$label" :help="$help" :error="$resolvedError">
    <div x-data="rangeSlider({
            min: {{ $min }}, max: {{ $max }}, step: {{ $step }},
            value: {{ $value ?? 'null' }}, valueMin: {{ $valueMin ?? 'null' }}, valueMax: {{ $valueMax ?? 'null' }},
         })" class="pt-2">
        @if ($isRange)
            <input type="hidden" name="{{ $name }}_min" :value="valueMin">
            <input type="hidden" name="{{ $name }}_max" :value="valueMax">
            <div class="relative h-2 rounded-full bg-slate-200">
                <div class="absolute h-2 rounded-full bg-primary" :style="`left: ${minPercent}%; right: ${100 - maxPercent}%`"></div>
                <input type="range" min="{{ $min }}" max="{{ $max }}" step="{{ $step }}" x-model.number="valueMin" @input="onMinInput($event.target.value)" class="range-thumb absolute inset-x-0 top-1/2 w-full -translate-y-1/2 appearance-none bg-transparent">
                <input type="range" min="{{ $min }}" max="{{ $max }}" step="{{ $step }}" x-model.number="valueMax" @input="onMaxInput($event.target.value)" class="range-thumb absolute inset-x-0 top-1/2 w-full -translate-y-1/2 appearance-none bg-transparent">
            </div>
            <div class="mt-2 flex justify-between text-xs text-slate-500">
                <span x-text="valueMin"></span>
                <span x-text="valueMax"></span>
            </div>
        @else
            <input type="range" name="{{ $name }}" min="{{ $min }}" max="{{ $max }}" step="{{ $step }}" x-model.number="value"
                   {{ $attributes->merge(['class' => 'w-full accent-primary']) }}>
            <div class="mt-1 text-right text-xs text-slate-500" x-text="value"></div>
        @endif

        @if (count($marks))
            <div class="mt-1 flex justify-between text-[10px] text-slate-400">
                @foreach ($marks as $mark)
                    <span>{{ $mark }}</span>
                @endforeach
            </div>
        @endif
    </div>
</x-forms.field>